/* ============================================================
   Massanois Rep Cockpit — premium, minimal, decision-driven
   ============================================================ */

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

:root {
    /* Surface */
    --bg:           #f6f7f9;
    --surface:      #ffffff;
    --surface-2:    #fafbfc;
    --hairline:     #ececef;
    --hairline-2:   #e5e6ea;

    /* Ink */
    --ink:          #0b0f17;
    --ink-2:        #2a2f39;
    --ink-3:        #5a606b;
    --ink-mute:     #8b909a;
    --ink-faint:    #b9bcc4;

    /* Accent — single, restrained */
    --accent:       #1f5fff;
    --accent-bg:    #eaf0ff;
    --accent-ink:   #1f5fff;

    /* Status */
    --good:         #0f9d58;
    --good-bg:      #e7f6ee;
    --bad:          #d63f3f;
    --bad-bg:       #fdecec;
    --warn:         #b8730d;
    --warn-bg:      #fef4e0;

    /* Type */
    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    --font-numeric: "Inter", ui-monospace, SFMono-Regular, sans-serif;

    /* Layout */
    --radius:       14px;
    --radius-sm:    10px;
    --shadow-1:     0 1px 0 rgba(11,15,23,0.04), 0 1px 2px rgba(11,15,23,0.04);
    --shadow-2:     0 1px 0 rgba(11,15,23,0.04), 0 4px 16px rgba(11,15,23,0.06);

    --gutter: 18px;
}

@supports (font-variation-settings: normal) {
    :root { --font-sans: "Inter var", -apple-system, BlinkMacSystemFont, sans-serif; }
}

html, body {
    font-family: var(--font-sans);
    background: var(--bg);
    color: var(--ink);
    min-height: 100vh; min-height: 100dvh;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    font-size: 15px; line-height: 1.45; letter-spacing: -0.005em;
    padding-bottom: env(safe-area-inset-bottom);
    font-feature-settings: "ss01", "cv11";
}

.hidden { display: none !important; }

/* ============================================================
   LOGIN
   ============================================================ */
