/* ─────────────────────────────────────────────────────────────────────────
   Volition CORE — Brand Operations Portal
   Design system per CORE_ClaudeCode_Prompt:
     • Periwinkle (#9EADE5) primary
     • Chartreuse (#ECE83A) accent rule + active-tab underline
     • Rose (#F09491) warning / pending states
     • Warm Neutral (#F8F6F3) page background
     • Styrene B sans (Light 300 / Black 900) — Arial fallback
     • Noe Text serif italic — Georgia fallback
   Existing class names (.btn-primary, .badge.*, .vol-tab.*, .kpi-pill.*,
   .brand-tile, .card, .nav, .nav-brand, .role-badge) are preserved so
   every Jinja template inherits the new look without markup churn.
   ───────────────────────────────────────────────────────────────────────── */

/* CORE design tokens. Brand-namespaced (--brand-x, --bg-x, --text-x)
   names match the design brief. Legacy --vb-x and --gg-x aliases
   below remap to CORE so old rules still resolve to the right colors.
   Do NOT write a literal star-slash sequence inside this comment —
   it closes the comment early and the parser silently drops :root. */
:root {
    /* Brand primaries */
    --brand-periwinkle:    #9EADE5;
    --brand-chartreuse:    #ECE83A;
    --brand-rose:          #F09491;
    --brand-black:         #000000;
    --brand-warm-neutral:  #F8F6F3;
    --surface-white:       #FFFFFF;

    /* Semantic tints — light/dark pairs for badges + status pills */
    --bg-periwinkle-light: #E8ECF8;
    --bg-periwinkle-dark:  #5464A8;
    --bg-rose-light:       #FDEAEA;
    --bg-rose-dark:        #7A1A1A;
    --bg-chartreuse-light: #F8F7CC;
    --bg-chartreuse-dark:  #3D3C00;

    /* Neutral surfaces */
    --surface-secondary:   #EEECE8;

    /* Text */
    --text-primary:        #1A1A18;
    --text-secondary:      #6B6B65;
    --text-tertiary:       #9B9B94;

    /* Borders */
    --border-default:      #E2E0DA;
    --border-medium:       #C8C6C0;
    --border-selected:     #5464A8;

    /* Radii */
    --radius-md:           8px;   /* buttons, badges */
    --radius-lg:           12px;  /* content cards */
    --radius-xl:           16px;  /* login card */

    /* Layout */
    --nav-height:          52px;
    --page-padding-x:      24px;
    --card-gap:            14px;

    /* Shadow used ONLY on the login card; dashboard cards use a 0.5px
       border with no shadow per the brief. */
    --shadow-card:         0 1px 4px rgba(26,26,24,0.06);

    /* ─── Legacy aliases ───
       Keep the --vb-* / --gg-* names that 950+ lines of existing CSS
       still reference. Every alias points at a CORE token so all those
       rules resolve to the new palette without an alarming search-and-
       replace across 52 templates. */
    --vb-periwinkle:       var(--brand-periwinkle);
    --vb-periwinkle-dark:  var(--bg-periwinkle-dark);
    --vb-cream:            var(--brand-warm-neutral);
    --vb-pink:             var(--brand-rose);
    --vb-pink-light:       var(--bg-rose-light);
    --vb-charcoal:         var(--text-primary);
    --vb-ink:              var(--text-primary);
    --vb-grey:             var(--text-secondary);
    --vb-grey-light:       var(--border-default);
    --vb-warning:          var(--bg-rose-dark);
    --vb-info:             var(--bg-periwinkle-dark);
    --vb-success:          var(--bg-chartreuse-dark);
    --vb-danger:           var(--bg-rose-dark);

    --gg-green:            var(--brand-periwinkle);
    --gg-green-dark:       var(--bg-periwinkle-dark);
    --gg-green-light:      var(--bg-periwinkle-light);
    --gg-cream:            var(--brand-warm-neutral);
    --gg-charcoal:         var(--text-primary);
    --gg-grey:             var(--text-secondary);
    --gg-grey-light:       var(--border-default);
    --gg-warning:          var(--bg-rose-dark);
    --gg-info:             var(--bg-periwinkle-dark);
    --gg-success:          var(--bg-chartreuse-dark);
    --gg-danger:           var(--bg-rose-dark);
    --gg-primary:          var(--brand-periwinkle);
    --gg-secondary:        var(--text-tertiary);
}

/* ─── Fonts ───
   TODO: when the Styrene B + Noe Text woff2 files are added to
   /static/fonts/, uncomment these @font-face blocks. Until then we
   fall back to Arial (sans) + Georgia (serif), which match the
   intended geometric / serif feel reasonably well.
@font-face {
    font-family: 'Styrene B';
    font-weight: 300;
    font-style: normal;
    src: url('/static/fonts/StyreneB-Light.woff2') format('woff2');
    font-display: swap;
}
@font-face {
    font-family: 'Styrene B';
    font-weight: 900;
    font-style: normal;
    src: url('/static/fonts/StyreneB-Black.woff2') format('woff2');
    font-display: swap;
}
@font-face {
    font-family: 'Noe Text';
    font-weight: 900;
    font-style: italic;
    src: url('/static/fonts/NoeText-BlackItalic.woff2') format('woff2');
    font-display: swap;
}
*/

* { box-sizing: border-box; }

/* Typography per CORE Developer Reference (deck slide 2):
   • Body          → Styrene B Light  13pt
   • H1 page title → Styrene B Black  20pt
   • H2 card title → Styrene B Black  14pt
   • Caption       → Styrene B Light  11pt
   Browser default base is 16px. To honor the 13pt body without
   touching every existing inline em-based size, anchor the body
   at 13px and let em/rem derivatives scale from there. */
body {
    font-family: 'Styrene B', Arial, ui-sans-serif, sans-serif;
    background: var(--brand-warm-neutral);
    color: var(--text-primary);
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    font-weight: 300;
    letter-spacing: 0.005em;
}

h1, h2, h3, h4 {
    font-family: 'Styrene B', Arial, ui-sans-serif, sans-serif;
    font-weight: 900;
    letter-spacing: -0.005em;
    color: var(--text-primary);
}
h1 { font-size: 20px; line-height: 1.25; margin: 0 0 8px 0; }
h2 { font-size: 14px; line-height: 1.3;  margin: 18px 0 10px 0; }
h3 { font-size: 13px; line-height: 1.35; margin: 14px 0 6px 0; }

.subtitle { color: var(--text-secondary); margin: -2px 0 18px 0; font-weight: 300; font-size: 12px; }

/* ─── Top nav (CORE wordmark + breadcrumb + role badge) ───
   52px tall, white, 0.5px bottom border. The nav surface itself is
   full-bleed (white extends edge-to-edge across the viewport), but
   its contents are constrained to a centered 1200px inner wrapper
   that aligns with .container below. */
.nav {
    background: var(--surface-white);
    border-bottom: 0.5px solid var(--border-default);
    padding: 0;
    height: var(--nav-height);
    box-shadow: none;
    width: 100%;
}
.nav-inner {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--page-padding-x);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.nav-brand {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    text-decoration: none;
    color: var(--text-primary);
    line-height: 1;
    flex-shrink: 0;
}
.nav-brand .core-wordmark {
    font-family: 'Styrene B', Arial, sans-serif;
    font-weight: 900;
    font-size: 14px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--text-primary);
}
.nav-brand .core-rule {
    display: block;
    height: 3px;
    width: 65%;
    margin-top: 3px;
    background: var(--brand-chartreuse);
    border-radius: 1px;
}
.nav-brand .breadcrumb-sep {
    color: var(--text-tertiary);
    margin: 0 8px;
    font-weight: 300;
}
.nav-brand .breadcrumb-text {
    color: var(--text-secondary);
    font-weight: 300;
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.nav-link {
    white-space: nowrap;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 12px;
    font-weight: 300;
}
.nav-link:hover { color: var(--text-primary); }
.nav-username {
    white-space: nowrap;
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 300;
}

.nav-user {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* Role badge (Approver / Accounting / Product Dev / Client) — periwinkle
   pill, black ink, weight 900, the brief's "role" variant. */
.nav-user .role-badge,
.role-badge {
    background: var(--brand-periwinkle);
    color: var(--brand-black);
    padding: 4px 10px;
    border-radius: var(--radius-md);
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: 0.05em;
}

.nav a { color: var(--text-primary); text-decoration: none; }
.nav a:hover { color: var(--bg-periwinkle-dark); }

/* Phase 18 r3.26 — Global max-width utility class. Per the UAT brief,
   this is the canonical centering class applied to both the nav-inner
   wrapper AND the main content area. `.container` and `.nav-inner`
   inherit from `.container-max` so the same 1200px constraint flows
   to both, and any future surface can opt in with one class name. */
.container-max { max-width: 1200px; width: 100%; margin: 0 auto; padding: 0 24px; box-sizing: border-box; }

.container { max-width: 1200px; width: 100%; margin: 0 auto; padding: 32px var(--page-padding-x) 48px; }

/* ─── Flash messages ───
   Map success → chartreuse tint, error → rose tint, neutral fallback. */
.flash {
    padding: 12px 18px;
    border-radius: var(--radius-md);
    margin-bottom: 16px;
    font-size: 0.95em;
    border: 0.5px solid transparent;
}
.flash.success {
    background: var(--bg-chartreuse-light);
    color: var(--bg-chartreuse-dark);
    border-color: var(--brand-chartreuse);
}
.flash.error {
    background: var(--bg-rose-light);
    color: var(--bg-rose-dark);
    border-color: var(--brand-rose);
}

/* ─── Content cards ───
   White surface, 0.5px hairline border, 12px radius, no shadow.
   Login card overrides to rounded-xl + subtle lift below. */
.card {
    background: var(--surface-white);
    border: 0.5px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: 18px 16px;
    box-shadow: none;
    margin-bottom: 18px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 0.5px solid var(--border-default);
}

/* ─── Tables ───
   Hairline borders, uppercase muted headers, monospace-friendly. */
table { width: 100%; border-collapse: collapse; }
th, td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 0.5px solid var(--border-default);
}
th {
    font-size: 0.78em;
    text-transform: uppercase;
    color: var(--text-secondary);
    letter-spacing: 0.05em;
    font-weight: 900;
}
td { font-size: 0.92em; font-weight: 300; }
tr:hover { background: var(--surface-secondary); }

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.table-scroll table { min-width: 720px; }

.txt-right { text-align: right; }
.txt-center { text-align: center; }
.muted { color: var(--text-secondary); font-size: 0.9em; }
.small { font-size: 0.85em; }

/* ─── Status badges ───
   Pill-shaped, weight 900, uppercase. Brief maps:
     • warning / pending → rose tint
     • success           → chartreuse tint
     • info              → periwinkle tint
     • secondary         → neutral surface */
.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.7em;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}
.badge.warning  { background: var(--bg-rose-light);       color: var(--bg-rose-dark); }
.badge.info     { background: var(--bg-periwinkle-light); color: var(--bg-periwinkle-dark); }
.badge.success  { background: var(--bg-chartreuse-light); color: var(--bg-chartreuse-dark); }
.badge.primary  { background: var(--bg-periwinkle-light); color: var(--bg-periwinkle-dark); }
.badge.secondary{ background: var(--surface-secondary);   color: var(--text-secondary); }
.badge.danger   { background: var(--bg-rose-light);       color: var(--bg-rose-dark); }

