/* ═══════════════════════════════════════════════════════════════════════════
   SALES ANALYTICS — sa-analytics.css  (v3 — Dashboard-consistent)
   Scoped to .sa-wrapper. Max-width 2560px (matches .dashboard-wrapper).

   Page 1 (/SalesAnalytics/Index.cshtml):  monthly ledger, week rows
   Page 2 (/SalesAnalytics/Day.cshtml):    weekly timeline, division accordions

   v3 CHANGES
   - Header restructured to match Dashboard's .headline card + .exec-section
     split (title-left / meta-right, inline legend/subline).
   - Filter section uses the same toolbar + chips + collapsible drawer pattern
     as Dashboard. New classes: .sa-filter-section, .sa-filter-toolbar,
     .sa-filter-toggle-btn, .sa-filter-chips, .sa-filter-chip, .sa-filter-drawer.
     The original inline .sa-hdr-top / .sa-filters have been removed.
   - KPI cards upgraded to .sa-metric-card (icon slot + main + sub + optional
     variance pill) to mirror Dashboard's .metric-card. The old .sa-kpi-card
     flat variant is kept as a fallback for anywhere still using it.
   - Month nav and weekly table kept as-is — they are SA-specific and already
     visually aligned with the Dashboard tokens.
   - Day page: .sa-header upgraded to the same .sa-headline card pattern. The
     .sa-kpi-row inside is kept (it's page-specific) but cards use consistent
     visual language with the Dashboard.

   MAINTENANCE RULES
   1) Tokens + container live in .sa-wrapper.
   2) Shared primitives (.sa-card, .sa-tbl, .sa-up/down/muted, .sa-pill) once.
   3) Page-specific rules live in their own sections.
   4) Responsive lives in one block at the bottom.
   5) No duplicate selectors.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════
   0) SAFETY
   ═══════════════════════════════════════════════════════════════════════════ */

.sa-wrapper,
.sa-wrapper *,
.sa-wrapper *::before,
.sa-wrapper *::after {
    box-sizing: border-box;
}


/* ═══════════════════════════════════════════════════════════════════════════
   1) CONTAINER + TOKENS  (mirrors .dashboard-wrapper tokens)
   ═══════════════════════════════════════════════════════════════════════════ */

.sa-wrapper {
    --text-main: #0f172a;
    --text-muted: #6b7280;
    --border-subtle: rgba(148,163,184,.28);
    --border-strong: rgba(148,163,184,.45);
    --accent: #2563eb;
    --accent-strong: #1d4ed8;
    --accent-soft: #dbeafe;
    --positive: #16a34a;
    --negative: #dc2626;
    --glass: rgba(255,255,255,.78);
    --glass-strong: rgba(255,255,255,.90);
    --glass-stroke: rgba(148,163,184,.28);
    --glass-stroke-strong: rgba(148,163,184,.45);
    --r-card: 14px;
    --r-control: 14px;
    --r-pill: 999px;
    --shadow-soft: 0 14px 40px rgba(15,23,42,.08);
    --shadow-glass: 0 16px 44px rgba(15,23,42,.10);
    --t-fast: .18s ease-out;
    --focus: 0 0 0 3px rgba(37,99,235,.16);
    --zebra-row: rgba(248,250,252,.65);
    --control-h: 42px;
    max-width: 2560px;
    margin-inline: auto;
    padding: .35rem .55rem 2rem;
    font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    color: var(--text-main);
}


/* ═══════════════════════════════════════════════════════════════════════════
   2) SHARED GLASS CARD
   ═══════════════════════════════════════════════════════════════════════════ */

.sa-card {
    border-radius: var(--r-card);
    border: 1px solid var(--glass-stroke);
    background: linear-gradient(180deg, var(--glass-strong), rgba(255,255,255,.72));
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(10px);
    margin-bottom: .85rem;
    padding: 1rem 1.15rem;
    overflow: hidden;
}

.sa-card-hd {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    padding-bottom: .5rem;
    flex-wrap: wrap;
}

