/*
 * ORAGO — global shell layout (UI_HANDOVER §4)
 * CSS-grid shell: topbar / sidebar / workspace / AI panel.
 * AI panel collapses to 40px when body.ai-collapsed is set (persisted in localStorage).
 */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
button { font-family: inherit; }

/* ===== Shell grid ===== */
.app-shell {
    display: grid;
    grid-template-rows: var(--topbar-h) 1fr;
    height: 100vh;
    overflow: hidden;
}

.app-body {
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr var(--ai-panel-w);
    overflow: hidden;
    min-height: 0;
}

body.ai-collapsed .app-body {
    grid-template-columns: var(--sidebar-w) 1fr 40px;
}

/* ===== Topbar ===== */
.topbar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 16px;
    background: var(--orago-surface);
    border-bottom: 1px solid var(--orago-border);
    font-size: var(--fs-body);
}
.topbar .logo {
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.5px;
    color: var(--orago-text);
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}
.topbar .logo .dot {
    width: 10px;
    height: 10px;
    background: var(--orago-primary);
    border-radius: 2px;
    display: inline-block;
}
/* Wordmark suffix ("Cost Controlling") — lighter/muted next to the bold ORAGO,
   echoing the login wordmark's two-tone treatment (auth-topbar .brand). */
.topbar .logo .logo-suffix {
    font-weight: 400;
    color: var(--fg-2);
}
.topbar .admin-badge {
    font-size: var(--fs-micro);
    text-transform: uppercase;
    letter-spacing: 1px;
    background: var(--state-terminal-bg);
    color: var(--state-terminal-fg);
    padding: 2px 6px;
    border-radius: 2px;
    display: none;
}
body.admin .topbar .admin-badge { display: inline-block; }
body.admin .topbar {
    border-bottom-width: 3px;
    border-bottom-color: var(--orago-border-strong);
}

.topbar .spacer { flex: 1; }

.topbar .env {
    font-size: var(--fs-micro);
    padding: 2px 6px;
    border-radius: 2px;
    background: var(--state-warn-bg);
    color: var(--state-warn-fg);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}
.topbar .env.prod { background: var(--state-danger-bg); color: var(--state-danger-fg); }
.topbar .env.dev  { background: var(--state-ok-bg);     color: var(--state-ok-fg); }

.tb-btn {
    background: transparent;
    border: none;
    color: var(--orago-text-muted);
    padding: 6px 8px;
    border-radius: 3px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-small);
}
.tb-btn:hover { background: var(--orago-bg); color: var(--orago-text); }
.tb-btn:focus-visible { outline: 2px solid var(--orago-primary); outline-offset: 2px; }

.topbar .user {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    border-radius: 3px;
    cursor: pointer;
    color: var(--orago-text);
    background: transparent;
    border: none;
    text-align: left;
}
.topbar .user:hover { background: var(--orago-bg); }
.topbar .user .u-name { font-weight: 600; font-size: var(--fs-small); line-height: 14px; }
.topbar .user .u-role { font-size: var(--fs-micro); color: var(--orago-text-muted); line-height: 14px; }
.topbar .avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--viz-4);
    color: var(--neutral-0);
    font-weight: 600;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.topbar .user-menu-wrap { position: relative; }
.topbar .user-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 200px;
    background: var(--orago-surface);
    border: 1px solid var(--orago-border-strong);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 4px;
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.topbar .user-menu a,
.topbar .user-menu button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: transparent;
    border: 0;
    color: var(--orago-text);
    text-decoration: none;
    font-family: inherit;
    font-size: var(--fs-small);
    border-radius: 3px;
    cursor: pointer;
    text-align: left;
}
.topbar .user-menu a:hover,
.topbar .user-menu button:hover { background: var(--orago-bg); }
.topbar .user-menu .sep {
    height: 1px;
    background: var(--orago-border);
    margin: 4px 0;
}
.topbar .user-menu .meta {
    padding: 8px 10px 4px;
    font-size: var(--fs-micro);
    color: var(--orago-text-soft);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.view-switcher {
    display: flex;
    background: var(--orago-bg);
    border-radius: 4px;
    padding: 2px;
    gap: 2px;
}
.view-switcher button {
    border: none;
    background: transparent;
    padding: 4px 10px;
    border-radius: 3px;
    cursor: pointer;
    font-size: var(--fs-small);
    color: var(--orago-text-muted);
    font-family: inherit;
}
.view-switcher button:hover { color: var(--orago-text); }
.view-switcher button.active {
    background: var(--orago-surface);
    color: var(--orago-text);
    box-shadow: var(--shadow-1);
    font-weight: 500;
}

/* ===== Breadcrumb ===== */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--orago-text-muted);
    font-size: var(--fs-small);
    min-width: 0;
}
.breadcrumb .seg {
    color: var(--orago-text);
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 3px;
    background: transparent;
    border: none;
    font-size: var(--fs-small);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.breadcrumb .seg:hover { background: var(--orago-bg); }
.breadcrumb .seg.active { color: var(--orago-primary); font-weight: 600; }
.breadcrumb .sep { color: var(--orago-text-soft); user-select: none; }

/* ===== Sidebar =====
   Note: class is "side-nav" not "nav" to avoid collision with Bootstrap's .nav
   (which forces display:flex / flex-wrap:wrap and breaks the vertical list). */
.sidebar {
    background: var(--orago-surface);
    border-right: 1px solid var(--orago-border);
    overflow-y: auto;
    font-size: var(--fs-body);
    padding: 4px 0 12px;
}
.sidebar .section {
    padding: 10px 12px 4px;
    font-size: var(--fs-micro);
    color: var(--orago-text-soft);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}
.side-nav {
    list-style: none;
    padding: 0;
    margin: 0;
    display: block;
}
.side-nav li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 6px 16px;
    cursor: pointer;
    color: var(--orago-text);
    border-left: 2px solid transparent;
    font-size: var(--fs-body);
}
.side-nav li:hover { background: var(--orago-bg); }
.side-nav a {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    color: inherit;
    text-decoration: none;
    min-width: 0;
    padding: 6px 12px 6px 16px;
    border-left: 2px solid transparent;
    margin-left: -2px;
}
.side-nav a:hover { background: var(--orago-bg); color: var(--orago-text); }

/* has-link items: the <li> sits at zero padding so its background never
   double-renders; the inner anchor owns the click area + visible padding.
   Every nav <li> in the project carries `has-link` today — there is no
   non-has-link <li> with an anchor to reset, so the prior generic
   `.side-nav li > a { padding: 0 }` reset was dead and was removed. */
.side-nav li.has-link { padding: 0; }
.side-nav li.has-link > a {
    padding: 6px 12px 6px 16px;
    margin-left: 0;
    border-left: 0;
}
.side-nav a.active {
    background: var(--orago-primary-soft);
    color: var(--orago-primary);
    font-weight: 600;
    border-left-color: var(--orago-primary);
}
.side-nav li.active {
    background: var(--orago-primary-soft);
    color: var(--orago-primary);
    font-weight: 600;
    border-left-color: var(--orago-primary);
}
.side-nav .count {
    margin-left: auto;
    font-size: var(--fs-micro);
    color: var(--orago-text-soft);
    font-variant-numeric: tabular-nums;
}
.side-nav li.nested {
    /* Anchor owns the visible 16px left-padding (see `.side-nav li.has-link > a`
       above). The "nested" feel comes from the smaller font + muted text
       colour + the icon glyph itself — no extra indent needed. */
    font-size: var(--fs-small);
    color: var(--orago-text-muted);
}
.side-nav li.nested:hover { color: var(--orago-text); }
.side-nav li.nested.active-nested {
    color: var(--orago-primary);
    font-weight: 600;
}
/* The previous `.side-nav li.group-header` rule was deprecated when the
   sidebar moved to <details>/<summary>. Group titles are now styled by
   `.nav-group-header` (see the collapsible-group block below). */

/* =====================================================================
 * Collapsible nav group — native <details>/<summary>, no JS.
 * The chevron rotates -90° when closed; everything else is a re-skin
 * of the existing group-header look so the visual rhythm is preserved.
 * ===================================================================== */
.nav-group {
    /* details element resets — no left border, no native triangle marker. */
    margin: 0;
    padding: 0;
    border: 0;
}
.nav-group > .nav-group-header {
    list-style: none;             /* removes the default disclosure triangle */
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 12px 4px 12px;
    margin: 0;
    cursor: pointer;
    user-select: none;
    font-weight: 600;
    font-size: var(--fs-small);
    color: var(--orago-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: color var(--dur-fast, 0.12s) ease;
}
.nav-group > .nav-group-header::-webkit-details-marker {
    display: none;                /* WebKit/Safari triangle */
}
.nav-group > .nav-group-header::marker {
    content: "";                   /* Firefox triangle */
}
.nav-group > .nav-group-header:hover {
    color: var(--orago-text);
}
.nav-group > .nav-group-header:focus-visible {
    outline: 2px solid var(--orago-primary);
    outline-offset: -2px;
    border-radius: 2px;
}

/* Chevron rotates depending on open/closed state. SVG inside summary picks
   up the muted colour from the header; on hover it follows the header text. */
.nav-group > .nav-group-header .nav-chevron {
    transition: transform var(--dur-fast, 0.12s) var(--ease-out, ease);
}
.nav-group:not([open]) > .nav-group-header .nav-chevron {
    transform: rotate(-90deg);
}

/* The first item inside an opened group sits flush against the header —
   no extra top-padding from the group's <ul>. */
.nav-group > .side-nav {
    margin-top: 0;
}
.side-nav .dot-warn {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--state-warn-fg);
    margin-left: auto;
}
.side-nav svg { color: var(--orago-text-soft); flex-shrink: 0; }
.side-nav li.active svg,
.side-nav a.active svg { color: var(--orago-primary); }
.sidebar .empty-state {
    padding: 8px 16px;
    color: var(--orago-text-soft);
    font-size: var(--fs-small);
    font-style: italic;
}

/* ===== Workspace ===== */
.workspace {
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--orago-bg);
}

.workspace-empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--orago-text-soft);
    font-size: var(--fs-small);
}

