/* ═══════════════════════════════════════════════════════
   ALP PLATFORM — sidebar.css
   SINGLE SOURCE OF TRUTH for all sidebar + topbar styles.
   Loaded on every page. Do not duplicate these rules
   in any page-specific CSS file.
   ═══════════════════════════════════════════════════════ */
/* ── Body layout ── */
html, body { margin:0 !important; padding:0 !important; }
body { display:flex; height:100vh; overflow:hidden; }
/* Overlay portal — always on top regardless of stacking contexts */
#wf-builder-overlay { position:fixed !important; z-index:99999 !important; }
#main { flex:1; display:flex; flex-direction:column; overflow:hidden; }
#page-content { flex:1; overflow-y:auto; min-height:0; }

/* ── Sidebar shell — Enterprise Skin icon rail ──
   Default: 48px navy icon rail (spec §2.2). Pages that already render their
   own page-specific sub-navigation inside #sidebar keep a wider white panel
   instead, since their in-page tabs need more than 48px to read. Detected via
   a .sb-link with no data-key attribute — nav.js's own generated links
   always carry data-key, so this only matches hand-authored page-specific
   links (analytics.html, expenses.html, etc.), not pages that merely have a
   single decorative .sb-section-label div (taskboard.html, crm.html, and
   most others have exactly this and should still get the full rail). No
   per-page HTML changes needed — :has() detects this automatically. */
