/* ----------------------------------------------------------
   Parot — design tokens (orange + neutrals only)
---------------------------------------------------------- */
:root {
    --brand:        #ff914d;
    --brand-hover:  #e87528;
    --brand-dark:   #c45a16;
    --brand-soft:   #fff4ec;
    --brand-softer: #fffaf5;
    --brand-border: #ffd8bd;

    --ink:          #1a1a1a;
    --ink-2:        #3d3d3d;
    --ink-3:        #6e6e6e;
    --muted:        #9a9a9a;

    --bg:           #ffffff;
    --bg-2:         #fafafa;
    --bg-3:         #f3f3f3;
    --border:       #d9d9d9;
    --border-strong:#a3a3a3;

    --danger:       #d92d20;
    --danger-dark:  #912018;
    --danger-soft:  #fef3f2;
    --danger-border:#fecdca;

    --radius:       3px;
    --radius-sm:    2px;
    --radius-lg:    4px;
    --shadow-sm:    0 1px 2px rgba(0,0,0,0.04), 0 1px 1px rgba(0,0,0,0.03);
    --shadow:       0 4px 12px rgba(0,0,0,0.05), 0 1px 3px rgba(0,0,0,0.04);

    --font:         -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", system-ui, sans-serif;
    --mono:         "SF Mono", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg-2);
    color: var(--ink);
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ----------------------------------------------------------
   Top bar
---------------------------------------------------------- */
.topbar {
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    padding: 12px 28px;
    display: flex;
    align-items: center;
    gap: 16px;
    position: sticky;
    top: 0;
    z-index: 10;
}

.topbar .brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--ink);
}

.topbar .brand img {
    height: 34px;
    width: auto;
    display: block;
}

.topbar .brand .wordmark {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.topbar .brand .product-tag {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-3);
    border-left: 1px solid var(--border);
    padding-left: 10px;
    margin-left: 4px;
}

.topbar .spacer { flex: 1; }

.topbar .nav { display: flex; gap: 6px; }
.topbar .nav a {
    font-size: 13px;
    color: var(--ink-2);
    text-decoration: none;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
}
.topbar .nav a:hover { background: var(--brand-soft); color: var(--brand-dark); }

/* ----------------------------------------------------------
   Page chrome
---------------------------------------------------------- */
.page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 28px;
}
.page.wide { max-width: 1500px; }

.breadcrumb {
    color: var(--ink-3);
    font-size: 13px;
    margin-bottom: 18px;
}
.breadcrumb a { color: var(--brand-dark); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

h1 {
    margin: 0 0 4px 0;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--ink);
}
h2 {
    margin: 32px 0 10px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.005em;
}
h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
}

.subtitle {
    color: var(--ink-3);
    font-size: 13px;
    margin: 2px 0 24px 0;
}

a { color: var(--brand-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

.empty { color: var(--muted); font-style: italic; }
.mono { font-family: var(--mono); }

/* Default rugged section card — applies to every <section> on a content page */
.page > section {
    background: var(--bg);
    border: 1.5px solid var(--border-strong);
    border-radius: var(--radius);
    padding: 18px 22px;
    margin-bottom: 18px;
}
.page > section h2 {
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 1.5px solid var(--border);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* ----------------------------------------------------------
   Buttons
---------------------------------------------------------- */
.btn {
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    padding: 7px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1.3;
}
.btn-primary {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand);
}
.btn-primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); text-decoration: none; }

.btn-ghost {
    background: var(--bg);
    color: var(--ink-2);
    border-color: var(--border-strong);
}
.btn-ghost:hover { background: var(--bg-3); color: var(--ink); text-decoration: none; }

.btn-outline {
    background: var(--bg);
    color: var(--brand-dark);
    border-color: var(--brand);
}
.btn-outline:hover { background: var(--brand-soft); text-decoration: none; }

.btn-sm { font-size: 12px; padding: 4px 10px; }

/* ----------------------------------------------------------
   Banners
---------------------------------------------------------- */
.banner {
    background: var(--brand-soft);
    color: var(--brand-dark);
    border: 1px solid var(--brand-border);
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    margin-bottom: 16px;
    font-size: 13px;
}

/* ----------------------------------------------------------
   Cards
---------------------------------------------------------- */
.card {
    background: var(--bg);
    border: 1.5px solid var(--border-strong);
    border-radius: var(--radius);
    padding: 18px 20px;
    margin-bottom: 18px;
    box-shadow: none;
}
.card.muted { opacity: 0.65; background: var(--bg-2); }