.page-header {
    padding: 16px 20px 0;
    display: flex;
    align-items: flex-start;
    gap: 16px;
}
.page-header .title-block h1 {
    margin: 0;
    font-size: var(--fs-display);
    font-weight: 600;
    line-height: 28px;
}
.page-header .title-block .sub {
    color: var(--orago-text-muted);
    font-size: var(--fs-small);
    margin-top: 2px;
}
.page-header .meta-chips {
    display: flex;
    gap: 6px;
    margin-top: 6px;
    flex-wrap: wrap;
}
.page-header .actions {
    margin-left: auto;
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.page-body {
    padding: 16px 20px;
}

/* ===== Tabs ===== */
.tabs {
    margin: 14px 20px 0;
    display: flex;
    gap: 2px;
    border-bottom: 1px solid var(--orago-border);
}
.tabs .tab {
    padding: 8px 14px;
    font-size: var(--fs-small);
    color: var(--orago-text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    font-weight: 500;
    background: transparent;
    border-left: 0;
    border-right: 0;
    border-top: 0;
    font-family: inherit;
}
.tabs .tab:hover { color: var(--orago-text); }
.tabs .tab.active {
    color: var(--orago-primary);
    border-bottom-color: var(--orago-primary);
    font-weight: 600;
}
.tabs .tab[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; }
.tabs .tab-badge { opacity: 0.6; margin-left: 4px; }

/* Tab panel content area — matches page-body horizontal padding so cards
   align with the header/KPI strip above the tabs. */
section[role="tabpanel"] { padding: 16px 20px 20px; }

/* ===== Content grid (workspace default: 2fr / 1fr) ===== */
.content-grid {
    padding: 16px 20px;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 16px;
}
.content-grid > .col {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}
@media (max-width: 1200px) {
    .content-grid { grid-template-columns: 1fr; }
}
.content-grid.content-grid-flush { padding: 0; }
.content-grid.content-grid-topgap { padding-top: 16px; }
.activity-empty { padding-left: 14px; }

/* ===== KPI row ===== */
.kpi-row {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
}
@media (max-width: 1400px) {
    .kpi-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
    .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.kpi {
    background: var(--orago-surface);
    border: 1px solid var(--orago-border);
    border-radius: var(--radius);
    padding: 10px 12px;
    position: relative;
    overflow: hidden;
    min-height: 72px;
}
.kpi .label {
    font-size: var(--fs-micro);
    color: var(--orago-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}
.kpi .value {
    font-family: var(--ds-font-mono);
    font-feature-settings: "tnum";
    font-size: 20px;
    font-weight: 600;
    margin-top: 2px;
}
.kpi .value .unit { font-size: 12px; color: var(--orago-text-muted); margin-left: 2px; }
.kpi .delta { font-size: var(--fs-micro); margin-top: 2px; }
.kpi .state-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }
.kpi.ok     .state-bar { background: var(--state-ok-fg); }
.kpi.warn   .state-bar { background: var(--state-warn-fg); }
.kpi.danger .state-bar { background: var(--state-danger-fg); }
.kpi .delta.ok     { color: var(--state-ok-fg); }
.kpi .delta.warn   { color: var(--state-warn-fg); }
.kpi .delta.danger { color: var(--state-danger-fg); }

/* ===== Grids (dense data tables) ===== */
table.grid {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-small);
}
table.grid th, table.grid td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--orago-border);
    text-align: left;
    vertical-align: middle;
}
table.grid th {
    font-weight: 600;
    color: var(--orago-text-muted);
    background: var(--orago-surface-alt);
    font-size: var(--fs-micro);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
table.grid td.num, table.grid th.num {
    text-align: right;
    font-family: var(--ds-font-mono);
    font-feature-settings: "tnum";
}
table.grid tbody tr:nth-child(even) > td { background: color-mix(in srgb, var(--orago-surface-alt) 50%, transparent); }
table.grid tbody tr:hover > td { background: var(--orago-surface-alt); }
table.grid tbody tr.total-row td {
    font-weight: 600;
    border-top: 2px solid var(--orago-text);
}

/* ===== Feasibility / activity list cards ===== */
.card-body.feasibility .row {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--orago-border);
}
.card-body.feasibility .row:last-child { border-bottom: 0; }
.card-body.feasibility .lbl {
    font-size: var(--fs-micro);
    color: var(--orago-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}
.card-body.feasibility .val { font-size: var(--fs-small); }

.activity { display: flex; flex-direction: column; gap: 10px; padding: 4px 0; }
.activity .item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 4px 14px;
    font-size: var(--fs-small);
}
.activity .item .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-top: 5px;
    flex-shrink: 0;
}
.activity .item .who { font-weight: 600; }
.activity .item .when { font-size: var(--fs-micro); color: var(--orago-text-muted); margin-top: 2px; }

/* ===== Report tiles ===== */
.report-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}
.report-tile {
    background: var(--orago-surface);
    border: 1px solid var(--orago-border);
    border-radius: var(--radius-lg);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.report-tile h3 {
    margin: 0;
    font-size: var(--fs-body);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}
.report-tile .tile-desc { color: var(--orago-text-muted); font-size: var(--fs-small); flex: 1; }
.report-tile .tile-actions { display: flex; gap: 6px; margin-top: auto; }

/* ===== AI panel dock ===== */
.ai-dock {
    background: var(--orago-surface);
    border-left: 1px solid var(--orago-border);
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    transition: none;
}
body.ai-collapsed .ai-dock { align-items: center; padding-top: 8px; }
body.ai-collapsed .ai-dock .ai-body,
body.ai-collapsed .ai-dock .ai-header-text { display: none; }

.ai-dock .ai-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--orago-border);
    font-weight: 600;
    font-size: var(--fs-small);
    min-height: 40px;
}
body.ai-collapsed .ai-dock .ai-header { padding: 4px; border-bottom: 0; }
.ai-dock .ai-header-text { flex: 1; }
.ai-dock .ai-body { flex: 1; overflow-y: auto; padding: 12px; font-size: var(--fs-small); }

/* =====================================================================
 * ORAGO standard buttons — one shape, documented variants.
 *
 * Shape (all variants share this):
 *   - Inline-flex, gap 6px between icon + label (icons are 14px / 16px via <Icon>)
 *   - Height: 32px (default) · 24px (sm) · 40px (lg)
 *   - Border-radius: --radius (4px)
 *   - Font: var(--fs-small) / weight 500 / Barlow
 *   - Focus ring: 2px --orago-primary, 2px offset (UI_HANDOVER §12)
 *   - Disabled: opacity 0.55, cursor not-allowed
 *   - Never uses `.btn-*` Bootstrap class names (those are Bootstrap's own)
 *
 * Variants (pick ONE per button):
 *   .btn              — DEFAULT secondary / outline  (white surface · --border-strong · text)
 *   .btn.primary      — main action                  (solid --orago-primary · white text)
 *   .btn.danger       — destructive                  (solid --state-danger-fg · white text)
 *   .btn.subtle       — soft emphasis                (--primary-soft bg · --primary text)
 *   .btn.ghost        — borderless, transparent      (hover gets surface-alt)
 *   .btn.link         — looks like a text link       (no border/bg, just --primary fg)
 *
 * Size modifiers (optional, combine with any variant):
 *   .btn.sm           — 24px tall, micro font
 *   .btn.lg           — 40px tall, body font
 *   .btn.icon-only    — square aspect, icon centred, aria-label required
 *   .btn.block        — full width (form row submit buttons)
 *
 * State helpers:
 *   [aria-pressed="true"]  — toggled on (primary-soft bg)
 *   [aria-busy="true"]     — spinner state, consumer adds <Icon Name="loader" />
 *
 * Usage rule of thumb:
 *   - One `.primary` per visual region (page header or dialog footer)
 *   - Destructive operations MUST be `.danger` or sit inside a `.danger-zone`
 *   - Row-level inline actions use `.btn.sm` (never plain links)
 * ===================================================================== */

.btn {
    /* shape */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border-radius: var(--r-md);
    border: 1px solid var(--border-strong);
    background: var(--surface-raised);
    color: var(--fg-1);
    font-family: var(--font-sans);
    font-size: var(--fs-12);
    font-weight: var(--fw-medium);
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    user-select: none;
    transition: background-color var(--dur-fast) var(--ease-out),
                border-color   var(--dur-fast) var(--ease-out),
                color          var(--dur-fast) var(--ease-out),
                box-shadow     var(--dur-fast) var(--ease-out);
}
.btn:hover {
    background: var(--surface-tertiary);
    border-color: var(--amber-500);
    color: var(--fg-1);
}
.btn:active {
    background: var(--amber-tint-10);
}
.btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}
.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

/* ----- primary (main action) ----- */
.btn.primary {
    background: var(--orago-primary);
    border-color: var(--orago-primary);
    color: var(--neutral-0);
}
.btn.primary:hover {
    background: var(--orago-primary-hover);
    border-color: var(--orago-primary-hover);
}
.btn.primary:active {
    background: var(--orago-primary-hover);
    filter: brightness(0.92);
}

/* ----- danger (destructive) ----- */
.btn.danger {
    background: var(--state-danger-fg);
    border-color: var(--state-danger-fg);
    color: var(--neutral-0);
}
.btn.danger:hover {
    filter: brightness(1.05);
    border-color: var(--state-danger-fg);
}
.btn.danger:active {
    filter: brightness(0.92);
}

/* ----- subtle (soft accent) ----- */
.btn.subtle {
    background: var(--orago-primary-soft);
    border-color: transparent;
    color: var(--orago-primary);
}
.btn.subtle:hover {
    background: var(--orago-primary-soft);
    border-color: var(--orago-primary);
}

/* ----- ghost (borderless) ----- */
.btn.ghost {
    background: transparent;
    border-color: transparent;
    color: var(--orago-text);
}
.btn.ghost:hover {
    background: var(--orago-surface-alt);
    border-color: transparent;
}

/* ----- link (text action) ----- */
.btn.link {
    background: transparent;
    border-color: transparent;
    color: var(--orago-primary);
    padding: 0 4px;
    height: auto;
}
.btn.link:hover {
    background: transparent;
    text-decoration: underline;
    border-color: transparent;
}

/* Toggled state (any variant) — consumer sets aria-pressed="true". */
.btn[aria-pressed="true"] {
    background: var(--orago-primary-soft);
    border-color: var(--orago-primary);
    color: var(--orago-primary);
}

/* ---------- Size modifiers (layer on any variant) ---------- */
.btn.sm {
    height: 24px;
    padding: 0 8px;
    font-size: var(--fs-micro);
    gap: 4px;
}
.btn.lg {
    height: 40px;
    padding: 0 18px;
    font-size: var(--fs-body);
}
.btn.icon-only {
    width: 32px;
    padding: 0;
}
.btn.icon-only.sm { width: 24px; }
.btn.icon-only.lg { width: 40px; }
.btn.block {
    width: 100%;
}