.sa-card-t {
    margin: 0;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.sa-card-s {
    margin: .1rem 0 0;
    font-size: .82rem;
    color: var(--text-muted);
}


/* ═══════════════════════════════════════════════════════════════════════════
   3) TYPOGRAPHY + UTILITY HELPERS
   ═══════════════════════════════════════════════════════════════════════════ */

.sa-up {
    color: var(--positive);
}

.sa-down {
    color: var(--negative);
}

.sa-muted, .sa-mut {
    color: var(--text-muted);
}

.sa-pos {
    color: var(--positive);
}

.sa-neg {
    color: var(--negative);
}

.sa-pill {
    display: inline-block;
    padding: 1px 7px;
    border-radius: var(--r-pill);
    font-size: .72rem;
    font-weight: 560;
    font-variant-numeric: tabular-nums;
    border: 1px solid var(--glass-stroke);
    background: rgba(255,255,255,.72);
    color: var(--text-muted);
}

.sa-chg {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

    .sa-chg.up {
        color: var(--positive);
    }

    .sa-chg.down {
        color: var(--negative);
    }

    .sa-chg.flat {
        color: var(--text-muted);
    }

.sa-chg-ref {
    display: block;
    font-size: .68rem;
    color: var(--text-muted);
    margin-top: 1px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   4) SHARED TABLE PRIMITIVES (monthly ledger + item tables)
   ═══════════════════════════════════════════════════════════════════════════ */

.sa-tbl-wrap {
    overflow-x: auto;
}

.sa-tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
    font-family: inherit;
}

    .sa-tbl thead th {
        padding: .5rem .85rem;
        font-size: .78rem;
        font-weight: 650;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: .10em;
        border-bottom: 1px solid var(--glass-stroke);
        text-align: left;
        white-space: nowrap;
        background: linear-gradient(to bottom, rgba(15,23,42,.025), transparent);
    }

    .sa-tbl th.r,
    .sa-tbl td.r {
        text-align: right;
    }

    .sa-tbl td {
        padding: .55rem .85rem;
        vertical-align: middle;
        color: var(--text-main);
    }

        .sa-tbl td.fw {
            font-weight: 650;
        }

.sa-tbl-row {
    border-bottom: 1px solid rgba(148,163,184,.10);
    cursor: pointer;
    transition: background .12s;
}

    .sa-tbl-row:hover {
        background: rgba(224,236,255,.35);
    }

    .sa-tbl-row:last-child {
        border-bottom: none;
    }

.sa-row-today {
    background: rgba(219,234,254,.12);
    border-left: 3px solid var(--accent);
}

    .sa-row-today:hover {
        background: rgba(219,234,254,.30);
    }

.sa-row-empty {
    opacity: .4;
    cursor: default;
}

    .sa-row-empty:hover {
        background: transparent;
    }

.sa-tbl-date strong {
    display: block;
    font-size: .9rem;
    color: var(--text-main);
}

.sa-tbl-date span {
    font-size: .72rem;
    color: var(--text-muted);
}

.sa-tbl-pills {
    white-space: nowrap;
}

.sa-open-link {
    color: var(--accent);
    font-weight: 600;
    font-size: .82rem;
}


/* ═══════════════════════════════════════════════════════════════════════════
   5) HEADLINE CARD  (mirrors Dashboard .headline)
   Used by both Index (overview) and Day pages as the top container.
   ═══════════════════════════════════════════════════════════════════════════ */

.sa-headline {
    padding: 1rem 1.15rem;
    border-radius: 20px;
    border: 1px solid var(--glass-stroke);
    background: linear-gradient(180deg, var(--glass-strong), rgba(255,255,255,.70));
    box-shadow: var(--shadow-glass);
    backdrop-filter: blur(10px);
    margin-bottom: .85rem;
}

.sa-headline-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.sa-headline-title {
    margin: 0;
    font-size: 1.45rem;
    font-weight: 600;
    color: var(--text-main);
    letter-spacing: -.01em;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .35rem;
}

.sa-headline-title-suffix {
    color: var(--text-muted);
    font-weight: 500;
}

.sa-headline-meta {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .3rem;
    flex-wrap: wrap;
    font-size: .85rem;
    color: var(--text-muted);
}

.sa-headline-actions {
    display: flex;
    gap: .5rem;
    flex-shrink: 0;
    align-items: center;
}

.sa-role {
    display: inline-flex;
    padding: .14rem .55rem;
    border-radius: var(--r-pill);
    font-size: .72rem;
    font-weight: 650;
    letter-spacing: .08em;
    text-transform: uppercase;
    background: var(--accent-soft);
    color: var(--accent-strong);
}

.sa-role-dir {
    background: #fef3c7;
    color: #92400e;
}

.sa-role-acct {
    background: #e0e7ff;
    color: #3730a3;
}


/* ═══════════════════════════════════════════════════════════════════════════
   6) FILTER SECTION  (mirrors Dashboard .filter-section + drawer + chips)
   ═══════════════════════════════════════════════════════════════════════════ */

.sa-filter-section {
    margin: 1rem 0;
    padding: .55rem .95rem .55rem;
    border-radius: 16px;
    border: 1px solid var(--glass-stroke);
    background: linear-gradient(180deg, var(--glass-strong), rgba(255,255,255,.82));
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    gap: 0;
}

    .sa-filter-section:has(.sa-filter-drawer.open) {
        padding-bottom: 1rem;
    }

.sa-filter-toolbar {
    width: 100%;
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    padding: .35rem 0;
}

.sa-filter-section:has(.sa-filter-drawer.open) .sa-filter-toolbar {
    border-bottom: 1px solid var(--border-subtle);
    padding-bottom: .55rem;
    margin-bottom: .75rem;
}

.sa-filter-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .28rem .78rem;
    border-radius: var(--r-pill);
    border: 1px solid rgba(148,163,184,.30);
    background: rgba(255,255,255,.72);
    backdrop-filter: blur(10px);
    font-size: .80rem;
    font-weight: 600;
    color: #4b5563;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s, transform .15s;
    white-space: nowrap;
}

    .sa-filter-toggle-btn:hover {
        border-color: rgba(37,99,235,.48);
        background: rgba(219,234,254,.65);
        color: var(--accent-strong);
        transform: translateY(-1px);
    }

