/* notifications-bell.css — qo'ng'iroqcha + ochiladigan panel. Ranglar admin.html (--card-bg) va crm.html (--bg-panel) tokenlaridan olinadi. */
.nb-wrap{--nb-bg:var(--card-bg,var(--bg-panel,#fff));--nb-bd:var(--border,#e5e2dc);--nb-tx:var(--text-main,#1c1b1a);--nb-mu:var(--text-muted,#77746e);--nb-ac:var(--accent-blue,var(--accent,#3b82c4));
  position:relative;display:inline-flex;margin-right:2px}
.nb-wrap[hidden]{display:none}
.nb-btn{position:relative;width:36px;height:36px;border-radius:999px;border:1px solid var(--nb-bd);background:var(--nb-bg);color:var(--nb-mu);display:grid;place-items:center;cursor:pointer;padding:0;transition:color .15s,border-color .15s,background .15s}
.nb-btn:hover,.nb-btn[aria-expanded=true]{color:var(--nb-tx);border-color:var(--nb-ac)}
.nb-btn:focus-visible,.nb-readall:focus-visible,.nb-item:focus-visible{outline:2px solid var(--nb-ac);outline-offset:2px}
.nb-has-unread .nb-btn{color:var(--nb-tx)}
.nb-badge{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#e5484d;color:#fff;font:700 10.5px/18px var(--sans,system-ui,sans-serif);text-align:center;box-shadow:0 0 0 2px var(--nb-bg)}
.nb-badge[hidden]{display:none}
.nb-panel{position:absolute;top:calc(100% + 10px);right:0;width:380px;max-width:calc(100vw - 24px);background:var(--nb-bg);color:var(--nb-tx);border:1px solid var(--nb-bd);border-radius:14px;box-shadow:0 18px 48px rgba(0,0,0,.22);z-index:2000;overflow:hidden;text-align:left;font-family:var(--sans,system-ui,sans-serif)}
.nb-panel[hidden]{display:none}
.nb-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid var(--nb-bd)}
.nb-head h3{margin:0;font-size:15px;font-weight:650;color:var(--nb-tx)}
.nb-readall{background:none;border:0;color:var(--nb-ac);font:600 12.5px var(--sans,system-ui,sans-serif);cursor:pointer;padding:4px 6px;border-radius:6px}
.nb-readall:hover:not(:disabled){text-decoration:underline}.nb-readall:disabled{color:var(--nb-mu);opacity:.6;cursor:default}
.nb-list{max-height:min(460px,70vh);overflow-y:auto;overscroll-behavior:contain}
.nb-item{position:relative;display:flex;gap:12px;padding:14px 16px 14px 14px;border-bottom:1px solid var(--nb-bd);cursor:pointer;border-left:3px solid transparent;transition:background .12s}
.nb-item:last-child{border-bottom:0}
.nb-item:hover{background:color-mix(in srgb,var(--nb-ac) 6%,transparent)}
.nb-unread{background:color-mix(in srgb,var(--nb-ac) 7%,transparent)}
.nb-ic{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:color-mix(in srgb,var(--lv) 15%,transparent);color:var(--lv)}
.nb-info{--lv:#3b82c4;border-left-color:var(--lv)}.nb-success{--lv:#2f9e5b;border-left-color:var(--lv)}.nb-warning{--lv:#d08a14;border-left-color:var(--lv)}.nb-important{--lv:#e5484d;border-left-color:var(--lv)}
.nb-main{flex:1;min-width:0}
.nb-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.nb-t{font-size:13.5px;font-weight:650;color:var(--nb-tx);line-height:1.35}
.nb-time{flex:none;font-size:11.5px;color:var(--nb-mu);white-space:nowrap}
.nb-body{margin:4px 0 0;font-size:13px;line-height:1.5;color:var(--nb-mu);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:pre-line}
.nb-open .nb-body{display:block;-webkit-line-clamp:unset;color:var(--nb-tx)}
.nb-link{display:inline-block;margin-top:8px;font-size:12.5px;font-weight:600;color:var(--nb-ac);text-decoration:none}.nb-link:hover{text-decoration:underline}
.nb-dot{position:absolute;top:18px;right:12px;width:8px;height:8px;border-radius:50%;background:var(--nb-ac)}
.nb-unread .nb-time{margin-right:14px}
.nb-empty{display:flex;flex-direction:column;align-items:center;gap:4px;padding:36px 24px;text-align:center;color:var(--nb-mu);font-size:13px}
.nb-empty b{color:var(--nb-tx);font-size:14px}.nb-empty-ic{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--nb-ac) 12%,transparent);color:var(--nb-ac);margin-bottom:6px}
@media(max-width:600px){.nb-wrap{position:static}.nb-panel{position:fixed;left:12px;right:12px;top:64px;width:auto;max-width:none}}