/* ================================================================
   Sales Analytics — compact enterprise layout
   max-width 2560px, 36px row density, IBM Plex type system
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ── Tokens ───────────────────────────────────────────────────── */
:root {
    /* Density */
    --sa-row-h: 36px;
    --sa-card-pad-y: 10px;
    --sa-card-pad-x: 14px;
    --sa-gap: 10px;
    --sa-gap-tight: 6px;
    /* Type scale */
    --sa-fs-h1: 17px;
    --sa-fs-h2: 12.5px;
    --sa-fs-body: 12.5px;
    --sa-fs-num: 14px;
    --sa-fs-num-lg: 21px;
    --sa-fs-meta: 11px;
    --sa-fs-micro: 10.5px;
    /* Color */
    --sa-bg: #f7f7f5;
    --sa-surface: #ffffff;
    --sa-surface-2: #fafafa;
    --sa-surface-hover: #f4f4f3;
    --sa-border: #e6e6e3;
    --sa-border-em: #d4d4d0;
    --sa-text: #0a0a0a;
    --sa-text-2: #525252;
    --sa-text-mut: #a3a3a3;
    --sa-accent: #1f2937;
    --sa-accent-soft: #f1f1ee;
    /* Status */
    --sa-current: #1d4ed8;
    --sa-current-bg: #eff6ff;
    --sa-current-bd: #bfdbfe;
    --sa-pending: #b45309;
    --sa-pending-bg: #fffbeb;
    --sa-pending-bd: #fde68a;
    /* Radii */
    --sa-r-sm: 3px;
    --sa-r-md: 5px;
}

/* ── Wrapper ──────────────────────────────────────────────────── */
.sa-wrapper {
    max-width: 2560px;
    margin: 0 auto;
    background: var(--sa-bg);
    color: var(--sa-text);
    font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: var(--sa-fs-body);
    line-height: 1.4;
    display: flex;
    flex-direction: column;
    gap: var(--sa-gap);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    
}

.sa-num,
.sa-tbl .r,
.sa-metric-main,
.sa-metric-sub-num {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";

}

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

/* ════════════════════════════════════════════════════════════════
   1. HEADLINE
   ════════════════════════════════════════════════════════════════ */
.sa-headline {
    background: var(--sa-surface);
    border: 1px solid var(--sa-border);
    border-radius: var(--sa-r-md);
    padding: 10px 14px;
    
}

.sa-headline-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sa-gap);
}

.sa-headline-title {
    margin: 0;
    font-size: var(--sa-fs-h1);
    font-weight: 500;
    letter-spacing: -0.012em;
    line-height: 1.7;
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.sa-headline-title-suffix {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--sa-text-mut);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.sa-headline-meta {
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--sa-fs-meta);
    color: var(--sa-text-2);
}

    .sa-headline-meta > span:not([class]) {
        display: inline-flex;
        align-items: center;
    }

.sa-role {
    display: inline-flex;
    align-items: center;
    height: 17px;
    padding: 0 6px;
    border-radius: 2px;
    background: var(--sa-accent);
    color: #fff;
    font-size: 9.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1;
}

.sa-role-dir {
    background: #0f766e;
}

.sa-role-acct {
    background: #525252;
}

.sa-headline-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

/* ── Buttons ──────────────────────────────────────────────────── */
.sa-btn {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 10px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    border: 1px solid var(--sa-border);
    border-radius: var(--sa-r-sm);
    background: var(--sa-surface);
    color: var(--sa-text);
    text-decoration: none;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease;
    white-space: nowrap;
}

    .sa-btn:hover {
        background: var(--sa-accent-soft);
        border-color: var(--sa-border-em);
    }

    .sa-btn.primary {
        background: var(--sa-accent);
        color: #fff;
        border-color: var(--sa-accent);
    }

        .sa-btn.primary:hover {
            background: #111827;
        }

/* ════════════════════════════════════════════════════════════════
   2. FILTER
   ════════════════════════════════════════════════════════════════ */
.sa-filter-section {
    background: var(--sa-surface);
    border: 1px solid var(--sa-border);
    border-radius: var(--sa-r-md);
}

.sa-filter-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    flex-wrap: wrap;
}

.sa-filter-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 10px;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 500;
    border: 1px solid var(--sa-border);
    border-radius: var(--sa-r-sm);
    background: var(--sa-surface);
    color: var(--sa-text);
    cursor: pointer;
    transition: background .12s ease;
}

    .sa-filter-toggle-btn:hover {
        background: var(--sa-accent-soft);
    }

    .sa-filter-toggle-btn[aria-expanded="true"] {
        background: var(--sa-accent);
        color: #fff;
        border-color: var(--sa-accent);
    }

.sa-filter-toggle-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    opacity: .8;
}

.sa-filter-toggle-meta {
    font-size: 10.5px;
    font-weight: 400;
    opacity: .7;
}

