/* =============================================================
   BizSight Admin Portal v3 — Design System
   Dark / light adaptive. No Bootstrap dependency.
   ============================================================= */

/* ── Theme tokens — "Option 3 Enterprise HRMS" design system ─
   Canonical --bn-* tokens per biznexahr_option3_tokens.css / CLAUDE_UI_UX_HANDOVER.md.
   Every pre-existing variable name below is aliased to a --bn-* value rather
   than removed, so all existing components/Blade views re-skin from this one
   block with zero other file changes — see DECISIONS.md for the ADR. ────── */
:root {
    /* Canonical brand/neutral/semantic scale */
    --bn-primary-50:#eff6ff; --bn-primary-100:#dbeafe; --bn-primary-200:#bfdbfe; --bn-primary-300:#93c5fd;
    --bn-primary-400:#60a5fa; --bn-primary-500:#3b82f6; --bn-primary-600:#2563eb; --bn-primary-700:#1d4ed8;
    --bn-primary-800:#1e40af; --bn-primary-900:#1e3a8a;
    --bn-canvas:#f6f8fc; --bn-surface:#fff; --bn-surface-muted:#f8fafc; --bn-border:#e2e8f0; --bn-border-strong:#cbd5e1;
    --bn-text:#0f172a; --bn-text-2:#475569; --bn-text-3:#64748b; --bn-text-4:#94a3b8;
    --bn-pink:#ec4899; --bn-cyan:#06b6d4; --bn-teal:#14b8a6; --bn-orange:#f97316; --bn-amber:#f59e0b;
    --bn-lime:#84cc16; --bn-purple:#8b5cf6;
    --bn-success:#16a34a; --bn-success-bg:#dcfce7; --bn-success-t:#166534;
    --bn-warning:#f59e0b; --bn-warning-bg:#fef3c7; --bn-warning-t:#92400e;
    --bn-danger:#dc2626;  --bn-danger-bg:#fee2e2;  --bn-danger-t:#991b1b;
    --bn-info:#2563eb;    --bn-info-bg:#dbeafe;    --bn-info-t:#1e40af;
    --bn-font:'Inter',system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    --bn-r4:4px; --bn-r8:8px; --bn-r10:10px; --bn-r14:14px; --bn-r18:18px; --bn-r24:24px; --bn-pill:999px;
    --bn-shadow-1:0 1px 2px rgba(15,23,42,.06); --bn-shadow-2:0 4px 14px rgba(15,23,42,.07);
    --bn-shadow-3:0 10px 28px rgba(15,23,42,.10); --bn-shadow-modal:0 24px 64px rgba(2,6,23,.24);
    --bn-sidebar-w:248px; --bn-sidebar-collapsed:72px; --bn-topbar-h:64px;
    /* Sidebar gradient isn't in the handed-over tokens file — added here per
       CLAUDE_UI_UX_HANDOVER.md §2.2's literal value. */
    --bn-sidebar-grad: linear-gradient(180deg, #0B2A6F 0%, #071C4A 100%);

    /* Sidebar — always dark, now a navy gradient (was flat near-black) */
    --sb-bg:     var(--bn-sidebar-grad);
    --sb-bg2:    #0d2559;
    --sb-border: rgba(255,255,255,.08);
    --sb-text:   #a9b8dc;
    --sb-text-a: #ffffff;
    --sb-accent: var(--bn-primary-500);
    --sb-acc-bg: rgba(59,130,246,.22);
    --sb-sec-bg:   #ffffff;
    --sb-sec-text: #0B2A6F;
    --sb-w:      var(--bn-sidebar-w);
    --sb-col:    var(--bn-sidebar-collapsed);

    /* Content — light */
    --bg-page:   var(--bn-canvas);
    --bg-s:      var(--bn-surface);
    --bg-s1:     var(--bn-surface);
    --bg-s2:     var(--bn-surface-muted);
    --bg-s3:     #f1f5f9;
    --border:    var(--bn-border);
    --border2:   var(--bn-border-strong);
    --t1:        var(--bn-text);
    --t2:        var(--bn-text-2);
    --t3:        var(--bn-text-4);

    /* Topbar */
    --tb-bg:     var(--bn-surface);
    --tb-bd:     var(--bn-border);
    --tb-h:      var(--bn-topbar-h);

    /* Accent (primary blue replaces the prior teal brand color) */
    --ac:        var(--bn-primary-600);
    --ac-h:      var(--bn-primary-700);
    --ac-bg:     var(--bn-primary-100);
    --ac-t:      var(--bn-primary-700);

    /* Status */
    --green:     var(--bn-success);
    --green-bg:  var(--bn-success-bg);
    --green-t:   var(--bn-success-t);
    --amber:     var(--bn-warning);
    --amber-bg:  var(--bn-warning-bg);
    --amber-t:   var(--bn-warning-t);
    --red:       var(--bn-danger);
    --red-bg:    var(--bn-danger-bg);
    --red-t:     var(--bn-danger-t);
    --blue:      var(--bn-info);
    --blue-bg:   var(--bn-info-bg);
    --blue-t:    var(--bn-info-t);
    --purple:    var(--bn-purple);
    --purple-bg: rgba(139,92,246,.10);
    --purple-t:  #6d28d9;

    /* Misc */
    --r:   var(--bn-r10);
    --rl:  var(--bn-r14);
    --sh:  var(--bn-shadow-1);
    --f:   var(--bn-font);
    --fm:  'Cascadia Code','Fira Code',Consolas,monospace;
    --tr:  .15s ease;
}

[data-theme="dark"] {
    --bn-canvas:#0b1020; --bn-surface:#111827; --bn-surface-muted:#0f172a;
    --bn-border:#273449; --bn-border-strong:#334155;
    --bn-text:#f8fafc; --bn-text-2:#cbd5e1; --bn-text-3:#94a3b8; --bn-text-4:#64748b;
    --bn-primary-600:#60a5fa; --bn-primary-700:#3b82f6;
    --bn-success:#4ade80; --bn-warning:#fbbf24; --bn-danger:#f87171; --bn-info:#60a5fa;

    --bg-page:  var(--bn-canvas);
    --bg-s:     var(--bn-surface);
    --bg-s1:    #172033;
    --bg-s2:    var(--bn-surface-muted);
    --bg-s3:    #21253a;
    --border:   var(--bn-border);
    --border2:  var(--bn-border-strong);
    --t1:       var(--bn-text);
    --t2:       var(--bn-text-2);
    --t3:       var(--bn-text-4);
    --tb-bg:    var(--bn-surface);
    --tb-bd:    var(--bn-border);
    --ac-t:     var(--bn-primary-600);
    --green-t:  var(--bn-success);
    --amber-t:  var(--bn-warning);
    --red-t:    var(--bn-danger);
    --blue-t:   var(--bn-info);
    --purple-t: #c4b5fd;
    --sh:       var(--bn-shadow-2);

    /* Soft-tint "chip" backgrounds (badges, active nav states, the mega
       menu's header icon / active rail item / active tile) were never
       redefined for dark mode, so they kept their light-mode values —
       solid pastel colors (e.g. --ac-bg:#dbeafe) at full opacity paired
       with the *-t token above, which dark mode DOES lighten for
       on-dark-background legibility. Result: a light icon on a bright
       pastel-light chip sitting in an otherwise dark UI — reads as
       washed-out/dim rather than as a tinted chip. Low-alpha overlays of
       the same on-dark colors (matching the .mn-c1..c8 palette's own
       proven pattern) keep the chip visibly tinted without the bright
       light-mode patch. */
    --ac-bg:    rgba(96,165,250,.16);
    --green-bg: rgba(74,222,128,.16);
    --amber-bg: rgba(251,191,36,.16);
    --red-bg:   rgba(248,113,113,.16);
    --blue-bg:  rgba(96,165,250,.16);
}

/* ── Reset ────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing: border-box }
html { font-size: 16px; -webkit-text-size-adjust: 100% }
body {
    font-family: var(--f);
    background: var(--bg-page);
    color: var(--t1);
    margin: 0;
    overflow-x: hidden;
    line-height: 1.55;
}
a { color: var(--ac); text-decoration: none }
a:hover { color: var(--ac-h) }
h1,h2,h3,h4,h5,h6 { color: var(--t1); font-weight: 600; margin: 0 }
p { margin: 0 0 .75rem }
hr { border: none; border-top: 1px solid var(--border); margin: .75rem 0 }
code {
    font-family: var(--fm);
    font-size: .8em;
    background: var(--bg-s2);
    padding: .1rem .375rem;
    border-radius: 4px;
    color: var(--t2);
    border: 1px solid var(--border);
}
small,.small { font-size: .8125rem }

/* ── Layout Shell ─────────────────────────────────────────── */
.bz-shell { display: flex; min-height: 100vh }

.bz-sidebar {
    width: var(--sb-w);
    flex-shrink: 0;
    background: var(--sb-bg);
    position: fixed; top: 0; left: 0; bottom: 0;
    overflow-y: auto; overflow-x: hidden;
    display: flex; flex-direction: column;
    z-index: 100;
    transition: width var(--tr);
}
.bz-sidebar.collapsed { width: var(--sb-col) }
.bz-sidebar::-webkit-scrollbar { width: 3px }
.bz-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 2px }

.bz-main {
    flex: 1; min-width: 0;
    margin-left: var(--sb-w);
    display: flex; flex-direction: column;
    min-height: 100vh;
    transition: margin-left var(--tr);
}
.bz-main.expanded { margin-left: var(--sb-col) }

.bz-topbar {
    height: var(--tb-h);
    background: var(--tb-bg);
    border-bottom: 1px solid var(--tb-bd);
    display: flex; align-items: center;
    padding: 0 1.25rem; gap: .625rem;
    position: sticky; top: 0; z-index: 90;
}

.bz-content {
    flex: 1;
    padding: 1.375rem 1.5rem;
}

/* ── Sidebar components ────────────────────────────────────── */
.sb-logo {
    padding: .875rem 1rem;
    border-bottom: 1px solid var(--sb-border);
    display: flex; align-items: center; gap: .75rem;
    min-height: var(--tb-h); flex-shrink: 0;
}
.sb-mark {
    width: 30px; height: 30px; border-radius: 7px;
    background: var(--ac);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: .875rem; font-weight: 700; flex-shrink: 0;
}
.sb-name { font-size: .875rem; font-weight: 700; color: #e6edf3; white-space: nowrap }
.sb-tag  { font-size: .6rem; color: var(--sb-text); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap }

.sb-nav { flex: 1; min-height: 0; padding: .375rem 0; overflow-y: auto; overflow-x: hidden }
.sb-nav::-webkit-scrollbar { width: 3px }
.sb-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 2px }

.sb-sec {
    /* Box width matches the sidebar search input above it (.px-2 wrapper,
       i.e. .5rem inset each side) rather than shrink-wrapping the text. */
    display: block;
    font-size: .6rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--sb-sec-text); background: var(--sb-sec-bg);
    margin: .875rem .5rem .25rem; padding: .375rem .75rem;
    border-radius: 5px;
    white-space: nowrap; overflow: hidden;
}
.bz-sidebar.collapsed .sb-sec {
    text-align: center; margin: .875rem .375rem .25rem;
    font-size: .55rem; letter-spacing: 0;
}

/* Sub-label for a flattened parent menu row (2026-07-29) — same uppercase
   divider treatment as .sb-sec, one visual step down: smaller top gap,
   slightly indented, a touch dimmer, so it reads as "this group's name"
   rather than repeating a top-level section header like OVERVIEW. */
.sb-sec-sub {
    /* Same box width as .sb-sec (matches the search input above); the
       hierarchy cue vs. a top-level section is the extra left padding on
       the text, not a narrower box. */
    display: block;
    font-size: .58rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--sb-sec-text); background: var(--sb-sec-bg);
    margin: .625rem .5rem .1875rem; padding: .3rem .75rem .3rem 1.1rem;
    border-radius: 5px;
    white-space: nowrap; overflow: hidden;
}
.bz-sidebar.collapsed .sb-sec-sub { display: none }

.sb-link {
    display: flex; align-items: center; gap: .625rem;
    padding: .5rem 1rem;
    color: var(--sb-text);
    font-size: .8125rem;
    border-left: 2px solid transparent;
    text-decoration: none;
    transition: color var(--tr), background var(--tr);
    white-space: nowrap;
    position: relative;
}
.sb-link:hover { color: var(--sb-text-a); background: rgba(255,255,255,.04) }
.sb-link.active {
    color: var(--sb-accent); background: var(--sb-acc-bg);
    border-left-color: var(--sb-accent);
}
.sb-link i { font-size: 1rem; flex-shrink: 0; width: 1.25rem; text-align: center }
.sb-lbl { overflow: hidden; text-overflow: ellipsis; flex: 1 }

/* Collapsible nav groups (Master > Hierarchies / POP / Product, etc.) */
.sb-group-toggle {
    width: 100%; background: none; border: none; border-left: 2px solid transparent;
    cursor: pointer; text-align: left; font: inherit;
}
.sb-chevron { display: inline-block; font-size: .75rem !important; width: auto !important; transition: transform var(--tr) }
.sb-chevron-open { transform: rotate(180deg) }
.sb-subnav .sb-link,
.sb-subnav .sb-group-toggle { padding-left: 2.375rem }
.sb-subnav .sb-subnav .sb-link,
.sb-subnav .sb-subnav .sb-group-toggle { padding-left: 3.375rem }
.bz-sidebar.collapsed .sb-subnav { display: none }
.bz-sidebar.collapsed .sb-chevron { display: none }

/* Tooltip on collapsed */
.bz-sidebar.collapsed .sb-link {
    padding: .625rem; justify-content: center;
    border-left: none;
}
.bz-sidebar.collapsed .sb-lbl,
.bz-sidebar.collapsed .sb-name,
.bz-sidebar.collapsed .sb-tag { display: none }
.bz-sidebar.collapsed .sb-link i { width: auto }


/* Mobile overlay */
#sidebarOverlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 99;
}
#sidebarOverlay.d-none { display: none }

/* ── Topbar components ─────────────────────────────────────── */
.tb-toggle {
    width: 34px; height: 34px; border-radius: var(--r);
    border: 1px solid var(--tb-bd); background: transparent;
    display: flex; align-items: center; justify-content: center;
    color: var(--t2); cursor: pointer; font-size: 1rem;
    flex-shrink: 0;
    transition: background var(--tr), color var(--tr);
}
.tb-toggle:hover { background: var(--bg-s2); color: var(--t1) }

/* Metronic's global `i[class] { color: #fff }` rule (style.bundle.css) ties in
   CSS specificity with any selector here that doesn't explicitly set an icon's
   own color — and on a tie, source order decides, which put every topbar icon
   permanently white regardless of theme (invisible in light mode, since the
   topbar background switches with theme while the sidebar's does not). Give
   every topbar icon its own explicit color so it actually inherits its
   button's theme-aware color instead of losing that tie. */
.tb-toggle i, .tb-btn i, .tb-theme-opt i, .bz-user-btn i, .tb-breadcrumb i {
    color: inherit;
}

.tb-breadcrumb {
    display: flex; align-items: center; gap: .375rem;
    font-size: .75rem; color: var(--t3);
}
.tb-breadcrumb a { color: var(--t3); text-decoration: none }
.tb-breadcrumb a:hover { color: var(--t2) }
.tb-breadcrumb-sep { color: var(--t3) }
.tb-brand { font-size: .875rem; font-weight: 600; color: var(--t1) }

.ms-auto { margin-left: auto !important }
.tb-right { margin-left: auto; display: flex; align-items: center; gap: .5rem }

.tb-btn {
    width: 34px; height: 34px; border-radius: var(--r);
    border: 1px solid var(--border); background: transparent;
    display: flex; align-items: center; justify-content: center;
    color: var(--t2); cursor: pointer; font-size: 1rem;
    transition: background var(--tr), color var(--tr);
    position: relative; text-decoration: none;
}
.tb-btn:hover { background: var(--bg-s2); color: var(--t1) }
.tb-notif-dot {
    position: absolute; top: 7px; right: 7px;
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--ac); border: 1.5px solid var(--tb-bg);
}

.tb-clock {
    font-size: .72rem; font-weight: 500; color: var(--t3);
    font-variant-numeric: tabular-nums;
    padding: .25rem .625rem; border-radius: var(--r);
    border: 1px solid var(--border);
    white-space: nowrap;
}

/* ── Topbar redesign (Option 3 mockup, 2026-07-22) ────────────── */
.tb-search { flex: 1 1 auto; max-width: 420px; margin: 0 .75rem; }
.tb-clockdate { line-height: 1.2; text-align: right; margin-right: .25rem; }
.tb-clock-time { font-size: .8rem; font-weight: 700; color: var(--t1); font-variant-numeric: tabular-nums; display: block; }
.tb-clock-date { font-size: .65rem; color: var(--t3); white-space: nowrap; }

