/* ═══════════════════════════════════════════════════════════════════════════
   SALES ANALYTICS — sa-modal-history.css
   Purchase History Modal (Stage C). Loads after sa-shared.css.

   Owns:
     - 4-up summary band (totals over last 12 months)
     - "Sales this week" Mon–Sun strip (added in v2.2)
     - Empty state for the history table
     - Purchase history table (sticky thead, zebra rows, hover)
     - Remove-mapping ✕ column header sizing
     - Common helper cells (.sa-history-td-*, .sa-history-item-name)
       — these are shared with the Vendor Detail modal's purchase
       history section, but their primary owner is here.

   Does NOT own:
     - Modal shell — sa-shared.css
     - Vendor Detail's sales-this-week sub-grid — sa-modal-vendor-detail.css
       (different shape: multiple POS rows; this file's strip is single row)

   Modal markup: Pages/SalesAnalytics/Partials/_PurchaseHistoryModal.cshtml
   JS handlers: sales-analytics.js → openHistoryModal, renderHistoryPayload,
                                     handleHistoryRemoveClick
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 4-UP SUMMARY BAND ─────────────────────────────────────────────────── */

.sa-history-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .8rem;
    margin-bottom: 1rem;
}

.sa-history-summary-cell {
    padding: .85rem .95rem;
    border-radius: 12px;
    border: 1px solid var(--glass-stroke);
    background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(248, 250, 252, .78));
}

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

.sa-history-summary-value {
    margin-top: .32rem;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--text-main);
    font-variant-numeric: tabular-nums;
}

.sa-history-summary-sub {
    margin-top: .12rem;
    font-size: .72rem;
    color: var(--text-muted);
}


/* ── THIS-WEEK SALES STRIP (Mon–Sun, v2.2) ─────────────────────────────── */

.sa-history-week {
    margin-bottom: 1rem;
    border: 1px solid var(--glass-stroke);
    border-radius: 10px;
    background: rgba(255, 255, 255, .95);
    padding: .75rem .85rem .85rem;
}

.sa-history-week-title {
    margin: 0 0 .55rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.sa-history-week-grid {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    overflow-x: auto;
}

.sa-history-week-row {
    display: grid;
    grid-template-columns: repeat(7, minmax(48px, 1fr)) minmax(60px, .9fr);
    gap: .35rem;
    align-items: center;
    min-width: 540px;
}

.sa-history-week-row-headers {
    padding-bottom: .35rem;
    border-bottom: 1px solid var(--glass-stroke);
}

.sa-history-week-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

    .sa-history-week-header.sa-today .sa-history-week-day-name,
    .sa-history-week-header.sa-today .sa-history-week-day-date {
        color: var(--accent);
    }

.sa-history-week-day-name {
    font-weight: 700;
}

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

.sa-history-week-header-total {
    align-items: flex-end;
    text-align: right;
    border-left: 1px solid var(--glass-stroke);
    padding-left: .55rem;
}

.sa-history-week-cell {
    text-align: center;
    color: var(--text-main);
    padding: .25rem;
    border-radius: 4px;
    font-variant-numeric: tabular-nums;
    font-size: .9rem;
    font-weight: 600;
}

    .sa-history-week-cell.sa-empty {
        color: rgba(148, 163, 184, .70);
        font-weight: 400;
    }

    .sa-history-week-cell.sa-today {
        background: rgba(37, 99, 235, .10);
        color: var(--accent-strong);
        font-weight: 700;
    }

.sa-history-week-cell-total {
    text-align: right;
    border-left: 1px solid var(--glass-stroke);
    padding-left: .55rem;
    font-weight: 700;
}


/* ── HISTORY EMPTY STATE + TABLE ───────────────────────────────────────── */

.sa-history-empty {
    padding: .85rem .95rem;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, .16);
    background: rgba(248, 250, 252, .72);
    color: var(--text-muted);
    font-size: .82rem;
}

.sa-history-table-wrap {
    overflow: auto;
    border: 1px solid var(--glass-stroke);
    border-radius: 12px;
    background: rgba(255, 255, 255, .88);
}

.sa-history-table {
    width: 100%;
    min-width: 880px;
    border-collapse: collapse;
    font-size: .84rem;
    font-family: inherit;
}

    .sa-history-table thead th {
        position: sticky;
        top: 0;
        z-index: 1;
        padding: .55rem .7rem;
        border-bottom: 1px solid var(--glass-stroke);
        background: linear-gradient(to bottom, rgba(248, 250, 252, .98), rgba(255, 255, 255, .92));
        color: var(--text-muted);
        font-size: .68rem;
        font-weight: 700;
        letter-spacing: .10em;
        text-transform: uppercase;
        text-align: left;
        white-space: nowrap;
    }

    .sa-history-table tbody td {
        padding: .55rem .7rem;
        border-bottom: 1px solid rgba(148, 163, 184, .10);
        color: var(--text-main);
        vertical-align: middle;
        font-variant-numeric: tabular-nums;
    }

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

    .sa-history-table tbody tr:nth-child(even) td {
        background: rgba(248, 250, 252, .50);
    }

    .sa-history-table tbody tr:hover td {
        background: rgba(219, 234, 254, .22);
    }

.sa-history-th-num {
    text-align: right;
}

.sa-history-th-remove {
    width: 52px;
    text-align: center;
}

/* purchase row helper cells — also used by sa-modal-vendor-detail.css's
   purchase history table. Kept here because their primary use is Stage C. */

.sa-history-td-date {
    white-space: nowrap;
}

.sa-history-td-item {
    min-width: 220px;
}

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

.sa-history-td-num {
    text-align: right;
    white-space: nowrap;
}

.sa-history-td-invoice {
    color: var(--text-muted);
    font-size: .78rem;
    white-space: nowrap;
}