.login-screen {
    min-height: 100vh; min-height: 100dvh; display: flex;
    align-items: center; justify-content: center; padding: 24px;
    background: radial-gradient(circle at 30% 0%, #1d2638 0%, #0b0f17 50%, #060912 100%);
}
.login-box {
    background: var(--surface); padding: 36px 28px; border-radius: 18px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.35);
    width: 100%; max-width: 380px; text-align: center;
}
.login-mark {
    width: 44px; height: 44px; border-radius: 12px;
    background: linear-gradient(135deg, var(--ink) 0%, #1d2638 100%);
    color: #fff; font-weight: 700; font-size: 22px;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 18px;
}
.login-box h1 { color: var(--ink); margin-bottom: 4px; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.login-box p  { color: var(--ink-3); margin-bottom: 22px; font-size: 14px; }
.login-box input {
    width: 100%; padding: 13px 14px; margin: 6px 0;
    border: 1px solid var(--hairline-2); border-radius: 10px;
    font-size: 16px; -webkit-appearance: none; font-family: var(--font-sans);
    color: var(--ink); background: var(--surface-2);
}
.login-box input:focus { outline: none; border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px var(--accent-bg); }
.login-box button {
    width: 100%; padding: 13px; background: var(--ink); color: #fff;
    border: none; border-radius: 10px; font-size: 15px; font-weight: 600;
    cursor: pointer; margin-top: 10px; min-height: 46px;
    font-family: var(--font-sans);
}
.login-box button:active { background: #1d2638; }
.login-error {
    margin-top: 14px; padding: 10px;
    background: var(--bad-bg); color: var(--bad);
    border-radius: 8px; font-size: 14px;
}

/* ============================================================
   TOP BAR
   ============================================================ */
.app { padding-bottom: calc(82px + env(safe-area-inset-bottom)); }

.topbar {
    background: var(--surface);
    border-bottom: 1px solid var(--hairline);
    padding: 14px 20px; padding-top: calc(14px + env(safe-area-inset-top));
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    position: sticky; top: 0; z-index: 30;
}
.topbar-left { min-width: 0; }
.rep-name {
    font-size: 17px; font-weight: 600; letter-spacing: -0.01em;
    color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rep-meta {
    font-size: 12px; color: var(--ink-mute); margin-top: 1px;
    display: flex; align-items: center; gap: 6px;
}
.rep-meta .dot { color: var(--ink-faint); }

.topbar-right {
    display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}

.goal-pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 12px; background: var(--surface-2);
    border: 1px solid var(--hairline); border-radius: 999px;
    font-size: 12px; font-weight: 500; color: var(--ink-2);
}
.goal-pill-bar {
    width: 50px; height: 5px; background: var(--hairline-2);
    border-radius: 999px; overflow: hidden; position: relative;
}
.goal-pill-bar > span {
    display: block; height: 100%; width: 0%; background: var(--ink-2);
    border-radius: 999px; transition: width 400ms cubic-bezier(.2,.9,.3,1.2);
}
.goal-pill.pace-ahead .goal-pill-bar > span { background: var(--good); }
.goal-pill.pace-on-track .goal-pill-bar > span { background: var(--accent); }
.goal-pill.pace-behind .goal-pill-bar > span { background: var(--warn); }
.goal-pill.pace-very-behind .goal-pill-bar > span { background: var(--bad); }

.source-toggle {
    display: inline-flex; background: var(--surface-2);
    border: 1px solid var(--hairline); border-radius: 8px; padding: 2px;
}
.source-toggle button {
    padding: 5px 10px; background: transparent; border: none;
    font-size: 12px; font-weight: 500; color: var(--ink-mute);
    cursor: pointer; border-radius: 6px; font-family: var(--font-sans);
}
.source-toggle button.active {
    background: var(--surface); color: var(--ink);
    box-shadow: 0 1px 2px rgba(11,15,23,0.05);
    font-weight: 600;
}

.iconbtn {
    width: 36px; height: 36px; border-radius: 8px;
    background: var(--surface-2); border: 1px solid var(--hairline); color: var(--ink-2);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; text-decoration: none;
}
.iconbtn:hover { background: var(--hairline); }

.admin-bar {
    background: var(--accent-bg); border-bottom: 1px solid #d6e1ff;
    color: var(--accent-ink); padding: 8px 20px; font-size: 12px;
    display: flex; align-items: center; gap: 10px;
}
.admin-bar-label { font-weight: 600; }
.admin-bar select {
    flex: 1; max-width: 280px; padding: 5px 10px;
    border: 1px solid #d6e1ff; border-radius: 6px;
    background: var(--surface); font-size: 13px; color: var(--ink);
    font-family: var(--font-sans);
}

/* ============================================================
   MAIN LAYOUT
   ============================================================ */
.main {
    max-width: 1200px; margin: 0 auto;
    padding: 24px var(--gutter) 12px;
    display: flex; flex-direction: column; gap: 24px;
}
@media (max-width: 720px) {
    .main { padding: 18px 14px 10px; gap: 18px; }
}

.section-header {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 12px;
}
.section-header h2 {
    font-size: 13px; font-weight: 600; color: var(--ink-3);
    letter-spacing: 0.04em; text-transform: uppercase; margin: 0;
}
.section-header-page h2 {
    font-size: 18px; color: var(--ink); text-transform: none; letter-spacing: -0.01em;
}
.section-meta {
    font-size: 12px; color: var(--ink-mute); font-weight: 500;
}

/* ============================================================
   WEEK STRIP
   ============================================================ */
.week-grid {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;
}
.week-day {
    background: var(--surface); border: 1px solid var(--hairline);
    border-radius: var(--radius-sm); padding: 12px 10px;
    min-height: 96px; display: flex; flex-direction: column;
    text-decoration: none; color: inherit;
    transition: border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}
.week-day:hover { border-color: var(--ink-3); transform: translateY(-1px); }
.week-day.today { border-color: var(--ink); box-shadow: var(--shadow-1); }
.week-day-head {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 8px;
}
.week-day-name { font-size: 11px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; }
.week-day-num  { font-size: 14px; font-weight: 700; color: var(--ink); }
.week-day.today .week-day-num { color: var(--accent); }

.week-day-events { display: flex; flex-direction: column; gap: 4px; }
.week-event {
    font-size: 12px; line-height: 1.3; color: var(--ink-2);
    padding: 4px 6px; background: var(--surface-2); border-radius: 6px;
    cursor: pointer;
}
.week-event:hover { background: var(--accent-bg); color: var(--accent-ink); }
.week-event-time { font-weight: 600; color: var(--ink-3); font-size: 11px; }
.week-day-empty {
    color: var(--ink-faint); font-size: 11px; font-style: italic;
}
.week-day-placeholder {
    grid-column: 1 / -1; background: var(--surface);
    border: 1px dashed var(--hairline-2); border-radius: var(--radius-sm);
    padding: 18px; text-align: center; color: var(--ink-mute); font-size: 13px;
}

/* ============================================================
   TODAY'S PRIORITIES
   ============================================================ */
.priorities-list {
    background: var(--surface); border: 1px solid var(--hairline);
    border-radius: var(--radius); padding: 4px 0;
}
.priority {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 18px;
    border-top: 1px solid var(--hairline);
    cursor: pointer; transition: background 0.12s ease;
}
.priority:first-child { border-top: none; }
.priority:hover { background: var(--surface-2); }
.priority-icon {
    width: 32px; height: 32px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 13px; flex-shrink: 0;
}
.priority-icon.reorder { background: var(--accent-bg); color: var(--accent); }
.priority-icon.risk    { background: var(--bad-bg); color: var(--bad); }
.priority-icon.expand  { background: var(--good-bg); color: var(--good); }
.priority-icon.peer    { background: var(--warn-bg); color: var(--warn); }
.priority-body { flex: 1; min-width: 0; }
.priority-title {
    font-size: 14px; font-weight: 600; color: var(--ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.priority-sub {
    font-size: 12px; color: var(--ink-mute); margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.priority-meta {
    font-size: 12px; font-weight: 600; color: var(--ink-3);
    font-variant-numeric: tabular-nums; flex-shrink: 0;
}
.loading-row {
    padding: 18px; text-align: center; color: var(--ink-mute); font-size: 13px;
}

/* ============================================================
   TODAY'S BAG — compact cockpit strip
   Mirrors what the rep pre-loaded on /rep-dashboard/today. Chip per SKU,
   tap to open its sell sheet. Empty state nudges to the planner.
   ============================================================ */
.bag-strip {
    background: var(--surface); border: 1px solid var(--hairline);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius); padding: 12px 16px;
    box-shadow: var(--shadow-1);
    display: flex; flex-direction: column; gap: 8px;
}
.bag-strip-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
}
.bag-strip-title { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.bag-strip-label {
    font-size: 10px; font-weight: 700; color: var(--ink-mute);
    letter-spacing: 0.08em; text-transform: uppercase;
}
.bag-strip-count {
    font-size: 14px; font-weight: 700; color: var(--ink);
}
.bag-strip-actions { display: flex; gap: 10px; align-items: center; }
.bag-strip-link {
    font-size: 12px; font-weight: 600; color: var(--accent);
    text-decoration: none;
}
.bag-strip-link:hover { text-decoration: underline; }
.bag-strip-chips {
    display: flex; flex-wrap: wrap; gap: 6px;
    /* No chips when empty → show a subtle inline message instead. */
}
.bag-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 10px; background: var(--surface-2);
    border: 1px solid var(--hairline); border-radius: 14px;
    font-size: 12px; color: var(--ink-2); cursor: pointer;
    max-width: 280px; text-decoration: none;
    transition: background 0.1s ease, border-color 0.1s ease;
}
.bag-chip:hover { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); }
.bag-chip-name {
    font-weight: 600; color: inherit;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 220px;
}
.bag-chip-sub {
    font-size: 10px; color: var(--ink-mute);
    font-weight: 500;
}
.bag-strip-empty {
    font-size: 12px; color: var(--ink-mute);
    font-style: italic;
}

/* On narrow screens the bag chip set is the first thing the rep sees —
   don't let it dominate. Collapse very long chips. */
@media (max-width: 720px) {
    .bag-chip-name { max-width: 180px; }
    .bag-chip { max-width: 240px; }
}

/* ============================================================
   GOAL HERO
   ============================================================ */
.hero {
    background: var(--surface); border: 1px solid var(--hairline);
    border-radius: var(--radius); padding: 22px 24px;
    box-shadow: var(--shadow-1);
}
.hero-header {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 20px; margin-bottom: 16px;
}
.hero-eyebrow {
    font-size: 11px; font-weight: 600; color: var(--ink-3);
    letter-spacing: 0.06em; text-transform: uppercase;
}
.hero-headline {
    font-size: 44px; font-weight: 700; color: var(--ink);
    letter-spacing: -0.025em; line-height: 1; margin-top: 6px;
    font-variant-numeric: tabular-nums;
}
.hero-sub {
    font-size: 13px; color: var(--ink-3); margin-top: 6px;
    font-variant-numeric: tabular-nums;
}
.hero-pace { text-align: right; flex-shrink: 0; }
.hero-pace-chip {
    display: inline-flex; padding: 6px 12px; border-radius: 999px;
    font-size: 13px; font-weight: 600;
    background: var(--hairline); color: var(--ink-3);
}
.hero-pace-chip.pace-ahead    { background: var(--good-bg); color: var(--good); }
.hero-pace-chip.pace-on-track { background: var(--accent-bg); color: var(--accent); }
.hero-pace-chip.pace-behind   { background: var(--warn-bg); color: var(--warn); }
.hero-pace-chip.pace-very-behind { background: var(--bad-bg); color: var(--bad); }
.hero-pace-meta {
    font-size: 12px; color: var(--ink-mute); margin-top: 6px;
    font-variant-numeric: tabular-nums;
}

.hero-track {
    position: relative; height: 8px; background: var(--hairline-2);
    border-radius: 999px; overflow: visible;
}
.hero-track-fill {
    height: 100%; width: 0%; background: var(--ink);
    border-radius: 999px;
    transition: width 600ms cubic-bezier(.2,.9,.3,1.2), background 250ms ease;
}
.hero-track-fill.pace-ahead    { background: var(--good); }
.hero-track-fill.pace-on-track { background: var(--accent); }
.hero-track-fill.pace-behind   { background: var(--warn); }
.hero-track-fill.pace-very-behind { background: var(--bad); }
.hero-track-marker {
    position: absolute; top: -3px; bottom: -3px; width: 2px;
    background: rgba(11,15,23,0.5); border-radius: 2px; left: 0%;
    transition: left 600ms cubic-bezier(.2,.9,.3,1.2);
}

.hero-footer {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
    margin-top: 18px; padding-top: 16px;
    border-top: 1px solid var(--hairline);
}
.hero-footer > div { display: flex; flex-direction: column; gap: 2px; }
.hero-footer .lbl {
    font-size: 10px; font-weight: 600; color: var(--ink-mute);
    letter-spacing: 0.06em; text-transform: uppercase;
}
.hero-footer .val {
    font-size: 16px; font-weight: 700; color: var(--ink);
    font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.hero-footer .sub {
    font-size: 11px; font-weight: 600; color: var(--ink-mute);
    letter-spacing: -0.01em; margin-top: 1px;
}

@media (max-width: 720px) {
    .hero { padding: 18px 16px; }
    .hero-headline { font-size: 36px; }
    .hero-footer { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}

/* ============================================================
   MONTHLY GOALS STRIP
   ============================================================ */
.months-grid {
    background: var(--surface); border: 1px solid var(--hairline);
    border-radius: var(--radius); padding: 14px 16px;
    display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px;
}
@media (min-width: 720px) { .months-grid { grid-template-columns: repeat(12, 1fr); gap: 8px; } }

.month-cell {
    display: flex; flex-direction: column; align-items: stretch; gap: 4px;
    min-width: 0;
}
.month-cell .month-name {
    font-size: 10px; font-weight: 600; color: var(--ink-mute);
    text-transform: uppercase; letter-spacing: 0.04em;
    text-align: center;
}
.month-cell.current .month-name { color: var(--accent); }
.month-cell .month-bar-track {
    position: relative; height: 28px; background: var(--surface-2);
    border-radius: 5px; overflow: hidden;
    border: 1px solid var(--hairline);
}
.month-cell .month-bar {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: var(--ink-3); border-radius: 0 0 4px 4px;
    transition: height 400ms cubic-bezier(.2,.9,.3,1.2), background 200ms;
}
.month-cell .month-bar.attain-100 { background: var(--good); }
.month-cell .month-bar.attain-90  { background: var(--accent); }
.month-cell .month-bar.attain-70  { background: var(--warn); }
.month-cell .month-bar.attain-low { background: var(--bad); }
.month-cell .month-bar.empty      { background: var(--hairline-2); }

.month-cell .month-actual {
    font-size: 11px; font-weight: 700; color: var(--ink);
    font-variant-numeric: tabular-nums; text-align: center;
    line-height: 1.2; letter-spacing: -0.01em;
}
.month-cell .month-actual.empty { color: var(--ink-faint); font-weight: 500; }
.month-cell .month-goal {
    font-size: 10px; font-weight: 500; color: var(--ink-mute);
    font-variant-numeric: tabular-nums; text-align: center;
    line-height: 1.2;
}
.month-cell .month-pct {
    font-size: 10px; font-weight: 700;
    font-variant-numeric: tabular-nums; text-align: center;
    margin-top: 1px;
}
.month-cell .month-pct.empty       { color: var(--ink-faint); font-weight: 500; }
.month-cell .month-pct.attain-100  { color: var(--good); }
.month-cell .month-pct.attain-90   { color: var(--accent); }
.month-cell .month-pct.attain-70   { color: var(--warn); }
.month-cell .month-pct.attain-low  { color: var(--bad); }

@media (max-width: 720px) {
    .month-cell .month-bar-track { height: 24px; }
    .month-cell .month-actual { font-size: 10px; }
    .month-cell .month-goal { font-size: 9px; }
    .month-cell .month-pct { font-size: 9px; }
}

/* ============================================================
   TIMEFRAME KPI STRIP — YTD / MTD / T30 / T90 / T12M (no GP)
   Tight, mobile-friendly, scannable in 2 seconds.
   ============================================================ */
.tf-kpis {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
}
@media (min-width: 600px) { .tf-kpis { grid-template-columns: repeat(3, 1fr); gap: 10px; } }
@media (min-width: 1080px){ .tf-kpis { grid-template-columns: repeat(5, 1fr); gap: 10px; } }

.tf {
    background: var(--surface); border: 1px solid var(--hairline);
    border-radius: 10px; padding: 10px 12px;
    display: flex; flex-direction: column;
    min-width: 0; /* prevent overflow on narrow phones */
}
.tf-label {
    font-size: 9px; font-weight: 700; color: var(--ink-mute);
    letter-spacing: 0.08em; text-transform: uppercase;
    margin-bottom: 4px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tf-headline {
    display: flex; align-items: baseline; gap: 5px;
    margin-bottom: 2px;
}
.tf-value {
    font-size: 17px; font-weight: 700; color: var(--ink);
    font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1.05;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    min-width: 0;
}
.tf-delta {
    font-size: 11px; font-weight: 600;
    font-variant-numeric: tabular-nums;
    display: inline-flex; align-items: center; gap: 2px;
    flex-shrink: 0; line-height: 1.05;
}
.tf-delta.up   { color: var(--good); }
.tf-delta.down { color: var(--bad); }
.tf-delta.flat { color: var(--ink-mute); }
.tf-arrow { font-size: 9px; line-height: 1; }
.tf-vs {
    font-size: 10px; color: var(--ink-mute);
    font-variant-numeric: tabular-nums; line-height: 1.3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tf-accts {
    font-size: 11px; color: var(--ink-3); margin-top: 6px;
    padding-top: 6px; border-top: 1px solid var(--hairline);
    font-variant-numeric: tabular-nums;
    display: flex; align-items: baseline; gap: 4px;
    white-space: nowrap; overflow: hidden;
}
.tf-accts-num { color: var(--ink-2); font-weight: 600; }
.tf-accts-delta { font-size: 10px; font-weight: 600; display: inline-flex; align-items: center; gap: 1px; }
.tf-accts-delta.up   { color: var(--good); }
.tf-accts-delta.down { color: var(--bad); }
.tf-accts-delta.flat { color: var(--ink-mute); }
.tf-accts-py { color: var(--ink-faint); font-size: 10px; }
.tf-dot { color: var(--ink-faint); font-size: 10px; }

/* Slightly larger numbers when there's room (tablet+) */
@media (min-width: 600px) {
    .tf-value { font-size: 19px; }
    .tf-label { font-size: 10px; }
    .tf-vs    { font-size: 11px; }
    .tf-accts { font-size: 12px; }
}
@media (min-width: 1080px) {
    .tf { padding: 12px 14px; }
    .tf-value { font-size: 21px; }
    .tf-delta { font-size: 12px; }
}

/* ============================================================
   OPERATIONS — Open Orders / Bill & Holds / AR Aging
   ============================================================ */
.ops { display: flex; flex-direction: column; gap: 12px; }
.ops-grid {
    display: grid; grid-template-columns: 1fr; gap: 12px;
}
@media (min-width: 720px)  { .ops-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .ops-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1400px) { .ops-grid { grid-template-columns: 1fr 1fr 1fr 1fr; } }
/* 3-card variant (Orders / Holds / AR) */
@media (min-width: 1080px) { .ops-grid.ops-grid-3 { grid-template-columns: 1fr 1fr 1fr; } }
@media (min-width: 1400px) { .ops-grid.ops-grid-3 { grid-template-columns: 1.3fr 1fr 1fr; } }

/* Orders widget tabs */
.ops-tabs {
    display: inline-flex; gap: 2px;
    background: var(--surface-2); border: 1px solid var(--hairline);
    border-radius: 8px; padding: 2px;
    margin: 4px 0 10px;
}
.ops-tab {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 10px; background: transparent; border: none;
    font-size: 12px; font-weight: 600; color: var(--ink-mute);
    cursor: pointer; border-radius: 6px; font-family: var(--font-sans);
    min-height: 28px;
}
.ops-tab.active {
    background: var(--surface); color: var(--ink);
    box-shadow: 0 1px 2px rgba(11,15,23,0.05);
}
.ops-tab-count {
    font-size: 10px; font-weight: 700;
    padding: 0 6px; border-radius: 999px;
    background: var(--hairline); color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}
.ops-tab.active .ops-tab-count {
    background: var(--accent-bg); color: var(--accent-ink);
}

/* Global search */
.gsearch {
    position: sticky; top: 0; z-index: 15;
    padding: 0; margin-bottom: 0;
}
.gsearch-wrap {
    position: relative;
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px;
    background: var(--surface); border: 1px solid var(--hairline);
    border-radius: 10px;
    box-shadow: var(--shadow-1);
}
.gsearch-wrap:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-bg);
}
.gsearch-icon { color: var(--ink-mute); flex-shrink: 0; }
.gsearch-wrap input {
    flex: 1;
    background: transparent; border: none; outline: none;
    font-size: 14px; font-family: var(--font-sans); color: var(--ink);
    padding: 4px 0;
}
.gsearch-hint {
    font-size: 10px; font-weight: 600; color: var(--ink-mute);
    padding: 2px 6px; border: 1px solid var(--hairline); border-radius: 4px;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.gsearch-results {
    position: absolute; top: 100%; left: 0; right: 0;
    margin-top: 6px; max-height: 500px; overflow-y: auto;
    background: var(--surface); border: 1px solid var(--hairline);
    border-radius: 10px; box-shadow: 0 16px 48px rgba(11,15,23,0.16);
    z-index: 30;
}
.gsearch-section {
    padding: 6px 0;
    border-top: 1px solid var(--hairline);
}
.gsearch-section:first-child { border-top: none; }
.gsearch-section-head {
    font-size: 9px; font-weight: 700; color: var(--ink-mute);
    letter-spacing: 0.08em; text-transform: uppercase;
    padding: 6px 14px;
}
.gsearch-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
    padding: 8px 14px; cursor: pointer;
    transition: background 80ms;
}
.gsearch-row:hover { background: var(--accent-bg); }
.gsearch-row-title {
    font-size: 14px; font-weight: 600; color: var(--ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gsearch-row-sub {
    font-size: 11px; color: var(--ink-mute); margin-top: 1px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gsearch-row-meta {
    font-size: 11px; color: var(--ink-3); font-weight: 600;
    flex-shrink: 0; font-variant-numeric: tabular-nums; text-align: right;
}
.gsearch-kind {
    display: inline-block; padding: 2px 7px; border-radius: 999px;
    font-size: 9px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
    margin-right: 6px;
    background: var(--surface-2); color: var(--ink-mute); border: 1px solid var(--hairline);
    flex-shrink: 0;
}
.gsearch-kind.acct  { background: var(--accent-bg); color: var(--accent-ink); border-color: #d6e1ff; }
.gsearch-kind.brand { background: var(--good-bg);   color: var(--good);       border-color: #b8e5ca; }
.gsearch-kind.sku   { background: var(--warn-bg);   color: var(--warn);       border-color: #f7d78b; }
.gsearch-kind.note  { background: var(--surface-2); color: var(--ink-3);      border-color: var(--hairline); }
.gs-note-snip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-style: italic; }
.gs-outcome {
    display: inline-block; padding: 2px 8px; border-radius: 10px;
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em;
    background: var(--surface-2); color: var(--ink-3);
}
.gs-outcome.ordered  { background: var(--good-bg); color: var(--good); }
.gs-outcome.sampled  { background: var(--accent-bg); color: var(--accent-ink); }
.gs-outcome.declined { background: var(--bad-bg);  color: var(--bad); }
.gsearch-empty {
    padding: 18px; text-align: center; color: var(--ink-faint);
    font-size: 13px; font-style: italic;
}
/* Inventory chip in SKU search results. Same color vocabulary as the
   brand drawer so the rep's mental model is consistent:
     gs-stock-ok    green  — sellable
     gs-stock-low   amber  — <10 cs sellable
     gs-stock-held  amber  — 0 sellable, stock held/allocated
     gs-stock-water blue   — 0 sellable, containers inbound
     gs-stock-empty red    — fully OOS (no stock, no inbound)
*/
.gs-stock-chip {
    display: inline-block; padding: 2px 8px; border-radius: 10px;
    font-size: 10px; font-weight: 700; letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.gs-stock-ok    { background: var(--good-bg);   color: var(--good); }
.gs-stock-low   { background: var(--warn-bg);   color: var(--warn); }
.gs-stock-held  { background: var(--warn-bg);   color: var(--warn); }
.gs-stock-water { background: var(--accent-bg); color: var(--accent); }
.gs-stock-empty { background: var(--bad-bg);    color: var(--bad); }

/* Shipping card — lead with accent-tinted header */
.ops-card.ops-shipping {
    border-left: 3px solid var(--accent);
}
.ops-card.ops-shipping h3 { color: var(--accent-ink); }

/* Inline-expand rows on ops cards (mirrors dossier's .drillable pattern) */
.ops-row.drillable { position: relative; cursor: pointer; }
.ops-row.drillable::after {
    content: '▸'; position: absolute; right: 4px; top: 50%;
    transform: translateY(-50%);
    font-size: 9px; color: var(--ink-faint);
    transition: transform 180ms ease, color 180ms ease;
}
.ops-row.drillable.expanded::after {
    transform: translateY(-50%) rotate(90deg); color: var(--accent);
}
.ops-row-drill {
    background: var(--surface-2);
    border-top: 1px solid var(--hairline);
    padding: 8px 18px 10px;
    margin: 0 -18px;
}
.ops-row-drill table {
    width: 100%; border-collapse: collapse; font-size: 12px;
    font-variant-numeric: tabular-nums;
}
.ops-row-drill thead th {
    text-align: left; font-size: 9px; font-weight: 700;
    color: var(--ink-mute); padding: 4px 6px;
    text-transform: uppercase; letter-spacing: 0.06em;
    border-bottom: 1px solid var(--hairline);
}
.ops-row-drill thead th.num { text-align: right; }
.ops-row-drill tbody td {
    padding: 5px 6px; border-bottom: 1px solid var(--hairline);
    color: var(--ink-2); vertical-align: top;
}
.ops-row-drill tbody td.num { text-align: right; }
.ops-row-drill tbody td.bold { font-weight: 700; color: var(--ink); }
.ops-row-drill tbody tr:last-child td { border-bottom: none; }
.ops-row-drill .lname { font-weight: 600; color: var(--ink); line-height: 1.25; }
.ops-row-drill .lsub  { font-size: 10px; color: var(--ink-mute); margin-top: 1px; }
.ops-row-drill .drill-footer {
    display: flex; gap: 10px; justify-content: space-between;
    margin-top: 8px; padding-top: 6px;
    border-top: 1px dashed var(--hairline);
    font-size: 11px; color: var(--ink-mute);
}
.drill-so-group { margin-bottom: 8px; }
.drill-so-group:last-of-type { margin-bottom: 0; }
.drill-so-header {
    display: flex; align-items: baseline; justify-content: space-between;
    padding: 4px 0 2px;
    border-bottom: 1px solid var(--hairline);
    margin-bottom: 3px;
}
.drill-so-label {
    font-size: 10px; font-weight: 700; color: var(--accent-ink);
    letter-spacing: 0.08em; text-transform: uppercase;
    font-variant-numeric: tabular-nums;
}
.drill-so-sub {
    font-size: 10px; color: var(--ink-mute); font-weight: 500;
    font-variant-numeric: tabular-nums;
}
.ops-row-drill .open-dossier-link {
    font-size: 11px; font-weight: 600; color: var(--accent-ink);
    text-decoration: none;
}
.ops-row-drill .open-dossier-link:hover { text-decoration: underline; }

.ops-card {
    background: var(--surface); border: 1px solid var(--hairline);
    border-radius: var(--radius); padding: 16px 18px 6px;
    box-shadow: var(--shadow-1);
}
.ops-card header {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 10px; margin-bottom: 10px;
}
.ops-card h3 {
    font-size: 14px; font-weight: 600; color: var(--ink);
    letter-spacing: -0.01em;
}
.ops-summary {
    display: flex; flex-direction: column; align-items: flex-end; gap: 0;
}
.ops-num {
    font-size: 20px; font-weight: 700; color: var(--ink);
    line-height: 1; font-variant-numeric: tabular-nums;
}
.ops-amt {
    font-size: 11px; font-weight: 500; color: var(--ink-mute);
    margin-top: 2px; font-variant-numeric: tabular-nums;
}
.ops-card.ops-ar .ops-num { color: var(--ink); }
.ops-card.ops-ar .ops-amt.bad { color: var(--bad); font-weight: 600; }

.ops-aging-summary {
    display: grid; grid-template-columns: repeat(5, 1fr);
    gap: 4px; margin: 6px 0 8px;
    padding: 8px; background: var(--surface-2);
    border-radius: 8px;
}
.aging-bucket {
    display: flex; flex-direction: column; align-items: center; gap: 1px;
    padding: 4px 2px;
}
.aging-bucket .lbl {
    font-size: 9px; font-weight: 600; color: var(--ink-mute);
    letter-spacing: 0.04em;
}
.aging-bucket .val {
    font-size: 11px; font-weight: 700; color: var(--ink-2);
    font-variant-numeric: tabular-nums;
}
.aging-bucket.warn .lbl { color: var(--warn); }
.aging-bucket.warn .val { color: var(--warn); }
.aging-bucket.bad .lbl  { color: var(--bad); }
.aging-bucket.bad .val  { color: var(--bad); }

.ops-list {
    display: flex; flex-direction: column;
    margin: 0 -18px;
    max-height: 360px; overflow-y: auto;
}
.ops-row {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 8px 18px; border-top: 1px solid var(--hairline);
    cursor: pointer; transition: background 0.1s ease;
}
.ops-row:hover { background: var(--surface-2); }
.ops-row-body { flex: 1; min-width: 0; }
.ops-row-title {
    font-size: 13px; font-weight: 600; color: var(--ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ops-row-sub {
    font-size: 11px; color: var(--ink-mute); margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ops-row-meta {
    font-size: 13px; font-weight: 700; color: var(--ink-2);
    font-variant-numeric: tabular-nums; flex-shrink: 0;
    text-align: right; line-height: 1.3;
}
.ops-row-meta .small {
    display: block; font-size: 10px; font-weight: 500;
    color: var(--ink-mute); margin-top: 1px;
}
.ops-row-meta .bad { color: var(--bad); }
.ops-row-meta .warn { color: var(--warn); }
.ops-row-flag {
    display: inline-block; font-size: 10px; font-weight: 600;
    padding: 1px 6px; border-radius: 4px; margin-left: 6px;
    background: var(--bad-bg); color: var(--bad);
    text-transform: uppercase; letter-spacing: 0.04em;
}
.ops-row-flag.cod { background: var(--warn-bg); color: var(--warn); }
.ops-empty {
    padding: 20px 18px; text-align: center; color: var(--ink-faint);
    font-size: 12px; font-style: italic; border-top: 1px solid var(--hairline);
}

/* ============================================================
   COCKPIT TABLES (Top Accounts / Top Brands)
   ============================================================ */
.tables { display: flex; flex-direction: column; gap: 12px; }

.period-pills {
    display: inline-flex; background: var(--surface-2);
    border: 1px solid var(--hairline); border-radius: 8px; padding: 2px;
}
.period-pill {
    padding: 5px 12px; background: transparent; border: none;
    font-size: 12px; font-weight: 500; color: var(--ink-mute);
    cursor: pointer; border-radius: 6px; font-family: var(--font-sans);
    min-width: 44px;
}
.period-pill.active {
    background: var(--surface); color: var(--ink);
    box-shadow: 0 1px 2px rgba(11,15,23,0.05); font-weight: 600;
}
.tables-grid {
    display: grid; grid-template-columns: 1fr; gap: 12px;
}
@media (min-width: 900px) {
    .tables-grid { grid-template-columns: 1.4fr 1fr; }
}

.table-card {
    background: var(--surface); border: 1px solid var(--hairline);
    border-radius: var(--radius); padding: 18px 18px 4px;
    box-shadow: var(--shadow-1); overflow: hidden;
}
.table-card header {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-bottom: 10px;
}
.table-card h3 {
    font-size: 15px; font-weight: 600; color: var(--ink);
    letter-spacing: -0.01em;
}
.table-meta {
    font-size: 11px; font-weight: 500; color: var(--ink-mute);
    letter-spacing: 0.04em; text-transform: uppercase;
}
.cockpit-table-wrap {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    margin: 0 -18px;
}
.cockpit-table {
    width: 100%; border-collapse: collapse; font-size: 13px;
}
.cockpit-table thead th {
    text-align: left; font-size: 10px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--ink-mute); padding: 10px 12px 8px;
    border-bottom: 1px solid var(--hairline);
    background: var(--surface);
    white-space: nowrap;
}
.cockpit-table thead th:first-child { padding-left: 18px; }
.cockpit-table thead th:last-child { padding-right: 18px; }
.cockpit-table thead th.num { text-align: right; }
.cockpit-table tbody td {
    padding: 10px 12px; border-top: 1px solid var(--hairline);
    font-size: 13px; color: var(--ink-2);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.cockpit-table tbody td:first-child { padding-left: 18px; }
.cockpit-table tbody td:last-child { padding-right: 18px; }
.cockpit-table tbody td.num { text-align: right; }
.cockpit-table tbody td.name {
    font-weight: 600; color: var(--ink);
    max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cockpit-table tbody tr { cursor: pointer; transition: background 0.1s ease; }
.cockpit-table tbody tr:hover td { background: var(--surface-2); }

/* Sortable headers — click to sort, arrow indicates direction. */
.cockpit-table.sortable thead th[data-sort] {
    cursor: pointer; user-select: none;
    position: relative;
}
.cockpit-table.sortable thead th[data-sort]:hover { color: var(--ink); }
.cockpit-table.sortable thead th.sort-active { color: var(--accent); }
.cockpit-table.sortable thead th.sort-active::after {
    content: '▼'; font-size: 8px; margin-left: 4px;
    display: inline-block; vertical-align: middle;
    color: var(--accent);
}
.cockpit-table.sortable thead th.sort-active.sort-asc::after { content: '▲'; }

.cockpit-delta {
    display: inline-block; padding: 1px 6px; border-radius: 4px;
    font-size: 11px; font-weight: 600;
}
.cockpit-delta.up   { background: var(--good-bg); color: var(--good); }
.cockpit-delta.down { background: var(--bad-bg);  color: var(--bad); }
.cockpit-delta.flat { background: var(--hairline); color: var(--ink-mute); }
.cockpit-delta.new  { background: var(--accent-bg); color: var(--accent); font-style: italic; }

@media (max-width: 720px) {
    .table-card { padding: 14px 14px 4px; }
    .cockpit-table-wrap { margin: 0 -14px; }
    .cockpit-table thead th:first-child,
    .cockpit-table tbody td:first-child { padding-left: 14px; }
    .cockpit-table thead th:last-child,
    .cockpit-table tbody td:last-child { padding-right: 14px; }
    .cockpit-table tbody td.name { max-width: 140px; }
}

/* ============================================================
   OPPORTUNITIES
   ============================================================ */
.opps { display: flex; flex-direction: column; gap: 12px; }
.opp-grid {
    display: grid; grid-template-columns: 1fr; gap: 12px;
}
@media (min-width: 800px) {
    .opp-grid { grid-template-columns: 1fr 1fr; }
}

.opp-card {
    background: var(--surface); border: 1px solid var(--hairline);
    border-radius: var(--radius); padding: 18px 18px 8px;
    box-shadow: var(--shadow-1);
}
.opp-card header {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 4px;
}
.opp-icon {
    width: 28px; height: 28px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 14px; flex-shrink: 0;
}
.opp-reorder .opp-icon { background: var(--accent-bg); color: var(--accent); }
.opp-risk    .opp-icon { background: var(--bad-bg); color: var(--bad); }
.opp-expand  .opp-icon { background: var(--good-bg); color: var(--good); }
.opp-peer    .opp-icon { background: var(--warn-bg); color: var(--warn); }
.opp-card h3 {
    flex: 1; font-size: 15px; font-weight: 600; color: var(--ink);
    letter-spacing: -0.01em;
}
.opp-count {
    font-size: 12px; font-weight: 600; color: var(--ink-3);
    background: var(--surface-2); border: 1px solid var(--hairline);
    padding: 2px 8px; border-radius: 999px; min-width: 28px; text-align: center;
}
.opp-sub {
    font-size: 12px; color: var(--ink-mute); margin: 0 0 12px;
}
.opp-list {
    display: flex; flex-direction: column;
    margin: 0 -18px;
}
.opp-row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 18px; border-top: 1px solid var(--hairline);
    cursor: pointer; transition: background 0.1s ease;
}
.opp-row:hover { background: var(--surface-2); }
.opp-row-body { flex: 1; min-width: 0; }
.opp-row-title {
    font-size: 13px; font-weight: 600; color: var(--ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.opp-row-sub {
    font-size: 11px; color: var(--ink-mute); margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.opp-row-meta {
    font-size: 12px; font-weight: 600; color: var(--ink-3);
    font-variant-numeric: tabular-nums; flex-shrink: 0; text-align: right;
}
.opp-row-meta .down { color: var(--bad); }
.opp-row-meta .up   { color: var(--good); }
.opp-empty {
    padding: 14px 18px; text-align: center; color: var(--ink-faint);
    font-size: 12px; font-style: italic; border-top: 1px solid var(--hairline);
}

/* ============================================================
   BOTTOM ACTIONS
   ============================================================ */
.bottom-actions {
    position: fixed; bottom: 0; left: 0; right: 0;
    background: rgba(255,255,255,0.94);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    border-top: 1px solid var(--hairline);
    padding: 10px 16px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px; z-index: 20;
    max-width: 1200px; margin: 0 auto; left: 50%; transform: translateX(-50%); right: auto;
    width: 100%;
}
.btn-action {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 14px 16px; border-radius: 12px; font-size: 14px; font-weight: 600;
    border: none; cursor: pointer; min-height: 50px;
    transition: transform 100ms ease;
    font-family: var(--font-sans);
}
.btn-action:active:not(:disabled) { transform: scale(0.98); }
.btn-action:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-note  { background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--hairline-2); }
.btn-visit { background: var(--ink); color: #fff; }

@media (min-width: 1024px) {
    .bottom-actions {
        max-width: 520px; bottom: 18px;
        border-radius: 14px;
        border: 1px solid var(--hairline);
        box-shadow: 0 12px 36px rgba(11,15,23,0.10);
    }
}

/* ============================================================
   SEARCH RESULTS (shared by visit modal, etc.)
   ============================================================ */
.today-search-results {
    position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px;
    background: var(--surface); border: 1px solid var(--hairline);
    border-radius: 10px; box-shadow: 0 12px 32px rgba(11,15,23,0.12);
    max-height: 340px; overflow-y: auto; z-index: 110;
}
.today-search-row {
    padding: 10px 14px; border-top: 1px solid var(--hairline);
    cursor: pointer;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    transition: background 80ms;
}
.today-search-row:first-child { border-top: none; }
.today-search-row:hover { background: var(--accent-bg); }
.today-search-row::after {
    content: '→'; flex-shrink: 0;
    color: var(--ink-faint); font-size: 14px;
    transition: color 80ms, transform 120ms;
}
.today-search-row:hover::after { color: var(--accent); transform: translateX(2px); }
.today-search-row-title {
    font-size: 14px; font-weight: 600; color: var(--ink);
}
.today-search-row-sub {
    font-size: 11px; color: var(--ink-mute); margin-top: 1px;
}

/* ============================================================
   VISIT LOGGING modal — slide-in from the right
   ============================================================ */
.visit-modal {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: 100%; max-width: 540px;
    background: var(--bg);
    z-index: 101;
    transform: translateX(100%);
    transition: transform 280ms cubic-bezier(.2,.9,.3,1.2);
    display: flex; flex-direction: column;
    box-shadow: -16px 0 48px rgba(11,15,23,0.18);
}
.visit-modal.shown { transform: translateX(0); }

.visit-body {
    flex: 1; overflow-y: auto;
    padding: 16px;
    padding-bottom: calc(40px + env(safe-area-inset-bottom));
}

.visit-field { margin-bottom: 14px; }
.visit-field label {
    display: block;
    font-size: 10px; font-weight: 700; color: var(--ink-mute);
    letter-spacing: 0.06em; text-transform: uppercase;
    margin-bottom: 4px;
}
.visit-req {
    font-size: 9px; font-weight: 600; color: var(--bad);
    padding: 1px 6px; border-radius: 4px; background: var(--bad-bg);
    margin-left: 4px; letter-spacing: 0.04em;
}
.visit-field input[type="text"],
.visit-field input[type="date"],
.visit-field textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--hairline-2); border-radius: 8px;
    font-size: 15px; font-family: var(--font-sans);
    background: var(--surface); color: var(--ink);
    -webkit-appearance: none;
}
.visit-field textarea {
    resize: vertical; min-height: 160px; line-height: 1.45;
}
.visit-field input:focus,
.visit-field textarea:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-bg);
}

.visit-account-picker { position: relative; }
.visit-account-picked {
    padding: 10px 12px;
    background: var(--accent-bg);
    border: 1px solid #d6e1ff;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
}
.visit-account-picked .acct-name {
    font-size: 14px; font-weight: 600; color: var(--accent-ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.visit-account-picked button {
    background: transparent; border: none; color: var(--accent-ink);
    font-size: 18px; cursor: pointer; padding: 2px 8px;
}

.visit-mic-row {
    display: flex; align-items: center; gap: 10px; margin-top: 8px;
}
.visit-mic-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 999px;
    background: var(--surface-2); border: 1px solid var(--hairline-2);
    color: var(--ink-2); font-size: 12px; font-weight: 600;
    font-family: var(--font-sans); cursor: pointer;
}
.visit-mic-btn:hover { background: var(--hairline); }
.visit-mic-btn.recording {
    background: var(--bad); color: #fff; border-color: var(--bad);
    animation: pulse 1.2s ease-in-out infinite;
}
@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220,63,63,0.5); }
    50%      { box-shadow: 0 0 0 6px rgba(220,63,63,0); }
}
.visit-mic-status {
    font-size: 12px; color: var(--ink-mute); font-variant-numeric: tabular-nums;
}

.visit-actions {
    display: flex; gap: 8px; margin-top: 18px;
    padding-top: 14px; border-top: 1px solid var(--hairline);
}
.visit-btn-primary, .visit-btn-secondary {
    flex: 1; padding: 12px 16px; border-radius: 10px;
    font-size: 14px; font-weight: 600;
    border: none; cursor: pointer; font-family: var(--font-sans);
    min-height: 46px;
}
.visit-btn-primary {
    background: var(--ink); color: #fff;
}
.visit-btn-primary:hover { background: #1d2638; }
.visit-btn-primary:disabled { opacity: 0.55; cursor: not-allowed; }
.visit-btn-secondary {
    background: var(--surface-2); color: var(--ink-2);
    border: 1px solid var(--hairline-2);
}
.visit-btn-secondary:hover { background: var(--hairline); }

/* Step 2 review ------------------------------------------- */
.visit-review-summary {
    padding: 12px 14px; margin-bottom: 14px;
    background: var(--accent-bg); border-left: 3px solid var(--accent);
    border-radius: 8px; font-size: 13px; color: var(--ink-2); line-height: 1.5;
}
.visit-review-block { margin-bottom: 16px; }
.visit-review-block h3 {
    font-size: 11px; font-weight: 700; color: var(--ink-mute);
    letter-spacing: 0.06em; text-transform: uppercase;
    margin-bottom: 8px;
}
.visit-prod-row, .visit-action-row {
    padding: 10px 12px; margin-bottom: 6px;
    background: var(--surface); border: 1px solid var(--hairline);
    border-radius: 8px;
}
.visit-prod-row .row-head {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 8px; margin-bottom: 4px;
}
.visit-prod-name { font-size: 13px; font-weight: 600; color: var(--ink); }
.visit-outcome-chip {
    font-size: 10px; font-weight: 700;
    padding: 2px 8px; border-radius: 999px;
    letter-spacing: 0.04em; text-transform: uppercase;
    flex-shrink: 0;
}
.visit-outcome-chip.ordered   { background: var(--good-bg); color: var(--good); }
.visit-outcome-chip.sampled, .visit-outcome-chip.tasted { background: var(--accent-bg); color: var(--accent); }
.visit-outcome-chip.sample_requested { background: #fef4e0; color: var(--warn); }
.visit-outcome-chip.follow_up { background: var(--warn-bg); color: var(--warn); }
.visit-outcome-chip.declined { background: var(--bad-bg); color: var(--bad); }
.visit-outcome-chip.btg_interest { background: #eef6ef; color: var(--good); }
.visit-sentiment-dot {
    display: inline-block; width: 6px; height: 6px; border-radius: 50%;
    margin-right: 4px;
}
.visit-sentiment-dot.positive { background: var(--good); }
.visit-sentiment-dot.negative { background: var(--bad); }
.visit-sentiment-dot.neutral  { background: var(--ink-mute); }
.visit-sentiment-dot.interested { background: var(--accent); }
.visit-prod-feedback {
    font-size: 12px; color: var(--ink-2); line-height: 1.4;
}
.visit-prod-feedback-edit {
    width: 100%; border: 1px dashed var(--hairline-2); background: transparent;
    padding: 2px 6px; border-radius: 4px;
    font-size: 12px; font-family: var(--font-sans); color: var(--ink-2);
    resize: vertical; min-height: 40px;
}
.visit-prod-meta {
    font-size: 11px; color: var(--ink-mute); margin-top: 2px;
}
.visit-remove-row {
    background: transparent; border: none; color: var(--ink-faint);
    font-size: 14px; cursor: pointer; margin-left: auto;
}
.visit-remove-row:hover { color: var(--bad); }
.visit-action-row input[type="text"] {
    width: 100%; padding: 6px 8px;
    border: 1px solid var(--hairline-2); border-radius: 6px;
    font-size: 13px; font-family: var(--font-sans);
}

/* ============================================================
   ACCOUNT DOSSIER — slide-in drawer
   ============================================================ */
.dossier-overlay {
    position: fixed; inset: 0;
    background: rgba(11, 15, 23, 0.32);
    backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
    z-index: 100; opacity: 0;
    transition: opacity 220ms cubic-bezier(.2,.9,.3,1.2);
}
.dossier-overlay.shown { opacity: 1; }

.dossier {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: 100%; max-width: 580px;
    background: var(--bg);
    z-index: 101;
    transform: translateX(100%);
    transition: transform 280ms cubic-bezier(.2,.9,.3,1.2);
    display: flex; flex-direction: column;
    box-shadow: -16px 0 48px rgba(11,15,23,0.18);
}
.dossier.shown { transform: translateX(0); }

/* Brand drawer — same slide-in geometry as Account Dossier, but sits on
   top (higher z-index) so it can stack over a dossier when a rep taps a
   brand inside an account. The overlay also stacks. */
#brand-overlay { z-index: 102; }
.brand-drawer { z-index: 103; max-width: 560px; }
/* Slightly narrower than dossier to hint at stacking visually */
.brand-drawer .dossier-head { background: var(--accent-ink, var(--ink)); }

/* Brand drawer body blocks. Hero uses object-fit:contain (not cover) so
   the whole image shows — previously a bottle-shot got cropped to its
   middle strip and looked like "just a bottle neck". Background is a
   soft neutral so letterboxing on tall bottle images doesn't jar. */
.brand-hero-img {
    width: 100%; height: 160px;
    object-fit: contain;
    display: block;
    background: linear-gradient(180deg, #f7f5f1 0%, #ece8df 100%);
    padding: 12px;
}
.brand-edu {
    padding: 16px 20px; background: linear-gradient(180deg, #fff 0%, var(--surface-2) 100%);
    border-bottom: 1px solid var(--hairline);
}
.brand-edu h3 {
    font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--ink-mute);
    margin: 0 0 6px;
}
.brand-edu-story {
    font-size: 14px; line-height: 1.55; color: var(--ink);
    white-space: pre-wrap;
}
.brand-edu-story.clamped {
    display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical;
    overflow: hidden;
}
.brand-edu-toggle {
    background: none; border: none; padding: 6px 0 0;
    color: var(--accent); font-size: 12px; font-weight: 600;
    cursor: pointer; text-decoration: underline;
}
.brand-meta-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
    margin-top: 12px; font-size: 12px;
}
.brand-meta-grid dt {
    font-size: 10px; font-weight: 700; color: var(--ink-mute);
    letter-spacing: 0.06em; text-transform: uppercase;
}
.brand-meta-grid dd { margin: 0; color: var(--ink); font-weight: 600; }
.brand-website {
    color: var(--accent); text-decoration: none; font-weight: 600;
}
.brand-website:hover { text-decoration: underline; }

/* Portfolio (SKU list) inside the drawer */
.brand-skus {
    padding: 14px 20px;
}
.brand-sku {
    display: grid; grid-template-columns: 1fr auto; gap: 4px 12px;
    padding: 10px 0; border-top: 1px solid var(--hairline);
    align-items: baseline;
}
.brand-sku:first-child { border-top: none; }
.brand-sku-name { font-size: 13px; font-weight: 600; color: var(--ink); }
.brand-sku-meta { font-size: 11px; color: var(--ink-mute); }
.brand-sku-price { font-size: 13px; font-weight: 700; color: var(--accent); text-align: right; }
.brand-sku-sub { font-size: 11px; color: var(--ink-mute); text-align: right; }
.brand-sku-link { color: var(--accent); font-size: 11px; font-weight: 600; text-decoration: none; }
.brand-sku-link:hover { text-decoration: underline; }
.brand-sku-cases-chip {
    display: inline-block; padding: 1px 6px; border-radius: 10px;
    background: var(--accent-bg); color: var(--accent);
    font-size: 10px; font-weight: 700; margin-left: 6px;
}

/* Unified chip style for brand-drawer SKU row info. Two kinds:
    - chip-avail-*  : live warehouse stock for the rep's state
    - chip-t12m     : rep's own 12-month sales (not inventory!)
   Separate classes so the rep can never confuse availability with sales. */
.brand-sku-chips {
    display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px;
}
.brand-sku-chip {
    display: inline-block; padding: 2px 7px; border-radius: 10px;
    font-size: 10px; font-weight: 700; letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
}
.chip-avail-ok    { background: var(--good-bg); color: var(--good); }
.chip-avail-low   { background: var(--warn-bg); color: var(--warn); }
.chip-avail-held  { background: var(--warn-bg); color: var(--warn); }
/* "On water" — inbound but not landed yet. Distinct from held (amber)
   and from OOS (red): it's actionable in the "pre-sell / set expectation"
   direction. Soft blue so it reads as "coming soon, good news". */
.chip-avail-water { background: var(--accent-bg); color: var(--accent); }
.chip-avail-empty { background: var(--bad-bg);  color: var(--bad);  }
.chip-t12m        { background: var(--accent-bg); color: var(--accent); }

/* ============================================================
   BRAND DRAWER — Sprint 2 sections
   Gamified scoreboard at top, quest-style whitespace, win chips on
   samples. Green = momentum, red = attention, both meant to bait a
   dopamine hit when the rep opens the drawer.
   ============================================================ */

/* Performance — four big tiles. Large readable $ headline, cases sub,
   PY-delta badge. No GP or cost anywhere. */
.brand-perf-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
    padding: 6px 0 2px;
}
@media (min-width: 520px) {
    .brand-perf-grid { grid-template-columns: repeat(4, 1fr); gap: 10px; }
}
.brand-perf-tile {
    background: var(--surface-2);
    border: 1px solid var(--hairline);
    border-radius: 10px;
    padding: 10px 12px;
    display: flex; flex-direction: column; gap: 2px;
    min-width: 0;
}
.brand-perf-lbl {
    font-size: 10px; font-weight: 700; color: var(--ink-mute);
    letter-spacing: 0.08em; text-transform: uppercase;
}
.brand-perf-val {
    font-size: 22px; font-weight: 800; color: var(--ink);
    letter-spacing: -0.03em; line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.brand-perf-sub {
    font-size: 11px; color: var(--ink-mute);
    font-variant-numeric: tabular-nums;
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}

/* Delta pill used in perf tiles + top-account rows. Bold enough to read
   at a glance; colored to match the cockpit green/red vocabulary. */
.brand-delta {
    display: inline-block; padding: 1px 6px; border-radius: 10px;
    font-size: 10px; font-weight: 800; letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
}
.brand-delta-up   { background: var(--good-bg); color: var(--good); }
.brand-delta-down { background: var(--bad-bg);  color: var(--bad);  }
.brand-delta-flat { background: var(--hairline); color: var(--ink-mute); }
.brand-delta-new  { background: var(--accent-bg); color: var(--accent); font-style: italic; }

/* Top accounts toggle — sits inline in the section header. Compact and
   uses the same visual as the cockpit source-toggle so it feels native. */
.brand-ta-toggle {
    display: inline-flex; background: var(--surface-2);
    border: 1px solid var(--hairline); border-radius: 8px; padding: 2px;
}
.brand-ta-toggle button {
    padding: 4px 10px; background: transparent; border: none;
    font-size: 11px; font-weight: 600; color: var(--ink-mute);
    cursor: pointer; border-radius: 6px; font-family: inherit;
    letter-spacing: 0.04em;
}
.brand-ta-toggle button.active {
    background: var(--surface); color: var(--ink);
    box-shadow: 0 1px 2px rgba(11,15,23,0.06);
}

/* Whitespace — each row is a "quest". Amber left stripe signals
   opportunity (not a warning), distinct enough from the regular grey
   dlist rows that the section reads as actionable. */
.brand-ws-row {
    border-left: 3px solid var(--warn) !important;
    padding-left: 10px !important;
    background: linear-gradient(90deg, var(--warn-bg) 0%, transparent 60%);
}
.brand-ws-row:hover {
    background: linear-gradient(90deg, var(--warn-bg) 0%, var(--surface-2) 70%);
}
/* Container for the dsec — slightly warmer background so the whole
   section reads as "opportunity zone", not "warnings". */
.brand-ws .dlist { gap: 6px; }
.brand-sku-inactive { opacity: 0.55; }

.dossier-head {
    background: var(--ink);
    color: #fff;
    padding: 18px 22px;
    padding-top: calc(18px + env(safe-area-inset-top));
    display: flex; align-items: flex-start; gap: 12px;
    flex-shrink: 0;
}
.dossier-close {
    background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.18);
    color: #fff; padding: 8px; border-radius: 8px;
    cursor: pointer; flex-shrink: 0;
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
}
.dossier-close:hover { background: rgba(255,255,255,0.2); }
.dossier-head-left { flex: 1; min-width: 0; }
.dossier-acct-name {
    font-size: 20px; font-weight: 700; letter-spacing: -0.02em;
    line-height: 1.2;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dossier-acct-sub {
    font-size: 12px; color: rgba(255,255,255,0.65);
    margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Chips row: inline chips + "Plan visit" button, all same size. */
.dossier-chips-row {
    display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
    margin-top: 8px;
}
.dossier-chips {
    display: inline-flex; flex-wrap: wrap; gap: 5px;
}

/* "Plan visit" button + popover inside the dossier header.
   Lives on the dark header so it inherits white-on-dark coloring.
   Rendered chip-sized to match the DNS / Collections / market chips
   right next to it — one visual row, not a separate action area. */
.dossier-head-actions { position: relative; display: inline-flex; align-items: center; }
.plan-btn {
    display: inline-flex; align-items: center; gap: 4px;
    background: rgba(255,255,255,0.12); color: #fff;
    border: 1px solid rgba(255,255,255,0.22);
    padding: 3px 9px; border-radius: 999px;
    font-size: 11px; font-weight: 500; cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
    white-space: nowrap;
}
.plan-btn:hover { background: rgba(255,255,255,0.20); border-color: rgba(255,255,255,0.35); }
.plan-btn svg { opacity: 0.95; }

.plan-popover {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 40;
    min-width: 280px; max-width: 320px;
    background: var(--surface); color: var(--ink);
    border: 1px solid var(--hairline); border-radius: 10px;
    box-shadow: 0 10px 28px rgba(10, 16, 30, 0.28);
    padding: 12px; display: flex; flex-direction: column; gap: 10px;
}
.plan-popover-head {
    font-size: 11px; font-weight: 700; color: var(--ink-3);
    text-transform: uppercase; letter-spacing: 0.04em;
}
.plan-popover-days { display: flex; flex-wrap: wrap; gap: 6px; }
.plan-day-btn {
    font-size: 12px; font-weight: 600; padding: 6px 10px;
    border: 1px solid var(--hairline); border-radius: 999px;
    background: var(--surface-2); color: var(--ink-2); cursor: pointer;
    white-space: nowrap;
}
.plan-day-btn:hover  { border-color: var(--ink-3); }
.plan-day-btn.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.plan-popover-row { display: flex; align-items: center; gap: 8px; }
.plan-popover-row label {
    font-size: 11px; color: var(--ink-3); font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.plan-popover-row input[type="time"],
.plan-popover-row input[type="date"] {
    flex: 1; padding: 6px 8px; border: 1px solid var(--hairline);
    border-radius: 6px; background: var(--surface-2); color: var(--ink);
    font-size: 13px; font-variant-numeric: tabular-nums;
}
.plan-popover-footer { display: flex; align-items: center; gap: 10px; }
.plan-btn-primary {
    background: var(--ink); color: #fff; border: 0;
    padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 600;
    cursor: pointer;
}
.plan-btn-primary:hover:not(:disabled) { background: #000; }
.plan-btn-primary:disabled { opacity: 0.6; cursor: wait; }
.plan-popover-msg { font-size: 12px; color: var(--ink-3); }
.plan-popover-msg.ok   { color: var(--good); }
.plan-popover-msg.err  { color: var(--bad); }
.plan-popover-msg.info { color: var(--ink-3); }
.dossier-chip {
    display: inline-flex; align-items: center;
    background: rgba(255,255,255,0.12); color: #fff;
    border: 1px solid rgba(255,255,255,0.18);
    padding: 3px 9px; border-radius: 999px;
    font-size: 11px; font-weight: 500;
}
.dossier-chip.bad { background: rgba(220,63,63,0.20); border-color: rgba(220,63,63,0.4); color: #fda6a6; }
.dossier-chip.warn { background: rgba(184,115,13,0.22); border-color: rgba(184,115,13,0.4); color: #fbd07c; }
.dossier-chip.good { background: rgba(15,157,88,0.20); border-color: rgba(15,157,88,0.4); color: #a8e6c1; }
.dossier-chip.strong.bad {
    background: var(--bad); color: #fff;
    border-color: var(--bad);
    font-weight: 700; letter-spacing: 0.04em;
    padding: 4px 11px; font-size: 12px;
    box-shadow: 0 0 0 2px rgba(220,63,63,0.35);
}

.dossier-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    padding-bottom: calc(40px + env(safe-area-inset-bottom));
    display: flex; flex-direction: column; gap: 14px;
}
.dossier-loading {
    padding: 40px; text-align: center; color: var(--ink-mute);
    font-size: 14px;
}

.dsec {
    background: var(--surface); border: 1px solid var(--hairline);
    border-radius: var(--radius); padding: 14px 16px;
    box-shadow: var(--shadow-1);
}
.dsec-head {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 10px; gap: 8px;
}
.dsec-head h3 {
    font-size: 12px; font-weight: 700; color: var(--ink-3);
    text-transform: uppercase; letter-spacing: 0.06em;
}
.dsec-meta {
    font-size: 11px; color: var(--ink-mute); font-weight: 500;
}

/* Stat grid for KPIs in dossier */
.dstat-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
@media (min-width: 480px) { .dstat-grid { grid-template-columns: repeat(4, 1fr); } }
.dstat {
    padding: 8px 10px; background: var(--surface-2);
    border-radius: 8px; border: 1px solid var(--hairline);
}
.dstat-label {
    font-size: 9px; font-weight: 700; color: var(--ink-mute);
    letter-spacing: 0.06em; text-transform: uppercase;
}
.dstat-value {
    font-size: 17px; font-weight: 700; color: var(--ink);
    margin-top: 2px; font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
    line-height: 1.1;
}
.dstat-delta {
    font-size: 10px; font-weight: 600; margin-top: 1px;
    color: var(--ink-mute); font-variant-numeric: tabular-nums;
}
.dstat-delta.up   { color: var(--good); }
.dstat-delta.down { color: var(--bad); }

/* Account Snapshot — cadence + payment + tenure tiles */
.snap-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
    margin-bottom: 4px;
}
@media (min-width: 480px) { .snap-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 640px) { .snap-grid { grid-template-columns: repeat(5, 1fr); } }

.snap {
    background: var(--surface-2); border: 1px solid var(--hairline);
    border-radius: 8px; padding: 8px 10px;
    display: flex; flex-direction: column; gap: 1px;
    min-width: 0;
}
.snap-lbl {
    font-size: 9px; font-weight: 700; color: var(--ink-mute);
    letter-spacing: 0.06em; text-transform: uppercase;
}
.snap-val {
    font-size: 15px; font-weight: 700; color: var(--ink);
    font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
    line-height: 1.15;
    /* Allow multi-word values (e.g. "In collections", "Pays on time") to wrap
       instead of ellipsing off the tile. */
    white-space: normal; overflow-wrap: break-word; word-break: break-word;
}
/* Shrink the payment-behavior word cluster a hair so "In collections" fits on one line
   in most card widths, and never clips in narrow ones. */
.snap-pay .snap-val { font-size: 13px; }
.snap-sub {
    font-size: 10px; color: var(--ink-mute);
    line-height: 1.25;
    white-space: normal; overflow-wrap: break-word;
}
.snap.snap-alert { background: var(--warn-bg); border-color: #f7d78b; }
.snap.snap-alert .snap-val { color: var(--warn); }

/* Payment-class-colored snapshot tile */
.snap-pay.snap-good { background: var(--good-bg);  border-color: #b8e5ca; }
.snap-pay.snap-good .snap-val { color: var(--good); }
.snap-pay.snap-warn { background: var(--warn-bg);  border-color: #f7d78b; }
.snap-pay.snap-warn .snap-val { color: var(--warn); }
.snap-pay.snap-bad  { background: var(--bad-bg);   border-color: #f5bcbc; }
.snap-pay.snap-bad  .snap-val { color: var(--bad); }

/* Mix strip — wine class bars + country pills */
.mix-strip { margin-top: 12px; }
.mix-lbl {
    font-size: 10px; font-weight: 700; color: var(--ink-mute);
    letter-spacing: 0.06em; text-transform: uppercase;
    margin-bottom: 4px;
}
.mix-bar {
    display: flex; height: 24px; border-radius: 6px; overflow: hidden;
    border: 1px solid var(--hairline);
}
.mix-seg {
    display: flex; align-items: center; justify-content: center;
    padding: 0 6px; color: #fff; font-size: 10px; font-weight: 600;
    flex-shrink: 1; min-width: 4px; gap: 4px;
    overflow: hidden; white-space: nowrap;
    transition: flex-grow 300ms;
    cursor: help;
}
.mix-seg em { font-style: normal; opacity: 0.85; }
.mix-red       { background: #8b1f25; }
.mix-white     { background: #b08437; }
.mix-rose      { background: #d97e7e; }
.mix-sparkling { background: #456e9e; }
.mix-spirit    { background: #2a2f39; }
.mix-orange    { background: #c4732d; }
.mix-unknown   { background: #999; }

.mix-pills {
    display: flex; flex-wrap: wrap; gap: 6px;
}
.mix-pill {
    display: inline-flex; align-items: baseline; gap: 4px;
    padding: 3px 9px; border-radius: 999px;
    background: var(--surface-2); border: 1px solid var(--hairline);
    font-size: 11px; font-weight: 600; color: var(--ink-2);
}
.mix-pill em {
    font-style: normal; font-weight: 500; color: var(--ink-mute);
    font-variant-numeric: tabular-nums;
}

/* Recent invoice status pill */
.rec-status {
    display: inline-block; font-size: 9px; font-weight: 700;
    padding: 1px 5px; border-radius: 4px; margin-left: 6px;
    text-transform: uppercase; letter-spacing: 0.06em;
    background: var(--hairline); color: var(--ink-mute);
}
.rec-status.rec-good { background: var(--good-bg); color: var(--good); }
.rec-status.rec-bad  { background: var(--bad-bg);  color: var(--bad); }

/* Contact list */
.dcontact {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; padding: 8px 0; border-top: 1px solid var(--hairline);
}
.dcontact:first-child { border-top: none; }
.dcontact-body { min-width: 0; }
.dcontact-name {
    font-size: 14px; font-weight: 600; color: var(--ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dcontact-sub {
    font-size: 12px; color: var(--ink-mute); margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dcontact-actions { display: flex; gap: 6px; flex-shrink: 0; }
.dcontact-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 8px;
    background: var(--surface-2); border: 1px solid var(--hairline);
    color: var(--ink-2); text-decoration: none;
    font-size: 14px;
}
.dcontact-btn:hover { background: var(--accent-bg); color: var(--accent); border-color: var(--accent); }

/* AR aging in dossier */
.dar-summary {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    padding: 10px; background: var(--surface-2);
    border-radius: 8px; margin-bottom: 10px;
}
.dar-tot { text-align: center; }
.dar-tot .lbl {
    font-size: 9px; font-weight: 700; color: var(--ink-mute);
    letter-spacing: 0.06em; text-transform: uppercase;
}
.dar-tot .val {
    font-size: 18px; font-weight: 700; color: var(--ink);
    font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
    margin-top: 2px;
}
.dar-tot.bad .val { color: var(--bad); }

.dar-buckets {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px;
}
.dar-bucket {
    display: flex; flex-direction: column; align-items: center; gap: 1px;
    padding: 6px 2px; background: var(--surface-2); border-radius: 6px;
}
.dar-bucket .lbl { font-size: 9px; font-weight: 600; color: var(--ink-mute); }
.dar-bucket .val { font-size: 12px; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.dar-bucket.warn .lbl, .dar-bucket.warn .val { color: var(--warn); }
.dar-bucket.bad  .lbl, .dar-bucket.bad  .val { color: var(--bad); }

/* Dossier list (open orders / bill holds / aged invoices / top SKUs) */
.dlist {
    margin: 0 -16px;
    display: flex; flex-direction: column;
}
.dlist-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 16px; border-top: 1px solid var(--hairline);
}
.dlist-row:first-child { border-top: none; }
.dlist-body { flex: 1; min-width: 0; }
.dlist-title {
    font-size: 13px; font-weight: 600; color: var(--ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dlist-sub {
    font-size: 11px; color: var(--ink-mute); margin-top: 1px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dlist-meta {
    font-size: 13px; font-weight: 700; color: var(--ink-2);
    font-variant-numeric: tabular-nums; flex-shrink: 0; text-align: right;
}
.dlist-meta .small {
    display: block; font-size: 10px; font-weight: 500; color: var(--ink-mute);
    margin-top: 1px;
}
.dlist-meta .bad { color: var(--bad); }

.dempty {
    padding: 14px 0; text-align: center; color: var(--ink-faint);
    font-size: 12px; font-style: italic;
}

/* Samples & Tastings conversion chips. Three states:
   - converted: sampled SKU was invoiced here within 180 days (green, ROI)
   - pending:   still inside the window (neutral, yellow)
   - no_sale:   window expired with no invoice (red, dead sample) */
.sample-chip {
    display: inline-block; padding: 2px 8px; border-radius: 10px;
    font-size: 10px; font-weight: 700; letter-spacing: 0.02em;
    margin-left: 8px; vertical-align: baseline;
}
.sample-chip-converted { background: var(--good-bg); color: var(--good); }
.sample-chip-pending   { background: var(--warn-bg); color: var(--warn); }
.sample-chip-nosale    { background: var(--bad-bg);  color: var(--bad);  }

/* Multi-window conversion bar on the Samples & Tastings section. Four
   cells (7d/30d/90d/180d) showing what % of samples converted in each
   window. Color reflects performance at that window. */
.dwindow-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    padding: 10px 14px 4px;
}
.dwindow {
    background: var(--surface-2);
    border: 1px solid var(--hairline);
    border-radius: 10px;
    padding: 8px 8px 6px;
    text-align: center;
}
.dwindow-k { font-size: 10px; color: var(--ink-mute); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.dwindow-v { font-size: 18px; font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; margin-top: 2px; }
.dwindow-sub { font-size: 10px; color: var(--ink-mute); margin-top: 1px; font-variant-numeric: tabular-nums; }
.dwindow.dw-good .dwindow-v { color: var(--good); }
.dwindow.dw-ok   .dwindow-v { color: var(--warn); }
.dwindow.dw-low  .dwindow-v { color: var(--bad);  }
.dwindow.dw-empty .dwindow-v { color: var(--ink-faint); }

/* Inline brand link inside dossier row subs — looks like the surrounding
   text but tappable, with a dotted underline that upgrades to accent on
   hover so the rep can tell it goes somewhere. Click handler stops
   propagation so it doesn't also trigger the drilldown toggle. */
.dlist-brand-link {
    color: inherit; text-decoration: none;
    border-bottom: 1px dotted var(--ink-faint);
    cursor: pointer;
}
.dlist-brand-link:hover {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* Today's Bag — mini strip on Account Dossier, mirrors the cockpit bag but
   with sell-sheet URLs scoped to this account's state so pricing tiers
   reflect what this buyer would pay. */
.dsec-bag {
    background: linear-gradient(180deg, #ffffff 0%, #f5f7fa 100%);
    border-left: 3px solid var(--accent);
}
.dsec-bag .bag-strip-chips { padding: 2px 0 0; }

/* "Share with this buyer" action row on the dossier bag section. */
.dossier-bag-actions {
    margin-top: 10px; padding-top: 10px;
    border-top: 1px dashed var(--hairline);
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.dossier-bag-actions .dbtn {
    font: inherit; font-size: 12px; font-weight: 600;
    padding: 7px 12px; border-radius: 8px; cursor: pointer;
    border: 1px solid transparent; white-space: nowrap;
}
.dossier-bag-actions .dbtn-primary {
    background: var(--accent); color: #fff; border-color: var(--accent);
}
.dossier-bag-actions .dbtn-primary:hover { filter: brightness(1.05); }
.dossier-bag-actions .dbtn-primary:disabled {
    opacity: 0.6; cursor: wait;
}
.dossier-bag-actions .dbtn-secondary {
    background: var(--surface); color: var(--ink-2);
    border-color: var(--hairline-2);
}
.dossier-bag-actions .dbtn-secondary:hover { border-color: var(--accent); color: var(--accent); }
.dossier-bag-share-result {
    display: flex; gap: 6px; flex: 1; min-width: 240px;
}
.dossier-bag-share-result.hidden { display: none; }
.dossier-bag-share-result input {
    flex: 1; padding: 7px 10px;
    font: inherit; font-size: 12px;
    border: 1px solid var(--hairline-2); border-radius: 6px;
    background: var(--surface-2); color: var(--ink);
    font-family: var(--font-mono, monospace);
}
.dossier-bag-share-result input:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-bg);
}

/* Action panel — Claude-generated pre-meeting bullets */
.dsec-action {
    background: linear-gradient(180deg, #ffffff 0%, #f5f7fa 100%);
    border-left: 3px solid var(--accent);
}
/* Collapsible variant: uses <details>/<summary> so the AI bullets don't
   shout from the top of the drawer. They're available on demand. */
.dsec-collapsible { padding: 0; }
.dsec-collapsible > summary {
    list-style: none; cursor: pointer;
    padding: 12px 16px;
    display: flex; align-items: center; justify-content: space-between;
    user-select: none;
}
.dsec-collapsible > summary::-webkit-details-marker { display: none; }
.dsec-collapsible > summary::after {
    content: '▸'; color: var(--ink-mute); font-size: 12px;
    transition: transform 0.15s ease; margin-left: 10px;
}
.dsec-collapsible[open] > summary::after { transform: rotate(90deg); }
.dsec-collapsible[open] > summary .dsec-meta { display: none; }
.dsec-collapsible > .action-bullets { padding: 0 16px 14px; }
.action-bullets { display: flex; flex-direction: column; gap: 8px; }
.action-bullet {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 10px 12px; background: var(--surface);
    border: 1px solid var(--hairline); border-radius: 8px;
    font-size: 14px; line-height: 1.4; color: var(--ink);
}
.action-num {
    flex-shrink: 0;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--accent); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700;
    margin-top: 1px;
}
.dopp-header {
    font-size: 11px; font-weight: 700; color: var(--ink-mute);
    letter-spacing: 0.08em; text-transform: uppercase;
    margin: 4px 0 -6px 2px;
}

/* Sparkline (24-month trend) */
.spark {
    margin-top: 12px; padding: 10px 12px;
    background: var(--surface-2); border: 1px solid var(--hairline);
    border-radius: 8px;
}
.spark-head, .spark-foot {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 10px; font-weight: 600; color: var(--ink-mute);
    letter-spacing: 0.04em; text-transform: uppercase;
}
.spark-foot { margin-top: 2px; font-variant-numeric: tabular-nums; }
.spark-svg {
    display: block; width: 100%; height: 60px; margin: 4px 0;
}

/* Seasonality (12-month heatmap) */
.season { }
.season-head {
    display: flex; justify-content: space-between;
    font-size: 10px; font-weight: 700; color: var(--ink-mute);
    letter-spacing: 0.06em; text-transform: uppercase;
    margin-bottom: 6px;
}
.season-grid {
    display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px;
    align-items: end;
    height: 80px;
}
.season-col {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    height: 100%;
}
.season-bar {
    width: 100%; background: var(--accent); opacity: 0.6;
    border-radius: 3px 3px 0 0; min-height: 4px;
    margin-top: auto;
    transition: height 400ms cubic-bezier(.2,.9,.3,1.2);
}
.season-bar.peak { background: var(--accent); opacity: 1; }
.season-lbl {
    font-size: 9px; font-weight: 700; color: var(--ink-mute);
    letter-spacing: 0.04em;
}

/* Account-level phone numbers (prominent) */
.dphones {
    display: grid; grid-template-columns: 1fr; gap: 8px;
    margin-bottom: 12px;
}
@media (min-width: 480px) {
    .dphones { grid-template-columns: 1fr 1fr; }
}
.dphone {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; background: var(--surface-2);
    border: 1px solid var(--hairline); border-radius: 10px;
    text-decoration: none; color: var(--ink);
    transition: background 120ms, border-color 120ms;
}
.dphone:hover, .dphone:focus {
    background: var(--accent-bg); border-color: var(--accent); color: var(--accent-ink);
}
.dphone-icon {
    font-size: 16px; width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--surface); border-radius: 8px;
    color: var(--accent); flex-shrink: 0;
}
.dphone-num {
    font-size: 15px; font-weight: 700; letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.dphone-lbl {
    font-size: 10px; font-weight: 600; color: var(--ink-mute);
    letter-spacing: 0.06em; text-transform: uppercase;
    margin-top: 1px;
}

/* Drillable rows + inline expansion */
.drillable {
    cursor: pointer; transition: background 0.1s ease;
    position: relative;
}
.drillable:hover { background: var(--surface-2); }
.drillable::after {
    content: '▸'; position: absolute; right: 4px; top: 50%;
    transform: translateY(-50%);
    font-size: 9px; color: var(--ink-faint);
    transition: transform 180ms ease;
}
.drillable.expanded::after { transform: translateY(-50%) rotate(90deg); color: var(--accent); }

.drilldown {
    background: var(--surface-2);
    border-top: 1px solid var(--hairline);
    padding: 10px 16px;
    overflow-x: auto;
}
.drilltbl {
    width: 100%; border-collapse: collapse; font-size: 12px;
    font-variant-numeric: tabular-nums;
}
.drilltbl thead th {
    text-align: left; font-size: 9px; font-weight: 700;
    color: var(--ink-mute); padding: 4px 6px;
    text-transform: uppercase; letter-spacing: 0.06em;
    border-bottom: 1px solid var(--hairline);
}
.drilltbl thead th.num { text-align: right; }
.drilltbl tbody td {
    padding: 5px 6px; border-bottom: 1px solid var(--hairline);
    color: var(--ink-2); vertical-align: top;
}
.drilltbl tbody td.num { text-align: right; }
.drilltbl tbody td.bold { font-weight: 700; color: var(--ink); }
.drilltbl tbody tr:last-child td { border-bottom: none; }
.drilltbl .lname { font-weight: 600; color: var(--ink); line-height: 1.25; }
.drilltbl .lsub { font-size: 10px; color: var(--ink-mute); margin-top: 1px; }
.whse-pill {
    display: inline-block; font-size: 10px; font-weight: 600;
    padding: 1px 6px; border-radius: 4px;
    background: var(--surface); border: 1px solid var(--hairline);
    color: var(--ink-mute); font-variant-numeric: tabular-nums;
}

/* Address + delivery notes */
.daddr {
    font-size: 13px; color: var(--ink-2); line-height: 1.5;
}
.daddr-link {
    display: inline-flex; align-items: center; gap: 4px;
    margin-top: 6px;
    font-size: 12px; font-weight: 600; color: var(--accent);
    text-decoration: none;
}
.daddr-link:hover { text-decoration: underline; }
.ddelivery {
    margin-top: 8px; padding: 8px 10px;
    background: var(--accent-bg); color: var(--accent-ink);
    border-radius: 6px; font-size: 12px;
}

/* ============================================================
   Reduce mobile text size for source toggle
   ============================================================ */
@media (max-width: 720px) {
    .topbar { padding: 12px 14px; padding-top: calc(12px + env(safe-area-inset-top)); flex-wrap: wrap; }
    .topbar-right { gap: 6px; }
    .source-toggle button { padding: 5px 8px; font-size: 11px; }
    .goal-pill { padding: 5px 10px; font-size: 11px; }
    .goal-pill-bar { width: 36px; }
    .week-grid { grid-template-columns: repeat(5, 1fr); gap: 4px; }
    .week-day { padding: 8px 6px; min-height: 76px; }
    .week-day-num { font-size: 13px; }
    .week-day-name { font-size: 10px; }
    .week-event { font-size: 11px; padding: 3px 5px; }
    .priorities-list .priority { padding: 12px 14px; }
}