/* ═══════════════════════════════════════════════════════════════════════════
   SALES ANALYTICS — sa-day.css
   Day page layout. Loads after sa-shared.css, before modal/responsive files.

   Owns:
     - Day-page headline (compact variant) + week navigation
     - KPI pills strip
     - Movers (current `*-compact` variant; legacy `.sa-movers-section`
       lives here too because it's not Index-specific)
     - Partial-data banner
     - Footer nav, empty state
     - Divisions card shell: toolbar (without search dropdown — that's in
       sa-search.css), legend, accordion headers
     - Item-row grid (current implementation)

   Does NOT own:
     - Cross-source search dropdown — sa-search.css
     - Modals — sa-modal-*.css
     - Tokens, primitives, modal shell, toast — sa-shared.css
     - Responsive — sa-responsive.css
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 5) DAY HEADLINE + KPI ─────────────────────────────────────────────── */

.sa-headline-compact {
    padding: .65rem 1rem;
    border-radius: 16px;
    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;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

    .sa-headline-compact .sa-headline-title {
        margin: 0;
        font-size: 1.15rem;
        font-weight: 600;
        flex-shrink: 0;
    }

    .sa-headline-compact .sa-headline-actions {
        margin-left: auto;
    }

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

.sa-week-nav-inline {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

    .sa-week-nav-inline .sa-week-btn {
        padding: .22rem .6rem;
        font-size: .78rem;
    }

    .sa-week-nav-inline .sa-week-label {
        font-size: .95rem;
        font-weight: 650;
        padding: .22rem .5rem;
    }

    .sa-week-nav-inline .sa-week-pill {
        margin-left: 0;
    }

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

.sa-kpi-pill {
    display: inline-flex;
    align-items: baseline;
    gap: .4rem;
    padding: .28rem .70rem;
    border-radius: var(--r-pill);
    border: 1px solid var(--glass-stroke);
    background: rgba(255, 255, 255, .72);
    font-size: .82rem;
    line-height: 1.2;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    transition: background var(--t-fast), border-color var(--t-fast);
}

    .sa-kpi-pill:hover {
        background: rgba(255, 255, 255, .92);
        border-color: rgba(37, 99, 235, .30);
    }

.sa-kpi-pill-label {
    font-size: .68rem;
    font-weight: 650;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.sa-kpi-pill-value {
    font-weight: 650;
    color: var(--text-main);
}

.sa-kpi-pill-delta {
    font-size: .72rem;
    font-weight: 600;
    padding: .05rem .4rem;
    border-radius: var(--r-pill);
}

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

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


/* ── 6) MOVERS, BANNER, FOOTER NAV, EMPTY STATE ────────────────────────── */

.sa-movers-row-compact {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content: center;
    align-items: center;
    margin-bottom: .85rem;
    background-color: transparent;
}

/* NOTE: .sa-mover-card currently flattens its base .sa-card treatment
   (no border, no radius, !important white bg). This is the orphaned-look
   issue flagged in the v2 handoff — Phase 1B will restore card styling
   in a single isolated patch. Left as-is here to keep the file split
   truly visual-neutral. */
.sa-mover-card {
    border-radius: 0;
    border: none;
    background-color: #fff !important;
}

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

.sa-mover-hd-title {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 550;
    font-size: 1rem;
    color: var(--text-main);
}

.sa-mover-hd-sub {
    font-size: .82rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.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: .50rem;
    display: flex;
    flex-direction: row;
    gap: .5rem;
}

    .sa-mover-list li {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: .7rem;
        padding: .8rem 1rem;
        border-radius: 10px;
        background: none;
        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: .88rem;
    font-weight: 600;
    color: var(--text-main);
    line-height: 1.2;
}

.sa-mover-meta {
    display: flex;
    align-items: center;
    gap: .55rem;
    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;
}

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

.sa-partial-banner {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.15rem 1.35rem;
    background: linear-gradient(180deg, var(--warn-soft), rgba(255, 255, 255, .85));
    border: 1px solid rgba(249, 115, 22, .22);
}

.sa-partial-banner-icon {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(249, 115, 22, .10);
    color: var(--warn-strong);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sa-partial-banner-body {
    flex: 1;
    min-width: 0;
}

.sa-partial-banner-title {
    margin: 0 0 .3rem 0;
    font-size: 1rem;
    font-weight: 650;
    color: var(--text-main);
}

.sa-partial-banner-text {
    margin: 0;
    font-size: .88rem;
    line-height: 1.5;
    color: #4b5563;
}

    .sa-partial-banner-text strong {
        color: var(--text-main);
        font-weight: 650;
    }

.sa-partial-banner-cta {
    margin: .75rem 0 0 0;
}

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


/* ── 7) DIVISIONS SHELL (toolbar, legend, accordion headers) ───────────── */
/* The cross-source search dropdown that lives inside the toolbar has its
   own file — sa-search.css. That file also styles the .sa-search-wrap
   that sits inside .sa-divisions-toolbar. */

.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-subtitle {
    margin: 0;
    font-size: .78rem;
    color: var(--text-muted);
    flex-shrink: 0;
}

.sa-divisions-legend {
    display: grid;
    gap: .5rem;
    align-items: end;
    padding: .8rem 1.15rem .65rem;
    font-size: .74rem;
    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-divisions-legend .sa-total-col {
    padding-left: .75rem;
    border-left: 1px solid var(--glass-stroke);
}

.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: .8rem 1.15rem;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: .92rem;
    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;
}


/* ── 8) ITEM ROW GRID (current implementation) ─────────────────────────── */

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

.sa-item-rows {
    display: flex;
    flex-direction: column;
}

.sa-item-row {
    display: grid;
    gap: .5rem;
    align-items: center;
    padding: .55rem 1.15rem;
    font-size: .88rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-main);
    transition: background var(--t-fast);
}

    .sa-item-row:nth-child(even) {
        background: rgba(15, 23, 42, .018);
    }

    .sa-item-row:hover {
        background: rgba(37, 99, 235, .06);
    }

    .sa-item-row.sa-highlight {
        background: #fef9c3;
        transition: background 1.5s;
    }

.sa-item-cell {
    text-align: center;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sa-item-name {
    text-align: left;
    white-space: normal;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem;
    line-height: 1.3;
}

.sa-item-desc {
    font-weight: 560;
    color: var(--text-main);
}

.sa-item-code {
    font-size: .72rem;
    color: var(--text-muted);
    font-weight: 400;
    letter-spacing: .02em;
}

.sa-item-day {
    color: var(--text-main);
}

    .sa-item-day:empty::before {
        content: "·";
        color: rgba(148, 163, 184, .45);
    }

    .sa-item-day.sa-today-cell {
        background: rgba(37, 99, 235, .08);
        border-radius: 4px;
        color: var(--accent-strong);
        font-weight: 650;
    }

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

.sa-item-revenue {
    text-align: right;
    color: var(--text-main);
    font-weight: 560;
}

.sa-item-change {
    text-align: right;
    font-size: .8rem;
    font-weight: 560;
}

.sa-velocity-pill {
    display: inline-block;
    margin-left: .5rem;
    padding: .05rem .35rem;
    font-size: .78em;
    font-weight: 500;
    color: var(--text-muted);
    background: rgba(107, 114, 128, .08);
    border-radius: .25rem;
    white-space: nowrap;
    cursor: help;
}