.sa-filter-toggle-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34,197,94,.15);
}

.sa-filter-toggle-meta {
    margin-left: .35rem;
    font-size: .75rem;
    font-weight: 560;
    color: #6b7280;
}

.sa-filter-chips {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .4rem;
    align-items: center;
}

.sa-filter-chip {
    display: inline-flex;
    align-items: baseline;
    gap: .35rem;
    padding: .20rem .65rem;
    border-radius: var(--r-pill);
    border: 1px solid rgba(148,163,184,.25);
    background: rgba(255,255,255,.78);
    color: #6b7280;
    font-size: .78rem;
}

    .sa-filter-chip b {
        color: #111827;
        font-weight: 650;
    }

.sa-filter-clear-link {
    margin-left: auto;
    font-size: .80rem;
    font-weight: 650;
    color: var(--accent-strong);
    text-decoration: none;
    padding: .18rem .55rem;
    border-radius: var(--r-pill);
    border: 1px solid rgba(37,99,235,.22);
    background: rgba(219,234,254,.45);
}

    .sa-filter-clear-link:hover {
        background: rgba(219,234,254,.70);
        border-color: rgba(37,99,235,.45);
    }

.sa-filter-drawer {
    display: none;
}

    .sa-filter-drawer.open {
        display: block;
        width: 100%;
    }

.sa-filter-panel-group-row {
    width: 100%;
    margin-top: .6rem;
    padding: 0 .10rem .10rem;
    display: grid;
    grid-template-columns: repeat(4, minmax(160px, 1fr)) auto;
    gap: .80rem;
    align-items: end;
}

.sa-filter-group {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    min-width: 0;
    margin: 0;
}

.sa-filter-label {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .10em;
    color: var(--text-muted);
    margin-left: .20rem;
    margin-bottom: 2px;
}

.sa-filter-select-wrap {
    width: 100%;
    height: var(--control-h);
    padding: 0 .70rem;
    border-radius: var(--r-control);
    border: 1px solid var(--glass-stroke);
    background: rgba(255,255,255,.82);
    backdrop-filter: blur(10px);
    transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}

    .sa-filter-select-wrap:hover {
        border-color: rgba(37,99,235,.40);
        background: rgba(255,255,255,.92);
    }

    .sa-filter-select-wrap:focus-within {
        border-color: rgba(37,99,235,.55);
        box-shadow: var(--focus);
    }

.sa-filter-select {
    width: 100%;
    height: calc(var(--control-h) - 2px);
    border: none;
    background: transparent;
    font-size: .90rem;
    color: #4b5563;
    outline: none;
    appearance: none;
    padding: 0 .30rem;
    background-image: linear-gradient(45deg, transparent 50%, #9ca3af 50%), linear-gradient(135deg, #9ca3af 50%, transparent 50%);
    background-position: calc(100% - 11px) 50%, calc(100% - 7px) 50%;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}

.sa-filter-actions {
    display: flex;
    flex-direction: row;
    gap: .80rem;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: .05rem;
}

.sa-btn {
    height: var(--control-h);
    padding: 0 1.05rem;
    border-radius: var(--r-control);
    font-weight: 560;
    border: 1px solid transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .85rem;
    transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
    text-decoration: none;
}

    .sa-btn.primary {
        background: linear-gradient(135deg, var(--accent), var(--accent-strong));
        color: #f9fafb;
        box-shadow: 0 12px 26px rgba(37,99,235,.28);
    }

        .sa-btn.primary:hover {
            transform: translateY(-1px);
            box-shadow: 0 16px 34px rgba(37,99,235,.34);
        }

    .sa-btn.secondary {
        background: rgba(255,255,255,.70);
        border-color: var(--glass-stroke-strong);
        color: var(--text-muted);
    }

        .sa-btn.secondary:hover {
            background: rgba(255,255,255,.92);
            color: var(--text-main);
        }


/* ═══════════════════════════════════════════════════════════════════════════
   7) MONTH NAVIGATION  (Index only — unchanged from v2)
   ═══════════════════════════════════════════════════════════════════════════ */

.sa-month-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    padding: .65rem 1rem;
    margin-bottom: .85rem;
    border-radius: var(--r-card);
    border: 1px solid var(--glass-stroke);
    background: linear-gradient(180deg, var(--glass-strong), rgba(255,255,255,.72));
    box-shadow: var(--shadow-soft);
}