.card .card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}
.card .card-header .actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.card .card-header .actions form { display: inline; margin: 0; }
.card .meta-line { color: var(--ink-3); font-size: 13px; margin: 2px 0 0 0; }
.card .activity { color: var(--muted); font-size: 12px; font-family: var(--mono); margin-top: 2px; }

/* ----------------------------------------------------------
   Project totals card (top-of-page)
---------------------------------------------------------- */
.cost-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px 22px;
    margin-bottom: 16px;
    box-shadow: var(--shadow-sm);
}
.cost-card-overcharge { border-left: 4px solid var(--brand); }
.cost-card-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-2);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
}
.cost-scope {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    color: var(--ink-3);
    margin-left: 6px;
}
.cost-stats {
    display: flex;
    gap: 40px;
    align-items: baseline;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.cost-stat { min-width: 200px; }
.cost-stat-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-3);
    margin-bottom: 4px;
    font-weight: 600;
}
.cost-stat-value {
    font-family: var(--mono);
    font-size: 26px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.1;
}
.cost-stat-meta {
    font-size: 12px;
    color: var(--ink-3);
    margin-top: 4px;
}
.cost-delta.delta-over  { color: var(--danger); }
.cost-delta.delta-under { color: var(--ink-2); }

.cost-breakdown {
    border-top: 1px solid var(--border);
    padding-top: 12px;
    display: grid;
    gap: 6px;
}
.cost-breakdown-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 12px;
}
.cost-breakdown-label {
    color: var(--ink-3);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    min-width: 90px;
}
.cost-breakdown-vals { font-family: var(--mono); color: var(--ink-2); text-align: right; }
.cost-breakdown-note { color: var(--ink-3); font-family: var(--font); margin-left: 6px; }
.cost-breakdown-warn .cost-breakdown-vals { color: var(--ink-2); font-family: var(--mono); }
.cost-breakdown-warn .cost-breakdown-note { color: var(--ink-3); font-family: var(--font); }
.cost-breakdown-total {
    padding-top: 8px;
    margin-top: 4px;
    border-top: 1px solid var(--border);
}
.cost-breakdown-total .cost-breakdown-label { color: var(--ink); }
.cost-breakdown-total .cost-breakdown-vals { font-size: 13px; color: var(--ink); }

.cost-card-foot {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    font-size: 12px;
    color: var(--ink-3);
}

/* ----------------------------------------------------------
   Item mappings page
---------------------------------------------------------- */
.mapping-stats {
    display: flex;
    gap: 10px;
    align-items: center;
    color: var(--ink-3);
    font-size: 13px;
    margin: 0 0 22px 0;
    flex-wrap: wrap;
}
.mapping-stats strong { color: var(--ink); font-weight: 700; }

.mapping-row {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "sku    actions"
        "form   form";
    gap: 10px 14px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    margin-bottom: 10px;
}
.mapping-row-pending {
    background: var(--brand-soft);
    border-color: var(--brand-border);
}
.mapping-row-reconcile {
    background: var(--bg);
    border-left: 4px solid var(--brand);
}
.reconcile-options {
    grid-area: form;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    padding: 4px 0;
}
.reconcile-ratio-form {
    display: flex;
    gap: 6px;
    align-items: center;
    margin: 0;
    background: var(--bg-2);
    padding: 6px 12px;
    border-radius: var(--radius-sm);
}
.reconcile-ratio-form label {
    font-size: 13px;
    color: var(--ink-2);
}
.reconcile-ratio-form input[type="number"] {
    font-family: var(--mono);
    font-size: 13px;
    padding: 5px 8px;
    border: 1px solid var(--border-strong);
    border-radius: 3px;
    width: 90px;
    background: var(--bg);
    color: var(--ink);
}
.mapping-sku { grid-area: sku; min-width: 0; }
.mapping-mat { font-weight: 700; color: var(--ink); font-size: 14px; }
.mapping-desc {
    color: var(--ink-2);
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 1px;
}
.mapping-meta { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.mapping-side-actions {
    grid-area: actions;
    display: flex;
    gap: 6px;
    align-items: flex-start;
}
.mapping-form {
    grid-area: form;
    display: flex;
    gap: 8px;
    align-items: stretch;
    margin: 0;
    min-width: 0;
}
.mapping-select {
    font-family: var(--font);
    font-size: 13px;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-strong);
    background: var(--bg);
    color: var(--ink);
    flex: 1;
    min-width: 0;
    cursor: pointer;
}
.mapping-select:focus { outline: 2px solid var(--brand); outline-offset: -1px; }

