/* Topbar notification bell + history panel. Light and dark from the start. */

/* The topbar is a 3-track grid (commandPalette.css: `1fr auto 1fr !important`),
   so the bell must NOT become a fourth child — it would take the account menu's
   column and push it to a second row. This wrapper occupies the existing
   right-hand cell and holds bell + account menu side by side. */
.nb-right{
  display:flex; align-items:center; gap:8px;
  justify-self:end;          /* stay pinned right, as the acct menu was */
  min-width:0;
}
.nb-wrap{ position:relative; display:inline-flex; align-items:center; flex:0 0 auto; }

/* Give the bell a real surface and dark ink. It was transparent with a thin
   #64748b stroke, which computed as "visible" but read as an empty white box —
   invisible in practice is invisible, whatever getComputedStyle says. */
.nb-btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:12px;
  padding:0 !important;                       /* beat the global button{padding:13px 17px} */
  margin:0 !important;                        /* and global button{margin:3px} */
  background:#eef2f7 !important;              /* a visible affordance, not a ghost */
  border:1px solid #dbe3ec !important;
  color:#334155 !important;                   /* dark enough to actually read */
  box-shadow:none !important;                 /* global button{} adds a blue shadow */
  cursor:pointer; flex:0 0 auto;
  transition:background .15s, color .15s;
}
.nb-btn svg{ width:20px; height:20px; stroke-width:2.1; }
.nb-btn:hover{ background:#e2e8f0 !important; color:#0f172a !important; transform:none; }
.nb-btn[aria-expanded="true"]{ background:#e0f2fe !important; border-color:#7dd3fc !important; color:#0369a1 !important; }

/* The badge is the whole point of the bell — it must read at a glance. */
.nb-count{
  position:absolute; top:2px; right:2px;
  min-width:17px; height:17px; padding:0 4px;
  background:#dc2626; color:#fff;
  border-radius:999px; border:2px solid #fff;
  font-size:10px; font-weight:800; line-height:13px; text-align:center;
}

.nb-panel{
  position:absolute; top:calc(100% + 8px); right:0; z-index:5200;
  width:min(380px, calc(100vw - 24px));
  background:#fff; color:#0f172a;
  border:1px solid #e2e8f0; border-radius:14px;
  box-shadow:0 18px 50px rgba(15,37,64,.20);
  overflow:hidden;
}
.nb-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:11px 13px; border-bottom:1px solid #e2e8f0; font-size:13px;
}
.nb-readall{
  background:none; border:0; cursor:pointer; color:#0369a1;
  font-size:11.5px; font-weight:700; padding:4px 6px; border-radius:6px;
}
.nb-readall:hover{ background:#e0f2fe; }

/* Cap the height: the bell is recent activity, not an audit log. */
.nb-list{ max-height:min(380px, 52vh); overflow-y:auto; }

/* Settings sit under the list — read first, configure rarely. */
.nb-settings{ border-top:1px solid #e2e8f0; background:#f8fafc; padding:6px 0 4px; }
.nb-set-h{
  font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:#94a3b8; padding:4px 13px 2px;
}
.nb-set{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:8px 13px; cursor:pointer;
}
.nb-set:hover{ background:#f1f5f9; }
.nb-set-t{ display:flex; flex-direction:column; gap:1px; font-size:12.2px; font-weight:700; color:#0f172a; min-width:0; }
.nb-set-t em{ font-style:normal; font-size:10.8px; font-weight:500; color:#64748b; line-height:1.3; }
/* On/Off in words beside the switch — a switch alone makes people guess. */
.nb-sw{ display:inline-flex; align-items:center; gap:8px; flex:0 0 auto; }
.nb-sw-l{ font-style:normal; font-size:10.5px; font-weight:800; color:#64748b; min-width:26px; text-align:right; }
.nb-set-note{
  font-size:10.5px; color:#94a3b8; line-height:1.4;
  padding:6px 13px 9px; border-top:1px solid #eef2f7; margin-top:2px;
}
/* A real switch, not a bare checkbox. The global `input{padding:13px 14px;
   min-width:170px; border:1px solid…}` fights every one of these, and with
   appearance:none the box collapsed to 0x0 — so each property is forced. */
.nb-set input[type="checkbox"]{
  appearance:none !important; -webkit-appearance:none !important;
  display:block !important;
  width:40px !important; height:23px !important;
  min-width:40px !important; max-width:40px !important; min-height:23px !important;
  margin:0 !important; padding:0 !important;
  flex:0 0 40px !important;
  border-radius:999px !important; background:#cbd5e1 !important;
  border:0 !important; box-shadow:none !important;
  cursor:pointer; position:relative; transition:background .15s;
}
.nb-set input[type="checkbox"]::after{
  content:""; position:absolute; top:3px; left:3px; width:17px; height:17px;
  border-radius:50%; background:#fff; transition:transform .15s;
  box-shadow:0 1px 3px rgba(0,0,0,.3);
}
.nb-set input[type="checkbox"]:checked{ background:#0284c7 !important; }
.nb-set input[type="checkbox"]:checked::after{ transform:translateX(17px); }
.nb-set input[type="checkbox"]:disabled{ opacity:.45; cursor:not-allowed; }
.nb-set input[type="checkbox"]:focus-visible{ outline:2px solid #0284c7; outline-offset:2px; }

html[data-theme="dark"] .nb-settings{ border-color:rgba(255,255,255,.08); background:rgba(255,255,255,.03); }
html[data-theme="dark"] .nb-set:hover{ background:rgba(255,255,255,.05); }
html[data-theme="dark"] .nb-set-t{ color:#e6edf6; }
html[data-theme="dark"] .nb-set-t em{ color:#a9b8cc; }
html[data-theme="dark"] .nb-set-h,
html[data-theme="dark"] .nb-set-note{ color:#7f8ea3; }
html[data-theme="dark"] .nb-set-note{ border-color:rgba(255,255,255,.06); }
html[data-theme="dark"] .nb-sw-l{ color:#a9b8cc; }
html[data-theme="dark"] .nb-set input[type="checkbox"]{ background:#33425e !important; }
html[data-theme="dark"] .nb-set input[type="checkbox"]:checked{ background:#0284c7 !important; }
html[data-theme="dark"] .nb-item{ color:#e6edf6 !important; }
html[data-theme="dark"] .nb-t{ color:#e6edf6; }
.nb-empty{ padding:26px 18px; text-align:center; color:#94a3b8; font-size:12.5px; line-height:1.5; }

/* .nb-item is a <button>, so style.css's global `button{background:#03658e;
   color:white; box-shadow:…; margin:3px}` applies to it. The title inherited
   WHITE and vanished on a white panel. Every one of these overrides an existing
   global — hence the !importants. */
.nb-item{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:10px; align-items:start;
  width:100%; text-align:left; cursor:pointer;
  padding:11px 13px !important; margin:0 !important;
  background:none !important; color:#0f172a !important;
  border:0; border-bottom:1px solid #f1f5f9;
  box-shadow:none !important; border-radius:0 !important;
  font-weight:400;
}
.nb-item:hover{ transform:none; }          /* global button:hover lifts — not in a list */
.nb-item:hover{ background:#f8fafc; }
/* Unread is carried by a left bar + weight, not colour alone (colour-blind safe). */
.nb-item.nb-unread{ background:#f7fbff; box-shadow:inset 3px 0 0 #0284c7; }
.nb-item.nb-unread .nb-t{ font-weight:800; }

.nb-ico{
  width:30px; height:30px; border-radius:9px; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
}
.nb-ico svg{ width:16px; height:16px; }
/* Channel-logo icon: a clean white tile so brand marks (B&Q green, Amazon, etc.)
   read true, overriding the per-kind tint. The image is contained, never cropped. */
.nb-ico-logo{ background:#fff !important; border:1px solid #e6edf5; padding:4px; overflow:hidden; }
.nb-ico-logo img{ width:100%; height:100%; object-fit:contain; display:block; }
.nb-ico-logo .nb-ico-fb{ display:none; align-items:center; justify-content:center; color:#475569; }
html[data-theme="dark"] .nb-ico-logo{ background:#0f1e2e !important; border-color:rgba(255,255,255,.14); }
html[data-theme="dark"] .nb-ico-logo .nb-ico-fb{ color:#94a3b8; }
.nb-txt{ min-width:0; display:flex; flex-direction:column; gap:1px; }
/* Explicit colours — inheriting from the global button{} gave white-on-white. */
.nb-t{ font-size:12.8px; font-weight:700; line-height:1.3; color:#0f172a; }
.nb-b{
  font-size:11.8px; color:#64748b; line-height:1.35;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow-wrap:anywhere;
}
.nb-when{ font-size:10.5px; color:#94a3b8; white-space:nowrap; padding-top:2px; }

/* Same per-kind colours as the popups. */
.nb-order     .nb-ico{ background:#e0f2fe; color:#0369a1; }
.nb-po        .nb-ico{ background:#ede9fe; color:#6d28d9; }
.nb-vendor    .nb-ico{ background:#fef3c7; color:#b45309; }
.nb-stock     .nb-ico{ background:#fee2e2; color:#b91c1c; }
.nb-message   .nb-ico{ background:#ccfbf1; color:#0f766e; }
.nb-container .nb-ico{ background:#dcfce7; color:#15803d; }
.nb-info      .nb-ico{ background:#eef2f7; color:#475569; }

/* Dark — matches dark.css. */
html[data-theme="dark"] .nb-btn{
  background:#16233a !important; border-color:rgba(255,255,255,.12) !important; color:#e6edf6 !important;
}
html[data-theme="dark"] .nb-btn:hover{ background:#1f2f4a !important; color:#fff !important; }
html[data-theme="dark"] .nb-btn[aria-expanded="true"]{
  background:rgba(2,132,199,.22) !important; border-color:rgba(125,211,252,.45) !important; color:#7dd3fc !important;
}
html[data-theme="dark"] .nb-count{ border-color:#0b1220; }
html[data-theme="dark"] .nb-panel{
  background:#0f1e2e; color:#e6edf6; border-color:rgba(255,255,255,.08);
  box-shadow:0 18px 50px rgba(0,0,0,.6);
}
html[data-theme="dark"] .nb-head{ border-color:rgba(255,255,255,.08); }
html[data-theme="dark"] .nb-readall{ color:#7dd3fc; }
html[data-theme="dark"] .nb-readall:hover{ background:rgba(2,132,199,.18); }
html[data-theme="dark"] .nb-item{ border-color:rgba(255,255,255,.06); }
html[data-theme="dark"] .nb-item:hover{ background:rgba(255,255,255,.04); }
html[data-theme="dark"] .nb-item.nb-unread{ background:rgba(2,132,199,.10); box-shadow:inset 3px 0 0 #0284c7; }
html[data-theme="dark"] .nb-b{ color:#a9b8cc; }
html[data-theme="dark"] .nb-when{ color:#7f8ea3; }
html[data-theme="dark"] .nb-empty{ color:#7f8ea3; }
html[data-theme="dark"] .nb-order     .nb-ico{ background:rgba(2,132,199,.18);  color:#7dd3fc; }
html[data-theme="dark"] .nb-po        .nb-ico{ background:rgba(124,58,237,.18); color:#c4b5fd; }
html[data-theme="dark"] .nb-vendor    .nb-ico{ background:rgba(245,158,11,.18); color:#fcd34d; }
html[data-theme="dark"] .nb-stock     .nb-ico{ background:rgba(220,38,38,.18);  color:#fca5a5; }
html[data-theme="dark"] .nb-message   .nb-ico{ background:rgba(13,148,136,.18); color:#5eead4; }
html[data-theme="dark"] .nb-container .nb-ico{ background:rgba(22,163,74,.18);  color:#86efac; }
html[data-theme="dark"] .nb-info      .nb-ico{ background:rgba(255,255,255,.08); color:#a9b8cc; }

/* Phone: the panel goes near-full-width so the text isn't squeezed. */
@media (max-width: 1180px){
  .nb-btn{ width:40px; height:40px; }
  .nb-panel{ width:calc(100vw - 16px); right:-6px; }
}