#sidebar {
  width:48px; min-width:48px;
  background:var(--navy,#19223D);
  border-right:none;
  display:flex; flex-direction:column;
  height:100vh; flex-shrink:0;
  transition:transform .25s ease, width .25s ease;
  z-index:10;
}
#sidebar:has(.sb-link:not([data-key])) {
  width:240px; min-width:240px;
  background:var(--sidebar-bg,#fff);
  border-right:1px solid var(--sidebar-border,#e5e7eb);
}

/* ── Logo / page title — injected by nav.js into #sb-header on every page ──
   Rail mode (default, 48px): icon-only mark, no text, navy background.
   Wide mode (:has(.sb-link:not([data-key])), 240px): full mark + page title, white. */
#sb-header { flex-shrink:0; }
.sb-logo-wrap {
  display:flex; align-items:center; justify-content:center; gap:10px;
  height:48px; min-height:48px; box-sizing:border-box;
  padding:0 6px;
  border-bottom:none;
  text-decoration:none; color:inherit;
  cursor:pointer;
}
#sidebar:has(.sb-link:not([data-key])) .sb-logo-wrap {
  justify-content:flex-start;
  height:52px; min-height:52px;
  padding:0 16px;
  border-bottom:1px solid var(--sidebar-border,#e5e7eb);
}
.sb-logo-wrap:hover .sb-logo-text { color:var(--blue,#2563eb); }
.sb-logo-mark {
  background:#fff; color:var(--navy,#19223D);
  font-size:12px; font-weight:bold;
  padding:4px 7px; border-radius:4px; letter-spacing:.05em;
  flex-shrink:0;
}
#sidebar:has(.sb-link:not([data-key])) .sb-logo-mark { background:var(--blue,#2563eb); color:#fff; padding:5px 9px; font-size:13px; }
.sb-logo-text { display:none; font-size:14px; font-weight:700; color:var(--text-primary,#111); transition:color .15s; }
#sidebar:has(.sb-link:not([data-key])) .sb-logo-text { display:inline; }

/* ── Nav area ── */
.sb-nav {
  flex:1; padding:6px 8px 0;
  overflow-y:auto; overflow-x:hidden;
  scrollbar-width:thin;
  display:flex; flex-direction:column;
}
#sidebar:not(:has(.sb-link:not([data-key]))) .sb-nav { padding:6px 5px 0; align-items:center; overflow:visible; }

/* ── Icon rail (one button per NAV section) + its flyout ──
   nav.js renders <div class="sb-rail"><div class="sb-rail-item">button +
   flyout</div>…</div> into #sb-platform-nav — button and flyout share a
   relatively-positioned wrapper so the flyout anchors to its own button
   regardless of stack position, no JS position math needed. */
.sb-rail { display:flex; flex-direction:column; gap:2px; width:100%; align-items:center; }
.sb-rail-item { position:relative; width:100%; display:flex; justify-content:center; }
.sb-rail-btn {
  width:38px; height:38px; border:none; border-radius:6px;
  background:transparent; color:rgba(255,255,255,.75);
  font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  flex-shrink:0; transition:background .12s, color .12s;
}
.sb-rail-btn:hover { background:var(--navy-2,#222D4F); color:#fff; }
.sb-rail-btn.sb-rail-active,
.sb-rail-btn.sb-rail-open { background:var(--blue,#22327D); color:#fff; }

.sb-flyout {
  display:none; position:absolute; top:0; left:44px; z-index:50;
  width:220px; max-height:70vh; overflow-y:auto;
  background:var(--surface,#fff); color:var(--text,#1F2733);
  border:1px solid var(--border-strong,#C3CAD6); border-radius:8px;
  box-shadow:0 12px 32px rgba(25,34,61,.22);
  padding:6px;
}
.sb-flyout.sb-fly-open { display:block; }
.sb-flyout-title {
  font-size:10.5px; font-weight:bold; text-transform:uppercase; letter-spacing:.08em;
  color:var(--muted,#5B6472); padding:6px 8px 4px;
}
/* Wide mode (pages with their own page-specific subnav) — the flyout
   pattern isn't needed there since there's already room for an inline list,
   but nav.js renders the same markup everywhere for consistency, so keep it
   working the same way rather than branching the JS by page type. */
#sidebar:has(.sb-link:not([data-key])) .sb-rail { align-items:stretch; }
#sidebar:has(.sb-link:not([data-key])) .sb-rail-item { display:block; }
#sidebar:has(.sb-link:not([data-key])) .sb-flyout { position:static; display:block; width:auto; max-height:none; border:none; box-shadow:none; padding:0; margin-top:4px; }
#sidebar:has(.sb-link:not([data-key])) .sb-rail-btn { display:none; }

/* Section labels — page-specific nav */
.sb-section-label {
  font-size:10px; font-weight:700; text-transform:uppercase;
  letter-spacing:.1em; color:var(--text-dim,#9ca3af);
  padding:12px 8px 3px; display:block;
}
.sb-section-label:first-child { padding-top:6px; }
/* Rail mode: a bare label with no subnav of its own (e.g. taskboard.html's
   "Workspace") is redundant clutter at 48px — the topbar already shows the
   page title — so hide it. Pages with a real subnav (wide mode) keep it. */
#sidebar:not(:has(.sb-link:not([data-key]))) .sb-section-label { display:none; }

/* Nav links */
.sb-link {
  display:flex; align-items:center; gap:9px;
  padding:7px 9px; border-radius:6px;
  font-size:13px; font-weight:500;
  color:var(--text-secondary,#4b5563);
  text-decoration:none; transition:all .15s;
  width:100%; box-sizing:border-box;
  white-space:nowrap; overflow:hidden;
}
.sb-link:hover { background:var(--bg-hover,rgba(0,0,0,.04)); color:var(--text-primary,#111); }
.sb-link.active  { background:var(--bg-active,rgba(37,99,235,.07)); color:var(--blue,#2563eb); font-weight:600; }

/* Icon column */
.sb-icon { width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; color:inherit; }

/* ── Platform nav section — sits at bottom of flex column ── */
#sb-platform-nav {
  margin-top:auto;
  padding-top:0;
  padding-bottom:4px;
  flex-shrink:0;
  /* Hidden until db.js loads user role + feature flags, otherwise the first
     paint shows every nav item before filtering. _refreshSidebarUser in db.js
     re-renders and sets data-ready=true, which reveals the nav. */
  visibility: hidden;
}
#sb-platform-nav[data-ready="true"] { visibility: visible; }
/* Rail mode: the platform nav IS the whole sidebar nav (no page-specific
   tabs above it), so it shouldn't be pushed to the bottom the way it is on
   pages that have their own tabs first. */
#sidebar:not(:has(.sb-link:not([data-key]))) #sb-platform-nav { margin-top:0; }
/* Kill CSS transitions on first paint so groups snap into final state
   rather than animating open/closed — avoids the visual "settling" flash. */
#sb-platform-nav.sb-no-transition,
#sb-platform-nav.sb-no-transition * { transition: none !important; }

/* "Platform" divider label */
.sb-plat-divider {
  display:flex; align-items:center; gap:6px;
  padding:10px 8px 4px;
  margin-bottom:2px;
}
.sb-plat-divider::before {
  content:''; flex:1; height:1px;
  background:var(--sidebar-border,#e5e7eb);
}
.sb-plat-divider span {
  font-size:9px; font-weight:700; text-transform:uppercase;
  letter-spacing:.14em; color:var(--text-dim,#9ca3af);
  flex-shrink:0;
}
.sb-plat-divider::after {
  content:''; flex:1; height:1px;
  background:var(--sidebar-border,#e5e7eb);
}

/* Group container */
.sb-grp { margin-bottom:1px; }

/* Group header button */
.sb-grp-hdr {
  width:100%; display:flex; align-items:center; gap:7px;
  padding:5px 9px; border-radius:6px;
  background:none; border:none; cursor:pointer; font-family:inherit;
  color:var(--text-dim,#9ca3af);
  transition:background .12s, color .12s;
  text-align:left;
}
.sb-grp-hdr:hover {
  background:var(--bg-hover,rgba(0,0,0,.04));
  color:var(--text-secondary,#4b5563);
}
.sb-grp-icon {
  width:18px; height:18px; display:inline-flex;
  align-items:center; justify-content:center;
  font-size:12px; flex-shrink:0;
}
.sb-grp-label {
  flex:1; font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.1em;
}
.sb-grp-chev {
  flex-shrink:0; color:var(--text-dim,#9ca3af);
  transition:transform .2s ease;
}
.sb-grp-chev-open { transform:rotate(180deg); }

/* Active dot — shown on closed group that contains the active page */
.sb-grp-active-dot {
  width:5px; height:5px; border-radius:50%;
  background:var(--blue,#2563eb);
  flex-shrink:0; margin-right:2px;
}

/* Group body — collapsed by default, expanded with .sb-grp-open */
.sb-grp-body {
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .2s ease;
  overflow:hidden;
}
.sb-grp-body.sb-grp-open {
  grid-template-rows:1fr;
}
.sb-grp-body > * { min-height:0; overflow:hidden; }

/* Platform links — inside a .sb-flyout (rail mode) or inline below a
   page's own tabs (wide mode) */
.sb-plat-link {
  padding:6px 8px !important;
  font-size:12.5px !important;
}
.sb-plat-link .sb-icon { font-size:12px; }

/* Flag badges inside accordion items */
.sb-flag-badge {
  margin-left:auto; font-size:8px; font-weight:700;
  padding:1px 5px; border-radius:8px; letter-spacing:.04em; color:#fff;
  flex-shrink:0;
}
.sb-flag-beta { background:#7c3aed; }
.sb-flag-dev  { background:#d97706; }

/* ── Footer / user ── */
.sb-footer {
  padding:10px 12px; flex-shrink:0;
  border-top:1px solid var(--sidebar-border,#e5e7eb);
  display:flex; flex-direction:row; align-items:center; gap:6px;
  overflow:hidden;
}
.sb-user { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text-secondary,#4b5563); flex:1; min-width:0; overflow:hidden; }
.sb-signout {
  flex-shrink:0; font-size:10px; color:var(--text-dim,#9ca3af);
  padding:4px 8px; border:1px solid var(--sidebar-border,#e5e7eb);
  border-radius:4px; background:none; cursor:pointer;
  font-family:inherit; transition:all .15s; white-space:nowrap;
}
.sb-signout:hover { color:var(--red,#dc2626); border-color:var(--red,#dc2626); }

/* Rail mode: not enough width for name/email text — keep just the avatar,
   shrink sign-out to an icon-ish glyph. Wide mode is untouched above. */
#sidebar:not(:has(.sb-link:not([data-key]))) .sb-footer { flex-direction:column; padding:8px 4px; border-top-color:var(--navy-2,#222D4F); }
#sidebar:not(:has(.sb-link:not([data-key]))) .sb-user span { display:none; }
#sidebar:not(:has(.sb-link:not([data-key]))) .sb-signout { color:rgba(255,255,255,.6); border-color:var(--navy-2,#222D4F); }
#sidebar:not(:has(.sb-link:not([data-key]))) .sb-signout:hover { color:#fff; border-color:var(--red,#B3362B); }

/* ── Topbar — Enterprise Skin: navy chrome band ── */
#topbar {
  min-height:48px; flex-shrink:0; box-sizing:border-box;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  padding:8px 16px; gap:8px 12px;
  border-bottom:none;
  background:var(--navy,#19223D);
  overflow:visible;
  position:relative; z-index:10;
}
.tb-left  { display:flex; align-items:center; gap:8px; min-width:0; flex-shrink:1; overflow:visible; }
.tb-right { display:flex; align-items:center; gap:8px; flex-shrink:0; flex-wrap:wrap; }

/* Page title — unified across all pages */
#page-title, #topbar h1 {
  font-size:16px; font-weight:bold;
  color:#fff;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  margin:0; line-height:1.2;
}
.tb-subtitle { font-size:12px; color:rgba(255,255,255,.6); white-space:nowrap; }

/* Icon buttons and hamburger inside the navy topbar need light-on-dark
   colouring — the same .btn-icon/.sb-toggle classes are also used
   elsewhere on white surfaces with the dark/muted styling from
   enterprise.css, so this is scoped to #topbar only. */
#topbar .btn-icon { color:rgba(255,255,255,.85); }
#topbar .btn-icon:hover { background:var(--navy-2,#222D4F); color:#fff; }

/* ── Hamburger ── */
.sb-toggle {
  display:none; background:none; border:none;
  font-size:22px; cursor:pointer; padding:6px 10px;
  color:rgba(255,255,255,.85);
  border-radius:6px; transition:all .15s; flex-shrink:0; line-height:1;
  min-width:44px; min-height:44px; /* touch target */
  align-items:center; justify-content:center;
}
.sb-toggle:hover { background:var(--navy-2,#222D4F); color:#fff; }

/* ── Mobile overlay ── */
.sb-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:99; opacity:0; transition:opacity .25s; }
.sb-overlay.visible { display:block; opacity:1; }

/* ── Avatar ── */
.avatar    { width:30px; height:30px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:bold; color:#fff; flex-shrink:0; border:2px solid rgba(255,255,255,.5); box-sizing:border-box; }
.avatar-sm { width:28px; height:28px; font-size:11px; }

/* ── Shared buttons ── */
.btn-icon { background:none; border:none; border-radius:6px; padding:5px 8px; font-size:14px; cursor:pointer; transition:all .15s; color:var(--text-muted,#6b7280); }
.btn-icon:hover { color:var(--blue,#2563eb); background:var(--bg-hover,rgba(0,0,0,.04)); }
.btn-primary   { background:var(--blue,#2563eb); color:#fff; border:none; padding:8px 18px; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; font-family:inherit; white-space:nowrap; flex-shrink:0; }
.btn-primary:hover { opacity:.9; }
.btn-secondary { background:transparent; color:var(--text-secondary,#4b5563); border:1px solid var(--border-primary,rgba(0,0,0,.12)); padding:8px 18px; border-radius:8px; font-size:13px; cursor:pointer; font-family:inherit; }
.btn-secondary:hover { border-color:var(--blue,#2563eb); }
.btn-danger    { background:var(--red,#dc2626); color:#fff; border:none; padding:8px 18px; border-radius:8px; font-size:13px; cursor:pointer; font-family:inherit; }
.btn-sm { padding:5px 12px; font-size:12px; }

/* ── Shared form classes ── */
.form-group  { margin-bottom:12px; }
.form-label  { display:block; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--text-dim,#9ca3af); margin-bottom:4px; }
.form-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:16px; flex-wrap:wrap; }
.modal-title { font-size:18px; font-weight:700; margin-bottom:16px; }

/* ── Notifications ── */
.notif-controls { flex-shrink:0; }

/* ── Email compose ── */
.em-compose { max-width:100%; }
.em-field-row { display:flex; gap:10px; }
.em-bar { display:flex; gap:2px; padding:6px 8px; border:1px solid var(--border-primary,rgba(0,0,0,.1)); border-bottom:none; border-radius:8px 8px 0 0; background:var(--bg-hover,rgba(0,0,0,.03)); }
.em-bar button { width:28px; height:28px; border:none; background:none; border-radius:4px; cursor:pointer; font-size:12px; color:var(--text-primary,#111); display:flex; align-items:center; justify-content:center; }
.em-bar button:hover { background:rgba(0,0,0,.06); }
.em-sep { width:1px; height:20px; background:var(--border-primary,rgba(0,0,0,.1)); margin:4px; align-self:center; }
.em-editor { border:1px solid var(--border-primary,rgba(0,0,0,.1)); border-radius:0 0 8px 8px; min-height:180px; padding:14px; font-size:14px; line-height:1.6; color:var(--text-primary,#111); background:var(--bg-secondary,#fff); outline:none; overflow-y:auto; max-height:300px; }
.em-editor p { margin:0 0 8px; }
.em-editor ul, .em-editor ol { margin:8px 0; padding-left:20px; }

/* ══════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════ */

@media(max-width:1024px) {
  .sb-toggle { display:flex !important; position:relative; z-index:11; }
  #sidebar {
    position:fixed; top:0; left:0; z-index:100;
    transform:translateX(-100%);
    width:260px !important; min-width:0 !important;
    height:100vh; height:100dvh;
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    box-shadow:4px 0 24px rgba(0,0,0,.15);
  }
  #sidebar.open { transform:translateX(0); }
  .sb-nav, .nav-list { flex:1; overflow-y:auto; min-height:0; }
  .sb-footer { flex-shrink:0; }
  #main { margin-left:0 !important; }
  #topbar h1, #page-title { font-size:16px !important; }
  .tb-left .sb-toggle { margin-right:4px; }
}

@media(max-width:640px) {
  #sidebar { width:240px !important; }
  #topbar { padding:0 12px !important; gap:8px !important; }
  #page-title, #topbar h1 { font-size:15px !important; }
  .tb-search { width:100% !important; order:10; }
  .tb-right { flex-wrap:wrap; gap:6px !important; }
  .tb-filter { width:auto; font-size:11px; padding:5px 8px; }
  .stat-row { grid-template-columns:repeat(2,1fr) !important; padding:12px !important; gap:8px !important; }
  .stat-card { padding:12px !important; }
  .stat-value { font-size:18px !important; }
  .data-table { display:block; overflow-x:auto; white-space:nowrap; }
  .pipeline-wrap { overflow-x:auto; padding-bottom:12px; }
  #page-content { padding:8px !important; }
  #content { padding:16px !important; }
  .modal-row { grid-template-columns:1fr !important; }
  .role-grid { grid-template-columns:1fr !important; padding:12px !important; }
  .detail-panel { width:100% !important; max-width:100% !important; }
  .em-field-row { flex-direction:column; gap:0; }
  .em-editor { min-height:120px; max-height:200px; }
}

@media(max-width:900px) {
  .tb-right .tb-search { max-width:120px; }
  #topbar .btn-primary { font-size:11px; padding:5px 10px; white-space:nowrap; }
}

@media(max-width:400px) {
  #sidebar { width:220px !important; }
  .stat-row { grid-template-columns:1fr !important; }
  .card-grid { grid-template-columns:1fr !important; }
}

/* ── Base scroll containers ────────────────────────────────── */
#page-content,
#content { flex:1; overflow-y:auto; overflow-x:hidden; padding:20px 24px; }
@media(max-width:640px){
  #page-content, #content { padding:14px 14px !important; }
}

/* ── Universal bottom breathing room ────────────────────────
   Ensures the last item on every page is never flush against
   the bottom edge of the scrollable content area.           */
#page-content > *:last-child,
#content > *:last-child,
#hr-content > *:last-child,
#hub-content > *:last-child,
.main-content > *:last-child { margin-bottom: 60px; }

#page-content,
#content,
#hr-content,
#hub-content { padding-bottom: 80px; }

/* ══════════════════════════════════════════════════════════════════
   FILTER DROPDOWN — universal floating panel from topbar button
   ══════════════════════════════════════════════════════════════════ */
/* ═══ FILTER DRAWER — slide-down panel below topbar ═══ */
#filter-drawer {
  border-bottom: 1px solid var(--border-primary, rgba(0,0,0,.08));
  background: var(--bg-secondary, #fff);
  flex-shrink: 0;
}
.fd-tab {
  display: flex; align-items: center; gap: 6px;
  width: 100%; padding: 7px 16px;
  background: none; border: none;
  font-size: 12px; font-weight: 600; font-family: inherit;
  color: var(--text-secondary, #4b5563);
  cursor: pointer; transition: color .15s;
  text-align: left;
}
.fd-tab:hover { color: var(--blue, #2563eb); }
.fd-tab.active { color: var(--blue, #2563eb); }
.fd-tab-arrow {
  margin-left: auto; font-size: 11px;
  transition: transform .2s ease;
}
.fd-tab.active .fd-tab-arrow { transform: rotate(180deg); }
.fd-tab-count {
  background: var(--blue, #2563eb); color: #fff;
  font-size: 10px; font-weight: 800;
  min-width: 16px; height: 16px;
  border-radius: 8px; display: inline-flex;
  align-items: center; justify-content: center;
  padding: 0 4px;
}
.fd-panel {
  max-height: 0; overflow: hidden;
  transition: max-height .25s ease;
}
.fd-panel.open {
  max-height: 500px;
}
.fd-panel-body {
  padding: 8px 16px 14px;
  display: flex; flex-wrap: wrap; gap: 12px;
  align-items: flex-start;
  border-top: 1px solid var(--border-primary, rgba(0,0,0,.06));
}
.fd-panel-body .fd-field {
  display: flex; flex-direction: column; gap: 4px;
  min-width: 140px; flex: 1;
}
.fd-panel-body .fd-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--text-dim, #9ca3af);
}
.fd-panel-body .fd-select {
  width: 100%; padding: 6px 8px;
  border: 1px solid var(--border-primary, rgba(0,0,0,.1));
  border-radius: 8px; font-size: 12px;
  background: var(--bg-input, #f9fafb); color: var(--text-primary, #111);
  font-family: inherit;
}
.fd-panel-body .fd-select:focus { outline: none; border-color: var(--blue, #2563eb); }
.fd-panel-body .fd-pills { display: flex; flex-wrap: wrap; gap: 5px; }
.fd-panel-body .fd-pill {
  padding: 4px 10px; border-radius: 20px;
  font-size: 11px; font-weight: 600; cursor: pointer;
  border: 1.5px solid var(--border-primary, rgba(0,0,0,.1));
  background: var(--bg-secondary, #fff); color: var(--text-muted, #6b7280);
  transition: all .12s; font-family: inherit;
}
.fd-panel-body .fd-pill:hover { border-color: var(--blue); color: var(--blue); }
.fd-panel-body .fd-pill.active {
  background: var(--blue-subtle, #eff6ff);
  border-color: var(--blue); color: var(--blue); font-weight: 700;
}
.fd-panel-actions {
  display: flex; align-items: center; margin-left: auto;
  align-self: flex-end;
}
.fd-panel-actions .fd-clear {
  font-size: 11px; color: var(--blue, #2563eb); cursor: pointer;
  background: none; border: none; font-family: inherit; padding: 4px 0;
}
.fd-panel-actions .fd-clear:hover { text-decoration: underline; }
/* Active filter chips shown inline in the tab */
.fd-tab-chips {
  display: inline-flex; gap: 4px; margin-left: 4px;
}
.fd-active-chip {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 8px; border-radius: 20px; font-size: 10px; font-weight: 600;
  background: var(--blue-subtle, #eff6ff); color: var(--blue, #2563eb);
  border: 1px solid rgba(37,99,235,.2); cursor: pointer;
  white-space: nowrap; transition: opacity .12s;
}
.fd-active-chip:hover { opacity: .7; }

@media (max-width:600px) {
  .fd-panel-body { flex-direction: column; }
  .fd-panel-body .fd-field { min-width: 100%; }
}

/* ═══ LEGACY FILTER DROPDOWN — used by CRM and other pages ═══ */
.tb-filter-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 8px;
  background: var(--bg-secondary); color: var(--text-secondary);
  border: 1px solid var(--border-primary);
  font-size: 12px; font-weight: 600; cursor: pointer;
  font-family: inherit; transition: all .15s; white-space: nowrap;
  flex-shrink: 0;
}
.tb-filter-btn:hover { border-color: var(--blue); color: var(--blue); }
.tb-filter-btn.active {
  background: var(--blue-subtle, #eff6ff);
  color: var(--blue); border-color: var(--blue);
}
.tb-filter-btn .tb-filter-count {
  background: var(--blue); color: #fff;
  font-size: 10px; font-weight: 800;
  min-width: 16px; height: 16px;
  border-radius: 8px; display: inline-flex;
  align-items: center; justify-content: center;
  padding: 0 4px;
}
.filter-dropdown {
  position: fixed;
  top: 52px; right: 12px;
  width: 320px; max-width: calc(100vw - 24px);
  max-height: calc(100vh - 72px);
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.14);
  z-index: 200;
  display: none;
  flex-direction: column;
  overflow: hidden;
  animation: fdropIn .15s ease;
}
.filter-dropdown.open { display: flex; }
@keyframes fdropIn {
  from { opacity:0; transform:translateY(-6px) scale(.98); }
  to   { opacity:1; transform:none; }
}
.filter-dropdown .fd-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--border-primary);
  flex-shrink: 0;
}
.filter-dropdown .fd-title { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.filter-dropdown .fd-clear {
  font-size: 11px; color: var(--blue); cursor: pointer;
  background: none; border: none; font-family: inherit; padding: 0;
}
.filter-dropdown .fd-clear:hover { text-decoration: underline; }
.filter-dropdown .fd-body { padding: 12px 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.filter-dropdown .fd-field { display: flex; flex-direction: column; gap: 5px; }
.filter-dropdown .fd-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--text-dim);
}
.filter-dropdown .fd-select {
  width: 100%; padding: 7px 10px;
  border: 1px solid var(--border-primary);
  border-radius: 8px; font-size: 13px;
  background: var(--bg-input); color: var(--text-primary);
  font-family: inherit;
}
.filter-dropdown .fd-select:focus { outline: none; border-color: var(--blue); }
.filter-dropdown .fd-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-dropdown .fd-pill {
  padding: 4px 12px; border-radius: 20px;
  font-size: 11px; font-weight: 600; cursor: pointer;
  border: 1.5px solid var(--border-primary);
  background: var(--bg-secondary); color: var(--text-muted);
  transition: all .12s; font-family: inherit;
}
.filter-dropdown .fd-pill:hover { border-color: var(--blue); color: var(--blue); }
.filter-dropdown .fd-pill.active {
  background: var(--blue-subtle, #eff6ff);
  border-color: var(--blue); color: var(--blue); font-weight: 700;
}
.filter-dropdown-backdrop {
  display: none; position: fixed; inset: 0; z-index: 199;
}
.filter-dropdown-backdrop.open { display: block; }
@media (max-width: 768px) {
  .filter-dropdown {
    top: auto; bottom: 0; right: 0; left: 0;
    width: 100%; max-width: 100%;
    border-radius: 18px 18px 0 0;
    max-height: 80dvh;
  }
}