.mapping-suggestions {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.mapping-suggestions-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-3);
    font-weight: 600;
    margin-right: 4px;
}
.suggestion-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bg);
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    padding: 4px 10px 4px 8px;
    font-size: 12px;
    cursor: pointer;
    font-family: inherit;
    color: var(--ink-2);
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.suggestion-chip:hover {
    background: var(--brand-soft);
    border-color: var(--brand);
    color: var(--brand-dark);
}
.suggestion-mat { font-family: var(--mono); font-weight: 700; color: var(--ink); }
.suggestion-chip:hover .suggestion-mat { color: var(--brand-dark); }
.suggestion-desc {
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.suggestion-score {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--ink-3);
    background: var(--bg-3);
    padding: 1px 6px;
    border-radius: 999px;
}
.mapping-notes {
    font-size: 12px;
    color: var(--ink-3);
    line-height: 1.45;
    margin-top: 8px;
    max-width: 800px;
}
.mapping-actions { display: none; }  /* legacy — actions now live in .mapping-side-actions */
.confidence-chip {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 7px;
    border-radius: 3px;
    border: 1px solid var(--border);
    margin-right: 8px;
    vertical-align: 1px;
    font-style: normal;
}
.confidence-high   { background: var(--brand); color: #fff; border-color: var(--brand); }
.confidence-medium { background: var(--brand-soft); color: var(--brand-dark); border-color: var(--brand-border); }
.confidence-low    { background: var(--bg-3); color: var(--ink-3); border-color: var(--border-strong); border-style: dashed; }

/* Compact page header with title + right-side action */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}
.page-header h1 { margin: 0; }

/* Compact stats strip — one line, no separators, light pills */
.stat-strip {
    display: flex;
    gap: 14px;
    margin: 0 0 24px 0;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--ink-3);
    border-top: 1.5px solid var(--border);
    border-bottom: 1.5px solid var(--border);
    padding: 8px 0;
}
.stat-strip span strong { color: var(--ink); font-weight: 700; }

/* Mapping page top legend */
.mapping-legend {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0 0 22px 0;
    padding: 12px 16px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 12px;
    color: var(--ink-2);
}
.legend-pill {
    display: inline-block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 3px;
    margin-right: 8px;
    min-width: 90px;
    text-align: center;
}
.legend-po      { background: var(--danger-soft); color: var(--danger-dark); border: 1px solid var(--danger-border); }
.legend-invoice { background: var(--brand-soft); color: var(--brand-dark); border: 1px solid var(--brand-border); }
.legend-quote   { background: var(--bg-3);      color: var(--ink-2);      border: 1px solid var(--border-strong); }
.legend-mapping { background: var(--ink);       color: #fff;              border: 1px solid var(--ink); }

/* PO source pills (separate from invoice-source pills, slightly different hue) */
.mapping-row .row-source-label.from-po,
.row-source-label[data-source="po"] {
    background: var(--danger-soft);
    color: var(--danger-dark);
    border-color: var(--danger-border);
}

/* Inline source label on each SKU row */
.row-source-label {
    display: inline-block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 3px;
    background: var(--brand-soft);
    color: var(--brand-dark);
    border: 1px solid var(--brand-border);
    margin-bottom: 4px;
}

/* Side-distinguishing colors inside a mapping pair */
.invoice-side { color: var(--brand-dark); }
.quote-side   { color: var(--ink); }

/* Form labels inside mapping forms */
.form-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-3);
    font-weight: 600;
    align-self: center;
    white-space: nowrap;
}

/* Compact column subtitles in approved table */
.th-sub {
    display: block;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--ink-3);
    font-size: 11px;
    margin-top: 2px;
}