.sa-filter-chips {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.sa-filter-chip {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 9px;
    font-size: 10.5px;
    background: var(--sa-surface);
    border: 1px solid var(--sa-border-em);
    border-radius: 11px;
    color: var(--sa-text-2);
    line-height: 1;
}

    .sa-filter-chip b {
        margin-left: 5px;
        color: var(--sa-text);
        font-weight: 600;
    }

.sa-filter-clear-link {
    font-size: 11px;
    color: var(--sa-text-2);
    text-decoration: underline;
    margin-left: auto;
}

    .sa-filter-clear-link:hover {
        color: var(--sa-text);
    }

.sa-filter-drawer {
    display: none;
    border-top: 1px solid var(--sa-border);
    padding: 10px;
}

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

.sa-filter-panel-group-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    align-items: end;
}

.sa-filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sa-filter-label {
    font-size: var(--sa-fs-micro);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--sa-text-2);
}

.sa-filter-select-wrap {
    position: relative;
}

.sa-filter-select {
    width: 100%;
    height: 30px;
    padding: 0 26px 0 8px;
    font-family: inherit;
    font-size: 12px;
    border: 1px solid var(--sa-border);
    border-radius: var(--sa-r-sm);
    background: var(--sa-surface);
    color: var(--sa-text);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

    .sa-filter-select:focus {
        outline: none;
        border-color: var(--sa-accent);
        box-shadow: 0 0 0 2px rgba(31,41,55,0.08);
    }

.sa-filter-select-wrap::after {
    content: "";
    position: absolute;
    right: 10px;
    top: 50%;
    width: 5px;
    height: 5px;
    border-right: 1.5px solid var(--sa-text-2);
    border-bottom: 1.5px solid var(--sa-text-2);
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
}

.sa-filter-actions {
    display: flex;
    gap: 6px;
}

/* ════════════════════════════════════════════════════════════════
   3. MONTH NAV
   ════════════════════════════════════════════════════════════════ */
.sa-month-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--sa-surface);
    border: 1px solid var(--sa-border);
    border-radius: var(--sa-r-md);
    padding: 5px 10px;
    height: 38px;
}

.sa-month-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: var(--sa-r-sm);
    color: var(--sa-text);
    text-decoration: none;
    font-size: 16px;
    line-height: 1;
    font-weight: 400;
    transition: background .12s ease;
}

    .sa-month-arrow:hover {
        background: var(--sa-accent-soft);
    }

.sa-month-arrow-off {
    color: var(--sa-text-mut);
    cursor: not-allowed;
}

    .sa-month-arrow-off:hover {
        background: transparent;
    }

.sa-month-label {
    flex: 1;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 12px;
}

.sa-month-name {
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.sa-month-stats {
    font-size: 11px;
    color: var(--sa-text-2);
    font-variant-numeric: tabular-nums;
}

/* ════════════════════════════════════════════════════════════════
   4. KPI STRIP (now 6 cards — Month-at-a-glance merged in)
   ════════════════════════════════════════════════════════════════ */
.sa-metrics-strip {
    display: flex;
    gap: .4rem;
}

.sa-metric-card {
    flex: 1;
    position: relative;
    background: var(--sa-surface);
    border: 1px solid var(--sa-border);
    border-radius: var(--sa-r-md);
    padding: 10px 14px 10px 16px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-height: 70px;
    overflow: hidden;
}

    .sa-metric-card::before {
        content: "";
        position: absolute;
        top: 10px;
        bottom: 10px;
        left: 0;
        width: 2px;
        background: var(--sa-accent);
        border-radius: 2px;
    }
/* Per-card accent variants for visual rhythm across the strip */
.sa-metric-accent-1::before {
    background: #1f2937;
}

.sa-metric-accent-2::before {
    background: #0f766e;
}

.sa-metric-accent-3::before {
    background: #7c3aed;
}

.sa-metric-accent-4::before {
    background: #b45309;
}

.sa-metric-accent-5::before {
    background: #047857;
}

.sa-metric-accent-6::before {
    background: #be123c;
}

.sa-metric-info h4 {
    margin: 0;
    font-size: var(--sa-fs-micro);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--sa-text-2);
}