/* Button row helper — use on .actions / dialog-footer so every button
   in the row stays exactly 8px apart regardless of variant. */
.btn-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* ===== Chips ===== */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: var(--fs-micro);
    font-weight: 600;
    background: var(--orago-bg);
    color: var(--orago-text-muted);
    border: 1px solid var(--orago-border);
}
.chip.ok       { background: var(--state-ok-bg);       color: var(--state-ok-fg);       border-color: transparent; }
.chip.warn     { background: var(--state-warn-bg);     color: var(--state-warn-fg);     border-color: transparent; }
.chip.danger   { background: var(--state-danger-bg);   color: var(--state-danger-fg);   border-color: transparent; }
.chip.locked   { background: var(--state-locked-bg);   color: var(--state-locked-fg);   border-color: transparent; }
.chip.sim      { background: var(--state-sim-bg);      color: var(--state-sim-fg);      border-color: transparent; }
.chip.terminal { background: var(--state-terminal-bg); color: var(--state-terminal-fg); border-color: transparent; }

/* ===== Icons ===== */
.ic { display: inline-block; flex-shrink: 0; }
.ic-sm { width: 14px; height: 14px; }

/* ===== Cards ===== */
.card {
    background: var(--orago-surface);
    border: 1px solid var(--orago-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.card-header {
    padding: 10px 14px;
    border-bottom: 1px solid var(--orago-border);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-h1);
    font-weight: 600;
}
.card-header .sub {
    margin-left: auto;
    font-size: var(--fs-small);
    font-weight: 400;
    color: var(--orago-text-muted);
}
.card-body { padding: 14px; }
.card-body.dense { padding: 0; }
/* Sibling card-body separated by a hairline border — used to hang a
   secondary block (e.g. a UsedInDrawer trigger row) under a form without
   resorting to inline styles. */
.card-body.divider { border-top: 1px solid var(--orago-border); }
/* Inline notice chips inside card-body (e.g. "Set targets" warn chip)
   need bottom margin so they don't sit flush against the next sibling. */
.card-body > .chip { margin-bottom: var(--sp-3); }

/* Generic empty-state — centered placeholder block, no content to show. */
.empty-state {
    padding: var(--sp-8) var(--sp-4);
    text-align: center;
    color: var(--fg-2);
}
.empty-state p { margin: 0 0 var(--sp-3); }

/* ===== Focus baseline ===== */
:focus-visible { outline: 2px solid var(--orago-primary); outline-offset: 2px; border-radius: 2px; }

/* ===== Utility =====
   Tiny vocabulary of purpose-named helpers so pages don't reach for inline
   style attributes. If you need something that isn't here, add a class
   rather than adding `style="..."` (UI_HANDOVER §11 DoD). */
.sr-only {
    position: absolute;
    width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Layout helpers */
.push-right   { margin-left: auto; }
.stack        { display: flex; flex-direction: column; gap: 12px; }
.stack-lg     { display: flex; flex-direction: column; gap: 16px; }
.stack-sm     { display: flex; flex-direction: column; gap: 8px; }
.row-flex     { display: flex; align-items: center; gap: 10px; }
.row-flex-end { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }

/* Vertical-rhythm helpers for in-card spacings (cards themselves use --card-body padding;
   these are for paragraph / list / row stacking inside). Prefer these over ad-hoc
   `style="margin-top: N"`. */
.mt-sm  { margin-top: 6px; }
.mt-md  { margin-top: 12px; }
.mt-lg  { margin-top: 18px; }
.left-align { text-align: left; }
.pointer    { cursor: pointer; }
.row-spread      { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 10px; }
.row-flex-bottom { display: flex; gap: 10px; align-items: flex-end; }
.tight        { margin-top: 0 !important; }

/* Page-body content-width classes */
.page-body.constrained-form { max-width: 720px; }
.page-body.constrained-md   { max-width: 960px; }

/* Section heading inside a long page */
.section-h {
    margin: 8px 0;
    font-size: var(--fs-h1);
    font-weight: 600;
}

/* Semantic text colors — prefer these over ad-hoc `style="color: var(--state-*)"` */
.text-ok       { color: var(--state-ok-fg); }
.text-warn     { color: var(--state-warn-fg); font-weight: 600; }
.text-danger   { color: var(--state-danger-fg); }

/* Interactive rows (dashboard / admin grids) */
.clickable-row { cursor: pointer; }
tr.clickable-row:hover { background: var(--orago-surface-alt); }
tr.row-selected { background: var(--orago-primary-soft); }
tr.row-selected:hover { background: var(--orago-primary-soft); }

/* Inputs needing a fixed width because they sit in a row of mixed controls */
.input-narrow { width: 200px; }
.input-upper  { text-transform: uppercase; }

/* Trailing "Saved." hint after a form save */
.saved-hint { margin-top: 8px; }

/* Smoke-test page (/dev/state) */
.smoke-section { padding: 0; }
.card.card-gap { margin-bottom: 16px; }
.smoke-form-body { max-width: 420px; }

/* ===== Engineering dashboard (engineering_pages_spec.md §C.1) =====
   Vertical stack of three sections: 3-up counter row, full-width hot-list,
   full-width recent-changes. The page-body's flex layout gives the rows
   uniform vertical spacing (CLAUDE.md §10). */
.dashboard-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.dashboard-counters {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
@media (max-width: 1100px) {
    .dashboard-counters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
    .dashboard-counters { grid-template-columns: 1fr; }
}
/* Counter cards stack a headline number (full padding) above an optional
   inline table (.dense, divider). The headline keeps the canonical 14px
   card-body padding so the metric has uniform breathing room. */
.dashboard-counter-value {
    font: var(--fw-medium) var(--fs-32)/1 var(--font-mono);
    color: var(--fg-1);
    letter-spacing: -0.4px;
}

/* ===== Row-group tables (Processes tab — BOM row + nested process defs) =====
   Each BOM row is rendered as a "header" row followed by zero-or-more
   "detail" rows. The detail rows get a subtler background tint so the
   grouping is visually obvious without losing the table's row-zebra. */
table.grid tr.row-group-header > td {
    background: var(--orago-surface-alt);
    border-top: 1px solid var(--orago-border);
}
table.grid tbody tr.row-group-header:first-child > td { border-top: 0; }
table.grid tr.row-group-detail > td:first-child {
    padding-left: 24px;
    color: var(--fg-2);
}
.row-actions {
    text-align: right;
    white-space: nowrap;
}

/* Cards that host scrolling body regions (admin master-data grid, etc.) */
.card.card-scroll {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.card.card-scroll > .card-body { overflow: auto; }

/* Drop-shadow dialog variants wider than the default drawer */
.drawer.drawer-wide { width: 640px; }

/* Data-viz dot used in activity lists and inline status markers */
.viz-dot        { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.viz-dot.viz-1  { background: var(--viz-1); }
.viz-dot.viz-2  { background: var(--viz-2); }
.viz-dot.viz-3  { background: var(--viz-3); }
.viz-dot.viz-4  { background: var(--viz-4); }
.viz-dot.viz-5  { background: var(--viz-5); }
.viz-dot.viz-6  { background: var(--viz-6); }

/* =====================================================================
 * Shell additions per shell_spec.md §9 — role-switcher chip, sidebar
 * Zone B (context tree), R badge, admin badge.
 * ===================================================================== */

/* ── Role Switcher Chip ─────────────────────────────────────────────── */
.role-switcher-chip-wrap { position: relative; }

.role-switcher-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 10px;
    border-radius: var(--r-pill);
    border: 1px solid var(--amber-500);
    background: var(--amber-tint-10);
    color: var(--amber-700);
    font-size: var(--fs-12);
    font-weight: var(--fw-medium);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out);
}
.role-switcher-chip:hover { background: var(--amber-tint-18); }
.role-switcher-chip .ic   { opacity: 0.7; }

.role-switcher-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 180px;
    background: var(--surface-raised);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    box-shadow: var(--shadow-pop);
    padding: 4px;
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.role-switcher-menu button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: transparent;
    border: 0;
    color: var(--fg-1);
    font: var(--fw-normal) var(--fs-12)/1.4 var(--font-sans);
    border-radius: var(--r-xs);
    cursor: pointer;
    text-align: left;
}
.role-switcher-menu button:hover  { background: var(--surface-tertiary); }
.role-switcher-menu button.active { color: var(--amber-700); font-weight: var(--fw-semi); }
.role-switcher-menu .check-spacer { display: inline-block; width: 14px; height: 14px; }

/* ── Sidebar Zone B — context tree (spec §3.6) ───────────────────────── */
.sb-zone-b {
    background: var(--surface-tertiary);
    border-top: 0.5px solid var(--border);
    padding: 4px 0;
    margin-top: 8px;
}
.sb-zone-b-header {
    padding: 6px 12px 2px;
    font-size: var(--fs-10);
    font-weight: var(--fw-semi);
    letter-spacing: var(--tracking-caps);
    color: var(--fg-2);
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sb-zone-b-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px 4px 20px;
    font-size: var(--fs-11);
    color: var(--fg-2);
    cursor: pointer;
    position: relative;
    text-decoration: none;
    border-left: 0;
}
.sb-zone-b-item:hover { color: var(--fg-1); background: var(--surface-inset); }
.sb-zone-b-item.active {
    color: var(--amber-700);
    background: var(--amber-tint-10);
}
.sb-zone-b-item.active::before {
    content: '';
    position: absolute;
    left: 0; top: 3px; bottom: 3px;
    width: 2px;
    background: var(--amber-500);
    border-radius: 0 2px 2px 0;
}
.sb-zone-b-metric {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: var(--fs-10);
}
.sb-zone-b-metric.tl-ok     { color: var(--success); }
.sb-zone-b-metric.tl-warn   { color: var(--warn); }
.sb-zone-b-metric.tl-danger { color: var(--danger); }

.sb-zone-b-skeleton {
    height: 28px;
    background: var(--border);
    border-radius: var(--r-sm);
    margin: 4px 12px;
    animation: shimmer 1.2s ease-in-out infinite;
}
@keyframes shimmer {
    0%, 100% { opacity: 0.6; }
    50%      { opacity: 0.9; }
}

/* ── Nav R badge (read-only indicator in reference data) ─────────────── */
.sb-ro-badge {
    margin-left: auto;
    font-size: var(--fs-10);
    background: var(--surface-inset);
    color: var(--fg-2);
    border: 0.5px solid var(--border);
    padding: 1px 5px;
    border-radius: var(--r-xs);
    letter-spacing: 0;
    line-height: 1.4;
}

/* ── Admin badge in topbar (spec §2.2 L2) ────────────────────────────── */
.topbar-admin-badge {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 8px;
    margin-left: 8px;
    border-radius: var(--r-xs);
    border: 1px solid var(--amber-500);
    background: var(--surface-raised);
    font-size: var(--fs-10);
    font-weight: var(--fw-semi);
    color: var(--amber-700);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
}

/* Admin variant: 3px amber bottom border on the topbar (spec §2.1). */
body.admin .topbar {
    border-bottom-width: 3px;
    border-bottom-color: var(--amber-500);
}
/* Hide the legacy inline admin-badge — replaced by .topbar-admin-badge.
   Old <span class="admin-badge"> is no longer rendered, but defensive. */
.topbar .admin-badge { display: none; }

/* ── Sidebar separator + sub-group (workspace reference data) ────────── */
.sidebar .sb-sep {
    border: 0;
    border-top: 1px solid var(--border);
    margin: 8px 12px;
}
.nav-subgroup { margin: 0; padding: 0; }
.nav-subgroup > summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px 4px 16px;
    cursor: pointer;
    font-size: var(--fs-12);
    color: var(--fg-2);
}
.nav-subgroup > summary::-webkit-details-marker { display: none; }
.nav-subgroup > summary::marker { content: ""; }
.nav-subgroup > summary:hover { color: var(--fg-1); }
.nav-subgroup > .side-nav { padding-left: 8px; }

/* ── Sidebar user footer (spec §3.2) ─────────────────────────────────── */
.sb-user-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin-top: 12px;
    border-top: 1px solid var(--border);
}
.sb-user-footer .avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--viz-4);
    color: var(--neutral-0);
    font-weight: var(--fw-semi);
    font-size: var(--fs-12);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.sb-user-meta { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.sb-user-name { font-size: var(--fs-12); font-weight: var(--fw-semi); color: var(--fg-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-user-dept { font-size: var(--fs-10); color: var(--fg-2); }
.sb-user-role { font-size: var(--fs-10); color: var(--fg-2); }
.sb-user-role.role-multi { color: var(--amber-700); font-weight: var(--fw-medium); }

/* ── User chip role label — amber in multi-role mode ─────────────────── */
.topbar .user .u-role.role-multi {
    color: var(--amber-700);
    font-weight: var(--fw-medium);
}

/* ═════════════════════════════════════════════════════════════════════════
 * Sales workspace utilities (.sa-*)
 *
 * Class-based replacements for inline styles across the Sales-area
 * components — Dashboard, Project Detail, Collection Detail tabs, Sales
 * Reports Hub, Costing Detail Sales-view fragments, Customer Detail Sales
 * tabs. UI_HANDOVER §11 forbids inline styles and hardcoded colours; every
 * rule below consumes canonical tokens from colors_and_type.css.
 *
 * Lives in layout.css per §3.1 ("layout.css = shell + buttons + utilities")
 * — Sales utilities are layout / utility primitives, not bespoke components.
 * The .sa-* prefix keeps them out of the way of canonical layout / state /
 * admin classes.
 * ═════════════════════════════════════════════════════════════════════ */

/* ── Layout primitives ─────────────────────────────────────────────────── */

.sa-rail-grid {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--sp-4);
    align-items: start;
}

.sa-rail {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    position: sticky;
    top: var(--sp-4);
}

.sa-stack       { display: flex; flex-direction: column; gap: var(--sp-3); }
.sa-stack-tight { display: flex; flex-direction: column; gap: var(--sp-2); }

.sa-row       { display: flex; gap: var(--sp-3); align-items: center; }
.sa-row-tight { display: flex; gap: var(--sp-2); align-items: center; }
.sa-row-end {
    display: flex;
    gap: var(--sp-3);
    align-items: flex-end;
    flex-wrap: wrap;
}
.sa-row-spread {
    display: flex;
    gap: var(--sp-3);
    align-items: center;
    justify-content: space-between;
}

.sa-actions-trail { margin-left: auto; }

/* ── Page topbar action cluster ───────────────────────────────────────── */

.sa-toolbar-actions {
    display: flex;
    gap: var(--sp-2);
    align-items: center;
}

/* Segmented toggle (Me / All). */
.sa-segmented {
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    overflow: hidden;
}

.sa-segmented .sa-segmented-btn {
    padding: var(--sp-1) var(--sp-3);
    border: 0;
    background: transparent;
    color: var(--fg-1);
    cursor: pointer;
    font: inherit;
}

.sa-segmented .sa-segmented-btn:hover {
    background: var(--surface-tertiary);
}

.sa-segmented .sa-segmented-btn[aria-pressed="true"] {
    background: var(--amber-500);
    color: var(--neutral-0);
}

.sa-inline-check {
    display: inline-flex;
    gap: var(--sp-1);
    align-items: center;
    font-size: var(--fs-12);
    color: var(--fg-1);
}

/* ── Empty state inside a card ─────────────────────────────────────────── */

.sa-empty {
    text-align: center;
    padding: var(--sp-8);
}

.sa-empty .sa-empty-actions {
    display: flex;
    gap: var(--sp-2);
    justify-content: center;
    margin-top: var(--sp-4);
}

/* ── Filter rail (Sales Reports, QuoteHistory) ─────────────────────────── */

.sa-filter-rail {
    display: flex;
    gap: var(--sp-4);
    align-items: flex-end;
    margin-bottom: var(--sp-3);
    flex-wrap: wrap;
}

.sa-filter-card-body {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.sa-filter-label {
    font-size: var(--fs-11);
    font-weight: 600;
    color: var(--fg-2);
    display: block;
}

.sa-year-input { width: 5.5rem; }
.sa-year-sep   { color: var(--fg-2); }

.sa-checkbox-group {
    display: inline-flex;
    gap: var(--sp-2);
    flex-wrap: wrap;
}

.sa-checkbox-group-stack {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
}

.sa-checkbox-list-scroll {
    max-height: 10rem;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: var(--sp-1) var(--sp-2);
}

.sa-drilldown {
    border-top: 1px solid var(--border);
    padding-top: var(--sp-2);
}

.sa-drilldown-eyebrow { font-size: var(--fs-11); color: var(--fg-2); }
.sa-drilldown-body    { font-size: var(--fs-12); }

/* ── Reports hub card chrome ───────────────────────────────────────────── */

.sa-reports-main {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.sa-card-header-spread {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sa-card-h2          { margin: 0; font-size: var(--fs-15); }
.sa-card-empty       { text-align: center; padding: var(--sp-5) 0; }
.sa-card-empty-tight { text-align: center; padding: var(--sp-3) 0; }

/* ── Generic data table (used where SfGrid is overkill) ────────────────── */

.sa-table-shell {
    width: 100%;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
}

.sa-table-shell-fixed {
    width: 100%;
    max-height: 420px;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
}

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

.sa-table thead { background: var(--surface-tertiary); }

.sa-table thead.sa-table-thead-sticky {
    position: sticky;
    top: 0;
    background: var(--surface-tertiary);
    z-index: 1;
}

.sa-table th         { text-align: left;  padding: var(--sp-2); }
.sa-table th.sa-num  { text-align: right; }
.sa-table td         { padding: var(--sp-2); }
.sa-table td.sa-num  { text-align: right; }

.sa-table tbody tr.sa-clickable        { cursor: pointer; }
.sa-table tbody tr.sa-clickable:hover  { background: var(--surface-tertiary); }

.sa-table-bordered tr { border-bottom: 1px solid var(--border); }
.sa-table-bordered th { border-bottom: 1px solid var(--border); }

.sa-truncate {
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Status pill (used inside dense tables where Chip is too heavy) ────── */

.sa-status-pill {
    display: inline-block;
    padding: 1px var(--sp-2);
    border-radius: var(--r-pill);
    font-size: var(--fs-11);
    background: var(--surface-tertiary);
    color: var(--fg-1);
}

.sa-status-pill.status-success { background: var(--success-bg); color: var(--success); }
.sa-status-pill.status-danger  { background: var(--danger-bg);  color: var(--danger); }
.sa-status-pill.status-info    { background: var(--info-bg);    color: var(--info); }
.sa-status-pill.status-muted   { background: var(--surface-tertiary); color: var(--fg-2); }

/* ── Pagination strip ──────────────────────────────────────────────────── */

.sa-pager {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--sp-2);
}

.sa-pager-buttons { display: flex; gap: var(--sp-1); }

/* ── Pipeline page — top-down stack ────────────────────────────────────── */
/* Top-down rhythm: KPI strip → filter bar → kanban → leaderboard.
 * `.sa-rail-grid` is kept intact (used by other sales pages); the dashboard
 * itself uses `.sa-stack-page` so nothing else is forced to change. */

.sa-stack-page {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
}

/* ── KPI strip (#1 — was a vertical rail tile, now horizontal across top) ── */

.sa-kpi-strip {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-card);
}

.sa-kpi-cell {
    background: var(--surface-raised);
    padding: var(--sp-3) var(--sp-4) var(--sp-4);
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    min-height: 84px;
}

.sa-kpi-cell-label {
    font-size: var(--fs-10);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    color: var(--fg-2);
    font-weight: var(--fw-medium);
}

.sa-kpi-cell-value {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
    line-height: 1.05;
    flex-wrap: wrap;
}

.sa-kpi-cell-num {
    font: var(--fw-medium) 26px/1.05 var(--font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--fg-1);
    letter-spacing: -0.4px;
}

.sa-kpi-cell-num-suffix {
    font-size: var(--fs-13);
    color: var(--fg-2);
    margin-left: 2px;
}

/* ── Filter bar (#5) ───────────────────────────────────────────────────── */

.sa-filter-bar {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
}

.sa-filter-bar-grow { flex: 1; }

.sa-filter-search {
    height: 28px;
    padding: 0 var(--sp-3);
    border: 1px solid var(--border);
    background: var(--surface-raised);
    border-radius: var(--r-sm);
    color: var(--fg-1);
    font-size: var(--fs-11);
    width: 220px;
    font: inherit;
}

.sa-filter-search:focus {
    outline: none;
    border-color: var(--border-accent);
    box-shadow: var(--focus-ring);
}

/* ── Kanban (#2 — weighted columns, terminal columns collapse) ─────────── */

.sa-kanban-grid {
    display: grid;
    grid-template-columns: minmax(280px, 3fr) minmax(220px, 2fr) 56px 56px;
    gap: var(--sp-3);
    align-items: stretch;
}

.sa-kanban-grid.sa-kanban-grid-expanded {
    /* When user toggles "Show all" on terminal columns, give them real width. */
    grid-template-columns: minmax(280px, 3fr) minmax(220px, 2fr) minmax(220px, 2fr) minmax(220px, 2fr);
}

@media (max-width: 1280px) {
    .sa-kanban-grid,
    .sa-kanban-grid.sa-kanban-grid-expanded {
        grid-template-columns: repeat(4, minmax(260px, 1fr));
        overflow-x: auto;
    }
}

.sa-kanban-col-header {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.sa-kanban-col-header-title { flex: 1; }
.sa-kanban-col-header-title .sub {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--fg-2);
    margin-left: var(--sp-1);
}
.sa-kanban-col-header-total {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--fs-10);
    color: var(--fg-2);
}
.sa-kanban-col-toggle { font-size: var(--fs-11); padding: 2px var(--sp-1); }

.sa-kanban-col-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding: var(--sp-2);
}

.sa-kanban-col-empty {
    border: 1px dashed var(--border);
    border-radius: var(--r-md);
    background: var(--surface-inset);
    padding: var(--sp-4);
    text-align: center;
    font-size: var(--fs-11);
    color: var(--fg-2);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    align-items: center;
}
.sa-kanban-col-empty-cta {
    color: var(--amber-500);
    font-weight: var(--fw-medium);
    text-decoration: none;
    font-size: var(--fs-11);
}
.sa-kanban-col-empty-cta:hover { text-decoration: underline; }

/* Collapsed terminal columns — content vertically centred so the column
 * doesn't tower as an empty rectangle next to a busy Open column. */
.sa-kanban-col-collapsed {
    background: var(--surface-inset);
    border: 1px dashed var(--border);
    border-radius: var(--r-md);
    padding: var(--sp-4) 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    cursor: pointer;
    color: var(--fg-2);
    font: inherit;
}
.sa-kanban-col-collapsed:hover { background: var(--surface-tertiary); }
.sa-kanban-col-collapsed:focus-visible {
    outline: 2px solid var(--border-accent);
    outline-offset: 2px;
}
.sa-kanban-col-collapsed-count {
    font: var(--fw-medium) var(--fs-18)/1 var(--font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--fg-1);
}
.sa-kanban-col-collapsed-label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: var(--fs-11);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--fg-2);
    font-weight: var(--fw-semi);
}
.sa-kanban-col-collapsed-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--fg-3);
}
.sa-kanban-col-collapsed-dot.is-closed   { background: var(--success); }
.sa-kanban-col-collapsed-dot.is-rejected { background: var(--danger); }