/* Project-scoped mapping sections */
.mapping-project-section {
    margin-bottom: 40px;
    padding: 20px 24px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.mapping-project-section h2 {
    margin-top: 0;
    border-bottom: 1px solid var(--border);
    padding-bottom: 10px;
}
.mapping-subsection {
    margin-top: 28px;
    padding-top: 16px;
    border-top: 1px dashed var(--border);
}
.mapping-subsection:first-of-type {
    margin-top: 16px;
    padding-top: 0;
    border-top: 0;
}
.mapping-section-title {
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 6px 0;
    color: var(--ink);
}

/* Global unit conversions section */
.unit-conversions-section {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 24px;
    margin-bottom: 28px;
}
.unit-conversions-section h2 {
    margin-top: 0;
    border-bottom: 1px solid var(--border);
    padding-bottom: 10px;
}
.unit-conversions-section .row-needs-factor {
    background: var(--brand-soft);
}
.unit-conversions-section .row-needs-factor td.mono { color: var(--brand-dark); }
.unit-factor-form {
    display: flex;
    gap: 6px;
    align-items: center;
    margin: 0;
}
.unit-factor-form input[type="number"] {
    font-family: var(--mono);
    font-size: 13px;
    padding: 5px 10px;
    border: 1px solid var(--border-strong);
    border-radius: 3px;
    width: 110px;
    background: var(--bg);
}

/* PO mapping row: PO description on top, two target columns below */
.po-mapping-row {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 18px;
    margin-bottom: 12px;
}
.po-mapping-header { margin-bottom: 14px; }
.po-desc-text {
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    margin: 6px 0 4px 0;
}
.po-desc-meta { font-size: 12px; color: var(--ink-3); }

.po-targets {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding-top: 12px;
    border-top: 1px dashed var(--border);
}
.po-target-col {
    background: var(--bg-2);
    padding: 10px 14px;
    border-radius: var(--radius-sm);
}
.po-target-label {
    font-size: 12px;
    color: var(--ink-2);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.po-target-form {
    display: flex;
    gap: 6px;
    align-items: stretch;
    margin: 8px 0 0 0;
}
.po-mapping-submit {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed var(--border);
    display: flex;
    justify-content: flex-end;
}
.suggestion-chip.chip-applied {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand);
}
.suggestion-chip.chip-applied .suggestion-mat,
.suggestion-chip.chip-applied .suggestion-score { color: #fff; background: rgba(255,255,255,0.2); }

/* Pairing chips visually distinct from single-target suggestions */
.pairing-chip {
    background: var(--brand-soft);
    border-color: var(--brand-border);
}
.pairing-chip .suggestion-mat { color: var(--brand-dark); }
.mapping-project-unlinked { border-left: 4px dashed var(--border-strong); }
.mapping-project-unlinked h2 { color: var(--ink-2); }
.mapping-subhead {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-3);
    margin: 20px 0 10px 0;
}

/* SKU -> invoice list expander */
.sku-invoices {
    margin-top: 8px;
    font-size: 12px;
}
.sku-invoices > summary {
    cursor: pointer;
    color: var(--brand-dark);
    list-style: none;
    padding: 2px 0;
    display: inline-block;
}
.sku-invoices > summary::-webkit-details-marker { display: none; }
.sku-invoices > summary::before {
    content: "▸";
    margin-right: 4px;
    display: inline-block;
    transition: transform 0.15s;
}
.sku-invoices[open] > summary::before { transform: rotate(90deg); }
.sku-invoices-list {
    list-style: none;
    margin: 6px 0 0 16px;
    padding: 0;
    max-height: 240px;
    overflow-y: auto;
    border-left: 2px solid var(--border);
}
.sku-invoices-list li {
    padding: 3px 10px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px dotted var(--border);
}
.sku-invoices-list li:last-child { border-bottom: 0; }
.mapping-actions { display: flex; gap: 6px; }

/* ----------------------------------------------------------
   Unmatched invoice items section
---------------------------------------------------------- */
.unmatched-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 18px;
    box-shadow: var(--shadow-sm);
}
.unmatched-card > summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--ink-2);
    list-style: none;
    padding: 4px 0;
}
.unmatched-card > summary::-webkit-details-marker { display: none; }
.unmatched-card > summary::before {
    content: "▸";
    color: var(--brand);
    margin-right: 8px;
    display: inline-block;
    transition: transform 0.15s;
}
.unmatched-card[open] > summary::before { transform: rotate(90deg); }
.unmatched-card tfoot td { border-top: 2px solid var(--border-strong); }

/* OC price drift table */
.row-over { background: var(--danger-soft); }
.drift-over  { color: var(--danger-dark); font-weight: 700; }
.drift-under { color: var(--ink-3); }

