/* ===== Brand colors (edit here; no rebuild needed) =====
   Values are "R G B" so Tailwind opacity modifiers work (e.g. bg-brand/10). */
:root {
  --brand: 37 99 235;        /* primary buttons, links, highlights (blue-600) */
  --brand-hover: 29 78 216;  /* primary hover (blue-700) */
  --brand-soft: 239 246 255; /* light brand background (INFO box, highlighted rows) */
  --logo-bg: 15 23 42;       /* logo circle background (slate-900) */
  --logo-fg: 252 211 77;     /* logo letters (amber-300) */
  --hero-from: 15 23 42;     /* main KPI card gradient */
  --hero-to: 30 64 175;
  --header-fg: 71 85 105;    /* header icons, e.g. notifications bell (slate-600) */
}

/* Notifications bell: transparent, outline icon, classic red badge */
.bell-btn { position: relative; width: 2.5rem; height: 2.5rem; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; border-radius: 9999px; color: rgb(var(--header-fg)); transition: color .15s, background-color .15s; }
.bell-btn:hover, .bell-btn[aria-expanded="true"] { color: rgb(var(--logo-bg)); background: rgb(var(--header-fg) / .08); }
.bell-btn:focus-visible { outline: 2px solid rgb(var(--brand)); outline-offset: 2px; }
.bell-btn svg { width: 1.5rem; height: 1.5rem; }
.bell-badge { position: absolute; top: 0; right: -.125rem; min-width: 1.25rem; height: 1.25rem; padding: 0 .3rem; border-radius: 9999px; background: #dc2626; color: #fff; font-size: 11px; font-weight: 800; line-height: 1.25rem; text-align: center; box-shadow: 0 0 0 2px #fff; pointer-events: none; }
.bell-badge.hidden { display: none; }