.tb-theme-pair {
    display: flex; align-items: center; border: 1px solid var(--border); border-radius: var(--r);
    overflow: hidden; flex-shrink: 0;
}
.tb-theme-opt {
    width: 30px; height: 30px; border: none; background: transparent;
    display: flex; align-items: center; justify-content: center;
    color: var(--t3); cursor: pointer; font-size: .8rem;
    transition: background var(--tr), color var(--tr);
}
.tb-theme-opt:not(:last-child) { border-right: 1px solid var(--border); }
.tb-theme-opt.active { background: var(--bn-primary-600); color: #fff; }

/* ── Mega menu ── New slim nav surface below the icon topbar. Sidebar's own
   RBAC-driven menu tree (RbacService::visibleMenus()) is re-grouped into 10
   outcome-based headings (Core HR, Employee Experience, ...) that sit
   directly in this bar — no launcher/explorer trigger. Hovering a heading
   opens a panel: a slim header strip (heading + description), then a
   two-pane body — a left rail of the real modules under that heading
   (icon + title + description + page-count badge) and a right grid that
   swaps to the hovered module's real pages, each a colored-icon tile.
   Covers all 3 real levels (Heading > Module > Page) the sidebar itself
   has. Sidebar is untouched. */
.bz-meganav-wrap {
    position: sticky; top: var(--tb-h); z-index: 89;
    background: var(--bg-s); border-bottom: 1px solid var(--border);
}
.bz-meganav {
    display: flex; align-items: stretch; height: 42px; padding: 0 1.25rem;
    gap: .25rem; overflow-x: auto; overflow-y: hidden;
}
.bz-meganav::-webkit-scrollbar { height: 0; }
.mn-heading {
    display: flex; align-items: center;
    background: none; border: none; border-bottom: 2px solid transparent;
    padding: 0 .75rem; font-size: .765625rem; font-weight: 700;
    color: var(--t2); cursor: pointer; white-space: nowrap; flex-shrink: 0;
    transition: color var(--tr), border-color var(--tr);
}
.mn-heading:hover { color: var(--t1); }
.mn-heading.active { color: var(--ac-t); border-bottom-color: var(--ac-t); }

.mn-megapanel {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--bg-s); border-bottom: 1px solid var(--border);
    box-shadow: var(--bn-shadow-modal);
}
.mn-megapanel.show { display: block; animation: mnPanelIn .16s ease; }
@keyframes mnPanelIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.mn-cat-panel { display: none; }
.mn-cat-panel.active { display: block; }

/* Slim header strip — heading + description, no longer a full-height column */
.mn-header {
    display: flex; align-items: center; gap: .625rem;
    padding: .875rem 1.5rem; border-bottom: 1px solid var(--border); background: var(--bg-s2);
}
.mn-header-icon {
    width: 30px; height: 30px; border-radius: var(--bn-r8);
    background: var(--ac-bg); color: var(--ac-t);
    display: flex; align-items: center; justify-content: center;
    font-size: .85rem; flex-shrink: 0;
}
.mn-header h4 { margin: 0; font-size: .875rem; font-weight: 700; color: var(--t1); white-space: nowrap; }
.mn-header .sep { color: var(--border); }
.mn-header p { margin: 0; font-size: .75rem; color: var(--t3); }

.mn-body { display: flex; align-items: stretch; max-height: 480px; }