/* ── Pipeline card (#3, #4, #9) ────────────────────────────────────────── */

.sa-pipeline-card {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    width: 100%;
    text-align: left;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: var(--sp-3);
    cursor: pointer;
    box-shadow: var(--shadow-card);
    color: var(--fg-1);
    font: inherit;
    transition: border-color var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out);
}

.sa-pipeline-card:hover {
    border-color: var(--border-strong);
    transform: translateY(-1px);
}

.sa-pipeline-card:focus-visible {
    outline: 2px solid var(--border-accent);
    outline-offset: 2px;
}

/* Header row: title block + chevron */
.sa-pipeline-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--sp-2);
}

.sa-pipeline-card-titleblock {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.sa-pipeline-card-title {
    font-weight: var(--fw-semi);
    line-height: 1.2;
    word-break: break-word;
}

.sa-pipeline-card-sub     { font-size: var(--fs-12); color: var(--fg-2); }
.sa-pipeline-card-chevron { font-weight: var(--fw-semi); flex-shrink: 0; color: var(--fg-3); }

/* Risk pills row — labelled, never colour-only */
.sa-pipeline-card-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* Production-quantity curve (#9 — replaces SOP→EOP elapsed bar) */
.sa-prod-curve {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    font-size: var(--fs-10);
    color: var(--fg-2);
}
.sa-prod-curve-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    line-height: 1;
}
.sa-prod-curve-stats {
    color: var(--fg-1);
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--fs-10);
}
.sa-prod-curve-stats .sep { color: var(--fg-3); margin: 0 6px; }
.sa-prod-curve-svg {
    width: 100%;
    height: 44px;
    display: block;
}
.sa-prod-curve-foot {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-10);
    color: var(--fg-2);
}
.sa-prod-curve-foot .ds-mono { color: var(--fg-1); font-size: var(--fs-10); }
.sa-prod-curve-foot-grow { flex: 1; }
.sa-prod-curve-empty {
    height: 44px;
    border-radius: var(--r-xs);
    background: repeating-linear-gradient(
        45deg,
        transparent 0 4px,
        var(--surface-tertiary) 4px 5px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-style: italic;
    color: var(--fg-3);
}

/* Foot row — duration + avg qty is the primary signal; recency is a tooltip. */
.sa-pipeline-card-foot {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-11);
    color: var(--fg-2);
}
.sa-pipeline-card-foot-dur {
    font-weight: var(--fw-medium);
    color: var(--fg-1);
    font-variant-numeric: tabular-nums;
    font-family: var(--font-mono);
}
.sa-pipeline-card-foot-trail {
    margin-left: auto;
    font-size: var(--fs-10);
    color: var(--fg-3);
    font-variant-numeric: tabular-nums;
}

