/* ═══════════════════════════════════════════════════════════════════════════
   SALES ANALYTICS — sa-shared.css
   Foundation file. MUST load FIRST in the bundle.

   Owns:
     - Token block on .sa-wrapper (colors, radii, shadows, transitions)
     - Box-sizing safety
     - Shared primitives: cards, text helpers, pills/badges, buttons,
       week-nav controls, table primitives
     - Modal shell (sa-modal, sa-modal-overlay, sa-modal-dialog,
       sa-modal-header, sa-modal-body, sa-modal-footer, etc.)
       Used by Confirm / History / Vendor Detail modals.
     - Toast container + toast

   Does NOT own:
     - Page-specific layout (sa-day.css, sa-index.css)
     - Component-specific surfaces (sa-search.css, sa-modal-*.css)
     - Responsive rules (sa-responsive.css)

   Why these are grouped: the token block is the source of truth for every
   other file's color/spacing/radius references. Primitives are reused
   across pages and modals. The modal shell is identical for all three
   modals — only their contents differ. Splitting it per-modal would
   triple-duplicate ~80 lines of identical rules, which is the exact
   pattern the original v2 handoff flagged as the source of drift.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 0) SAFETY ─────────────────────────────────────────────────────────── */

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

[hidden] {
    display: none !important;
}

/* ── 1) CONTAINER + 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;
    --warn: #f97316;
    --warn-soft: #fff7ed;
    --warn-strong: #c2410c;
    --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;
    width: min(100%, 2560px);
    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 PRIMITIVES ──────────────────────────────────────────────── */

/* cards */

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

/* text 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-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;
}

/* pills / badges */

.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-week-pill {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border-radius: var(--r-pill);
    font-size: .68rem;
    font-weight: 650;
    letter-spacing: .04em;
    text-transform: lowercase;
    margin-left: .5rem;
    white-space: nowrap;
    vertical-align: middle;
}

.sa-pill-current {
    background: var(--accent-soft);
    color: var(--accent-strong);
    border: 1px solid rgba(37, 99, 235, .28);
}

.sa-pill-pospending {
    background: var(--warn-soft);
    color: var(--warn-strong);
    border: 1px solid rgba(249, 115, 22, .35);
}

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

/* buttons / controls */

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

    .sa-btn.ghost-warn {
        background: rgba(255, 247, 237, .85);
        border-color: rgba(249, 115, 22, .26);
        color: var(--warn-strong);
    }

        .sa-btn.ghost-warn:hover {
            background: rgba(255, 237, 213, .92);
            border-color: rgba(249, 115, 22, .38);
        }

    .sa-btn.sa-btn-sm {
        height: 32px;
        padding: 0 .8rem;
        font-size: .78rem;
    }

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

/* shared table primitives (Index .sa-tbl, state classes) */

.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-row-inprogress {
    background: linear-gradient(to right, rgba(37, 99, 235, .04), transparent 25%);
}

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

.sa-row-pospending {
    background: linear-gradient(to right, rgba(249, 115, 22, .05), transparent 25%);
}

    .sa-row-pospending:hover {
        background: rgba(255, 237, 213, .45);
    }

.sa-tbl-date-main {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
}

    .sa-tbl-date-main .sa-week-pill {
        margin-left: 0;
    }

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

.sa-tbl-date span {
    display: block;
    font-size: .72rem;
    color: var(--text-muted);
    margin-top: 2px;
}

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

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


/* ── 3) MODAL SHELL ────────────────────────────────────────────────────── */
/* Used by sa-modal-confirm.css, sa-modal-history.css,
   sa-modal-vendor-detail.css. Each of those files adds its own content
   styling on top of this shell. */

body.sa-modal-open {
    overflow: hidden;
}

.sa-modal {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: grid;
    place-items: center;
    padding: 20px;
}

    .sa-modal[hidden] {
        display: none !important;
    }

.sa-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .52);
    backdrop-filter: blur(4px);
}

.sa-modal-dialog {
    position: relative;
    z-index: 1;
    width: min(92vw, 760px);
    max-width: 760px;
    max-height: min(90vh, 1100px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, .20);
    background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(248, 250, 252, .96));
    box-shadow: 0 24px 64px rgba(15, 23, 42, .24);
}

    .sa-modal-dialog.sa-modal-dialog-wide {
        width: min(96vw, 1360px);
        max-width: 1360px;
    }

.sa-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.15rem;
    border-bottom: 1px solid var(--glass-stroke);
    background: linear-gradient(to bottom, rgba(255, 255, 255, .95), rgba(248, 250, 252, .75));
}

.sa-modal-title-block {
    min-width: 0;
}

.sa-modal-title {
    margin: 0;
    font-size: 1.12rem;
    font-weight: 650;
    color: var(--text-main);
    line-height: 1.25;
}

.sa-modal-subtitle {
    margin: .2rem 0 0;
    font-size: .82rem;
    color: var(--text-muted);
    line-height: 1.45;
}

.sa-modal-close {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid var(--glass-stroke);
    background: rgba(255, 255, 255, .72);
    color: var(--text-muted);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
}

    .sa-modal-close:hover {
        background: rgba(255, 255, 255, .92);
        border-color: rgba(37, 99, 235, .30);
        color: var(--text-main);
        transform: translateY(-1px);
    }

.sa-modal-body {
    padding: 1rem 1.15rem;
    overflow: auto;
    min-height: 0;
}

.sa-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .65rem;
    padding: .9rem 1.15rem 1rem;
    border-top: 1px solid var(--glass-stroke);
    background: rgba(255, 255, 255, .88);
}

.sa-modal-loading,
.sa-modal-error,
.sa-modal-empty {
    padding: .9rem 1rem;
    border-radius: 12px;
    font-size: .85rem;
    line-height: 1.45;
}

.sa-modal-loading {
    border: 1px solid rgba(148, 163, 184, .18);
    background: rgba(248, 250, 252, .85);
    color: var(--text-muted);
}

.sa-modal-error {
    border: 1px solid rgba(220, 38, 38, .16);
    background: #fef2f2;
    color: #991b1b;
}

.sa-modal-empty {
    border: 1px solid rgba(148, 163, 184, .18);
    background: rgba(248, 250, 252, .72);
    color: var(--text-main);
}

.sa-modal-empty-hint {
    color: var(--text-muted);
}

.sa-modal-intro {
    margin: 0 0 .85rem;
    padding: .75rem .9rem;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, .16);
    background: rgba(248, 250, 252, .72);
    font-size: .84rem;
    line-height: 1.5;
    color: var(--text-main);
}


/* ── 4) TOAST ──────────────────────────────────────────────────────────── */

.sa-toast-container {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 4500;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    pointer-events: none;
}

.sa-toast {
    max-width: 420px;
    padding: .7rem .85rem;
    background: rgba(15, 23, 42, .92);
    color: #f8fafc;
    border: 1px solid rgba(148, 163, 184, .30);
    border-radius: 10px;
    font-size: .85rem;
    line-height: 1.4;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .30);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .18s ease-out, transform .18s ease-out;
}

    .sa-toast.sa-toast-visible {
        opacity: 1;
        transform: translateY(0);
    }