/* Left rail — Module level */
.mn-rail { width: 290px; flex-shrink: 0; padding: .75rem; border-right: 1px solid var(--border); overflow-y: auto; }
.mn-rail-item {
    display: flex; align-items: flex-start; gap: .625rem; width: 100%; text-align: left;
    background: none; border: none; border-radius: var(--bn-r10); padding: .5rem .625rem;
    cursor: pointer; transition: background var(--tr);
}
.mn-rail-item:hover { background: var(--bg-s2); }
.mn-rail-item.active { background: var(--ac-bg); }
.mn-rail-icon {
    width: 26px; height: 26px; border-radius: var(--bn-r8); background: var(--bg-s2); color: var(--t2);
    display: flex; align-items: center; justify-content: center; font-size: .7rem; flex-shrink: 0; margin-top: .0625rem;
}
.mn-rail-item.active .mn-rail-icon { background: var(--ac-t); color: #fff; }
.mn-rail-text { min-width: 0; }
.mn-rail-title { font-size: .78125rem; font-weight: 700; color: var(--t1); display: block; }
.mn-rail-item.active .mn-rail-title { color: var(--ac-t); }
.mn-rail-desc { font-size: .6875rem; color: var(--t3); line-height: 1.35; display: block; margin-top: .0625rem; }
.mn-rail-count {
    font-size: .625rem; font-weight: 700; color: var(--t3); background: var(--bg-s2);
    border-radius: 999px; padding: .0625rem .4rem; flex-shrink: 0; margin-top: .125rem;
}
.mn-rail-item.active .mn-rail-count { color: var(--ac-t); background: var(--bg-s); }

/* Right grid — Page level */
.mn-grid-wrap { flex: 1; min-width: 0; overflow-y: auto; padding: 1.125rem 1.75rem; }
.mn-grid { display: none; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .125rem .875rem; }
.mn-grid.active { display: grid; }
.mn-tile {
    display: flex; align-items: center; gap: .5rem; padding: .4375rem .5rem; border-radius: var(--bn-r8);
    text-decoration: none; color: inherit; transition: background var(--tr);
}
.mn-tile:hover { background: var(--bg-s2); }
.mn-tile.active { background: var(--ac-bg); }
.mn-tile-icon {
    width: 26px; height: 26px; border-radius: var(--bn-r8); display: flex; align-items: center;
    justify-content: center; font-size: .7rem; flex-shrink: 0;
}
.mn-tile-title { font-size: .75rem; font-weight: 600; color: var(--t1); line-height: 1.3; }
.mn-tile.active .mn-tile-title { color: var(--ac-t); }

/* Colored icon-chip palette — rotates per tile. Solid saturated
   background + white icon, matching this file's own .kpi-icon-* pattern
   (see above) rather than a pale tint + colored-on-pale-tint icon — the
   tint version read as washed-out/dim at this chip's small size (26px,
   .7rem icon) regardless of theme, since a 14%-opacity tint over a light
   page background is itself very pale before the icon color is even
   applied on top of it. Solid bg + white icon is unambiguously
   high-contrast in both themes. */
.mn-c1 { background: var(--bn-primary-600); color: #fff; }
.mn-c2 { background: var(--bn-purple);      color: #fff; }
.mn-c3 { background: var(--bn-success);     color: #fff; }
.mn-c4 { background: var(--bn-orange);      color: #fff; }
.mn-c5 { background: var(--bn-pink);        color: #fff; }
.mn-c6 { background: var(--bn-teal);        color: #fff; }
.mn-c7 { background: var(--bn-cyan);        color: #fff; }
.mn-c8 { background: var(--bn-amber);       color: #fff; }

@media (max-width: 991.98px) {
    .bz-meganav-wrap { display: none !important; }
}

/* User dropdown in topbar */
.bz-user-btn {
    display: flex; align-items: center; gap: .5rem;
    padding: .25rem .5rem; border-radius: var(--r);
    background: transparent; border: none; cursor: pointer;
    color: var(--t1); transition: background var(--tr);
}
.bz-user-btn:hover { background: var(--bg-s2) }
.user-avatar-sm {
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--ac-bg); border: 1px solid rgba(37,99,235,.3);
    color: var(--ac-t);
    display: flex; align-items: center; justify-content: center;
    font-size: .7rem; font-weight: 700; flex-shrink: 0;
}
.user-avatar {
    width: 42px; height: 42px; border-radius: 50%;
    background: var(--ac-bg); border: 1px solid rgba(37,99,235,.3);
    color: var(--ac-t);
    display: flex; align-items: center; justify-content: center;
    font-size: .875rem; font-weight: 700; flex-shrink: 0;
}
.user-avatar-lg {
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--ac-bg); border: 1px solid rgba(37,99,235,.3);
    color: var(--ac-t);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem; font-weight: 700; flex-shrink: 0;
}

/* ── Dropdown ─────────────────────────────────────────────── */
.dropdown { position: relative }
.dropdown-menu {
    position: absolute; right: 0; top: calc(100% + 4px);
    background: var(--bg-s);
    border: 1px solid var(--border);
    border-radius: var(--rl);
    padding: .375rem;
    min-width: 210px; z-index: 200;
    display: none;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.dropdown-menu.show { display: block }
.dropdown-item {
    display: flex; align-items: center; gap: .5rem;
    padding: .5rem .75rem; border-radius: var(--r);
    font-size: .8125rem; color: var(--t2);
    text-decoration: none; cursor: pointer;
    background: none; border: none; width: 100%;
    transition: background var(--tr), color var(--tr);
    line-height: 1.4;
}
.dropdown-item:hover { background: var(--bg-s2); color: var(--t1) }
.dropdown-item.text-danger { color: var(--red-t) !important }
.dropdown-item.text-danger:hover { background: var(--red-bg) }
.dropdown-divider { border: none; border-top: 1px solid var(--border); margin: .25rem 0 }
.dropdown-header { padding: .625rem .75rem .375rem; font-size: .7rem; font-weight: 700; color: var(--t3); text-transform: uppercase; letter-spacing: .04em }

/* ── Cards ────────────────────────────────────────────────── */
.card, .chart-card {
    background: var(--bg-s);
    border: 1px solid var(--border);
    border-radius: var(--rl);
}
.card { display: flex; flex-direction: column }
.card-header {
    padding: .75rem 1.25rem;
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: .625rem;
    flex-shrink: 0;
}
.card-title { font-size: .875rem; font-weight: 600; color: var(--t1); margin: 0 }
.card-body { padding: 1rem 1.25rem; flex: 1 }
.card-footer {
    padding: .625rem 1.25rem;
    border-top: 1px solid var(--border);
    font-size: .75rem; color: var(--t3);
}
.p-0 { padding: 0 !important }

/* KPI cards */
.kpi-card {
    background: var(--bg-s);
    border: 1px solid var(--border);
    border-radius: var(--rl);
    padding: 1rem 1.125rem;
    position: relative; overflow: hidden;
}
.kpi-value  { font-size: 1.625rem; font-weight: 700; color: var(--t1); letter-spacing: -.02em; line-height: 1.2; margin: .25rem 0 }
.kpi-label  { font-size: .68rem; font-weight: 600; color: var(--t3); letter-spacing: .04em; text-transform: uppercase }
.kpi-icon {
    width: 36px; height: 36px; border-radius: var(--r);
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; flex-shrink: 0;
}
/* Solid saturated fill + white icon — Option 3 mockup treatment (was a pale
   tinted bg + colored icon, low contrast, pre-dating this redesign). */
.kpi-icon-primary { background: var(--bn-primary-600); color: #fff }
.kpi-icon-success { background: var(--bn-success);      color: #fff }
.kpi-icon-warning { background: var(--bn-warning);      color: #fff }
.kpi-icon-danger  { background: var(--bn-danger);       color: #fff }
.kpi-icon-info    { background: var(--bn-cyan);         color: #fff }
.kpi-icon-purple  { background: var(--bn-purple);       color: #fff }
.kpi-trend { font-size: .7rem; font-weight: 600; display: flex; align-items: center; gap: 3px; margin-top: .375rem }
.kpi-trend.up   { color: var(--green-t) }
.kpi-trend.down { color: var(--red-t) }
.kpi-trend.flat { color: var(--t3) }

/* ── Tables ───────────────────────────────────────────────── */
.table { width: 100%; border-collapse: collapse; font-size: .8125rem }
.table thead tr { background: var(--bg-s2) }
.table th {
    padding: .625rem .875rem;
    font-size: .65rem; font-weight: 700;
    color: var(--t3); letter-spacing: .05em; text-transform: uppercase;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.table td {
    padding: .75rem .875rem;
    color: var(--t2);
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: none }
.table-hover tbody tr { transition: background var(--tr) }
.table-hover tbody tr:hover { background: var(--bg-s2) }
.table-light { background: var(--bg-s2) }
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch }
.align-middle td, td.align-middle { vertical-align: middle !important }

/* ── Badges ───────────────────────────────────────────────── */
.badge {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: .65rem; font-weight: 600;
    padding: .2rem .5rem; border-radius: 20px;
    line-height: 1.4;
}
.badge-state-active,
.badge-state-published  { background: var(--green-bg); color: var(--green-t); border: 1px solid rgba(16,185,129,.2) }
.badge-state-draft,
.badge-state-pending    { background: var(--amber-bg); color: var(--amber-t); border: 1px solid rgba(245,158,11,.2) }
.badge-state-inactive,
.badge-state-archived   { background: var(--red-bg);   color: var(--red-t);   border: 1px solid rgba(239,68,68,.2) }
.bg-primary   { background: var(--ac-bg);      color: var(--ac-t)     }
.bg-success   { background: var(--green-bg);   color: var(--green-t)  }
.bg-danger    { background: var(--red-bg);      color: var(--red-t)    }
.bg-warning   { background: var(--amber-bg);   color: var(--amber-t)  }
.bg-info      { background: var(--blue-bg);    color: var(--blue-t)   }
.bg-secondary { background: var(--bg-s3);      color: var(--t2)       }
.rounded-pill { border-radius: 20px !important }

/* ── Forms ────────────────────────────────────────────────── */
.form-control, .form-select {
    width: 100%;
    padding: .4rem .75rem;
    font-size: .8125rem; color: var(--t1);
    background: var(--bg-s);
    border: 1px solid var(--border);
    border-radius: var(--r);
    outline: none; appearance: none;
    transition: border-color var(--tr), box-shadow var(--tr);
    line-height: 1.5;
}
.form-control::placeholder { color: var(--t3) }
.form-control:focus, .form-select:focus {
    border-color: var(--ac);
    box-shadow: 0 0 0 3px var(--ac-bg);
}
.form-control-sm, .form-select-sm { padding: .25rem .625rem; font-size: .75rem }
.form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%2394a3b8' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right .75rem center;
    padding-right: 2rem;
}
.form-label { display: block; font-size: .75rem; font-weight: 600; color: var(--t2); margin-bottom: .375rem }
.form-text  { font-size: .72rem; color: var(--t3); margin-top: .25rem }
.form-check { display: flex; align-items: center; gap: .5rem; font-size: .8125rem }
.form-check-input { width: 15px; height: 15px; accent-color: var(--ac); cursor: pointer; flex-shrink: 0 }
textarea.form-control { min-height: 80px; resize: vertical }
.is-invalid .form-control,
.form-control.is-invalid { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-bg) }
.invalid-feedback { font-size: .75rem; color: var(--red-t); margin-top: .25rem }

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .375rem;
    padding: .4375rem .875rem;
    font-size: .8125rem; font-weight: 500;
    border-radius: var(--r); border: 1px solid transparent;
    cursor: pointer; text-decoration: none;
    transition: background var(--tr), color var(--tr), border-color var(--tr), transform .1s;
    white-space: nowrap; line-height: 1.4;
}
.btn:active { transform: scale(.98) }
.btn-sm { padding: .25rem .625rem; font-size: .75rem }
.btn-lg { padding: .625rem 1.25rem; font-size: .9rem }
.btn-primary, .btn-accent { background: var(--ac); color: #fff; border-color: var(--ac) }
.btn-primary:hover, .btn-accent:hover { background: var(--ac-h); border-color: var(--ac-h); color: #fff }
.btn-outline-primary { background: transparent; color: var(--ac); border-color: var(--ac) }
.btn-outline-primary:hover { background: var(--ac-bg) }
.btn-outline { background: transparent; color: var(--t2); border-color: var(--border) }
.btn-outline:hover { background: var(--bg-s2); color: var(--t1) }
.btn-ghost { background: transparent; border: none; color: var(--t2) }
.btn-ghost:hover { background: var(--bg-s2); color: var(--t1) }
.btn-danger { background: var(--red-bg); color: var(--red-t); border-color: rgba(239,68,68,.2) }
.btn-danger:hover { background: var(--red); color: #fff; border-color: var(--red) }
.btn-success { background: var(--green-bg); color: var(--green-t); border-color: rgba(16,185,129,.2) }
.btn-success:hover { background: var(--green); color: #fff }
.btn[disabled], .btn:disabled { opacity: .55; cursor: not-allowed; pointer-events: none }
.fw-semibold { font-weight: 600 !important }

/* ── Page header ──────────────────────────────────────────── */
.page-header {
    background: var(--bg-s);
    border: 1px solid var(--border);
    border-radius: var(--rl);
    padding: .875rem 1.25rem;
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
    margin-bottom: 1rem;
}
.page-header-left  { display: flex; align-items: center; gap: .875rem }
.page-header-icon  {
    width: 38px; height: 38px; border-radius: var(--r);
    background: var(--ac-bg); color: var(--ac);
    display: flex; align-items: center; justify-content: center;
    font-size: .9375rem; flex-shrink: 0;
}
.page-header-title    { font-size: 1rem; font-weight: 700; color: var(--t1); margin: 0; line-height: 1.2 }
.page-header-subtitle { font-size: .725rem; color: var(--t3); margin: 2px 0 0 }
.page-header-right    { display: flex; align-items: center; gap: .5rem; flex-shrink: 0 }

/* ── Chart/stat cards ─────────────────────────────────────── */
.chart-card-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: .875rem;
}
.chart-card-title    { font-size: .875rem; font-weight: 700; color: var(--t1) }
.chart-card-subtitle { font-size: .725rem; color: var(--t3); margin-top: 2px }
.chart-empty {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; padding: 2.5rem 1rem; color: var(--t3); text-align: center;
}
.chart-empty i { font-size: 2rem; margin-bottom: .5rem; opacity: .4 }

/* ── Auth ─────────────────────────────────────────────────── */
.bz-auth {
    min-height: 100vh; background: var(--bg-page);
    display: flex; align-items: center; justify-content: center;
    padding: 2rem;
}
.auth-card {
    background: var(--bg-s); border: 1px solid var(--border);
    border-radius: var(--rl); padding: 2rem;
    width: 100%; max-width: 400px;
    box-shadow: 0 4px 32px rgba(0,0,0,.08);
}
.auth-logo {
    width: 48px; height: 48px; border-radius: 12px;
    background: var(--ac);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 1.25rem; font-size: 1.375rem; color: #fff;
}

/* ── Progress bar ─────────────────────────────────────────── */
.progress { height: 5px; background: var(--bg-s3); border-radius: 3px; overflow: hidden }
.progress-bar { height: 100%; border-radius: 3px; background: var(--ac) }
.progress-bar.bg-success { background: var(--green) }
.progress-bar.bg-warning { background: var(--amber) }
.progress-bar.bg-danger  { background: var(--red) }

/* ── Alert ────────────────────────────────────────────────── */
.alert {
    padding: .75rem 1rem; border-radius: var(--r); border: 1px solid;
    font-size: .8125rem; display: flex; align-items: flex-start; gap: .625rem;
}
.alert-success { background: var(--green-bg); border-color: rgba(16,185,129,.2); color: var(--green-t) }
.alert-danger  { background: var(--red-bg);   border-color: rgba(239,68,68,.2); color: var(--red-t) }
.alert-warning { background: var(--amber-bg); border-color: rgba(245,158,11,.2); color: var(--amber-t) }
.alert-info    { background: var(--blue-bg);  border-color: rgba(59,130,246,.2); color: var(--blue-t) }
.alert-dismissible { position: relative; padding-right: 2.5rem }
.alert-dismissible .btn-close { position: absolute; top: 50%; right: .75rem; transform: translateY(-50%) }
.btn-close-sm { width: 18px; height: 18px; font-size: .65rem }

/* ── Toast ────────────────────────────────────────────────── */
@keyframes bz-in  { from { transform: translateX(110%); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes bz-out { to { opacity: 0; transform: translateX(30px) } }
#toastContainer {
    position: fixed; top: calc(var(--tb-h) + 10px); right: 14px;
    z-index: 9999; display: flex; flex-direction: column; gap: 6px;
    min-width: 280px; max-width: 360px;
}
.bz-toast {
    background: var(--bg-s); border: 1px solid var(--border);
    border-radius: var(--rl); padding: .75rem 1rem;
    display: flex; align-items: flex-start; gap: .75rem;
    box-shadow: 0 8px 24px rgba(0,0,0,.14);
    animation: bz-in .25s ease;
    font-size: .8rem;
}
.bz-toast.success { border-left: 3px solid var(--green) }
.bz-toast.error   { border-left: 3px solid var(--red) }
.bz-toast.warning { border-left: 3px solid var(--amber) }
.bz-toast.info    { border-left: 3px solid var(--ac) }
.bz-toast-icon { font-size: 1rem; flex-shrink: 0; margin-top: 1px }
.bz-toast.success .bz-toast-icon { color: var(--green) }
.bz-toast.error   .bz-toast-icon { color: var(--red) }
.bz-toast.warning .bz-toast-icon { color: var(--amber) }
.bz-toast.info    .bz-toast-icon { color: var(--ac) }
.bz-toast-body { flex: 1; color: var(--t2) }
.bz-toast-close { background: none; border: none; color: var(--t3); cursor: pointer; padding: 0; font-size: .875rem; line-height: 1; flex-shrink: 0 }

/* ── Footer ───────────────────────────────────────────────── */
.tts-footer {
    padding: .625rem 1.5rem;
    border-top: 1px solid var(--border);
    font-size: .7rem; color: var(--t3);
    display: flex; align-items: center; justify-content: space-between;
}

/* ── Grid — Bootstrap compatible ─────────────────────────── */
.row { display: flex; flex-wrap: wrap; margin-right: -.75rem; margin-left: -.75rem }
[class*="col-"] { padding-right: .75rem; padding-left: .75rem; min-width: 0 }
.col-1  { flex: 0 0  8.333%; max-width:  8.333% }
.col-2  { flex: 0 0 16.667%; max-width: 16.667% }
.col-3  { flex: 0 0    25%;  max-width:    25%   }
.col-4  { flex: 0 0 33.333%; max-width: 33.333% }
.col-5  { flex: 0 0 41.667%; max-width: 41.667% }
.col-6  { flex: 0 0    50%;  max-width:    50%   }
.col-7  { flex: 0 0 58.333%; max-width: 58.333% }
.col-8  { flex: 0 0 66.667%; max-width: 66.667% }
.col-9  { flex: 0 0    75%;  max-width:    75%   }
.col-10 { flex: 0 0 83.333%; max-width: 83.333% }
.col-11 { flex: 0 0 91.667%; max-width: 91.667% }
.col-12 { flex: 0 0   100%;  max-width:   100%   }
@media (min-width: 576px) {
    .col-sm-3  { flex: 0 0 25%;     max-width: 25%     }
    .col-sm-4  { flex: 0 0 33.333%; max-width: 33.333% }
    .col-sm-6  { flex: 0 0 50%;     max-width: 50%     }
    .col-sm-12 { flex: 0 0 100%;    max-width: 100%    }
    .d-sm-flex  { display: flex !important }
    .d-sm-none  { display: none !important }
    .d-sm-inline { display: inline !important }
}
@media (min-width: 768px) {
    .col-md-1  { flex: 0 0  8.333%; max-width:  8.333% }
    .col-md-2  { flex: 0 0 16.667%; max-width: 16.667% }
    .col-md-3  { flex: 0 0 25%;     max-width: 25%     }
    .col-md-4  { flex: 0 0 33.333%; max-width: 33.333% }
    .col-md-5  { flex: 0 0 41.667%; max-width: 41.667% }
    .col-md-6  { flex: 0 0 50%;     max-width: 50%     }
    .col-md-7  { flex: 0 0 58.333%; max-width: 58.333% }
    .col-md-8  { flex: 0 0 66.667%; max-width: 66.667% }
    .col-md-9  { flex: 0 0 75%;     max-width: 75%     }
    .col-md-10 { flex: 0 0 83.333%; max-width: 83.333% }
    .col-md-11 { flex: 0 0 91.667%; max-width: 91.667% }
    .col-md-12 { flex: 0 0 100%;    max-width: 100%    }
    .d-md-flex  { display: flex !important }
    .d-md-none  { display: none !important }
    .d-md-block { display: block !important }
    .d-none.d-md-flex { display: flex !important }
}
@media (min-width: 992px) {
    .col-lg-2  { flex: 0 0 16.667%; max-width: 16.667% }
    .col-lg-3  { flex: 0 0 25%;     max-width: 25%     }
    .col-lg-4  { flex: 0 0 33.333%; max-width: 33.333% }
    .col-lg-5  { flex: 0 0 41.667%; max-width: 41.667% }
    .col-lg-6  { flex: 0 0 50%;     max-width: 50%     }
    .col-lg-7  { flex: 0 0 58.333%; max-width: 58.333% }
    .col-lg-8  { flex: 0 0 66.667%; max-width: 66.667% }
    .col-lg-9  { flex: 0 0 75%;     max-width: 75%     }
    .col-lg-12 { flex: 0 0 100%;    max-width: 100%    }
    .d-lg-flex        { display: flex         !important }
    .d-lg-none        { display: none         !important }
    .d-lg-block       { display: block        !important }
    .d-lg-table-cell  { display: table-cell   !important }
    .d-lg-inline      { display: inline       !important }
    .d-none.d-lg-flex { display: flex !important }
    .d-flex.d-lg-none { display: none !important }
    .d-none.d-lg-block{ display: block !important }
    .d-none.d-lg-table-cell { display: table-cell !important }
}
@media (min-width: 1200px) {
    .col-xl-2  { flex: 0 0 16.667%; max-width: 16.667% }
    .col-xl-3  { flex: 0 0 25%;     max-width: 25%     }
    .col-xl-4  { flex: 0 0 33.333%; max-width: 33.333% }
    .col-xl-6  { flex: 0 0 50%;     max-width: 50%     }
    .col-xl-8  { flex: 0 0 66.667%; max-width: 66.667% }
    .col-xl-9  { flex: 0 0 75%;     max-width: 75%     }
    .col-xl-12 { flex: 0 0 100%;    max-width: 100%    }
    .d-xl-flex        { display: flex       !important }
    .d-xl-none        { display: none       !important }
    .d-xl-block       { display: block      !important }
    .d-xl-table-cell  { display: table-cell !important }
    .d-xl-inline      { display: inline     !important }
    .d-none.d-xl-table-cell { display: table-cell !important }
}
.g-2 > * { padding: .375rem }
.g-3 > * { padding: .5rem }
.g-4 > * { padding: .75rem }
.gy-3 { margin-top: -.75rem }
.gy-3 > * { margin-top: .75rem !important; padding-left: .75rem; padding-right: .75rem }

/* ── Flex & display utilities ─────────────────────────────── */
.d-flex         { display: flex !important }
.d-block        { display: block !important }
.d-inline       { display: inline !important }
.d-inline-flex  { display: inline-flex !important }
.d-none         { display: none !important }
.d-grid         { display: grid !important }
.flex-wrap      { flex-wrap: wrap }
.flex-column    { flex-direction: column }
.flex-1         { flex: 1; min-width: 0 }
.flex-fill      { flex: 1 1 auto; min-width: 0 }
.flex-shrink-0  { flex-shrink: 0 }
.flex-grow-1    { flex-grow: 1 }
.align-items-center  { align-items: center }
.align-items-start   { align-items: flex-start }
.align-items-end     { align-items: flex-end }
.align-middle        { vertical-align: middle !important }
.justify-content-between { justify-content: space-between }
.justify-content-center  { justify-content: center }
.justify-content-end     { justify-content: flex-end }
.gap-1 { gap: .25rem } .gap-2 { gap: .5rem } .gap-3 { gap: .75rem }
.gap-4 { gap: 1rem }   .gap-5 { gap: 1.25rem }

/* ── Spacing ──────────────────────────────────────────────── */
.mb-0 { margin-bottom: 0    !important } .mb-1 { margin-bottom: .25rem !important }
.mb-2 { margin-bottom: .5rem !important } .mb-3 { margin-bottom: .75rem !important }
.mb-4 { margin-bottom: 1rem !important }  .mb-5 { margin-bottom: 1.5rem !important }
.mt-0 { margin-top: 0    !important } .mt-1 { margin-top: .25rem !important }
.mt-2 { margin-top: .5rem !important } .mt-3 { margin-top: .75rem !important }
.mt-4 { margin-top: 1rem !important }
.me-1 { margin-right: .25rem !important } .me-2 { margin-right: .5rem !important }
.me-3 { margin-right: .75rem !important }
.ms-1 { margin-left: .25rem !important }  .ms-2 { margin-left: .5rem !important }
.ms-3 { margin-left: .75rem !important }  .ms-auto { margin-left: auto !important }
.me-auto { margin-right: auto !important }
.p-0  { padding: 0    !important } .p-1  { padding: .25rem !important }
.p-2  { padding: .5rem !important } .p-3  { padding: .75rem !important }
.p-4  { padding: 1rem !important }
.px-1 { padding-left: .25rem !important; padding-right: .25rem !important }
.px-2 { padding-left: .5rem  !important; padding-right: .5rem  !important }
.px-3 { padding-left: .75rem !important; padding-right: .75rem !important }
.px-4 { padding-left: 1rem   !important; padding-right: 1rem   !important }
.py-1 { padding-top: .25rem !important; padding-bottom: .25rem !important }
.py-2 { padding-top: .5rem  !important; padding-bottom: .5rem  !important }
.py-3 { padding-top: .75rem !important; padding-bottom: .75rem !important }
.ps-3 { padding-left:  .75rem !important } .pe-3 { padding-right: .75rem !important }
.ps-2 { padding-left:  .5rem  !important } .pe-2 { padding-right: .5rem  !important }
.ps-1 { padding-left:  .25rem !important } .pe-1 { padding-right: .25rem !important }
.ps-4 { padding-left:  1rem   !important } .pe-4 { padding-right: 1rem   !important }
.pt-0 { padding-top: 0    !important } .pt-1 { padding-top: .25rem !important }
.pt-2 { padding-top: .5rem !important } .pt-3 { padding-top: .75rem !important }
.pt-4 { padding-top: 1rem !important }
.pb-0 { padding-bottom: 0    !important } .pb-1 { padding-bottom: .25rem !important }
.pb-2 { padding-bottom: .5rem !important } .pb-3 { padding-bottom: .75rem !important }
.pb-4 { padding-bottom: 1rem !important }
.my-0 { margin-top: 0 !important; margin-bottom: 0 !important }
.my-1 { margin-top: .25rem !important; margin-bottom: .25rem !important }
.my-2 { margin-top: .5rem !important; margin-bottom: .5rem !important }
.my-3 { margin-top: .75rem !important; margin-bottom: .75rem !important }
.my-4 { margin-top: 1rem !important; margin-bottom: 1rem !important }
.me-0 { margin-right: 0 !important } .me-4 { margin-right: 1rem !important }
.ms-0 { margin-left: 0 !important }  .ms-4 { margin-left: 1rem !important }
.h-100 { height: 100% } .w-100 { width: 100% }

/* ── Text ─────────────────────────────────────────────────── */
.text-muted    { color: var(--t3) !important }
.text-secondary{ color: var(--t2) !important }
.text-primary  { color: var(--ac) !important }
.text-success  { color: var(--green) !important }
.text-danger   { color: var(--red) !important }
.text-warning  { color: var(--amber) !important }
.text-info     { color: var(--blue) !important }
.fw-semibold   { font-weight: 600 !important }
.fw-bold       { font-weight: 700 !important }
.fw-normal     { font-weight: 400 !important }
.fs-7  { font-size: .75rem   !important }
.fs-8  { font-size: .6875rem !important }
.text-uppercase { text-transform: uppercase !important }
.text-lowercase { text-transform: lowercase !important }
.text-end    { text-align: right   !important }
.text-center { text-align: center  !important }
.text-start  { text-align: left    !important }
.text-nowrap { white-space: nowrap !important }
.text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }

/* ── Misc utilities ───────────────────────────────────────── */
.border-bottom { border-bottom: 1px solid var(--border) !important }
.border-top    { border-top:    1px solid var(--border) !important }
.border-0      { border: none !important }
.border        { border: 1px solid var(--border) !important }
.rounded       { border-radius: var(--r)  !important }
.rounded-2     { border-radius: var(--r)  !important }
.rounded-3     { border-radius: var(--rl) !important }
.rounded-circle{ border-radius: 50%       !important }
.overflow-hidden  { overflow: hidden }
.overflow-auto    { overflow: auto }
.overflow-x-auto  { overflow-x: auto }
.position-relative{ position: relative }
.position-absolute{ position: absolute }
.position-sticky  { position: sticky }
.top-0  { top: 0 }
.list-unstyled { list-style: none; padding: 0; margin: 0 }
.visually-hidden {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border-width: 0;
}
.translate-middle { transform: translate(-50%,-50%) }
.bg-transparent { background: transparent !important }
.shadow-sm { box-shadow: var(--sh) !important }
.cursor-pointer { cursor: pointer }
.opacity-50 { opacity: .5 }

/* ── Nav / Tabs ───────────────────────────────────────────── */
.nav-tabs { display: flex; gap: .25rem; border-bottom: 2px solid var(--border); margin-bottom: 1rem }
.nav-link {
    padding: .5rem .875rem; font-size: .8125rem; font-weight: 500; color: var(--t3);
    text-decoration: none; border: none; background: none;
    border-bottom: 2px solid transparent; margin-bottom: -2px;
    cursor: pointer; border-radius: var(--r) var(--r) 0 0;
    transition: color var(--tr);
}
.nav-link:hover { color: var(--t1) }
.nav-link.active { color: var(--ac); border-bottom-color: var(--ac) }
.tab-content > .tab-pane { display: none }
.tab-content > .tab-pane.active, .tab-content > .tab-pane.show { display: block }

/* ── Scrollbar ────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px }
::-webkit-scrollbar-track { background: transparent }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px }
::-webkit-scrollbar-thumb:hover { background: var(--t3) }

/* ── Responsive sidebar ───────────────────────────────────── */
@media (max-width: 991px) {
    .bz-sidebar { transform: translateX(-100%); transition: transform var(--tr), width var(--tr) }
    .bz-sidebar.mobile-open { transform: translateX(0) }
    .bz-main { margin-left: 0 !important }
}

/* ── Backward-compat CSS variable aliases ─────────────────── */
:root {
    --tts-accent:       var(--ac);
    --tts-success:      var(--green);
    --tts-danger:       var(--red);
    --tts-warning:      var(--amber);
    --tts-info:         var(--blue);
    --tts-gray-50:      var(--bg-s2);
    --tts-border-light: var(--border);
    --tts-transition:   var(--tr);
    --tts-primary:      #1a3c5e;
    --tts-sidebar-bg:   #0d1117;
    --tts-radius:       var(--r);
    --tts-card-shadow:  var(--sh);
}

/* ── KPI card border accent variants — removed for Option 3 (mockups show
   plain cards; only the icon carries color, no colored edge). The
   `.border-{color}` class name stays on existing Blade markup app-wide
   (harmless no-op) rather than editing every screen that emits it. ────── */
.kpi-card.border-primary,
.kpi-card.border-success,
.kpi-card.border-warning,
.kpi-card.border-danger,
.kpi-card.border-info {
    /* !important required: tray-theme.css (Classic's theme, still loaded on
       hrms pages via layout.header) defines these same selectors with
       `border-left: 4px solid ... !important`, which otherwise wins
       regardless of load order. */
    border-left: none !important;
    border-top: 1px solid var(--border) !important;
}

/* ── Compliance / progress bar (used in dashboards) ──────── */
.compliance-bar-track {
    height: 8px; background: var(--bg-s3); border-radius: 4px; overflow: hidden;
}
.compliance-bar-fill {
    height: 100%; border-radius: 4px; transition: width .4s ease; background: var(--ac);
}
.compliance-bar-fill.fill-success { background: var(--green) }
.compliance-bar-fill.fill-warning { background: var(--amber) }
.compliance-bar-fill.fill-danger  { background: var(--red) }

/* ── Stat row (used in dashboards) ───────────────────────── */
.stat-value { font-size: 1.25rem; font-weight: 700; color: var(--t1) }
.stat-label { font-size: .7rem; color: var(--t3); text-transform: uppercase; letter-spacing: .04em; margin-top: 2px }

/* ── Empty state / data-not-configured ──────────────────── */
.data-not-configured {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; padding: 2.5rem 1rem;
    color: var(--t3); text-align: center;
}
.data-not-configured i { font-size: 2rem; opacity: .3; margin-bottom: .75rem }
.dnc-title    { font-size: .875rem; font-weight: 600; color: var(--t2); margin-bottom: .25rem }
.dnc-subtitle { font-size: .75rem; color: var(--t3) }

/* ── Alert link ─────────────────────────────────────────── */
.alert-link { color: inherit; font-weight: 600; text-decoration: underline }
.alert-link:hover { opacity: .8 }

/* ── Bootstrap subtle classes used in blades ─────────────── */
.bg-primary-subtle { background: var(--ac-bg) !important; color: var(--ac-t) !important }
.text-primary      { color: var(--ac)   !important }
.text-success      { color: var(--green) !important }
.text-danger       { color: var(--red)   !important }
.text-warning      { color: var(--amber) !important }
.text-info         { color: var(--blue)  !important }

/* ── Quick-link rows (dashboard) ─────────────────────────── */
.bz-quick-link {
    display: flex; align-items: center; gap: .875rem;
    padding: .75rem; border-radius: var(--r);
    text-decoration: none; color: var(--t1);
    transition: background var(--tr);
    background: var(--bg-s2);
}
.bz-quick-link:hover { background: var(--ac-bg); color: var(--t1) }

/* ── Additional Bootstrap button compat ──────────────────── */
.btn-outline-secondary { background: transparent; color: var(--t2); border-color: var(--border2) }
.btn-outline-secondary:hover { background: var(--bg-s2); color: var(--t1) }
.btn-outline-primary  { background: transparent; color: var(--ac);  border-color: var(--ac) }
.btn-outline-primary:hover  { background: var(--ac-bg) }
.btn-outline-danger   { background: transparent; color: var(--red-t); border-color: var(--red-t) }
.btn-outline-danger:hover   { background: var(--red-bg) }
.btn-outline-success  { background: transparent; color: var(--green-t); border-color: var(--green-t) }
.btn-outline-success:hover  { background: var(--green-bg) }

/* ── tts-timeline (visits/detail) ───────────────────────── */
.tts-timeline { position: relative; padding-left: 1.5rem }
.tts-timeline::before {
    content: ''; position: absolute; left: .5rem; top: 0; bottom: 0;
    width: 2px; background: var(--border);
}
.tts-timeline-item { position: relative; padding-bottom: 1.25rem }
.tts-timeline-item:last-child { padding-bottom: 0 }
.tts-timeline-dot {
    position: absolute; left: -1.5rem; top: .25rem;
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--ac); border: 2px solid var(--bg-s);
    z-index: 1;
}
.tts-timeline-dot.success { background: var(--green) }
.tts-timeline-dot.warning { background: var(--amber) }
.tts-timeline-dot.danger  { background: var(--red) }
.tts-timeline-time { font-size: .7rem; color: var(--t3); margin-bottom: .2rem }
.tts-timeline-label { font-size: .8125rem; font-weight: 600; color: var(--t1) }
.tts-timeline-body { font-size: .75rem; color: var(--t2) }

/* ── Misc compat ─────────────────────────────────────────── */
.table-sm td, .table-sm th { padding: .375rem .625rem }
.fw-medium { font-weight: 500 }
.lh-1 { line-height: 1 }
.opacity-75 { opacity: .75 }
.text-break { word-break: break-word }
.float-end { float: right }
.clearfix::after { content: ''; display: table; clear: both }

/* ── Final compat gaps ───────────────────────────────────── */
:root {
    --tts-surface: var(--bg-s);
}
.btn-xs { padding: .15rem .5rem; font-size: .7rem; border-radius: 5px }
.table-borderless td, .table-borderless th { border: none }
.table-bordered td, .table-bordered th { border: 1px solid var(--border) }
.bizsight-body { font-family: var(--f); background: var(--bg-page); color: var(--t1) }
.bizsight-header {
    background: var(--bg-s); border-bottom: 1px solid var(--border);
    padding: .75rem 1.25rem; display: flex; align-items: center; justify-content: space-between;
    font-weight: 600; font-size: .9rem;
}

/* ── KPI card v2 — matches approved preview ──────────────── */
.kpi-card {
    background: var(--bg-s);
    border: 1px solid var(--border);
    border-radius: var(--rl);
    padding: 1rem 1.125rem 0;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}
.kpi-card .d-flex.align-items-start.justify-content-between {
    flex: 1;
    padding-bottom: .875rem;
}
/* Colored left-edge stripe removed for Option 3 — see the no-op override
   near the top of this file; kept as a single source of truth there. */
.kpi-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--t1);
    letter-spacing: -.03em;
    line-height: 1.1;
    margin: .25rem 0 .125rem;
}
.kpi-label {
    font-size: .65rem;
    font-weight: 700;
    color: var(--t3);
    letter-spacing: .07em;
    text-transform: uppercase;
}
.kpi-icon {
    width: 38px; height: 38px;
    border-radius: var(--r);
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; flex-shrink: 0;
}

/* ── Page header — dark-mode aware ──────────────────────── */
.page-header {
    background: var(--bg-s);
    border: 1px solid var(--border);
    border-radius: var(--rl);
    padding: .875rem 1.25rem;
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
    margin-bottom: 1rem;
}
.page-header-title { font-size: 1rem; font-weight: 700; color: var(--t1); margin: 0; line-height: 1.2 }
.page-header-subtitle { font-size: .725rem; color: var(--t3); margin: 2px 0 0 }

/* ── Chart cards — dark-mode aware ──────────────────────── */
.chart-card {
    background: var(--bg-s);
    border: 1px solid var(--border);
    border-radius: var(--rl);
    padding: 1rem 1.25rem;
}
.chart-card-title { font-size: .875rem; font-weight: 700; color: var(--t1) }

/* ── Organogram ──────────────────────────────────────────── */
.oc-outer {
    overflow: auto;
    background: var(--bg-s2);
    border-radius: var(--rl);
    border: 1px solid var(--border);
    padding: 2rem 1rem 1.5rem;
    text-align: center;
    min-height: 220px;
}
.oc-inner {
    display: inline-block;
    transform-origin: top center;
    transition: transform .2s ease;
}
.oc, .oc ul {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0; margin: 0;
    position: relative;
}
.oc li {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 8px 0;
    position: relative;
}
/* Horizontal connector bar above each child */
.oc li::before, .oc li::after {
    content: '';
    position: absolute;
    top: 0;
    height: 24px;
    width: 50%;
    border-top: 1.5px solid var(--border2);
}
.oc li::before { right: 50% }
.oc li::after  { left: 50% }
.oc li:only-child::before,
.oc li:only-child::after  { border: none }
.oc li:first-child::before { border: none }
.oc li:last-child::after   { border: none }
.oc li:first-child:not(:only-child)::after  { border-left: 1.5px solid var(--border2); border-radius: 4px 0 0 0 }
.oc li:last-child:not(:only-child)::before  { border-right: 1.5px solid var(--border2); border-radius: 0 4px 0 0 }
/* Vertical drop from the <ul> container down */
.oc ul::before {
    content: '';
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    height: 24px; width: 1.5px;
    background: var(--border2);
}

/* ── Node card ───────────────────────────────────────────── */
.oc-node {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    background: var(--bg-s);
    border: 1px solid var(--border);
    border-radius: var(--rl);
    padding: .875rem .75rem .625rem;
    min-width: 130px; max-width: 156px;
    position: relative;
    transition: border-color var(--tr), box-shadow var(--tr);
}
.oc-node:hover { border-color: var(--ac); box-shadow: 0 0 0 3px var(--ac-bg) }
.oc-avatar {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--ac-bg); border: 2px solid rgba(37,99,235,.25);
    color: var(--ac-t); font-size: .75rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: .5rem; flex-shrink: 0;
}
.oc-name {
    font-size: .75rem; font-weight: 600; color: var(--t1);
    line-height: 1.3; margin-bottom: .375rem;
    word-break: break-word; max-width: 130px;
}
.oc-role-badge {
    font-size: .6rem; font-weight: 700; letter-spacing: .04em;
    padding: .15rem .5rem; border-radius: 20px; text-transform: uppercase;
}
.oc-direct { font-size: .62rem; color: var(--t3); margin-top: .25rem }
.oc-edit-btn {
    position: absolute; top: .3rem; right: .3rem;
    width: 20px; height: 20px; border-radius: 4px;
    background: transparent; border: none; color: var(--t3);
    font-size: .7rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity var(--tr);
    padding: 0;
}
.oc-node:hover .oc-edit-btn { opacity: 1 }
.oc-edit-btn:hover { background: var(--bg-s2); color: var(--t1) }

/* ── Role colours for node avatar + badge ────────────────── */
.oc-r-director   .oc-avatar { background: var(--purple-bg); border-color: rgba(168,85,247,.25); color: var(--purple-t) }
.oc-r-hos        .oc-avatar { background: var(--ac-bg);     border-color: rgba(37,99,235,.25);  color: var(--ac-t) }
.oc-r-rsm        .oc-avatar { background: var(--blue-bg);   border-color: rgba(59,130,246,.25);  color: var(--blue-t) }
.oc-r-zsm        .oc-avatar { background: rgba(59,130,246,.1); border-color: rgba(59,130,246,.25); color: #2563eb }
.oc-r-asm        .oc-avatar { background: var(--green-bg);  border-color: rgba(16,185,129,.25);  color: var(--green-t) }
.oc-r-tsm        .oc-avatar { background: var(--amber-bg);  border-color: rgba(245,158,11,.25);  color: var(--amber-t) }
.oc-r-distributor .oc-avatar{ background: var(--bg-s3);     border-color: var(--border2);        color: var(--t2) }

.oc-rb-director  { background: var(--purple-bg); color: var(--purple-t) }
.oc-rb-hos       { background: var(--ac-bg);     color: var(--ac-t) }
.oc-rb-rsm       { background: var(--blue-bg);   color: var(--blue-t) }
.oc-rb-zsm       { background: rgba(59,130,246,.1); color: #2563eb }
.oc-rb-asm       { background: var(--green-bg);  color: var(--green-t) }
.oc-rb-tsm       { background: var(--amber-bg);  color: var(--amber-t) }
.oc-rb-distributor { background: var(--bg-s3);   color: var(--t2) }

/* ── h-badge compat (list view role pills) ───────────────── */
.h-badge-director  { background: var(--purple-bg); color: var(--purple-t); border: 1px solid rgba(168,85,247,.2) }
.h-badge-hos       { background: var(--ac-bg);     color: var(--ac-t);     border: 1px solid rgba(37,99,235,.2) }
.h-badge-rsm       { background: var(--blue-bg);   color: var(--blue-t);   border: 1px solid rgba(59,130,246,.2) }
.h-badge-zsm       { background: rgba(59,130,246,.1); color: #2563eb;       border: 1px solid rgba(59,130,246,.2) }
.h-badge-asm       { background: var(--green-bg);  color: var(--green-t);  border: 1px solid rgba(16,185,129,.2) }
.h-badge-tsm       { background: var(--amber-bg);  color: var(--amber-t);  border: 1px solid rgba(245,158,11,.2) }
.h-badge-distributor{ background: var(--bg-s3);    color: var(--t2);       border: 1px solid var(--border) }

/* ── Bootstrap subtle badge compat ──────────────────────── */
.bg-success-subtle  { background: var(--green-bg)  !important; color: var(--green-t)  !important }
.bg-secondary-subtle{ background: var(--bg-s3)     !important; color: var(--t2)        !important }
.text-success { color: var(--green-t) !important }
.text-secondary { color: var(--t2) !important }

/* ── Zoom toolbar ────────────────────────────────────────── */
.oc-toolbar {
    display: flex; align-items: center; gap: .375rem;
    padding: .5rem .75rem;
    border-bottom: 1px solid var(--border);
    background: var(--bg-s);
    border-radius: var(--rl) var(--rl) 0 0;
}
.oc-zoom-btn {
    width: 28px; height: 28px;
    border-radius: var(--r); border: 1px solid var(--border);
    background: transparent; color: var(--t2); cursor: pointer;
    font-size: .8rem;
    display: flex; align-items: center; justify-content: center;
    transition: background var(--tr), color var(--tr);
}
.oc-zoom-btn:hover { background: var(--bg-s2); color: var(--t1) }
.oc-zoom-label { font-size: .72rem; color: var(--t3); min-width: 36px; text-align: center }

/* Modal for dark mode */
.modal-content { background: var(--bg-s); border: 1px solid var(--border); color: var(--t1) }
.modal-header  { border-bottom: 1px solid var(--border) }
.modal-footer  { border-top: 1px solid var(--border) }
.btn-close { filter: invert(0) }
[data-theme="dark"] .btn-close { filter: invert(1) }

/* ── Organogram collapse / expand ───────────────────────── */
.oc-toggle-btn {
    display: flex; align-items: center; justify-content: center; gap: 3px;
    margin-top: 6px; width: 100%;
    background: var(--bg-s2); border: 1px solid var(--border);
    border-radius: 20px; padding: 3px 0;
    font-size: 10px; color: var(--t3); cursor: pointer;
    transition: background var(--tr), color var(--tr), border-color var(--tr);
    flex-shrink: 0;
}
.oc-toggle-btn:hover { background: var(--ac-bg); color: var(--ac); border-color: rgba(37,99,235,.35) }
.oc-toggle-btn i { font-size: 9px; transition: transform .2s }

/* Rotate chevron when collapsed */
li.oc-collapsed > .oc-node .oc-toggle-btn i { transform: rotate(-90deg) }

/* Hide children when collapsed */
li.oc-collapsed > ul { display: none !important }

/* Dim collapsed node card slightly */
li.oc-collapsed > .oc-node { border-style: dashed }

/* ── Organogram filter highlighting ─────────────────────── */
li.oc-dim > .oc-node {
    opacity: .22;
    filter: grayscale(.5);
    pointer-events: none;
}
li.oc-match > .oc-node {
    border-color: var(--ac) !important;
    box-shadow: 0 0 0 3px var(--ac-bg);
}
li.oc-match > .oc-node .oc-avatar {
    border-color: var(--ac) !important;
}

/* =============================================================
   ENTERPRISE UI POLISH — missing components, dark-mode fixes
   ============================================================= */

/* chart-card default padding */
.chart-card { padding: 1.125rem 1.25rem }
.chart-card.p-0 { padding: 0 !important }
.chart-card.p-0 .chart-card-header {
    padding: 1rem 1.25rem;
    margin-bottom: 0;
    border-bottom: 1px solid var(--border);
}

/* Profile header (detail page hero banner - always dark) */
.profile-header {
    background: linear-gradient(135deg, #161b2e 0%, #0d1117 100%);
    border: 1px solid var(--border);
    border-radius: var(--rl);
    padding: 1.5rem 1.75rem;
    position: relative; overflow: hidden;
}
.profile-header::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at 80% 20%, rgba(37,99,235,.18), transparent 65%);
    pointer-events: none;
}
.profile-header > * { position: relative; z-index: 1 }

/* Profile tabs */
.profile-tabs-nav {
    display: flex; gap: .25rem; flex-wrap: wrap;
    background: var(--bg-s);
    border: 1px solid var(--border);
    border-radius: var(--rl);
    padding: .375rem;
}
.profile-tab-btn {
    display: inline-flex; align-items: center; gap: .375rem;
    padding: .4375rem .875rem;
    font-size: .8rem; font-weight: 500; color: var(--t2);
    border: none; background: none;
    border-radius: var(--r); cursor: pointer;
    transition: background var(--tr), color var(--tr);
    white-space: nowrap;
}
.profile-tab-btn:hover { background: var(--bg-s2); color: var(--t1) }
.profile-tab-btn.active { background: var(--ac); color: #fff }
.profile-tab-btn.active:hover { background: var(--ac-h) }

/* Detail rows */
.detail-row {
    display: flex; align-items: flex-start;
    padding: .625rem .875rem;
    border-bottom: 1px solid var(--border);
    gap: 1rem; font-size: .8125rem;
}
.detail-row:last-child { border-bottom: none }
.detail-label {
    flex: 0 0 140px; min-width: 140px;
    font-size: .68rem; font-weight: 700;
    color: var(--t3); text-transform: uppercase;
    letter-spacing: .05em; padding-top: .1rem; line-height: 1.6;
}
.detail-value { flex: 1; color: var(--t1); word-break: break-word; line-height: 1.6 }

/* GPS badges */
.gps-badge-match    { background: var(--green-bg); color: var(--green-t); border: 1px solid rgba(16,185,129,.25) }
.gps-badge-mismatch { background: var(--red-bg);   color: var(--red-t);   border: 1px solid rgba(239,68,68,.25) }
.gps-badge-override { background: var(--amber-bg); color: var(--amber-t); border: 1px solid rgba(245,158,11,.25) }
.gps-badge-unknown  { background: var(--bg-s3);    color: var(--t2);      border: 1px solid var(--border) }
.gps-badge-pending  { background: var(--blue-bg);  color: var(--blue-t);  border: 1px solid rgba(59,130,246,.25) }

/* Badge states - full set */
.badge-state-ready,
.badge-state-completed,
.badge-state-compliant  { background: var(--green-bg); color: var(--green-t); border: 1px solid rgba(16,185,129,.25) }
.badge-state-exception  { background: var(--red-bg);   color: var(--red-t);   border: 1px solid rgba(239,68,68,.25) }
.badge-state-hold,
.badge-state-delayed,
.badge-state-warning    { background: var(--amber-bg); color: var(--amber-t); border: 1px solid rgba(245,158,11,.25) }
.badge-state-in_process,
.badge-state-checked_in { background: var(--blue-bg);  color: var(--blue-t);  border: 1px solid rgba(59,130,246,.25) }
.badge-state-open,
.badge-state-in_progress{ background: var(--ac-bg);    color: var(--ac-t);    border: 1px solid rgba(37,99,235,.25) }
.badge-state-team       { background: var(--ac-bg);    color: var(--ac-t);    border: 1px solid rgba(37,99,235,.2) }
.badge-state-public     { background: var(--green-bg); color: var(--green-t); border: 1px solid rgba(16,185,129,.2) }
.badge-state-private    { background: var(--bg-s3);    color: var(--t2);      border: 1px solid var(--border) }
.badge-state-cancelled  { background: var(--bg-s3);    color: var(--t3);      border: 1px solid var(--border) }
.badge-state-voided     { background: var(--red-bg);   color: var(--red-t);   border: 1px solid rgba(239,68,68,.2) }

/* Subtle badge compat */
.bg-warning-subtle { background: var(--amber-bg) !important; color: var(--amber-t) !important }
.bg-danger-subtle  { background: var(--red-bg)   !important; color: var(--red-t)   !important }
.bg-info-subtle    { background: var(--blue-bg)  !important; color: var(--blue-t)  !important }
.text-warning      { color: var(--amber-t) !important }

/* Empty state */
.empty-state {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; padding: 3rem 1.5rem; text-align: center;
}
.empty-state-icon    { font-size: 2.5rem; color: var(--t3); opacity: .35; margin-bottom: .875rem }
.empty-state-title   { font-size: .9375rem; font-weight: 600; color: var(--t2); margin-bottom: .375rem }
.empty-state-message { font-size: .8rem; color: var(--t3) }

/* Timeline (visits/detail) */
.tts-timeline { position: relative; padding: .5rem 0 .5rem 2.25rem }
.tts-timeline::before {
    content: ''; position: absolute;
    left: .625rem; top: .75rem; bottom: .75rem;
    width: 2px; background: var(--border); border-radius: 2px;
}
.timeline-item { position: relative; padding-bottom: 1.625rem }
.timeline-item:last-child { padding-bottom: 0 }
.timeline-dot {
    position: absolute; left: -1.9375rem; top: .25rem;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--bg-s2); border: 2px solid var(--border2);
    z-index: 1;
    display: flex; align-items: center; justify-content: center;
    color: var(--t3);
}
.td-checkin  { background: var(--green);  border-color: var(--green);  color: #fff; box-shadow: 0 0 0 3px var(--green-bg)  }
.td-checkout { background: var(--blue);   border-color: var(--blue);   color: #fff; box-shadow: 0 0 0 3px var(--blue-bg)   }
.td-note     { background: var(--amber);  border-color: var(--amber);  color: #fff; box-shadow: 0 0 0 3px var(--amber-bg)  }
.td-exception{ background: var(--red);    border-color: var(--red);    color: #fff; box-shadow: 0 0 0 3px var(--red-bg)    }
.td-submit   { background: var(--ac);     border-color: var(--ac);     color: #fff; box-shadow: 0 0 0 3px var(--ac-bg)     }
.td-feed     { background: var(--purple); border-color: var(--purple); color: #fff; box-shadow: 0 0 0 3px var(--purple-bg) }
.timeline-title { font-size: .8125rem; font-weight: 600; color: var(--t1); line-height: 1.4 }
.timeline-time  { font-size: .7rem; color: var(--t3); margin-top: .1rem }

/* Map placeholder */
.map-placeholder {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; padding: 2.5rem 1.5rem;
    min-height: 200px; text-align: center;
    background: var(--bg-s2); border-radius: var(--r);
    border: 2px dashed var(--border2); color: var(--t2);
    margin: .5rem;
}
.map-coords-badge {
    display: inline-flex; align-items: center; gap: .375rem;
    background: var(--bg-s3); border: 1px solid var(--border);
    border-radius: var(--r); padding: .375rem .75rem;
    font-family: var(--fm); font-size: .75rem; color: var(--ac);
}

/* Input group */
.input-group { display: flex; align-items: stretch; width: 100% }
.input-group > .form-control,
.input-group > .form-select { flex: 1; min-width: 0; border-radius: 0 }
.input-group > .form-control:first-child,
.input-group > .form-select:first-child  { border-radius: var(--r) 0 0 var(--r) }
.input-group > .form-control:last-child,
.input-group > .form-select:last-child   { border-radius: 0 var(--r) var(--r) 0 }
.input-group-text {
    display: flex; align-items: center; padding: .4rem .75rem;
    font-size: .8125rem; color: var(--t2);
    background: var(--bg-s2); border: 1px solid var(--border);
    white-space: nowrap; flex-shrink: 0;
}
.input-group > .input-group-text:first-child { border-radius: var(--r) 0 0 var(--r); border-right: none }
.input-group > .input-group-text:last-child  { border-radius: 0 var(--r) var(--r) 0; border-left: none }
.input-group > .input-group-text + .form-control { border-radius: 0 var(--r) var(--r) 0 }
.border-end-0   { border-right: none !important }
.border-start-0 { border-left:  none !important }

/* Row states */
.wip-row-delayed { background: rgba(239,68,68,.04) !important }
.table-hover tbody .wip-row-delayed:hover { background: rgba(239,68,68,.08) !important }

/* Filter bar */
.filter-card { background: var(--bg-s); border: 1px solid var(--border); border-radius: var(--rl); margin-bottom: 1rem }
.filter-card-body { padding: .75rem 1rem; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center }

/* Table thead.table-light */
.table thead.table-light tr { background: var(--bg-s2) }
.table thead.table-light th { background: var(--bg-s2); color: var(--t3) }

/* Table selected row */
.table-active, .table tbody .table-active { background: var(--ac-bg) !important }
.table-hover tbody .table-active:hover { background: rgba(37,99,235,.12) !important }

/* Spacing extras */
.py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important }
.py-5 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important }
.pe-0 { padding-right: 0 !important }
.ps-0 { padding-left:  0 !important }
.mt-auto { margin-top: auto !important }
.min-w-0 { min-width: 0 }
.shadow-lg { box-shadow: 0 10px 40px rgba(0,0,0,.16) !important }
.fst-italic { font-style: italic }
.fst-normal { font-style: normal }
.rounded-4  { border-radius: 16px !important }

/* ── Settings page ─────────────────────────────────────── */
.settings-layout {
    display: flex; gap: 1.25rem; align-items: flex-start;
}
.settings-nav-col {
    flex: 0 0 210px; min-width: 0;
    background: var(--bg-s); border: 1px solid var(--border);
    border-radius: var(--rl); padding: .375rem; display: flex; flex-direction: column; gap: 2px;
}
.settings-content-col { flex: 1; min-width: 0 }
.settings-nav-item {
    display: flex; align-items: center; gap: .5rem;
    width: 100%; padding: .5rem .75rem;
    font-size: .8125rem; font-weight: 500; color: var(--t2);
    background: none; border: none; border-radius: var(--r);
    cursor: pointer; text-align: left;
    transition: background var(--tr), color var(--tr);
}
.settings-nav-item:hover { background: var(--bg-s2); color: var(--t1) }
.settings-nav-item.active { background: var(--ac-bg); color: var(--ac-t); font-weight: 600 }
.settings-section { background: var(--bg-s); border: 1px solid var(--border); border-radius: var(--rl); padding: 1.25rem }
.settings-section-title { font-size: .9375rem; font-weight: 700; color: var(--t1) }
.settings-section-desc  { font-size: .775rem; color: var(--t3); margin-top: .15rem }
.settings-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: .75rem 0; border-bottom: 1px solid var(--border); gap: 1.5rem;
}
.settings-row:last-child { border-bottom: none }
.settings-row-label { font-size: .8125rem; font-weight: 600; color: var(--t1) }
.settings-row-desc  { font-size: .75rem; color: var(--t3); margin-top: .15rem }
.settings-row-input { flex-shrink: 0 }
@media (max-width: 767px) {
    .settings-layout { flex-direction: column }
    .settings-nav-col { flex: none; width: 100% }
}

/* ── Notifications page ────────────────────────────────── */
.notif-item {
    display: flex; gap: .875rem; align-items: flex-start;
    padding: .875rem 1rem;
    border-radius: var(--rl);
    border: 1px solid var(--border);
    transition: box-shadow var(--tr);
}
.notif-item:hover { box-shadow: var(--sh) }
.notif-icon {
    flex-shrink: 0; width: 36px; height: 36px;
    border-radius: 8px; display: flex; align-items: center; justify-content: center;
    font-size: .9rem;
}
.notif-title { font-size: .8375rem; font-weight: 600; color: var(--t1); margin-bottom: .2rem }
.notif-body  { font-size: .775rem; color: var(--t2); line-height: 1.5 }
.notif-time  { font-size: .72rem; color: var(--t3); white-space: nowrap; padding-top: .1rem }

/* ── Permission matrix ─────────────────────────────────── */
.perm-matrix thead th {
    font-size: .68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: var(--t3); border-bottom: 1px solid var(--border);
}
.perm-module-header td {
    background: var(--bg-s2) !important;
    border-top: 1px solid var(--border);
}
.perm-check-yes {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 6px;
    background: var(--green-bg); color: var(--green-t);
    border: 1px solid rgba(16,185,129,.3); font-size: .72rem;
}
.perm-check-no {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 6px;
    background: var(--bg-s2); color: var(--t3);
    border: 1px solid var(--border); font-size: .72rem;
}

/* ── User avatar sizes ─────────────────────────────────── */
.user-avatar-sm {
    width: 28px; height: 28px; border-radius: 50%;
    background: linear-gradient(135deg, var(--ac), var(--purple));
    color: #fff; font-size: .65rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.user-avatar-lg {
    width: 56px; height: 56px; border-radius: 14px;
    background: linear-gradient(135deg, var(--ac), var(--purple));
    color: #fff; font-size: 1.4rem;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

/* ── badge-state-draft ─────────────────────────────────── */
.badge-state-draft    { background: var(--bg-s3); color: var(--t2); border: 1px solid var(--border) }
.badge-state-inactive { background: var(--bg-s3); color: var(--t3); border: 1px solid var(--border) }
.badge-state-active   { background: var(--green-bg); color: var(--green-t); border: 1px solid rgba(16,185,129,.25) }

/* ── Missing badge states ──────────────────────────────── */
.badge-state-info,
.badge-state-submitted { background: var(--blue-bg); color: var(--blue-t); border: 1px solid rgba(59,130,246,.25) }
.badge-state-approved  { background: var(--green-bg); color: var(--green-t); border: 1px solid rgba(16,185,129,.25) }
.badge-state-rejected  { background: var(--red-bg);   color: var(--red-t);   border: 1px solid rgba(239,68,68,.25) }
.badge-state-pending   { background: var(--amber-bg); color: var(--amber-t); border: 1px solid rgba(245,158,11,.25) }

/* ── Nav item (tabs) ───────────────────────────────────── */
.nav-item { display: flex }

/* ═══════════════════════════════════════════════════════
   MODAL — position:fixed overlay (no Bootstrap required)
   ═══════════════════════════════════════════════════════ */
.modal {
    position: fixed; inset: 0; z-index: 1050;
    display: none; overflow-x: hidden; overflow-y: auto;
    outline: 0;
}
.modal.show, .modal.d-block { display: block }
.modal-dialog {
    position: relative; width: auto; margin: 1.75rem auto;
    pointer-events: none; max-width: 500px;
}
.modal-dialog-centered {
    display: flex; align-items: center;
    min-height: calc(100% - 3.5rem);
}
.modal-content {
    position: relative; display: flex; flex-direction: column;
    width: 100%; pointer-events: auto;
    background: var(--bg-s); border: 1px solid var(--border);
    border-radius: 16px; color: var(--t1);
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
    outline: 0;
}
.modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.125rem 1.25rem; border-bottom: 1px solid var(--border);
    border-radius: 16px 16px 0 0;
}
.modal-title  { font-size: 1rem; font-weight: 700; color: var(--t1) }
.modal-body   { padding: 1.125rem 1.25rem; flex: 1 }
.modal-footer {
    display: flex; align-items: center; justify-content: flex-end; gap: .5rem;
    padding: .875rem 1.25rem; border-top: 1px solid var(--border);
    border-radius: 0 0 16px 16px;
}
.btn-close {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; padding: 0;
    background: var(--bg-s2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3E%3C/svg%3E") center/10px no-repeat;
    border: 1px solid var(--border); border-radius: 6px; cursor: pointer;
    opacity: .7; transition: opacity var(--tr);
}
.btn-close:hover { opacity: 1 }
[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* ═══════════════════════════════════════════════════════
   PAGINATION — .pagination / .page-item / .page-link
   ═══════════════════════════════════════════════════════ */
.pagination {
    display: flex; gap: 2px; list-style: none;
    padding: 0; margin: 0; flex-wrap: wrap; align-items: center;
}
.page-item { display: flex }
.page-item.disabled .page-link { opacity: .4; pointer-events: none; cursor: default }
.page-link {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 32px; height: 32px; padding: 0 .5rem;
    font-size: .8125rem; color: var(--t2);
    background: var(--bg-s); border: 1px solid var(--border);
    border-radius: 6px; text-decoration: none; cursor: pointer;
    transition: background var(--tr), color var(--tr), border-color var(--tr);
    line-height: 1;
}
.page-link:hover        { background: var(--bg-s2); color: var(--t1); border-color: var(--border2) }
.page-item.active .page-link {
    background: var(--ac); border-color: var(--ac); color: #fff; font-weight: 600;
}
/* text-dark fix in pagination info */
.text-dark { color: var(--t1) !important }

/* ═══════════════════════════════════════════════════════
   PAGE LOADER — animated bar at top during Livewire requests
   ═══════════════════════════════════════════════════════ */
.bz-page-loader {
    position: fixed; top: 0; left: 0; right: 0; z-index: 9999;
    height: 3px; background: transparent;
    pointer-events: none;
}
.bz-page-loader-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--ac), #60a5fa, var(--ac));
    background-size: 200% 100%;
    animation: bz-loader-slide 1.4s ease infinite;
    border-radius: 0 3px 3px 0;
}
@keyframes bz-loader-slide {
    0%   { background-position: 200% 0; width: 0% }
    10%  { width: 40% }
    50%  { width: 70%; background-position: 100% 0 }
    100% { background-position: 0% 0; width: 100% }
}

/* Livewire wire:loading backdrop overlay */
.bz-wire-overlay {
    position: fixed; inset: 0; z-index: 1045;
    background: rgba(0,0,0,.04);
    pointer-events: none;
    opacity: 0; transition: opacity .15s;
}
.bz-wire-overlay.active { opacity: 1; pointer-events: auto }

/* ═══════════════════════════════════════════════════════
   FEED — social media card style
   ═══════════════════════════════════════════════════════ */
.feed-post-card {
    background: var(--bg-s);
    border: 1px solid var(--border);
    border-radius: var(--rl);
    transition: box-shadow var(--tr), border-color var(--tr);
    overflow: hidden;
}
.feed-post-card:hover { box-shadow: var(--sh); border-color: var(--border2) }
.feed-post-header { padding: 1rem 1.125rem .5rem }
.feed-post-body   { padding: .125rem 1.125rem .75rem; font-size: .875rem; line-height: 1.65; color: var(--t1) }
.feed-post-footer {
    padding: .625rem 1.125rem; border-top: 1px solid var(--border);
    display: flex; align-items: center; gap: 1rem;
}
.feed-avatar {
    width: 42px; height: 42px; border-radius: 50%;
    background: linear-gradient(135deg, var(--ac), var(--purple));
    color: #fff; font-size: .95rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.feed-author { font-size: .875rem; font-weight: 700; color: var(--t1); line-height: 1.2 }
.feed-role   { font-size: .72rem; color: var(--t3) }
.feed-time   { font-size: .72rem; color: var(--t3); white-space: nowrap }
.feed-vis-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: 20px;
    font-size: .68rem; font-weight: 600;
}
.feed-stat-btn {
    display: inline-flex; align-items: center; gap: .375rem;
    padding: .3rem .625rem; border-radius: 6px;
    font-size: .78rem; color: var(--t3);
    background: none; border: none; cursor: pointer;
    transition: background var(--tr), color var(--tr);
}
.feed-stat-btn:hover { background: var(--bg-s2); color: var(--t2) }
.feed-location-tag {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .72rem; color: var(--t3);
    padding: 2px 8px; background: var(--bg-s2);
    border-radius: 4px; border: 1px solid var(--border);
}
.feed-vis-badge { background: var(--bg-s2); color: var(--t2); border: 1px solid var(--border); }

/* ── Feed category tabs ──────────────────────────────────────── */
.feed-tabs { display: flex; flex-wrap: wrap; gap: .4rem; }
.feed-tab {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .4rem .8rem; border-radius: 20px;
    background: var(--bg-s); border: 1px solid var(--border);
    color: var(--t2); font-size: .78rem; font-weight: 600; cursor: pointer;
    transition: background var(--tr), border-color var(--tr), color var(--tr);
}
.feed-tab:hover { border-color: var(--ac); color: var(--t1); }
.feed-tab.active { background: var(--ac); border-color: var(--ac); color: #fff; }
.feed-tab i { font-size: .78rem; }
.feed-tab-count {
    font-size: .68rem; font-weight: 700; min-width: 18px; text-align: center;
    padding: 0 5px; border-radius: 10px; background: var(--bg-s2); color: var(--t3);
}
.feed-tab.active .feed-tab-count { background: rgba(255,255,255,.25); color: #fff; }

/* ── Feed category badge + card accent ───────────────────────── */
.feed-cat-badge {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: 2px 9px; border-radius: 20px; font-size: .66rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .02em;
}
.feed-cat-badge i { font-size: .62rem; }
.cat-announcement { background: rgba(59,130,246,.12);  color: #2563eb; border: 1px solid rgba(59,130,246,.25); }
.cat-competitor   { background: rgba(239,68,68,.12);   color: #dc2626; border: 1px solid rgba(239,68,68,.25); }
.cat-achievement  { background: rgba(16,185,129,.12);  color: #059669; border: 1px solid rgba(16,185,129,.25); }
.cat-issue        { background: rgba(245,158,11,.14);  color: #b45309; border: 1px solid rgba(245,158,11,.28); }
.cat-update       { background: rgba(37,99,235,.10);  color: var(--ac-t); border: 1px solid rgba(37,99,235,.22); }
[data-theme="dark"] .cat-announcement { color: #60a5fa; }
[data-theme="dark"] .cat-competitor   { color: #f87171; }
[data-theme="dark"] .cat-achievement  { color: #34d399; }
[data-theme="dark"] .cat-issue        { color: #fbbf24; }
/* Left accent stripe per category */
.feed-cat-announcement { border-left: 3px solid #3b82f6; }
.feed-cat-competitor   { border-left: 3px solid #ef4444; }
.feed-cat-achievement  { border-left: 3px solid #10b981; }
.feed-cat-issue        { border-left: 3px solid #f59e0b; }
.feed-cat-update       { border-left: 3px solid var(--ac); }

/* ═══════════════════════════════════════════════════════
   SLIDE-IN PANEL — dark-mode safe
   ═══════════════════════════════════════════════════════ */
.slide-panel {
    width: 100%; max-width: 480px;
    background: var(--bg-s); height: 100%;
    display: flex; flex-direction: column;
    box-shadow: -8px 0 32px rgba(0,0,0,.18);
    animation: slideInRight .2s ease-out;
}
@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0 }
    to   { transform: translateX(0);    opacity: 1 }
}

/* Alpine.js */
[x-cloak] { display: none !important }

/* ─── Utility ─────────────────────────────────────────── */
.text-truncate-2 {
    display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
}
.hover-bg:hover { background: var(--bg-s2) !important }


/* ============================================================
   Survey builder styles — moved out of inline <style> blocks in
   surveys/edit.blade.php. Inline style tags inside a Livewire
   component get mounted as the component root by Livewire and break
   wire:click through DOM morphs. Scoped by .survey-builder/.sb-/.tpl-.
   ============================================================ */

.bz-content:has(.survey-builder) { padding: 0 !important; overflow: hidden; }
.survey-builder { display:flex; flex-direction:column; height:calc(100vh - var(--tb-h)); overflow:hidden; background:var(--bg-s2); }
.tpl-screen { flex:1; overflow-y:auto; padding:2rem 2.5rem; background:var(--bg-s2); }
.sb-body { display:flex; flex:1; min-height:0; overflow:hidden; }
.sb-canvas { flex:1; height:100%; overflow-y:auto; }
.sb-meta-panel { width:220px; flex-shrink:0; height:100%; overflow-y:auto; }

.tpl-screen {
    padding:2rem 2.5rem; background:var(--bg-s2); overflow-y:auto; flex:1;
}
.tpl-header {
    display:flex;align-items:flex-start;gap:1rem;margin-bottom:1.75rem;
}
.tpl-heading { font-size:1.5rem;font-weight:800;margin:0; }
.tpl-sub     { color:var(--t2);margin:4px 0 0;font-size:0.9rem; }

.tpl-blank-row { margin-bottom:1.25rem; }
.tpl-blank-btn {
    display:flex;align-items:center;gap:1rem;width:100%;
    background:var(--bg-s);border:2px dashed var(--border2);border-radius:14px;
    padding:1rem 1.25rem;cursor:pointer;transition:all .18s;text-align:left;
}
.tpl-blank-btn:hover { border-color:var(--tts-accent);background:rgba(14,165,233,.03); }
.tpl-blank-icon {
    width:48px;height:48px;border-radius:12px;background:var(--bg-s2);
    display:flex;align-items:center;justify-content:center;
    color:#94a3b8;font-size:1.2rem;flex-shrink:0;
}
.tpl-blank-title { font-weight:700;font-size:0.95rem; }
.tpl-blank-desc  { color:#94a3b8;font-size:0.8rem;margin-top:2px; }
.tpl-blank-arrow { color:var(--t3);margin-left:auto;font-size:0.9rem;flex-shrink:0; }
.tpl-blank-btn:hover .tpl-blank-arrow { color:var(--tts-accent); }
.tpl-blank-btn:hover .tpl-blank-icon  { background:rgba(14,165,233,.1);color:var(--tts-accent); }

.tpl-divider {
    display:flex;align-items:center;gap:1rem;margin:1.5rem 0;color:#94a3b8;font-size:0.8rem;
}
.tpl-divider::before,.tpl-divider::after { content:'';flex:1;height:1px;background:var(--bg-s2); }

.tpl-grid {
    display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.1rem;
}

.tpl-card {
    background:var(--bg-s);border-radius:14px;border:2px solid var(--border);
    cursor:pointer;transition:all .2s;overflow:hidden;position:relative;
    display:flex;flex-direction:column;
}
.tpl-card:hover { border-color:transparent;box-shadow:0 8px 30px rgba(0,0,0,.12);transform:translateY(-2px); }
.tpl-card-loading { opacity:.7;pointer-events:none; }
.tpl-card-spinner {
    position:absolute;inset:0;background:rgba(255,255,255,.8);
    display:flex;align-items:center;justify-content:center;
    font-size:1.5rem;color:var(--tts-accent);z-index:5;
}

.tpl-card-top {
    padding:1.1rem 1.1rem 0.8rem;display:flex;align-items:flex-start;justify-content:space-between;
}
.tpl-card-icon {
    width:44px;height:44px;border-radius:11px;
    display:flex;align-items:center;justify-content:center;font-size:1.1rem;
}
.tpl-badge {
    padding:3px 9px;border-radius:20px;font-size:0.7rem;font-weight:700;
    letter-spacing:.03em;
}

.tpl-card-body { padding:0.9rem 1.1rem;flex:1; }
.tpl-card-name { font-weight:700;font-size:0.92rem;margin-bottom:0.4rem; }
.tpl-card-desc { color:var(--t2);font-size:0.78rem;line-height:1.5;margin-bottom:0.75rem; }
.tpl-card-meta {
    display:flex;flex-wrap:wrap;gap:0.4rem 0.75rem;
    font-size:0.72rem;color:#94a3b8;
}
.tpl-card-meta span { display:flex;align-items:center;gap:4px; }
.tpl-card-meta i { font-size:0.65rem; }

.tpl-card-footer {
    padding:0.7rem 1.1rem;border-top:1px solid var(--border);
}
.tpl-use-btn { font-size:0.8rem;font-weight:600; }

/* Top bar */
.sb-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.25rem;
    height: 56px;
    min-height: 56px;
    background: var(--bg-s);
    border-bottom: 1px solid var(--border);
    gap: 1rem;
    flex-shrink: 0;
    z-index: 10;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.sb-topbar-left  { display:flex; align-items:center; gap:0.6rem; flex:1; min-width:0; }
.sb-topbar-right { display:flex; align-items:center; gap:0.5rem; flex-shrink:0; }
.sb-back-btn {
    width:34px; height:34px; border-radius:8px; border:1.5px solid var(--border);
    background:var(--bg-s2); display:flex; align-items:center; justify-content:center;
    color:var(--t2); text-decoration:none; transition:all .15s; flex-shrink:0;
}
.sb-back-btn:hover { background:var(--bg-s2); color:var(--t1); }
.sb-title-input {
    border: none; outline: none; font-size:1rem; font-weight:700; color:var(--t1);
    width: 280px; max-width: 38vw; background: transparent;
    border-bottom: 2px solid transparent; padding: 2px 0; transition: border-color .2s;
}
.sb-title-input:focus { border-bottom-color: var(--tts-accent); }
.sb-title-input::placeholder { color:var(--t3); font-weight:400; }
.sb-status-badge {
    padding:3px 10px; border-radius:20px; font-size:0.72rem; font-weight:600;
    display:flex; align-items:center; gap:5px; flex-shrink:0; white-space:nowrap;
}
.sb-version-badge {
    padding:3px 8px; border-radius:6px; font-size:0.7rem; font-weight:700;
    background:var(--bg-s2); color:var(--t2); flex-shrink:0; letter-spacing:.02em;
}

/* Read-only (published/archived) lock */
.sb-readonly-banner {
    display:flex; align-items:center; gap:9px; padding:8px 1.25rem;
    background:rgba(245,158,11,.08); border-bottom:1px solid rgba(245,158,11,.25);
    color:var(--t1); font-size:0.8rem; flex-shrink:0;
}
.sb-readonly-banner i { color:#f59e0b; }
.sb-readonly .sb-icon-btn,
.sb-readonly .sb-add-question-btn,
.sb-readonly .sb-add-section-btn,
.sb-readonly .sb-add-option-btn,
.sb-readonly .sb-question-actions,
.sb-readonly .sb-section-meta-editor .sb-btn,
.sb-readonly .sb-picker-actions { display:none !important; }
.sb-readonly input,
.sb-readonly select,
.sb-readonly textarea {
    pointer-events:none; background:var(--bg-s2) !important; opacity:.85;
}
.sb-flash {
    display:flex; align-items:center; gap:6px; padding:5px 12px; border-radius:8px;
    font-size:0.8rem; font-weight:500; animation:fadeIn .2s; white-space:nowrap;
}
.sb-flash-success { background:var(--green-bg); border:1px solid rgba(16,185,129,.3); color:var(--green-t); }
.sb-flash-error   { background:var(--red-bg);   border:1px solid rgba(239,68,68,.3);  color:var(--red-t);   }

/* Buttons */
.sb-btn {
    display:inline-flex; align-items:center; gap:5px; padding:6px 14px;
    border-radius:8px; font-size:0.82rem; font-weight:600; border:none;
    cursor:pointer; transition:all .15s; white-space:nowrap; flex-shrink:0;
}
.sb-btn-primary { background:var(--tts-accent); color:#fff; }
.sb-btn-primary:hover { background:#0284c7; }
.sb-btn-accent  { background:rgba(14,165,233,0.1); color:var(--tts-accent); border:1.5px solid rgba(14,165,233,0.3); }
.sb-btn-accent:hover { background:rgba(14,165,233,0.18); }
.sb-btn-ghost   { background:var(--bg-s2); color:var(--t2); border:1.5px solid var(--border); }
.sb-btn-ghost:hover { background:var(--bg-s2); color:var(--t1); }
.sb-btn-xs { padding:4px 11px; font-size:0.76rem; }

/* Body layout — the critical fix */
.sb-body {
    display: flex;
    flex: 1;
    min-height: 0;      /* allow flex child to shrink below content size */
    overflow: hidden;
}

/* Meta panel */
.sb-meta-panel {
    width: 220px;
    flex-shrink: 0;
    background: var(--bg-s2);
    border-right: 1px solid var(--border);
    overflow-y: auto;
    padding: 1.1rem 0.9rem;
}
.sb-meta-label {
    font-size:0.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
    color:#94a3b8; margin-bottom:0.4rem; display:block;
}
.sb-meta-section { margin-bottom:1rem; }
.sb-select {
    width:100%; padding:6px 9px; border:1.5px solid var(--border); border-radius:8px;
    font-size:0.82rem; color:var(--t1); background:var(--bg-s1); outline:none; transition:border-color .2s;
}
.sb-select:focus { border-color:var(--tts-accent); }
.sb-input {
    width:100%; padding:6px 9px; border:1.5px solid var(--border); border-radius:8px;
    font-size:0.82rem; color:var(--t1); background:var(--bg-s1); outline:none; transition:border-color .2s;
}
.sb-input:focus { border-color:var(--tts-accent); box-shadow:0 0 0 3px rgba(14,165,233,.1); }
.sb-input[readonly] { background:var(--bg-s2); }
.sb-stat-row {
    display:flex;align-items:center;gap:8px;font-size:0.82rem;
    padding:4px 0;
}
.sb-stat-row i { color:#94a3b8;width:14px;text-align:center; }
.sb-qtype-group-label { font-size:0.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--t3);margin:0.6rem 0 0.3rem; }
.sb-qtype-pill {
    display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:6px;
    background:var(--bg-s2);font-size:0.72rem;font-weight:500;margin:2px 2px 2px 0;
}
.sb-qtype-pill i { font-size:0.68rem; }

/* Canvas */
.sb-canvas {
    flex:1; overflow-y:auto; padding:1.5rem 2rem; background:var(--bg-s2);
}
.sb-loading-spin {
    font-size:0.9rem; color:var(--t3); animation:fadePulse 1s infinite;
}

/* Section */
.sb-section {
    background:var(--bg-s); border-radius:12px; margin-bottom:1rem;
    border:2px solid var(--border); transition:border-color .2s, box-shadow .2s;
    overflow:hidden;
}
.sb-section-active {
    border-color:var(--tts-accent); box-shadow:0 0 0 3px rgba(14,165,233,.08);
}
.sb-section-header {
    display:flex;align-items:center;justify-content:space-between;
    padding:0.85rem 1.1rem;cursor:pointer;transition:background .15s;
}
.sb-section-header:hover { background:var(--bg-s2); }
.sb-section-header-left { display:flex;align-items:center;gap:0.75rem; }
.sb-section-header-right { display:flex;align-items:center;gap:0.4rem; }
.sb-section-num {
    width:28px;height:28px;border-radius:8px;background:var(--tts-accent);
    color:#fff;font-size:0.78rem;font-weight:700;
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.sb-section-title { font-weight:700;font-size:0.9rem; }
.sb-section-desc  { font-size:0.75rem;color:#94a3b8;margin-top:1px; }
.sb-q-count {
    font-size:0.72rem;font-weight:600;color:#94a3b8;
    background:var(--bg-s2);border-radius:20px;padding:2px 8px;margin-right:4px;
}
.sb-pill {
    display:inline-flex;align-items:center;gap:4px;padding:2px 8px;
    border-radius:20px;font-size:0.7rem;font-weight:600;margin-top:3px;
}
.sb-pill-blue { background:rgba(37,99,235,0.1);color:#1d4ed8; }

/* Section meta editor */
.sb-section-meta-editor {
    padding:1rem 1.1rem;background:var(--bg-s2);border-top:1px solid var(--border);
}

/* Icon buttons */
.sb-icon-btn {
    width:28px;height:28px;border-radius:6px;border:none;background:transparent;
    color:#94a3b8;cursor:pointer;display:flex;align-items:center;justify-content:center;
    font-size:0.75rem;transition:all .15s;
}
.sb-icon-btn:hover { background:var(--bg-s2); }
.sb-icon-btn:disabled { opacity:.3;cursor:not-allowed; }
.sb-icon-btn-danger:hover { background:#fef2f2;color:#ef4444; }

/* Questions */
.sb-questions-list { padding:0 1.1rem 1rem; }
.sb-question {
    border:1.5px solid var(--border);border-radius:10px;margin-bottom:0.5rem;
    transition:all .2s;overflow:hidden;
}
.sb-question:hover { border-color:var(--border2); }
.sb-question-active { border-color:var(--tts-accent)!important;box-shadow:0 2px 8px rgba(14,165,233,.12); }
.sb-question-row {
    display:flex;align-items:center;justify-content:space-between;
    padding:0.65rem 0.85rem;cursor:pointer;transition:background .15s;
}
.sb-question-row:hover { background:var(--bg-s2); }
.sb-q-left  { display:flex;align-items:center;gap:0.65rem;flex:1;min-width:0; }
.sb-q-right { display:flex;align-items:center;gap:0.3rem;flex-shrink:0; }
.sb-q-type-badge {
    width:32px;height:32px;border-radius:8px;background:rgba(14,165,233,0.1);
    color:var(--tts-accent);display:flex;align-items:center;justify-content:center;
    font-size:0.8rem;flex-shrink:0;
}
.sb-q-label { font-weight:600;font-size:0.85rem;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:400px;
}
.sb-q-meta  { font-size:0.72rem;color:#94a3b8;margin-top:1px; }
.sb-q-num   { font-size:0.72rem;color:var(--t3);font-weight:600;min-width:24px;text-align:center; }

/* Question editor */
.sb-question-editor { padding:1rem;background:var(--bg-s2);border-top:1px dashed var(--border); }
.sb-label { font-size:0.75rem;font-weight:600;display:block;margin-bottom:0.35rem; }
.sb-field-error { color:#ef4444;font-size:0.72rem;margin-top:3px;display:block; }
.sb-question-actions { display:flex;gap:0.5rem;padding-top:0.75rem;border-top:1px solid var(--border); }

/* Options */
.sb-options-list { display:flex;flex-direction:column;gap:0.4rem; }
.sb-option-row { display:flex;align-items:center;gap:0.4rem; }
.sb-option-handle { width:20px;text-align:center;flex-shrink:0; }
.sb-option-input { flex:1; }
.sb-add-option-btn {
    display:inline-flex;align-items:center;gap:5px;padding:6px 12px;
    border-radius:8px;border:1.5px dashed var(--border2);background:transparent;
    color:var(--t2);font-size:0.8rem;font-weight:500;cursor:pointer;
    transition:all .15s;margin-top:0.3rem;
}
.sb-add-option-btn:hover { border-color:var(--tts-accent);color:var(--tts-accent);background:rgba(14,165,233,0.05); }

/* Preview box */
.sb-preview-box {
    background:var(--bg-s2);border:1.5px dashed var(--border);border-radius:8px;
    padding:0.75rem 1rem;text-align:center;
}

/* Add question btn */
.sb-add-question-btn {
    display:flex;align-items:center;justify-content:center;gap:8px;
    width:100%;padding:10px;border-radius:8px;
    border:2px dashed var(--border2);background:transparent;
    color:#94a3b8;font-size:0.83rem;font-weight:500;cursor:pointer;
    transition:all .15s;margin-top:0.5rem;
}
.sb-add-question-btn:hover { border-color:var(--tts-accent);color:var(--tts-accent);background:rgba(14,165,233,.04); }

/* Add section btn */
.sb-add-section-btn {
    display:flex;align-items:center;justify-content:center;gap:8px;
    width:100%;padding:14px;border-radius:12px;
    border:2px dashed var(--border2);background:var(--bg-s);
    color:var(--t2);font-size:0.88rem;font-weight:600;cursor:pointer;
    transition:all .15s;
}
.sb-add-section-btn:hover { border-color:var(--tts-accent);color:var(--tts-accent);background:rgba(14,165,233,.04); }

/* Empty state */
.sb-empty { text-align:center;padding:4rem 1rem;color:#94a3b8; }
.sb-empty p { margin-top:0.75rem;font-size:0.9rem; }

/* Item picker */
.sb-item-picker {
    border:1.5px solid var(--border);border-radius:8px;overflow:hidden;margin-top:4px;
}
.sb-picker-actions {
    display:flex;gap:0;border-bottom:1px solid var(--border);
}
.sb-picker-action-btn {
    flex:1;padding:4px 0;font-size:0.72rem;font-weight:600;
    background:var(--bg-s2);border:none;cursor:pointer;transition:all .15s;
}
.sb-picker-action-btn:first-child { border-right:1px solid var(--border); }
.sb-picker-action-btn:hover { background:var(--bg-s2); }
.sb-picker-list {
    max-height:160px;overflow-y:auto;padding:4px 0;
}
.sb-picker-item {
    display:flex;align-items:center;gap:7px;padding:4px 9px;cursor:pointer;
    transition:background .12s;
}
.sb-picker-item:hover { background:var(--blue-bg); }
.sb-picker-check {
    width:14px;height:14px;accent-color:var(--tts-accent);flex-shrink:0;cursor:pointer;
}
.sb-picker-label {
    font-size:0.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sb-scope-hint {
    margin-top:6px;font-size:0.7rem;color:#0369a1;
    background:rgba(14,165,233,0.06);border:1px solid rgba(14,165,233,0.18);
    border-radius:6px;padding:5px 8px;
}

/* Dirty indicator */
.sb-dirty-dot {
    width:7px; height:7px; border-radius:50%; background:#f59e0b;
    display:inline-block; flex-shrink:0;
}

/* Mobile preview */
.sb-preview-overlay {
    position:fixed; inset:0; z-index:1000; background:rgba(15,23,42,.55);
    display:flex; align-items:center; justify-content:center; padding:1.5rem;
}
.sb-phone {
    width:380px; max-width:100%; max-height:90vh; display:flex; flex-direction:column;
    background:var(--bg-s); border-radius:22px; overflow:hidden;
    box-shadow:0 24px 70px rgba(0,0,0,.45); border:1px solid var(--border);
}
.sb-phone-bar {
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 16px; background:var(--bg-s2); border-bottom:1px solid var(--border);
    font-size:0.78rem; font-weight:600; color:var(--t2);
}
.sb-phone-close {
    border:none; background:transparent; color:var(--t2); cursor:pointer;
    width:26px; height:26px; border-radius:6px; font-size:0.9rem;
}
.sb-phone-close:hover { background:var(--bg-s); color:var(--t1); }
.sb-phone-screen { overflow-y:auto; padding:1.1rem 1.1rem 2rem; background:var(--bg-s2); }
.sb-pv-survey-title { font-size:1.15rem; font-weight:800; }
.sb-pv-survey-sub { font-size:0.72rem; color:#94a3b8; margin:2px 0 1rem; text-transform:capitalize; }
.sb-pv-section { background:var(--bg-s); border:1px solid var(--border); border-radius:12px; padding:0.9rem; margin-bottom:0.85rem; }
.sb-pv-section-title { font-weight:700; font-size:0.9rem; }
.sb-pv-section-desc { font-size:0.74rem; color:#94a3b8; margin-top:2px; }
.sb-pv-repeat { font-size:0.68rem; color:#1d4ed8; margin-top:4px; }
.sb-pv-q { padding:0.7rem 0; border-top:1px solid var(--border); }
.sb-pv-q:first-of-type { border-top:none; }
.sb-pv-q-label { font-size:0.82rem; font-weight:600; margin-bottom:0.45rem; }
.sb-pv-q-help { font-size:0.7rem; color:#94a3b8; margin:-0.25rem 0 0.45rem; }
.sb-pv-input {
    border:1px solid var(--border2); border-radius:8px; padding:8px 10px;
    font-size:0.78rem; color:#94a3b8; background:var(--bg-s2);
}
.sb-pv-pills { display:flex; gap:6px; flex-wrap:wrap; }
.sb-pv-pill {
    border:1.5px solid var(--border2); border-radius:20px; padding:5px 14px;
    font-size:0.76rem; font-weight:600; color:var(--t2);
}
.sb-pv-pill-sm { padding:4px 0; min-width:34px; text-align:center; }
.sb-pv-opt { font-size:0.8rem; padding:5px 0; color:var(--t1); }
.sb-pv-opt i { color:#94a3b8; margin-right:6px; }
.sb-pv-grid-row {
    display:flex; align-items:center; justify-content:space-between;
    font-size:0.8rem; padding:5px 0;
}
.sb-pv-range { width:100%; accent-color:var(--tts-accent); }
.sb-pv-capture {
    border:1.5px dashed var(--border2); border-radius:8px; padding:14px;
    text-align:center; font-size:0.78rem; color:#94a3b8;
}
.sb-pv-capture i { display:block; font-size:1.3rem; margin-bottom:5px; }
.sb-pv-empty { text-align:center; color:#94a3b8; padding:3rem 1rem; }
.sb-pv-empty i { font-size:2rem; }
.sb-pv-empty p { margin-top:0.6rem; font-size:0.85rem; }

/* Responsive — collapse the meta panel on narrow viewports */
@media (max-width: 820px) {
    .sb-meta-panel { width:170px; }
    .sb-canvas { padding:1rem; }
    .sb-q-label { max-width:200px; }
    .sb-phone { width:100%; }
}

/* Animations */
@keyframes fadeIn { from{opacity:0;transform:translateY(-4px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadePulse { 0%,100%{opacity:.4} 50%{opacity:1} }

/* ════════════════════════════════════════════════════════════════
   PROFESSIONAL REDESIGN OVERRIDES  (v7)
   Appended last so the cascade lifts every portal page at once:
   centered tables, softer cards, refined forms, premium spacing.
   ════════════════════════════════════════════════════════════════ */
:root{
  --shadow-sm: 0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --shadow-md: 0 4px 12px rgba(15,23,42,.06), 0 2px 4px rgba(15,23,42,.04);
  --shadow-lg: 0 12px 32px rgba(15,23,42,.10);
}
[data-theme="dark"]{
  --shadow-sm: 0 1px 2px rgba(0,0,0,.30);
  --shadow-md: 0 4px 14px rgba(0,0,0,.35);
  --shadow-lg: 0 16px 40px rgba(0,0,0,.45);
}

/* ── Cards: soft elevation, breathing room ───────────────────── */
.card, .chart-card{
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--tr), transform var(--tr);
}
.chart-card{ padding: 1.15rem 1.25rem; }
.chart-card.p-0{ padding: 0 !important; }
.chart-card:hover{ box-shadow: var(--shadow-md); }
.kpi-card{ border-radius: 14px; box-shadow: var(--shadow-sm); transition: box-shadow var(--tr), transform var(--tr); }
.kpi-card:hover{ box-shadow: var(--shadow-md); transform: translateY(-1px); }

/* ── Page header: subtle lift ────────────────────────────────── */
.page-header{ box-shadow: var(--shadow-sm); border-radius: 14px; }
.page-header-icon{ background: linear-gradient(135deg, var(--ac), var(--ac-h)); color:#fff; box-shadow: var(--shadow-sm); }
.page-header-title{ font-size: 1.05rem; letter-spacing:-.01em; }

/* ── TABLES: everything centred, clean rhythm ────────────────── */
.table{ font-size: .82rem; }
.table thead tr{ background: var(--bg-s2); }
.table th{
  text-align: center;
  padding: .8rem .9rem;
  font-size: .66rem; letter-spacing: .06em;
  color: var(--t3); border-bottom: 1px solid var(--border);
}
.table td{
  text-align: center;
  padding: .85rem .9rem;
  vertical-align: middle;
  border-bottom: 1px solid var(--border);
}
.table tbody tr{ transition: background var(--tr); }
.table-hover tbody tr:hover{ background: var(--bg-s2); }
/* keep cell content (avatars, button groups, badges) centred */
.table td .d-flex{ justify-content: center; }
.table td .d-flex.flex-column{ align-items: center; }
/* escape hatches when a column must not be centred */
.table .text-start, .table td.text-start, .table th.text-start{ text-align: left !important; }
.table .text-end,   .table td.text-end,   .table th.text-end  { text-align: right !important; }
.table .text-start .d-flex{ justify-content: flex-start; }
/* rounded table inside a p-0 card */
.chart-card.p-0 > .table-responsive:first-child{ border-radius: 14px 14px 0 0; overflow: hidden; }

/* ── Filter / toolbar row ────────────────────────────────────── */
.chart-card.p-0 > .border-bottom{ background: var(--bg-s); border-radius: 14px 14px 0 0; }

/* ── Badges: a touch larger, pill, soft ──────────────────────── */
.badge{ font-size: .68rem; padding: .28rem .6rem; border-radius: 999px; font-weight: 600; }

/* ── FORMS: clearer inputs, consistent labels ────────────────── */
.form-control, .form-select{
  border-radius: 9px;
  border-color: var(--border2);
  min-height: 38px;
}
.form-control-sm, .form-select-sm{ min-height: 34px; border-radius: 8px; }
.form-control:focus, .form-select:focus{ border-color: var(--ac); box-shadow: 0 0 0 3px var(--ac-bg); }
.form-label{ font-size: .76rem; font-weight: 600; color: var(--t2); margin-bottom: .4rem; letter-spacing:.01em; }
textarea.form-control{ min-height: 84px; }

/* Reusable form grid: max 3 fields per row → 2 on tablet → 1 on phone.
   Use <div class="form-grid"> … each field wrapped in <div> … </div>. */
.form-grid{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem 1.1rem; }
.form-grid .field-full{ grid-column: 1 / -1; }
@media (max-width: 992px){ .form-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 600px){ .form-grid{ grid-template-columns: 1fr; } }

/* ── Buttons: refined primary ────────────────────────────────── */
.btn{ border-radius: 9px; font-weight: 600; }
.btn-primary, .btn-accent{ box-shadow: 0 1px 2px rgba(37,99,235,.25); }
.btn-primary:hover, .btn-accent:hover{ box-shadow: 0 3px 8px rgba(37,99,235,.30); }
.btn-sm{ border-radius: 8px; }

/* ── Modals: premium dialog ──────────────────────────────────── */
.modal-content{ border-radius: 16px !important; box-shadow: var(--shadow-lg) !important; }
.modal-header{ padding: 1.15rem 1.35rem .25rem; }
.modal-body{ padding: 1rem 1.35rem; }
.modal-footer{ padding: .5rem 1.35rem 1.15rem; gap:.5rem; }

/* ── Excel-style editable sheet (double-click a cell to edit) ─── */
.xl-sheet{ border-collapse: collapse; width: 100%; font-size: .8rem; }
.xl-sheet th, .xl-sheet td{ border: 1px solid var(--border); padding: 0; text-align: center; }
.xl-sheet th{ background: var(--bg-s2); padding: .5rem .6rem; font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; color: var(--t3); position: sticky; top: 0; z-index: 2; }
.xl-cell{ position: relative; cursor: cell; }
.xl-cell > span.xl-val{ display: block; padding: .5rem .55rem; min-height: 34px; }
.xl-cell:hover{ background: var(--ac-bg); }
.xl-cell input, .xl-cell select{ width: 100%; height: 100%; min-height: 34px; border: 2px solid var(--ac); border-radius: 0; padding: .35rem .5rem; font-size: .8rem; outline: none; background: var(--bg-s); color: var(--t1); }
.xl-ro{ color: var(--t2); padding: .5rem .55rem; background: var(--bg-s2); }
.xl-wrap{ max-height: 620px; overflow: auto; }

/* ── Hierarchy grid (role-column matrix) ─────────────────────── */
.hgrid-wrap{ overflow: auto; max-height: 640px; }
.hgrid{ border-collapse: separate; border-spacing: 0; width: 100%; font-size: .82rem; }
.hgrid thead th{ position: sticky; top: 0; z-index: 3; background: var(--bg-s2); text-align: left;
  padding: .65rem .75rem; font-size: .72rem; font-weight: 700; letter-spacing: .01em; color: var(--t2);
  border-bottom: 2px solid var(--border); white-space: nowrap; }
.hgrid thead th .hg-dot{ display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--ac); margin-right: .45rem; vertical-align: middle; opacity: .85; }
.hgrid thead th.hg-th-status{ text-align: center; }
.hgrid tbody td{ padding: .3rem .4rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.hgrid tbody tr:hover{ background: var(--ac-bg); }
.hgrid tbody tr:hover .hg-self{ box-shadow: 0 1px 6px rgba(0,0,0,.08); }
.hg-empty{ background: var(--bg-s2); }
/* An ancestor further up this user's reporting line */
.hg-anc{ display: flex; align-items: center; gap: .4rem; color: var(--t3); font-size: .76rem; padding: .35rem .3rem; }
.hg-anc i{ font-size: .62rem; color: var(--t3); opacity: .6; }
/* The user's own cell — a highlighted card */
.hg-self{ display: block; background: var(--bg-s); border: 1px solid var(--ac);
  border-left: 3px solid var(--ac); border-radius: 9px; padding: .4rem .6rem; cursor: text; transition: box-shadow .15s; }
.hg-self .hg-nm{ font-weight: 700; color: var(--t1); line-height: 1.25; }
.hg-self .hg-mgr{ font-size: .68rem; color: var(--t3); margin-top: .1rem; }
.hg-self .hg-mgr i{ font-size: .6rem; margin-right: .25rem; }
.hg-self input, .hg-self select{ width: 100%; border: 1px solid var(--ac); border-radius: 6px;
  padding: .25rem .4rem; font-size: .8rem; outline: none; background: var(--bg-s); color: var(--t1); }
.hg-self select{ margin-top: .25rem; }
.hg-status{ text-align: center; cursor: pointer; }

/* ── TSM-centric editable grid (Excel-like, fully bordered) ───── */
.hgrid-tsm{ border: 1px solid var(--border); }
.hgrid-tsm thead th{ border-right: 1px solid var(--border); }
.hgrid-tsm tbody td.hg-cell{ border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
  padding: .25rem .3rem; }
.hgrid-tsm tbody tr:hover{ background: var(--ac-bg); }
.hg-sel{ width: 100%; border: 1px solid transparent; border-radius: 6px; background: transparent;
  color: var(--t1); font-size: .78rem; padding: .3rem .35rem; cursor: pointer; transition: border-color .12s, background .12s; }
.hg-sel:hover{ border-color: var(--border); background: var(--bg-s); }
.hg-sel:focus{ outline: none; border-color: var(--ac); background: var(--bg-s); box-shadow: 0 0 0 3px var(--ac-bg); }
.hg-cell.hg-empty .hg-sel{ color: var(--t3); font-style: italic; }
.hg-ro{ font-size: .78rem; color: var(--t2); padding: .3rem .35rem; display: inline-block; }
.hg-tsm-cell{ background: var(--ac-bg); border-left: 3px solid var(--ac) !important; }
.hg-tsm-cell .hg-nm{ font-weight: 700; color: var(--t1); font-size: .82rem; line-height: 1.2; }
.hg-tsm-cell .hg-sub{ font-size: .68rem; color: var(--t3); margin-top: .05rem; }

/* ── Visits: breadcrumb path + roster drill-down ─────────────── */
.visit-path{ display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; padding: .5rem .75rem;
  background: var(--bg-s2); border: 1px solid var(--border); border-radius: 10px; }
.visit-path-sep{ font-size: .6rem; color: var(--t3); opacity: .6; }
.visit-path-node{ border: none; background: transparent; color: var(--ac); font-weight: 600; font-size: .8rem;
  padding: .15rem .45rem; border-radius: 6px; cursor: pointer; transition: background .12s; }
.visit-path-node:hover{ background: var(--ac-bg); }
.visit-path-node.active{ color: var(--t1); background: var(--bg-s); border: 1px solid var(--border); cursor: default;
  display: inline-flex; flex-direction: column; line-height: 1.1; padding: .2rem .55rem; }
.visit-path-node.active small{ font-size: .6rem; color: var(--t3); font-weight: 500; }

.roster-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .6rem; }
.roster-card{ display: flex; align-items: center; gap: .6rem; text-align: left; padding: .6rem .7rem;
  background: var(--bg-s); border: 1px solid var(--border); border-radius: 12px; cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .1s; }
.roster-card:hover{ border-color: var(--ac); box-shadow: 0 4px 14px rgba(0,0,0,.1); transform: translateY(-1px); }
.roster-avatar{ width: 40px; height: 40px; flex-shrink: 0; border-radius: 10px; display: flex; align-items: center;
  justify-content: center; font-weight: 700; color: #fff; background: var(--ac); font-size: .95rem; }
.roster-body{ flex: 1; min-width: 0; }
.roster-name{ font-weight: 700; color: var(--t1); font-size: .84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.roster-role{ font-size: .7rem; color: var(--t3); }
.roster-stats{ display: flex; gap: .7rem; margin-top: .2rem; font-size: .72rem; color: var(--t2); }
.roster-stats i{ margin-right: .25rem; color: var(--ac); opacity: .8; }
.roster-arrow{ color: var(--t3); font-size: .75rem; }

/* ── Excel-like fully-bordered table ─────────────────────────── */
.xtable-wrap{ overflow-x: auto; }
.xtable{ width: 100%; border-collapse: collapse; font-size: .82rem; }
.xtable thead th{ position: sticky; top: 0; z-index: 2; background: var(--bg-s2); text-align: left;
  padding: .55rem .7rem; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: var(--t2); border: 1px solid var(--border); white-space: nowrap; }
.xtable tbody td{ padding: .45rem .7rem; border: 1px solid var(--border); vertical-align: middle; color: var(--t1); }
.xtable tbody tr:hover td{ background: var(--ac-bg); }
.xtable-daterow td{ background: var(--bg-s2) !important; font-weight: 700; color: var(--t1); font-size: .76rem;
  text-transform: uppercase; letter-spacing: .02em; }
.xtable-daterow i{ color: var(--ac); }
.xtable-daycount{ float: right; font-weight: 500; color: var(--t3); text-transform: none; letter-spacing: 0; }
.xtable-flag td{ background: var(--red-bg) !important; }
.xtable-flag:hover td{ background: var(--red-bg) !important; }
.survey-chip{ display: inline-flex; align-items: center; gap: .3rem; font-size: .7rem; font-weight: 600;
  padding: .15rem .5rem; border-radius: 20px; background: var(--ac-bg); color: var(--ac-t); border: 1px solid rgba(37,99,235,.2); }
.survey-chip i{ font-size: .62rem; }

/* ── Empty state polish ──────────────────────────────────────── */
.empty-state{ padding: 2.25rem 1rem; }
.empty-state-icon{ font-size: 1.6rem; color: var(--t3); margin-bottom: .5rem; }
.empty-state-title{ font-weight: 700; color: var(--t1); }
.empty-state-message{ color: var(--t3); font-size: .82rem; }


/* =============================================================
   Option 3 Enterprise HRMS — 1:1 mockup fidelity additions
   Sidebar branding/decoration. See DECISIONS.md ADR-019.
   (Topbar capability badges and the footer marketing band that used
   to live here were removed app-wide 2026-07-22 — see ADR-023.)
   ============================================================= */

/* ── Sidebar section connector lines (child indentation) ─────── */
.sb-subnav { position: relative; }
.sb-subnav::before {
    content: ''; position: absolute; left: 1.65rem; top: 0; bottom: .5rem;
    width: 1px; background: rgba(255,255,255,.12);
}
.sb-subnav .sb-link { position: relative; }
.sb-subnav .sb-link::before {
    content: ''; position: absolute; left: 1.65rem; top: 50%;
    width: .5rem; height: 1px; background: rgba(255,255,255,.12);
}

/* ── KPI card sparkline canvas (Option 3) ────────────────────── */
.kpi-spark {
    display: block; width: 100% !important; height: 28px !important;
    margin: .375rem -1.125rem -1px; padding: 0 0.25rem;
}

/* ── Create/Edit form archetype (Option 3, handover §6.3) ─────── */
.form-section-icon {
    width: 28px; height: 28px; border-radius: var(--bn-r8);
    display: flex; align-items: center; justify-content: center;
    font-size: .75rem; color: #fff; flex-shrink: 0;
}
.form-action-bar {
    position: sticky; bottom: 0; z-index: 20;
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    background: var(--bg-s); border: 1px solid var(--border); border-radius: var(--rl);
    padding: .75rem 1.25rem; margin-top: 1rem;
    box-shadow: var(--bn-shadow-2);
}
.form-action-bar-hint { font-size: .72rem; color: var(--t3); }

/* Numbered card-header badge (Attendance Correction Entry archetype and
   similar "N. Section Title" screens) — always blue, unlike the rainbow
   .form-section-icon used on the Employee wizard. */
.form-section-num {
    width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .8rem; font-weight: 700; color: #fff;
    background: var(--bn-primary-600);
}

/* Yes/No or two-way segmented toggle (Payroll Setup archetype and any
   MasterController field declaring type => 'toggle'). Pure CSS — no JS. */
.toggle-pair { display: flex; border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.toggle-pair input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.toggle-option {
    flex: 1; text-align: center; padding: .5rem .75rem;
    font-size: .8125rem; font-weight: 600; color: var(--t2); cursor: pointer;
    transition: background var(--tr), color var(--tr);
}
.toggle-option:not(:last-child) { border-right: 1px solid var(--border); }
.toggle-pair input[type="radio"]:checked + .toggle-option {
    background: var(--bn-primary-50); color: var(--bn-primary-700);
    box-shadow: inset 0 0 0 1px var(--bn-primary-300);
}
[data-theme="dark"] .toggle-pair input[type="radio"]:checked + .toggle-option {
    background: rgba(37,99,235,.18); color: #93c5fd;
    box-shadow: inset 0 0 0 1px rgba(96,165,250,.4);
}

/* ── Sidebar: Approval Inbox live badge (Option 3 mockup) ─────── */
.sb-badge {
    background: var(--bn-danger); color: #fff;
    font-size: .65rem; font-weight: 700; line-height: 1;
    padding: .2rem .4rem; border-radius: 999px; flex-shrink: 0;
}
.bz-sidebar.collapsed .sb-badge { display: none; }

/* ── Floating Quick Help "agent" bubble (fixed, bottom-right of viewport) ── */
.bz-agent-fab {
    position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 1050;
    width: 64px; height: 64px; border-radius: 50%;
    background: var(--bg-s); border: 2px solid var(--bn-primary-500);
    box-shadow: var(--bn-shadow-3);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; text-decoration: none;
    transition: transform var(--tr), box-shadow var(--tr);
}
.bz-agent-fab img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.bz-agent-fab:hover { transform: scale(1.08); box-shadow: var(--bn-shadow-modal); }
@media (max-width: 576px) {
    .bz-agent-fab { width: 52px; height: 52px; right: 1rem; bottom: 1rem; }
}

/* ── Add Employee wizard (Option 3 mockup, 2026-07-22) ────────── */
.btn-gradient-pink {
    background: linear-gradient(135deg, var(--bn-pink), #db2777); color: #fff; border: none;
}
.btn-gradient-pink:hover { background: linear-gradient(135deg, #db2777, var(--bn-pink)); color: #fff; }
.btn-outline-teal { background: transparent; border: 1px solid var(--bn-teal); color: var(--bn-teal); }
.btn-outline-teal:hover { background: rgba(20,184,166,.1); color: var(--bn-teal); }

.wz-stepper {
    display: flex; align-items: flex-start; gap: 0; padding: 1rem 1.25rem 1.25rem;
    background: var(--bn-surface); border: 1px solid var(--bn-border); border-radius: var(--rl);
    margin-bottom: 1rem; overflow-x: auto;
}
.wz-step {
    display: flex; align-items: center; flex: 1; min-width: 150px; cursor: pointer;
    background: none; border: none; padding: 0; text-align: left; font: inherit;
}
.wz-step-num {
    width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: .8rem; font-weight: 700;
    background: var(--bg-s3); color: var(--t3); border: 2px solid var(--border);
}
.wz-step.active .wz-step-num { background: var(--bn-primary-600); color: #fff; border-color: var(--bn-primary-600); }
.wz-step.done .wz-step-num { background: var(--bn-success); color: #fff; border-color: var(--bn-success); }
.wz-step-label { margin-left: .625rem; overflow: hidden; }
.wz-step-title { font-size: .8125rem; font-weight: 600; color: var(--t1); white-space: nowrap; }
.wz-step-sub { font-size: .68rem; color: var(--t3); white-space: nowrap; }
.wz-step-connector { flex: 1; height: 2px; background: var(--border); margin: 0 .5rem; min-width: 20px; align-self: center; }

.wz-photo-upload {
    width: 100px; height: 100px; border-radius: 50%; margin: 0 auto .5rem;
    border: 2px dashed var(--bn-border-strong); overflow: hidden; position: relative;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    background: var(--bg-s3);
}
.wz-photo-upload img { width: 100%; height: 100%; object-fit: cover; }
.wz-photo-upload-hint { font-size: .68rem; color: var(--t3); text-align: center; }
.wz-photo-upload input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.wz-dropzone {
    border: 2px dashed var(--bn-border-strong); border-radius: var(--bn-r14);
    padding: 1.5rem 1rem; text-align: center; cursor: pointer; position: relative;
    background: var(--bg-s3); transition: border-color var(--tr), background var(--tr);
}
.wz-dropzone:hover, .wz-dropzone.dragover { border-color: var(--bn-orange); background: var(--bn-warning-bg); }
.wz-dropzone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.wz-dropzone-icon { font-size: 1.5rem; color: var(--bn-orange); margin-bottom: .5rem; }
.wz-dropzone-text { font-size: .8rem; color: var(--t2); font-weight: 600; }
.wz-dropzone-sub { font-size: .7rem; color: var(--t3); }

.wz-doc-row {
    display: flex; align-items: center; gap: .625rem; padding: .5rem .75rem;
    border: 1px solid var(--border); border-radius: var(--r); margin-bottom: .5rem;
}
.wz-doc-icon { color: var(--bn-danger); font-size: .9rem; flex-shrink: 0; }
.wz-doc-name { font-size: .78rem; font-weight: 600; color: var(--t1); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wz-doc-size { font-size: .68rem; color: var(--t3); flex-shrink: 0; }
.wz-doc-check { color: var(--bn-success); flex-shrink: 0; }
.wz-doc-remove { color: var(--t3); flex-shrink: 0; cursor: pointer; background: none; border: none; }
.wz-doc-remove:hover { color: var(--bn-danger); }

.wz-quicklink-chip {
    display: inline-flex; align-items: center; gap: .375rem;
    background: var(--bn-primary-50); color: var(--bn-primary-700);
    font-size: .72rem; font-weight: 600; padding: .3rem .55rem; border-radius: var(--bn-pill);
    border: 1px solid var(--bn-primary-200);
}
[data-theme="dark"] .wz-quicklink-chip { background: rgba(37,99,235,.18); color: #93c5fd; border-color: rgba(96,165,250,.3); }
.wz-quicklink-chip button { background: none; border: none; color: inherit; padding: 0; font-size: .68rem; line-height: 1; opacity: .7; }
.wz-quicklink-chip button:hover { opacity: 1; }

.wz-char-counter { font-size: .68rem; color: var(--t3); text-align: right; margin-top: .25rem; }

/* Quick Links — single horizontal bar instead of a stacked card body,
   matching the mockup's compact one-line footer-style section. */
.wz-quicklinks-bar { display: flex; align-items: flex-start; gap: 1.25rem; }
.wz-quicklinks-label { display: flex; align-items: flex-start; gap: .625rem; flex-shrink: 0; width: 220px; }
.wz-quicklinks-input { flex: 1; min-width: 0; }

@media (max-width: 767px) {
    .wz-stepper { flex-direction: column; gap: .75rem; }
    .wz-step-connector { display: none; }
    .wz-step { min-width: 0; }
    .wz-quicklinks-bar { flex-direction: column; }
    .wz-quicklinks-label { width: auto; }
}

/* Dashboard charts/panels row uniformity (Option 3 mockup, 2026-07-22) — fixed
   heights so the Headcount Trend line chart, Attendance/Leave donuts and the
   Recruitment funnel all occupy the same vertical space inside their
   h-100/d-flex/flex-column .chart-card, regardless of natural content length. */
.dash-chart-box { position: relative; min-height: 150px; }
.dash-chart-box canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }

.dash-donut-box { height: 150px; }
.dash-donut-box canvas { max-height: 150px; }

.dash-funnel { display: flex; flex-direction: column; justify-content: space-between; gap: .5rem; min-height: 150px; }
.dash-funnel-row { display: flex; flex-direction: column; align-items: center; gap: .25rem; }
.dash-funnel-seg { height: 22px; border-radius: 4px; transition: width .2s ease; }
.dash-funnel-label { display: flex; justify-content: space-between; width: 100%; font-size: .72rem; color: var(--t2); }
.dash-funnel-label strong { color: var(--t1); }