/* ─── Buttons ───
   • Primary  → periwinkle, black ink, weight-900 caps, tight tracking
   • Secondary → white, hairline border, normal-case, weight-300
   • Danger   → rose-dark tint
   • Small    → tighter padding + smaller type */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: var(--radius-md);
    font-size: 0.92em;
    font-weight: 900;
    border: 0;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.15s, background 0.15s, color 0.15s;
    white-space: nowrap;
    font-family: inherit;
    letter-spacing: 0.005em;
}
.btn-primary {
    background: var(--brand-periwinkle);
    color: var(--brand-black);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.btn-primary:hover { opacity: 0.9; }
.btn-secondary {
    background: var(--surface-white);
    color: var(--text-secondary);
    border: 0.5px solid var(--border-default);
    text-transform: none;
    font-weight: 300;
    letter-spacing: 0;
}
.btn-secondary:hover { background: var(--surface-secondary); color: var(--text-primary); }
.btn-dark {
    background: var(--brand-black);
    color: var(--surface-white);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.btn-dark:hover { opacity: 0.9; }
.btn-danger {
    background: var(--bg-rose-dark);
    color: var(--surface-white);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.btn-danger:hover { opacity: 0.92; }
.btn-small { padding: 6px 12px; font-size: 11px; }

/* ─── Form inputs ───
   Hairline border, 8px radius, periwinkle focus ring. */
input[type=text], input[type=number], input[type=date], input[type=file], input[type=email],
input[type=password], input[type=search], select, textarea {
    padding: 9px 12px;
    border: 0.5px solid var(--border-default);
    border-radius: var(--radius-md);
    font-size: 0.92em;
    font-family: inherit;
    font-weight: 300;
    width: 100%;
    background: var(--surface-white);
    color: var(--text-primary);
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--border-selected);
    box-shadow: 0 0 0 3px rgba(84,100,168,0.12);
}

label {
    display: block;
    font-size: 0.78em;
    font-weight: 900;
    color: var(--text-primary);
    margin-bottom: 6px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.field { margin-bottom: 16px; }
.fields-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ─── Product card grid (legacy order-entry surface) ─── */
.sku-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 18px;
    margin-bottom: 20px;
}

.sku-card {
    background: var(--surface-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 0.5px solid var(--border-default);
    box-shadow: none;
    transition: border-color 0.15s, transform 0.15s;
}
.sku-card:hover {
    border-color: var(--border-selected);
    transform: translateY(-2px);
}
.sku-card.has-units {
    border-color: var(--brand-periwinkle);
    background: var(--bg-periwinkle-light);
}

.sku-image {
    width: 100%;
    height: 200px;
    background: var(--surface-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.sku-image img { max-width: 80%; max-height: 90%; object-fit: contain; }

.sku-body { padding: 16px; }
.sku-name { font-size: 1em; font-weight: 900; margin: 0 0 2px 0; }
.sku-cat  { font-size: 0.78em; color: var(--text-tertiary); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 900; }
.sku-desc { font-size: 0.85em; color: var(--text-secondary); margin-bottom: 10px; }
.sku-meta { font-size: 0.8em; color: var(--text-secondary); margin-bottom: 12px; }
.sku-meta span { margin-right: 10px; }

.tier-list {
    background: var(--surface-secondary);
    border-radius: 6px;
    padding: 6px 10px;
    margin-bottom: 12px;
    font-size: 0.78em;
    color: var(--text-secondary);
}
.tier-list .tier { display: inline-block; margin-right: 8px; }
.tier-list .tier b { color: var(--text-primary); font-weight: 900; }

.qty-row { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 8px; align-items: center; }
.qty-row label { font-size: 0.7em; margin-bottom: 2px; }

.summary-strip {
    background: var(--brand-black);
    color: var(--surface-white);
    border-radius: var(--radius-lg);
    padding: 18px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    position: sticky;
    bottom: 16px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
}
.summary-strip .total {
    font-size: 1.6em;
    font-weight: 900;
    color: var(--brand-chartreuse);
}
.summary-strip .label {
    font-size: 0.7em;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.75;
    font-weight: 900;
}

/* ─── KV grid (Cash Flow, generic) ─── */
.kv-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 14px; margin-bottom: 18px; }
.kv-item {
    background: var(--surface-secondary);
    border-radius: var(--radius-md);
    padding: 14px 16px;
}
.kv-item .k {
    font-size: 0.7em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    letter-spacing: 0.05em;
    font-weight: 300;
}
.kv-item .v { font-size: 1.4em; font-weight: 900; margin-top: 4px; color: var(--text-primary); }

.stat-tile {
    background: var(--surface-secondary);
    border-radius: var(--radius-md);
    padding: 14px 18px;
}

/* ─────────────────────────────────────────────────────────────────────────
   Master BOM page — spreadsheet-style high-density layout (preserved).
   ───────────────────────────────────────────────────────────────────────── */

.bom-meta-strip {
    width: 100%;
    margin-top: 12px;
    border-collapse: collapse;
    background: var(--surface-secondary);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.bom-meta-strip td {
    padding: 10px 16px;
    border: 0;
    border-right: 0.5px solid var(--border-default);
    vertical-align: top;
    width: 25%;
}
.bom-meta-strip td:last-child { border-right: 0; }
.bom-meta-strip .lbl {
    display: block;
    font-size: 0.7em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
    font-weight: 300;
    margin-bottom: 2px;
}
.bom-meta-strip .val { display: block; font-size: 1em; font-weight: 900; }
.bom-meta-strip .mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }

.bom-grid-wrap {
    margin-top: 14px;
    overflow-x: auto;
    border: 0.5px solid var(--border-default);
    border-radius: var(--radius-md);
}
.bom-grid {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    table-layout: auto;
    background: var(--surface-white);
}
.bom-grid thead th {
    background: var(--surface-secondary);
    border-bottom: 1px solid var(--border-medium);
    padding: 7px 10px;
    text-align: left;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    font-weight: 900;
    position: sticky;
    top: 0;
    z-index: 2;
    white-space: nowrap;
}
.bom-grid tbody td, .bom-grid tfoot td {
    padding: 5px 10px;
    border-bottom: 0.5px solid var(--border-default);
    vertical-align: middle;
}
.bom-grid tbody tr:hover { background: var(--brand-warm-neutral); }
.bom-grid tbody tr[data-ddp="1"] { background: var(--surface-secondary); }

.bom-grid .col-num, .bom-grid th.col-num { text-align: right; white-space: nowrap; }
.bom-grid .col-name { min-width: 220px; }
.bom-grid .col-inco { width: 88px; }
.bom-grid .col-act  { width: 84px; text-align: center; white-space: nowrap; }
.bom-grid .col-total { background: var(--surface-secondary); }
.bom-grid .mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px; }

.bom-grid .comp-name { font-weight: 900; line-height: 1.2; }
.bom-grid .comp-meta {
    font-size: 11px; color: var(--text-secondary);
    margin-top: 1px; line-height: 1.2;
    font-weight: 300;
}

.bom-grid .cell-input {
    width: 100%;
    max-width: 90px;
    padding: 3px 6px;
    border: 0.5px solid transparent;
    border-radius: 4px;
    background: transparent;
    font-size: 12.5px;
    text-align: right;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    color: var(--text-primary);
}
.bom-grid .cell-input:hover { border-color: var(--border-default); background: var(--surface-white); }
.bom-grid .cell-input:focus { outline: none; border-color: var(--border-selected); background: var(--surface-white); }
.bom-grid .cell-input[readonly] { color: var(--text-tertiary); background: var(--surface-secondary); }
.bom-grid .cell-input-narrow { max-width: 60px; }
.bom-grid .cell-input-bigger { max-width: 110px; }
.bom-grid select.bom-inco {
    border: 0.5px solid transparent;
    background: transparent;
    font-size: 11px;
    padding: 2px 4px;
    border-radius: 4px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    width: 78px;
}
.bom-grid select.bom-inco:hover { border-color: var(--border-default); background: var(--surface-white); }
.bom-grid select.bom-inco:focus { outline: none; border-color: var(--border-selected); background: var(--surface-white); }

.bom-grid .bom-cmfee-row td {
    background: var(--bg-chartreuse-light);
    border-top: 0.5px solid var(--brand-chartreuse);
}
.bom-grid .bom-totals-row td {
    background: var(--surface-secondary);
    border-top: 1px solid var(--border-medium);
    font-size: 12.5px;
    font-weight: 900;
}
.bom-grid .bom-landed-row td {
    background: var(--brand-black);
    color: var(--surface-white);
    border-top: 1px solid var(--brand-black);
    font-size: 13px;
}
.bom-grid .bom-landed-row .comp-meta { color: rgba(255,255,255,0.7); }
.bom-grid .bom-landed-row .col-total { background: #1a1a18; }
.bom-grid .bom-landed-row .muted { color: rgba(255,255,255,0.7) !important; }

/* ─── Staging banner ───
   Phase 13 r3.2 — Per the CORE Developer Reference deck (slides 3/4),
   the staging banner is INLINE at the top of the content area, not a
   fixed full-bleed strip. Anatomy: rose-light bg, 0.5px rose border,
   "STAGING" pill (rose dark fill, white text, uppercase) on the left
   followed by body copy. Sits above the nav inside .nav-wrap. */
.beta-banner {
    position: static;
    margin: 0 auto;
    max-width: 1200px;
    width: 100%;
    padding: 8px 14px;
    text-align: left;
    font-family: inherit;
    font-size: 12px;
    font-weight: 300;
    letter-spacing: 0;
    color: var(--bg-rose-dark);
    background: var(--bg-rose-light);
    border: 0.5px solid var(--brand-rose);
    border-radius: var(--radius-md);
    box-shadow: none;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.beta-banner > * { background: transparent; padding: 0; }
.beta-banner strong {
    /* "STAGING" mini-pill — rose-dark fill, white text, uppercase. */
    display: inline-block;
    padding: 3px 9px;
    background: var(--brand-rose);
    color: var(--surface-white);
    border-radius: 4px;
    font-weight: 900;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1.3;
}
.beta-banner-icon { display: none; }   /* dropped; the STAGING pill is the signal */
.beta-banner-sep { opacity: 0.5; }

/* Wrapper that holds both the staging banner and the nav. Banner sits
   on the warm-neutral page bg with a 24px horizontal inset. */
.banner-wrap {
    background: var(--brand-warm-neutral);
    padding: 12px var(--page-padding-x) 0;
}

/* No more padding-top on body — staging banner is now inline. */
body { padding-top: 0; }
@media (max-width: 700px) {
    .beta-banner { font-size: 11px; padding: 6px 10px; }
}

/* Inline rose callout on login + brand picker. */
.beta-login-warning {
    background: var(--bg-rose-light);
    border: 0.5px solid var(--brand-rose);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    margin: 16px 0;
    color: var(--bg-rose-dark);
    font-size: 0.9em;
    font-weight: 300;
}
.beta-login-warning strong { color: var(--bg-rose-dark); font-weight: 900; }

/* Anchor rendered as a button — used for Clone-on-row, etc. */
.link-btn {
    background: none; border: none; padding: 0; margin: 0;
    color: var(--bg-periwinkle-dark); cursor: pointer;
    font: inherit; text-decoration: underline;
}
.link-btn:hover { color: var(--text-primary); }

/* Trash icon button — list-row deletes. */
.btn-icon-danger {
    background: var(--surface-white);
    border: 0.5px solid var(--border-default);
    color: var(--text-secondary);
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
    line-height: 1;
    transition: all 0.15s;
}
.btn-icon-danger:hover {
    background: var(--bg-rose-light);
    border-color: var(--brand-rose);
    color: var(--bg-rose-dark);
}

/* Price-to-brand row in BOM grid — bottom emphasis. */
.bom-grid .bom-price-row td {
    background: var(--bg-periwinkle-dark); color: #fff;
    border-top: 1px solid var(--bg-periwinkle-dark);
    font-size: 13px;
    font-weight: 900;
}
.bom-grid .bom-price-row .col-total { background: var(--bg-periwinkle-dark) !important; color: #fff !important; }
.bom-grid .bom-price-row .col-total b { color: #fff !important; }
.bom-grid .bom-price-row .comp-meta { color: rgba(255,255,255,0.75) !important; }

/* Attachment icon column. */
.bom-icon-btn {
    background: var(--surface-white);
    border: 0.5px solid var(--border-default);
    border-radius: 4px;
    padding: 3px 8px;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
}
.bom-icon-btn:hover { border-color: var(--border-selected); background: var(--surface-secondary); }
.bom-icon-btn .badge-count {
    background: var(--bg-chartreuse-light);
    color: var(--bg-chartreuse-dark);
    border-radius: 10px;
    padding: 0 6px;
    font-size: 10px;
    font-weight: 900;
    margin-left: 2px;
}
.bom-del-cell {
    display: inline-block;
    margin-left: 4px;
    color: var(--text-tertiary);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
}
.bom-del-cell input { display: none; }
.bom-del-cell input:checked + span { color: var(--bg-rose-dark); font-weight: 900; }
.bom-del-cell:hover { color: var(--bg-rose-dark); }

.bom-add-row {
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
    padding: 10px 12px;
    background: var(--surface-secondary);
    border: 0.5px solid var(--border-default);
    border-top: 0;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    font-size: 13px;
}
.bom-add-row select, .bom-add-row input { padding: 4px 8px; font-size: 13px; }

.bom-margin-details {
    background: var(--surface-white);
    border: 0.5px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: 12px 14px;
}
.bom-margin-details summary {
    cursor: pointer; font-weight: 900; font-size: 0.95em;
    user-select: none;
}
.bom-margin-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.bom-margin-tbl th {
    background: var(--surface-secondary); padding: 6px 10px;
    text-align: left; font-size: 11px; text-transform: uppercase;
    letter-spacing: 0.05em; font-weight: 900; color: var(--text-secondary);
}
.bom-margin-tbl td { padding: 4px 10px; border-bottom: 0.5px solid var(--border-default); }
.bom-margin-tbl tr.hl td { background: var(--bg-chartreuse-light); }

.bom-modal {
    border: 0.5px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: 0;
    max-width: 540px;
    width: 90%;
    box-shadow: 0 12px 40px rgba(0,0,0,0.18);
    background: var(--surface-white);
}
.bom-modal::backdrop { background: rgba(0,0,0,0.35); }
.bom-modal .modal-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 16px; border-bottom: 0.5px solid var(--border-default);
}
.bom-modal .modal-body { padding: 14px 16px; }
.bom-modal .modal-foot {
    display: flex; justify-content: flex-end; gap: 8px; align-items: center;
    padding: 12px 16px; border-top: 0.5px solid var(--border-default);
    background: var(--brand-warm-neutral);
}
.bom-modal .modal-close {
    background: transparent; border: 0; font-size: 20px; cursor: pointer;
    color: var(--text-secondary); line-height: 1;
}
.bom-modal #attachPart { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-weight: 900; }

.bom-attach-cell { margin-top: 4px; }
.bom-attach-link {
    display: inline-block;
    font-size: 0.78em;
    padding: 2px 8px;
    border-radius: 12px;
    background: var(--surface-secondary);
    color: var(--text-secondary);
    text-decoration: none;
    white-space: nowrap;
    font-weight: 900;
}
.bom-attach-link:hover { background: var(--bg-periwinkle-light); }
.bom-attach-link.has-files {
    background: var(--bg-chartreuse-light);
    color: var(--bg-chartreuse-dark);
}

.cost-toast-stack {
    position: fixed; bottom: 20px; right: 20px; z-index: 10000;
    display: flex; flex-direction: column; gap: 8px;
    max-width: 360px;
}
.cost-toast {
    background: var(--bg-rose-light);
    border: 0.5px solid var(--brand-rose);
    border-left: 4px solid var(--brand-rose);
    color: var(--bg-rose-dark);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    font-size: 0.9em;
    animation: toastIn 0.18s ease-out;
    cursor: pointer;
}
.cost-toast .toast-attach-link {
    display: inline-block; margin-top: 6px;
    color: var(--bg-rose-dark); font-weight: 900;
    text-decoration: underline;
}
@keyframes toastIn {
    from { transform: translateX(40px); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}

/* ─── Timeline (audit log, run history) ─── */
.timeline { padding-left: 20px; border-left: 2px solid var(--bg-periwinkle-light); }
.timeline-item { padding: 8px 0; position: relative; }
.timeline-item::before {
    content: '●'; position: absolute; left: -28px;
    color: var(--brand-periwinkle);
}
.timeline-item .when { font-size: 0.75em; color: var(--text-secondary); }

/* ─── Login / role selection ───
   Phase 13 r3.2 — Rebuilt to match CORE Developer Reference Screen 1.
   Card uses radius-xl + shadow-card. CORE wordmark centered with the
   chartreuse rule below. Below that: tagline, "SELECT YOUR ROLE"
   label, 2×2 role-tile grid, big ENTER PLATFORM CTA, beta callout. */
.login-wrap {
    min-height: calc(100vh - 80px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.login-card {
    background: var(--surface-white);
    border: 0.5px solid var(--border-default);
    border-radius: var(--radius-xl);
    padding: 36px 40px;
    width: 520px;
    max-width: 92vw;
    box-shadow: var(--shadow-card);
}
.login-card h1 { text-align: center; margin-bottom: 4px; }
.login-card .subtitle { text-align: center; }

/* Big CORE wordmark — 30pt Styrene B Black, 0.25em letter-spacing,
   65%-wide chartreuse rule 4px tall with 5px gap below the letters. */
.core-wordmark-lg {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 4px 0 14px 0;
    line-height: 1;
}
.core-wordmark-lg .core-wordmark {
    font-family: 'Styrene B', Arial, sans-serif;
    font-weight: 900;
    font-size: 30px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--text-primary);
}
.core-wordmark-lg .core-rule {
    display: block;
    height: 4px;
    width: 65%;
    margin-top: 5px;
    background: var(--brand-chartreuse);
    border-radius: 1px;
}

/* Tagline below the wordmark. Styrene B Light, secondary text color. */
.login-tagline {
    text-align: center;
    color: var(--text-secondary);
    font-size: 13px;
    margin: 0 0 26px 0;
    font-weight: 300;
    letter-spacing: 0.01em;
}

/* "SELECT YOUR ROLE" mini-label — tracked, uppercase, secondary. */
.role-tile-label {
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-secondary);
    font-weight: 900;
    margin-bottom: 10px;
}

/* 2×2 role tile grid. */
.role-tile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 18px;
}
@media (max-width: 460px) { .role-tile-grid { grid-template-columns: 1fr; } }

/* Each role tile is a <label> wrapping a hidden radio + body content.
   Unselected: white fill, 0.5px hairline. Selected: periwinkle-light
   fill + 1.5px periwinkle-dark border. Description text turns
   periwinkle-dark when selected (per the deck). */
.role-tile {
    position: relative;
    background: var(--surface-white);
    border: 0.5px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: 14px 16px;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
    display: block;
}
.role-tile:hover { background: var(--surface-secondary); }
.role-tile input[type=radio] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0; height: 0;
}
.role-tile-body { line-height: 1.3; }
.role-tile-name {
    font-family: 'Styrene B', Arial, sans-serif;
    font-weight: 900;
    font-size: 14px;
    color: var(--text-primary);
    margin-bottom: 4px;
    line-height: 1.2;
}
.role-tile-sub {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 300;
    line-height: 1.35;
}
.role-tile:has(input:checked) {
    background: var(--bg-periwinkle-light);
    border: 1.5px solid var(--border-selected);
    padding: 13.5px 15.5px;     /* compensate for 1px border bump */
}
.role-tile:has(input:checked) .role-tile-sub {
    color: var(--bg-periwinkle-dark);
    font-weight: 300;
}

/* Full-width primary CTA inside the login card. ENTER PLATFORM. */
.btn-cta-block {
    display: block;
    width: 100%;
    padding: 14px 16px;
    font-size: 13px;
    text-align: center;
    margin: 6px 0 18px 0;
}

/* Legacy .user-pick rules — keep for any other surface that still
   uses the old radio-pick layout. */
.user-pick { display: grid; gap: 10px; margin: 24px 0; }
.user-pick label {
    background: var(--surface-white);
    padding: 14px 16px;
    border-radius: var(--radius-lg);
    border: 0.5px solid var(--border-default);
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    font-weight: 300;
    color: var(--text-primary);
}
.user-pick input[type=radio] { margin-right: 8px; accent-color: var(--brand-periwinkle); }
.user-pick label:has(input:checked) {
    border: 1.5px solid var(--border-selected);
    background: var(--bg-periwinkle-light);
}

/* ─── Top-level Volition tabs (Tasks / Products / Components / Vendors / …) ─── */
.vol-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin-bottom: 22px;
    border-bottom: 0.5px solid var(--border-default);
    padding-bottom: 0;
}
@media (max-width: 720px) {
    .vol-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .vol-tabs::-webkit-scrollbar { height: 4px; }
}
.vol-tab {
    display: inline-block;
    padding: 12px 18px;
    text-decoration: none;
    color: var(--text-secondary);
    font-weight: 300;
    font-size: 0.92em;
    border-bottom: 4px solid transparent;
    margin-bottom: -0.5px;
    transition: color 0.15s, border-color 0.15s;
    letter-spacing: 0.01em;
    white-space: nowrap;
}
.vol-tab:hover { color: var(--text-primary); }
.vol-tab.active {
    color: var(--text-primary);
    border-bottom-color: var(--brand-chartreuse);
    font-weight: 900;
    background: transparent;
}

/* Compact tables used on report pages. */
table.compact th, table.compact td {
    padding: 6px 10px;
    font-size: 0.85em;
}

table.pivot-sales th, table.pivot-sales td {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
table.pivot-sales thead th {
    position: sticky; top: 0;
    background: var(--surface-white); z-index: 1;
}
table.pivot-sales tbody td:first-child {
    position: sticky; left: 0;
    background: var(--surface-white); font-weight: 900;
}
table.pivot-sales tfoot td { border-top: 1px solid var(--border-medium); }

/* ─── KPI cards (Reports / dashboards) ─── */
.report-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
}
.kpi-card {
    background: var(--surface-secondary);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    box-shadow: none;
    border: 0;
}
.kpi-card.warning, .kpi-card.pending { background: var(--bg-rose-light); }
.kpi-card .k {
    font-size: 11px;
    text-transform: uppercase;
    color: var(--text-tertiary);
    letter-spacing: 0.05em;
    font-weight: 300;
}
.kpi-card .v {
    font-size: 24px;
    font-weight: 900;
    margin-top: 4px;
    color: var(--text-primary);
    line-height: 1.1;
}
.kpi-card .v.pos { color: var(--bg-chartreuse-dark); }
.kpi-card .v.neg { color: var(--bg-rose-dark); }

/* ─── Brand picker — strict responsive grid ───
   Phase 13 r3.1 — Switched from auto-fill (which spawned 7-8 columns
   on wide monitors and stretched cards off-screen) to a fixed 1/2/3
   column responsive grid that always caps at 3 columns regardless
   of viewport width. */
.brand-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--card-gap);
    margin-top: 24px;
    margin-bottom: 32px;
    width: 100%;
}
@media (max-width: 900px)  { .brand-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .brand-grid { grid-template-columns: 1fr; } }

.brand-tile {
    display: flex;
    flex-direction: column;
    background: var(--surface-white);
    border: 0.5px solid var(--border-default);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    cursor: pointer;
    outline: none;
    transition: border-color 0.15s, transform 0.15s;
}
.brand-tile:hover, .brand-tile:focus-visible {
    border-color: var(--border-selected);
    transform: translateY(-2px);
}
.brand-tile .brand-title {
    margin: 0 0 4px 0;
    font-size: 13px;
    font-weight: 900;
    color: var(--text-primary);
}

/* The brief specifies brand-specific bg colors on the logo region — set
   via a data-brand attribute in the brand_picker template so each tile
   gets its own warm/green/cream backdrop. Falls back to surface-secondary. */
.brand-logo {
    position: relative;        /* anchors .brand-alert-badge */
    display: flex;
    align-items: center;
    justify-content: center;
    height: 120px;
    background: var(--surface-secondary);
    padding: 16px;
    box-sizing: border-box;
    line-height: 0;
    border-bottom: 0.5px solid var(--border-default);
}

/* Rose-fill circular alert badge — top-right of logo area, shown when
   the brand has any pending tasks. Anatomy per deck slide 4: rose
   circle 26×26, white "N" inside (Styrene B Black 9pt). Hidden when
   the brand is all-clear. */
.brand-alert-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--brand-rose);
    color: var(--surface-white);
    font-family: 'Styrene B', Arial, sans-serif;
    font-weight: 900;
    font-size: 12px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px rgba(0,0,0,0.12);
}
/* Phase 13 r3.8 — Logo size normalization across the brand grid.
   Wide wordmark logos (Volition 8.3:1, Grow-Good 6.6:1, Qhemet 6.4:1)
   hit the max-width cap and render at ~272x35-42. The taller-blockier
   NOTO (3.5:1) and square PiperWai (1:1) used to balloon vertically
   under `max-height: 100%`, towering over the wide siblings. The
   max-height: 55% cap (~66px of the 120px logo area) brings them
   back to visual parity without shrinking the wide logos. */