/* Legacy sub-classes kept for callers in shared lists; the dashboard no
 * longer uses these but other sales pages may. */
.sa-pipeline-card-meta { font-size: var(--fs-12); }

/* ── Customer leaderboard (#10 — replaces vertical rail list) ───────────── */

.sa-leaderboard {
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-card);
    padding: var(--sp-4) var(--sp-4) var(--sp-3);
}

.sa-leaderboard-head {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
    padding-bottom: var(--sp-2);
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--sp-3);
}
.sa-leaderboard-head h3 { margin: 0; }
.sa-leaderboard-head-sub { color: var(--fg-2); font-size: var(--fs-11); }
.sa-leaderboard-head-grow { flex: 1; }
.sa-leaderboard-head-link {
    color: var(--amber-500);
    font-size: var(--fs-11);
    text-decoration: none;
}
.sa-leaderboard-head-link:hover { text-decoration: underline; }

/* Columns mirror the kanban above for visual rhythm. */
.sa-leaderboard-table {
    display: grid;
    grid-template-columns: minmax(280px, 3fr) minmax(120px, 2fr) minmax(120px, 1fr) 56px;
    gap: var(--sp-3);
    align-items: center;
    font-size: var(--fs-12);
}
.sa-leaderboard-col-head {
    font-size: var(--fs-10);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    color: var(--fg-3);
    font-weight: var(--fw-medium);
    padding-bottom: var(--sp-2);
    border-bottom: 1px dashed var(--border);
}
.sa-leaderboard-col-head.right { text-align: right; }
.sa-leaderboard-cell {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: 32px;
    background: transparent;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}
.sa-leaderboard-cell.right { justify-content: flex-end; }
.sa-leaderboard-row-btn {
    display: contents;
    cursor: pointer;
}
.sa-leaderboard-cell-name {
    font-weight: var(--fw-medium);
    display: flex;
    flex-direction: column;
    gap: 1px;
    text-align: left;
}
.sa-leaderboard-cell-name small {
    color: var(--fg-2);
    font-weight: var(--fw-normal);
    font-size: var(--fs-10);
}
.sa-leaderboard-empty {
    grid-column: 1 / -1;
    padding: var(--sp-3) 0 var(--sp-1);
    color: var(--fg-3);
    font-size: var(--fs-11);
    text-align: center;
    font-style: italic;
}

/* ── My customers list / pipeline summary strip — legacy classes kept ──── */

.sa-bare-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.sa-bare-list-stack {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.sa-customer-row-btn {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    padding: var(--sp-2) var(--sp-1);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--border);
    text-align: left;
    cursor: pointer;
    color: var(--fg-1);
    font: inherit;
}

.sa-customer-row-btn:hover { background: var(--surface-tertiary); }

.sa-customer-row-head {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-2);
    align-items: center;
}

.sa-customer-row-name { font-weight: 500; }

/* ── Win/Loss + KPI trend chart (CSS-only) ─────────────────────────────── */

.sa-chart-stack {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.sa-chart-legend {
    display: flex;
    gap: var(--sp-4);
    font-size: var(--fs-11);
    color: var(--fg-2);
}

.sa-chart-legend-item {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
}

.sa-chart-swatch {
    display: inline-block;
    width: var(--sp-3);
    height: var(--sp-3);
    border-radius: 2px;
}

.sa-chart-swatch.sa-swatch-success { background: var(--success); }
.sa-chart-swatch.sa-swatch-danger  { background: var(--danger); }

.sa-chart-line {
    display: inline-block;
    width: 14px;
    height: 2px;
}

.sa-chart-line.sa-line-success { background: var(--success); }
.sa-chart-line.sa-line-info    { background: var(--info); }

.sa-winloss-rows {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    padding-top: var(--sp-1);
}

.sa-winloss-row {
    display: grid;
    grid-template-columns: 5.5rem 1fr 5rem;
    gap: var(--sp-2);
    align-items: center;
}

.sa-winloss-quarter { font-size: var(--fs-12); font-weight: 500; }

.sa-winloss-bars {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
}

.sa-winloss-bar {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    height: 14px;
}

.sa-winloss-bar-fill {
    height: 12px;
    border-radius: 3px;
    min-width: 1px;
}

.sa-winloss-bar-fill.sa-fill-success { background: var(--success); }
.sa-winloss-bar-fill.sa-fill-danger  { background: var(--danger); }

.sa-winloss-rate {
    font-size: var(--fs-12);
    text-align: right;
    color: var(--fg-2);
}

.sa-chart-scroll { width: 100%; overflow-x: auto; }
.sa-trend-svg    { width: 100%; height: auto; font-family: inherit; }

/* ── Misc small utilities ──────────────────────────────────────────────── */

.sa-error-chip       { margin-top: var(--sp-2); }
.sa-chip-trail       { margin-left: var(--sp-1); }
.sa-card-margin-top  { margin-top: var(--sp-4); }

.sa-action-row {
    display: flex;
    gap: var(--sp-2);
}

.sa-action-row-end {
    display: flex;
    gap: var(--sp-2);
    align-items: flex-end;
}

.sa-footer-actions {
    margin-top: var(--sp-3);
    display: flex;
    gap: var(--sp-2);
    align-items: center;
}

.sa-footer-actions-tight {
    margin-top: var(--sp-2);
    display: flex;
    gap: var(--sp-2);
}

/* BomTreeGrid column widths — replace th[style] inline declarations. */
.sa-bom-col-row  { width: 36ch; }
.sa-bom-col-num  { width:  8ch; }
.sa-bom-col-lock { width: 24ch; }
.sa-bom-indent   { display: inline-block; }

/* KPI / win-loss bar fill — width is genuinely dynamic per row, kept inline
   with a --sa-fill custom property so the value is the only inline survivor.
   Authors set `style="--sa-fill: 73%"` on the element (UI_HANDOVER §11). */
.sa-kpi-fill     { width: var(--sa-fill, 0%); }
.sa-kpi-mark-100 { left: 100%; }

/* ── Slide-in panel (used by every Sales-area new-thing dialog) ──────────
   Right-docked panel + click-through backdrop. Also used by the lifecycle
   dialogs (AdvanceToOffer / MarkAsWon / MarkAsRejected) and the
   NewCollectionPanel / NewCostingPanel / NewProjectDialog flows. */

.slide-in-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 20, 27, 0.35);
    z-index: 940;
}

