/* ==========================================================================
   BKH Insight (v2) — single stylesheet
   Light theme only · Indigo + Slate · No framework
   ========================================================================== */

/* ----- 1. RESET + TOKENS ------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--ink-900);
    background: var(--bg-canvas);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 { margin: 0 0 .25rem; line-height: 1.25; color: var(--ink-900); font-weight: 600; }
p { margin: 0 0 .5rem; }
a { color: var(--primary-700); text-decoration: none; }
a:hover { color: var(--primary-800); text-decoration: underline; }
ul, ol { padding-left: 1.25rem; margin: 0 0 .5rem; }
hr { border: 0; border-top: 1px solid var(--line); margin: .75rem 0; }
small, .small { font-size: 12.5px; }
.muted { color: var(--ink-500); }
.eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-500); }
button { font: inherit; }
input, select, textarea { font: inherit; color: inherit; }

:root {
    /* Palette — indigo primary, slate neutrals, emerald/amber/rose accents */
    --primary-50:  #EEF2FF;
    --primary-100: #E0E7FF;
    --primary-200: #C7D2FE;
    --primary-300: #A5B4FC;
    --primary-400: #818CF8;
    --primary-500: #6366F1;
    --primary-600: #4F46E5;
    --primary-700: #4338CA;
    --primary-800: #3730A3;
    --primary-900: #312E81;

    --ink-50:  #F8FAFC;
    --ink-100: #F1F5F9;
    --ink-200: #E2E8F0;
    --ink-300: #CBD5E1;
    --ink-400: #94A3B8;
    --ink-500: #64748B;
    --ink-600: #475569;
    --ink-700: #334155;
    --ink-800: #1E293B;
    --ink-900: #0F172A;

    --success-50: #ECFDF5;
    --success-500: #10B981;
    --success-700: #047857;

    --warning-50: #FFFBEB;
    --warning-500: #F59E0B;
    --warning-700: #B45309;

    --danger-50: #FEF2F2;
    --danger-500: #EF4444;
    --danger-700: #B91C1C;

    --info-50: #ECFEFF;
    --info-500: #06B6D4;
    --info-700: #0E7490;

    /* Source colors */
    --kpi-500:  #4F46E5;     /* indigo */
    --kpi-50:   #EEF2FF;
    --spt-500:  #0EA5E9;     /* sky */
    --spt-50:   #F0F9FF;
    --cmp-500:  #7C3AED;     /* violet */
    --cmp-50:   #F5F3FF;
    --bud-500:  #F59E0B;     /* amber */
    --bud-50:   #FFFBEB;

    /* Semantic */
    --bg-canvas: #F5F7FB;
    --bg-surface: #FFFFFF;
    --bg-elev: #FFFFFF;
    --line: #E2E8F0;
    --line-strong: #CBD5E1;

    /* Spacing & radii */
    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 14px;
    --r-xl: 20px;
    --r-pill: 999px;

    --shadow-sm: 0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
    --shadow-md: 0 4px 6px -1px rgba(15,23,42,.05), 0 2px 4px -2px rgba(15,23,42,.06);
    --shadow-lg: 0 12px 24px -8px rgba(79,70,229,.18), 0 4px 8px -4px rgba(15,23,42,.06);
    --shadow-xl: 0 24px 48px -12px rgba(15,23,42,.18);

    /* Sidebar width */
    --side-w: 248px;
    --top-h: 64px;

    --t-fast: 140ms;
    --t-base: 220ms;
}

/* Focus rings — accessible, brand-tinted */
:focus-visible {
    outline: 2px solid var(--primary-500);
    outline-offset: 2px;
    border-radius: 6px;
}
.skip-link {
    position: absolute; left: -9999px; top: 0;
    padding: 8px 16px; background: #fff; color: var(--primary-700);
    box-shadow: var(--shadow-md);
}
.skip-link:focus { left: 8px; top: 8px; z-index: 100; }

/* ----- 2. APP SHELL (sidebar + topbar + main) ---------------------------- */
.app-shell { min-height: 100vh; display: block; }