.sa-month-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--glass-stroke);
    background: rgba(255,255,255,.72);
    color: var(--text-main);
    font-size: 1.3rem;
    font-weight: 300;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--t-fast);
    line-height: 1;
}

    .sa-month-arrow:hover {
        border-color: rgba(37,99,235,.48);
        background: rgba(219,234,254,.65);
        color: var(--accent-strong);
    }

.sa-month-arrow-off {
    opacity: .25;
    pointer-events: none;
}

.sa-month-label {
    text-align: center;
}

.sa-month-name {
    display: block;
    font-size: 1.05rem;
    font-weight: 650;
    color: var(--text-main);
}

.sa-month-stats {
    display: block;
    font-size: .82rem;
    color: var(--text-muted);
    margin-top: .05rem;
}


/* ═══════════════════════════════════════════════════════════════════════════
   8) METRIC CARDS  (mirrors Dashboard .metric-card, used on both SA pages)
   The previous flat .sa-kpi-card is retained as a fallback (see section 8b)
   but .sa-metric-card is the preferred structure going forward.
   ═══════════════════════════════════════════════════════════════════════════ */

.sa-metrics-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(220px, 1fr));
    gap: .9rem;
    margin-bottom: .85rem;
}

.sa-metric-card {
    position: relative;
    display: flex;
    gap: .75rem;
    padding: .75rem .9rem;
    border-radius: var(--r-card);
    border: 1px solid var(--glass-stroke);
    background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(248,250,252,.72));
    box-shadow: 0 12px 30px rgba(15,23,42,.07);
    backdrop-filter: blur(10px);
    overflow: hidden;
    transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}

    .sa-metric-card::before {
        content: "";
        position: absolute;
        inset: 0;
        opacity: 0;
        background: radial-gradient(circle at top right, rgba(37,99,235,.16), transparent 60%);
        transition: opacity var(--t-fast);
        pointer-events: none;
    }

    .sa-metric-card:hover {
        transform: translateY(-1px);
        box-shadow: 0 16px 38px rgba(15,23,42,.11);
        border-color: rgba(37,99,235,.50);
    }

        .sa-metric-card:hover::before {
            opacity: 1;
        }

.sa-metric-icon {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: rgba(15,23,42,.03);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4b5563;
}

    .sa-metric-icon svg {
        width: 20px;
        height: 20px;
    }

.sa-metric-info {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
}

    .sa-metric-info h4 {
        margin: 0;
        font-size: .78rem;
        text-transform: uppercase;
        letter-spacing: .10em;
        color: var(--text-muted);
        font-weight: 650;
    }

.sa-metric-main {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 650;
    color: var(--text-main);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}

.sa-metric-sub {
    margin: 0;
    font-size: .75rem;
    color: var(--text-muted);
}

.sa-vs-label {
    text-transform: uppercase;
    letter-spacing: .10em;
    font-size: .68rem;
    margin-right: .25rem;
    color: #9ca3af;
}

.sa-metric-delta {
    margin-top: .15rem;
    font-size: .75rem;
    font-weight: 560;
    padding: .14rem .5rem;
    border-radius: var(--r-pill);
    align-self: flex-start;
}

    .sa-metric-delta.sa-up {
        background: #ecfdf3;
        color: #166534;
    }

    .sa-metric-delta.sa-down {
        background: #fef2f2;
        color: #b91c1c;
    }


/* 8b) LEGACY flat KPI card — kept so any page still using it renders.
       New code should use .sa-metric-card above. */
.sa-kpi-card {
    flex: 1 1 220px;
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding: .75rem .9rem;
    border-radius: var(--r-card);
    border: 1px solid var(--glass-stroke);
    background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(248,250,252,.72));
    box-shadow: 0 12px 30px rgba(15,23,42,.07);
    backdrop-filter: blur(10px);
}