.slide-in {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(440px, calc(100vw - 40px));
    background: var(--surface-raised);
    color: var(--fg-1);
    border-left: 1px solid var(--border-strong);
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.08);
    z-index: 950;
    display: flex;
    flex-direction: column;
    padding: var(--sp-4);
    overflow-y: auto;
    animation: slide-in-from-right var(--dur-base, .2s) var(--ease-out, ease-out);
}

.slide-in-wide {
    width: min(720px, calc(100vw - 40px));
}

@keyframes slide-in-from-right {
    from { transform: translateX(8px); opacity: 0; }
    to   { transform: translateX(0);   opacity: 1; }
}

.slide-in > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--sp-3);
}

.slide-in > header h2 {
    margin: 0;
    font-size: var(--fs-15);
    font-weight: var(--fw-medium);
}

.slide-in > footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--sp-2);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--border);
    margin-top: var(--sp-4);
}

.slide-in .form-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: var(--sp-3);
}

.slide-in .form-row label {
    font-size: var(--fs-11);
    color: var(--fg-2);
    text-transform: uppercase;
    letter-spacing: var(--tracking-label, 0.5px);
}

.slide-in .form-row input[type="text"],
.slide-in .form-row input[type="number"],
.slide-in .form-row input[type="date"],
.slide-in .form-row select,
.slide-in .form-row textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 6px 8px;
    font: inherit;
    color: var(--fg-1);
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
}

.slide-in .form-row input:focus-visible,
.slide-in .form-row select:focus-visible,
.slide-in .form-row textarea:focus-visible {
    outline: none;
    border-color: var(--border-accent);
    box-shadow: var(--focus-ring);
}

.slide-in .form-row textarea { resize: vertical; min-height: 60px; }

/* ═════════════════════════════════════════════════════════════════════════
 * Admin console (UI_HANDOVER §7)
 *
 * Master-data template surfaces — license meter · stale badge · used-in
 * drawer · history sparkline · filter rail · admin-grid · import wizard ·
 * dialogs · KPI strip · audit chrome.
 *
 * Folded in from the former admin.css per §3.1 simplification.
 * ═════════════════════════════════════════════════════════════════════ */

/* ===== License meter ===== */
.license-meter {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--orago-surface);
    border: 1px solid var(--orago-border);
    border-radius: var(--radius-lg);
    font-size: var(--fs-small);
}
.license-meter strong { font-size: var(--fs-small); }
.license-meter .bar {
    flex: 1;
    height: 10px;
    background: var(--orago-bg);
    border-radius: 5px;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--orago-border);
}
.license-meter .bar .fill {
    position: absolute; left: 0; top: 0; bottom: 0;
    background: linear-gradient(90deg, var(--viz-1), var(--viz-2));
    transition: width 0.2s ease-out;
}
.license-meter .bar.warn .fill {
    background: linear-gradient(90deg, var(--viz-1), var(--viz-3));
}
.license-meter .bar.critical .fill {
    background: linear-gradient(90deg, var(--viz-3), var(--state-danger-fg));
}
.license-meter .bar .warn-zone {
    position: absolute; right: 0; top: 0; bottom: 0; width: 10%;
    background: repeating-linear-gradient(
        45deg,
        transparent, transparent 4px,
        rgba(213, 139, 19, 0.2) 4px, rgba(213, 139, 19, 0.2) 8px);
}
.license-meter .nums { font-family: var(--ds-font-mono); font-weight: 600; }
.license-meter .nums .avail { color: var(--state-ok-fg); }
.license-meter .nums .used { color: var(--orago-text); }

/* ===== Stale badge ===== */
.stale-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--state-warn-bg);
    color: var(--state-warn-fg);
    border: 1px solid var(--state-warn-fg);
    border-radius: 2px;
    padding: 1px 6px;
    font-size: var(--fs-micro);
    font-weight: 600;
}
.stale-badge .stale-label { margin-left: 4px; }
.stale-badge.stale-trailing { margin-left: 8px; }

/* ===== History sparkline ===== */
.sparkline {
    display: inline-block;
    vertical-align: middle;
    height: 18px;
}
.sparkline path { fill: none; stroke: var(--viz-1); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.sparkline .area { fill: var(--orago-primary-soft); stroke: none; }

/* ===== Used-in drawer ===== */
.used-in-trigger {
    background: transparent;
    border: 0;
    color: var(--orago-primary);
    font-size: var(--fs-small);
    cursor: pointer;
    padding: 0;
    font-family: inherit;
    text-decoration: underline dotted;
}
.drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 20, 27, 0.35);
    z-index: 900;
}
.drawer {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: 420px;
    background: var(--orago-surface);
    border-left: 1px solid var(--orago-border-strong);
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.08);
    z-index: 910;
    display: flex;
    flex-direction: column;
}
.drawer-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--orago-border);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-h1);
    font-weight: 600;
}
.drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 14px 16px;
    font-size: var(--fs-small);
}

/* ===== Admin layout — master-data page template ===== */
.admin-page {
    display: grid;
    grid-template-rows: auto 1fr;
    height: calc(100vh - var(--topbar-h));
}
.admin-page-header { padding: 14px 20px 0; }

.admin-grid {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 12px;
    padding: 12px 20px 20px;
    min-height: 0;
    height: 100%;
}
/* When the master-data layout is used directly under the page-body (rather
   than inside a constrained card), it needs to fill remaining viewport
   height so the grid scrolls instead of pushing the footer. */
.admin-grid.admin-grid-fill {
    height: calc(100vh - var(--topnav-h) - 120px);
}
.filter-rail {
    background: var(--orago-surface);
    border: 1px solid var(--orago-border);
    border-radius: var(--radius-lg);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    font-size: var(--fs-small);
}
.filter-rail h3 {
    margin: 0;
    font-size: var(--fs-micro);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--orago-text-soft);
    font-weight: 600;
}
.filter-rail .filter-rail-footer { margin-top: auto; }

.admin-page-header .page-header-flush { padding: 0; }
.admin-main {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    min-height: 0;
    min-width: 0;
}
/* Editing variant: when a row is selected the detail pane needs the breathing
   room. Grid card shrinks to a sensible minimum and detail takes the rest of
   the viewport, so a 7-field form renders without internal scroll on a
   standard 1080p admin viewport. */
.admin-main.is-editing {
    grid-template-rows: minmax(160px, 0.4fr) minmax(0, 1fr);
}
.admin-detail {
    background: var(--orago-surface);
    border: 1px solid var(--orago-border);
    border-top: 0;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    padding: 14px;
    min-height: 0;
    overflow-y: auto;
}
.admin-main .card {
    min-height: 0;
}
/* Master-data layout pattern: a grid card stacked above an `.admin-detail`
   pane (Lookups, MasterDataPage). The detail pane's `border-top: 0` connects
   flush to the card, so the card sheds its bottom edge to form one surface.
   Pages without a detail pane (UsersListPage etc.) keep the full card border. */
.admin-main .card:has(+ .admin-detail) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: 0;
}

/* ===== Import wizard ===== */
.wizard-steps {
    display: flex;
    gap: 4px;
    margin-bottom: 14px;
}
.wizard-step {
    flex: 1;
    padding: 8px 12px;
    font-size: var(--fs-small);
    font-weight: 600;
    background: var(--orago-bg);
    color: var(--orago-text-muted);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    gap: 6px;
}
.wizard-step .num {
    width: 18px; height: 18px;
    background: var(--orago-border-strong);
    color: var(--orago-surface);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-micro);
}
.wizard-step.active {
    background: var(--orago-primary-soft);
    color: var(--orago-primary);
}
.wizard-step.active .num { background: var(--orago-primary); color: var(--neutral-0); }
.wizard-step.done { color: var(--state-ok-fg); }
.wizard-step.done .num { background: var(--state-ok-fg); color: var(--neutral-0); }

/* ===== Admin landing tiles ===== */
.admin-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}
.admin-tile {
    background: var(--orago-surface);
    border: 1px solid var(--orago-border);
    border-radius: var(--radius-lg);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s;
}
.admin-tile:hover { border-color: var(--orago-primary); background: var(--orago-surface-alt); }
.admin-tile h3 {
    margin: 0;
    font-size: var(--fs-body);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}
.admin-tile .desc {
    font-size: var(--fs-small);
    color: var(--orago-text-muted);
    line-height: 1.4;
}
.admin-tile .meta {
    font-size: var(--fs-micro);
    color: var(--orago-text-soft);
    margin-top: auto;
    font-variant-numeric: tabular-nums;
}

/* ===== Admin forms & filters ===== */
.filter-rail .chk {
    display: flex; align-items: center; gap: 6px;
    font-size: var(--fs-small); color: var(--orago-text);
    cursor: pointer;
}
.filter-rail .chk input { margin: 0; }

.filter-rail .select,
.admin-page .select,
.admin-form .select {
    width: 100%;
    padding: 6px 8px;
    font-size: var(--fs-small);
    font-family: inherit;
    color: var(--orago-text);
    background: var(--orago-surface);
    border: 1px solid var(--orago-border);
    border-radius: var(--radius);
}
.filter-rail .select:focus-visible,
.admin-form .select:focus-visible {
    outline: none;
    border-color: var(--orago-primary);
    box-shadow: var(--focus-ring);
}

/* Native form-control styling — admin-form / form-field children.
   The codebase has class-level rules (.admin-form .select) but plain
   <input>, <select>, <textarea> inside FormField / .admin-form had no
   styling, so they rendered with the browser default (white in dark
   mode). One global rule scoped to these containers fixes every dialog
   and admin form at once without per-element class spam. */