/* ----------------------------------------------------------
   Freight summary card (top-of-page)
---------------------------------------------------------- */
.freight-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 18px;
    margin-bottom: 22px;
    box-shadow: var(--shadow-sm);
}
.freight-card-overcharge {
    border-color: var(--danger-border);
    background: var(--danger-soft);
    border-left: 4px solid var(--danger);
    box-shadow: 0 0 0 1px var(--danger-border), 0 2px 6px rgba(217, 45, 32, 0.08);
}
.freight-card-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-2);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
}
.freight-card-overcharge .freight-card-title { color: var(--danger-dark); }
.freight-scope {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    color: var(--ink-3);
    margin-left: 6px;
}
.freight-stats {
    display: flex;
    gap: 32px;
    align-items: baseline;
    flex-wrap: wrap;
}
.freight-stat {
    min-width: 160px;
}
.freight-stat-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-3);
    margin-bottom: 4px;
    font-weight: 600;
}
.freight-stat-value {
    font-family: var(--mono);
    font-size: 22px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.1;
}
.freight-stat-meta {
    font-size: 12px;
    color: var(--ink-3);
    margin-top: 3px;
}
.freight-delta.delta-over  { color: var(--danger); }
.freight-delta.delta-under { color: var(--ink-2); }
.freight-card-foot {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    font-size: 12px;
    color: var(--ink-3);
}
.freight-card-overcharge .freight-card-foot { border-top-color: var(--danger-border); }

/* ----------------------------------------------------------
   Bars (progress)
---------------------------------------------------------- */
.totals { font-family: var(--mono); font-size: 13px; color: var(--ink-2); margin-bottom: 6px; }

.bar-wrap {
    background: var(--bg-3);
    border-radius: var(--radius-sm);
    height: 20px;
    overflow: hidden;
    position: relative;
}
.bar-wrap.tall { height: 22px; }
.bar-fill {
    height: 100%;
    background: var(--brand);
    transition: width 0.2s;
}
.bar-fill.qty { background: var(--border-strong); }

/* Stacked progress bar: two fills overlaid, both anchored to the left edge.
   The bottom layer (confirmed) is wider but lighter; the top layer
   (invoiced) is narrower and solid orange. */
.bar-wrap.stacked .bar-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
}
.bar-fill-confirmed { background: rgba(255, 145, 77, 0.35); }  /* brand at low opacity = "at quote" */
.bar-fill-invoiced  { background: var(--brand); }
.bar-fill-confirmed.bar-under    { background: rgba(54, 162, 86, 0.30); }  /* green pale */
.bar-fill-invoiced.bar-under     { background: #36a256; }                  /* green solid */
.bar-fill-confirmed.bar-overflow { background: rgba(217, 45, 32, 0.30); }  /* red pale */
.bar-fill-invoiced.bar-overflow  { background: var(--danger); }            /* red solid */

/* Multi-bar horizontal chart — comparing two values side-by-side */
.multi-bar-chart {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.multi-bar-title {
    font-family: var(--mono);
    font-size: 13px;
    color: var(--ink-3);
    margin-bottom: 6px;
}
.multi-bar-row {
    display: block;
}
.multi-bar-track {
    position: relative;
    height: 28px;
    background: var(--bg-3);
    border-radius: var(--radius-sm);
    overflow: hidden;
    cursor: help;
}
.multi-bar-inner-label {
    position: absolute;
    top: 0;
    left: 12px;
    line-height: 28px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
    z-index: 1;
    pointer-events: none;
    white-space: nowrap;
}
.multi-bar-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
}
.bar-fill-quoted { background: var(--ink-2); }

/* ----------------------------------------------------------
   Dashboard project rows — compact stat-strip per project
---------------------------------------------------------- */
.project-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 16px 20px;
    margin-bottom: 8px;
    background: var(--bg);
    border: 1.5px solid var(--border-strong);
    border-radius: var(--radius);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.12s, background 0.12s;
}
.project-row:hover {
    border-color: var(--brand);
    background: var(--bg-2);
    text-decoration: none;
}
.project-row.muted { opacity: 0.55; }
.project-row-main { flex: 1; min-width: 0; }
.project-row-name { font-size: 16px; font-weight: 700; color: var(--ink); }
.project-row-meta { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.project-row-stats {
    display: flex;
    gap: 28px;
    align-items: center;
}
.project-row-stat { text-align: center; min-width: 70px; }
.project-row-stat-value {
    font-family: var(--mono);
    font-size: 20px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.1;
}
.project-row-stat-value.has-issues { color: var(--danger); }
.project-row-stat-value.has-overcharge { color: var(--danger); }
.project-row-stat-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-3);
    margin-top: 2px;
}

/* ----------------------------------------------------------
   Issues feed — the focal point of the project page
---------------------------------------------------------- */
.issues-section h2 { display: flex; align-items: center; gap: 10px; }
.issues-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    padding: 0 8px;
    height: 22px;
    border-radius: 11px;
    background: var(--ink);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}