.sa-kpi-lbl {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .10em;
    color: var(--text-muted);
    font-weight: 650;
}

.sa-kpi-val {
    font-size: 1.05rem;
    font-weight: 650;
    color: var(--text-main);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
    line-height: 1.25;
    margin-top: .1rem;
}

.sa-kpi-sub {
    font-size: .75rem;
    color: var(--text-muted);
}

.sa-kpis {
    display: flex;
    gap: .9rem;
    margin-bottom: .85rem;
    flex-wrap: wrap;
}


/* ═══════════════════════════════════════════════════════════════════════════
   9) MONTH SUMMARY  (Index only — unchanged from v2)
   ═══════════════════════════════════════════════════════════════════════════ */

.sa-month-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: 1rem;
}

.sa-summary-stat {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.sa-summary-label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .10em;
    font-weight: 650;
    color: var(--text-muted);
}

.sa-summary-value {
    font-size: 1rem;
    font-weight: 650;
    color: var(--text-main);
}

.sa-summary-sub {
    font-size: .75rem;
    color: var(--text-muted);
}


/* ═══════════════════════════════════════════════════════════════════════════
   10) DAY PAGE — WEEK NAV + KPI ROW
   ═══════════════════════════════════════════════════════════════════════════ */

.sa-week-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: .75rem;
}

.sa-week-btn {
    padding: .3rem .8rem;
    border: 1px solid var(--glass-stroke);
    border-radius: var(--r-pill);
    font-size: .82rem;
    color: var(--text-main);
    background: rgba(255,255,255,.72);
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
}

    .sa-week-btn:hover {
        background: rgba(219,234,254,.65);
        border-color: rgba(37,99,235,.48);
        color: var(--accent-strong);
        transform: translateY(-1px);
    }

    .sa-week-btn.sa-disabled {
        color: var(--text-muted);
        opacity: .4;
        cursor: not-allowed;
    }

        .sa-week-btn.sa-disabled:hover {
            background: rgba(255,255,255,.72);
            border-color: var(--glass-stroke);
            color: var(--text-muted);
            transform: none;
        }

    .sa-week-btn.sa-overview {
        background: var(--accent-soft);
        color: var(--accent-strong);
        border-color: rgba(37,99,235,.22);
    }

.sa-week-label-wrap {
    position: relative;
}

.sa-week-label {
    font-size: 1.05rem;
    font-weight: 650;
    color: var(--text-main);
    background: none;
    border: none;
    cursor: pointer;
    padding: .25rem .55rem;
    border-radius: 8px;
    transition: background var(--t-fast);
}

    .sa-week-label:hover {
        background: rgba(15,23,42,.05);
    }

.sa-week-picker {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
}

/* Week KPI row uses .sa-metric-card above — grid container only */
.sa-kpi-row {
    display: grid;
    gap: .9rem;
    margin-bottom: .85rem;
}

    .sa-kpi-row.sa-kpi-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .sa-kpi-row.sa-kpi-4 {
        grid-template-columns: repeat(4, 1fr);
    }


/* ═══════════════════════════════════════════════════════════════════════════
   11) DAY PAGE — DIVISIONS CARD (toolbar + legend + accordions)
   Unchanged from v2 — this structure works and is SA-specific.
   ═══════════════════════════════════════════════════════════════════════════ */

.sa-divisions-card {
    padding: 0;
    overflow: visible;
}

.sa-divisions-toolbar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem 1.15rem;
    border-bottom: 1px solid var(--glass-stroke);
    background: linear-gradient(to bottom, rgba(15,23,42,.025), transparent);
    flex-wrap: wrap;
}

.sa-divisions-title {
    margin: 0;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--text-muted);
    flex-shrink: 0;
}

.sa-divisions-toolbar .sa-search-wrap {
    flex: 1 1 280px;
    max-width: 420px;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .75rem;
    border: 1px solid var(--glass-stroke);
    border-radius: 10px;
    background: rgba(255,255,255,.82);
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

    .sa-divisions-toolbar .sa-search-wrap:focus-within {
        border-color: rgba(37,99,235,.55);
        box-shadow: 0 0 0 3px rgba(37,99,235,.12);
    }

.sa-search-icon {
    color: var(--text-muted);
    flex-shrink: 0;
}

#saSearch {
    flex: 1;
    border: none;
    outline: none;
    font-size: .88rem;
    font-family: inherit;
    background: transparent;
    color: var(--text-main);
    min-width: 0;
}