.side {
    position: fixed; inset: 0 auto 0 0;
    width: var(--side-w);
    background: linear-gradient(180deg, #0F172A 0%, #1E293B 100%);
    color: #E2E8F0;
    display: flex; flex-direction: column;
    z-index: 30;
    box-shadow: 1px 0 0 rgba(255,255,255,.03);
    transition: transform var(--t-base) ease;
}
.side-brand {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 18px;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.side-brand-link {
    display: flex; align-items: center; gap: 12px;
    color: #fff; text-decoration: none; flex: 1;
}
.brand-mark {
    width: 36px; height: 36px;
    background: linear-gradient(135deg, var(--primary-500), #7C3AED);
    border-radius: 10px;
    display: grid; place-items: center;
    color: #fff; font-size: 18px;
    box-shadow: 0 4px 10px rgba(79,70,229,.4);
}
.brand-mark.large { width: 56px; height: 56px; font-size: 28px; border-radius: 14px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-title { font-weight: 700; color: #fff; font-size: 16px; }
.brand-sub { font-size: 10.5px; color: var(--ink-400); margin-top: 1px; }
.brand-beta {
    display: inline-block; font-size: 9px; font-weight: 800; letter-spacing: .08em;
    background: linear-gradient(135deg, #F59E0B, #EF4444);
    color: #fff; padding: 1px 6px; border-radius: 999px; vertical-align: middle;
    margin-left: 4px;
}
.side-close {
    background: transparent; border: 0; color: #fff; font-size: 20px;
    width: 36px; height: 36px; border-radius: 8px; cursor: pointer; display: none;
}
.side-close:hover { background: rgba(255,255,255,.08); }

.side-nav {
    padding: 12px 10px 16px;
    flex: 1; overflow-y: auto;
    display: flex; flex-direction: column; gap: 1px;
}
.side-nav::-webkit-scrollbar { width: 6px; }
.side-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 3px; }
.side-group {
    font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: rgba(255,255,255,.4);
    padding: 12px 12px 4px;
}
.side-link {
    display: flex; align-items: center; gap: 12px;
    padding: 9px 12px;
    color: rgba(255,255,255,.78);
    border-radius: 8px;
    font-size: 13.5px; font-weight: 500;
    text-decoration: none;
    transition: background var(--t-fast), color var(--t-fast);
    border-left: 3px solid transparent;
}
.side-link:hover { background: rgba(255,255,255,.06); color: #fff; text-decoration: none; }
.side-link.is-active {
    background: linear-gradient(90deg, rgba(99,102,241,.18), transparent 70%);
    color: #fff;
    border-left-color: var(--primary-400);
}
.side-link i { font-size: 16px; min-width: 18px; text-align: center; opacity: .9; }
.side-spacer { flex: 1; min-height: 8px; }
.side-link-legacy { color: var(--primary-300); }
.side-link-legacy:hover { color: var(--primary-200); }

.side-scrim {
    position: fixed; inset: 0; background: rgba(15,23,42,.5);
    z-index: 25; opacity: 0; pointer-events: none;
    transition: opacity var(--t-base) ease;
}
.side-scrim.is-open { opacity: 1; pointer-events: auto; }

.main {
    margin-left: var(--side-w);
    min-height: 100vh;
    display: flex; flex-direction: column;
    background: var(--bg-canvas);
}

.top {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; gap: 16px;
    height: var(--top-h);
    padding: 0 24px;
    background: rgba(255,255,255,.86);
    border-bottom: 1px solid var(--line);
    backdrop-filter: saturate(140%) blur(8px);
}
.top-burger {
    background: transparent; border: 0; font-size: 22px; padding: 6px 10px;
    border-radius: 8px; cursor: pointer; color: var(--ink-700); display: none;
}
.top-burger:hover { background: var(--ink-100); }
.top-title h1 { font-size: 16.5px; margin: 0; }
.top-title p { font-size: 12.5px; color: var(--ink-500); margin: 0; }
.top-spacer { flex: 1; }
.top-actions { display: flex; align-items: center; gap: 10px; }

.lang-toggle {
    display: inline-flex; align-items: center; gap: 0;
    background: var(--ink-100); border-radius: var(--r-pill); padding: 3px;
}
.lang-toggle a {
    padding: 4px 10px; font-size: 12px; font-weight: 600;
    color: var(--ink-600); text-decoration: none; border-radius: var(--r-pill);
    line-height: 1.5;
}
.lang-toggle a.is-active { background: #fff; color: var(--primary-700); box-shadow: var(--shadow-sm); }
.lang-toggle a:hover { text-decoration: none; }

.user-menu { position: relative; }
.user-menu-btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--ink-100); border: 0; border-radius: var(--r-pill);
    padding: 4px 10px 4px 4px; cursor: pointer; color: var(--ink-800); font-weight: 600;
}
.user-menu-btn:hover { background: var(--ink-200); }
.user-avatar {
    width: 28px; height: 28px; border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-500), #7C3AED);
    color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 12px;
}
.user-menu-pop {
    position: absolute; right: 0; top: calc(100% + 6px);
    min-width: 220px;
    background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
    box-shadow: var(--shadow-xl);
    padding: 6px; z-index: 50;
}
.user-menu-pop[hidden] { display: none; }
.user-menu-head { padding: 10px 12px; line-height: 1.3; }
.user-menu-head strong { display: block; color: var(--ink-900); font-size: 13.5px; }
.user-menu-head span { color: var(--ink-500); font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; }
.user-menu-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; font-size: 13px; color: var(--ink-800);
    border-radius: 8px; text-decoration: none;
}
.user-menu-item:hover { background: var(--ink-100); text-decoration: none; color: var(--ink-900); }
.user-menu-item i { color: var(--ink-500); }
.user-menu-danger { color: var(--danger-700); }
.user-menu-danger i { color: var(--danger-500); }
.user-menu-pop hr { margin: 4px 6px; }

.content {
    padding: 22px 28px 56px;
    flex: 1;
}

.toast-host { padding: 12px 28px 0; }
.toast {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 10px 14px; border-radius: var(--r-md);
    background: #fff; color: var(--ink-900);
    box-shadow: var(--shadow-md);
    border-left: 3px solid var(--primary-500);
    font-size: 13.5px;
}
.toast i { font-size: 16px; }
.toast-success { border-left-color: var(--success-500); }
.toast-success i { color: var(--success-500); }
.toast-danger  { border-left-color: var(--danger-500); }
.toast-danger  i { color: var(--danger-500); }
.toast-warning { border-left-color: var(--warning-500); }
.toast-warning i { color: var(--warning-500); }
.toast-info    { border-left-color: var(--info-500); }
.toast-info    i { color: var(--info-500); }
.toast-close {
    background: transparent; border: 0; cursor: pointer; color: var(--ink-400);
    padding: 4px; border-radius: 6px;
}
.toast-close:hover { background: var(--ink-100); color: var(--ink-700); }

/* ----- 3. AUTH SHELL ----------------------------------------------------- */
.auth-shell { min-height: 100vh; position: relative; display: grid; place-items: center; padding: 24px; }
.auth-bg {
    position: fixed; inset: 0; z-index: -1;
    background:
        radial-gradient(800px circle at 12% 10%, rgba(99,102,241,.18), transparent 50%),
        radial-gradient(700px circle at 88% 92%, rgba(124,58,237,.16), transparent 50%),
        linear-gradient(180deg, #F8FAFC 0%, #EEF2FF 100%);
}
.auth-wrap { width: 100%; max-width: 440px; }
.auth-card {
    background: #fff; border: 1px solid var(--line);
    border-radius: 22px; padding: 28px 28px 18px;
    box-shadow: var(--shadow-xl);
}
.auth-card-brand { text-align: center; margin-bottom: 18px; }
.auth-card-brand h1 { font-size: 22px; margin: 14px 0 4px; color: var(--ink-900); }
.auth-card-brand p { color: var(--ink-500); margin: 0; font-size: 13.5px; }
.auth-card-brand .brand-mark { margin: 0 auto; }
.auth-foot {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line);
    font-size: 12px; color: var(--ink-500);
}
.auth-promo { text-align: center; margin: 18px 0 0; font-size: 12.5px; color: var(--ink-500); }
.auth-promo a { color: var(--primary-600); font-weight: 600; }

.auth-form { display: flex; flex-direction: column; gap: 12px; }
.auth-help { font-size: 12px; margin: 0; text-align: center; }

/* Segmented control (login type) */
.seg {
    display: grid; grid-template-columns: 1fr 1fr;
    background: var(--ink-100); padding: 4px; border-radius: var(--r-md);
}
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 8px 10px; font-size: 13px; font-weight: 600; color: var(--ink-600);
    border-radius: var(--r-sm); cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast);
}
.seg input:checked + label {
    background: #fff; color: var(--primary-700); box-shadow: var(--shadow-sm);
}

/* Fields */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > span { font-size: 12.5px; font-weight: 600; color: var(--ink-700); }
.field-input {
    display: flex; align-items: center; gap: 8px;
    background: #fff; border: 1px solid var(--ink-300); border-radius: var(--r-md);
    padding: 0 10px; transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.field-input:focus-within {
    border-color: var(--primary-500); box-shadow: 0 0 0 3px rgba(99,102,241,.16);
}
.field-input i { color: var(--ink-400); font-size: 15px; }
.field-input input, .field-input select {
    flex: 1; border: 0; outline: none; background: transparent;
    padding: 10px 4px; font-size: 14px;
}
.field-input input::placeholder { color: var(--ink-400); }
.field-eye {
    background: transparent; border: 0; color: var(--ink-400); cursor: pointer;
    padding: 4px; border-radius: 6px;
}
.field-eye:hover { background: var(--ink-100); color: var(--ink-700); }

.alert {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: var(--r-md);
    font-size: 13.5px;
}
.alert-danger  { background: var(--danger-50);  color: var(--danger-700);  border: 1px solid #fecaca; }
.alert-warning { background: var(--warning-50); color: var(--warning-700); border: 1px solid #fde68a; }
.alert-success { background: var(--success-50); color: var(--success-700); border: 1px solid #bbf7d0; }
.alert-info    { background: var(--info-50);    color: var(--info-700);    border: 1px solid #bae6fd; }
.alert i { font-size: 16px; }

/* ----- 4. BUTTONS -------------------------------------------------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 8px 14px; font-size: 13.5px; font-weight: 600;
    border-radius: var(--r-md); border: 1px solid transparent;
    cursor: pointer; text-decoration: none;
    transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
    white-space: nowrap;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn[disabled], .btn.is-disabled { opacity: .5; pointer-events: none; transform: none; }
.btn i { font-size: 15px; }

.btn-primary  { background: var(--primary-600); color: #fff; box-shadow: 0 4px 12px rgba(79,70,229,.25); }
.btn-primary:hover { background: var(--primary-700); color: #fff; }

.btn-secondary{ background: #fff; color: var(--ink-800); border-color: var(--ink-300); }
.btn-secondary:hover { background: var(--ink-50); border-color: var(--ink-400); color: var(--ink-900); }

.btn-ghost    { background: transparent; color: var(--primary-700); }
.btn-ghost:hover { background: var(--primary-50); color: var(--primary-800); }

.btn-danger   { background: var(--danger-500); color: #fff; }
.btn-danger:hover { background: var(--danger-700); color: #fff; }

.btn-success  { background: var(--success-500); color: #fff; }
.btn-success:hover { background: var(--success-700); color: #fff; }

.btn-block { width: 100%; }
.btn-sm { padding: 6px 10px; font-size: 12.5px; }
.btn-lg { padding: 12px 18px; font-size: 15px; }

/* ----- 5. CARDS, GRID ---------------------------------------------------- */
.card {
    background: var(--bg-surface); border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: 18px;
    overflow: hidden;
}
.card-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--line);
}
.card-head h3.card-title { margin: 6px 0 2px; font-size: 16px; }
.card-head .card-sub { color: var(--ink-500); margin: 0; font-size: 12.5px; }
.card-body { padding: 16px 20px; }
.card-foot {
    padding: 12px 20px; background: var(--ink-50);
    border-top: 1px solid var(--line);
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    font-size: 12.5px; color: var(--ink-500);
}
.card-tight .card-body { padding: 12px 16px; }
.card-flush > .card-body { padding: 0; }

.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-6 { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 980px) {
    .grid-2, .grid-3, .grid-4, .grid-6 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
    .grid-2, .grid-3, .grid-4, .grid-6 { grid-template-columns: 1fr; }
}

/* ----- 6. STATS / KPIS --------------------------------------------------- */
.stat-row { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 720px) { .stat-row { grid-template-columns: 1fr 1fr; } }
.stat {
    display: flex; flex-direction: column; gap: 6px;
    padding: 14px;
    background: var(--ink-50); border-radius: var(--r-md);
}
.stat-label { font-size: 11.5px; color: var(--ink-500); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.stat-value { font-size: 22px; font-weight: 700; color: var(--ink-900); }
.stat-meta  { font-size: 12px; color: var(--ink-500); }
.stat-up    { color: var(--success-700); }
.stat-down  { color: var(--danger-700); }

.kpi-tiles {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
    margin-bottom: 18px;
}
@media (max-width: 1100px) { .kpi-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .kpi-tiles { grid-template-columns: 1fr; } }
.kpi-tile {
    background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
    padding: 16px 18px; box-shadow: var(--shadow-sm);
    position: relative; overflow: hidden;
}
.kpi-tile::before {
    content: ''; position: absolute; inset: 0 auto 0 0; width: 3px;
    background: var(--primary-500);
}
.kpi-tile.tile-kpi::before { background: var(--kpi-500); }
.kpi-tile.tile-spt::before { background: var(--spt-500); }
.kpi-tile.tile-bud::before { background: var(--bud-500); }
.kpi-tile.tile-cmp::before { background: var(--cmp-500); }
.kpi-tile-head {
    display: flex; align-items: center; justify-content: space-between;
    color: var(--ink-500); font-size: 12px; font-weight: 600; margin-bottom: 6px;
    text-transform: uppercase; letter-spacing: .04em;
}
.kpi-tile-head i { font-size: 14px; }
.kpi-tile-value { font-size: 26px; font-weight: 700; color: var(--ink-900); letter-spacing: -.02em; }
.kpi-tile-meta { font-size: 12px; color: var(--ink-500); margin-top: 4px; display: flex; gap: 8px; flex-wrap: wrap; }

/* Delta arrows */
.delta { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; font-size: 12.5px; }
.delta.is-up   { color: var(--success-700); }
.delta.is-down { color: var(--danger-700); }
.delta.is-flat { color: var(--ink-500); }

/* ----- 7. DATA SOURCE BADGES -------------------------------------------- */
.src-badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 12px; border-radius: var(--r-pill);
    font-size: 12px; font-weight: 600;
    background: var(--ink-100); color: var(--ink-700);
    border: 1px solid var(--line);
}
.src-badge.small { font-size: 11px; padding: 4px 10px; gap: 6px; }
.src-badge i { font-size: 13px; }
.src-badge .src-badge-label { font-weight: 700; }
.src-badge .src-badge-sub { color: var(--ink-500); font-weight: 400; margin-left: 4px; }
.src-badge.src-kpi     { background: var(--kpi-50);  color: var(--kpi-500);  border-color: #c7d2fe; }
.src-badge.src-spt     { background: var(--spt-50);  color: var(--spt-500);  border-color: #bae6fd; }
.src-badge.src-compare { background: var(--cmp-50);  color: var(--cmp-500);  border-color: #ddd6fe; }
.src-badge.src-budget  { background: var(--bud-50);  color: var(--bud-500);  border-color: #fde68a; }

/* ----- 8. TABLES --------------------------------------------------------- */
.table-wrap {
    overflow-x: auto; border-radius: var(--r-md);
    border: 1px solid var(--line); background: #fff;
}
.table {
    width: 100%; border-collapse: separate; border-spacing: 0;
    font-size: 13px;
}
.table thead th {
    position: sticky; top: 0; background: var(--ink-50); color: var(--ink-700);
    text-align: left; padding: 10px 14px; font-size: 11.5px;
    font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}
.table tbody td {
    padding: 11px 14px; border-bottom: 1px solid var(--line);
    color: var(--ink-800); vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--ink-50); }
.table-zebra tbody tr:nth-child(2n) { background: var(--ink-50); }
.table-compact tbody td, .table-compact thead th { padding: 7px 10px; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table .strong { font-weight: 700; color: var(--ink-900); }
.table tfoot td {
    padding: 12px 14px; font-weight: 700; background: var(--ink-50);
    border-top: 2px solid var(--ink-200);
}
.table .row-total { background: var(--primary-50); }
.table .row-total td { font-weight: 700; color: var(--primary-800); }

/* Branch chip in tables */
.branch-chip {
    display: inline-flex; align-items: center; gap: 8px;
    font-weight: 600; color: var(--ink-900);
}
.branch-chip .code {
    background: var(--primary-50); color: var(--primary-700);
    padding: 2px 8px; border-radius: var(--r-pill); font-size: 11px;
    font-weight: 700;
}

/* ----- 9. CHIPS / TAGS --------------------------------------------------- */
.chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: var(--r-pill);
    background: var(--ink-100); color: var(--ink-700);
    font-size: 12px; font-weight: 600;
}
.chip i { font-size: 12px; }
.chip-success { background: var(--success-50); color: var(--success-700); }
.chip-warn    { background: var(--warning-50); color: var(--warning-700); }
.chip-danger  { background: var(--danger-50);  color: var(--danger-700); }
.chip-info    { background: var(--info-50);    color: var(--info-700); }
.chip-kpi     { background: var(--kpi-50);     color: var(--kpi-500); }
.chip-spt     { background: var(--spt-50);     color: var(--spt-500); }

/* ----- 10. FORMS (admin / filters) -------------------------------------- */
.form-grid { display: grid; gap: 12px; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .form-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } }
.form-grid .field-input input,
.form-grid .field-input select { padding: 8px 4px; }

.filter-bar {
    display: flex; align-items: end; flex-wrap: wrap; gap: 10px;
    padding: 12px 16px; background: #fff;
    border: 1px solid var(--line); border-radius: var(--r-lg);
    margin-bottom: 16px;
}
.filter-bar .field { min-width: 160px; flex: 1; }
.filter-bar .filter-actions { display: flex; gap: 8px; }

.checkbox-list {
    display: flex; flex-wrap: wrap; gap: 6px;
}
.checkbox-list label {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 10px; border-radius: var(--r-pill);
    background: var(--ink-100); border: 1px solid transparent;
    font-size: 12px; cursor: pointer; user-select: none;
}
.checkbox-list label:hover { background: var(--ink-200); }
.checkbox-list input { accent-color: var(--primary-600); }
.checkbox-list input:checked + span { color: var(--primary-700); font-weight: 600; }
.checkbox-list label:has(input:checked) {
    background: var(--primary-50); border-color: var(--primary-200);
}

/* ----- 11. EMPTY STATES -------------------------------------------------- */
.empty {
    text-align: center; padding: 36px 16px; color: var(--ink-500);
    background: var(--ink-50); border: 1px dashed var(--line); border-radius: var(--r-md);
}
.empty i { font-size: 36px; opacity: .5; display: block; margin-bottom: 8px; }
.empty strong { display: block; color: var(--ink-700); font-size: 14.5px; margin-bottom: 4px; }

/* ----- 12. HUB PAGE ------------------------------------------------------ */
.hub-hero {
    display: flex; align-items: end; justify-content: space-between; gap: 16px;
    margin-bottom: 22px;
}
.hub-hero h2 { font-size: 24px; margin: 4px 0; letter-spacing: -.01em; }
.hub-hero p { color: var(--ink-500); margin: 0; }
.hub-hero-meta { display: flex; gap: 8px; flex-wrap: wrap; }

.module-card .card-head { padding: 18px 20px 12px; }
.module-card .card-title { font-size: 18px; }
.module-card-kpi { border-top: 3px solid var(--kpi-500); }
.module-card-spt { border-top: 3px solid var(--spt-500); }

.compare-summary { border-top: 3px solid var(--cmp-500); }
.compare-bar { display: flex; flex-direction: column; gap: 10px; }
.compare-bar-row {
    display: grid; grid-template-columns: 160px 1fr 160px; align-items: center; gap: 12px;
}
.compare-bar-label { font-size: 12px; color: var(--ink-500); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.compare-bar-value { font-weight: 700; text-align: right; color: var(--ink-900); }
.compare-bar-track { background: var(--ink-100); height: 14px; border-radius: var(--r-pill); overflow: hidden; }
.compare-bar-fill { height: 100%; border-radius: var(--r-pill); transition: width .4s ease; }
.compare-bar-kpi { background: linear-gradient(90deg, var(--kpi-500), #818CF8); }
.compare-bar-spt { background: linear-gradient(90deg, var(--spt-500), #38BDF8); }
.compare-bar-delta {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 10px 12px; background: var(--cmp-50);
    border-radius: var(--r-md); margin-top: 8px;
    font-size: 13px;
}
.compare-bar-delta strong { color: var(--cmp-500); font-size: 15px; }

/* ----- 13. CHARTS (containers) ------------------------------------------ */
.chart-wrap { position: relative; height: 280px; }
.chart-wrap.tall { height: 360px; }
.chart-wrap canvas { max-height: 100%; }

/* ----- 14. SPT HEATMAP -------------------------------------------------- */
.heatmap {
    display: grid; grid-template-columns: 60px repeat(7, 1fr); gap: 2px;
    font-size: 11.5px;
}
.heatmap-head, .heatmap-row { display: contents; }
.heatmap-th, .heatmap-rowh {
    padding: 6px 4px; font-weight: 700; color: var(--ink-600);
    text-align: center; background: var(--ink-50); border-radius: 4px;
}
.heatmap-cell {
    padding: 6px 4px; text-align: center;
    background: var(--ink-100); color: transparent;
    border-radius: 4px;
    transition: transform var(--t-fast);
    position: relative; cursor: default;
    font-variant-numeric: tabular-nums;
}
.heatmap-cell[data-v="0"], .heatmap-cell[data-v="1"] { background: var(--primary-50);  color: var(--primary-900); }
.heatmap-cell[data-v="2"] { background: #C7D2FE; color: var(--primary-900); }
.heatmap-cell[data-v="3"] { background: #818CF8; color: #fff; }
.heatmap-cell[data-v="4"] { background: #4F46E5; color: #fff; }
.heatmap-cell[data-v="5"] { background: #3730A3; color: #fff; }
.heatmap-cell:hover { transform: scale(1.06); z-index: 2; box-shadow: var(--shadow-md); }

/* SPT hourly grid (week × hour) */
.spt-grid {
    width: 100%; border-collapse: separate; border-spacing: 0;
    font-size: 12px;
}
.spt-grid th, .spt-grid td { padding: 5px 8px; text-align: right; }
.spt-grid th { background: var(--ink-50); color: var(--ink-700); font-weight: 700; white-space: nowrap; }
.spt-grid td { background: #fff; border-top: 1px solid var(--line); }
.spt-grid td.label { text-align: left; font-weight: 600; color: var(--ink-700); background: var(--ink-50); }
.spt-grid .empty-cell { color: var(--ink-400); }
.spt-grid .hi { background: var(--primary-50); font-weight: 700; color: var(--primary-800); }
.spt-grid .row-total td { background: var(--primary-50); font-weight: 700; }

/* ----- 15. TABS --------------------------------------------------------- */
.tabs {
    display: inline-flex; gap: 4px;
    margin-bottom: 18px;
    padding: 5px;
    background: var(--ink-50);
    border: 1px solid var(--line);
    border-radius: 999px;
    overflow-x: auto;
    box-shadow: inset 0 1px 0 rgba(0,0,0,.02);
    max-width: 100%;
    scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
    --tab-accent: var(--primary-600);
    --tab-accent-soft: var(--primary-50);
    position: relative;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 18px;
    font-size: 13.5px; font-weight: 600; letter-spacing: .01em;
    color: var(--ink-600); background: transparent; border: 0;
    border-radius: 999px;
    cursor: pointer; white-space: nowrap;
    text-decoration: none;
    transition: color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.tab i {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px;
    border-radius: 999px;
    font-size: 13px;
    color: var(--tab-accent);
    background: var(--tab-accent-soft);
    transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.tab:hover {
    color: var(--ink-900); text-decoration: none;
    background: rgba(255,255,255,.6);
}
.tab:hover i { transform: scale(1.08); }
.tab.is-active {
    color: var(--tab-accent);
    background: #fff;
    box-shadow: 0 1px 2px rgba(15,23,42,.06), 0 4px 12px rgba(15,23,42,.05);
}
.tab.is-active i { color: #fff; background: var(--tab-accent); }
.tab:focus-visible { outline: 2px solid var(--tab-accent); outline-offset: 2px; }

/* Per-tab accent colors (compare page) */
.tab[data-tab-target="weekly"]    { --tab-accent: #0EA5E9; --tab-accent-soft: #E0F2FE; }
.tab[data-tab-target="budget"]    { --tab-accent: #10B981; --tab-accent-soft: #D1FAE5; }
.tab[data-tab-target="channels"]  { --tab-accent: #F59E0B; --tab-accent-soft: #FEF3C7; }
.tab[data-tab-target="hourly"]    { --tab-accent: #8B5CF6; --tab-accent-soft: #EDE9FE; }

.tab-panel { display: none; }
.tab-panel.is-active {
    display: block;
    animation: tabPanelIn var(--t-base) ease both;
}
@keyframes tabPanelIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 640px) {
    .tabs { display: flex; width: 100%; }
    .tab { padding: 8px 14px; font-size: 13px; }
    .tab span.tab-label { display: none; }
    .tab i { width: 26px; height: 26px; font-size: 14px; }
}

/* ----- 16. EXPLAINER CARD ----------------------------------------------- */
.explainer {
    display: flex; gap: 14px;
    padding: 16px 18px; background: var(--cmp-50);
    border: 1px solid #ddd6fe; border-left: 4px solid var(--cmp-500);
    border-radius: var(--r-lg); margin-bottom: 18px;
}
.explainer i { font-size: 22px; color: var(--cmp-500); }
.explainer h4 { margin: 0 0 4px; font-size: 14.5px; color: var(--cmp-500); }
.explainer p  { margin: 0; color: var(--ink-700); font-size: 13.5px; }

/* ----- 17. UPLOAD ZONE -------------------------------------------------- */
.upload-zone {
    border: 2px dashed var(--ink-300);
    border-radius: var(--r-lg);
    padding: 32px 18px; text-align: center;
    background: var(--ink-50); transition: border-color var(--t-fast), background var(--t-fast);
    cursor: pointer;
}
.upload-zone:hover, .upload-zone.is-drag {
    border-color: var(--primary-500); background: var(--primary-50);
}
.upload-zone i { font-size: 36px; color: var(--primary-500); display: block; margin-bottom: 8px; }
.upload-zone strong { display: block; font-size: 15px; color: var(--ink-900); }
.upload-zone p { color: var(--ink-500); margin: 4px 0 0; font-size: 12.5px; }
.upload-zone input[type="file"] { display: none; }
.upload-zone .file-name { color: var(--primary-700); font-weight: 700; }

/* ----- 18. ACHIEVEMENT BAR ---------------------------------------------- */
.achv-bar {
    background: var(--ink-100); border-radius: var(--r-pill);
    height: 10px; overflow: hidden; position: relative; min-width: 120px;
}
.achv-bar-fill {
    height: 100%; border-radius: var(--r-pill);
    background: linear-gradient(90deg, var(--success-500), #34D399);
}
.achv-bar-fill.warn   { background: linear-gradient(90deg, var(--warning-500), #FBBF24); }
.achv-bar-fill.danger { background: linear-gradient(90deg, var(--danger-500), #F87171); }
.achv-row { display: flex; align-items: center; gap: 10px; min-width: 200px; }
.achv-row .achv-val { font-weight: 700; min-width: 56px; text-align: right; font-size: 13px; }

/* ----- 19. PAGE HEADER (filters + actions) ------------------------------ */
.page-actions {
    display: flex; align-items: center; gap: 8px;
}
.divider { border-top: 1px solid var(--line); margin: 18px 0; }

.section-title {
    margin: 24px 0 12px; font-size: 13.5px; font-weight: 700;
    color: var(--ink-500); text-transform: uppercase; letter-spacing: .08em;
}

.d-none-mobile { }
@media (max-width: 720px) { .d-none-mobile { display: none !important; } }

/* ----- 20. RESPONSIVE (mobile sidebar) ---------------------------------- */
@media (max-width: 980px) {
    .side {
        transform: translateX(-100%);
    }
    .side.is-open { transform: translateX(0); box-shadow: var(--shadow-xl); }
    .side-close { display: grid; place-items: center; }
    .main { margin-left: 0; }
    .top-burger { display: inline-block; }
    .content { padding: 16px 14px 56px; }
    .toast-host { padding: 10px 14px 0; }
    .top { padding: 0 14px; }
    .top-title h1 { font-size: 15px; }
    .compare-bar-row { grid-template-columns: 1fr; }
    .compare-bar-value { text-align: left; }
}

/* ----- 21. PRINT — see comprehensive landscape-A4 block at the bottom of the file */

/* ==========================================================================
   HUB DASHBOARD — bespoke landing-page styles + animations
   ========================================================================== */

/* Section entry animation (staggered) */
@keyframes hubFadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
.hub-section {
    animation: hubFadeUp 520ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
    margin-bottom: 20px;
}
.hub-section:nth-child(1) { animation-delay: 0ms; }
.hub-section:nth-child(2) { animation-delay: 70ms; }
.hub-section:nth-child(3) { animation-delay: 140ms; }
.hub-section:nth-child(4) { animation-delay: 210ms; }
.hub-section:nth-child(5) { animation-delay: 280ms; }
.hub-section:nth-child(6) { animation-delay: 350ms; }
.hub-section:nth-child(7) { animation-delay: 420ms; }

/* ----- Filter bar ------------------------------------------------------- */
.hub-filterbar {
    background: #fff; border: 1px solid var(--line);
    border-radius: var(--r-lg); padding: 14px 16px;
    box-shadow: var(--shadow-sm);
}
.hub-filter-form {
    display: flex; align-items: end; gap: 12px; flex-wrap: wrap;
}
.hub-filter { display: flex; flex-direction: column; gap: 4px; min-width: 140px; flex: 0 1 auto; position: relative; }
.hub-filter-multi { min-width: 240px; }
.hub-filter-label { font-size: 11px; font-weight: 700; color: var(--ink-500); letter-spacing: .06em; text-transform: uppercase; }

.hub-status {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-left: auto; padding-bottom: 6px;     /* aligns baseline with the .field-input boxes */
}
.hub-status-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px;
    background: linear-gradient(135deg, var(--primary-50), #EEF2FF);
    border: 1px solid var(--primary-200);
    border-radius: var(--r-pill);
    font-weight: 700; font-size: 12px; color: var(--primary-700);
}
.hub-status-sep { color: var(--ink-300); font-weight: 700; }
/* On narrow viewports the status wraps under the filters; let it span full width */
@media (max-width: 900px) {
    .hub-status { margin-left: 0; width: 100%; padding-top: 8px; border-top: 1px dashed var(--line); }
}

/* ----- Multiselect (branches dropdown) ---------------------------------- */
.ms-btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: #fff; border: 1px solid var(--ink-300); color: var(--ink-800);
    padding: 9px 12px; border-radius: var(--r-md);
    font: inherit; cursor: pointer; min-width: 180px;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.ms-btn:hover { border-color: var(--ink-400); }
.ms-btn:focus-visible { border-color: var(--primary-500); box-shadow: 0 0 0 3px rgba(99,102,241,.16); outline: none; }
.ms-btn i:first-child { color: var(--ink-400); }
.ms-btn span { flex: 1; text-align: left; }
.ms-btn .small { color: var(--ink-400); margin-left: auto; }

.ms-pop {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0;
    background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
    box-shadow: var(--shadow-xl);
    padding: 6px; min-width: 280px; max-height: 380px;
    overflow: hidden; z-index: 30;
    display: flex; flex-direction: column;
    animation: hubFadeUp 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.ms-pop[hidden] { display: none; }
.ms-pop-head {
    display: flex; justify-content: space-between; gap: 8px;
    padding: 6px 8px 8px; border-bottom: 1px solid var(--line);
}
.ms-link {
    background: transparent; border: 0; cursor: pointer;
    color: var(--primary-700); font-size: 12px; font-weight: 600;
    padding: 4px 6px; border-radius: 6px;
}
.ms-link:hover { background: var(--primary-50); }
.ms-pop-list { flex: 1; overflow-y: auto; padding: 4px 0; }
.ms-row {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 10px; border-radius: 6px; cursor: pointer;
    font-size: 13px;
}
.ms-row:hover { background: var(--primary-50); }
.ms-row input { accent-color: var(--primary-600); margin: 0; }
.ms-code {
    background: var(--primary-50); color: var(--primary-700);
    padding: 2px 8px; border-radius: var(--r-pill);
    font-size: 11px; font-weight: 700; min-width: 52px; text-align: center;
}
.ms-name { color: var(--ink-700); }
.ms-row:has(input:checked) .ms-code {
    background: var(--primary-600); color: #fff;
}
.ms-pop-foot { padding: 8px 6px 4px; border-top: 1px solid var(--line); text-align: right; }

/* ----- Hub stat tiles (4-up) -------------------------------------------- */
.hub-tiles {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
@media (max-width: 1100px) { .hub-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .hub-tiles { grid-template-columns: 1fr; } }
.hub-tile {
    background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
    padding: 18px 20px; box-shadow: var(--shadow-sm);
    transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 220ms;
    position: relative; overflow: hidden;
}
.hub-tile::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(circle at 100% 0, rgba(99,102,241,.06), transparent 60%);
}
.hub-tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 32px -16px rgba(15,23,42,.18), 0 4px 8px -4px rgba(79,70,229,.12);
}
.hub-tile-row {
    display: flex; align-items: center; gap: 14px; position: relative;
}
.hub-tile-icon {
    width: 52px; height: 52px; border-radius: 14px;
    display: grid; place-items: center;
    color: #fff; font-size: 22px; flex-shrink: 0;
    box-shadow: 0 8px 18px -8px rgba(79,70,229,.45);
}
.hub-tile-icon.icon-sales    { background: linear-gradient(135deg, #6366F1, #8B5CF6); }
.hub-tile-icon.icon-mtd      { background: linear-gradient(135deg, #10B981, #14B8A6); box-shadow: 0 8px 18px -8px rgba(16,185,129,.45); }
.hub-tile-icon.icon-orders   { background: linear-gradient(135deg, #06B6D4, #0EA5E9); box-shadow: 0 8px 18px -8px rgba(14,165,233,.45); }
.hub-tile-icon.icon-products { background: linear-gradient(135deg, #EC4899, #F97316); box-shadow: 0 8px 18px -8px rgba(236,72,153,.45); }
.hub-tile-icon.icon-budget   { background: linear-gradient(135deg, #F59E0B, #F97316); box-shadow: 0 8px 18px -8px rgba(245,158,11,.45); }
.hub-tile-icon.icon-cmp      { background: linear-gradient(135deg, #7C3AED, #A855F7); box-shadow: 0 8px 18px -8px rgba(124,58,237,.45); }
.hub-tile-content { flex: 1; min-width: 0; }
.hub-tile-value {
    font-size: 24px; font-weight: 700; color: var(--ink-900);
    letter-spacing: -.02em; line-height: 1.15;
    font-variant-numeric: tabular-nums;
}
.hub-tile-label {
    font-size: 11px; font-weight: 700; color: var(--ink-500);
    letter-spacing: .08em; text-transform: uppercase;
    margin-top: 4px;
}
.hub-tile-foot {
    display: flex; align-items: center; justify-content: space-between;
    border-top: 1px solid var(--ink-100);
    margin-top: 14px; padding-top: 12px;
    font-size: 12.5px;
}

/* ----- Budget achievement card ----------------------------------------- */
.hub-budget-card { padding: 18px 22px; }
.hub-budget-clickable {
    cursor: pointer;
    transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 220ms, border-color 220ms;
}
.hub-budget-clickable:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 32px -16px rgba(15,23,42,.18), 0 4px 8px -4px rgba(245,158,11,.18);
    border-color: #fde68a;
}
.hub-budget-clickable:hover .hub-budget-cta {
    background: var(--bud-50);
    color: var(--warning-700);
    border-color: #fde68a;
}
.hub-budget-clickable:focus-visible {
    outline: 2px solid var(--primary-500); outline-offset: 2px;
}
.hub-budget-left-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hub-budget-cta {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; margin-top: 8px;
    background: #fff; color: var(--ink-600);
    border: 1px solid var(--ink-200);
    border-radius: var(--r-pill);
    font-size: 11.5px; font-weight: 600;
    transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
    align-self: flex-start; width: max-content;
}
.hub-budget-cta i { font-size: 12px; }
.hub-budget-cta i.bi-arrow-right { transition: transform var(--t-fast); }
.hub-budget-clickable:hover .hub-budget-cta i.bi-arrow-right { transform: translateX(2px); }
.hub-budget-grid {
    display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: center;
}
@media (max-width: 760px) { .hub-budget-grid { grid-template-columns: 1fr; gap: 14px; } }
.hub-budget-left {
    display: flex; align-items: center; gap: 14px;
}
.hub-budget-left h3 { margin: 0; font-size: 16px; }
.hub-budget-numbers {
    display: flex; justify-content: space-between; gap: 14px; margin-bottom: 8px;
}
.hub-budget-numbers .ink { color: var(--ink-900); }
.hub-progress {}
.hub-progress-track {
    background: var(--ink-100);
    height: 22px;
    border-radius: var(--r-pill);
    overflow: hidden;
    position: relative;
}
@keyframes hubProgressFill {
    from { width: 0 !important; }
}
.hub-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #F59E0B, #FBBF24);
    border-radius: var(--r-pill);
    position: relative;
    animation: hubProgressFill 1100ms cubic-bezier(0.4, 0, 0.2, 1) backwards;
    display: flex; align-items: center; justify-content: end;
    min-width: 80px;
}
.hub-progress-fill.warn   { background: linear-gradient(90deg, #F59E0B, #FBBF24); }
.hub-progress-fill.danger { background: linear-gradient(90deg, #EF4444, #F87171); }
.hub-progress-fill:not(.warn):not(.danger) { background: linear-gradient(90deg, #10B981, #34D399); }
.hub-progress-tag {
    background: rgba(0, 0, 0, .14);
    color: #fff;
    padding: 2px 10px;
    font-size: 11.5px;
    font-weight: 700;
    border-radius: var(--r-pill);
    margin-right: 6px;
    white-space: nowrap;
    backdrop-filter: blur(2px);
}
.hub-progress-axis {
    display: flex; justify-content: space-between;
    font-size: 11px; color: var(--ink-500);
    margin-top: 6px;
}

/* ----- Section eyebrow + chart card legend ----------------------------- */
.card-eyebrow {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--primary-600);
    margin-bottom: 4px;
}
.card-legend {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.legend-dot {
    width: 10px; height: 10px; border-radius: 50%; display: inline-block;
}
.legend-dot-current { background: #6366F1; }
.legend-dot-other   { background: #34D399; }

/* ----- SPT row (hourly + heatmap, stacked full-width) ------------------ */
.hub-spt-row {
    display: grid; grid-template-columns: 1fr; gap: 16px;
}
.hub-spt-row .card { margin: 0; }

/* ----- 3-card row (Channel / Sales Person / Branch Comparison) --------- */
.hub-three-row {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
    align-items: stretch;
}
.hub-three-row .card {
    margin: 0;
    display: flex; flex-direction: column;
}
.hub-three-row .card .card-body {
    flex: 1;
    display: flex; flex-direction: column;
    gap: 12px;
}
.hub-three-row .chart-wrap {
    height: 280px; flex: 0 0 auto;
}
@media (max-width: 1200px) { .hub-three-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px)  { .hub-three-row { grid-template-columns: 1fr; } }

/* ----- 2-col row (Daily detail + Monthly sales) on L/XL+ --------------- */
.hub-two-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
    align-items: stretch;
}
.hub-two-row .card { margin: 0; height: 100%; display: flex; flex-direction: column; }
.hub-two-row .card .card-body { flex: 1; }
/* If only one of the two cards renders, let it take the full row */
.hub-two-row > article:only-child { grid-column: 1 / -1; }
/* Collapse to one column below L (≈1200px) */
@media (max-width: 1199px) {
    .hub-two-row { grid-template-columns: 1fr; }
}

/* Daily detail table — tighten columns so it fits the 50% slot on L/XL */
.hub-daily-table th, .hub-daily-table td { padding: 8px 10px; }
.hub-daily-table .chip { padding: 2px 8px; font-size: 11px; }
@media (max-width: 1399px) {
    /* On the bigger-but-not-huge desktops, hide the share-of-period column
       to keep the table readable inside the 50% panel. */
    .hub-two-row .hub-daily-share-col { display: none; }
}
@media (max-width: 1199px) {
    /* When stacked again, bring the share column back */
    .hub-two-row .hub-daily-share-col { display: table-cell; }
}

/* Segmented toggle (Sales | Orders) ----------------------------------- */
.seg-toggle {
    display: inline-flex; align-items: center;
    background: var(--ink-100); border-radius: var(--r-pill);
    padding: 3px; gap: 0;
}
.seg-toggle button {
    background: transparent; border: 0; cursor: pointer;
    padding: 6px 14px; font-size: 12px; font-weight: 700;
    color: var(--ink-600); border-radius: var(--r-pill);
    transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
    line-height: 1.2;
}
.seg-toggle button:hover:not(.is-active) { color: var(--ink-900); }
.seg-toggle button.is-active {
    background: var(--primary-600); color: #fff;
    box-shadow: 0 4px 10px -3px rgba(79,70,229,.45);
}

/* Hub metric select (used by Monthly chart) ----------------------------- */
.hub-metric-select {
    background: #fff; color: var(--ink-800);
    border: 1px solid var(--ink-300); border-radius: var(--r-md);
    padding: 7px 32px 7px 12px;
    font: inherit; font-size: 13px; font-weight: 600;
    cursor: pointer;
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%2364748B' d='M8 11.5 3 6.5h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.hub-metric-select:hover { border-color: var(--ink-400); }
.hub-metric-select:focus { outline: none; border-color: var(--primary-500); box-shadow: 0 0 0 3px rgba(99,102,241,.16); }

/* Hub heatmap: hours-on-X layout, two-line content, yellow → red palette */
.heatmap-scroll {
    overflow-x: auto;
    /* tame the scrollbar */
    padding-bottom: 6px;
}
.heatmap-scroll::-webkit-scrollbar { height: 8px; }
.heatmap-scroll::-webkit-scrollbar-thumb { background: var(--ink-200); border-radius: 4px; }
.heatmap-scroll::-webkit-scrollbar-thumb:hover { background: var(--ink-300); }

.heatmap-warm {
    /* Hours on X: 1 sticky row-header column + 24 hour columns */
    grid-template-columns: 70px repeat(24, minmax(54px, 1fr));
    gap: 3px;
    font-size: 11.5px;
    min-width: 1340px;
}
.heatmap-warm .heatmap-th,
.heatmap-warm .heatmap-rowh {
    padding: 8px 4px;
    color: var(--ink-700);
    background: var(--ink-50);
    border-radius: 6px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.heatmap-warm .heatmap-rowh {
    position: sticky; left: 0; z-index: 1;
    background: #fff;
    box-shadow: 1px 0 0 var(--line);
    text-align: center;
}
.heatmap-warm .heatmap-th { text-align: center; }
.heatmap-warm .heatmap-th:first-child {
    position: sticky; left: 0; z-index: 2; background: #fff;
    box-shadow: 1px 0 0 var(--line);
}
.heatmap-warm .heatmap-cell {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 8px 4px; min-height: 52px;
    border-radius: 6px;
    transition: transform var(--t-fast), box-shadow var(--t-fast);
    cursor: default;
}
.heatmap-warm .heatmap-cell:hover {
    transform: scale(1.08); z-index: 3; box-shadow: var(--shadow-md);
}
.heatmap-warm .heatmap-val {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
    white-space: nowrap;
}
.heatmap-warm .heatmap-orders {
    font-size: 10px;
    line-height: 1.1;
    opacity: .8;
    font-variant-numeric: tabular-nums;
    margin-top: 2px;
}

/* Warm palette buckets — override the default indigo */
.heatmap-warm .heatmap-cell                       { background: #F8FAFC; color: var(--ink-300); } /* 0 / empty */
.heatmap-warm .heatmap-cell[data-v="0"]           { background: #F8FAFC; color: var(--ink-300); }
.heatmap-warm .heatmap-cell[data-v="1"]           { background: #FEF9C3; color: #78350F; } /* light yellow */
.heatmap-warm .heatmap-cell[data-v="2"]           { background: #FDE68A; color: #78350F; } /* yellow */
.heatmap-warm .heatmap-cell[data-v="3"]           { background: #FB923C; color: #fff; }    /* orange */
.heatmap-warm .heatmap-cell[data-v="4"]           { background: #EF4444; color: #fff; }    /* red */
.heatmap-warm .heatmap-cell[data-v="5"]           { background: #991B1B; color: #fff; }    /* dark red */
.heatmap-warm .heatmap-cell[data-v="5"] .heatmap-orders,
.heatmap-warm .heatmap-cell[data-v="4"] .heatmap-orders,
.heatmap-warm .heatmap-cell[data-v="3"] .heatmap-orders { opacity: .85; }

/* Heatmap legend below the grid */
.heatmap-legend {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-top: 14px; font-size: 11.5px; color: var(--ink-500);
}
.heatmap-legend-bar { display: inline-flex; gap: 2px; }
.heatmap-legend-bar span {
    width: 22px; height: 12px; border-radius: 3px;
}

.hub-note {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 18px;
    background: linear-gradient(135deg, #F0F9FF, #EFF6FF);
    border: 1px solid #bae6fd;
    border-left: 4px solid var(--spt-500);
    border-radius: var(--r-lg);
}
.hub-note i { font-size: 22px; color: var(--spt-500); }
.hub-note div { flex: 1; line-height: 1.3; }
.hub-note strong { display: block; color: var(--ink-900); font-size: 14px; }

/* ----- Quick links (CTA row) ------------------------------------------- */
.hub-cta {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
@media (max-width: 980px) { .hub-cta { grid-template-columns: 1fr; } }
.hub-cta-card {
    display: flex; align-items: center; gap: 16px;
    background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
    padding: 16px 18px; text-decoration: none;
    box-shadow: var(--shadow-sm);
    transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 240ms, border-color 240ms;
    position: relative; overflow: hidden;
}
.hub-cta-card::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0;
    background: linear-gradient(135deg, rgba(99,102,241,.05), transparent);
    transition: opacity 240ms;
}
.hub-cta-card:hover {
    transform: translateY(-3px) translateX(2px);
    box-shadow: 0 16px 32px -16px rgba(15,23,42,.2);
    text-decoration: none;
    border-color: var(--primary-200);
}
.hub-cta-card:hover::after { opacity: 1; }
.hub-cta-card strong { display: block; color: var(--ink-900); font-size: 14.5px; }
.hub-cta-card .small { display: block; margin-top: 2px; }
.hub-cta-arrow {
    color: var(--ink-300); font-size: 20px;
    margin-left: auto; transition: transform 240ms, color 240ms;
}
.hub-cta-card:hover .hub-cta-arrow {
    color: var(--primary-600); transform: translateX(4px);
}

.hub-cta-kpi:hover { border-color: #c7d2fe; }
.hub-cta-spt:hover { border-color: #bae6fd; }
.hub-cta-cmp:hover { border-color: #ddd6fe; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .hub-section, .hub-progress-fill, .ms-pop { animation: none !important; }
    .hub-tile:hover, .hub-cta-card:hover { transform: none; }
}

/* ==========================================================================
   KPI ANALYTICS PAGE  (/v2/kpi)
   ========================================================================== */

/* ----- 6-up hero stat row ------------------------------------------------ */
.ba-stat-row {
    display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px;
}
@media (max-width: 1500px) { .ba-stat-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px)  { .ba-stat-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .ba-stat-row { grid-template-columns: 1fr; } }

.ba-stat {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 16px 18px;
    box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.05);
    transition: transform .25s cubic-bezier(0.16,1,0.3,1), box-shadow .25s, border-color .25s;
    position: relative; overflow: hidden;
    display: flex; flex-direction: column;
}
.ba-stat::after {
    content: ''; position: absolute; top: -60px; right: -60px;
    width: 160px; height: 160px; border-radius: 50%;
    background: var(--ba-accent, transparent);
    opacity: .55; pointer-events: none; z-index: 0;
}
.ba-stat:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 36px -16px rgba(15,23,42,.18), 0 4px 8px -4px rgba(79,70,229,.10);
    border-color: rgba(99,102,241,.22);
}
.ba-stat-primary { --ba-accent: radial-gradient(circle at center, rgba(99,102,241,.22), transparent 70%); }
.ba-stat-success { --ba-accent: radial-gradient(circle at center, rgba(16,185,129,.22), transparent 70%); }
.ba-stat-info    { --ba-accent: radial-gradient(circle at center, rgba(6,182,212,.22),  transparent 70%); }
.ba-stat-warning { --ba-accent: radial-gradient(circle at center, rgba(245,158,11,.22), transparent 70%); }
.ba-stat-pink    { --ba-accent: radial-gradient(circle at center, rgba(236,72,153,.22), transparent 70%); }
.ba-stat-dark    { --ba-accent: radial-gradient(circle at center, rgba(71,85,105,.18),  transparent 70%); }

.ba-stat > * { position: relative; z-index: 1; }
.ba-stat-row-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 14px;
}
.ba-stat-ico {
    width: 44px; height: 44px; border-radius: 13px;
    display: grid; place-items: center; color: #fff; font-size: 19px;
}
.ba-stat-primary .ba-stat-ico { background: linear-gradient(135deg, #6366F1, #8B5CF6); box-shadow: 0 8px 16px -6px rgba(99,102,241,.45); }
.ba-stat-success .ba-stat-ico { background: linear-gradient(135deg, #10B981, #14B8A6); box-shadow: 0 8px 16px -6px rgba(16,185,129,.45); }
.ba-stat-info    .ba-stat-ico { background: linear-gradient(135deg, #06B6D4, #0EA5E9); box-shadow: 0 8px 16px -6px rgba(6,182,212,.45); }
.ba-stat-warning .ba-stat-ico { background: linear-gradient(135deg, #F59E0B, #F97316); box-shadow: 0 8px 16px -6px rgba(245,158,11,.45); }
.ba-stat-pink    .ba-stat-ico { background: linear-gradient(135deg, #EC4899, #F472B6); box-shadow: 0 8px 16px -6px rgba(236,72,153,.45); }
.ba-stat-dark    .ba-stat-ico { background: linear-gradient(135deg, #475569, #64748B); box-shadow: 0 8px 16px -6px rgba(71,85,105,.40); }
.ba-stat-label {
    font-size: 10.5px; font-weight: 700; color: var(--ink-500);
    letter-spacing: .08em; text-transform: uppercase;
    margin-bottom: 6px;
}
.ba-stat-value {
    font-size: 26px; font-weight: 700; color: var(--ink-900);
    line-height: 1.05; letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    margin-bottom: 10px;
}
.ba-stat-foot {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin-bottom: 4px;
}
.ba-stat-trend {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; font-size: 12px; font-weight: 700;
    border-radius: 999px;
    background: var(--ink-100); color: var(--ink-700);
    line-height: 1.4;
}
.ba-stat-trend i { font-size: 14px; }
.ba-stat-trend.up   { background: #ECFDF5; color: var(--success-700); }
.ba-stat-trend.down { background: #FEF2F2; color: var(--danger-700); }
.ba-stat-trend-context {
    font-size: 11px; color: var(--ink-500); font-weight: 500;
    font-variant-numeric: tabular-nums;
}
.ba-stat-spark {
    margin-top: 14px; height: 50px; position: relative;
}
.ba-stat-spark canvas { width: 100% !important; height: 100% !important; }
.chip.small { font-size: 10.5px; padding: 3px 8px; font-weight: 700; letter-spacing: .03em; }

/* ----- Performance Pulse (4 insight chips below stat row) ---------------- */
.ba-pulse-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
@media (max-width: 1100px) { .ba-pulse-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .ba-pulse-grid { grid-template-columns: 1fr; } }
.ba-pulse-item {
    display: flex; align-items: center; gap: 12px;
    background: #fff; border: 1px solid var(--line); border-radius: 14px;
    padding: 12px 14px;
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
    transition: transform .25s, box-shadow .25s, border-color .25s;
    position: relative; overflow: hidden;
}
.ba-pulse-item::after {
    content: ''; position: absolute; top: -40px; right: -40px;
    width: 120px; height: 120px; border-radius: 50%;
    background: var(--ba-pulse-accent, transparent); opacity: .5;
    pointer-events: none;
}
.ba-pulse-success { --ba-pulse-accent: radial-gradient(circle, rgba(16,185,129,.18), transparent 70%); }
.ba-pulse-danger  { --ba-pulse-accent: radial-gradient(circle, rgba(239,68,68,.18), transparent 70%); }
.ba-pulse-info    { --ba-pulse-accent: radial-gradient(circle, rgba(6,182,212,.18), transparent 70%); }
.ba-pulse-warning { --ba-pulse-accent: radial-gradient(circle, rgba(245,158,11,.18), transparent 70%); }
.ba-pulse-primary { --ba-pulse-accent: radial-gradient(circle, rgba(99,102,241,.18), transparent 70%); }
.ba-pulse-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -12px rgba(15,23,42,.15);
}
.ba-pulse-ico {
    width: 40px; height: 40px; border-radius: 12px;
    display: grid; place-items: center; flex-shrink: 0;
    font-size: 17px; color: #fff;
    position: relative; z-index: 1;
}
.ba-pulse-success .ba-pulse-ico { background: linear-gradient(135deg, #10B981, #14B8A6); box-shadow: 0 6px 14px -4px rgba(16,185,129,.45); }
.ba-pulse-danger  .ba-pulse-ico { background: linear-gradient(135deg, #EF4444, #F87171); box-shadow: 0 6px 14px -4px rgba(239,68,68,.45); }
.ba-pulse-info    .ba-pulse-ico { background: linear-gradient(135deg, #06B6D4, #0EA5E9); box-shadow: 0 6px 14px -4px rgba(6,182,212,.45); }
.ba-pulse-warning .ba-pulse-ico { background: linear-gradient(135deg, #F59E0B, #F97316); box-shadow: 0 6px 14px -4px rgba(245,158,11,.45); }
.ba-pulse-primary .ba-pulse-ico { background: linear-gradient(135deg, #6366F1, #8B5CF6); box-shadow: 0 6px 14px -4px rgba(99,102,241,.45); }
.ba-pulse-text { display: flex; flex-direction: column; min-width: 0; gap: 2px; position: relative; z-index: 1; }
.ba-pulse-label {
    font-size: 10.5px; color: var(--ink-500);
    font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.ba-pulse-value {
    font-size: 14.5px; color: var(--ink-900); font-weight: 700;
    line-height: 1.15; font-variant-numeric: tabular-nums;
}
.ba-pulse-detail {
    font-size: 11.5px; color: var(--ink-600);
    font-variant-numeric: tabular-nums;
}

/* ----- Comparison table -------------------------------------------------- */
.ba-compare-card .card-head { align-items: flex-start; }
.ba-yoy-chip i { font-size: 12px; }
.ba-compare-table th, .ba-compare-table td { padding: 11px 14px; }
.ba-compare-table tbody tr { transition: background-color .15s; }
.ba-compare-table tbody tr:hover { background: var(--ink-50); }
.ba-compare-table .ba-compare-visual { width: 220px; }
.ba-twin-bar {
    position: relative; height: 22px; width: 100%;
}
.ba-twin-bar-cur, .ba-twin-bar-prev {
    position: absolute; left: 0; height: 9px; border-radius: 4px;
    transition: width 800ms cubic-bezier(0.4, 0, 0.2, 1);
}
.ba-twin-bar-cur  { top: 1px;  background: linear-gradient(90deg, #818CF8, #4F46E5); box-shadow: 0 2px 6px -2px rgba(99,102,241,.4); }
.ba-twin-bar-prev { top: 13px; background: linear-gradient(90deg, #E2E8F0, #94A3B8); }

@media (max-width: 900px) {
    .ba-compare-table .ba-compare-visual { display: none; }
}

/* ----- Gauge (redesigned) -------------------------------------------- */
.ba-gauge-wrap {
    position: relative; height: 240px;
    display: grid; place-items: center;
}
.ba-gauge-wrap canvas { width: 100% !important; height: 100% !important; }
.ba-gauge-overlay {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    pointer-events: none;
    padding-top: 14px;
}
.ba-gauge-pct {
    font-size: 44px; font-weight: 800; color: var(--ink-900);
    line-height: 1; letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
    display: inline-flex; align-items: baseline;
}
.ba-gauge-pct-sign {
    font-size: 22px; font-weight: 700; color: var(--ink-500);
    margin-left: 2px;
}
.ba-gauge-sub {
    font-size: 11px; color: var(--ink-500);
    font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase;
    margin-top: 6px;
}
.ba-gauge-status {
    display: inline-flex; align-items: center; gap: 5px;
    margin-top: 10px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11.5px; font-weight: 700;
    background: var(--ink-100); color: var(--ink-700);
}
.ba-gauge-status i { font-size: 13px; }
.ba-gauge-tier-on   .ba-gauge-status { background: #ECFDF5; color: var(--success-700); }
.ba-gauge-tier-near .ba-gauge-status { background: #FFFBEB; color: var(--warning-700); }
.ba-gauge-tier-mid  .ba-gauge-status { background: #FFF7ED; color: #C2410C; }
.ba-gauge-tier-low  .ba-gauge-status { background: #FEF2F2; color: var(--danger-700); }
.ba-gauge-tier-on   .ba-gauge-pct    { color: var(--success-700); }
.ba-gauge-tier-low  .ba-gauge-pct    { color: var(--danger-700); }

.ba-gauge-legend {
    display: flex; flex-direction: column;
    margin-top: 12px;
    background: linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 100%);
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
}
.ba-gauge-legend-item {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--line);
    min-width: 0;
}
.ba-gauge-legend-item:last-child { border-bottom: 0; }
.ba-gauge-legend-label {
    font-size: 10.5px; font-weight: 700; color: var(--ink-500);
    letter-spacing: .06em; text-transform: uppercase;
    flex-shrink: 0; line-height: 1.2;
}
.ba-gauge-legend-value {
    font-size: 14px; font-weight: 700; color: var(--ink-900);
    font-variant-numeric: tabular-nums; text-align: right;
    line-height: 1.2;
}

/* ----- Export button (prominent emerald CTA) ------------------------- */
.btn-export {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 16px;
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    color: #fff !important;
    border: 0; border-radius: 10px;
    font-weight: 700; font-size: 13px;
    text-decoration: none;
    box-shadow: 0 6px 14px -4px rgba(16,185,129,.45);
    transition: transform .22s cubic-bezier(0.16,1,0.3,1), box-shadow .22s;
    white-space: nowrap;
}
.btn-export:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -6px rgba(16,185,129,.55);
    color: #fff !important;
    text-decoration: none;
}
.btn-export:active { transform: translateY(0); }
.btn-export i { font-size: 17px; }
.btn-export-sub {
    font-size: 10.5px; font-weight: 700;
    background: rgba(255,255,255,.22);
    padding: 2px 8px; border-radius: 999px;
    letter-spacing: .02em;
}

/* ==========================================================================
   /v2/kpi/weekly — detailed weekly KPI table
   ========================================================================== */

.kpi-weekly-legend {
    display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.legend-tag {
    display: inline-flex; align-items: center;
    padding: 3px 10px; border-radius: 999px;
    font-size: 11px; font-weight: 700; letter-spacing: .04em;
}
.legend-tag-instore  { background: #EEF2FF; color: var(--primary-700); }
.legend-tag-delivery { background: #FFFBEB; color: var(--warning-700); }
.legend-tag-register { background: #F1F5F9; color: var(--ink-700); }

.kpi-weekly-wrap { max-height: 78vh; overflow-x: auto; overflow-y: auto; }

.kpi-weekly-table {
    width: 100%;
    table-layout: auto;
    border-collapse: separate; border-spacing: 0;
    font-size: 12px;
}

.kpi-weekly-table thead th {
    position: sticky; top: 0; z-index: 2;
    background: linear-gradient(180deg, #F8FAFC 0%, #F1F5F9 100%);
    color: var(--ink-700);
    text-align: right;
    font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase;
    padding: 9px 8px;
    white-space: nowrap;
    border-bottom: 1px solid var(--ink-200);
}
.kpi-weekly-table thead th.col-branch { text-align: left; padding-left: 14px; }
.kpi-weekly-table thead th.grp-instore  { background: linear-gradient(180deg, #EEF2FF 0%, #E0E7FF 100%); color: var(--primary-700); }
.kpi-weekly-table thead th.grp-delivery { background: linear-gradient(180deg, #FFFBEB 0%, #FEF3C7 100%); color: var(--warning-700); }
.kpi-weekly-table thead th.grp-register { background: linear-gradient(180deg, #F1F5F9 0%, #E2E8F0 100%); color: var(--ink-700); }

.kpi-weekly-table tbody td,
.kpi-weekly-table tfoot td {
    padding: 8px 8px;
    vertical-align: middle;
    border-bottom: 1px solid var(--ink-100);
    text-align: right;
    color: var(--ink-800);
    line-height: 1.2;
    white-space: nowrap;
}
.kpi-weekly-table tbody td.col-branch { text-align: left; padding-left: 14px; }
.kpi-weekly-table tbody tr:last-child td { border-bottom: 0; }
.kpi-weekly-table tbody tr { transition: background-color .12s; }
.kpi-weekly-table tbody tr:hover { background: var(--ink-50); }

.kpi-weekly-table .strong  { font-weight: 700; }
.kpi-weekly-table .primary { color: var(--ink-900); }
.kpi-weekly-table .muted   { color: var(--ink-500); }

/* Branch column — code chip on top, name below */
.branch-cell {
    display: flex; flex-direction: column; gap: 3px; align-items: flex-start; min-width: 0;
}
.branch-cell-code {
    display: inline-flex; align-self: flex-start;
    background: var(--primary-50); color: var(--primary-700);
    padding: 2px 9px; border-radius: 999px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
    line-height: 1.4;
}
.branch-cell-code.total-tag {
    background: linear-gradient(135deg, #FEF3C7, #FDE68A);
    color: var(--warning-700);
    gap: 5px;
}
.branch-cell-code.total-tag i { font-size: 11px; }
.branch-cell-name {
    font-size: 12px; font-weight: 600; color: var(--ink-800);
    line-height: 1.2;
}

/* Stacked cells (val + sub) */
.cell-stack {
    display: flex; flex-direction: column; gap: 3px; align-items: flex-end; min-width: 0;
}
.cell-stack-val {
    display: block;
    font-size: 12px; font-weight: 700; color: var(--ink-800);
    font-variant-numeric: tabular-nums; line-height: 1.2;
}
.cell-stack-sub {
    display: block;
    font-size: 10.5px; font-weight: 700; color: var(--ink-500);
    font-variant-numeric: tabular-nums; line-height: 1.2;
}

/* Color-group cells (subtle tinted backgrounds) */
.kpi-weekly-table .grp-instore  { background: rgba(99, 102, 241, .04); }
.kpi-weekly-table .grp-delivery { background: rgba(245, 158, 11, .06); }
.kpi-weekly-table .grp-register { background: rgba(100, 116, 139, .04); }
.kpi-weekly-table tbody tr:hover .grp-instore  { background: rgba(99, 102, 241, .07); }
.kpi-weekly-table tbody tr:hover .grp-delivery { background: rgba(245, 158, 11, .10); }
.kpi-weekly-table tbody tr:hover .grp-register { background: rgba(100, 116, 139, .07); }

.kpi-weekly-table .grp-instore  .cell-stack-sub { color: var(--primary-600); }
.kpi-weekly-table .grp-delivery .cell-stack-sub { color: var(--warning-700); }
.kpi-weekly-table .grp-register .cell-stack-sub { color: var(--ink-600); }

/* Delta pill (+/-) */
.delta-pill {
    display: inline-flex; align-items: center; gap: 2px; align-self: flex-end;
    padding: 2px 8px; border-radius: 999px;
    font-size: 10.5px; font-weight: 700;
    background: var(--ink-100); color: var(--ink-700);
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
}
.delta-pill.is-up   { background: #ECFDF5; color: var(--success-700); }
.delta-pill.is-down { background: #FEF2F2; color: var(--danger-700); }

/* Monthly budget cell — value, bar, % stacked vertically */
.cell-monthly {
    display: flex; flex-direction: column; gap: 4px;
    align-items: stretch; min-width: 110px;
}
.cell-monthly-val {
    font-size: 12px; font-weight: 700; color: var(--ink-800);
    font-variant-numeric: tabular-nums; text-align: right; line-height: 1.2;
}
.cell-monthly-bar {
    height: 5px; background: var(--ink-100);
    border-radius: 999px; overflow: hidden;
}
.cell-monthly-fill {
    height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, #10B981, #34D399);
    transition: width 700ms cubic-bezier(0.4, 0, 0.2, 1);
}
.cell-monthly-fill.mid    { background: linear-gradient(90deg, #06B6D4, #38BDF8); }
.cell-monthly-fill.warn   { background: linear-gradient(90deg, #F59E0B, #FBBF24); }
.cell-monthly-fill.danger { background: linear-gradient(90deg, #EF4444, #F87171); }
.cell-monthly-pct {
    font-size: 10.5px; font-weight: 700;
    text-align: right; line-height: 1.2;
    font-variant-numeric: tabular-nums;
    color: var(--ink-600);
}

/* Footer TOTAL row */
.kpi-weekly-table tfoot td {
    position: sticky; bottom: 0;
    background: linear-gradient(180deg, #FFFBEB 0%, #FEF3C7 100%);
    border-top: 2px solid var(--warning-500);
    color: var(--ink-900);
    font-weight: 700;
}
.kpi-weekly-table tfoot td.grp-instore,
.kpi-weekly-table tfoot td.grp-delivery,
.kpi-weekly-table tfoot td.grp-register { background: linear-gradient(180deg, #FEF3C7 0%, #FDE68A 100%); }
.kpi-weekly-table tfoot .cell-stack-sub,
.kpi-weekly-table tfoot .delta-pill   { color: var(--ink-900); }
.kpi-weekly-table tfoot .cell-monthly-pct { color: var(--warning-700); }

/* ==========================================================================
   /v2/kpi/analytics — KPI Analytics (Monthly Data Analytics)
   ========================================================================== */
.ka-header {
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    padding: 22px 24px;
    background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%);
    border: 1px solid var(--line); border-radius: 18px;
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
    position: relative; overflow: hidden;
}
.ka-header::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(700px circle at -10% -40%, rgba(124,58,237,.10), transparent 50%),
                radial-gradient(500px circle at 110% 110%, rgba(99,102,241,.10), transparent 50%);
}
.ka-header-left {
    display: flex; align-items: center; gap: 18px;
    position: relative; z-index: 1;
}
.ka-header-icon {
    width: 64px; height: 64px; border-radius: 18px;
    display: grid; place-items: center;
    background: linear-gradient(135deg, #7C3AED, #6366F1);
    color: #fff; font-size: 28px;
    box-shadow: 0 14px 28px -10px rgba(124,58,237,.5);
    flex-shrink: 0;
}
.ka-header-title {
    margin: 4px 0 6px;
    font-size: 22px; font-weight: 700; color: var(--ink-900);
    letter-spacing: -.02em;
}
.ka-header-sub {
    margin: 0; font-size: 13px; color: var(--ink-500);
    line-height: 1.4;
}
.ka-header-actions {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    position: relative; z-index: 1;
}
.ka-active-filters {
    display: flex; flex-wrap: wrap; gap: 6px;
}
.ka-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 10px; border-radius: 999px;
    background: rgba(255,255,255,.7);
    border: 1px solid var(--line);
    color: var(--ink-700); font-size: 11.5px; font-weight: 600;
    backdrop-filter: blur(4px);
}
.ka-chip i { font-size: 12px; color: var(--ink-500); }
.ka-chip-cmp { background: linear-gradient(135deg, #F5F3FF, #EDE9FE); color: var(--primary-700); border-color: #ddd6fe; }
.ka-chip-cmp i { color: var(--primary-600); }
.ka-chip-sp  { background: linear-gradient(135deg, #FDF4FF, #FAE8FF); color: #86198F; border-color: #f5d0fe; }
.ka-chip-sp i { color: #A21CAF; }

.filter-help {
    margin: 4px 4px 0; display: flex; align-items: flex-start; gap: 6px;
    padding: 8px 10px; background: var(--info-50);
    border: 1px solid #bae6fd; border-radius: 8px;
    line-height: 1.4; color: var(--info-700);
}
.filter-help i { font-size: 12px; flex-shrink: 0; margin-top: 1px; }
.filter-help strong { color: var(--ink-900); }
.ka-filters-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px;
    background: linear-gradient(135deg, #6366F1, #4F46E5);
    color: #fff !important; border: 0; border-radius: 12px;
    font-weight: 700; font-size: 13.5px;
    box-shadow: 0 10px 22px -8px rgba(99,102,241,.55);
    cursor: pointer; text-decoration: none;
    transition: transform .22s, box-shadow .22s;
}
.ka-filters-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -8px rgba(99,102,241,.65); }
.ka-filters-btn i { font-size: 15px; }

@media (max-width: 1100px) {
    .ka-header { flex-direction: column; align-items: stretch; gap: 16px; }
    .ka-header-actions { justify-content: space-between; }
}

/* 5-up stat row */
.ba-stat-row-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1500px) { .ba-stat-row-5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px)  { .ba-stat-row-5 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px)  { .ba-stat-row-5 { grid-template-columns: 1fr; } }

/* Quarter breakdown tiles (4-up) */
.ka-quarters {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
@media (max-width: 900px) { .ka-quarters { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .ka-quarters { grid-template-columns: 1fr; } }
.ka-quarter {
    background: #fff; border: 1px solid var(--line); border-radius: 14px;
    padding: 14px 16px;
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
    transition: transform .22s, box-shadow .22s, border-color .22s;
    position: relative; overflow: hidden;
}
.ka-quarter::before {
    content: ''; position: absolute; top: -30px; right: -30px;
    width: 90px; height: 90px; border-radius: 50%;
    background: radial-gradient(circle, rgba(124,58,237,.15), transparent 70%);
    pointer-events: none;
}
.ka-quarter:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -12px rgba(15,23,42,.15);
    border-color: #ddd6fe;
}
.ka-quarter.is-empty { opacity: .55; }
.ka-quarter.is-empty::before { display: none; }
.ka-quarter-head {
    display: flex; align-items: baseline; gap: 8px;
    margin-bottom: 10px;
    position: relative; z-index: 1;
}
.ka-quarter-q {
    display: inline-grid; place-items: center;
    width: 28px; height: 28px; border-radius: 8px;
    background: linear-gradient(135deg, #7C3AED, #6366F1);
    color: #fff; font-size: 12px; font-weight: 800;
    box-shadow: 0 6px 14px -4px rgba(124,58,237,.45);
}
.ka-quarter.is-empty .ka-quarter-q {
    background: var(--ink-200); color: var(--ink-500);
    box-shadow: none;
}
.ka-quarter-months {
    font-size: 11px; font-weight: 700; color: var(--ink-500);
    letter-spacing: .04em; text-transform: uppercase;
}
.ka-quarter-val {
    font-size: 20px; font-weight: 700; color: var(--ink-900);
    line-height: 1.1; letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    margin-bottom: 8px;
    position: relative; z-index: 1;
}
.ka-quarter-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    font-size: 11px;
    position: relative; z-index: 1;
}

/* Channel performance cards (4-up by default; 3-up when .cols-3) */
.ka-channels {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.ka-channels.cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1100px) {
    .ka-channels { grid-template-columns: repeat(2, 1fr); }
    .ka-channels.cols-3 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
    .ka-channels, .ka-channels.cols-3 { grid-template-columns: 1fr; }
}
.ka-channel-card {
    background: #fff; border: 1px solid var(--line); border-radius: 14px;
    padding: 14px 16px;
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
    transition: transform .22s, box-shadow .22s, border-color .22s;
    position: relative; overflow: hidden;
}
.ka-channel-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--accent, var(--primary-500));
}
.ka-channel-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -12px rgba(15,23,42,.15);
}
.ka-channel-head {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 10px;
}
.ka-channel-dot {
    width: 12px; height: 12px; border-radius: 4px;
    flex-shrink: 0;
}
.ka-channel-name { font-size: 13px; font-weight: 700; color: var(--ink-900); flex: 1; }
.ka-channel-share {
    background: var(--ink-100); color: var(--ink-700);
    padding: 2px 8px; border-radius: 999px;
    font-size: 11px; font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.ka-channel-val {
    font-size: 18px; font-weight: 700; color: var(--ink-900);
    letter-spacing: -.02em; line-height: 1.1;
    font-variant-numeric: tabular-nums;
    margin-bottom: 8px;
}
.ka-channel-bar {
    height: 6px;
    background: var(--ink-100);
    border-radius: 999px; overflow: hidden;
    margin-bottom: 10px;
}
.ka-channel-bar-fill {
    height: 100%; border-radius: 999px;
    animation: hubProgressFill 900ms cubic-bezier(0.4, 0, 0.2, 1) backwards;
}
.ka-channel-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    font-size: 11px;
}
.ka-channel-foot i { margin-right: 3px; }

/* Filter date presets */
.filter-presets {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-top: 4px;
}
.filter-presets button {
    padding: 5px 11px;
    background: var(--ink-50);
    border: 1px solid var(--ink-200);
    color: var(--ink-700);
    border-radius: 999px;
    font-size: 11px; font-weight: 700;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.filter-presets button:hover {
    background: var(--primary-50);
    color: var(--primary-700);
    border-color: var(--primary-200);
}
.filter-presets button.is-active {
    background: var(--primary-600);
    color: #fff;
    border-color: var(--primary-600);
    box-shadow: 0 4px 10px -3px rgba(99,102,241,.45);
}

/* Heatmap (branch × month) */
.ka-heatmap-legend {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; color: var(--ink-500);
}
.ka-heatmap-legend strong { color: var(--ink-700); font-weight: 700; margin: 0 4px; }
.ka-heatmap-swatch {
    width: 18px; height: 12px; border-radius: 3px; display: inline-block;
}
.ka-heatmap-scroll { overflow-x: auto; padding: 0 0 8px; }
.ka-heatmap {
    width: 100%;
    border-collapse: separate; border-spacing: 4px;
    font-size: 11.5px;
    min-width: 720px;
}
.ka-heatmap th {
    padding: 8px 6px;
    text-align: center;
    background: linear-gradient(180deg, #F8FAFC 0%, #F1F5F9 100%);
    color: var(--ink-700);
    font-size: 10.5px; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase;
    border-radius: 6px;
    white-space: nowrap;
}
.ka-heatmap th.ka-heatmap-corner { text-align: left; padding-left: 14px; }
.ka-heatmap th.ka-heatmap-total {
    background: linear-gradient(180deg, #FFFBEB 0%, #FEF3C7 100%);
    color: var(--warning-700);
}
.ka-heatmap-branch {
    padding: 8px 12px;
    text-align: left;
    background: #FFFFFF;
    border: 1px solid var(--line);
    border-radius: 8px;
    min-width: 160px;
    white-space: nowrap;
}
.ka-heatmap-code {
    display: inline-block;
    background: var(--primary-50); color: var(--primary-700);
    padding: 2px 8px; border-radius: 999px;
    font-size: 10.5px; font-weight: 700;
    margin-right: 8px;
}
.ka-heatmap-name { font-size: 12px; color: var(--ink-800); font-weight: 600; }
.ka-heatmap-cell {
    text-align: center;
    padding: 10px 4px;
    border-radius: 6px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    transition: transform .15s, box-shadow .15s;
    cursor: default;
}
.ka-heatmap-cell:hover { transform: scale(1.06); z-index: 2; box-shadow: 0 6px 12px -4px rgba(15,23,42,.18); }
.ka-heatmap-val { font-size: 11.5px; }
.ka-heatmap-cell.none   { background: #F1F5F9; color: var(--ink-300); }
.ka-heatmap-cell.tier-1 { background: #FEE2E2; color: #991B1B; }
.ka-heatmap-cell.tier-2 { background: #FED7AA; color: #9A3412; }
.ka-heatmap-cell.tier-3 { background: #FEF3C7; color: #92400E; }
.ka-heatmap-cell.tier-4 { background: #D1FAE5; color: #065F46; }
.ka-heatmap-cell.tier-5 { background: #6EE7B7; color: #064E3B; }
.ka-heatmap-total-cell {
    text-align: center;
    padding: 10px 6px;
    border-radius: 8px;
    border: 1px solid var(--line);
    font-weight: 700;
}
.ka-heatmap-total-cell.none   { background: #F1F5F9; color: var(--ink-400); }
.ka-heatmap-total-cell.tier-1 { background: #FECACA; color: #7F1D1D; }
.ka-heatmap-total-cell.tier-2 { background: #FDBA74; color: #7C2D12; }
.ka-heatmap-total-cell.tier-3 { background: #FDE68A; color: #78350F; }
.ka-heatmap-total-cell.tier-4 { background: #A7F3D0; color: #064E3B; }
.ka-heatmap-total-cell.tier-5 { background: #34D399; color: #064E3B; }

/* Ranking list */
.ka-rank-row { padding: 10px 0; }
.ka-rank-label {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--ink-500);
    margin-bottom: 8px;
}
.ka-rank-top .ka-rank-label { color: var(--warning-700); }
.ka-rank-bottom .ka-rank-label { color: var(--danger-700); }
.ka-rank-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ka-rank-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px;
    background: linear-gradient(135deg, rgba(99,102,241,.04), transparent);
    border: 1px solid var(--line);
    border-radius: 12px;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.ka-rank-item:hover {
    transform: translateX(4px);
    border-color: var(--primary-200);
    box-shadow: 0 8px 16px -8px rgba(15,23,42,.12);
}
.ka-rank-num {
    width: 30px; height: 30px; border-radius: 9px;
    display: grid; place-items: center;
    background: linear-gradient(135deg, var(--warning-500), #F97316);
    color: #fff; font-weight: 800; font-size: 13px;
    flex-shrink: 0;
    box-shadow: 0 6px 14px -4px rgba(245,158,11,.45);
}
.ka-rank-num.is-bottom { background: linear-gradient(135deg, var(--danger-500), #F87171); box-shadow: 0 6px 14px -4px rgba(239,68,68,.45); }
.ka-rank-code {
    background: var(--primary-50); color: var(--primary-700);
    padding: 3px 9px; border-radius: 999px;
    font-size: 11px; font-weight: 700;
}
.ka-rank-name { flex: 1; font-size: 13px; color: var(--ink-800); font-weight: 600; }
.ka-rank-val { font-size: 13px; color: var(--ink-900); font-weight: 700; font-variant-numeric: tabular-nums; }
.ka-rank-divider { border: 0; border-top: 1px dashed var(--line); margin: 6px 0; }

/* Slide-in filter drawer */
.slide-drawer-backdrop {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, .45);
    backdrop-filter: blur(3px);
    opacity: 0; pointer-events: none;
    transition: opacity .3s ease;
    z-index: 199;
}
.slide-drawer-backdrop.is-open { opacity: 1; pointer-events: auto; }

.slide-drawer {
    position: fixed; top: 0; right: 0;
    width: 480px; max-width: 92vw; height: 100vh;
    background: #fff;
    box-shadow: -20px 0 40px -10px rgba(15,23,42,.22);
    transform: translateX(105%);
    transition: transform .35s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 200;
    display: flex; flex-direction: column;
}
.slide-drawer.is-open { transform: translateX(0); }

.slide-drawer-head {
    display: flex; align-items: start; justify-content: space-between; gap: 14px;
    padding: 22px 24px 18px;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%);
}
.slide-drawer-head h2 { margin: 4px 0 4px; font-size: 18px; color: var(--ink-900); }
.slide-drawer-head p { margin: 0; }
.slide-drawer-close {
    background: var(--ink-100); border: 0; cursor: pointer;
    width: 36px; height: 36px; border-radius: 10px;
    color: var(--ink-600); display: grid; place-items: center;
    font-size: 15px;
    transition: background .15s, color .15s;
    flex-shrink: 0;
}
.slide-drawer-close:hover { background: var(--ink-200); color: var(--ink-900); }

.slide-drawer-body {
    flex: 1; overflow-y: auto;
    padding: 18px 24px 100px;
    display: flex; flex-direction: column; gap: 20px;
}
.slide-drawer-body::-webkit-scrollbar { width: 6px; }
.slide-drawer-body::-webkit-scrollbar-thumb { background: var(--ink-200); border-radius: 3px; }

.filter-group {
    display: flex; flex-direction: column; gap: 10px;
}
.filter-group-head {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    margin-bottom: 2px;
}
.filter-group h4 {
    font-size: 12px; color: var(--ink-700);
    font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    margin: 0;
}
.filter-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
@media (max-width: 500px) { .filter-row { grid-template-columns: 1fr; } }

.filter-search {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--ink-300);
    border-radius: 10px;
    font: inherit; font-size: 13px;
    background: var(--ink-50);
    transition: border-color .15s, background .15s;
}
.filter-search:focus {
    outline: none;
    border-color: var(--primary-500);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(99,102,241,.16);
}

.filter-branch-list, .filter-channel-list {
    max-height: 260px;
    overflow-y: auto;
    padding: 6px;
    background: var(--ink-50);
    border: 1px solid var(--line);
    border-radius: 10px;
    display: flex; flex-direction: column; gap: 4px;
}
.filter-branch-list label, .filter-channel-list label {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px;
    background: transparent;
    border-radius: 8px;
    font-size: 12.5px; color: var(--ink-700);
    cursor: pointer; user-select: none;
    transition: background .12s;
    border: 1px solid transparent;
}
.filter-branch-list label:hover, .filter-channel-list label:hover { background: #fff; }
.filter-branch-list label:has(input:checked),
.filter-channel-list label:has(input:checked) {
    background: var(--primary-50);
    border-color: var(--primary-200);
}
.filter-branch-list .ms-code,
.filter-channel-list .ms-code {
    background: var(--primary-50); color: var(--primary-700);
    padding: 2px 8px; border-radius: 999px;
    font-size: 10.5px; font-weight: 700;
    min-width: 48px; text-align: center;
}
.filter-branch-list label:has(input:checked) .ms-code {
    background: var(--primary-600); color: #fff;
}
.filter-channel-row { font-weight: 600 !important; }
.filter-channel-dot {
    width: 12px; height: 12px; border-radius: 4px;
    display: inline-block; flex-shrink: 0;
}

.slide-drawer-foot {
    position: absolute; bottom: 0; left: 0; right: 0;
    display: flex; justify-content: space-between; gap: 10px;
    padding: 16px 24px;
    background: #fff;
    border-top: 1px solid var(--line);
    box-shadow: 0 -8px 16px -8px rgba(15,23,42,.06);
}
.slide-drawer-foot .btn { flex: 1; justify-content: center; }

/* ==========================================================================
   /v2/kpi/upload — KPI XLSX upload page
   ========================================================================== */
.upload-hero {
    display: grid; grid-template-columns: 1.2fr 2fr; gap: 24px;
    align-items: center;
    padding: 22px 24px;
    background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
    position: relative; overflow: hidden;
}
.upload-hero::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(700px circle at -10% -30%, rgba(99,102,241,.10), transparent 50%),
                radial-gradient(500px circle at 110% 110%, rgba(16,185,129,.10), transparent 50%);
}
.upload-hero-left {
    display: flex; align-items: center; gap: 18px;
    position: relative; z-index: 1;
}
.upload-hero-icon {
    width: 64px; height: 64px; border-radius: 18px;
    display: grid; place-items: center;
    background: linear-gradient(135deg, #6366F1, #8B5CF6);
    color: #fff; font-size: 28px;
    box-shadow: 0 14px 28px -10px rgba(99,102,241,.5);
    flex-shrink: 0;
}
.upload-hero-title {
    margin: 4px 0 6px;
    font-size: 22px; font-weight: 700;
    color: var(--ink-900); letter-spacing: -.02em;
}
.upload-hero-sub {
    margin: 0;
    font-size: 13px; color: var(--ink-500);
    line-height: 1.4;
    max-width: 480px;
}
.upload-hero-stats {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
    position: relative; z-index: 1;
}
.upload-stat {
    display: flex; align-items: center; gap: 11px;
    padding: 10px 12px;
    background: rgba(255,255,255,.7);
    border: 1px solid var(--line);
    border-radius: 12px;
    backdrop-filter: blur(4px);
}
.upload-stat-icon {
    width: 38px; height: 38px; border-radius: 11px;
    display: grid; place-items: center;
    color: #fff; font-size: 17px; flex-shrink: 0;
    box-shadow: 0 6px 14px -4px rgba(99,102,241,.35);
}
.upload-stat-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.upload-stat-val {
    font-size: 16px; font-weight: 700; color: var(--ink-900);
    font-variant-numeric: tabular-nums; line-height: 1.1;
}
.upload-stat-label { font-size: 10.5px; color: var(--ink-500); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
@media (max-width: 1200px) {
    .upload-hero { grid-template-columns: 1fr; }
    .upload-hero-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .upload-hero-stats { grid-template-columns: 1fr; }
}

/* Year coverage strip */
.upload-coverage-card .card-head { align-items: center; }
.upload-coverage-progress {
    display: flex; align-items: center; gap: 12px;
    flex-shrink: 0;
}
.upload-coverage-bar-track {
    width: 160px; height: 8px;
    background: var(--ink-100); border-radius: 999px; overflow: hidden;
}
.upload-coverage-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #6366F1, #8B5CF6);
    border-radius: 999px;
    animation: hubProgressFill 1000ms cubic-bezier(0.4, 0, 0.2, 1) backwards;
}
.upload-coverage-progress strong { color: var(--ink-900); font-variant-numeric: tabular-nums; }

.year-coverage {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(28px, 1fr));
    gap: 4px;
}
.year-coverage-cell {
    aspect-ratio: 1 / 1;
    background: var(--ink-100);
    border: 1px solid var(--ink-200);
    border-radius: 6px;
    display: grid; place-items: center;
    font-size: 10px; font-weight: 700;
    color: var(--ink-400);
    text-decoration: none;
    transition: transform .15s, background .15s, border-color .15s, box-shadow .15s;
}
.year-coverage-cell:hover {
    transform: scale(1.18);
    z-index: 2;
    box-shadow: 0 6px 14px -4px rgba(15,23,42,.18);
    text-decoration: none;
}
.year-coverage-cell.is-uploaded {
    background: linear-gradient(135deg, #6366F1, #8B5CF6);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 2px 6px -2px rgba(99,102,241,.45);
}
.year-coverage-cell.is-uploaded:hover {
    color: #fff;
    box-shadow: 0 8px 16px -4px rgba(99,102,241,.55);
}

/* 2-col upload grid (form + history). Form is wider on desktop */
.upload-grid { grid-template-columns: 1.1fr 1fr; gap: 18px; }
@media (max-width: 1100px) { .upload-grid { grid-template-columns: 1fr; } }

/* The form card */
.upload-form-card .card-body { padding: 18px 22px 22px; }
.upload-form { display: flex; flex-direction: column; gap: 14px; }
.upload-form-row {
    display: grid; grid-template-columns: 1fr 1.5fr; gap: 12px;
}
@media (max-width: 560px) { .upload-form-row { grid-template-columns: 1fr; } }

/* Modern drop zone */
.upload-zone-v2 {
    position: relative; overflow: hidden;
    display: block;
    border: 2px dashed var(--ink-300);
    border-radius: 18px;
    padding: 28px 18px;
    text-align: center;
    background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%);
    transition: border-color .25s, background .25s, transform .25s;
    cursor: pointer;
}
.upload-zone-v2 input[type="file"] { display: none; }
.upload-zone-inner { position: relative; z-index: 2; }
.upload-zone-shimmer {
    position: absolute; inset: 0;
    background: radial-gradient(circle at 30% 30%, rgba(99,102,241,.08), transparent 50%),
                radial-gradient(circle at 80% 80%, rgba(16,185,129,.08), transparent 50%);
    opacity: .6;
    pointer-events: none;
}
.upload-zone-v2:hover,
.upload-zone-v2.is-drag {
    border-color: var(--primary-500);
    background: linear-gradient(135deg, #EEF2FF 0%, #E0E7FF 100%);
    transform: translateY(-2px);
}
.upload-zone-v2:hover .upload-zone-shimmer,
.upload-zone-v2.is-drag .upload-zone-shimmer { opacity: 1; }
.upload-zone-icon {
    display: inline-grid; place-items: center;
    width: 56px; height: 56px;
    background: linear-gradient(135deg, #10B981, #059669);
    color: #fff; font-size: 26px;
    border-radius: 16px;
    margin-bottom: 12px;
    box-shadow: 0 10px 20px -6px rgba(16,185,129,.45);
}
.upload-zone-v2 strong {
    display: block;
    font-size: 15px;
    color: var(--ink-900);
    margin-bottom: 4px;
}
.upload-zone-v2 p {
    margin: 0;
    font-size: 12px;
    color: var(--ink-500);
}
.upload-zone-v2 .file-name {
    margin-top: 8px;
    color: var(--primary-700);
    font-weight: 700;
    font-size: 12.5px;
}

/* Replace-existing toggle (custom switch) */
.upload-replace-row { padding: 4px 0; }
.upload-toggle {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    background: var(--ink-50);
    border: 1px solid var(--line);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color .2s, background .2s;
}
.upload-toggle:hover { background: #fff; border-color: var(--ink-300); }
.upload-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.upload-toggle-slider {
    width: 38px; height: 22px;
    background: var(--ink-300);
    border-radius: 999px;
    position: relative; flex-shrink: 0;
    transition: background .2s;
}
.upload-toggle-slider::after {
    content: ''; position: absolute;
    top: 3px; left: 3px;
    width: 16px; height: 16px; border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 4px rgba(15,23,42,.18);
    transition: transform .2s;
}
.upload-toggle input:checked + .upload-toggle-slider {
    background: linear-gradient(135deg, var(--warning-500), #F97316);
}
.upload-toggle input:checked + .upload-toggle-slider::after {
    transform: translateX(16px);
}
.upload-toggle-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.upload-toggle-text strong { font-size: 13px; color: var(--ink-900); font-weight: 700; }
.upload-toggle-text small { font-size: 11.5px; color: var(--ink-500); line-height: 1.3; }

/* Submit button */
.upload-submit {
    margin-top: 4px;
    padding: 12px 16px;
    font-size: 14px;
    background: linear-gradient(135deg, #6366F1, #4F46E5);
    box-shadow: 0 10px 24px -8px rgba(99,102,241,.55);
}
.upload-submit:hover {
    background: linear-gradient(135deg, #4F46E5, #4338CA);
    box-shadow: 0 14px 28px -8px rgba(99,102,241,.65);
}
.upload-submit i { font-size: 16px; }
.upload-spinner {
    width: 14px; height: 14px; border-radius: 50%;
    border: 2px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    display: inline-block;
    animation: spin .9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.upload-form-help {
    display: flex; gap: 6px;
    align-items: flex-start;
    margin: 6px 0 0;
    padding: 9px 12px;
    background: var(--info-50);
    border-radius: 10px;
    border: 1px solid #bae6fd;
    line-height: 1.4;
    color: var(--info-700);
}
.upload-form-help i { font-size: 13px; flex-shrink: 0; margin-top: 1px; }
.upload-form-help code {
    background: rgba(255,255,255,.5);
    padding: 1px 5px; border-radius: 4px;
    font-size: 10.5px; color: var(--ink-700);
}

/* History card-style list */
.upload-history-card .card-body.card-flush { padding-top: 4px; }
.upload-history-list {
    list-style: none; margin: 0; padding: 0;
    max-height: 540px; overflow-y: auto;
}
.upload-history-list::-webkit-scrollbar { width: 6px; }
.upload-history-list::-webkit-scrollbar-thumb { background: var(--ink-200); border-radius: 3px; }
.upload-history-item {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--line);
    transition: background .15s;
}
.upload-history-item:last-child { border-bottom: 0; }
.upload-history-item:hover { background: var(--ink-50); }
.upload-history-week-tag {
    width: 52px; height: 52px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--primary-50), #E0E7FF);
    color: var(--primary-700);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    flex-shrink: 0;
    line-height: 1;
}
.upload-history-week-num {
    font-size: 20px; font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}
.upload-history-week-yr {
    font-size: 9px; font-weight: 700;
    color: var(--primary-600);
    letter-spacing: .04em;
    margin-top: 2px;
}
.upload-history-meta { flex: 1; min-width: 0; }
.upload-history-title {
    display: block;
    font-size: 13.5px; color: var(--ink-900); font-weight: 700;
    line-height: 1.2;
}
.upload-history-detail {
    display: flex; gap: 12px; flex-wrap: wrap;
    font-size: 11.5px; color: var(--ink-500);
    margin-top: 3px;
    line-height: 1.3;
}
.upload-history-detail i { font-size: 11px; margin-right: 3px; }
.upload-history-rows { color: var(--success-700); font-weight: 700; font-variant-numeric: tabular-nums; }
.upload-history-delete {
    background: transparent;
    color: var(--ink-400);
    border: 1px solid var(--ink-200);
    width: 34px; height: 34px;
    border-radius: 10px;
    cursor: pointer;
    display: grid; place-items: center;
    transition: background .15s, color .15s, border-color .15s, transform .15s;
    flex-shrink: 0;
}
.upload-history-delete:hover {
    background: #FEF2F2;
    color: var(--danger-700);
    border-color: #fecaca;
    transform: scale(1.04);
}

/* ==========================================================================
   PRINT — Landscape A4 weekly KPI table (clean, no breaking)
   ========================================================================== */
@media print {
    /* Force landscape A4 with tight margins so the 15-column table fits */
    @page {
        size: A4 landscape;
        margin: 8mm 8mm 10mm 8mm;
    }

    /* Always honour our colour washes when printing */
    *, *::before, *::after {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
    }

    /* Page chrome — hide everything that isn't the report */
    html, body { background: #fff !important; }
    .side, .side-scrim, .top, .toast-host,
    .mobile-tabbar, .app-palette, .hub-cta,
    .hub-filterbar, .hub-status, .ms-pop,
    .v2-modal, .btn, .btn-export, .seg-toggle,
    .hub-section.hub-tiles, .hub-section.ba-stat-row,
    .hub-section.ba-pulse-grid, .hub-section.hub-three-row,
    .hub-section.hub-two-row, .hub-section.hub-spt-row,
    .hub-section.ba-stacked-row, .hub-section.hub-cta {
        display: none !important;
    }

    .main { margin-left: 0 !important; }
    .content { padding: 0 !important; }
    .hub-section { animation: none !important; margin-bottom: 6mm; }
    .card {
        margin: 0 !important;
        box-shadow: none !important;
        border: 1px solid #cbd5e1 !important;
        page-break-inside: auto;
    }
    .card-head {
        padding: 6mm 6mm 4mm 6mm;
        border-bottom: 1px solid #cbd5e1 !important;
    }
    .card-head .card-title { font-size: 14pt; color: #0f172a; }
    .card-head .card-sub   { font-size: 9pt;  color: #475569; }
    .card-eyebrow { font-size: 8pt; color: #4338CA; }
    .kpi-weekly-legend { font-size: 8pt; }
    .legend-tag { font-size: 7.5pt; padding: 2px 8px; }
    .card-body { padding: 0 !important; }

    /* The table — fit 100% width, no scroll, repeat header per page */
    .kpi-weekly-wrap {
        max-height: none !important;
        overflow: visible !important;
    }
    .kpi-weekly-table {
        width: 100% !important;
        font-size: 7.5pt;
        table-layout: auto;
    }
    .kpi-weekly-table thead {
        display: table-header-group !important;  /* repeats on each printed page */
    }
    .kpi-weekly-table tfoot {
        display: table-footer-group !important;  /* sits at the actual bottom */
    }
    .kpi-weekly-table thead th,
    .kpi-weekly-table tbody td,
    .kpi-weekly-table tfoot td {
        padding: 4px 5px !important;
        line-height: 1.15 !important;
        border-bottom: 1px solid #e2e8f0 !important;
    }
    /* Stop sticky positioning — breaks print pagination */
    .kpi-weekly-table thead th,
    .kpi-weekly-table tfoot td {
        position: static !important;
    }
    .kpi-weekly-table thead th {
        font-size: 7pt !important;
        background: #f1f5f9 !important;
        color: #1e293b !important;
    }
    .kpi-weekly-table thead th.grp-instore  { background: #EEF2FF !important; color: #4338CA !important; }
    .kpi-weekly-table thead th.grp-delivery { background: #FFFBEB !important; color: #B45309 !important; }
    .kpi-weekly-table thead th.grp-register { background: #F1F5F9 !important; color: #334155 !important; }

    /* Each row stays on one page */
    .kpi-weekly-table tbody tr,
    .kpi-weekly-table tfoot tr {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }

    /* Cell content — values + sub stack vertically; keep visually tight */
    .cell-stack-val   { font-size: 7.5pt !important; }
    .cell-stack-sub   { font-size: 6.5pt !important; }
    .branch-cell-code { font-size: 6.5pt; padding: 1px 5px; }
    .branch-cell-name { font-size: 7.5pt; }
    .delta-pill      { font-size: 6.5pt; padding: 1px 5px; }
    .cell-monthly-val { font-size: 7.5pt; }
    .cell-monthly-pct { font-size: 6.5pt; }
    .cell-monthly-bar { height: 3px; }

    /* Column-group tints — softer for print so text remains crisp */
    .kpi-weekly-table .grp-instore  { background: #F5F7FF !important; }
    .kpi-weekly-table .grp-delivery { background: #FFFCF2 !important; }
    .kpi-weekly-table .grp-register { background: #F8FAFC !important; }

    /* Footer total row */
    .kpi-weekly-table tfoot td {
        background: #FFFBEB !important;
        border-top: 1.5px solid #F59E0B !important;
    }
    .kpi-weekly-table tfoot td.grp-instore,
    .kpi-weekly-table tfoot td.grp-delivery,
    .kpi-weekly-table tfoot td.grp-register {
        background: #FEF3C7 !important;
    }

    /* Hide hub-section animation delays */
    .hub-section { animation-delay: 0 !important; opacity: 1 !important; }
    .ba-stat, .ba-pulse-item, .funnel-v2-bar, .hub-progress-fill,
    .achv-modal-fill { animation: none !important; }

    /* Generic anchors look plain in print */
    a, a:visited { color: #0f172a !important; text-decoration: none !important; }

    /* Page break: if a second card follows, start it on a new page */
    .hub-section + .hub-section { page-break-before: always; }
}

/* ----- CSS funnel (replaces Chart.js horizontal bars) ----------------- */
.funnel-v2 {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 14px;
    padding: 22px 6px;
    min-height: 320px;
}
.funnel-v2-row {
    width: 100%;
    display: flex; align-items: center; justify-content: center;
    gap: 12px;
}
.funnel-v2-bar {
    width: var(--w, 100%);
    height: 56px;
    background: var(--bg, var(--primary-600));
    border-radius: 14px;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 22px;
    color: #fff;
    font-weight: 700;
    box-shadow: 0 8px 20px -6px var(--shadow, rgba(99,102,241,.4));
    transition: transform .25s cubic-bezier(0.16,1,0.3,1), box-shadow .25s;
    animation: funnelGrow 900ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
    position: relative;
    overflow: hidden;
}
.funnel-v2-bar::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,.18) 0%, transparent 50%);
    pointer-events: none;
}
.funnel-v2-bar:hover {
    transform: scale(1.02);
    box-shadow: 0 12px 24px -6px var(--shadow, rgba(99,102,241,.5));
}
@keyframes funnelGrow {
    from { width: 0; opacity: 0; }
}
.funnel-v2-label {
    font-size: 14px;
    letter-spacing: .04em;
    text-shadow: 0 1px 2px rgba(0,0,0,.18);
    position: relative; z-index: 1;
}
.funnel-v2-value {
    font-size: 15px;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 2px rgba(0,0,0,.18);
    position: relative; z-index: 1;
}
.funnel-v2-pct {
    flex-shrink: 0;
    width: 56px;
    text-align: right;
    font-weight: 700;
    color: var(--ink-700);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

/* ----- Stacked-bar header legend (Weekly channel breakdown) ----------- */
.ba-stack-legend {
    display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap;
    font-size: 11.5px; color: var(--ink-700); font-weight: 600;
}
.ba-stack-legend span:not(.ba-legend-dot) { margin-right: 8px; }
.ba-legend-dot {
    width: 9px; height: 9px; border-radius: 50%;
    display: inline-block;
}

/* ----- ba-stacked-row (8/4 split) ----------------------------------- */
.ba-stacked-row {
    display: grid; grid-template-columns: 2fr 1fr; gap: 16px;
}
.ba-stacked-row .card { margin: 0; }
@media (max-width: 1100px) { .ba-stacked-row { grid-template-columns: 1fr; } }

/* ----- Highlights tile list ------------------------------------------ */
.ba-hl-list {
    display: grid; grid-template-columns: 1fr; gap: 10px;
}
.ba-hl-item {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 14px; border-radius: 14px;
    background: linear-gradient(135deg, rgba(99,102,241,.04), transparent);
    border: 1px solid var(--line);
    transition: transform .22s cubic-bezier(0.16,1,0.3,1), background .22s, border-color .22s, box-shadow .22s;
}
.ba-hl-item:hover {
    transform: translateX(4px);
    border-color: var(--primary-200);
    box-shadow: 0 8px 16px -8px rgba(15,23,42,.12);
    background: linear-gradient(135deg, rgba(99,102,241,.08), transparent);
}
.ba-hl-ico {
    width: 40px; height: 40px; border-radius: 12px;
    display: grid; place-items: center; flex-shrink: 0;
    background: linear-gradient(135deg, #6366F1, #8B5CF6);
    color: #fff; font-size: 17px;
    box-shadow: 0 6px 14px -4px rgba(99,102,241,.45);
}
.ba-hl-item.ba-hl-up   .ba-hl-ico { background: linear-gradient(135deg, #10B981, #14B8A6); box-shadow: 0 6px 14px -4px rgba(16,185,129,.45); }
.ba-hl-item.ba-hl-down .ba-hl-ico { background: linear-gradient(135deg, #EF4444, #F87171); box-shadow: 0 6px 14px -4px rgba(239,68,68,.45); }
.ba-hl-text { flex: 1; min-width: 0; }
.ba-hl-label { font-size: 10.5px; color: var(--ink-500); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ba-hl-val { font-size: 14px; font-weight: 700; color: var(--ink-900); font-variant-numeric: tabular-nums; margin-top: 2px; }

/* ----- Historical weeks table ---------------------------------------- */
.ba-history-table th, .ba-history-table td { padding: 9px 12px; font-size: 12.5px; }
.ba-history-table thead th {
    background: linear-gradient(135deg, #F8FAFC, #FFFFFF);
    font-size: 11px;
    border-bottom: 1px solid var(--ink-200);
}
.ba-history-table tbody tr { transition: background-color .15s; }
.ba-history-table tbody tr:hover { background: var(--ink-50); }
.ba-history-table .strong a {
    color: var(--ink-900);
    text-decoration: none;
    display: inline-flex; align-items: center; gap: 4px;
}
.ba-history-table .strong a:hover { color: var(--primary-700); }
.ba-history-table .ba-row-current {
    background: linear-gradient(90deg, rgba(99,102,241,.08) 0%, transparent 70%) !important;
    box-shadow: inset 3px 0 0 var(--primary-600);
}
.ba-history-table .ba-row-current td { color: var(--ink-900); font-weight: 600; }
.ba-history-table .muted-row td { opacity: 0.55; }
.chip.chip-info    { background: #ECFEFF; color: var(--info-700);    }
.chip.chip-danger  { background: var(--danger-50); color: var(--danger-700); }

/* Achievement chip inside historical table */
.ba-history-table .chip.small {
    padding: 4px 10px;
    font-size: 11px;
    border-radius: 999px;
}

/* ----- Compact KPI page heading polish ------------------------------- */
.hub-three-row.kpi-deep { grid-template-columns: 1fr 1.4fr 1.2fr; }
@media (max-width: 1200px) { .hub-three-row.kpi-deep { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px)  { .hub-three-row.kpi-deep { grid-template-columns: 1fr; } }

/* ==========================================================================
   v2 MODAL — used by the branch-achievement click-through
   ========================================================================== */
@keyframes v2ModalFadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes v2ModalSlideUp {
    from { opacity: 0; transform: translateY(20px) scale(.97); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
}
.v2-modal {
    position: fixed; inset: 0; z-index: 100;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
}
.v2-modal[hidden] { display: none; }
.v2-modal-backdrop {
    position: absolute; inset: 0;
    background: rgba(15, 23, 42, .5);
    backdrop-filter: blur(3px);
    animation: v2ModalFadeIn 220ms ease;
}
.v2-modal-panel {
    position: relative;
    background: #fff; border-radius: var(--r-xl);
    box-shadow: 0 24px 48px -12px rgba(15,23,42,.32), 0 4px 12px -4px rgba(15,23,42,.18);
    max-width: 820px; width: 100%;
    max-height: calc(100vh - 48px);
    display: flex; flex-direction: column;
    animation: v2ModalSlideUp 320ms cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}
.v2-modal-head {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--line);
}
.v2-modal-head-text { display: flex; align-items: center; gap: 14px; }
.v2-modal-head h2 { margin: 0; font-size: 16.5px; line-height: 1.2; }
.v2-modal-head p { margin: 2px 0 0; }
.v2-modal-close {
    background: var(--ink-100); border: 0; cursor: pointer;
    width: 34px; height: 34px; border-radius: 10px;
    color: var(--ink-600); display: grid; place-items: center;
    font-size: 15px;
    transition: background var(--t-fast), color var(--t-fast);
    flex-shrink: 0;
}
.v2-modal-close:hover { background: var(--ink-200); color: var(--ink-900); }

.v2-modal-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 12px 22px;
    background: linear-gradient(135deg, #FFFBEB, #FFF7ED);
    border-bottom: 1px solid var(--line);
}
.v2-modal-stat { display: flex; flex-direction: column; gap: 2px; }
.v2-modal-stat strong { color: var(--ink-900); font-size: 14px; font-variant-numeric: tabular-nums; }

.v2-modal-body {
    padding: 4px 22px 22px;
    overflow-y: auto;
    flex: 1;
}
.v2-modal-body::-webkit-scrollbar { width: 8px; }
.v2-modal-body::-webkit-scrollbar-thumb { background: var(--ink-200); border-radius: 4px; }
.v2-modal-body::-webkit-scrollbar-thumb:hover { background: var(--ink-300); }

/* Branch achievement row inside the modal */
.achv-modal-row {
    display: flex; flex-direction: column; gap: 8px;
    padding: 14px 0;
    border-bottom: 1px dashed var(--line);
    animation: hubFadeUp 360ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
.achv-modal-row:nth-child(1)  { animation-delay: 20ms; }
.achv-modal-row:nth-child(2)  { animation-delay: 50ms; }
.achv-modal-row:nth-child(3)  { animation-delay: 80ms; }
.achv-modal-row:nth-child(4)  { animation-delay: 110ms; }
.achv-modal-row:nth-child(5)  { animation-delay: 140ms; }
.achv-modal-row:nth-child(6)  { animation-delay: 170ms; }
.achv-modal-row:nth-child(7)  { animation-delay: 200ms; }
.achv-modal-row:nth-child(8)  { animation-delay: 230ms; }
.achv-modal-row:nth-child(9)  { animation-delay: 260ms; }
.achv-modal-row:nth-child(10) { animation-delay: 290ms; }
.achv-modal-row:nth-child(11) { animation-delay: 320ms; }
.achv-modal-row:nth-child(12) { animation-delay: 350ms; }
.achv-modal-row:nth-child(13) { animation-delay: 380ms; }
.achv-modal-row:nth-child(14) { animation-delay: 410ms; }
.achv-modal-row:nth-child(15) { animation-delay: 440ms; }
.achv-modal-row:last-child { border-bottom: 0; padding-bottom: 6px; }

.achv-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
}
.achv-modal-numbers {
    font-size: 12px; color: var(--ink-500);
    font-variant-numeric: tabular-nums;
}
.achv-modal-numbers strong { color: var(--ink-900); font-weight: 700; }

.achv-modal-bar-wrap {
    display: flex; align-items: center; gap: 12px;
}
.achv-modal-bar {
    flex: 1;
    background: var(--ink-100);
    height: 18px;
    border-radius: var(--r-pill);
    overflow: hidden;
    position: relative;
}
.achv-modal-fill {
    height: 100%; border-radius: var(--r-pill);
    background: linear-gradient(90deg, #10B981, #34D399);
    animation: hubProgressFill 900ms cubic-bezier(0.4, 0, 0.2, 1) backwards;
    display: flex; align-items: center; justify-content: end;
    min-width: 4px;
    box-shadow: 0 2px 6px -2px rgba(16,185,129,.45);
}
.achv-modal-fill.warn   { background: linear-gradient(90deg, #F59E0B, #FBBF24); box-shadow: 0 2px 6px -2px rgba(245,158,11,.45); }
.achv-modal-fill.danger { background: linear-gradient(90deg, #EF4444, #F87171); box-shadow: 0 2px 6px -2px rgba(239,68,68,.45); }
.achv-modal-fill-tag {
    background: rgba(0, 0, 0, .18);
    color: #fff;
    padding: 1px 8px;
    font-size: 10.5px;
    font-weight: 700;
    border-radius: var(--r-pill);
    margin-right: 5px;
    white-space: nowrap;
}
.achv-modal-pct {
    font-weight: 700;
    color: var(--ink-900);
    min-width: 72px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-size: 13.5px;
}

@media (max-width: 640px) {
    .v2-modal { padding: 12px; }
    .v2-modal-summary { grid-template-columns: 1fr; padding: 10px 16px; }
    .v2-modal-head, .v2-modal-body { padding-left: 16px; padding-right: 16px; }
    .achv-modal-head { flex-direction: column; align-items: flex-start; gap: 6px; }
    .achv-modal-pct { min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .v2-modal-panel, .v2-modal-backdrop, .achv-modal-row, .achv-modal-fill { animation: none !important; }
}

/* ----- 22. UTILITIES (minimal) ----------------------------------------- */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; }
.mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; }
.mb-1 { margin-bottom: 4px; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.w-100 { width: 100%; }
.tabular { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.hidden { display: none !important; }

/* ===== SPT hourly grid (v2 mirror of v1 salgpertime/index.php) ===== */
.spt-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 18px; padding: 16px 18px; background: #fff;
    border: 1px solid var(--line); border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm); flex-wrap: wrap;
}
.spt-header-title { display: flex; gap: 14px; align-items: center; }
.spt-header-icon {
    width: 48px; height: 48px; border-radius: var(--r-md);
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--spt-50), #DBEAFE);
    color: var(--spt-500); font-size: 22px; flex-shrink: 0;
}
.spt-header-h1 { font-size: 20px; font-weight: 700; color: var(--ink-900); margin: 2px 0 2px; letter-spacing: -.01em; }
.spt-header-sub { font-size: 13px; margin: 0; }
.spt-header-sub .strong { color: var(--ink-800); font-weight: 700; }
.spt-header-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
.spt-header-controls .ms-btn-sel {
    appearance: none; -webkit-appearance: none;
    background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%2364748b' d='M0 0l5 6 5-6z'/></svg>") no-repeat right 10px center;
    border: 1px solid var(--ink-300); border-radius: var(--r-md);
    padding: 8px 28px 8px 12px; font: inherit; color: var(--ink-800);
    min-width: 130px; cursor: pointer;
}
.spt-header-controls .ms-btn-sel:hover { border-color: var(--ink-400); }
.spt-header-controls .ms-btn-sel:focus-visible { border-color: var(--primary-500); box-shadow: 0 0 0 3px rgba(99,102,241,.16); outline: none; }
.spt-header-actions { display: inline-flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 720px) {
    .spt-header { padding: 14px; }
    .spt-header-controls { width: 100%; }
}

.spt-table-wrap { overflow-x: auto; border-radius: var(--r-md); }
.spt-table {
    width: 100%; border-collapse: separate; border-spacing: 0;
    font-size: 12.5px; background: #fff;
}
.spt-table thead tr:first-child th {
    background: var(--ink-900); color: #fff; padding: 10px 8px;
    text-align: center; font-weight: 700; font-size: 12.5px;
    border-right: 1px solid rgba(255,255,255,0.08);
    text-transform: none; letter-spacing: 0;
    position: sticky; top: 0; z-index: 12;
}
.spt-table thead tr:first-child th small.muted { color: #94a3b8 !important; font-weight: 500; }
.spt-table thead tr.sub-header th {
    background: var(--ink-700); color: #e2e8f0; padding: 6px 8px;
    font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    border-right: 1px solid rgba(255,255,255,0.08);
    position: sticky; top: 36px; z-index: 11;
}
/* Day-group separators on every other day pair for scan-ability */
.spt-table thead tr:first-child th:nth-child(2n) { border-left: 1px solid rgba(255,255,255,0.12); }
.spt-table tbody td:nth-child(2n+1):not(.col-hour) { background: #fcfcfd; }
.spt-table tbody tr:nth-child(even) td:nth-child(2n+1):not(.col-hour) { background: #f5f7fa; }
.spt-table .spt-th-day { font-size: 13px; font-weight: 700; }
.spt-table tbody td {
    padding: 8px 8px; border-bottom: 1px solid var(--ink-100);
    white-space: nowrap; vertical-align: middle;
}
.spt-table tbody tr:nth-child(even) td { background: #fafbfc; }
.spt-table tbody tr:hover td { background: #eef4ff !important; }
.spt-table .col-hour {
    position: sticky; left: 0; z-index: 10;
    background: #fff !important; min-width: 72px;
    font-weight: 800; color: var(--ink-900);
    font-size: 13px; letter-spacing: -.01em;
    box-shadow: 3px 0 6px rgba(15,23,42,.06);
    border-right: 2px solid var(--ink-200);
}
.spt-table thead .col-hour {
    background: var(--ink-900) !important; color: #fff; z-index: 13;
    box-shadow: 3px 0 6px rgba(15,23,42,.18);
    border-right: 2px solid var(--ink-900);
}
.spt-table tbody tr:nth-child(even) .col-hour { background: #fafbfc !important; }
.spt-table tbody tr:hover .col-hour { background: #eef4ff !important; }
.spt-table .col-total {
    background: var(--success-700) !important; color: #fff;
    border-left: 2px solid var(--success-700);
}
.spt-table .col-total-cell {
    background: rgba(22,101,52,0.10);
    border-left: 2px solid rgba(22,101,52,0.30);
    font-weight: 800;
}
.spt-table .col-total-cell .val-primary { color: var(--success-700); }
.spt-table .val-primary {
    font-weight: 700;
    color: var(--ink-900);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}
.spt-table .val-muted {
    color: var(--ink-700);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
/* Single "–" placeholders stay faint */
.spt-table td .val-muted:only-child { color: var(--ink-300); font-weight: 400; }
.spt-table .change-pill {
    display: inline-block; margin-left: 5px;
    font-size: 10.5px; font-weight: 700; padding: 1px 6px;
    border-radius: var(--r-pill); line-height: 1.35;
    font-variant-numeric: tabular-nums;
    border: 1px solid transparent;
}
.spt-table .change-pill.up   {
    background: #DCFCE7; color: #15803D; border-color: #86EFAC;
}
.spt-table .change-pill.down {
    background: #FEE2E2; color: #B91C1C; border-color: #FCA5A5;
}
.spt-table tfoot.spt-table-footer td,
.spt-table tfoot tr.spt-table-footer td {
    background: linear-gradient(135deg, var(--ink-900), var(--primary-700));
    color: #fff; font-weight: 800; padding: 10px 8px;
    border-top: 2px solid var(--ink-700);
    font-size: 13px; letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
    vertical-align: middle;
}
.spt-table tfoot .col-hour {
    background: linear-gradient(135deg, var(--ink-900), var(--primary-700)) !important;
    color: #fff;
}
/* Footer two-line cell: main value + pill, then sub-line with avg + prev */
.spt-table tfoot .ft-line {
    display: inline-flex; align-items: center; gap: 6px;
    justify-content: flex-end; width: 100%;
}
.spt-table tfoot td.text-center .ft-line { justify-content: center; }
.spt-table tfoot .ft-main {
    font-weight: 800; color: #fff;
    font-size: 13px; letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
}
.spt-table tfoot .ft-sub {
    display: block; margin-top: 3px;
    font-size: 10px; font-weight: 500;
    color: rgba(255,255,255,0.62);
    letter-spacing: .02em;
    font-variant-numeric: tabular-nums;
}
.spt-table tfoot td.text-center .ft-sub { text-align: center; }
.spt-table tfoot td.text-end    .ft-sub { text-align: right; }
.spt-table tfoot .ft-pill {
    display: inline-block;
    font-size: 9.5px; font-weight: 700;
    padding: 1px 6px; border-radius: var(--r-pill);
    line-height: 1.35; font-variant-numeric: tabular-nums;
    border: 1px solid transparent;
}
.spt-table tfoot .ft-pill.up   { background: rgba(34,197,94,0.20);  color: #86EFAC; border-color: rgba(134,239,172,0.45); }
.spt-table tfoot .ft-pill.down { background: rgba(239,68,68,0.20);  color: #FCA5A5; border-color: rgba(252,165,165,0.45); }
@media print {
    .spt-header-controls, .page-actions, .sidebar, .mobile-tabbar { display: none !important; }
    .spt-table { font-size: 10px; }
    .spt-table .col-hour { position: relative !important; box-shadow: none !important; }
    @page { size: A4 landscape; margin: 8mm; }
}

/* ===== SPT day-part band list (dashboard analytics card) ===== */
.band-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.band-row {
    display: grid;
    grid-template-columns: 8px 1fr minmax(140px, 1.4fr) auto;
    gap: 14px; align-items: center;
    padding: 10px 12px;
    background: var(--ink-50);
    border-radius: var(--r-md);
    border: 1px solid var(--line);
    transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.band-row:hover { transform: translateX(2px); box-shadow: var(--shadow-sm); }
.band-color { width: 8px; align-self: stretch; border-radius: 4px; }
.band-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.band-label { font-size: 13px; font-weight: 700; color: var(--ink-900); }
.band-bar-wrap {
    height: 10px; background: #fff;
    border: 1px solid var(--line); border-radius: var(--r-pill);
    overflow: hidden; position: relative;
}
.band-bar {
    height: 100%; border-radius: var(--r-pill);
    transition: width 600ms cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: inset 0 -2px 4px rgba(0,0,0,.06);
}
.band-num { text-align: right; display: flex; flex-direction: column; gap: 2px; min-width: 110px; }
.band-num strong { color: var(--ink-900); font-variant-numeric: tabular-nums; font-size: 13.5px; }
@media (max-width: 720px) {
    .band-row { grid-template-columns: 8px 1fr auto; row-gap: 6px; }
    .band-bar-wrap { grid-column: 2 / 4; }
}

/* ===== Compare page enhancements ===== */
.text-indigo { color: var(--primary-600); }

/* Summary stat strip (Tab 1) */
.cmp-stats {
    display: grid; gap: 14px;
    grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1100px) { .cmp-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .cmp-stats { grid-template-columns: 1fr; } }
.cmp-stat {
    display: flex; gap: 12px; align-items: center;
    background: #fff; border: 1px solid var(--line);
    border-left: 4px solid var(--ink-300);
    border-radius: var(--r-lg); padding: 14px 16px;
    box-shadow: var(--shadow-sm);
    transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.cmp-stat:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -12px rgba(15,23,42,.16); }
.cmp-stat-up    { border-left-color: var(--success-500); }
.cmp-stat-down  { border-left-color: var(--danger-500); }
.cmp-stat-warn  { border-left-color: var(--warning-500); }
.cmp-stat-info  { border-left-color: var(--primary-500); }
.cmp-stat-icon {
    width: 40px; height: 40px; border-radius: var(--r-md);
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--ink-50); color: var(--ink-700);
    font-size: 18px; flex-shrink: 0;
}
.cmp-stat-up   .cmp-stat-icon { background: var(--success-50); color: var(--success-700); }
.cmp-stat-down .cmp-stat-icon { background: var(--danger-50);  color: var(--danger-700); }
.cmp-stat-warn .cmp-stat-icon { background: var(--warning-50); color: var(--warning-700); }
.cmp-stat-info .cmp-stat-icon { background: var(--primary-50); color: var(--primary-700); }
.cmp-stat > div { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cmp-stat-label { font-size: 11px; font-weight: 700; color: var(--ink-500); text-transform: uppercase; letter-spacing: .05em; }
.cmp-stat-val   { font-size: 15px; color: var(--ink-900); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Combined budget achievement card (Tab 2) */
.cmp-budget-summary .card-body { padding-top: 14px; }
.cmp-budget-row {
    display: grid; grid-template-columns: 180px 1fr; gap: 14px;
    align-items: center; padding: 10px 0;
}
.cmp-budget-row + .cmp-budget-row { border-top: 1px dashed var(--line); }
.cmp-budget-label { font-size: 13px; font-weight: 700; color: var(--ink-900); display: flex; align-items: center; gap: 8px; }
.cmp-budget-bar-wrap { display: flex; gap: 14px; align-items: center; }
.cmp-budget-bar {
    flex: 1; height: 22px;
    background: var(--ink-100); border: 1px solid var(--line);
    border-radius: var(--r-pill); overflow: hidden; position: relative;
}
.cmp-budget-fill {
    height: 100%; border-radius: var(--r-pill);
    transition: width 600ms cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: inset 0 -3px 6px rgba(0,0,0,.08);
}
.cmp-budget-pace {
    position: absolute; top: -4px; bottom: -4px; width: 2px;
    background: var(--ink-900);
    box-shadow: 0 0 0 3px rgba(15,23,42,.10);
    z-index: 2;
}
.cmp-budget-pace::after {
    content: 'today'; position: absolute; top: -16px; left: 50%;
    transform: translateX(-50%);
    background: var(--ink-900); color: #fff;
    font-size: 9px; font-weight: 700;
    padding: 1px 5px; border-radius: 3px;
    letter-spacing: .04em; text-transform: uppercase;
    white-space: nowrap;
}
.cmp-budget-val { min-width: 70px; text-align: right; color: var(--ink-900); font-size: 16px; font-variant-numeric: tabular-nums; }
@media (max-width: 720px) {
    .cmp-budget-row { grid-template-columns: 1fr; }
    .cmp-budget-bar-wrap { gap: 10px; }
}

/* Channel breakdown list (Tab 3) */
.cmp-chan-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.cmp-chan-row {
    display: grid;
    grid-template-columns: 8px 1fr minmax(140px, 1.6fr) auto;
    gap: 14px; align-items: center;
    padding: 10px 12px;
    background: var(--ink-50);
    border-radius: var(--r-md);
    border: 1px solid var(--line);
}
.cmp-chan-color { width: 8px; align-self: stretch; border-radius: 4px; }
.cmp-chan-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cmp-chan-meta strong { font-size: 13.5px; color: var(--ink-900); font-weight: 700; }
.cmp-chan-bar-wrap {
    height: 10px; background: #fff;
    border: 1px solid var(--line); border-radius: var(--r-pill);
    overflow: hidden;
}
.cmp-chan-bar {
    height: 100%; border-radius: var(--r-pill);
    transition: width 600ms cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: inset 0 -2px 4px rgba(0,0,0,.06);
}
.cmp-chan-pct { color: var(--ink-900); font-weight: 700; font-variant-numeric: tabular-nums; min-width: 56px; text-align: right; font-size: 14px; }
@media (max-width: 720px) {
    .cmp-chan-row { grid-template-columns: 8px 1fr auto; row-gap: 6px; }
    .cmp-chan-bar-wrap { grid-column: 2 / 4; }
}

/* Upload-history warning row (skipped restaurants on KPI imports) */
.upload-history-item.has-warning { background: linear-gradient(90deg, rgba(245,158,11,0.05), transparent); }
.upload-history-warning {
    margin-top: 6px;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: var(--r-pill);
    background: var(--warning-50); color: var(--warning-700);
    border: 1px solid #fcd34d;
    font-size: 11.5px; font-weight: 600;
    line-height: 1.3;
}
.upload-history-warning i { font-size: 12px; }

/* Toggle pill group used on Hub daily trend (window 14/30/90 d) */
.hub-daily-toggle { display: inline-flex; gap: 4px; align-items: center; }
.hub-daily-toggle .btn {
    background: var(--ink-100); color: var(--ink-700);
    border: 1px solid var(--line); padding: 4px 12px;
    font-weight: 600; font-size: 12px;
}
.hub-daily-toggle .btn:hover { background: var(--ink-200); }
.hub-daily-toggle .btn.is-active {
    background: var(--primary-600); color: #fff; border-color: var(--primary-700);
    box-shadow: 0 4px 8px -2px rgba(99,102,241,.35);
}

/* KPI Day × Branch grid (Weekly KPI Details) */
.kpi-daily-grid-wrap { overflow-x: auto; }
.kpi-daily-grid {
    width: 100%; border-collapse: separate; border-spacing: 0;
    font-size: 12.5px; background: #fff;
}
.kpi-daily-grid thead th {
    background: var(--ink-900); color: #fff; padding: 9px 10px;
    text-align: center; font-weight: 700; font-size: 12px;
    border-right: 1px solid rgba(255,255,255,0.08);
    position: sticky; top: 0; z-index: 10;
}
.kpi-daily-grid thead th small { color: #94a3b8; font-weight: 500; }
.kpi-daily-grid thead .daily-day { font-size: 13px; font-weight: 700; letter-spacing: -.01em; }
.kpi-daily-grid tbody td {
    padding: 8px 10px; border-bottom: 1px solid var(--ink-100);
    vertical-align: middle; white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.kpi-daily-grid tbody tr:nth-child(even) td { background: #fafbfc; }
.kpi-daily-grid tbody tr:hover td { background: #eef4ff; }
.kpi-daily-grid .sticky-col {
    position: sticky; left: 0; z-index: 5;
    background: #fff; box-shadow: 3px 0 6px rgba(15,23,42,.05);
    min-width: 200px;
}
.kpi-daily-grid thead .sticky-col {
    background: var(--ink-900) !important; z-index: 12;
    box-shadow: 3px 0 6px rgba(15,23,42,.18);
}
.kpi-daily-grid tbody tr:nth-child(even) .sticky-col { background: #fafbfc; }
.kpi-daily-grid tbody tr:hover .sticky-col { background: #eef4ff; }
.kpi-daily-grid .col-total {
    background: rgba(99,102,241,0.08);
    border-left: 2px solid rgba(99,102,241,0.30);
    font-weight: 800;
}
.kpi-daily-grid thead .col-total {
    background: var(--primary-700) !important; color: #fff;
}
.kpi-daily-grid .is-peak {
    background: linear-gradient(135deg, #DCFCE7, #BBF7D0) !important;
    box-shadow: inset 0 0 0 2px #22C55E;
}
.kpi-daily-grid .is-peak strong { color: #15803D; }
.kpi-daily-grid tfoot tr.row-total td {
    background: linear-gradient(135deg, var(--ink-900), var(--primary-700));
    color: #fff; font-weight: 800; padding: 11px 10px;
    font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.kpi-daily-grid tfoot tr.row-total .sticky-col {
    background: linear-gradient(135deg, var(--ink-900), var(--primary-700)) !important;
}
.kpi-daily-grid .d-block { display: block; }

/* Days-covered chip in upload history */
.upload-history-days {
    display: inline-flex; align-items: center; gap: 5px;
    background: var(--primary-50); color: var(--primary-700);
    border: 1px solid var(--primary-200);
    padding: 3px 9px; border-radius: var(--r-pill);
    font-size: 11.5px; font-weight: 600;
}
.upload-history-days i { font-size: 12px; }
.upload-history-days .muted { color: var(--primary-600); font-weight: 500; }

/* KPI Upload — format help (replaces the inline <code> stack) */
.upload-format-help {
    margin-top: 16px;
    display: flex; flex-direction: column; gap: 10px;
    padding: 14px 16px;
    background: var(--ink-50);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
}
.upload-format-row {
    display: flex; align-items: center; gap: 12px;
    flex-wrap: wrap;
}
.upload-format-row + .upload-format-row { border-top: 1px dashed var(--line); padding-top: 10px; }
.upload-format-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 11px; border-radius: var(--r-pill);
    background: var(--ink-200); color: var(--ink-700);
    font-size: 12px; font-weight: 700;
    flex-shrink: 0;
}
.upload-format-pill small { font-size: 10px; font-weight: 600; opacity: .8; }
.upload-format-row-primary .upload-format-pill {
    background: linear-gradient(135deg, var(--primary-600), #8B5CF6);
    color: #fff;
    box-shadow: 0 4px 10px -4px rgba(99,102,241,.5);
}
.upload-format-pill-legacy { background: var(--ink-300); color: var(--ink-800); }
.upload-format-cols {
    display: inline-flex; flex-wrap: wrap; gap: 4px;
    flex: 1 1 0; min-width: 0;
}
.upload-format-col {
    display: inline-block;
    padding: 2px 8px; border-radius: var(--r-sm, 4px);
    background: #fff; border: 1px solid var(--line);
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 11px; color: var(--ink-700);
}
.upload-format-col-key { background: #FEF3C7; border-color: #FCD34D; color: #92400E; font-weight: 700; }
.upload-format-note { flex-basis: 100%; padding-left: 4px; }

/* Recent uploads (now per-week) — extra chips */
.upload-history-branches, .upload-history-source {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px; border-radius: var(--r-pill);
    background: var(--ink-100); color: var(--ink-700);
    font-size: 11.5px; font-weight: 600;
}
.upload-history-branches i, .upload-history-source i { font-size: 12px; }
.upload-history-source {
    background: linear-gradient(135deg, #FEF3C7, #FDE68A);
    color: #92400E; border: 1px solid #FCD34D;
}
.upload-history-week-range { font-weight: 500; }

/* Side-by-side Top 5 / Bottom 5 inside Branch ranking card */
.ka-rank-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    align-items: start;
}
.ka-rank-grid .ka-rank-row {
    padding: 0;
    background: var(--ink-50);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 12px 12px 14px;
}
.ka-rank-grid .ka-rank-row.ka-rank-top    { border-left: 3px solid var(--warning-500); }
.ka-rank-grid .ka-rank-row.ka-rank-bottom { border-left: 3px solid var(--danger-500); }
.ka-rank-grid .ka-rank-label { margin-bottom: 8px; }
@media (max-width: 720px) {
    .ka-rank-grid { grid-template-columns: 1fr; gap: 12px; }
}

/* ===== KPI dashboard polish ===== */

/* Prettier filter bar */
.hub-filterbar {
    background: linear-gradient(135deg, #ffffff 0%, #fafbff 60%, #f6f8ff 100%);
    border-color: var(--primary-100, #E0E7FF);
    box-shadow: 0 4px 16px -8px rgba(99,102,241,0.10), var(--shadow-sm);
}
.hub-status-pretty {
    display: inline-flex; align-items: center; gap: 8px;
    flex-wrap: wrap;
}
.hub-status-pretty .hub-status-pill {
    background: linear-gradient(135deg, #EEF2FF, #E0E7FF);
    border-color: #C7D2FE;
}
.hub-status-pretty .hub-status-pill.is-week {
    background: linear-gradient(135deg, #EDE9FE, #DDD6FE);
    border-color: #C4B5FD;
    color: var(--primary-700);
}
.hub-status-pretty .hub-status-dates {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px;
    border-radius: var(--r-pill);
    background: #fff;
    border: 1px solid var(--line);
    font-size: 12px; color: var(--ink-700); font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Daily breakdown compact (left half of the new two-row layout) */
.hub-daily-compare-row { gap: 16px; }
.ba-daily-compact thead th { font-size: 11px; padding: 8px 10px; }
.ba-daily-compact tbody td { padding: 8px 10px; vertical-align: middle; }
.ba-daily-compact .chip-fire {
    display: inline-flex; align-items: center; gap: 3px;
    margin-left: 6px; padding: 2px 6px;
    background: linear-gradient(135deg, #FB923C, #EF4444); color: #fff;
    border-radius: var(--r-pill); font-size: 10px; font-weight: 700;
}
.ba-daily-bar-wrap {
    position: relative; height: 18px; min-width: 100px;
    background: var(--ink-100); border-radius: var(--r-pill);
    overflow: hidden;
}
.ba-daily-bar {
    height: 100%; border-radius: var(--r-pill);
    background: linear-gradient(90deg, #6366F1, #8B5CF6);
    transition: width 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.ba-daily-bar-pct {
    position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
    font-size: 10.5px; font-weight: 700; color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,.25);
    font-variant-numeric: tabular-nums;
}

/* Mini-stats list inside Monthly budget achievement card */
.ba-mini-stats {
    list-style: none; padding: 0; margin: 14px 0 0;
    display: flex; flex-direction: column; gap: 8px;
}
.ba-mini-stat {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    gap: 10px; align-items: center;
    padding: 9px 12px;
    background: var(--ink-50);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    transition: transform var(--t-fast);
}
.ba-mini-stat:hover { transform: translateX(2px); }
.ba-mini-stat-ico {
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--r-md); color: #fff; font-size: 14px;
    box-shadow: 0 4px 10px -2px rgba(15,23,42,.15);
}
.ba-mini-stat-label { font-size: 12px; color: var(--ink-600); font-weight: 600; }
.ba-mini-stat-val   { font-size: 13.5px; color: var(--ink-900); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Distribution list under donut/polar charts */
.ba-card-dist .chart-wrap.ba-dist-chart { height: 200px; margin-bottom: 14px; }
.ba-dist-list {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 6px;
}
.ba-dist-row {
    display: grid;
    grid-template-columns: 10px 76px 1fr auto auto;
    gap: 10px; align-items: center;
    padding: 7px 10px; border-radius: var(--r-md);
    background: var(--ink-50); border: 1px solid transparent;
    transition: background var(--t-fast), border-color var(--t-fast);
}
.ba-dist-row:hover { background: #fff; border-color: var(--line); }
.ba-dist-dot { width: 10px; height: 10px; border-radius: 50%; align-self: center; }
.ba-dist-name { font-size: 12.5px; font-weight: 600; color: var(--ink-800); }
.ba-dist-bar-wrap {
    height: 8px; background: #fff; border: 1px solid var(--line);
    border-radius: var(--r-pill); overflow: hidden;
}
.ba-dist-bar { height: 100%; border-radius: var(--r-pill); transition: width 500ms ease; }
.ba-dist-val { font-size: 12px; font-weight: 700; color: var(--ink-900); font-variant-numeric: tabular-nums; }
.ba-dist-pct { font-size: 11px; color: var(--ink-500); font-weight: 600; min-width: 42px; text-align: right; font-variant-numeric: tabular-nums; }

/* ===== KPI dashboard polish (round 2, conservative) ===== */

/* (1) Daily breakdown / Current-vs-Previous → 30 / 70 split */
.hub-daily-compare-row { grid-template-columns: 3fr 7fr !important; }
@media (max-width: 1100px) { .hub-daily-compare-row { grid-template-columns: 1fr !important; } }

/* Keep numbers inside the YoY comparison table on one line */
.ba-compare-card .table td,
.ba-compare-card .table th { white-space: nowrap; }

/* Daily breakdown is the narrow column → keep the bar small, never wrap */
.ba-daily-compact tbody td { white-space: nowrap; }
.ba-daily-bar-wrap { min-width: 70px; }

/* (3) Highlights removed → Weekly channel breakdown spans full width */
.ba-stacked-row { grid-template-columns: 1fr; }

/* ===== Equal heights for KPI dashboard cards ===== */

/* (1) Three cards in the row — Budget / Channel Dist / Sales Person Dist
   must end at the same height. Chart areas pinned to the same height; the
   list area below grows to fill remaining card height. */
.hub-three-row .card { height: 100%; }
.hub-three-row .chart-wrap,
.hub-three-row .ba-gauge-wrap { height: 240px; flex: 0 0 240px; }
.hub-three-row .ba-mini-stats,
.hub-three-row .ba-dist-list   { flex: 1 1 auto; align-content: start; }

/* (2) Daily breakdown ↔ Current vs previous: both cards same height,
   inner table stretches so its rows fill the available card height. The
   combined row also has a slightly taller min-height so neither card feels
   cramped. */
.hub-daily-compare-row { min-height: 560px; }
.hub-daily-compare-row .card { height: 100%; }
.hub-daily-compare-row .card .card-body { flex: 1; display: flex; flex-direction: column; }
.hub-daily-compare-row .card .card-body .table-wrap { flex: 1; display: flex; }
.hub-daily-compare-row .card .card-body .table-wrap > table {
    height: 100%;            /* let rows auto-distribute to fill */
    width: 100%;
}
/* Trick the row height resolver into distributing free space evenly */
.hub-daily-compare-row .ba-daily-compact tbody tr,
.hub-daily-compare-row .ba-compare-card .table tbody tr { height: 1px; }
.hub-daily-compare-row .ba-daily-compact tbody td  { padding: 14px 10px; vertical-align: middle; }
.hub-daily-compare-row .ba-daily-compact thead th  { padding: 11px 10px; }
.hub-daily-compare-row .ba-daily-compact tfoot td  { padding: 14px 10px; }

/* ===== KPI Analytics — date-range layout ===== */

/* Daily trend card: right-side YoY pill */
.ka-trend-summary {
    display: inline-flex; gap: 8px; align-items: center;
    margin-left: auto;
}

/* Day-of-week list */
.ka-dow-list {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 6px;
}
.ka-dow-row {
    display: grid;
    grid-template-columns: 44px 1fr auto auto;
    gap: 12px; align-items: center;
    padding: 9px 12px;
    background: var(--ink-50);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    transition: transform var(--t-fast), background var(--t-fast);
}
.ka-dow-row:hover { transform: translateX(2px); }
.ka-dow-row.is-peak {
    background: linear-gradient(90deg, #DCFCE7, var(--ink-50) 60%);
    border-color: #86EFAC;
}
.ka-dow-row.is-low {
    background: linear-gradient(90deg, #FEE2E2, var(--ink-50) 60%);
    border-color: #FCA5A5;
}
.ka-dow-name {
    font-weight: 700; color: var(--ink-900); font-size: 13px;
    letter-spacing: .02em;
}
.ka-dow-bar-wrap {
    height: 10px; background: #fff; border: 1px solid var(--line);
    border-radius: var(--r-pill); overflow: hidden;
}
.ka-dow-bar {
    height: 100%; border-radius: var(--r-pill);
    background: linear-gradient(90deg, #6366F1, #8B5CF6);
    transition: width 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.ka-dow-row.is-peak .ka-dow-bar { background: linear-gradient(90deg, #22C55E, #10B981); }
.ka-dow-row.is-low  .ka-dow-bar { background: linear-gradient(90deg, #EF4444, #F97316); }
.ka-dow-val {
    font-size: 13px; font-weight: 700; color: var(--ink-900);
    font-variant-numeric: tabular-nums;
}
.ka-dow-meta {
    font-size: 10.5px; color: var(--ink-500); font-weight: 600;
    font-variant-numeric: tabular-nums; min-width: 110px; text-align: right;
}

@media (max-width: 720px) {
    .ka-dow-row { grid-template-columns: 44px 1fr auto; gap: 8px; }
    .ka-dow-meta { display: none; }
}


/* ===== Month-end forecast — compact inline pill bar (Hub) ===== */
.hub-predict-bar {
    margin-top: 14px; padding-top: 12px;
    border-top: 1px dashed var(--line);
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    cursor: default;
}
.hub-predict-tag {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--primary-700);
    background: linear-gradient(135deg, var(--primary-50), #EEF2FF);
    border: 1px solid var(--primary-200);
    padding: 4px 10px; border-radius: var(--r-pill);
    flex-shrink: 0;
}
.hub-predict-tag i { color: var(--primary-600); font-size: 12px; }

.hub-predict-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 10px; border-radius: var(--r-pill);
    background: #fff; border: 1px solid var(--line);
    font-size: 12px; font-weight: 600; color: var(--ink-800);
    transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
    cursor: help; line-height: 1.4;
    white-space: nowrap;
}
.hub-predict-chip:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px -4px rgba(15,23,42,.18);
}
.hub-predict-dot {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(255,255,255,.8);
}
.hub-predict-name { color: var(--ink-700); font-weight: 600; }
.hub-predict-num {
    font-weight: 800; color: var(--ink-900);
    font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.hub-predict-pct {
    font-size: 10.5px; font-weight: 700;
    padding: 1px 7px; border-radius: var(--r-pill);
    font-variant-numeric: tabular-nums;
    background: var(--ink-100); color: var(--ink-700);
}

/* Tone variants colour the % pill so a glance tells you status */
.hub-predict-chip.hub-predict-on   { border-color: #86EFAC; }
.hub-predict-chip.hub-predict-on   .hub-predict-pct { background: #DCFCE7; color: var(--success-700); }
.hub-predict-chip.hub-predict-near { border-color: #BEF264; }
.hub-predict-chip.hub-predict-near .hub-predict-pct { background: #ECFCCB; color: #65A30D; }
.hub-predict-chip.hub-predict-mid  { border-color: #FCD34D; }
.hub-predict-chip.hub-predict-mid  .hub-predict-pct { background: #FEF3C7; color: var(--warning-700); }
.hub-predict-chip.hub-predict-low  { border-color: #FCA5A5; }
.hub-predict-chip.hub-predict-low  .hub-predict-pct { background: #FEE2E2; color: var(--danger-700); }

.hub-predict-meta {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
}
@media (max-width: 720px) {
    .hub-predict-meta { width: 100%; margin-left: 0; padding-top: 4px; }
}

/* ===== Access matrix (admin/access) ===== */

/* Role summary cards */
.access-roles {
    display: grid; gap: 14px;
    grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 980px) { .access-roles { grid-template-columns: 1fr; } }
.access-role-card {
    background: #fff; border: 1px solid var(--line);
    border-left: 4px solid var(--accent);
    border-radius: var(--r-lg); padding: 16px 18px;
    box-shadow: var(--shadow-sm);
    display: flex; flex-direction: column; gap: 10px;
}
.access-role-head { display: flex; align-items: center; gap: 12px; }
.access-role-ico {
    width: 44px; height: 44px; border-radius: var(--r-md);
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-size: 20px;
    box-shadow: 0 6px 14px -6px rgba(15,23,42,.25);
}
.access-role-meta { display: flex; flex-direction: column; gap: 2px; }
.access-role-label { font-size: 15px; font-weight: 700; color: var(--ink-900); }
.access-role-key {
    font-size: 11px; color: var(--ink-500); font-weight: 600;
    font-family: 'SFMono-Regular', Consolas, monospace;
    background: var(--ink-100); padding: 1px 6px; border-radius: 4px;
    align-self: flex-start;
}
.access-role-desc { font-size: 13px; color: var(--ink-700); margin: 0; line-height: 1.45; }
.access-role-stats { display: flex; gap: 6px; flex-wrap: wrap; }
.access-stat-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px; border-radius: var(--r-pill);
    font-size: 11.5px; font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.access-stat-pill.is-full   { background: #DCFCE7; color: var(--success-700); border: 1px solid #86EFAC; }
.access-stat-pill.is-scoped { background: #DBEAFE; color: var(--primary-700); border: 1px solid #93C5FD; }
.access-stat-pill.is-none   { background: #FEE2E2; color: var(--danger-700);  border: 1px solid #FCA5A5; }

/* Legend strip */
.access-legend {
    display: flex; gap: 18px; flex-wrap: wrap;
    padding: 12px 16px;
    background: var(--ink-50); border: 1px solid var(--line);
    border-radius: var(--r-md);
    font-size: 13px; color: var(--ink-700);
}
.access-legend-item { display: inline-flex; align-items: center; gap: 8px; }
.access-legend-item strong { color: var(--ink-900); }

/* Per-cell badge */
.access-cell {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 50%;
    font-size: 13px;
    box-shadow: 0 2px 4px -1px rgba(15,23,42,.10);
}
.access-cell.is-full   { background: #DCFCE7; color: var(--success-700); }
.access-cell.is-scoped { background: #DBEAFE; color: var(--primary-700); }
.access-cell.is-none   { background: #FEE2E2; color: var(--danger-700); opacity: .8; }

/* Matrix table */
.access-matrix {
    width: 100%; border-collapse: separate; border-spacing: 0;
    font-size: 13px;
}
.access-matrix thead th {
    background: var(--ink-50); color: var(--ink-700);
    padding: 12px 14px; text-align: left; font-weight: 700;
    font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em;
    border-bottom: 1px solid var(--line);
    position: sticky; top: 0; z-index: 5;
}
.access-matrix .ax-role { text-align: center; }
.access-matrix .ax-role-head {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: var(--r-pill);
    background: #fff; border: 1px solid var(--line);
    color: var(--accent); font-weight: 700;
    font-size: 12px; text-transform: none; letter-spacing: 0;
}
.access-matrix tbody td {
    padding: 11px 14px; border-bottom: 1px solid var(--ink-100);
    vertical-align: middle;
}
.access-matrix tbody tr:hover td { background: var(--ink-50); }
.access-matrix .ax-cap-cell { color: var(--ink-900); font-weight: 600; }
.access-matrix .ax-route-cell code {
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 11.5px; color: var(--ink-600);
    background: var(--ink-50); padding: 2px 7px; border-radius: 4px;
    border: 1px solid var(--line);
}
.access-matrix .ax-cell { text-align: center; }

.access-matrix .ax-group-row td {
    background: linear-gradient(90deg, var(--primary-50), transparent);
    border-bottom: 1px solid var(--primary-200);
    color: var(--primary-700);
    font-weight: 800; font-size: 12px;
    text-transform: uppercase; letter-spacing: .08em;
    padding: 10px 14px;
}

/* ===== Access matrix — clickable cell affordance ===== */
.access-cell.is-toggle {
    border: none; cursor: pointer; padding: 0;
    transition: transform var(--t-fast), box-shadow var(--t-fast);
    position: relative;
}
.access-cell.is-toggle:hover {
    transform: scale(1.12);
    box-shadow: 0 6px 14px -4px rgba(15,23,42,.30);
}
.access-cell.is-toggle:active { transform: scale(0.94); }
.access-cell.is-locked {
    border: none; cursor: not-allowed; padding: 0; opacity: .9;
}
.access-cell-flash {
    animation: accessCellFlash 380ms ease-out;
}
@keyframes accessCellFlash {
    0%   { box-shadow: 0 0 0 0 rgba(99,102,241,.45); }
    100% { box-shadow: 0 0 0 14px rgba(99,102,241,0); }
}