.issue-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.issue-row {
    display: flex;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-left-width: 4px;
    background: var(--bg);
}
.issue-red    { border-left-color: var(--danger); background: var(--danger-soft); }
.issue-amber  { border-left-color: var(--brand); background: var(--brand-soft); }
.issue-info   { border-left-color: var(--border-strong); }
.issue-dot { display: none; }  /* placeholder for future icon */
.issue-headline {
    font-weight: 700;
    color: var(--ink);
    font-size: 14px;
    margin-bottom: 3px;
}
.issue-red .issue-headline { color: var(--danger-dark); }
.issue-amber .issue-headline { color: var(--brand-dark); }
.issue-detail {
    font-size: 12px;
    color: var(--ink-2);
    font-family: var(--mono);
}
.issue-clear {
    padding: 12px 14px;
    background: var(--bg-2);
    color: var(--ink-3);
    font-size: 13px;
    border-left: 4px solid #36a256;
}

/* ----------------------------------------------------------
   Calm progress bar — quiet contextual indicator below the issues feed
---------------------------------------------------------- */
.calm-progress {
    margin-bottom: 22px;
    padding: 10px 14px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.calm-progress-label {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--ink-3);
    margin-bottom: 6px;
}
.calm-bar-track {
    position: relative;
    height: 8px;
    background: var(--bg-3);
    border-radius: 2px;
    overflow: hidden;
}
.calm-bar-fill { position: absolute; top: 0; left: 0; height: 100%; }
.calm-bar-fill.confirmed { background: rgba(255, 145, 77, 0.35); }
.calm-bar-fill.invoiced  { background: var(--brand); }
.calm-bar-fill.confirmed.over { background: rgba(217, 45, 32, 0.30); }
.calm-bar-fill.invoiced.over  { background: var(--danger); }