.brand-logo img {
    max-height: 55%;
    max-width: 80%;
    object-fit: contain;
    display: inline-block;
    vertical-align: middle;
}
.brand-logo-small img { max-width: 55%; max-height: 55%; }

.brand-tile[data-brand="GROWGOOD"]   .brand-logo { background: #C8EBD5; }
/* Phase 13 r3.6 — Volition tile background is the brand periwinkle
   (#9EADE5), NOT the warm-neutral page bg. */
.brand-tile[data-brand="VOLITION"]   .brand-logo { background: var(--brand-periwinkle); }
.brand-tile[data-brand="QHEMET"]     .brand-logo { background: #EFE0D8; }
.brand-tile[data-brand="NOTO"]       .brand-logo { background: #F0EFED; }
.brand-tile[data-brand="PIPERWAI"]   .brand-logo { background: #00A878; }
/* Phase 13 r3.5 — The piperwai.png file ships as a white "PW"
   wordmark on a transparent background (cleaned 2026-05-15), so it
   sits naturally on the green tile. Earlier `filter: brightness(0)
   invert(1)` rule was removed; it was squashing the image to a
   solid white square because the original file had a teal-on-teal
   fill behind the letters. */

.brand-tile-in-dev {
    cursor: default;
    opacity: 0.6;
}
.brand-tile-in-dev:hover {
    transform: none;
    border-color: var(--border-default);
}

.brand-tile h2, .brand-tile p, .brand-tile div, .brand-tile span {
    text-decoration: none; border: 0; background: transparent;
}

.brand-text-logo {
    font-size: 1.6em;
    font-weight: 900;
    letter-spacing: -0.5px;
    color: var(--text-primary);
    display: inline-block;
    vertical-align: middle;
    line-height: 1.2;
}

/* Info area below the logo — Phase 13 r3.1: consistent p-4 with a
   vertical flex column + 8px gap, per the StatusBadge integration brief. */
.brand-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
}
.brand-body h2 { margin: 0; font-size: 13px; font-weight: 900; }
.brand-body .brand-meta { font-size: 11px; color: var(--text-secondary); font-weight: 300; }

.brand-counts {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* ─── Status pills (.kpi-pill) ───
   Phase 13 r3.1 — Beefed up to be unmistakably pill-shaped so the
   brand-tile alerts don't look like raw text. Same anatomy as the
   StatusBadge component in the brief: weight-900 caps, rounded-full,
   tight letter-spacing, color-coded variants. The numeric count
   (passed via the leading text node) sits inline before the label.
   Optional <small> tag holds the lowercase descriptor. */
.kpi-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    line-height: 1.2;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    border: 0.5px solid transparent;
}
.kpi-pill small {
    font-weight: 900;
    font-size: 1em;
    opacity: 1;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.kpi-pill.warning   { background: var(--bg-rose-light);       color: var(--bg-rose-dark);       border-color: rgba(240,148,145,0.35); }
.kpi-pill.info      { background: var(--bg-periwinkle-light); color: var(--bg-periwinkle-dark); border-color: rgba(158,173,229,0.35); }
.kpi-pill.success   { background: var(--bg-chartreuse-light); color: var(--bg-chartreuse-dark); border-color: rgba(236,232,58,0.45); }
.kpi-pill.primary   { background: var(--bg-periwinkle-light); color: var(--bg-periwinkle-dark); border-color: rgba(158,173,229,0.35); }
.kpi-pill.secondary { background: var(--surface-secondary);   color: var(--text-secondary);     border-color: var(--border-default); }
.kpi-pill.danger    { background: var(--bg-rose-light);       color: var(--bg-rose-dark);       border-color: rgba(240,148,145,0.45); }
/* Status-dot leading indicator on pending / warning pills, to match
   the StatusBadge component in the brief. */
.kpi-pill.warning::before,
.kpi-pill.danger::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--brand-rose);
    flex-shrink: 0;
}
.kpi-pill.success::before {
    content: '✓';
    font-size: 11px;
    line-height: 1;
    flex-shrink: 0;
}

.brand-notes {
    margin: 8px 0 0 0;
    font-size: 0.82em;
    color: var(--text-secondary);
    line-height: 1.45;
    font-weight: 300;
}

/* ─── Orders toolbar + collapsible rows ─── */
.orders-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.orders-toolbar .active-sort {
    background: var(--brand-periwinkle);
    color: var(--brand-black);
    border-color: var(--brand-periwinkle);
    font-weight: 900;
}
.order-row {
    border: 0.5px solid var(--border-default);
    border-radius: var(--radius-md);
    margin-bottom: 6px;
    background: var(--surface-white);
    overflow: hidden;
}
.order-row.is-complete { opacity: 0.7; background: var(--surface-secondary); }
.order-row > summary {
    cursor: pointer;
    padding: 10px 14px;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}
.order-row > summary::-webkit-details-marker { display: none; }
.order-row > summary::before {
    content: '▶';
    color: var(--text-tertiary);
    font-size: 0.7em;
    margin-right: 4px;
    transition: transform 0.15s;
    display: inline-block;
}
.order-row[open] > summary::before { transform: rotate(90deg); }
.order-row-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    flex: 1;
}
.order-row-name { font-weight: 900; }
.order-row-detail {
    padding: 6px 14px 12px;
    border-top: 0.5px solid var(--border-default);
    background: var(--brand-warm-neutral);
}

/* ─── Supply-chain progress bars (PO timelines) ───
   Chunky tracks colored per stage, per the brief. */
.supply-chain-track {
    background: var(--surface-secondary);
    border-radius: 2px;
    height: 7px;
    overflow: hidden;
    display: flex;
}
.supply-chain-fill { height: 100%; }
.supply-chain-fill.stage-dp        { background: #5464A8; }
.supply-chain-fill.stage-ocean     { background: #1D9E75; }
.supply-chain-fill.stage-port      { background: #378ADD; }
.supply-chain-fill.stage-cm        { background: #534AB7; }

/* ─────────────────────────────────────────────────────────────────────────
   Phase 13 r3.3 — CORE Developer Reference deck patterns (slides 5-8)
   ───────────────────────────────────────────────────────────────────────── */

/* ─── Page header pattern ───
   H1 + subtitle on the left, right-aligned CTA on the right. Used on
   every brand-scoped page (brand dashboard, orders, BOMs, etc.). */
.core-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    flex-wrap: wrap;
    margin: 0 0 18px 0;
}
.core-page-header__title { flex: 1; min-width: 240px; }
.core-page-header__title h1 { margin: 0 0 4px 0; }
.core-page-header__title .subtitle { margin: 0; font-size: 12px; }
.core-page-header__actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    flex-shrink: 0;
}

/* ─── KPI cards row ───
   4 cards by default per the deck (Active SKUs / Pending approval /
   Avg landed COGS / Lead time). Drops to 2-col tablet, 1-col mobile. */
.kpi-cards-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 18px 0;
}
@media (max-width: 900px) { .kpi-cards-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .kpi-cards-row { grid-template-columns: 1fr; } }

/* KPI card — bg secondary, no border, radius-md. Warning variant
   uses rose-light bg + rose ink for label/value (deck slide 8). */
.kpi-card,
.kpi-cards-row > div {
    background: var(--surface-secondary);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    border: 0;
    box-shadow: none;
}
.kpi-card.warning, .kpi-card.pending,
.kpi-cards-row > .warning, .kpi-cards-row > .pending {
    background: var(--bg-rose-light);
}
.kpi-card .k,
.kpi-cards-row > div > .k {
    font-size: 11px;
    text-transform: uppercase;
    color: var(--text-tertiary);
    letter-spacing: 0.05em;
    font-weight: 300;
}
.kpi-card.warning .k, .kpi-card.pending .k,
.kpi-cards-row > .warning > .k, .kpi-cards-row > .pending > .k {
    color: var(--bg-rose-dark);
    opacity: 0.85;
}
.kpi-card .v,
.kpi-cards-row > div > .v {
    font-size: 24px;
    font-weight: 900;
    margin-top: 6px;
    color: var(--text-primary);
    line-height: 1.05;
    letter-spacing: -0.01em;
}
.kpi-card.warning .v, .kpi-card.pending .v,
.kpi-cards-row > .warning > .v, .kpi-cards-row > .pending > .v {
    color: var(--bg-rose-dark);
}

/* ─── Quick-actions card ───
   "What would you like to do today?" pattern per deck slide 5. Each
   row gets a 4px chartreuse left-accent rail, weight-900 title, and
   a Styrene B Light subtitle in secondary text. */
.quick-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.quick-actions__row {
    position: relative;
    display: block;
    padding: 8px 12px 8px 18px;
    text-decoration: none;
    color: var(--text-primary);
    border-radius: 6px;
    transition: background 0.12s;
}
.quick-actions__row::before {
    content: '';
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 0;
    width: 4px;
    background: var(--brand-chartreuse);
    border-radius: 2px;
}
.quick-actions__row:hover { background: var(--surface-secondary); }
.quick-actions__title {
    font-weight: 900;
    font-size: 13px;
    line-height: 1.2;
    margin-bottom: 2px;
}
.quick-actions__sub {
    font-size: 11.5px;
    color: var(--text-secondary);
    font-weight: 300;
    line-height: 1.35;
}

/* ─── Two-column dashboard layout ───
   Left = action items + NPD pipeline. Right = production runs +
   quick actions. Stacks to one column on tablet/mobile. */
.core-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    align-items: start;
}
@media (max-width: 900px) { .core-2col { grid-template-columns: 1fr; } }

/* ─── Supply-chain Gantt ───
   14-week grid per deck slide 6. 130px label column + 14 equal-width
   week cells with 3px gap, 22px row height. Current week gets a
   1.5px black outline. */
.gantt-wrap {
    overflow-x: auto;
    border: 0.5px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-white);
    padding: 14px 16px;
}
.gantt-header,
.gantt-row {
    display: grid;
    grid-template-columns: 130px repeat(14, minmax(36px, 1fr));
    gap: 3px;
    align-items: center;
}
.gantt-header {
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
    margin-bottom: 8px;
}
.gantt-header > div {
    text-align: center;
    padding: 4px 0;
}
.gantt-header > div:first-child { text-align: left; }
.gantt-row {
    height: 28px;
    margin-bottom: 5px;
}
.gantt-row > .gantt-label {
    font-size: 12px;
    font-weight: 900;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 6px;
}
.gantt-row > .gantt-cell {
    height: 22px;
    border-radius: 2px;
    background: transparent;
    position: relative;
}
.gantt-row > .gantt-cell.current-week {
    outline: 1.5px solid var(--brand-black);
    outline-offset: -0.5px;
    border-radius: 3px;
}
/* Stage colors per deck slide 5 supply-chain legend. */
.gantt-cell.stage-dp     { background: #5464A8; }
.gantt-cell.stage-ocean  { background: #1D9E75; }
.gantt-cell.stage-port   { background: #378ADD; }
.gantt-cell.stage-cm     { background: #534AB7; }
.gantt-cell.stage-empty  { background: var(--surface-secondary); opacity: 0.4; }

/* Stage legend chips under the Gantt. */
.gantt-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 10px;
    font-size: 11px;
    color: var(--text-secondary);
}
.gantt-legend__item { display: inline-flex; align-items: center; gap: 6px; }
.gantt-legend__swatch {
    width: 12px; height: 12px; border-radius: 2px; display: inline-block;
}

/* ─── PO table grid (deck slide 7) ───
   PO# / SKU+description / Amount / Status. 76px / 1fr / 76px / 96px.
   Row height ~56px, 0.5px dividers. */
.po-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
.po-table thead th {
    background: transparent;
    border-bottom: 0.5px solid var(--border-default);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
    font-weight: 900;
    padding: 6px 10px;
    text-align: left;
}
.po-table tbody td {
    padding: 12px 10px;
    border-bottom: 0.5px solid var(--border-default);
    vertical-align: middle;
    font-size: 12px;
}
.po-table .po-col-num   { width: 76px;  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-weight: 900; }
.po-table .po-col-name  { width: auto; }
.po-table .po-col-amt   { width: 96px;  text-align: right; font-variant-numeric: tabular-nums; font-weight: 900; }
.po-table .po-col-status{ width: 110px; }
.po-table .po-sub       { font-size: 11px; color: var(--text-secondary); font-weight: 300; margin-top: 2px; }

/* ─── BOM cost table (deck slide 7 right side) ───
   SKU name / Fill / Pack / Landed / Status. fill/pack/landed are
   right-aligned, monospaced. Dash "—" for unconfirmed cost columns. */
.bom-cost-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
.bom-cost-table thead th {
    background: transparent;
    border-bottom: 0.5px solid var(--border-default);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
    font-weight: 900;
    padding: 6px 10px;
    text-align: left;
}
.bom-cost-table tbody td {
    padding: 12px 10px;
    border-bottom: 0.5px solid var(--border-default);
    vertical-align: middle;
    font-size: 12px;
}
.bom-cost-table .bom-col-name      { width: auto; }
.bom-cost-table .bom-col-cost      { width: 62px; text-align: right; font-variant-numeric: tabular-nums; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.bom-cost-table .bom-col-cost.landed{ width: 68px; }
.bom-cost-table .bom-col-status    { width: 110px; text-align: left; }
.bom-cost-table .bom-cost-dash     { color: var(--text-tertiary); }
.bom-cost-table .bom-cost-sub      { font-size: 11px; color: var(--text-secondary); font-weight: 300; margin-top: 2px; }

/* ─── PO lifecycle status pills (semantic mapping) ─── */
.po-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75em;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 3px 10px;
    border-radius: 999px;
    white-space: nowrap;
}
.po-status.pending    { background: var(--bg-rose-light);       color: var(--bg-rose-dark); }
.po-status.confirmed  { background: var(--bg-chartreuse-light); color: var(--bg-chartreuse-dark); }
.po-status.in-transit { background: var(--bg-periwinkle-light); color: var(--bg-periwinkle-dark); }
.po-status.delivered  { background: var(--surface-secondary);   color: var(--text-secondary); }

/* ────────────────────────────────────────────────────────────────────
   Phase 20 — Brand Dashboard redesign.
   3-panel grid layout (Action Items, NPD Pipeline, Active Runs) plus
   the Quick Actions dropdown in the page header. Replaces the old
   KPI-strip + What-would-you-like-to-do callout pattern.
   ──────────────────────────────────────────────────────────────────── */

.brand-dash-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin: 18px 0 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-default);
}
.brand-dash-header__title h1 {
    margin: 0;
    font-size: 1.85em;
    font-weight: 900;
    letter-spacing: -0.01em;
}
.brand-dash-header__title .subtitle {
    margin: 4px 0 0;
    color: var(--text-secondary);
    font-size: 0.9em;
}
.brand-dash-header__actions { flex-shrink: 0; position: relative; }

/* Quick Actions dropdown */
.quick-actions { position: relative; display: inline-block; }
.quick-actions__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.85em;
    padding: 10px 16px;
}
.quick-actions__chevron { font-size: 0.8em; transition: transform 0.15s ease; }
.quick-actions__btn.is-open .quick-actions__chevron { transform: rotate(180deg); }
.quick-actions__menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 240px;
    background: #fff;
    border: 1px solid var(--border-default);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(15, 17, 24, 0.12);
    padding: 6px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