.sa-metric-main {
    margin: 2px 0 0;
    font-size: var(--sa-fs-num-lg);
    font-weight: 600;
    letter-spacing: -0.022em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

    .sa-metric-main.sa-mut {
        color: var(--sa-text-mut);
        font-weight: 400;
    }

/* For text-valued metrics (Best week / Lowest active week).
   At 6-across on a 1440px viewport each card is ~228px wide, which leaves
   ~190px of content area. "Apr 27 – May 3" is the worst case — fits with
   a hair to spare, but we ellipsize anyway as a safety net for longer
   locale-formatted dates. */
.sa-metric-main-text {
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: -0.005em;
    line-height: 1.25;
    margin: 3px 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.sa-metric-sub {
    margin: 2px 0 0;
    font-size: 10.5px;
    color: var(--sa-text-2);
}

/* ════════════════════════════════════════════════════════════════
   5. CARDS / TABLE
   ════════════════════════════════════════════════════════════════ */
.sa-card {
    background: var(--sa-surface);
    border: 1px solid var(--sa-border);
    border-radius: var(--sa-r-md);
    overflow: hidden;
}

.sa-card-hd {
    padding: 9px 14px;
    border-bottom: 1px solid var(--sa-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sa-card-t {
    margin: 0;
    font-size: var(--sa-fs-h2);
    font-weight: 600;
    letter-spacing: -0.005em;
}

.sa-card-s {
    margin: 1px 0 0;
    font-size: 10.5px;
    color: var(--sa-text-2);
}

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

.sa-tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--sa-fs-body);
}

    .sa-tbl thead th {
        height: 30px;
        padding: 0 12px;
        text-align: left;
        font-weight: 500;
        font-size: var(--sa-fs-micro);
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--sa-text-2);
        background: var(--sa-surface-2);
        border-bottom: 1px solid var(--sa-border);
        white-space: nowrap;
    }

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

    .sa-tbl tbody td {
        height: var(--sa-row-h);
        padding: 0 12px;
        border-bottom: 1px solid var(--sa-border);
        vertical-align: middle;
        white-space: nowrap;
    }

        .sa-tbl tbody td.r {
            text-align: right;
            font-variant-numeric: tabular-nums;
            font-feature-settings: "tnum";
        }

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

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

.sa-tbl-row {
    transition: background .08s ease;
}

    .sa-tbl-row[data-url] {
        cursor: pointer;
    }

        .sa-tbl-row[data-url]:hover {
            background: var(--sa-surface-hover);
        }

        .sa-tbl-row[data-url]:focus {
            outline: none;
            background: var(--sa-surface-hover);
            box-shadow: inset 2px 0 0 var(--sa-accent);
        }

.sa-row-today {
    background: var(--sa-current-bg);
}

    .sa-row-today:hover {
        background: #dbeafe !important;
    }

.sa-row-empty td {
    color: var(--sa-text-mut);
}

.sa-row-empty .sa-tbl-date strong {
    color: var(--sa-text-2);
    font-weight: 500;
}

.sa-row-pospending .sa-tbl-date strong {
    color: var(--sa-text);
}

.sa-tbl-date {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding-top: 5px;
    padding-bottom: 5px;
}

.sa-tbl-date-main {
    display: flex;
    align-items: center;
    gap: 6px;
}

    .sa-tbl-date-main strong {
        font-weight: 600;
        font-size: 12.5px;
    }

.sa-tbl-date > span:last-child {
    font-size: 11px;
    color: var(--sa-text-2);
    font-variant-numeric: tabular-nums;
}

/* Status pills inside the date cell */
.sa-week-pill {
    display: inline-flex;
    align-items: center;
    height: 16px;
    padding: 0 6px;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 8px;
    line-height: 1;
}

.sa-pill-current {
    color: var(--sa-current);
    background: var(--sa-current-bg);
    border: 1px solid var(--sa-current-bd);
}

.sa-pill-pospending {
    color: var(--sa-pending);
    background: var(--sa-pending-bg);
    border: 1px solid var(--sa-pending-bd);
}

.sa-tbl-pills {
    display: flex;
    gap: 3px;
    flex-wrap: nowrap;
    overflow: hidden;
}

.sa-pill {
    display: inline-flex;
    align-items: center;
    height: 19px;
    padding: 0 7px;
    font-size: 10.5px;
    font-weight: 500;
    background: var(--sa-accent-soft);
    color: var(--sa-text-2);
    border-radius: 9px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    line-height: 1;
}
/* The number after the division name reads as one unit, so suppress the
   space between them visually with a tighter inline gap. */
.sa-pill {
    letter-spacing: -0.005em;
}

.sa-open-link {
    font-size: 11px;
    font-weight: 500;
    color: var(--sa-accent);
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    /* Negative tracking pulls the chevron closer to "View" — IBM Plex Mono's
       wide space character was leaving a visible gap. */
    letter-spacing: -0.04em;
}

.sa-row-empty .sa-open-link {
    color: var(--sa-text-mut);
}

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 1280px) {
    /* 3-up: each card claims ~1/3 minus gap. flex-wrap lets the row break. */
    .sa-metrics-strip {
        flex-wrap: wrap;
    }

    .sa-metric-card {
        flex: 1 1 calc(33.333% - 0.4rem);
    }
}

@media (max-width: 768px) {
    .sa-wrapper {
        padding: 12px;
    }

    .sa-headline-top {
        flex-direction: column;
        align-items: flex-start;
    }

    .sa-headline-actions {
        width: 100%;
    }

    .sa-metric-card {
        flex: 1 1 calc(50% - 0.4rem);
    }

    .sa-tbl-pills {
        flex-wrap: wrap;
    }

    .sa-month-stats {
        display: none;
    }
}