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

/* ── Theme tokens ─────────────────────────────────────────── */
:root {
    /* Sidebar — always dark */
    --sb-bg:     #0d1117;
    --sb-bg2:    #161b22;
    --sb-border: #21262d;
    --sb-text:   #8b949e;
    --sb-text-a: #e6edf3;
    --sb-accent: #6366f1;
    --sb-acc-bg: rgba(99,102,241,.12);
    --sb-w:      240px;
    --sb-col:    56px;

    /* Content — light */
    --bg-page:   #f0f2f5;
    --bg-s:      #ffffff;
    --bg-s1:     #ffffff;
    --bg-s2:     #f8fafc;
    --bg-s3:     #f1f5f9;
    --border:    #e2e8f0;
    --border2:   #cbd5e1;
    --t1:        #0f172a;
    --t2:        #475569;
    --t3:        #94a3b8;

    /* Topbar */
    --tb-bg:     #ffffff;
    --tb-bd:     #e2e8f0;
    --tb-h:      52px;

    /* Accent */
    --ac:        #6366f1;
    --ac-h:      #4f46e5;
    --ac-bg:     rgba(99,102,241,.08);
    --ac-t:      #4338ca;

    /* Status */
    --green:     #10b981;
    --green-bg:  rgba(16,185,129,.08);
    --green-t:   #059669;
    --amber:     #f59e0b;
    --amber-bg:  rgba(245,158,11,.08);
    --amber-t:   #d97706;
    --red:       #ef4444;
    --red-bg:    rgba(239,68,68,.08);
    --red-t:     #dc2626;
    --blue:      #3b82f6;
    --blue-bg:   rgba(59,130,246,.08);
    --blue-t:    #2563eb;
    --purple:    #a855f7;
    --purple-bg: rgba(168,85,247,.08);
    --purple-t:  #7c3aed;

    /* Misc */
    --r:   8px;
    --rl:  12px;
    --sh:  0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
    --f:   system-ui,-apple-system,'Segoe UI',sans-serif;
    --fm:  'Cascadia Code','Fira Code',Consolas,monospace;
    --tr:  .15s ease;
}

[data-theme="dark"] {
    --bg-page:  #0d0f14;
    --bg-s:     #13151c;
    --bg-s1:    #181b28;
    --bg-s2:    #1a1d27;
    --bg-s3:    #21253a;
    --border:   #1e2235;
    --border2:  #2a2e42;
    --t1:       #e8eaf0;
    --t2:       #8892a4;
    --t3:       #5a6278;
    --tb-bg:    #13151c;
    --tb-bd:    #1e2235;
    --ac-t:     #818cf8;
    --green-t:  #34d399;
    --amber-t:  #fbbf24;
    --red-t:    #f87171;
    --blue-t:   #60a5fa;
    --purple-t: #c084fc;
    --sh:       0 1px 3px rgba(0,0,0,.3),0 1px 2px rgba(0,0,0,.2);
}

/* ── 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; 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 {
    font-size: .6rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--sb-text); padding: .875rem 1rem .25rem;
    white-space: nowrap; overflow: hidden;
}
.bz-sidebar.collapsed .sb-sec { padding: .875rem 0 .25rem; text-align: center; font-size: .55rem; letter-spacing: 0 }

.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 }

.sb-footer {
    padding: .75rem 1rem;
    border-top: 1px solid var(--sb-border);
    flex-shrink: 0;
}
.sb-user {
    display: flex; align-items: center; gap: .625rem;
    padding: .5rem; border-radius: var(--r); cursor: pointer;
    transition: background var(--tr);
}
.sb-user:hover { background: rgba(255,255,255,.05) }
.sb-avatar {
    width: 28px; height: 28px; border-radius: 50%;
    background: rgba(99,102,241,.2); border: 1px solid rgba(99,102,241,.35);
    color: #818cf8;
    display: flex; align-items: center; justify-content: center;
    font-size: .7rem; font-weight: 700; flex-shrink: 0;
    text-decoration: none;
}
.sb-uname { font-size: .75rem; font-weight: 500; color: #c9d1d9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.sb-urole { font-size: .65rem; color: var(--sb-text) }
.bz-sidebar.collapsed .sb-footer { padding: .5rem; text-align: center }
.bz-sidebar.collapsed .sb-uname,
.bz-sidebar.collapsed .sb-urole { display: none }

/* 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) }

.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;
}

/* 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(99,102,241,.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(99,102,241,.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(99,102,241,.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;
}
.kpi-icon-primary { background: var(--ac-bg);      color: var(--ac) }
.kpi-icon-success { background: var(--green-bg);    color: var(--green) }
.kpi-icon-warning { background: var(--amber-bg);    color: var(--amber) }
.kpi-icon-danger  { background: var(--red-bg);      color: var(--red) }
.kpi-icon-info    { background: var(--blue-bg);     color: var(--blue) }
.kpi-icon-purple  { background: var(--purple-bg);   color: var(--purple) }
.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-6  { flex: 0 0 50%;     max-width: 50%     }
    .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 ─────────────────────── */
.kpi-card.border-primary { border-top: 2px solid var(--ac) }
.kpi-card.border-success { border-top: 2px solid var(--green) }
.kpi-card.border-warning { border-top: 2px solid var(--amber) }
.kpi-card.border-danger  { border-top: 2px solid var(--red) }
.kpi-card.border-info    { border-top: 2px solid var(--blue) }

/* ── 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 instead of top border */
.kpi-card.border-primary { border-left: 3px solid var(--ac);    border-top: 1px solid var(--border) }
.kpi-card.border-success { border-left: 3px solid var(--green);  border-top: 1px solid var(--border) }
.kpi-card.border-warning { border-left: 3px solid var(--amber);  border-top: 1px solid var(--border) }
.kpi-card.border-danger  { border-left: 3px solid var(--red);    border-top: 1px solid var(--border) }
.kpi-card.border-info    { border-left: 3px solid var(--blue);   border-top: 1px solid var(--border) }
.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(99,102,241,.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(99,102,241,.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(20,184,166,.1); border-color: rgba(20,184,166,.25); color: #0d9488 }
.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(20,184,166,.1); color: #0d9488 }
.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(99,102,241,.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(20,184,166,.1); color: #0d9488;       border: 1px solid rgba(20,184,166,.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(99,102,241,.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(99,102,241,.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(99,102,241,.25) }
.badge-state-team       { background: var(--ac-bg);    color: var(--ac-t);    border: 1px solid rgba(99,102,241,.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(99,102,241,.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), #818cf8, 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(99,102,241,.10);  color: var(--ac-t); border: 1px solid rgba(99,102,241,.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(99,102,241,0.1);color:#4f46e5; }

/* 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:#4f46e5; 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(99,102,241,.25); }
.btn-primary:hover, .btn-accent:hover{ box-shadow: 0 3px 8px rgba(99,102,241,.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(99,102,241,.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; }