/* Phase 20 r3.49 — `display: flex` above overrides the browser's
   default `display: none` for [hidden], so the menu stayed visible
   even after JS toggled the hidden attribute. Bug: clicking Quick
   Actions again couldn't close the menu. Explicit reset wins. */
.quick-actions__menu[hidden] { display: none !important; }
.quick-actions__item {
    display: block;
    padding: 8px 12px;
    border-radius: 4px;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.9em;
    font-weight: 500;
    transition: background 0.1s;
}
.quick-actions__item:hover {
    background: var(--bg-warm-neutral);
    color: var(--text-primary);
}

/* 3-panel grid */
.brand-dash-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 4px;
}
@media (max-width: 900px) {
    .brand-dash-grid { grid-template-columns: 1fr; }
}

/* Panel card */
.dash-panel {
    background: #fff;
    border: 1px solid var(--border-default);
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(15, 17, 24, 0.04);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.dash-panel--alert { border-left: 4px solid var(--gg-danger, #c1372f); }
.dash-panel__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px 10px;
    border-bottom: 1px solid var(--border-default);
}
.dash-panel__header h2 {
    margin: 0;
    font-size: 1.05em;
    font-weight: 800;
    letter-spacing: -0.01em;
}
.dash-panel__body { padding: 12px 18px 14px; flex: 1; }
.dash-panel__empty {
    margin: 8px 0;
    padding: 18px 14px;
    background: var(--bg-warm-neutral);
    border-radius: 6px;
    text-align: center;
}

/* Action-items tiles */
.action-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 12px;
}
.action-items-tile {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    background: #fff;
    border: 1px solid var(--border-default);
    border-radius: 8px;
}
.action-items-tile__head { display: flex; align-items: center; gap: 10px; }
.action-items-tile__thumb {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border: 0.5px solid var(--border-default);
    border-radius: 4px;
    background: #fff;
    flex-shrink: 0;
}
.action-items-tile__thumb--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-warm-neutral);
    font-size: 0.7em;
    color: var(--text-muted);
}
.action-items-tile__title { flex: 1; min-width: 0; overflow: hidden; }
.action-items-tile__title b { font-size: 0.95em; }
.action-items-tile__title a { text-decoration: none; color: var(--text-primary); }
.action-items-tile__title .muted {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.action-items-tile__count {
    background: var(--bg-rose-light);
    color: var(--bg-rose-dark);
    border: 1px solid var(--bg-rose-dark);
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.78em;
    flex-shrink: 0;
}
.action-items-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.action-items-list li {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    background: var(--bg-rose-light);
    border-left: 3px solid var(--bg-rose-dark);
    border-radius: 3px;
    font-size: 0.85em;
}
.action-items-list__icon {
    color: var(--bg-rose-dark);
    font-weight: 700;
    flex-shrink: 0;
}
.action-items-list li a {
    color: var(--bg-rose-dark);
    font-weight: 600;
    text-decoration: none;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.action-items-tile__foot {
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px dashed var(--border-default);
}
.action-items-tile__locked {
    opacity: 0.55;
    cursor: not-allowed;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* NPD Pipeline list */
.npd-pipeline-list,
.active-runs-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.npd-pipeline-list__item,
.active-runs-list__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--border-default);
    border-radius: 6px;
    background: #fff;
}
.npd-pipeline-list__thumb {
    width: 36px;
    height: 36px;
    object-fit: contain;
    border: 0.5px solid var(--border-default);
    border-radius: 4px;
    background: #fff;
    flex-shrink: 0;
}
.npd-pipeline-list__thumb--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-warm-neutral);
    color: var(--text-muted);
}
.npd-pipeline-list__body,
.active-runs-list__body { flex: 1; min-width: 0; }
.npd-pipeline-list__name,
.active-runs-list__title { text-decoration: none; color: var(--text-primary); }
.npd-pipeline-list__status,
.npd-pipeline-list__actions,
.active-runs-list__status { flex-shrink: 0; }
.active-runs-list__status { text-align: right; }
.active-runs-list__status-badge {
    text-transform: capitalize;
    font-size: 0.75em;
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--surface-secondary);
    color: var(--text-secondary);
    border: 1px solid var(--border-default);
}
.active-runs-list__status-badge--draft { background: var(--bg-warm-neutral); color: var(--text-secondary); }
.active-runs-list__status-badge--awaiting-approval,
.active-runs-list__status-badge--sent,
.active-runs-list__status-badge--sent-to-vendor { background: var(--bg-rose-light); color: var(--bg-rose-dark); border-color: var(--bg-rose-dark); }
.active-runs-list__status-badge--approved,
.active-runs-list__status-badge--in-production { background: var(--bg-periwinkle-light); color: var(--bg-periwinkle-dark); border-color: var(--bg-periwinkle-dark); }
.active-runs-list__status-badge--partially-received,
.active-runs-list__status-badge--shipped { background: var(--bg-chartreuse-light); color: var(--bg-chartreuse-dark); border-color: var(--bg-chartreuse-dark); }