.admin-form input[type="text"],
.admin-form input[type="number"],
.admin-form input[type="date"],
.admin-form input[type="email"],
.admin-form input[type="url"],
.admin-form input[type="search"],
.admin-form input[type="tel"],
.admin-form input:not([type]),
.admin-form select,
.admin-form textarea,
.form-field > input[type="text"],
.form-field > input[type="number"],
.form-field > input[type="date"],
.form-field > input[type="email"],
.form-field > input[type="url"],
.form-field > input[type="search"],
.form-field > input[type="tel"],
.form-field > input:not([type]),
.form-field > select,
.form-field > textarea {
    width: 100%;
    padding: 6px 8px;
    font-size: var(--fs-small);
    font-family: inherit;
    color: var(--orago-text);
    background: var(--orago-surface);
    border: 1px solid var(--orago-border);
    border-radius: var(--radius);
    box-sizing: border-box;
    line-height: 1.4;
}
.admin-form textarea,
.form-field > textarea {
    resize: vertical;
    min-height: 64px;
    font-family: inherit;
}
.admin-form input:focus-visible,
.admin-form select:focus-visible,
.admin-form textarea:focus-visible,
.form-field > input:focus-visible,
.form-field > select:focus-visible,
.form-field > textarea:focus-visible {
    outline: none;
    border-color: var(--orago-primary);
    box-shadow: var(--focus-ring);
}
.admin-form input:disabled,
.admin-form select:disabled,
.admin-form textarea:disabled,
.form-field > input:disabled,
.form-field > select:disabled,
.form-field > textarea:disabled,
.admin-form input[readonly],
.form-field > input[readonly] {
    background: var(--orago-surface-alt);
    color: var(--orago-text-muted);
    cursor: not-allowed;
}
.admin-form input::placeholder,
.admin-form textarea::placeholder,
.form-field > input::placeholder,
.form-field > textarea::placeholder {
    color: var(--orago-text-muted);
}

table.grid th.chk-col,
table.grid td.chk-col { width: 28px; }

.bulk-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--orago-primary-soft);
    border: 1px solid var(--orago-primary);
    border-top: 0;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    font-size: var(--fs-small);
}
.bulk-bar-label { font-weight: 600; color: var(--orago-primary); margin-right: 4px; }

/* Row-level role chip stacks (UsersList.Roles column).
   Wraps to a second line gracefully on narrow columns. */
.role-chip-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}
.role-chip-stack .chip { font-size: var(--fs-micro); padding: 1px 6px; }

/* ===== Admin form-body ===== */
.admin-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px 18px;
    align-items: start;
}
.admin-form-full { grid-column: 1 / -1; }
.admin-form .card {
    margin: 0;
}
.admin-form-section h3 {
    font-size: var(--fs-small);
    font-weight: 600;
    color: var(--orago-text-soft);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin: 0 0 8px;
}
.admin-form .inline-field {
    display: flex; align-items: center; gap: 6px;
}

/* §06 lookup translations editor — sits inline below the main form fields.
   The list rows + add/edit row share the same 3-track grid template so the
   columns line up regardless of language code length or button count. */
.translations-section {
    border-top: 1px dashed var(--orago-border);
    padding-top: 12px;
    margin-top: 4px;
}
.translations-grid {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 6px;
}
.translations-row {
    display: grid;
    grid-template-columns: 96px 1fr auto;
    gap: 8px;
    align-items: center;
    padding: 4px 6px;
}
.translations-row.translations-head {
    font-size: var(--fs-micro);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--orago-text-soft);
    font-weight: 600;
    border-bottom: 1px solid var(--orago-border);
    padding-bottom: 6px;
}
.translations-row.translations-add {
    border-top: 1px dashed var(--orago-border);
    padding-top: 8px;
    margin-top: 4px;
}
.translations-row .num { text-align: right; }
.translations-row input[type="text"],
.translations-row .select {
    width: 100%;
    box-sizing: border-box;
}

.danger-zone {
    margin-top: 16px;
    border: 1px solid var(--state-danger-fg);
    border-radius: var(--radius-lg);
    padding: 12px 14px;
    background: var(--state-danger-bg);
}
.danger-zone h3 {
    color: var(--state-danger-fg);
    margin: 0 0 8px;
    font-size: var(--fs-small);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.danger-zone .danger-actions { display: flex; gap: 8px; margin-top: 10px; }

.vendor-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px;
    background: var(--state-locked-bg);
    color: var(--state-locked-fg);
    border-radius: 999px;
    font-size: var(--fs-micro);
    font-weight: 600;
}

/* Matrix grid for roles & permissions — reused by KPI targets */
table.matrix th { background: var(--orago-surface-alt); text-align: center; }
table.matrix td.matrix-cell { text-align: center; font-family: var(--ds-font-mono); }
table.matrix td.matrix-cell.w { color: var(--state-ok-fg); font-weight: 600; }
table.matrix td.matrix-cell.r { color: var(--orago-text); }
table.matrix td.matrix-cell.none { color: var(--orago-text-soft); }

.back-link {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: var(--fs-small);
    color: var(--orago-primary);
    text-decoration: none;
    margin-bottom: 6px;
}
.back-link:hover { text-decoration: underline; }

/* ===== Admin CRUD dialog (hand-rolled modal that matches FormField patterns) =====
   Used by PlantConfigPage, MaterialMasterPage, and any other master-data page
   that needs Add / Edit dialogs without bringing in SfDialog's opinionated
   chrome. Z-index sits above UsedInDrawer (910). */
.dialog-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 20, 27, 0.55);
    z-index: 950;
}
.dialog-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(720px, calc(100vw - 40px));
    max-height: calc(100vh - 80px);
    background: var(--orago-surface);
    color: var(--orago-text);
    border: 1px solid var(--orago-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    z-index: 960;
    display: flex;
    flex-direction: column;
}
.dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--orago-border);
    font-size: var(--fs-h1);
    font-weight: 600;
}
.dialog-close {
    background: transparent;
    border: 0;
    color: var(--orago-text-muted);
    font-size: 20px;
    cursor: pointer;
    line-height: 1;
    padding: 0 6px;
    border-radius: var(--radius);
}
.dialog-close:hover {
    background: var(--orago-surface-alt);
    color: var(--orago-text);
}
.dialog-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}
.dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--orago-border);
}

/* Pill-style toggle chip for role + commodity selection */
.chip-toggle {
    border: 1px solid var(--orago-border-strong);
    background: var(--orago-surface);
    color: var(--orago-text);
    padding: 4px 10px;
    font-size: var(--fs-small);
    font-family: inherit;
    border-radius: 999px;
    cursor: pointer;
}
.chip-toggle:hover { border-color: var(--orago-primary); }
.chip-toggle.active {
    background: var(--orago-primary-soft);
    color: var(--orago-primary);
    border-color: var(--orago-primary);
}
.chip-toggle-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 10px 0 4px;
}

/* Bullet list used for "Effective capabilities" etc. */
.capability-list {
    margin: 0;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.capability-list li { color: var(--orago-text); }

/* Side-by-side two-card layout (License & Session, Business Partners detail) */
.two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
}
@media (max-width: 1100px) {
    .two-col { grid-template-columns: 1fr; }
}

/* Key/value grid used on License status + read-only profile cards */
dl.kv {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 16px;
    margin: 0;
    font-size: var(--fs-small);
}
dl.kv dt { color: var(--orago-text-soft); }
dl.kv dd { margin: 0; color: var(--orago-text); }

/* LicenseSession spacings */
.license-meter-wrap  { margin-top: 14px; }
.license-warn        { margin-top: 10px; }
.license-links       { display: flex; gap: 8px; margin-top: 12px; }
.license-pending     { margin-top: 14px; padding-top: 10px; border-top: 1px dashed var(--orago-border); }

.last-change-line {
    padding: 4px 2px;
}

/* ===== Credential reveal (UserInvitePage — temp-password "shown once") ===== */
/* When the inline section header sits next to an icon in a row-flex, we need
   to drop the section margin so the row stays vertically centred. */
.section-h-inline { margin: 0; }

.cred-reveal {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    background: var(--surface-tertiary);
    border: 1px dashed var(--neutral-100);
    border-radius: var(--r-md);
}
.cred-reveal .cred-value {
    flex: 1;
    font-size: 15px;
    color: var(--fg-1);
    word-break: break-all;
}

/* ===== Audit log (admin §07-3) ===== */
.audit-old   { color: var(--danger); text-decoration: line-through; }
.audit-new   { color: var(--success); }
.audit-arrow { color: var(--fg-2); }

.audit-tx-detail {
    padding: 8px 16px;
    background: var(--surface-tertiary);
    border-left: 3px solid var(--amber-500);
    font-size: var(--fs-12);
}
.audit-tx-meta { margin-bottom: 6px; color: var(--fg-3); }
.audit-tx-list { list-style: none; padding-left: 0; margin: 0; }
.audit-tx-list li { padding: 2px 0; }

/* ===== Bulk re-index progress strip (admin §07-4) ===== */
.bulk-job { display: flex; flex-direction: column; gap: 8px; }
.bulk-job-meta { font-size: var(--fs-12); color: var(--fg-3); }
.bulk-job-bar {
    width: 100%;
    height: 8px;
    background: var(--surface-tertiary);
    border-radius: var(--r-pill);
    overflow: hidden;
}
.bulk-job-fill {
    height: 100%;
    background: var(--amber-500);
    transition: width var(--dur-base, .2s) var(--ease-out);
}

/* ===== KPI strip / tile (project detail) ===== */
.kpi-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-card);
}

.kpi-tile {
    background: var(--surface-raised);
    padding: var(--sp-3) var(--sp-4) var(--sp-4);
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    min-height: 72px;
}

.kpi-tile .label {
    font-size: var(--fs-10);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    color: var(--fg-2);
    font-weight: var(--fw-medium);
}

.kpi-tile .value {
    font: var(--fw-medium) 24px/1.05 var(--font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--fg-1);
    letter-spacing: -0.4px;
}

/* ═════════════════════════════════════════════════════════════════════════
 * Account screens (#06 Security, #09 Profile, #10 Sessions)
 *
 * In-app /account/* surfaces — sit inside the standard 52px topnav workspace
 * shell, but introduce a 220px Account left rail that replaces the global
 * sidebar on these routes.
 *
 * Folded in from the former account.css per §3.1 simplification.
 * ═════════════════════════════════════════════════════════════════════ */

.account-shell {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 20px;
    align-items: start;
    padding: 20px 28px;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
}

