/* notifications-bell.css — bildirishnomalar tugmasi + ochiladigan panel (2026-10-27 maketi: ikonkasiz, kunlar bo'yicha, o'qish ko'rinishi).
   Ranglar admin.html (--card-bg) va crm.html (--bg-panel) tokenlaridan olinadi; tungi mavzu — :root[data-theme="dark"]. */
.nb-wrap{--nb-bg:var(--card-bg,var(--bg-panel,#fff));--nb-bd:var(--border,#e7e4de);--nb-soft:var(--surface-2,#faf9f7);--nb-tx:var(--text-main,#1c1c1e);--nb-mu:var(--text-muted,#6b6a67);--nb-ac:var(--accent-blue,var(--accent,#3b82c4));--nb-link:var(--accent-blue-dark,#2f6ba3);
  --nb-l-info:var(--nb-mu);--nb-l-success:#2f6ba3;--nb-l-warning:#8a6427;--nb-l-important:#a3442f;
  position:relative;display:inline-flex;margin-right:2px;font-family:var(--sans,inherit)}
:root[data-theme="dark"] .nb-wrap{--nb-link:#8bbbe9;--nb-l-success:#8bbbe9;--nb-l-warning:#d3a257;--nb-l-important:#e39a8a}
.nb-wrap[hidden]{display:none}

/* Tugma: matn + son */
.nb-btn{display:inline-flex;align-items:center;gap:10px;height:34px;padding:0 14px;border:1px solid var(--nb-bd);border-radius:9px;background:var(--nb-bg);color:var(--nb-mu);font-family:inherit;font-weight:500;font-size:13px;line-height:1;cursor:pointer;white-space:nowrap;transition:color .15s,border-color .15s}
.nb-btn:hover,.nb-btn[aria-expanded=true]{color:var(--nb-tx)}
.nb-has-unread .nb-btn{color:var(--nb-tx);padding-right:8px;border-color:color-mix(in srgb,var(--nb-ac) 40%,var(--nb-bd))}
.nb-badge{min-width:20px;height:20px;padding:0 6px;box-sizing:border-box;border-radius:6px;background:var(--nb-ac);color:#fff;font-family:inherit;font-weight:600;font-size:11.5px;line-height:20px;text-align:center}
.nb-badge[hidden]{display:none}
.nb-lbl-s{display:none}
.nb-btn:focus-visible,.nb-readall:focus-visible,.nb-item:focus-visible,.nb-back:focus-visible,.nb-sound:focus-visible,.nb-link:focus-visible{outline:2px solid var(--nb-ac);outline-offset:2px}

/* Panel */
.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 16px 40px rgba(28,28,30,.12);z-index:2000;overflow:hidden;text-align:left;display:flex;flex-direction:column}
:root[data-theme="dark"] .nb-panel{box-shadow:0 18px 48px rgba(0,0,0,.45)}
.nb-panel[hidden]{display:none}
.nb-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:18px 20px 14px}
.nb-head[hidden]{display:none}
.nb-head h3{margin:0;font-size:15px;font-weight:600;color:var(--nb-tx)}
.nb-readall{background:none;border:0;padding:0;color:var(--nb-link);font-family:inherit;font-weight:500;font-size:12.5px;cursor:pointer}
.nb-readall:hover:not(:disabled){text-decoration:underline;text-underline-offset:3px}
.nb-readall:disabled{color:var(--nb-mu);opacity:.55;cursor:default}
.nb-readall[hidden]{display:none}

.nb-list{max-height:min(440px,64vh);overflow-y:auto;overscroll-behavior:contain;border-top:1px solid var(--nb-bd)}
.nb-list[hidden]{display:none}
.nb-group{padding:6px 20px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--nb-mu);background:var(--nb-soft);border-bottom:1px solid var(--nb-bd)}
.nb-item{display:flex;justify-content:space-between;align-items:baseline;gap:16px;width:100%;box-sizing:border-box;padding:12px 20px;border:0;border-bottom:1px solid var(--nb-bd);background:none;text-align:left;font:inherit;color:var(--nb-mu);cursor:pointer;transition:background .12s}
.nb-item:last-child{border-bottom:0}
.nb-item:hover{background:var(--nb-soft)}
.nb-main{display:flex;flex-direction:column;gap:3px;min-width:0}
.nb-t{font-size:13.5px;font-weight:500;line-height:1.35}
.nb-unread{color:var(--nb-tx)}
.nb-unread .nb-t{font-weight:600}
.nb-lv{font-size:12.5px;font-weight:500;color:var(--nb-l-info)}
.nb-success .nb-lv{color:var(--nb-l-success)}.nb-warning .nb-lv{color:var(--nb-l-warning)}.nb-important .nb-lv{color:var(--nb-l-important)}
.nb-time{flex:none;font-size:12px;color:var(--nb-mu);white-space:nowrap}

/* O'qish ko'rinishi */
.nb-detail{max-height:min(480px,68vh);overflow-y:auto;overscroll-behavior:contain}
.nb-detail[hidden]{display:none}
.nb-dhead{display:flex;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid var(--nb-bd)}
.nb-dhead .nb-time{margin-left:auto}
.nb-back{background:none;border:0;padding:0;color:var(--nb-link);font-family:inherit;font-weight:500;font-size:13px;cursor:pointer}
.nb-back:hover{text-decoration:underline;text-underline-offset:3px}
.nb-dbody{display:flex;flex-direction:column;gap:10px;padding:18px 20px 22px}
.nb-dbody .nb-lv{font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.nb-dt{margin:0;font-size:17px;font-weight:600;letter-spacing:-.01em;line-height:1.35;color:var(--nb-tx)}
.nb-body{margin:0;font-size:13.5px;line-height:1.6;color:var(--nb-tx);opacity:.88;white-space:pre-line;overflow-wrap:anywhere}
.nb-link{align-self:flex-start;margin-top:4px;font-size:13px;font-weight:600;color:var(--nb-link);text-decoration:none}
.nb-link:hover{text-decoration:underline;text-underline-offset:3px}

/* Bo'sh holat */
.nb-empty{display:flex;flex-direction:column;align-items:center;gap:6px;padding:48px 32px;text-align:center;color:var(--nb-mu);font-size:13px;line-height:1.5}
.nb-empty b{color:var(--nb-tx);font-size:14px;font-weight:600}
.nb-empty span{max-width:240px}

/* Pastki qator: ovoz + son */
.nb-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 20px;border-top:1px solid var(--nb-bd);background:var(--nb-soft)}
.nb-sound{background:none;border:0;padding:4px 0;font-family:inherit;font-weight:400;font-size:12.5px;color:var(--nb-mu);cursor:pointer}
.nb-sound b{font-weight:500;color:var(--nb-tx)}
.nb-sound:hover b{text-decoration:underline;text-underline-offset:3px}
.nb-count{font-size:12px;color:var(--nb-mu)}

@media(max-width:600px){
  .nb-wrap{position:static}
  .nb-lbl{display:none}.nb-lbl-s{display:inline}
  .nb-btn{padding:0 10px}
  .nb-panel{position:fixed;left:12px;right:12px;top:64px;width:auto;max-width:none}
}