.sa-search-clear {
    border: none;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1.1rem;
    padding: 0 .25rem;
    line-height: 1;
    transition: color var(--t-fast);
}

    .sa-search-clear:hover {
        color: var(--text-main);
    }

.sa-search-results {
    list-style: none;
    margin: 0;
    padding: .25rem 0;
    border: 1px solid var(--glass-stroke);
    border-radius: 10px;
    background: rgba(255,255,255,.98);
    backdrop-filter: blur(10px);
    max-height: 360px;
    overflow-y: auto;
    position: absolute;
    right: 1.15rem;
    top: calc(100% - .35rem);
    width: min(420px, calc(100% - 2.3rem));
    z-index: 20;
    box-shadow: 0 12px 30px rgba(15,23,42,.12);
}

    .sa-search-results li {
        padding: .5rem .75rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: .75rem;
        cursor: pointer;
        font-size: .82rem;
        color: var(--text-main);
        transition: background var(--t-fast);
    }

        .sa-search-results li:hover {
            background: rgba(219,234,254,.35);
        }

    .sa-search-results .sa-no-match {
        color: var(--text-muted);
        cursor: default;
        font-style: italic;
    }

        .sa-search-results .sa-no-match:hover {
            background: none;
        }

.sa-result-desc {
    color: var(--text-main);
}

.sa-result-meta {
    display: flex;
    gap: .5rem;
    align-items: center;
}

.sa-result-code {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    font-size: .78rem;
}

.sa-result-div {
    background: var(--accent-soft);
    color: var(--accent-strong);
    padding: 2px 8px;
    border-radius: var(--r-pill);
    font-size: .72rem;
    font-weight: 560;
}

.sa-divisions-legend {
    display: grid;
    gap: .5rem;
    align-items: end;
    padding: .75rem 1.15rem .6rem;
    font-size: .72rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 700;
    background: rgba(248,250,252,.85);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--glass-stroke);
    position: sticky;
    top: 0;
    z-index: 5;
}

.sa-legend-name {
    font-weight: 700;
    text-align: left;
}

.sa-daycol {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 0;
    gap: 1px;
}

    .sa-daycol.sa-today .sa-day-name,
    .sa-daycol.sa-today .sa-day-date {
        color: var(--accent);
        font-weight: 700;
    }

    .sa-daycol.sa-future {
        opacity: .4;
    }

    .sa-daycol.sa-empty-day {
        opacity: .55;
    }

.sa-day-name {
    font-weight: 700;
    font-size: .72rem;
}

.sa-day-date {
    font-weight: 400;
    font-size: .68rem;
    color: var(--text-muted);
    text-transform: none;
    letter-spacing: 0;
}

.sa-total-col,
.sa-change-col {
    text-align: right;
    justify-self: stretch;
    align-items: flex-end;
}

.sa-accordion {
    border-bottom: 1px solid rgba(148,163,184,.10);
}

    .sa-accordion:last-child {
        border-bottom: none;
    }

    .sa-accordion:nth-child(even) .sa-acc-header {
        background: var(--zebra-row);
    }

.sa-acc-header {
    width: 100%;
    display: grid;
    gap: .5rem;
    align-items: center;
    padding: .7rem 1.15rem;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: .88rem;
    text-align: left;
    color: var(--text-main);
    font-family: inherit;
    transition: background var(--t-fast);
}

    .sa-acc-header:hover {
        background: rgba(219,234,254,.35);
    }

.sa-accordion:nth-child(even) .sa-acc-header:hover {
    background: rgba(219,234,254,.40);
}

.sa-accordion.sa-expanded .sa-acc-header,
.sa-accordion.sa-expanded:nth-child(even) .sa-acc-header {
    background: rgba(219,234,254,.50);
}

.sa-acc-chevron {
    font-size: .72rem;
    color: var(--text-muted);
    transition: transform var(--t-fast), color var(--t-fast);
    justify-self: center;
}

.sa-accordion.sa-expanded .sa-acc-chevron {
    transform: rotate(90deg);
    color: var(--accent);
}

.sa-acc-name {
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
    font-size: .9rem;
}

.sa-acc-count {
    display: inline-block;
    padding: 1px 8px;
    border-radius: var(--r-pill);
    background: rgba(15,23,42,.06);
    color: var(--text-muted);
    font-weight: 400;
    font-size: .72rem;
    white-space: nowrap;
}