.account-side {
    background: var(--surface-raised);
    border: 1px solid var(--neutral-100);
    border-radius: var(--r-lg);
    padding: 8px 0;
    position: sticky;
    top: 12px;
}
.account-side ul { list-style: none; margin: 0; padding: 0; }
.account-side li > a,
.account-side li > button {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 14px;
    color: var(--fg-1);
    text-decoration: none;
    font-size: 12.5px;
    border: 0; background: none; width: 100%; text-align: left; cursor: pointer;
    border-left: 2px solid transparent;
}
.account-side li > a:hover { background: var(--surface-tertiary); }
.account-side li.active > a {
    background: var(--amber-tint-10);
    border-left-color: var(--amber-500);
    color: var(--amber-700);
    font-weight: var(--fw-medium);
}
.account-side .sep {
    height: 1px;
    background: var(--neutral-100);
    margin: 8px 0;
}

.account-main { display: flex; flex-direction: column; gap: 16px; }

.account-tabs {
    display: flex; gap: 2px;
    border-bottom: 1px solid var(--neutral-100);
    margin-bottom: 4px;
}
.account-tabs a {
    padding: 8px 14px;
    color: var(--fg-2);
    text-decoration: none;
    font-size: 12.5px;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.account-tabs a:hover { color: var(--fg-1); }
.account-tabs a.active { color: var(--amber-700); border-bottom-color: var(--amber-500); font-weight: var(--fw-medium); }

.account-card {
    background: var(--surface-raised);
    border: 1px solid var(--neutral-100);
    border-radius: var(--r-lg);
    padding: 18px 20px;
}
.account-card h2 {
    margin: 0 0 4px 0;
    font-size: 15px;
    font-weight: var(--fw-medium);
}
.account-card .sub { color: var(--fg-2); font-size: 12px; margin: 0 0 14px 0; }
.account-card .head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 14px;
}
.account-card .head h2 { margin: 0; }

.account-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.account-grid-2 .col-span-2 { grid-column: 1 / -1; }
@media (max-width: 960px) {
    .account-grid-2 { grid-template-columns: 1fr; }
}

/* --- Profile hero ------------------------------------------------------- */
.profile-hero {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 16px 20px;
}
.avatar.xl {
    width: 56px; height: 56px;
    border-radius: 999px;
    background: var(--amber-500);
    color: var(--neutral-0);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: var(--fw-semi);
    font-size: 18px;
    letter-spacing: 0.5px;
}
.profile-hero .name {
    font-size: 18px;
    font-weight: var(--fw-medium);
    color: var(--fg-1);
}
.profile-hero .meta {
    color: var(--fg-2);
    font-size: 12px;
    margin-top: 2px;
    display: flex; gap: 10px; flex-wrap: wrap;
}
.profile-hero .role-pill {
    display: inline-block;
    background: var(--amber-tint-10);
    color: var(--amber-700);
    border-radius: var(--r-sm);
    padding: 2px 8px;
    font-size: 11px;
    letter-spacing: 0.2px;
    font-weight: var(--fw-medium);
}
.profile-hero .ctx-tags {
    display: flex; flex-direction: column; gap: 4px; align-items: flex-end;
}
.profile-hero .tag {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--fg-2);
    border: 1px solid var(--neutral-100);
    padding: 1px 6px;
    border-radius: 4px;
}
.profile-hero .tag.success { color: var(--success); border-color: var(--success); background: var(--success-bg); }
.profile-hero .tag.danger  { color: var(--danger); border-color: var(--danger); background: var(--danger-bg); }
.profile-hero .tag.warn    { color: var(--warn); border-color: var(--warn); background: var(--warn-bg); }

.kv-grid {
    display: grid;
    grid-template-columns: 160px 1fr;
    row-gap: 8px; column-gap: 12px;
    font-size: 13px;
}
.kv-grid .k {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    color: var(--fg-2);
    align-self: center;
}
.kv-grid .v { color: var(--fg-1); }
.kv-grid .v.mono { font-family: var(--font-mono); }
.kv-grid .v.muted { color: var(--fg-2); }

/* --- Session row -------------------------------------------------------- */
.session-row {
    display: grid;
    grid-template-columns: 32px 1fr auto auto;
    gap: 12px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--neutral-100);
}
.session-row:last-child { border-bottom: 0; }
.session-row .device-icon {
    width: 32px; height: 32px;
    border-radius: var(--r-sm);
    background: var(--surface-tertiary);
    color: var(--fg-2);
    display: inline-flex; align-items: center; justify-content: center;
}
.session-row .label .device { font-size: 13px; color: var(--fg-1); }
.session-row .label .meta { font-size: 11.5px; color: var(--fg-2); margin-top: 2px; }
.session-row .when { font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-2); }
.session-row .now-tag {
    background: var(--success-bg); color: var(--success);
    font-size: 10.5px; font-family: var(--font-mono);
    padding: 2px 8px; border-radius: var(--r-sm);
    text-transform: uppercase; letter-spacing: 0.5px;
}

/* --- Audit row ---------------------------------------------------------- */
.audit-table {
    display: grid;
    grid-template-columns: 110px 1fr 130px 100px;
    gap: 0;
    font-size: 12.5px;
}
.audit-table > .head {
    background: var(--surface-tertiary);
    color: var(--fg-2);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    padding: 8px 12px;
    border-bottom: 1px solid var(--neutral-100);
    position: sticky; top: 0;
    margin: 0;
}
.audit-table > .cell {
    padding: 8px 12px;
    border-bottom: 1px solid var(--neutral-100);
    color: var(--fg-1);
    display: flex; align-items: center;
}
.audit-table .ts { font-family: var(--font-mono); color: var(--fg-2); }
.audit-table .id { font-family: var(--font-mono); color: var(--amber-700); }
.audit-table .ip { font-family: var(--font-mono); color: var(--fg-2); }
.badge.type {
    font-size: 10px;
    padding: 1px 8px;
    border-radius: var(--r-sm);
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.badge.type.login    { background: var(--surface-tertiary); color: var(--fg-2); }
.badge.type.update   { background: var(--info-bg); color: var(--info); }
.badge.type.create   { background: var(--success-bg); color: var(--success); }
.badge.type.review   { background: var(--warn-bg); color: var(--warn); }
.badge.type.security { background: var(--danger-bg); color: var(--danger); }

/* Empty-state row that spans every column of an audit-table grid. */
.audit-table .empty {
    grid-column: 1 / -1;
    color: var(--fg-2);
}

/* --- Idle warning modal ------------------------------------------------- */
.idle-modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.4);
    z-index: 9000;
    display: flex; align-items: center; justify-content: center;
}
.idle-modal {
    background: var(--surface-raised);
    border-radius: var(--r-lg);
    width: 380px;
    padding: 20px;
    box-shadow: 0 16px 48px rgba(0,0,0,.2);
}
.idle-modal h2 { margin: 0 0 8px 0; font-size: 16px; }
.idle-modal p { margin: 0 0 14px 0; font-size: 12.5px; color: var(--fg-2); }
.idle-modal .actions { display: flex; gap: 8px; justify-content: flex-end; }
.idle-modal .countdown { font-family: var(--font-mono); color: var(--warn); }

/* ===== Price Sheet — financial cost-buildup view =====
   KPI strip + cost-buildup table + composition bar + per-process detail. */

.kpi-card .card-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.kpi-card .kpi-label {
    font-size: var(--fs-small);
    color: var(--orago-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 500;
}
.kpi-card .kpi-value {
    font-size: 26px;
    font-weight: 600;
    line-height: 1.1;
    color: var(--orago-text);
}
.kpi-card .kpi-unit {
    font-size: 16px;
    margin-left: 2px;
    color: var(--orago-text-muted);
    font-weight: 500;
}
.kpi-card .kpi-foot {
    font-size: var(--fs-small);
    color: var(--orago-text-muted);
}

/* Price-sheet incremental buildup table.
   Differs from generic .grid in two ways: subtotal rows get a top border
   (visual subtotaling), and the final selling-price row gets a double
   border — typical financial-statement convention. */
.grid.pricesheet td {
    padding: 8px 12px;
    border-top: 1px solid var(--orago-border);
}
.grid.pricesheet tr:first-child td { border-top: 0; }
.grid.pricesheet tr.subtotal td {
    border-top: 1px solid var(--orago-border);
    background: var(--orago-subtle, var(--orago-surface));
}
.grid.pricesheet tr.total-row td {
    border-top: 2px solid var(--orago-text);
    background: var(--orago-subtle, var(--orago-surface));
    font-size: 14px;
}
.grid.pricesheet tr.total-row.final td {
    border-top: 3px double var(--orago-text);
    border-bottom: 3px double var(--orago-text);
}
.grid.pricesheet tr.emph td { font-weight: 500; }
.grid.pricesheet tr.separator td {
    height: 8px;
    border-top: 0;
    padding: 0;
}
.grid.pricesheet tr.footnote td {
    color: var(--orago-text-muted);
    font-size: var(--fs-small);
    font-style: italic;
}

/* Stacked horizontal composition bar — material/labour/overhead split.
   Reuses the existing --viz-* tokens (kept in line with KpiRow visuals
   so the visual vocabulary stays consistent across pages). */
.composition-bar {
    display: flex;
    width: 100%;
    height: 28px;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--orago-border);
    margin-bottom: 12px;
}
.composition-bar .seg {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: var(--fs-small);
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
}
.composition-bar .seg.material { background: var(--viz-1); }
.composition-bar .seg.labour   { background: var(--viz-2); }
.composition-bar .seg.overhead { background: var(--viz-3); }
.composition-bar .seg .seg-label { padding: 0 6px; }

.composition-legend {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: var(--fs-small);
}
.composition-legend .dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    margin-right: 6px;
    vertical-align: middle;
}
.composition-legend .dot.material { background: var(--viz-1); }
.composition-legend .dot.labour   { background: var(--viz-2); }
.composition-legend .dot.overhead { background: var(--viz-3); }

/* Tooling-billed callout under the composition card. Customer-funded amount
   is conceptually separate from per-unit cost so it gets its own visual
   treatment — accent-warn border, muted background. */
.callout {
    margin-top: 14px;
    padding: 10px 12px;
    border-left: 3px solid var(--warn, var(--viz-4));
    background: var(--orago-subtle, transparent);
    border-radius: 0 var(--radius) var(--radius) 0;
}
.callout .callout-label {
    font-size: var(--fs-small);
    color: var(--orago-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 500;
}
.callout .callout-value {
    font-size: 18px;
    font-weight: 600;
    margin: 2px 0;
}
.callout .callout-sub {
    font-size: var(--fs-small);
    color: var(--orago-text-muted);
}