/* Quote vs OC unit-price comparison cell colors */
td.amounts.price-over  { background: rgba(217, 45, 32, 0.10); color: var(--danger-dark); font-weight: 700; }
td.amounts.price-under { background: rgba(54, 162, 86, 0.10); color: #2a7a45; font-weight: 700; }
td.amounts.price-match { color: var(--ink-2); }
.bar-fill.bar-overflow { background: var(--brand-dark); }
.bar-pct, .bar-label {
    position: absolute;
    left: 8px;
    top: 0;
    line-height: 20px;
    font-size: 12px;
    color: var(--ink);
    font-family: var(--mono);
}
.bar-wrap.tall .bar-pct,
.bar-wrap.tall .bar-label { line-height: 22px; font-size: 13px; }

.bar-group { margin-bottom: 14px; }
.bar-label-row {
    font-family: var(--mono);
    font-size: 13px;
    color: var(--ink-2);
    margin-bottom: 4px;
    display: flex;
    justify-content: space-between;
}
.bar-label-row .kind { color: var(--ink-3); }

/* item-level bars (inside tables) */
.item-bar-wrap {
    background: var(--bg-3);
    border-radius: 3px;
    height: 14px;
    overflow: hidden;
    position: relative;
    min-width: 110px;
}
.item-bar-fill { height: 100%; background: var(--brand); }
.item-bar-fill.qty { background: var(--border-strong); }
.item-bar-fill.bar-overflow { background: var(--brand-dark); }
.item-bar-pct {
    position: absolute;
    left: 6px; top: 0;
    line-height: 14px;
    font-size: 11px;
    color: var(--ink);
    font-family: var(--mono);
}

/* ----------------------------------------------------------
   Buckets (invoice review)
   Restricted to orange + neutrals; severity = saturation
---------------------------------------------------------- */
.bucket {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 16px;
    margin-bottom: 10px;
    background: var(--bg);
}
.bucket summary {
    cursor: pointer;
    padding: 6px 0;
    font-weight: 600;
    font-size: 14px;
    color: var(--ink);
}
.bucket-overcharge {
    border-color: var(--danger-border);
    background: var(--danger-soft);
    border-left: 4px solid var(--danger);
    box-shadow: 0 0 0 1px var(--danger-border), 0 2px 6px rgba(217, 45, 32, 0.08);
}
.bucket-overcharge summary {
    color: var(--danger-dark);
    font-weight: 700;
}
.bucket-overcharge .bucket-list li { border-top-color: rgba(217, 45, 32, 0.12); }
.bucket-overcharge .reason {
    color: var(--danger-dark);
    background: #fff;
    border-color: var(--danger-border);
}
.bucket-review {
    border-color: var(--brand-border);
    background: var(--brand-softer);
    border-left: 4px solid var(--brand-border);
}
.bucket-review summary { color: var(--brand-dark); }
.bucket-good {
    border-color: var(--border);
    background: var(--bg);
}
.bucket-good summary { color: var(--ink-2); }
.bucket-unlinked {
    border-color: var(--border-strong);
    background: var(--bg-2);
    border-left: 4px dashed var(--border-strong);
}
.bucket-unlinked summary { color: var(--ink-2); }
.bucket-paid {
    border-color: var(--border);
    background: var(--bg-2);
    opacity: 0.85;
}
.bucket-paid summary { color: var(--ink-3); }

.bucket-list { list-style: none; padding: 8px 0 4px 0; margin: 0; }
.bucket-list li {
    padding: 7px 4px;
    border-top: 1px solid rgba(0,0,0,0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-size: 13px;
}
.bucket-list li:first-child { border-top: 0; }
.bucket-list .left {
    display: flex;
    gap: 14px;
    align-items: baseline;
    flex-wrap: wrap;
}
.bucket-list .invoice-no { font-family: var(--mono); font-weight: 600; color: var(--ink); }
.bucket-list .invoice-no a { color: var(--ink); }
.bucket-list .project { color: var(--ink-3); }
.bucket-list .reason {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--brand-dark);
    background: var(--brand-soft);
    padding: 2px 8px;
    border-radius: 3px;
    border: 1px solid var(--brand-border);
}
.bucket-list .paid-ts { color: var(--ink-3); font-family: var(--mono); font-size: 12px; }

/* ----------------------------------------------------------
   Tags / labels
---------------------------------------------------------- */
.tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 8px;
    border-radius: 3px;
    vertical-align: middle;
    margin-left: 8px;
}
.tag-completed { background: var(--ink-3); color: #fff; }
.tag-brand { background: var(--brand); color: #fff; }
.tag-po {
    background: var(--brand-soft);
    color: var(--brand-dark);
    border: 1px solid var(--brand-border);
    font-family: var(--mono);
    text-transform: none;
    letter-spacing: 0;
}

/* ----------------------------------------------------------
   Tables
---------------------------------------------------------- */
table.data {
    width: 100%;
    border-collapse: collapse;
    margin-top: 8px;
    font-size: 13px;
}
table.data th,
table.data td {
    text-align: left;
    padding: 9px 8px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
table.data th {
    color: var(--ink-3);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--bg-2);
}
table.data td.material { font-family: var(--mono); white-space: nowrap; }
table.data td.amounts { font-family: var(--mono); white-space: nowrap; color: var(--ink-2); }

/* ----------------------------------------------------------
   Document list (nested details on project detail)
---------------------------------------------------------- */
.doc-section { margin-top: 8px; }
.doc-section > summary {
    padding: 10px 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-top: 8px;
    list-style: none;
    cursor: pointer;
    font-weight: 600;
    color: var(--ink);
}
.doc-section > summary::-webkit-details-marker { display: none; }
.doc-section > summary::before {
    content: "▸";
    color: var(--brand);
    margin-right: 8px;
    display: inline-block;
    transition: transform 0.15s;
}
.doc-section[open] > summary::before { transform: rotate(90deg); }

.doc-list { padding: 4px 0 8px 0; }
.doc { border-bottom: 1px solid var(--border); }
.doc:last-child { border-bottom: 0; }
.doc > summary {
    list-style: none;
    cursor: pointer;
    padding: 9px 6px;
    font-size: 13px;
}
.doc > summary::-webkit-details-marker { display: none; }
.doc > summary::before {
    content: "▸";
    display: inline-block;
    width: 14px;
    color: var(--muted);
    font-size: 10px;
    transition: transform 0.15s;
    vertical-align: middle;
}
.doc[open] > summary::before { transform: rotate(90deg); }
.doc:hover > summary { background: var(--bg-2); }
.doc-row {
    display: inline-flex;
    gap: 16px;
    align-items: baseline;
    flex-wrap: wrap;
    vertical-align: middle;
}
.doc-row .col { font-family: var(--mono); }
.doc-row .col-num { font-weight: 600; min-width: 90px; color: var(--ink); }
.doc-row .col-date { color: var(--ink-3); min-width: 90px; }
.doc-row .col-meta { color: var(--ink-3); }
.doc-row .col-amt { color: var(--ink); min-width: 110px; text-align: right; }
.doc-row .view-link {
    font-family: var(--font);
    color: var(--brand-dark);
}
.doc-body {
    padding: 10px 14px 14px 28px;
    background: var(--bg-2);
    font-size: 12px;
}
.doc-body table.data { margin-top: 0; font-size: 12px; }
.doc-body th, .doc-body td { padding: 5px 8px; }
.doc-body th { background: var(--bg); }
.doc-body .li-empty { color: var(--muted); font-style: italic; padding: 6px 0; }
.building-block { margin-bottom: 12px; }
.building-block h4 {
    margin: 0 0 6px 0;
    font-size: 13px;
    font-family: var(--mono);
    color: var(--ink-2);
}
.building-block ul {
    margin: 0;
    padding-left: 20px;
    font-family: var(--mono);
    font-size: 12px;
}
.building-block ul li { padding: 2px 0; color: var(--ink-2); }

/* ----------------------------------------------------------
   Timeline (monochrome — saturation conveys document type)
---------------------------------------------------------- */
.legend { display: flex; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; font-size: 12px; color: var(--ink-3); }
.legend-swatch { display: inline-flex; align-items: center; gap: 6px; }
.legend-swatch .dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: inline-block;
    border: 1px solid var(--border);
}
.legend-swatch .dot.quote        { background: var(--bg); }
.legend-swatch .dot.order        { background: var(--brand-soft); border-color: var(--brand-border); }
.legend-swatch .dot.confirmation { background: var(--brand-border); border-color: var(--brand); }
.legend-swatch .dot.invoice      { background: var(--brand); border-color: var(--brand); }
.legend-swatch .dot.credit-memo  { background: var(--ink); border-color: var(--ink); }

.timeline-wrap {
    overflow-x: auto;
    padding: 12px 0 28px 0;
    border-top: 1px solid var(--border);
}
.timeline { display: flex; flex-direction: row; align-items: flex-start; gap: 0; min-width: max-content; padding: 16px 0; }
.timeline-item { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 8px; min-width: 130px; }
.timeline-item .date { font-size: 12px; color: var(--ink-3); font-family: var(--mono); white-space: nowrap; }
.timeline-item .date.unparsed { color: var(--brand-dark); }
.timeline-item .icon {
    width: 56px; height: 56px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 14px;
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.1s;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
}
.timeline-item .icon.disabled { cursor: default; opacity: 0.55; }
.timeline-item .icon:hover:not(.disabled) {
    transform: scale(1.08);
    box-shadow: var(--shadow);
    text-decoration: none;
}
.timeline-item .icon.quote        { background: var(--bg);          color: var(--ink); }
.timeline-item .icon.order        { background: var(--brand-soft);  color: var(--brand-dark); border-color: var(--brand-border); }
.timeline-item .icon.confirmation { background: var(--brand-border);color: var(--brand-dark); border-color: var(--brand); }
.timeline-item .icon.invoice      { background: var(--brand);       color: #fff; border-color: var(--brand); }
.timeline-item .icon.credit-memo  { background: var(--ink);         color: #fff; border-color: var(--ink); }
.timeline-item .label { font-size: 11px; color: var(--ink-3); text-align: center; text-transform: uppercase; letter-spacing: 0.04em; }
.timeline-item .number { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--ink); }

.timeline-arrow {
    flex: 0 0 32px;
    display: flex; align-items: center; justify-content: center;
    color: var(--border-strong);
    font-size: 22px;
    margin-top: 38px;
}

/* ----------------------------------------------------------
   Footer
---------------------------------------------------------- */
.footer {
    margin-top: 48px;
    padding: 20px 28px;
    border-top: 1px solid var(--border);
    color: var(--ink-3);
    font-size: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.footer .brand-lockup { display: flex; align-items: center; gap: 8px; }
.footer .brand-lockup img { height: 22px; width: auto; }

/* ----------------------------------------------------------
   PDF viewer modal
---------------------------------------------------------- */
.pdf-modal {
    position: fixed;
    inset: 0;
    background: rgba(20, 20, 20, 0.65);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 24px;
}
.pdf-modal.open { display: flex; }

.pdf-modal-frame {
    background: var(--bg);
    border-radius: var(--radius);
    width: 100%;
    height: 100%;
    max-width: 1400px;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.pdf-modal-bar {
    background: var(--ink);
    color: #fff;
    padding: 8px 14px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}
.pdf-modal-title {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--mono);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pdf-modal-open {
    color: var(--brand);
    font-size: 12px;
    text-decoration: none;
}
.pdf-modal-open:hover { color: #fff; text-decoration: underline; }
.pdf-modal-close {
    background: transparent;
    border: 0;
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    padding: 0 6px;
    font-family: var(--font);
}
.pdf-modal-close:hover { color: var(--brand); }
.pdf-modal-frame iframe {
    flex: 1;
    width: 100%;
    border: 0;
    background: #525659;
}
.footer .brand-lockup strong { color: var(--ink-2); font-weight: 600; }