.sa-acc-daily {
    text-align: center;
    font-variant-numeric: tabular-nums;
    color: var(--text-main);
    font-size: .85rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .sa-acc-daily.sa-today-cell {
        background: var(--accent-soft);
        border-radius: 4px;
        padding: 2px 4px;
        color: var(--accent-strong);
        font-weight: 650;
    }

.sa-acc-weektotal {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: .95rem;
    white-space: nowrap;
    color: var(--text-main);
    padding-left: .75rem;
    border-left: 1px solid var(--glass-stroke);
}

.sa-acc-revenue {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 650;
    color: var(--text-main);
    font-size: .88rem;
}

.sa-acc-change {
    text-align: right;
    font-size: .78rem;
    font-weight: 560;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.sa-unit-badge {
    font-size: .68rem;
    padding: 1px 7px;
    border-radius: var(--r-pill);
    font-weight: 560;
    text-transform: lowercase;
    letter-spacing: .02em;
}

    .sa-unit-badge.sa-weight {
        background: #fef3c7;
        color: #92400e;
    }

    .sa-unit-badge.sa-mixed {
        background: #e0e7ff;
        color: #3730a3;
    }

.sa-divisions-legend .sa-total-col {
    padding-left: .75rem;
    border-left: 1px solid var(--glass-stroke);
}

.sa-acc-body {
    padding: 0 1.15rem 1rem;
    background: rgba(248,250,252,.75);
    border-top: 1px solid rgba(148,163,184,.12);
}

.sa-item-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .84rem;
    font-family: inherit;
}

    .sa-item-table thead th {
        text-align: center;
        font-weight: 650;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: .06em;
        font-size: .68rem;
        padding: .65rem .4rem .4rem;
        border-bottom: 1px solid var(--glass-stroke);
    }

        .sa-item-table thead th.sa-col-item {
            text-align: left;
            padding-left: .5rem;
        }

        .sa-item-table thead th.sa-col-code {
            text-align: left;
        }

    .sa-item-table .sa-day-sub {
        display: block;
        font-weight: 400;
        font-size: .62rem;
        text-transform: none;
        letter-spacing: 0;
        color: var(--text-muted);
        margin-top: 1px;
    }

    .sa-item-table tbody td {
        padding: .5rem .4rem;
        border-bottom: 1px solid rgba(148,163,184,.10);
        font-variant-numeric: tabular-nums;
        color: var(--text-main);
    }

    .sa-item-table tbody tr:last-child td {
        border-bottom: none;
    }

    .sa-item-table tbody tr:nth-child(even) td {
        background: rgba(255,255,255,.55);
    }

    .sa-item-table tbody tr:hover td {
        background: rgba(37,99,235,.06);
    }

    .sa-item-table tbody tr.sa-highlight td {
        background: #fef9c3;
        transition: background 1.5s;
    }

.sa-col-item {
    text-align: left;
    padding-left: .5rem;
    font-weight: 560;
    color: var(--text-main);
}

.sa-col-code {
    text-align: left;
    color: var(--text-muted);
    font-size: .78rem;
}

.sa-col-day {
    text-align: center;
    color: var(--text-main);
}

    .sa-col-day.sa-today-cell {
        background: rgba(37,99,235,.08);
    }

.sa-col-total {
    text-align: right;
    font-weight: 700;
    padding-right: .5rem;
    padding-left: .6rem;
    border-left: 1px solid rgba(148,163,184,.20);
}

.sa-col-revenue {
    text-align: right;
    padding-right: .5rem;
}

.sa-col-change {
    text-align: right;
    padding-right: .5rem;
    font-size: .75rem;
}


/* ═══════════════════════════════════════════════════════════════════════════
   12) TOP MOVERS  (Day page — unchanged from v2)
   ═══════════════════════════════════════════════════════════════════════════ */

.sa-movers-section {
    margin-bottom: .85rem;
}

.sa-movers-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    padding: 0 .15rem .55rem;
    flex-wrap: wrap;
}