/* ────────────────────────────────────────────────────────────────────
   Phase 20 r3.46 — Brand Dashboard rebuilt to match the deck Screen 3.
   Restores the KPI strip + sub-tabs + "What would you like to do
   today?" panel that were stripped in r3.42, and adds a Gantt-style
   Active Production Runs view.
   ──────────────────────────────────────────────────────────────────── */

/* Header CTA cluster — CTA button + Quick Actions dropdown side-by-side. */
.brand-dash-header__actions { display: inline-flex; gap: 10px; align-items: center; }
.brand-dash-header__cta {
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.85em;
    padding: 10px 18px;
}

/* KPI strip (4 cards across) */
.kpi-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin: 0 0 12px;
}
@media (max-width: 800px) {
    .kpi-strip { grid-template-columns: repeat(2, 1fr); }
}
.kpi-card {
    background: var(--surface-secondary, #EEECE8);
    border-radius: 8px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 86px;
}
.kpi-card__label {
    font-size: 0.7em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
}
.kpi-card__value {
    font-size: 1.85em;
    font-weight: 900;
    line-height: 1.05;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}
.kpi-card--alert {
    background: var(--bg-rose-light);
    border: 1px solid var(--bg-rose-dark);
}
.kpi-card--alert .kpi-card__label { color: var(--bg-rose-dark); }
.kpi-card--alert .kpi-card__value { color: var(--bg-rose-dark); }

/* Sub-tab strip directly under the KPIs */
.dash-subtabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--border-default);
    margin: 0 0 14px;
    padding: 0 2px;
}
.dash-subtab {
    padding: 8px 14px;
    font-size: 0.9em;
    font-weight: 600;
    color: var(--text-secondary);
    text-decoration: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
}
.dash-subtab:hover { color: var(--text-primary); }
.dash-subtab--active {
    color: var(--text-primary);
    font-weight: 800;
    border-bottom-color: var(--brand-chartreuse, #ECE83A);
}

/* Two-column body */
.brand-dash-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    align-items: start;
}
@media (max-width: 1000px) {
    .brand-dash-body { grid-template-columns: 1fr; }
}
.brand-dash-body__col {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

/* Panel eyebrow label (small caps, deck style) */
.dash-panel__eyebrow {
    font-size: 0.7em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
    margin: 0;
}
.dash-panel--actions { background: #fff; }

/* Flat action-items list (deck style — rows with REVIEW / Upload actions) */
.action-items-flat { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.action-items-flat__row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 4px;
}
.action-items-flat__row + .action-items-flat__row { border-top: 1px solid var(--border-default); padding-top: 12px; }
.action-items-flat__bullet {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--bg-rose-light);
    border: 1px solid var(--bg-rose-dark);
    flex-shrink: 0;
}
.action-items-flat__body { flex: 1; min-width: 0; }
.action-items-flat__title {
    display: block;
    font-weight: 700;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.92em;
}
.action-items-flat__action {
    flex-shrink: 0;
    padding: 5px 12px;
    border-radius: 4px;
    background: var(--bg-periwinkle-light, #C7D2F5);
    color: var(--text-primary);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.72em;
    letter-spacing: 0.05em;
    text-decoration: none;
    border: 1px solid var(--bg-periwinkle-dark, #9EADE5);
}
.action-items-flat__action--review { background: var(--bg-periwinkle-light); }

/* Flat NPD pipeline list (deck style — title + stage pill) */
.npd-pipeline-flat { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.npd-pipeline-flat__row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 4px;
}
.npd-pipeline-flat__row + .npd-pipeline-flat__row { border-top: 1px solid var(--border-default); padding-top: 12px; }
.npd-pipeline-flat__body { flex: 1; min-width: 0; }
.npd-pipeline-flat__title { display: block; font-weight: 700; color: var(--text-primary); text-decoration: none; font-size: 0.92em; }
.npd-stage-pill {
    flex-shrink: 0;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.75em;
    font-weight: 700;
    letter-spacing: 0.02em;
    border: 1px solid transparent;
}
.npd-stage-pill--rose       { background: var(--bg-rose-light);       color: var(--bg-rose-dark);       border-color: var(--bg-rose-dark); }
.npd-stage-pill--periwinkle { background: var(--bg-periwinkle-light); color: var(--bg-periwinkle-dark); border-color: var(--bg-periwinkle-dark); }
.npd-stage-pill--chartreuse { background: var(--bg-chartreuse-light); color: var(--bg-chartreuse-dark); border-color: var(--bg-chartreuse-dark); }
.npd-stage-pill--neutral    { background: var(--bg-warm-neutral);     color: var(--text-secondary);     border-color: var(--border-default); }

/* Gantt-style Active Production Runs */
.gantt-runs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.gantt-runs__row { display: flex; flex-direction: column; gap: 4px; }
.gantt-runs__label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
}
.gantt-runs__title { font-weight: 700; color: var(--text-primary); text-decoration: none; font-size: 0.92em; }
.gantt-runs__week { font-size: 0.78em; }
.gantt-runs__track {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    height: 10px;
    border-radius: 4px;
    overflow: hidden;
}
.gantt-runs__seg { background: var(--bg-warm-neutral); }
.gantt-runs__seg--dp.is-active     { background: var(--bg-rose-dark, #c1372f); }
.gantt-runs__seg--cm.is-active     { background: #6e59a5; }
.gantt-runs__seg--ocean.is-active  { background: var(--bg-chartreuse-dark, #8aa83a); }
.gantt-runs__seg--port.is-active   { background: var(--bg-periwinkle-dark, #5a72d4); }
.gantt-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-default);
    font-size: 0.78em;
    color: var(--text-secondary);
}
.gantt-legend__item { display: inline-flex; align-items: center; gap: 6px; }
.gantt-legend__swatch { width: 14px; height: 10px; border-radius: 2px; display: inline-block; }
.gantt-legend__swatch--dp    { background: var(--bg-rose-dark, #c1372f); }
.gantt-legend__swatch--cm    { background: #6e59a5; }
.gantt-legend__swatch--ocean { background: var(--bg-chartreuse-dark, #8aa83a); }
.gantt-legend__swatch--port  { background: var(--bg-periwinkle-dark, #5a72d4); }

/* "What would you like to do today?" actions panel */
.dash-actions { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.dash-actions__row {
    padding: 8px 12px;
    border-left: 3px solid var(--brand-chartreuse, #ECE83A);
    background: #fff;
}
.dash-actions__title {
    display: block;
    font-weight: 800;
    font-size: 0.95em;
    color: var(--text-primary);
    text-decoration: none;
}
.dash-actions__title:hover { color: var(--text-primary); text-decoration: underline; }
.dash-actions__row p { margin: 2px 0 0; }

/* ────────────────────────────────────────────────────────────────────
   Phase 20 r3.48 — Color accents + Active Orders styling.
   Adds per-panel chartreuse / periwinkle / rose top-borders and
   small colored dots next to each panel eyebrow header so the deck's
   brand colors come through even without the KPI strip / Gantt.
   ──────────────────────────────────────────────────────────────────── */

/* Top-edge color accents per panel type. The 3px solid stripe lives
   on a ::before pseudo so it sits flush with the card edge. */
.dash-panel { position: relative; }
.dash-panel--accent-chartreuse { box-shadow: inset 0 3px 0 var(--brand-chartreuse, #ECE83A), 0 1px 3px rgba(15,17,24,0.04); }
.dash-panel--accent-periwinkle { box-shadow: inset 0 3px 0 var(--bg-periwinkle-dark, #5a72d4), 0 1px 3px rgba(15,17,24,0.04); }
.dash-panel--accent-rose       { box-shadow: inset 0 3px 0 var(--bg-rose-dark, #c1372f),       0 1px 3px rgba(15,17,24,0.04); }
.dash-panel--accent-rose-soft  { box-shadow: inset 0 3px 0 var(--bg-rose-light, #F09491),     0 1px 3px rgba(15,17,24,0.04); }

/* Colored dot prefix on each panel eyebrow heading. */
.dash-panel__dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
    transform: translateY(-1px);
}
.dash-panel__dot--chartreuse { background: var(--brand-chartreuse, #ECE83A); }
.dash-panel__dot--periwinkle { background: var(--bg-periwinkle-dark, #5a72d4); }
.dash-panel__dot--rose       { background: var(--bg-rose-dark, #c1372f); }

/* Quick Actions item — punch up the hover state so the menu items
   read as obviously clickable. */
.quick-actions__item:hover {
    background: var(--bg-chartreuse-light, #f6f5b3);
    color: var(--text-primary);
}

/* Active Orders list — shares the active-runs-list row pattern. */
.active-orders-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.active-orders-list__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--border-default);
    border-radius: 6px;
    background: #fff;
}
.active-orders-list__body { flex: 1; min-width: 0; }
.active-orders-list__title { text-decoration: none; color: var(--text-primary); }
.active-orders-list__status { flex-shrink: 0; text-align: right; }
.active-orders-list__status-badge {
    text-transform: capitalize;
    font-size: 0.75em;
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--surface-secondary);
    color: var(--text-secondary);
    border: 1px solid var(--border-default);
}
.active-orders-list__status-badge--pending,
.active-orders-list__status-badge--pending-patricia,
.active-orders-list__status-badge--pending-approval { background: var(--bg-rose-light); color: var(--bg-rose-dark); border-color: var(--bg-rose-dark); }
.active-orders-list__status-badge--approved,
.active-orders-list__status-badge--in-production,
.active-orders-list__status-badge--in-progress      { background: var(--bg-periwinkle-light); color: var(--bg-periwinkle-dark); border-color: var(--bg-periwinkle-dark); }
.active-orders-list__status-badge--ready-to-ship,
.active-orders-list__status-badge--partially-shipped { background: var(--bg-chartreuse-light); color: var(--bg-chartreuse-dark); border-color: var(--bg-chartreuse-dark); }

/* ────────────────────────────────────────────────────────────────────
   Phase 21 r3.54 — SKU edit page Ops-first refactor.
   Header strip (photo + name + status badges + quick actions on the
   right). Vitals grid (4-col on wide screens, 2-col under 700px).
   Inline BOM card lives directly below.
   ──────────────────────────────────────────────────────────────────── */

.sku-header {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 16px 0 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-default);
}
.sku-header__photo {
    width: 92px;
    height: 92px;
    object-fit: contain;
    border: 1px solid var(--border-default);
    border-radius: 10px;
    background: #fff;
    padding: 4px;
    flex-shrink: 0;
}
.sku-header__photo--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
    font-size: 0.85em;
    background: var(--bg-warm-neutral, #f6f4ef);
    border-style: dashed;
}
.sku-header__body { flex: 1; min-width: 0; }
.sku-header__title {
    margin: 0 0 6px 0;
    font-size: 1.6em;
    font-weight: 900;
    letter-spacing: -0.01em;
}
.sku-header__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sku-header__code {
    font-family: ui-monospace, Menlo, monospace;
    color: var(--text-secondary);
    background: var(--surface-secondary, #EEECE8);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.85em;
    font-weight: 700;
}
.sku-header__quick { flex-shrink: 0; }

.sku-vitals-card { padding: 18px 20px; }
.sku-vitals-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px dashed var(--border-default);
}
@media (max-width: 900px) {
    .sku-vitals-grid { grid-template-columns: repeat(2, 1fr); }
}
.sku-vital { display: flex; flex-direction: column; gap: 4px; }
.sku-vital__label {
    font-size: 0.72em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
}
.sku-vital__value { font-size: 1.05em; }
.sku-vital__input-wrap {
    display: flex;
    align-items: center;
    gap: 0;
    background: #fff;
    border: 1px solid var(--border-default);
    border-radius: 6px;
    overflow: hidden;
}
.sku-vital__input-wrap:focus-within { border-color: var(--bg-periwinkle-dark, #5a72d4); }
.sku-vital__prefix,
.sku-vital__suffix {
    padding: 8px 10px;
    background: var(--surface-secondary, #EEECE8);
    color: var(--text-secondary);
    font-weight: 700;
    font-size: 0.9em;
}
.sku-vital__input {
    border: none !important;
    flex: 1;
    min-width: 0;
    padding: 8px 10px;
    font-size: 1em;
    font-weight: 700;
    outline: none;
    background: transparent;
}

.sku-secondary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px 16px;
}
@media (max-width: 900px) {
    .sku-secondary-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .sku-secondary-grid { grid-template-columns: 1fr; }
}
.sku-secondary-grid .field { margin: 0; }

.sku-bom-card { padding: 14px 20px 16px; }
.sku-bom-card table { width: 100%; border-collapse: collapse; }
.sku-bom-card table th,
.sku-bom-card table td { padding: 6px 8px; border-bottom: 1px solid var(--border-default); font-size: 0.9em; }
.sku-bom-card table th { text-align: left; font-size: 0.72em; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); }
.sku-bom-card .txt-right { text-align: right; }

/* ────────────────────────────────────────────────────────────────────
   Phase 22 r3.55 — Earl PO-style sheet. Replaces the prior 3-card
   stepped flow with a single PO-PDF-like layout.
   ──────────────────────────────────────────────────────────────────── */
.po-sheet-header { padding: 18px 22px; }
.po-sheet-header__grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 18px;
    align-items: start;
}
@media (max-width: 900px) {
    .po-sheet-header__grid { grid-template-columns: 1fr 1fr; }
}
.po-sheet-header__title {
    margin: 0;
    font-size: 1.6em;
    font-weight: 900;
    letter-spacing: -0.01em;
}
.po-sheet-header__grid .muted.small {
    font-size: 0.7em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
}
.po-sheet-lines { padding: 18px 22px; }
.po-sheet-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 8px;
}
.po-sheet-table th,
.po-sheet-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-default);
    font-size: 0.92em;
    vertical-align: top;
}
.po-sheet-table th {
    text-align: left;
    font-size: 0.72em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    background: var(--bg-warm-neutral, #f6f4ef);
    border-bottom: 1px solid var(--border-default);
}
.po-sheet-table .txt-right { text-align: right; }
.po-sheet-table tfoot td {
    border-top: 2px solid var(--text-primary);
    border-bottom: none;
    padding-top: 12px;
}
.po-sheet-table__price-input {
    width: 110px;
    padding: 5px 8px;
    border: 1px solid var(--border-default);
    border-radius: 4px;
    text-align: right;
    font-family: ui-monospace, Menlo, monospace;
}

/* Phase 22 r3.56 — Vendor edit page simplification. Summary card on
   top (name + payment terms only), full form lives inside a
   collapsible <details>. */
.vendor-summary-card { padding: 18px 22px; margin: 14px 0; }
.vendor-summary-card__head {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
    align-items: start;
}
@media (max-width: 700px) {
    .vendor-summary-card__head { grid-template-columns: 1fr; }
}
.vendor-summary-card__name h1 {
    font-size: 1.6em;
    font-weight: 900;
    letter-spacing: -0.01em;
}
.vendor-summary-card__terms-value { font-size: 1.05em; font-weight: 700; }
.vendor-edit-details { margin: 0; }
.vendor-edit-details__summary {
    cursor: pointer;
    display: inline-block;
    padding: 6px 14px;
    background: var(--surface-secondary, #EEECE8);
    border: 1px solid var(--border-default);
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.9em;
    list-style: none;
    user-select: none;
}
.vendor-edit-details__summary::-webkit-details-marker { display: none; }
.vendor-edit-details[open] .vendor-edit-details__summary {
    background: var(--bg-warm-neutral, #f6f4ef);
}