.sa-movers-section-title {
    margin: 0;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.sa-movers-section-sub {
    font-size: .78rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.sa-movers-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .85rem;
}

.sa-mover-card {
    padding: 1rem 1.15rem;
}

.sa-mover-head {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-weight: 650;
    font-size: .9rem;
    margin-bottom: .75rem;
    padding-bottom: .6rem;
    border-bottom: 1px solid var(--glass-stroke);
    color: var(--text-main);
}

.sa-mover-icon {
    font-size: .85rem;
}

    .sa-mover-icon.sa-up {
        color: var(--positive);
    }

    .sa-mover-icon.sa-down {
        color: var(--negative);
    }

.sa-mover-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

    .sa-mover-list li {
        display: flex;
        flex-direction: column;
        gap: .25rem;
        padding: .6rem .75rem;
        border-radius: 10px;
        background: rgba(248,250,252,.75);
        border: 1px solid rgba(148,163,184,.15);
        transition: border-color var(--t-fast), background var(--t-fast);
    }

        .sa-mover-list li:hover {
            border-color: rgba(37,99,235,.25);
            background: rgba(255,255,255,.92);
        }

.sa-mover-item {
    font-size: .9rem;
    font-weight: 600;
    color: var(--text-main);
    line-height: 1.2;
}

.sa-mover-meta {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .78rem;
    flex-wrap: wrap;
}

.sa-mover-div {
    background: rgba(255,255,255,.95);
    color: var(--text-muted);
    padding: 1px 8px;
    border-radius: var(--r-pill);
    border: 1px solid var(--glass-stroke);
    font-size: .72rem;
    font-weight: 560;
}

.sa-mover-delta {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-size: .82rem;
}

    .sa-mover-delta.sa-up {
        color: var(--positive);
    }

    .sa-mover-delta.sa-down {
        color: var(--negative);
    }

.sa-mover-qty {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    font-size: .78rem;
    margin-left: auto;
}

.sa-mover-empty {
    color: var(--text-muted);
    font-size: .85rem;
    font-style: italic;
    padding: .75rem 0;
    text-align: center;
}


/* ═══════════════════════════════════════════════════════════════════════════
   13) FOOTER NAV + EMPTY STATE
   ═══════════════════════════════════════════════════════════════════════════ */

.sa-footer-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: .85rem 0;
    margin-top: .25rem;
    border-top: 1px solid var(--glass-stroke);
    flex-wrap: wrap;
}

.sa-empty {
    text-align: center;
    padding: 3rem 1.25rem;
}

.sa-empty-title {
    font-size: 1rem;
    font-weight: 650;
    color: var(--text-main);
    margin-bottom: .25rem;
}

.sa-empty-sub {
    font-size: .85rem;
    color: var(--text-muted);
}


/* ═══════════════════════════════════════════════════════════════════════════
   14) RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1200px) {
    .sa-metrics-strip {
        grid-template-columns: repeat(3, minmax(220px, 1fr));
    }

    .sa-kpi-row.sa-kpi-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .sa-month-summary-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .sa-filter-panel-group-row {
        grid-template-columns: repeat(2, minmax(160px, 1fr)) auto;
    }
}

@media (max-width: 1024px) {
    .sa-divisions-legend,
    .sa-acc-header {
        gap: .3rem;
        font-size: .72rem;
    }

    .sa-acc-daily {
        font-size: .78rem;
    }

    .sa-acc-weektotal {
        font-size: .85rem;
    }

    .sa-divisions-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

        .sa-divisions-toolbar .sa-search-wrap {
            max-width: none;
            margin-left: 0;
        }

    .sa-search-results {
        right: 1.15rem;
        left: 1.15rem;
        width: auto;
    }
}

@media (max-width: 900px) {
    .sa-headline-top {
        flex-direction: column;
        align-items: flex-start;
    }

    .sa-filter-panel-group-row {
        grid-template-columns: 1fr 1fr;
    }

    .sa-filter-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

    .sa-movers-row {
        grid-template-columns: 1fr;
    }

    .sa-week-nav {
        gap: .6rem;
    }

    .sa-tbl-pills {
        display: none;
    }

    .sa-month-nav {
        gap: .75rem;
    }

    .sa-month-name {
        font-size: .95rem;
    }

    .sa-acc-daily {
        font-size: .75rem;
    }

    .sa-metrics-strip {
        grid-template-columns: repeat(2, minmax(200px, 1fr));
    }
}

@media (max-width: 640px) {
    .sa-wrapper {
        padding-inline: .65rem;
    }

    .sa-headline-title {
        font-size: 1.15rem;
    }

    .sa-metrics-strip {
        grid-template-columns: 1fr;
    }

    .sa-kpi-row.sa-kpi-4,
    .sa-kpi-row.sa-kpi-2 {
        grid-template-columns: 1fr 1fr;
        gap: .85rem;
    }

    .sa-metric-main {
        font-size: 1rem;
    }

    .sa-tbl {
        font-size: .82rem;
    }

        .sa-tbl td {
            padding: .4rem .55rem;
        }

    .sa-item-table {
        font-size: .75rem;
    }

    .sa-filter-panel-group-row {
        grid-template-columns: 1fr;
    }

    .sa-btn {
        width: 100%;
        justify-content: center;
    }
}

@media (min-width: 1536px) {
    .sa-metrics-strip {
        grid-template-columns: repeat(4, minmax(192px, 1fr));
    }
}