/* ============================================================
   DS  —  Design System (V2: aligned with app theming)
   When data-theme is set, tokens map to DaisyUI theme variables
   for consistency with valentine, hacker, dark, etc.
   ============================================================ */

/* ----- 0. TYPOGRAPHY (self-hosted) ----- */
@font-face {
    font-family: 'Comet Sans';
    src: url('/static/fonts/CometSans-Variable.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Comet Sans';
    src: url('/static/fonts/CometSans-Italic-Variable.ttf') format('truetype');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Comet Mono';
    src: url('/static/fonts/CometMono-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Comet Mono';
    src: url('/static/fonts/CometMono-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ----- 0. THEME ALIGNMENT (V2) ----- */
/* Map DS tokens to current DaisyUI theme so beta view matches app theme */
#theme-root[data-theme],
html[data-theme],
.theme-preview-scope[data-theme] {
    /* Surfaces ← base */
    --ds-bg-0:       oklch(var(--b1));
    --ds-bg-1:       color-mix(in oklch, oklch(var(--b1)) 94%, oklch(var(--b2)));
    --ds-bg-2:       color-mix(in oklch, oklch(var(--b2)) 88%, oklch(var(--b1)));
    --ds-bg-3:       color-mix(in oklch, oklch(var(--b3)) 82%, oklch(var(--b2)));
    --ds-bg-overlay: oklch(var(--bc) / 0.28);

    /* Borders */
    --ds-border:      color-mix(in oklch, oklch(var(--bc)) 14%, oklch(var(--b1)));
    --ds-border-hover:oklch(var(--bc) / 0.24);
    --ds-border-focus:oklch(var(--p));

    /* Text ← base-content */
    --ds-text-0:     oklch(var(--bc));
    --ds-text-1:     oklch(var(--bc));
    --ds-text-2:     oklch(var(--bc) / 0.85);
    --ds-text-3:     oklch(var(--bc) / 0.6);

    /* Primary accent ← theme primary (DaisyUI 4 has no --pf; use --p) */
    --ds-accent:       oklch(var(--p));
    --ds-accent-hover: color-mix(in oklch, oklch(var(--p)) 82%, oklch(var(--bc)));
    --ds-accent-muted: oklch(var(--p) / 0.14);

    /* Accent palette (semantic from theme) */
    --ds-crimson:      oklch(var(--er));
    --ds-crimson-muted:oklch(var(--er) / 0.14);
    --ds-turquoise:    oklch(var(--su));
    --ds-turquoise-muted:oklch(var(--su) / 0.14);
    --ds-blood-orange: oklch(var(--wa));
    --ds-blood-orange-muted:oklch(var(--wa) / 0.14);
    --ds-magenta:      oklch(var(--in));
    --ds-magenta-muted:oklch(var(--in) / 0.14);
    --ds-yellow:       oklch(var(--wa));
    --ds-yellow-muted: oklch(var(--wa) / 0.14);

    /* Semantic */
    --ds-success:  oklch(var(--su));
    --ds-warning:  oklch(var(--wa));
    --ds-danger:   oklch(var(--er));
    --ds-info:     oklch(var(--in));

    /* Radius — respect theme (e.g. hacker = 0, others = default) */
    --ds-radius-sm: var(--radius-field, 4px);
    --ds-radius-md: var(--radius-box, 6px);
    --ds-radius-lg: var(--radius-box, 8px);
    --ds-radius: var(--ds-radius-md);
    --ds-shadow: var(--ds-shadow-md);

    /* Typography — inherit theme font when set (e.g. hacker uses monospace) */
    --ds-font: var(--font-family, 'Comet Sans'), system-ui, -apple-system, sans-serif;
    --ds-font-heading: var(--font-family-heading, 'Comet Sans'), var(--ds-font);
    --ds-font-mono: 'Comet Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* When a theme is active, beta DS views inherit font (and thus color) from the root so theme choice is respected */
#theme-root[data-theme] .ds-page,
#theme-root[data-theme] .ds-page h1,
#theme-root[data-theme] .ds-page h2,
#theme-root[data-theme] .ds-page h3,
#theme-root[data-theme] .ds-page h4,
.theme-preview-scope[data-theme],
.theme-preview-scope[data-theme] h1,
.theme-preview-scope[data-theme] h2,
.theme-preview-scope[data-theme] h3,
.theme-preview-scope[data-theme] h4 {
    font-family: inherit;
}

/* ----- 1. DESIGN TOKENS (fallback when no data-theme) ----- */
:root {
    /* Surfaces */
    --ds-bg-0:       #f6f7f8;   /* page background */
    --ds-bg-1:       #ffffff;   /* card / raised surface */
    --ds-bg-2:       #f8fafb;   /* elevated surface / hover */
    --ds-bg-3:       #f1f4f7;   /* input background */
    --ds-bg-overlay: rgba(15, 23, 42, .34);

    /* Borders */
    --ds-border:      #e2e8f0;
    --ds-border-hover:#cbd5e1;
    --ds-border-focus:#0ea5a4;

    /* Text */
    --ds-text-0: #0f172a;      /* headings, primary */
    --ds-text-1: #1f2937;      /* body */
    --ds-text-2: #475569;      /* secondary / labels */
    --ds-text-3: #64748b;      /* muted / placeholder */

    /* Primary accent – Teal/Cyan */
    --ds-accent:       #0f766e;
    --ds-accent-hover: #0e9f95;
    --ds-accent-muted: rgba(15, 118, 110, .14);

    /* Accent palette */
    --ds-crimson:      #dc2626;
    --ds-crimson-muted:rgba(220,38,38,.14);
    --ds-turquoise:    #14b8a6;
    --ds-turquoise-muted:rgba(20,184,166,.14);
    --ds-blood-orange: #ea580c;
    --ds-blood-orange-muted:rgba(234,88,12,.14);
    --ds-magenta:      #d946ef;
    --ds-magenta-muted:rgba(217,70,239,.14);
    --ds-yellow:       #eab308;
    --ds-yellow-muted: rgba(234,179,8,.14);

    /* Semantic (map to accent palette where appropriate) */
    --ds-success:  #0f766e;
    --ds-warning:  #ca8a04;
    --ds-danger:   #dc2626;
    --ds-info:     #0369a1;

    /* Spacing — 4px grid */
    --ds-sp-1: 4px;
    --ds-sp-2: 8px;
    --ds-sp-3: 12px;
    --ds-sp-4: 16px;
    --ds-sp-5: 20px;
    --ds-sp-6: 24px;
    --ds-sp-8: 32px;
    --ds-sp-10: 40px;

    /* Radius */
    --ds-radius-sm: 4px;
    --ds-radius-md: 6px;
    --ds-radius-lg: 8px;
    --ds-radius: var(--ds-radius-md);

    /* Shadow */
    --ds-shadow-sm: 0 1px 2px rgba(2, 6, 23, .04);
    --ds-shadow-md: 0 2px 12px rgba(2, 6, 23, .06);
    --ds-shadow-lg: 0 14px 28px rgba(2, 6, 23, .12);
    --ds-shadow: var(--ds-shadow-md);

    /* Transitions */
    --ds-ease: cubic-bezier(.22,1,.36,1);
    --ds-ease-spring: cubic-bezier(.175,.885,.32,1.18);
    --ds-dur-fast: 120ms;
    --ds-dur-norm: 180ms;
    --ds-dur-slow: 280ms;

    /* Typography */
    --ds-font: 'Comet Sans', system-ui, -apple-system, sans-serif;
    --ds-font-heading: 'Comet Sans', system-ui, -apple-system, sans-serif;
    --ds-font-mono: 'Comet Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --ds-text-xs:  11px;
    --ds-text-sm:  12px;
    --ds-text-base:13px;
    --ds-text-md:  14px;
    --ds-text-lg:  16px;
    --ds-text-xl:  18px;
    --ds-text-2xl: 22px;
    --ds-lh: 1.5;

    /* Z-index scale */
    --ds-z-panel:  100;
    --ds-z-modal:  200;
    --ds-z-overlay:199;
}


/* ----- 2. RESET (scoped to ds-page) ----- */
.ds-page *,
.ds-page *::before,
.ds-page *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.ds-page {
    font-family: var(--ds-font);
    font-size: var(--ds-text-base);
    line-height: var(--ds-lh);
    color: var(--ds-text-1);
    -webkit-font-smoothing: antialiased;
}

.ds-page h1, .ds-page h2, .ds-page h3, .ds-page h4 {
    font-family: var(--ds-font-heading);
    color: var(--ds-text-0);
    font-weight: 600;
    line-height: 1.25;
}

.ds-page h1 { font-size: var(--ds-text-2xl); }
.ds-page h2 { font-size: var(--ds-text-xl); }
.ds-page h3 { font-size: var(--ds-text-lg); }
.ds-page h4 { font-size: var(--ds-text-md); }


/* ----- 3. LAYOUT PRIMITIVES ----- */

/* Full-page wrapper — fills the .content area from base.html.
   Override the parent .content padding so we control spacing ourselves. */
.content:has(> .ds-page) { padding: 0; }
.ds-page {
    padding: var(--ds-sp-5);
    min-height: 0;
    flex: 1;
}

/* Vertical stack with configurable gap */
.ds-stack        { display: flex; flex-direction: column; gap: var(--ds-sp-4); }
.ds-stack--tight { gap: var(--ds-sp-2); }
.ds-stack--loose { gap: var(--ds-sp-6); }

/* Horizontal toolbar row */
.ds-toolbar {
    display: flex;
    align-items: center;
    gap: var(--ds-sp-3);
    flex-wrap: wrap;
}
.ds-toolbar--between { justify-content: space-between; }
.ds-toolbar__spacer  { flex: 1; min-width: var(--ds-sp-4); }

/* Split layout: main + side panel. Panel pushes content left (never overlaps). */
.ds-split {
    display: flex;
    flex-direction: row;
    gap: 0;
    min-height: 0;
    flex: 1;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}
.ds-split__main {
    flex: 1 1 0%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ds-sp-4);
    overflow: hidden;
}
.ds-split__aside {
    /* side panel — starts hidden, when open takes space and shifts main left */
    width: 0;
    min-width: 0;
    overflow: hidden;
    transition: width var(--ds-dur-slow) var(--ds-ease);
    flex-shrink: 0;
}
.ds-split__aside.is-open {
    width: min(720px, 45vw);
    min-width: 400px;
    border-left: 1px solid var(--ds-border);
}
@media (max-width: 1400px) {
    .ds-split__aside.is-open { width: 420px; min-width: 380px; }
}
@media (max-width: 768px) {
    .ds-split__aside.is-open { width: 100%; min-width: unset; position: fixed; right: 0; top: 0; bottom: 0; z-index: var(--ds-z-panel); }
}


/* ----- 4. COMPONENTS ----- */

/* --- 4a. Card --- */
.ds-card {
    background: var(--ds-bg-1);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    padding: var(--ds-sp-4);
}
.ds-card--flush { padding: 0; }
.ds-card--compact { padding: var(--ds-sp-3); }
.ds-card--panel {
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--ds-bg-1) 88%, var(--ds-accent-muted)),
            var(--ds-bg-1));
    border-color: color-mix(in srgb, var(--ds-border) 78%, var(--ds-accent) 22%);
    box-shadow: var(--ds-shadow-sm);
}
.ds-card--chrome {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.ds-card--chrome::before {
    content: "";
    position: absolute;
    inset: -28% auto auto -14%;
    width: 220px;
    height: 220px;
    border-radius: 999px;
    background:
        radial-gradient(circle,
            color-mix(in srgb, var(--ds-accent) 16%, transparent) 0%,
            transparent 72%);
    pointer-events: none;
    z-index: -1;
}

/* --- 4b. Data Table --- */
.ds-table-wrap {
    overflow: auto;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    background: var(--ds-bg-1);
    flex: 1;
    min-height: 0;
}

.ds-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--ds-text-sm);
}
.ds-table th,
.ds-table td {
    padding: var(--ds-sp-2) var(--ds-sp-3);
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid var(--ds-border);
}
.ds-table th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--ds-bg-2);
    color: var(--ds-text-2);
    font-weight: 600;
    font-size: var(--ds-text-xs);
    text-transform: uppercase;
    letter-spacing: .04em;
    user-select: none;
}
.ds-table th.sortable { cursor: pointer; }
.ds-table th.sortable:hover { color: var(--ds-text-0); }
.ds-table th .sort-icon { margin-left: 4px; opacity: .4; font-size: 10px; }
.ds-table th.sorted .sort-icon { opacity: 1; color: var(--ds-accent); }

.ds-table tbody tr {
    transition: background var(--ds-dur-fast) var(--ds-ease);
}
.ds-table tbody tr:hover {
    background: var(--ds-bg-2);
}
.ds-table tbody tr.is-selected {
    background: var(--ds-accent-muted);
}
.ds-table tbody tr:last-child td { border-bottom: none; }

.ds-table td.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--ds-font-mono); font-size: var(--ds-text-xs); }
.ds-table td.wrap { white-space: normal; max-width: 250px; }
.ds-table td.actions { text-align: right; white-space: nowrap; }

/* Dense table: tighter padding, smaller text */
.ds-table--dense th,
.ds-table--dense td { padding: var(--ds-sp-1) var(--ds-sp-2); font-size: var(--ds-text-xs); }
.ds-table--dense .ds-mono { font-size: var(--ds-text-xs); }

.ds-text-danger { color: var(--ds-danger); }
.ds-text-2 { color: var(--ds-text-2); }

/* Clickable row */
.ds-table tbody tr.clickable { cursor: pointer; }

/* --- 4c. Badge --- */
.ds-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    font-size: var(--ds-text-xs);
    font-weight: 500;
    border-radius: 999px;
    border: 1px solid transparent;
    line-height: 1.45;
    white-space: nowrap;
    vertical-align: middle;
}
.ds-badge--default  { background: var(--ds-bg-2); color: var(--ds-text-2); border-color: var(--ds-border); }
.ds-badge--accent   { background: var(--ds-accent-muted); color: var(--ds-accent); border-color: color-mix(in srgb, var(--ds-accent) 26%, transparent); }
.ds-badge--success  { background: color-mix(in srgb, var(--ds-success) 12%, transparent); color: var(--ds-success); border-color: color-mix(in srgb, var(--ds-success) 28%, transparent); }
.ds-badge--warning  { background: color-mix(in srgb, var(--ds-warning) 14%, transparent); color: var(--ds-warning); border-color: color-mix(in srgb, var(--ds-warning) 30%, transparent); }
.ds-badge--danger   { background: color-mix(in srgb, var(--ds-danger) 12%, transparent); color: var(--ds-danger); border-color: color-mix(in srgb, var(--ds-danger) 28%, transparent); }
.ds-badge--info     { background: color-mix(in srgb, var(--ds-info) 12%, transparent);  color: var(--ds-info); border-color: color-mix(in srgb, var(--ds-info) 28%, transparent); }
/* Accent palette badges */
.ds-badge--crimson      { background: var(--ds-crimson-muted); color: #f87171; }
.ds-badge--turquoise    { background: var(--ds-turquoise-muted); color: #2dd4bf; }
.ds-badge--blood-orange { background: var(--ds-blood-orange-muted); color: #fb923c; }
.ds-badge--magenta      { background: var(--ds-magenta-muted); color: #e879f9; }
.ds-badge--yellow       { background: var(--ds-yellow-muted); color: #facc15; }

/* --- 4d. Buttons --- */
.ds-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 5px 12px;
    font-family: var(--ds-font);
    font-size: var(--ds-text-sm);
    font-weight: 500;
    line-height: 1.4;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    cursor: pointer;
    transition: background var(--ds-dur-fast) var(--ds-ease), border-color var(--ds-dur-fast) var(--ds-ease), color var(--ds-dur-fast) var(--ds-ease), transform var(--ds-dur-fast) var(--ds-ease-spring), box-shadow var(--ds-dur-fast) var(--ds-ease);
    white-space: nowrap;
    text-decoration: none;
    color: var(--ds-text-1);
    background: var(--ds-bg-1);
    box-shadow: var(--ds-shadow-sm);
}
.ds-btn:hover {
    background: var(--ds-bg-2);
    color: var(--ds-text-0);
    border-color: var(--ds-border-hover);
}
.ds-btn:active { transform: scale(.98); }
.ds-btn:disabled { opacity: .4; pointer-events: none; }
.ds-btn i { font-size: 12px; }

.ds-btn--primary {
    background: var(--ds-accent);
    color: #fff;
    border-color: var(--ds-accent);
    box-shadow: none;
}
.ds-btn--primary:hover { background: var(--ds-accent-hover); border-color: var(--ds-accent-hover); color: #fff; }

.ds-btn--ghost {
    background: transparent;
    color: var(--ds-text-2);
    border-color: var(--ds-border);
    box-shadow: none;
}
.ds-btn--ghost:hover { background: var(--ds-bg-2); color: var(--ds-text-0); border-color: var(--ds-border-hover); }

.ds-btn--danger {
    background: color-mix(in srgb, var(--ds-danger) 10%, transparent);
    color: var(--ds-danger);
    border-color: color-mix(in srgb, var(--ds-danger) 30%, transparent);
    box-shadow: none;
}
.ds-btn--danger:hover { background: color-mix(in srgb, var(--ds-danger) 14%, transparent); }

.ds-btn--sm { padding: 3px 8px; font-size: var(--ds-text-xs); }
.ds-btn--lg { padding: 8px 20px; font-size: var(--ds-text-md); }

/* Icon-only button */
.ds-btn--icon {
    padding: 5px;
    width: 28px;
    height: 28px;
}

.ds-pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-sp-1);
}

.ds-meta-stack {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ds-meta-kicker {
    color: var(--ds-text-3);
    font-size: var(--ds-text-xs);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 600;
}

.ds-motion-rise {
    animation: ds-rise-in var(--ds-dur-slow) var(--ds-ease) both;
}

.ds-motion-delay-1 { animation-delay: 60ms; }
.ds-motion-delay-2 { animation-delay: 120ms; }
.ds-motion-delay-3 { animation-delay: 180ms; }
.ds-motion-delay-4 { animation-delay: 240ms; }

/* --- 4e. Inputs --- */
.ds-input,
.ds-select {
    font-family: var(--ds-font);
    font-size: var(--ds-text-sm);
    line-height: 1.4;
    color: var(--ds-text-1);
    background: var(--ds-bg-1);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    padding: 5px 10px;
    transition: border-color var(--ds-dur-fast) var(--ds-ease);
    outline: none;
}
.ds-input:focus,
.ds-select:focus {
    border-color: var(--ds-border-focus);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-border-focus) 22%, transparent);
}
.ds-input::placeholder { color: var(--ds-text-3); }
.ds-input--search {
    padding-left: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364758b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 8px center;
}
.ds-select {
    appearance: none;
    padding-right: 28px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364758b' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    cursor: pointer;
}
.ds-select option { background: var(--ds-bg-1); color: var(--ds-text-1); }

/* --- 4e2. Overlay menus (dropdowns / popovers / FAB speed-dial) ---
   Contract: surface = --ds-bg-1, text = --ds-text-0/--ds-text-1,
   hover/focus = --ds-bg-2 + --ds-text-0. Never hardcode #fff/#000 for
   menu chrome — theme tokens keep contrast on dark and light themes. */
.ds-overlay-menu,
.ds-menu {
    background: var(--ds-bg-1);
    color: var(--ds-text-1);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    box-shadow: var(--ds-shadow-md);
    color-scheme: inherit;
}
.ds-overlay-menu__item,
.ds-menu__item {
    display: block;
    width: 100%;
    padding: var(--ds-sp-2);
    border: none;
    border-radius: var(--ds-radius-sm);
    background: transparent;
    color: var(--ds-text-1);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.ds-overlay-menu__item:hover,
.ds-overlay-menu__item:focus,
.ds-overlay-menu__item:focus-visible,
.ds-menu__item:hover,
.ds-menu__item:focus,
.ds-menu__item:focus-visible {
    background: var(--ds-bg-2);
    color: var(--ds-text-0);
    outline: none;
}

/* DaisyUI dropdown/menu shells: keep surface+content paired to theme */
#theme-root[data-theme] .dropdown-content.menu,
#theme-root[data-theme] ul.menu.dropdown-content,
#theme-root[data-theme] .dropdown-content.bg-base-100 {
    background-color: oklch(var(--b1));
    color: oklch(var(--bc));
}
#theme-root[data-theme] .dropdown-content.menu > li > a,
#theme-root[data-theme] .dropdown-content.menu > li > button,
#theme-root[data-theme] ul.menu.dropdown-content > li > a,
#theme-root[data-theme] ul.menu.dropdown-content > li > button {
    color: oklch(var(--bc));
}
#theme-root[data-theme] .dropdown-content.menu > li > a:hover,
#theme-root[data-theme] .dropdown-content.menu > li > a:focus,
#theme-root[data-theme] .dropdown-content.menu > li > button:hover,
#theme-root[data-theme] .dropdown-content.menu > li > button:focus,
#theme-root[data-theme] ul.menu.dropdown-content > li > a:hover,
#theme-root[data-theme] ul.menu.dropdown-content > li > a:focus,
#theme-root[data-theme] ul.menu.dropdown-content > li > button:hover,
#theme-root[data-theme] ul.menu.dropdown-content > li > button:focus {
    background-color: oklch(var(--b2));
    color: oklch(var(--bc));
}

.ds-label {
    font-size: var(--ds-text-xs);
    font-weight: 500;
    color: var(--ds-text-2);
    text-transform: uppercase;
    letter-spacing: .03em;
}
.ds-field {
    display: flex;
    flex-direction: column;
    gap: var(--ds-sp-1);
}

/* Checkbox / toggle */
.ds-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--ds-text-sm);
    color: var(--ds-text-1);
    cursor: pointer;
}
.ds-checkbox input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: var(--ds-accent);
    cursor: pointer;
}

/* --- 4f. Stats --- */
.ds-stat {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-size: var(--ds-text-sm);
}
.ds-stat__label { color: var(--ds-text-3); }
.ds-stat__value { color: var(--ds-text-0); font-weight: 600; font-variant-numeric: tabular-nums; }

.ds-stat-row {
    display: flex;
    align-items: center;
    gap: var(--ds-sp-5);
    padding: var(--ds-sp-2) 0;
    font-size: var(--ds-text-sm);
    color: var(--ds-text-2);
    border-bottom: 1px solid var(--ds-border);
}

/* --- 4g. Filter Bar --- */
.ds-filter-bar {
    display: flex;
    align-items: center;
    gap: var(--ds-sp-2);
    padding: var(--ds-sp-3);
    background: var(--ds-bg-1);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    flex-wrap: wrap;
}
.ds-filter-bar__group {
    display: flex;
    align-items: center;
    gap: var(--ds-sp-2);
}
.ds-filter-bar__sep {
    width: 1px;
    height: 20px;
    background: var(--ds-border);
    flex-shrink: 0;
}
.ds-filter-bar__spacer { flex: 1; min-width: var(--ds-sp-2); }

/* --- 4h. Modal --- */
.ds-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--ds-bg-overlay);
    z-index: var(--ds-z-overlay);
    animation: ds-fadeIn var(--ds-dur-fast) var(--ds-ease);
}
.ds-overlay.is-open { display: block; }

.ds-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(.97);
    z-index: var(--ds-z-modal);
    background: var(--ds-bg-1);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
    box-shadow: var(--ds-shadow-lg);
    width: min(90vw, 720px);
    max-height: 85vh;
    display: none;
    flex-direction: column;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--ds-dur-norm) var(--ds-ease), transform var(--ds-dur-norm) var(--ds-ease);
}
.ds-modal.is-open {
    display: flex;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: auto;
}

/* <dialog> variant — browsers use [open] instead of .is-open */
dialog.ds-modal {
    padding: 0;
    border: none;
    background: transparent;
    position: fixed;
    inset: 0;
    top: auto;
    left: auto;
    margin: 0;
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    transform: none;
    display: none;
    overflow: hidden;
    box-sizing: border-box;
}
dialog.ds-modal[open] {
    display: grid;
    place-items: center;
    padding: clamp(16px, 3vw, 32px);
    opacity: 1;
    pointer-events: auto;
}
dialog.ds-modal::backdrop {
    background: var(--ds-bg-overlay);
    backdrop-filter: blur(2px);
}
/* Inner container when using <dialog> */
.ds-modal__box {
    display: flex;
    flex-direction: column;
    background: var(--ds-bg-1);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
    box-shadow: var(--ds-shadow-lg);
    width: min(90vw, 720px);
    max-width: 100%;
    max-height: 85vh;
    min-width: 0; /* allow flex child to shrink below content size */
    overflow: hidden;
    animation: ds-modal-in var(--ds-dur-norm) var(--ds-ease-spring);
    color: var(--ds-text-1);
    box-sizing: border-box;
    margin: auto;
}
.ds-modal__box input,
.ds-modal__box textarea,
.ds-modal__box select {
    color: var(--ds-text-1);
    background: var(--ds-bg-1);
    border-color: var(--ds-border);
}
.ds-modal__box input::placeholder,
.ds-modal__box textarea::placeholder {
    color: var(--ds-text-3);
}
@keyframes ds-modal-in {
    from { opacity: 0; transform: scale(.96) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
.ds-modal__header, .ds-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--ds-sp-4) var(--ds-sp-5);
    border-bottom: 1px solid var(--ds-border);
    flex-shrink: 0;
}
.ds-modal__header h2, .ds-modal__header h3,
.ds-modal__head h2, .ds-modal__head h3 {
    font-size: var(--ds-text-lg);
    margin: 0;
    color: var(--ds-text-0);
}
.ds-modal__body {
    flex: 1;
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: var(--ds-sp-5);
    box-sizing: border-box;
}
.ds-modal__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--ds-sp-2);
    padding: var(--ds-sp-3) var(--ds-sp-5);
    border-top: 1px solid var(--ds-border);
    flex-shrink: 0;
}
.ds-modal__close {
    background: none;
    border: none;
    color: var(--ds-text-3);
    font-size: 18px;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    transition: color var(--ds-dur-fast);
}
.ds-modal__close:hover { color: var(--ds-text-0); }

/* Wide variant */
.ds-modal--wide { width: min(94vw, 960px); }

/* Small modal (e.g. approve/reject) */
.ds-modal__box--sm {
    width: min(90vw, 420px);
    max-width: min(90vw, 420px);
}

/* Invoice beta modals: prevent horizontal scroll, contain content */
.ds-modal--invoice .ds-modal__box {
    width: min(92vw, 460px);
    max-width: min(92vw, 460px);
}
.ds-modal--invoice .ds-modal__body {
    padding: var(--ds-sp-4);
}
.ds-modal--invoice .ds-modal__body .ds-field,
.ds-modal--invoice .ds-modal__body input,
.ds-modal--invoice .ds-modal__body textarea,
.ds-modal--invoice .ds-modal__body select {
    max-width: 100%;
    box-sizing: border-box;
}

/* Form wraps body + footer so submit is in footer */
.ds-modal__form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Backdrop transition for native dialog */
dialog.ds-modal::backdrop {
    transition: opacity var(--ds-dur-norm) var(--ds-ease);
}

/* --- 4i. Side Panel --- */
.ds-panel {
    display: flex;
    flex-direction: column;
    background: var(--ds-bg-1);
    height: 100%;
    overflow: hidden;
}
.ds-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--ds-sp-4) var(--ds-sp-5);
    border-bottom: 1px solid var(--ds-border);
    flex-shrink: 0;
    gap: var(--ds-sp-3);
}
.ds-panel__body {
    flex: 1;
    overflow-y: auto;
    padding: var(--ds-sp-5);
    min-width: 0;
}
.ds-panel__section {
    padding-bottom: var(--ds-sp-4);
    margin-bottom: var(--ds-sp-4);
    border-bottom: 1px solid var(--ds-border);
}
.ds-panel__section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.ds-panel__section h4 {
    font-size: var(--ds-text-sm);
    color: var(--ds-text-2);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: var(--ds-sp-3);
}

/* Info grid inside panel – single column on wide panels for readability */
.ds-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ds-sp-3) var(--ds-sp-6);
}
.ds-panel__body .ds-info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ds-info-item { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ds-info-item__label { font-size: var(--ds-text-xs); color: var(--ds-text-3); }
.ds-info-item__value { font-size: var(--ds-text-sm); color: var(--ds-text-0); word-break: break-word; }

/* Tables inside panel – let them use full width */
.ds-panel__body .ds-table-wrap { max-height: 280px; margin-top: var(--ds-sp-2); }
.ds-panel__body .ds-table td.wrap { max-width: none; white-space: normal; }

/* --- 4j. Empty State --- */
.ds-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--ds-sp-3);
    padding: var(--ds-sp-10) var(--ds-sp-6);
    color: var(--ds-text-3);
    text-align: center;
}
.ds-empty__icon { font-size: 32px; opacity: .5; }
.ds-empty__title { font-size: var(--ds-text-md); color: var(--ds-text-2); font-weight: 500; }
.ds-empty__desc  { font-size: var(--ds-text-sm); max-width: 300px; }

/* --- 4k. Callout --- */
.ds-callout {
    display: flex;
    flex-direction: column;
    gap: var(--ds-sp-1);
    padding: var(--ds-sp-3) var(--ds-sp-4);
    border: 1px solid var(--ds-border);
    border-left-width: 3px;
    border-radius: var(--ds-radius-md);
    background: var(--ds-bg-1);
    color: var(--ds-text-1);
}
.ds-callout--info {
    border-color: color-mix(in srgb, var(--ds-info) 24%, transparent);
    border-left-color: var(--ds-info);
    background: color-mix(in srgb, var(--ds-info) 8%, var(--ds-bg-1));
}
.ds-callout--success {
    border-color: color-mix(in srgb, var(--ds-success) 24%, transparent);
    border-left-color: var(--ds-success);
    background: color-mix(in srgb, var(--ds-success) 8%, var(--ds-bg-1));
}
.ds-callout--warning {
    border-color: color-mix(in srgb, var(--ds-warning) 24%, transparent);
    border-left-color: var(--ds-warning);
    background: color-mix(in srgb, var(--ds-warning) 8%, var(--ds-bg-1));
}
.ds-callout--danger {
    border-color: color-mix(in srgb, var(--ds-danger) 24%, transparent);
    border-left-color: var(--ds-danger);
    background: color-mix(in srgb, var(--ds-danger) 8%, var(--ds-bg-1));
}
.ds-callout__title {
    color: var(--ds-text-0);
    font-weight: 600;
}
.ds-callout__body {
    color: var(--ds-text-2);
    font-size: var(--ds-text-sm);
}

/* --- 4l. Code Block --- */
.ds-code-block {
    margin: 0;
    padding: var(--ds-sp-3);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    background: var(--ds-bg-2);
    color: var(--ds-text-1);
    font-family: var(--ds-font-mono);
    font-size: var(--ds-text-xs);
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
    overflow: auto;
}

/* --- 4m. Spinner --- */
.ds-spinner {
    width: 14px;
    height: 14px;
    border-radius: 999px;
    border: 2px solid color-mix(in srgb, var(--ds-accent) 18%, transparent);
    border-top-color: var(--ds-accent);
    animation: ds-spin .7s linear infinite;
    flex-shrink: 0;
}
@keyframes ds-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ----- 5. UTILITIES ----- */
.ds-hidden     { display: none !important; }
.ds-truncate   { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-mono       { font-family: var(--ds-font-mono); font-size: var(--ds-text-xs); }
.ds-muted      { color: var(--ds-text-3); }
.ds-text-0     { color: var(--ds-text-0); }
.ds-text-1     { color: var(--ds-text-1); }
.ds-text-2     { color: var(--ds-text-2); }
.ds-text-3     { color: var(--ds-text-3); }
.ds-accent     { color: var(--ds-accent); }
.ds-crimson    { color: var(--ds-crimson); }
.ds-turquoise  { color: var(--ds-turquoise); }
.ds-blood-orange { color: var(--ds-blood-orange); }
.ds-magenta    { color: var(--ds-magenta); }
.ds-yellow     { color: var(--ds-yellow); }
.ds-text-right { text-align: right; }
.ds-text-center{ text-align: center; }
.ds-nowrap     { white-space: nowrap; }

.ds-flex       { display: flex; }
.ds-flex-col   { display: flex; flex-direction: column; }
.ds-flex-1     { flex: 1; min-width: 0; }
.ds-items-center { align-items: center; }
.ds-justify-between { justify-content: space-between; }
.ds-flex-wrap  { flex-wrap: wrap; }

.ds-gap-1 { gap: var(--ds-sp-1); }
.ds-gap-2 { gap: var(--ds-sp-2); }
.ds-gap-3 { gap: var(--ds-sp-3); }
.ds-gap-4 { gap: var(--ds-sp-4); }
.ds-gap-5 { gap: var(--ds-sp-5); }
.ds-gap-6 { gap: var(--ds-sp-6); }

.ds-w-full { width: 100%; }
.ds-shrink-0 { flex-shrink: 0; }

/* Progress bar */
.ds-progress { width: 100%; height: 4px; background: var(--ds-bg-3); border-radius: 2px; overflow: hidden; }
.ds-progress__bar { height: 100%; background: var(--ds-accent); border-radius: 2px; transition: width var(--ds-dur-norm) var(--ds-ease); }
.ds-progress__bar.is-success { background: var(--ds-success); }
.ds-progress__bar.is-danger { background: var(--ds-danger); }

/* Divider */
.ds-divider { height: 1px; background: var(--ds-border); width: 100%; }

/* Scrollbar styling inside ds-page */
.ds-page ::-webkit-scrollbar { width: 6px; height: 6px; }
.ds-page ::-webkit-scrollbar-track { background: transparent; }
.ds-page ::-webkit-scrollbar-thumb { background: var(--ds-border-hover); border-radius: 3px; }
.ds-page ::-webkit-scrollbar-thumb:hover { background: var(--ds-text-3); }

/* Keyframes */
@keyframes ds-fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes ds-slideInRight {
    from { transform: translateX(20px); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}
@keyframes ds-rise-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ds-motion-rise {
        animation: none;
    }
}


/* ----- 6. DOCK NAV ----- */

/* Shell override — stack vertically, content above dock */
.app-shell--dock {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
}
.app-shell--dock > .app-main {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
.app-shell--dock > .app-main > .content {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    padding: var(--ds-sp-5);
}

/* The dock bar itself */
.ds-dock {
    position: sticky;
    bottom: 0;
    z-index: 900;
    background: var(--ds-bg-1);
    border-top: 1px solid var(--ds-border);
    padding: var(--ds-sp-1) var(--ds-sp-2);
    flex-shrink: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;                /* Firefox */
}
.ds-dock::-webkit-scrollbar { display: none; }   /* Webkit  */

.ds-dock__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ds-sp-1);
    width: max-content;
    min-width: 100%;
}

/* Separator pip */
.ds-dock__sep {
    width: 1px;
    height: 28px;
    background: var(--ds-border);
    flex-shrink: 0;
    margin: 0 var(--ds-sp-1);
}

/* Individual dock item */
.ds-dock__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: var(--ds-sp-1) var(--ds-sp-2);
    border-radius: var(--ds-radius-md);
    color: var(--ds-text-3);
    text-decoration: none;
    font-size: var(--ds-text-xs);
    font-weight: 500;
    font-family: var(--ds-font);
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    border: none;
    background: none;
    transition: color var(--ds-dur-fast) var(--ds-ease),
                background var(--ds-dur-fast) var(--ds-ease);
    min-width: 52px;
    user-select: none;
    -webkit-user-select: none;
}
.ds-dock__item i { font-size: 16px; }
.ds-dock__item span { font-size: 10px; letter-spacing: .01em; }

.ds-dock__item:hover {
    color: var(--ds-text-1);
    background: var(--ds-bg-2);
}
.ds-dock__item.is-active {
    color: var(--ds-accent);
    background: var(--ds-accent-muted);
}

/* On very small screens, shrink a tiny bit */
@media (max-width: 640px) {
    .ds-dock__item { min-width: 44px; padding: var(--ds-sp-1) var(--ds-sp-1); }
    .ds-dock__item span { display: none; }
}

/* ----- 7. PAGE-SPECIFIC: Work Ticket Viewer ----- */

/* Date inputs follow the active theme (avoid forced dark chrome on light themes) */
.ds-page input[type="date"] {
    color-scheme: inherit;
}

/* Quick-date buttons row */
.ds-quick-dates {
    display: flex;
    gap: var(--ds-sp-1);
    flex-wrap: wrap;
}

/* Bulk modal content grid */
.ds-bulk-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ds-sp-5);
}
@media (max-width: 700px) {
    .ds-bulk-grid { grid-template-columns: 1fr; }
}

/* Stat cards inside bulk modal */
.ds-stat-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--ds-sp-3);
}
.ds-stat-card {
    background: var(--ds-bg-2);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    padding: var(--ds-sp-3);
    text-align: center;
}
.ds-stat-card__value {
    font-size: var(--ds-text-lg);
    font-weight: 700;
    color: var(--ds-text-0);
    font-variant-numeric: tabular-nums;
}
.ds-stat-card__label {
    font-size: var(--ds-text-xs);
    color: var(--ds-text-3);
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* ----- 8. PAGE-SPECIFIC: Toolbox ----- */

/* Section heading */
.ds-section-title {
    margin: 0;
    font-family: var(--ds-font-heading);
    font-size: var(--ds-text-lg);
    font-weight: 600;
    color: var(--ds-text-0);
    display: flex;
    align-items: center;
    gap: var(--ds-sp-2);
}
.ds-section-title i { color: var(--ds-text-3); font-size: 14px; }

/* Diagnostic grid */
.tb-diag-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--ds-sp-3);
}
.tb-diag { display: flex; flex-direction: column; gap: var(--ds-sp-3); }
.tb-diag__head {
    display: flex; align-items: center; gap: var(--ds-sp-2);
    font-weight: 600; font-size: var(--ds-text-sm); color: var(--ds-text-0);
}
.tb-diag__head i { font-size: 16px; }
.tb-diag__stats { margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ds-sp-1); }
.tb-diag__stats > div {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: var(--ds-sp-1) 0;
    border-bottom: 1px solid var(--ds-border);
    font-size: var(--ds-text-sm);
}
.tb-diag__stats > div:last-child { border-bottom: none; }
.tb-diag__stats dt { color: var(--ds-text-3); font-weight: 400; }
.tb-diag__stats dd { margin: 0; color: var(--ds-text-0); font-weight: 600; font-variant-numeric: tabular-nums; }
.tb-diag__actions { display: flex; gap: var(--ds-sp-1); flex-wrap: wrap; margin-top: auto; }

/* Scheduler mini-indicators on the tool row */
.tb-sched-indicators {
    display: flex; gap: var(--ds-sp-3); margin-top: 2px;
}
.tb-sched-dot {
    font-size: var(--ds-text-xs); color: var(--ds-text-3);
    display: flex; align-items: center; gap: 4px;
}
.tb-sched-dot i { font-size: 8px; }
.tb-sched-dot.is-ok i  { color: var(--ds-turquoise); }
.tb-sched-dot.is-off i { color: var(--ds-text-3); }

/* Scheduler detail grid */
.tb-sched-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--ds-sp-3) var(--ds-sp-5);
}
.tb-sched-grid > div { display: flex; flex-direction: column; gap: 2px; }
.tb-sched-grid span { font-size: var(--ds-text-xs); }
.tb-sched-grid strong { font-size: var(--ds-text-sm); color: var(--ds-text-0); }

/* Log viewer pre */
.tb-log-pre {
    background: var(--ds-bg-3);
    color: var(--ds-turquoise);
    font-family: var(--ds-font-mono);
    font-size: var(--ds-text-xs);
    padding: var(--ds-sp-3);
    border-radius: var(--ds-radius-md);
    overflow: auto;
    max-height: 50vh;
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
}

/* Result card */
.tb-result { display: flex; flex-direction: column; }

/* Utility helpers */
.ds-text-center { text-align: center; }
.ds-font-medium { font-weight: 500; }

/* ----- 9. PAGE-SPECIFIC: Invoice Manager ----- */

.inv-select-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--ds-sp-3);
    padding: var(--ds-sp-4);
    background: var(--ds-bg-1);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
}

.inv-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ds-sp-4);
    margin-top: var(--ds-sp-4);
}
@media (max-width: 1100px) { .inv-split { grid-template-columns: 1fr; } }

.inv-panel-head {
    padding: var(--ds-sp-3) var(--ds-sp-4);
    border-bottom: 1px solid var(--ds-border);
    font-size: var(--ds-text-sm);
    font-weight: 600;
    color: var(--ds-text-0);
    display: flex;
    align-items: center;
    gap: var(--ds-sp-2);
}

.inv-section {
    padding: var(--ds-sp-4);
    border-bottom: 1px solid var(--ds-border);
}
.inv-section:last-child { border-bottom: none; }

.inv-section-title {
    margin: 0 0 var(--ds-sp-3);
    font-size: var(--ds-text-sm);
    font-weight: 600;
    color: var(--ds-accent);
    display: flex;
    align-items: center;
    gap: var(--ds-sp-2);
}

/* Checkbox / radio inline label */
.inv-check {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-sp-2);
    cursor: pointer;
    font-size: var(--ds-text-sm);
    color: var(--ds-text-1);
    user-select: none;
}
.inv-check input[type="checkbox"],
.inv-check input[type="radio"] {
    accent-color: var(--ds-accent);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Radio card for WIP filter */
.inv-radio-card {
    flex: 1;
    min-width: 130px;
    display: flex;
    align-items: center;
    gap: var(--ds-sp-2);
    padding: var(--ds-sp-2) var(--ds-sp-3);
    background: var(--ds-bg-2);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    cursor: pointer;
    font-size: var(--ds-text-sm);
    color: var(--ds-text-2);
    transition: border-color var(--ds-dur-fast) var(--ds-ease), color var(--ds-dur-fast) var(--ds-ease);
}
.inv-radio-card input { accent-color: var(--ds-accent); cursor: pointer; }
.inv-radio-card:has(input:checked) { border-color: var(--ds-accent); color: var(--ds-text-0); }

/* Email list box */
.inv-email-list-box {
    max-height: 220px;
    overflow-y: auto;
    background: var(--ds-bg-2);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    padding: var(--ds-sp-2);
}
.inv-email-combo {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--ds-sp-2) var(--ds-sp-3);
    border-radius: var(--ds-radius-sm);
    cursor: pointer;
    transition: background var(--ds-dur-fast) var(--ds-ease);
}
.inv-email-combo:hover { background: var(--ds-bg-3); }
.inv-email-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--ds-sp-1) var(--ds-sp-2);
    border-bottom: 1px solid var(--ds-border);
}
.inv-email-item:last-child { border-bottom: none; }

/* ----- 10. PAGE-SPECIFIC: Admin Settings ----- */

.set-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--ds-sp-3);
}

.set-anim-card {
    display: flex;
    flex-direction: column;
    gap: var(--ds-sp-2);
    padding: var(--ds-sp-3);
    background: var(--ds-bg-2);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    cursor: pointer;
    transition: border-color var(--ds-dur-fast) var(--ds-ease), box-shadow var(--ds-dur-fast) var(--ds-ease);
}
.set-anim-card:hover { border-color: var(--ds-border-hover); }
.set-anim-card.is-selected { border-color: var(--ds-accent); box-shadow: 0 0 0 1px var(--ds-accent); }

.set-anim-card .set-preview {
    height: 40px;
    background: var(--ds-bg-3);
    border-radius: var(--ds-radius-sm);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.set-anim-card .set-preview .preview-box {
    width: 28px;
    height: 28px;
    background: var(--ds-accent);
    border-radius: var(--ds-radius-sm);
}

.set-speed-track {
    display: flex;
    align-items: center;
    gap: var(--ds-sp-3);
}
.set-speed-track input[type="range"] {
    flex: 1;
    accent-color: var(--ds-accent);
    height: 6px;
}
.set-speed-presets {
    display: flex;
    gap: var(--ds-sp-1);
    flex-wrap: wrap;
}
.set-speed-presets button {
    background: var(--ds-bg-2);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    padding: var(--ds-sp-1) var(--ds-sp-2);
    font-size: var(--ds-text-xs);
    color: var(--ds-text-2);
    cursor: pointer;
    transition: border-color var(--ds-dur-fast) var(--ds-ease), color var(--ds-dur-fast) var(--ds-ease);
}
.set-speed-presets button:hover { border-color: var(--ds-border-hover); color: var(--ds-text-0); }
.set-speed-presets button.active { border-color: var(--ds-accent); color: var(--ds-accent); }

.set-test-box {
    padding: var(--ds-sp-5);
    background: var(--ds-bg-2);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    text-align: center;
    color: var(--ds-text-2);
}


/* ----- ANALYTICS PAGE ----- */
.ana-page { gap: var(--ds-sp-6); }
.ana-clickable { cursor: pointer; transition: border-color var(--ds-dur-fast); }
.ana-clickable:hover { border-color: var(--ds-border-hover); }

/* Hero Row — 3 big financial cards */
.ana-hero {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--ds-sp-4);
}
.ana-hero__card {
    display: flex;
    align-items: center;
    gap: var(--ds-sp-4);
    padding: var(--ds-sp-5) var(--ds-sp-6);
    background: var(--ds-bg-1);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
    transition: border-color var(--ds-dur-fast);
}
.ana-hero__card:hover { border-color: var(--ds-border-hover); }
.ana-hero__card--revenue { border-left: 3px solid var(--ds-accent); }
.ana-hero__icon {
    font-size: 24px;
    color: var(--ds-text-3);
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ds-bg-2);
    border-radius: var(--ds-radius-md);
}
.ana-hero__data { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ana-hero__label { font-size: var(--ds-text-xs); color: var(--ds-text-2); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.ana-hero__value { font-size: 22px; font-weight: 700; color: var(--ds-text-0); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ana-hero__sub { font-size: var(--ds-text-xs); color: var(--ds-text-2); }
@media (max-width: 900px) { .ana-hero { grid-template-columns: 1fr; } }

/* Metrics Grid — 7 detail cards */
.ana-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--ds-sp-3);
}
.ana-metric {
    display: flex;
    align-items: center;
    gap: var(--ds-sp-3);
    padding: var(--ds-sp-3) var(--ds-sp-4);
    background: var(--ds-bg-1);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    transition: border-color var(--ds-dur-fast);
}
.ana-metric:hover { border-color: var(--ds-border-hover); }
.ana-metric__icon { font-size: 16px; flex-shrink: 0; }
.ana-metric__body { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.ana-metric__val { font-size: var(--ds-text-md); font-weight: 700; color: var(--ds-text-0); font-variant-numeric: tabular-nums; }
.ana-metric__label { font-size: var(--ds-text-xs); color: var(--ds-text-2); }
.ana-metric__sub { font-size: var(--ds-text-xs); color: var(--ds-text-3); white-space: nowrap; margin-left: auto; }

/* Charts Section — sidebar + stage */
.ana-charts-wrap {
    display: grid;
    grid-template-columns: 200px 1fr;
    background: var(--ds-bg-1);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
    overflow: hidden;
    min-height: 520px;
}
@media (max-width: 900px) {
    .ana-charts-wrap { grid-template-columns: 1fr; min-height: auto; }
    .ana-chart-sidebar { display: flex; flex-direction: row; overflow-x: auto; border-right: none; border-bottom: 1px solid var(--ds-border); padding: var(--ds-sp-2); }
    .ana-chart-sidebar__label { display: none; }
    .ana-chart-btn { flex-direction: row; padding: var(--ds-sp-2) var(--ds-sp-3); white-space: nowrap; border-left: none !important; border-bottom: 2px solid transparent; }
    .ana-chart-btn.is-active { border-left-color: transparent !important; border-bottom-color: var(--ds-accent); }
}
.ana-chart-sidebar {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-right: 1px solid var(--ds-border);
    background: var(--ds-bg-0);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--ds-border) transparent;
}
.ana-chart-sidebar__label {
    padding: var(--ds-sp-3) var(--ds-sp-4);
    font-size: var(--ds-text-xs);
    color: var(--ds-text-3);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600;
    border-bottom: 1px solid var(--ds-border);
}
.ana-chart-btn {
    display: flex;
    align-items: center;
    gap: var(--ds-sp-2);
    padding: var(--ds-sp-2) var(--ds-sp-4);
    background: none;
    border: none;
    border-left: 2px solid transparent;
    color: var(--ds-text-2);
    font-size: var(--ds-text-sm);
    font-family: var(--ds-font);
    cursor: pointer;
    text-align: left;
    transition: color var(--ds-dur-fast), background var(--ds-dur-fast), border-color var(--ds-dur-fast);
}
.ana-chart-btn:hover { color: var(--ds-text-0); background: var(--ds-bg-2); }
.ana-chart-btn.is-active {
    color: var(--ds-accent);
    background: var(--ds-accent-muted);
    border-left-color: var(--ds-accent);
    font-weight: 600;
}
.ana-chart-btn i { font-size: 12px; width: 16px; text-align: center; flex-shrink: 0; }

.ana-chart-stage { display: flex; flex-direction: column; min-width: 0; }
.ana-chart-stage__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--ds-sp-3) var(--ds-sp-5);
    border-bottom: 1px solid var(--ds-border);
    flex-shrink: 0;
}
.ana-chart-stage__body {
    flex: 1;
    padding: var(--ds-sp-4) var(--ds-sp-5);
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.ana-chart-stage__body .chart-wrapper { display: none; flex-direction: column; flex: 1; min-height: 0; }
.ana-chart-stage__body .chart-wrapper.active { display: flex; }
.ana-chart-stage__body .chart-content { flex: 1; position: relative; min-height: 380px; }
.ana-chart-kpi {
    display: flex;
    gap: var(--ds-sp-4);
    font-size: var(--ds-text-sm);
    margin-bottom: var(--ds-sp-3);
    flex-wrap: wrap;
}

/* Compare section (collapsible) */
.ana-compare {
    background: var(--ds-bg-1);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
    overflow: hidden;
}
.ana-compare__toggle {
    display: flex;
    align-items: center;
    gap: var(--ds-sp-2);
    padding: var(--ds-sp-3) var(--ds-sp-5);
    font-size: var(--ds-text-sm);
    font-weight: 600;
    color: var(--ds-text-1);
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.ana-compare__toggle::-webkit-details-marker { display: none; }
.ana-compare__chevron { margin-left: auto; font-size: 11px; color: var(--ds-text-3); transition: transform var(--ds-dur-fast); }
.ana-compare[open] .ana-compare__chevron { transform: rotate(180deg); }
.ana-compare__body {
    padding: 0 var(--ds-sp-5) var(--ds-sp-5);
    border-top: 1px solid var(--ds-border);
    padding-top: var(--ds-sp-4);
}


/* ----- FILE MANAGEMENT PAGE ----- */
.fm-page { gap: var(--ds-sp-4); }
.fm-tabs {
    display: flex;
    gap: 0;
    overflow-x: auto;
    border-bottom: 1px solid var(--ds-border);
}
.fm-tab {
    padding: var(--ds-sp-2) var(--ds-sp-4);
    text-decoration: none;
    color: var(--ds-text-3);
    font-size: var(--ds-text-sm);
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: color var(--ds-dur-fast), border-color var(--ds-dur-fast);
}
.fm-tab:hover { color: var(--ds-text-1); }
.fm-tab.is-active { color: var(--ds-accent); border-bottom-color: var(--ds-accent); }

.fm-file-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--ds-sp-2) var(--ds-sp-3);
    border-bottom: 1px solid var(--ds-border);
    gap: var(--ds-sp-3);
}
.fm-file-row:last-child { border-bottom: none; }
.fm-file-row:hover { background: var(--ds-bg-2); }
.fm-file-name { color: var(--ds-text-0); font-size: var(--ds-text-sm); font-weight: 500; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fm-file-ext {
    font-size: var(--ds-text-xs);
    padding: 2px 6px;
    border-radius: var(--ds-radius-sm);
    background: var(--ds-bg-3);
    color: var(--ds-text-2);
    font-family: var(--ds-font-mono);
    text-transform: uppercase;
}
.fm-file-actions { display: flex; gap: var(--ds-sp-1); flex-shrink: 0; }

.fm-dir-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--ds-sp-2) var(--ds-sp-3);
    border-bottom: 1px solid var(--ds-border);
    gap: var(--ds-sp-3);
}
.fm-dir-row:last-child { border-bottom: none; }
.fm-dir-row:hover { background: var(--ds-bg-2); }
.fm-dir-name { color: var(--ds-turquoise); font-size: var(--ds-text-sm); font-weight: 500; }


/* ----- REPORT CENTER PAGE ----- */
.rpt-page { gap: var(--ds-sp-4); }
.rpt-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--ds-border);
}
.rpt-tab {
    padding: var(--ds-sp-2) var(--ds-sp-4);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--ds-text-3);
    font-size: var(--ds-text-sm);
    font-family: var(--ds-font);
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--ds-dur-fast), border-color var(--ds-dur-fast);
}
.rpt-tab:hover { color: var(--ds-text-1); }
.rpt-tab.is-active { color: var(--ds-accent); border-bottom-color: var(--ds-accent); }

.rpt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--ds-sp-3);
}
.rpt-card {
    display: flex;
    gap: var(--ds-sp-3);
    padding: var(--ds-sp-4);
    background: var(--ds-bg-1);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
}
.rpt-card:hover { border-color: var(--ds-border-hover); }
.rpt-icon {
    font-size: 20px;
    color: var(--ds-accent);
    flex-shrink: 0;
    width: 36px;
    text-align: center;
}
.rpt-body { flex: 1; min-width: 0; }
.rpt-body h4 { font-size: var(--ds-text-sm); color: var(--ds-text-0); margin: 0 0 var(--ds-sp-1); font-weight: 600; }
.rpt-body p { font-size: var(--ds-text-xs); color: var(--ds-text-2); margin: 0 0 var(--ds-sp-2); line-height: 1.5; }
.rpt-actions { display: flex; flex-wrap: wrap; gap: var(--ds-sp-2); align-items: center; }
.rpt-actions .ds-select { font-size: var(--ds-text-xs); max-width: 220px; }


/* ----- PO TRACKERS PAGE ----- */
.po-page { gap: var(--ds-sp-4); }

/* Split layout: table + side panel */
.po-split {
    display: grid;
    grid-template-columns: 1fr 0;
    gap: 0;
    min-height: 0;
    transition: grid-template-columns var(--ds-dur-slow) var(--ds-ease);
}
.po-split.has-panel {
    grid-template-columns: 1fr 520px;
}
@media (min-width: 1600px) {
    .po-split.has-panel { grid-template-columns: 1fr 620px; }
}
@media (max-width: 1100px) {
    .po-split.has-panel { grid-template-columns: 1fr; }
    .po-panel.is-open { position: fixed; inset: 0; z-index: 90; width: 100%; border-left: none; }
}

.po-main { min-width: 0; overflow-x: auto; }

/* Table styling */
.po-table { font-size: var(--ds-text-sm); }
.po-row.is-active { background: var(--ds-accent-muted) !important; }

/* Status badges */
.po-status { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.po-status--no-po { background: var(--ds-bg-3); color: var(--ds-text-3); }
.po-status--under-budget { background: var(--ds-turquoise-muted); color: var(--ds-turquoise); }
.po-status--approaching { background: var(--ds-yellow-muted); color: var(--ds-yellow); }
.po-status--limit-met { background: var(--ds-magenta-muted); color: var(--ds-magenta); }
.po-status--over-budget { background: var(--ds-crimson-muted); color: var(--ds-crimson); }

/* Progress bar inside table cells */
.po-usage { display: flex; align-items: center; gap: var(--ds-sp-2); }
.po-usage__bar { flex: 1; height: 5px; background: var(--ds-bg-3); border-radius: 3px; overflow: hidden; min-width: 40px; }
.po-usage__fill { height: 100%; border-radius: 3px; transition: width .3s ease; }
.po-usage__pct { font-size: var(--ds-text-xs); color: var(--ds-text-2); font-variant-numeric: tabular-nums; min-width: 32px; text-align: right; }

/* Side panel */
.po-panel {
    background: var(--ds-bg-1);
    border-left: 1px solid var(--ds-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--ds-dur-fast);
}
.po-panel.is-open { opacity: 1; pointer-events: auto; }
.po-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--ds-sp-3) var(--ds-sp-4);
    border-bottom: 1px solid var(--ds-border);
    flex-shrink: 0;
    gap: var(--ds-sp-2);
}
.po-panel__body {
    flex: 1;
    overflow-y: auto;
    padding: var(--ds-sp-4);
    scrollbar-width: thin;
    scrollbar-color: var(--ds-border) transparent;
}

/* Detail components inside panel */
.po-detail-info {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: var(--ds-sp-2);
    font-size: var(--ds-text-xs);
}
.po-detail-info > div { display: flex; flex-direction: column; gap: 2px; }
.po-detail-stats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: var(--ds-sp-2);
}
.po-dstat {
    text-align: center;
    padding: var(--ds-sp-2) var(--ds-sp-3);
    background: var(--ds-bg-2);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
}
.po-dstat__val { display: block; font-size: var(--ds-text-md); font-weight: 700; color: var(--ds-text-0); font-variant-numeric: tabular-nums; }
.po-dstat__label { display: block; font-size: var(--ds-text-xs); color: var(--ds-text-3); margin-top: 2px; }

/* Ticket accordion */
.po-tickets-list { display: flex; flex-direction: column; gap: var(--ds-sp-1); }
.po-ticket-row {
    background: var(--ds-bg-2);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    overflow: hidden;
}
.po-ticket-row__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--ds-sp-2) var(--ds-sp-3);
    cursor: pointer;
    gap: var(--ds-sp-2);
    transition: background var(--ds-dur-fast);
}
.po-ticket-row__head:hover { background: var(--ds-bg-3); }
.po-ticket-row__chevron { transition: transform var(--ds-dur-fast); }
.po-ticket-row.is-expanded .po-ticket-row__chevron { transform: rotate(180deg); }
.po-ticket-row__detail { display: none; padding: 0 var(--ds-sp-3) var(--ds-sp-3); }
.po-ticket-row.is-expanded .po-ticket-row__detail { display: block; }


/* ----- PIONEER BRIDGE PAGE ----- */
.pio-page { gap: var(--ds-sp-4); }
.pio-stats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--ds-sp-3);
}


/* ================================================================
   DATABASE VIEWER PAGE
   ================================================================ */
.dbv-page { gap: var(--ds-sp-4); }
.dbv-stats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: var(--ds-sp-3);
}
.dbv-table-wrap { overflow: hidden; }
.dbv-table-scroll {
    overflow-x: auto;
    max-height: 70vh;
    overflow-y: auto;
}
.dbv-table-scroll table {
    font-size: var(--ds-text-xs);
}
.dbv-table-scroll tbody tr {
    cursor: pointer;
}
.dbv-table-scroll tbody tr:hover {
    background: var(--ds-bg-2) !important;
}
.dbv-table-scroll tbody tr.wip-row {
    background: color-mix(in srgb, var(--ds-blood-orange) 6%, transparent);
}
/* Info grid in ticket modal */
.dbv-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ds-sp-2);
}
.dbv-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--ds-sp-2);
    background: var(--ds-bg-1);
    border-radius: var(--ds-radius);
    border: 1px solid var(--ds-border);
}
.dbv-info__label {
    font-size: 10px;
    color: var(--ds-text-3);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.dbv-info__val {
    font-size: var(--ds-text-sm);
    color: var(--ds-text-0);
    word-break: break-word;
}
/* Edit bid items in modal */
.dbv-edit-item {
    padding: var(--ds-sp-3) 0;
    border-bottom: 1px solid var(--ds-border);
}
.dbv-edit-item:last-child { border-bottom: none; }
/* Activity list */
.dbv-activity {
    display: flex;
    flex-direction: column;
    gap: var(--ds-sp-2);
}
.dbv-activity__item {
    display: flex;
    align-items: center;
    gap: var(--ds-sp-3);
    padding: var(--ds-sp-2);
    border-radius: var(--ds-radius);
    background: var(--ds-bg-1);
    border: 1px solid var(--ds-border);
}
.dbv-activity__icon {
    font-size: 18px;
    flex-shrink: 0;
    width: 32px;
    text-align: center;
}
@media (max-width: 700px) {
    .dbv-info-grid { grid-template-columns: 1fr; }
}


/* ================================================================
   ADMIN DATABASE PAGE
   ================================================================ */
.adb-page { gap: var(--ds-sp-4); }
.adb-label {
    font-size: var(--ds-text-xs);
    color: var(--ds-text-2);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 500;
}
.adb-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--ds-sp-3);
}
.adb-billing-card {
    margin-top: var(--ds-sp-4);
    padding: var(--ds-sp-4);
    background: var(--ds-bg-1);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius);
}
/* Add individual record cards */
.adb-add-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--ds-sp-3);
}
.adb-add-card {
    background: var(--ds-bg-1);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius);
    padding: var(--ds-sp-4);
    transition: border-color var(--ds-dur-fast);
}
.adb-add-card:hover {
    border-color: var(--ds-border-hover);
}
.adb-add-title {
    font-size: var(--ds-text-sm);
    font-weight: 600;
    margin: 0 0 var(--ds-sp-3);
}
/* Collapsible table sections */
.adb-table-section {
    margin-bottom: var(--ds-sp-3);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius);
    overflow: hidden;
}
.adb-table-toggle {
    padding: var(--ds-sp-3) var(--ds-sp-4);
    background: var(--ds-bg-1);
    cursor: pointer;
    font-size: var(--ds-text-sm);
    font-weight: 600;
    color: var(--ds-text-0);
    display: flex;
    align-items: center;
    gap: var(--ds-sp-2);
    user-select: none;
    list-style: none;
}
.adb-table-toggle::-webkit-details-marker { display: none; }
.adb-table-toggle::before {
    content: '▸';
    font-size: 11px;
    transition: transform var(--ds-dur-fast);
}
details[open] > .adb-table-toggle::before { transform: rotate(90deg); }
.adb-table-toggle:hover { background: var(--ds-bg-2); }
.adb-table-section .ds-table {
    font-size: var(--ds-text-xs);
}
.adb-table-section > div {
    max-height: 400px;
    overflow-y: auto;
}
@media (max-width: 700px) {
    .adb-form-grid { grid-template-columns: 1fr; }
    .adb-add-grid { grid-template-columns: 1fr; }
}

/* ----- INVOICE V2: dense, information-forward shell ----- */
.invoice-beta-shell {
    --ds-font: 'Comet Sans', system-ui, -apple-system, sans-serif;
    --inv-surface-0: var(--ds-bg-0);
    --inv-surface-1: var(--ds-bg-1);
    --inv-surface-2: color-mix(in srgb, var(--ds-bg-2) 92%, var(--ds-bg-1));
    --inv-border-strong: color-mix(in srgb, var(--ds-border) 64%, var(--ds-accent) 36%);
    --inv-accent-soft: color-mix(in srgb, var(--ds-accent) 8%, transparent);
    --inv-shadow-1: none;
    --inv-shadow-2: 0 12px 28px color-mix(in srgb, #020617 16%, transparent);
    display: grid;
    grid-template-columns: 248px minmax(0, 1fr);
    min-height: calc(100vh - 7rem);
    gap: 0;
    padding: 0;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
    overflow: hidden;
    background: var(--inv-surface-0);
    box-shadow: none;
}
.invoice-beta-shell h1,
.invoice-beta-shell h2,
.invoice-beta-shell h3,
.invoice-beta-shell h4 {
    font-family: var(--ds-font);
    letter-spacing: -0.01em;
}

.invoice-beta-sidebar {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-right: 1px solid var(--ds-border);
    background: var(--inv-surface-1);
}

.invoice-beta-sidebar__header {
    padding: var(--ds-sp-4);
    border-bottom: 1px solid var(--ds-border);
}
.invoice-beta-sidebar__eyebrow {
    font-size: 10px;
    text-transform: none;
    letter-spacing: .02em;
    color: var(--ds-text-3);
}
.invoice-beta-sidebar__header h2 {
    margin-top: var(--ds-sp-1);
    font-size: var(--ds-text-xl);
    color: var(--ds-text-0);
}
.invoice-beta-sidebar__header p {
    margin-top: var(--ds-sp-2);
    color: var(--ds-text-2);
    font-size: var(--ds-text-sm);
    line-height: 1.45;
}

.invoice-beta-nav {
    display: flex;
    flex-direction: column;
    gap: var(--ds-sp-3);
    padding: var(--ds-sp-3);
    min-height: 0;
    overflow-y: auto;
}
.invoice-beta-nav__section {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.invoice-beta-nav__section-title {
    font-size: 10px;
    text-transform: none;
    letter-spacing: .02em;
    color: var(--ds-text-3);
    margin-bottom: 2px;
}
.invoice-beta-nav__item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 9px 10px 9px 12px;
    border: 1px solid transparent;
    border-radius: var(--ds-radius-sm);
    text-decoration: none;
    color: var(--ds-text-1);
    transition: border-color var(--ds-dur-fast) var(--ds-ease), background var(--ds-dur-fast) var(--ds-ease), color var(--ds-dur-fast) var(--ds-ease);
}
.invoice-beta-nav__item:hover {
    border-color: var(--ds-border-hover);
    background: var(--inv-surface-2);
}
.invoice-beta-nav__item.is-active {
    border-color: color-mix(in srgb, var(--inv-border-strong) 80%, var(--ds-border));
    background: var(--inv-accent-soft);
    color: var(--ds-text-0);
}
.invoice-beta-nav__item.is-active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 18%;
    bottom: 18%;
    width: 1px;
    border-radius: 2px;
    background: color-mix(in srgb, var(--ds-accent) 70%, var(--ds-border));
}
.invoice-beta-nav__title {
    font-size: var(--ds-text-sm);
    font-weight: 600;
    color: inherit;
}
.invoice-beta-nav__meta {
    font-size: 10px;
    color: var(--ds-text-3);
}
.invoice-beta-nav__item.is-active .invoice-beta-nav__meta {
    color: color-mix(in srgb, var(--ds-text-1) 66%, var(--ds-accent) 34%);
}

.invoice-beta-sidebar__footer {
    margin-top: auto;
    padding: var(--ds-sp-3);
    border-top: 1px solid var(--ds-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-sp-2);
}
.invoice-beta-sidebar__pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    text-transform: none;
    letter-spacing: .02em;
    color: var(--ds-text-2);
    border: 1px solid var(--ds-border);
    border-radius: 999px;
    padding: 3px 8px;
    background: var(--inv-surface-2);
}

.invoice-beta-main {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--inv-surface-0);
}

.invoice-beta-mobile-header {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-sp-2);
    padding: var(--ds-sp-2) var(--ds-sp-4);
    border-bottom: 1px solid var(--ds-border);
    background: var(--inv-surface-1);
}
.invoice-beta-mobile-header__text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}
.invoice-beta-mobile-header__eyebrow {
    font-size: 10px;
    text-transform: none;
    letter-spacing: .02em;
    color: var(--ds-text-3);
}
.invoice-beta-mobile-header__title {
    font-size: var(--ds-text-sm);
    color: var(--ds-text-0);
    font-weight: 600;
}

.invoice-beta-filter-wrap {
    position: sticky;
    top: 0;
    z-index: 16;
    border-bottom: 1px solid var(--ds-border);
    background: var(--inv-surface-1);
    padding: var(--ds-sp-3) var(--ds-sp-4) var(--ds-sp-2);
}
.invoice-beta-filter-slot {
    min-width: 0;
}
.invoice-beta-filter-slot .ds-filter-bar {
    border-color: var(--ds-border);
    background: var(--inv-surface-1);
}
.invoice-beta-filter-slot .ds-filter-bar__group {
    flex-wrap: wrap;
}

.invoice-beta-mobile-tabs {
    display: none;
    margin-bottom: var(--ds-sp-2);
}
.invoice-beta-mobile-tabs .invoice-beta-mobile-tabs__scroll {
    display: flex;
    gap: var(--ds-sp-2);
    overflow-x: auto;
    scrollbar-width: thin;
}
.invoice-beta-mobile-tabs__item {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border: 1px solid var(--ds-border);
    border-radius: 999px;
    font-size: var(--ds-text-xs);
    color: var(--ds-text-2);
    text-decoration: none;
    background: var(--inv-surface-1);
}
.invoice-beta-mobile-tabs__item.is-active {
    border-color: color-mix(in srgb, var(--inv-border-strong) 80%, var(--ds-border));
    color: var(--ds-text-0);
    background: var(--inv-accent-soft);
}

.invoice-beta-sidebar-backdrop {
    display: none;
}

/* Invoice page canvas */
.invoice-beta-content {
    min-width: 0;
    overflow-x: hidden;
}
.invoice-beta-content-shell {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: var(--ds-sp-4) var(--ds-sp-5);
}

.invoice-beta-content .ds-card {
    background: var(--inv-surface-1);
    border-color: var(--ds-border);
    box-shadow: none;
}
.invoice-beta-content .ds-table-wrap {
    border-color: var(--ds-border);
    box-shadow: none;
}

.invoice-beta-content .ds-split {
    min-width: 0;
    gap: var(--ds-sp-3);
}
.invoice-beta-content .ds-split__main .ds-table-wrap {
    min-width: 0;
    overflow-x: auto;
    overflow-y: auto;
}
.invoice-beta-content .ds-panel {
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    overflow: hidden;
}
.invoice-beta-content .ds-panel__body {
    overflow-x: hidden;
    max-width: 100%;
}
@media (min-width: 769px) {
    .invoice-beta-content .ds-split__aside,
    .invoice-beta-content .ds-split__aside.is-open {
        position: relative;
    }
}

/* Invoice form context strip */
.invoice-beta-form-context {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-sp-3);
    flex-wrap: wrap;
}
.invoice-beta-form-context__meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.invoice-beta-form-context__meta strong {
    color: var(--ds-text-0);
    font-size: var(--ds-text-md);
}
.invoice-beta-form-context__meta span {
    color: var(--ds-text-3);
    font-size: var(--ds-text-xs);
}
.invoice-beta-form-context__actions {
    display: flex;
    align-items: center;
    gap: var(--ds-sp-2);
    flex-wrap: wrap;
}

/* Invoice builder */
.invoice-beta-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(270px, 320px);
    gap: var(--ds-sp-4);
    align-items: start;
}
.invoice-beta-form-main {
    min-width: 0;
}
.invoice-beta-form-side {
    position: sticky;
    top: var(--ds-sp-3);
}

/* Operations form contract */
.ops-form-shell {
    display: flex;
    flex-direction: column;
    gap: var(--ds-sp-4);
}
.ops-form-header {
    display: flex;
    flex-direction: column;
    gap: var(--ds-sp-2);
}
.ops-form-header__row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ds-sp-3);
    flex-wrap: wrap;
}
.ops-form-header__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ds-text-3);
}
.ops-form-header__title h1,
.ops-form-header__title h2,
.ops-form-header__title h3 {
    margin: 0;
    color: var(--ds-text-0);
}
.ops-form-header__title p {
    margin: var(--ds-sp-1) 0 0 0;
    color: var(--ds-text-2);
    font-size: var(--ds-text-sm);
    max-width: 62ch;
}
.ops-form-header__actions {
    display: flex;
    align-items: center;
    gap: var(--ds-sp-2);
    flex-wrap: wrap;
}
.ops-form-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
    gap: var(--ds-sp-4);
    align-items: start;
}
.ops-form-layout--single {
    grid-template-columns: minmax(0, 1fr);
}
.ops-form-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ds-sp-3);
}
.ops-form-main--narrow {
    max-width: 860px;
}
.ops-form-rail {
    min-width: 0;
    align-self: stretch;
}
.ops-form-rail .ops-form-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ops-form-rail .costing-math-trail {
    display: none;
}
.ops-form-rail__sticky {
    position: sticky;
    top: var(--ds-sp-3);
    display: flex;
    flex-direction: column;
    gap: var(--ds-sp-3);
    height: fit-content;
}
.ops-form-hero {
    display: flex;
    justify-content: space-between;
    gap: var(--ds-sp-4);
    flex-wrap: wrap;
    padding: var(--ds-sp-4);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    background: var(--inv-surface-1);
    box-shadow: var(--inv-shadow-1);
}
.ops-form-hero__title-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--ds-sp-2);
}
.ops-form-hero__title-wrap h2,
.ops-form-hero__title-wrap h3 {
    margin: 0;
    color: var(--ds-text-0);
}
.ops-form-hero__title-wrap p {
    margin: 0;
    color: var(--ds-text-2);
    font-size: var(--ds-text-sm);
    max-width: 60ch;
}
.ops-form-hero__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(110px, 1fr));
    gap: var(--ds-sp-2);
    align-content: start;
}
.ops-form-hero-stat {
    min-width: 0;
    padding: var(--ds-sp-2) var(--ds-sp-3);
    border-radius: var(--ds-radius-sm);
    border: 1px solid var(--ds-border);
    background: var(--inv-surface-2);
}
.ops-form-hero-stat span {
    display: block;
    font-size: var(--ds-text-xs);
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ds-text-3);
}
.ops-form-hero-stat strong {
    display: block;
    margin-top: 3px;
    color: var(--ds-text-0);
    font-size: var(--ds-text-sm);
}
.ops-form-zone {
    display: flex;
    flex-direction: column;
    gap: var(--ds-sp-3);
    padding: var(--ds-sp-4);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    background: var(--inv-surface-1);
    box-shadow: var(--inv-shadow-1);
}
.ops-form-zone__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ds-sp-2);
    flex-wrap: wrap;
}
.ops-form-zone__title-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ops-form-zone__eyebrow {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ds-text-3);
}
.ops-form-zone__title {
    margin: 0;
    color: var(--ds-text-0);
    font-size: var(--ds-text-lg);
}
.ops-form-zone__body {
    margin: 0;
    color: var(--ds-text-2);
    font-size: var(--ds-text-sm);
    max-width: 60ch;
}
.ops-form-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ds-sp-2);
}
.ops-form-metric {
    min-width: 0;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    background: var(--inv-surface-2);
    padding: var(--ds-sp-2);
}
.ops-form-metric span {
    display: block;
    font-size: var(--ds-text-xs);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ds-text-3);
}
.ops-form-metric strong {
    display: block;
    margin-top: 3px;
    color: var(--ds-text-1);
    font-size: var(--ds-text-sm);
}
.ops-form-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-sp-3);
    flex-wrap: wrap;
    padding: var(--ds-sp-3);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    background: color-mix(in srgb, var(--inv-surface-1) 84%, var(--ds-bg-2));
    box-shadow: var(--inv-shadow-1);
}
.ops-form-toolbar--end {
    justify-content: flex-end;
}
.ops-form-toolbar__cluster {
    display: flex;
    align-items: center;
    gap: var(--ds-sp-2);
    flex-wrap: wrap;
}
.ops-form-toolbar__divider {
    width: 1px;
    min-height: 2rem;
    align-self: stretch;
    background: var(--ds-border);
    opacity: 0.9;
    margin-inline: var(--ds-sp-1);
}
.ops-form-toolbar__meta {
    color: var(--ds-text-3);
    font-size: var(--ds-text-xs);
}
.ops-form-rail-card {
    padding: var(--ds-sp-4);
    display: flex;
    flex-direction: column;
    gap: var(--ds-sp-3);
}
.ops-form-checklist {
    margin: 0;
    padding-left: 1rem;
    display: grid;
    gap: var(--ds-sp-2);
    color: var(--ds-text-2);
    font-size: var(--ds-text-sm);
}
.ops-form-checklist li::marker {
    color: var(--ds-accent);
}
.ops-work-order-form__summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.ops-work-order-total {
    margin: 0;
    padding: var(--ds-sp-4);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-bg-2);
}
.ops-work-order-total #work-order-total {
    font-variant-numeric: tabular-nums;
}
.ops-table-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--ds-sp-1);
    flex-wrap: wrap;
}

.invoice-beta-hero {
    display: flex;
    justify-content: space-between;
    gap: var(--ds-sp-4);
    flex-wrap: wrap;
    padding: var(--ds-sp-4);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    background: var(--inv-surface-1);
    box-shadow: var(--inv-shadow-1);
}
.invoice-beta-hero__title-wrap p {
    margin-top: var(--ds-sp-2);
    color: var(--ds-text-2);
    font-size: var(--ds-text-sm);
    max-width: 58ch;
}
.invoice-beta-hero__eyebrow {
    font-size: 10px;
    text-transform: none;
    letter-spacing: .02em;
    color: var(--ds-text-3);
}
.invoice-beta-hero__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(120px, 1fr));
    gap: var(--ds-sp-2);
    min-width: min(100%, 320px);
}
.invoice-beta-hero-stat {
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    background: var(--inv-surface-2);
    padding: var(--ds-sp-2);
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.invoice-beta-hero-stat span {
    color: var(--ds-text-3);
    font-size: 10px;
    text-transform: none;
    letter-spacing: .02em;
}
.invoice-beta-hero-stat strong {
    color: var(--ds-text-0);
    font-size: var(--ds-text-sm);
}

.invoice-beta-step-rail {
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    background: var(--inv-surface-1);
    padding: var(--ds-sp-3);
    box-shadow: var(--inv-shadow-1);
}
.invoice-beta-step-rail__bar {
    height: 5px;
    border-radius: 999px;
    background: var(--inv-surface-2);
    overflow: hidden;
}
.invoice-beta-step-rail__bar > span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--ds-accent);
    transition: width var(--ds-dur-slow) var(--ds-ease);
}
.invoice-beta-step-rail__meta {
    margin-top: var(--ds-sp-2);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ds-sp-3);
    flex-wrap: wrap;
}
.invoice-beta-step-rail__meta small {
    display: block;
    color: var(--ds-text-3);
    font-size: 10px;
    text-transform: none;
    letter-spacing: .02em;
}
.invoice-beta-step-rail__meta strong {
    color: var(--ds-text-0);
    font-size: var(--ds-text-md);
}
.invoice-beta-step-rail__msg {
    color: var(--ds-text-2);
    font-size: var(--ds-text-xs);
    min-height: 1.2em;
}

.invoice-beta-stepper {
    margin-top: var(--ds-sp-3);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--ds-sp-2);
}
.invoice-beta-stepper__item {
    display: flex;
    align-items: center;
    gap: var(--ds-sp-2);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    background: var(--inv-surface-1);
    color: var(--ds-text-2);
    font-size: var(--ds-text-xs);
    padding: var(--ds-sp-2);
}
.invoice-beta-stepper__item.is-active {
    border-color: color-mix(in srgb, var(--inv-border-strong) 80%, var(--ds-border));
    color: var(--ds-text-0);
    background: var(--inv-accent-soft);
}
.invoice-beta-stepper__item.is-complete {
    color: var(--ds-text-1);
    border-color: var(--ds-border-hover);
    background: var(--inv-surface-2);
}
.invoice-beta-stepper__dot {
    width: 18px;
    height: 18px;
    border: 1px solid var(--ds-border);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    flex-shrink: 0;
}
.invoice-beta-stepper__item.is-active .invoice-beta-stepper__dot {
    border-color: color-mix(in srgb, var(--ds-accent) 55%, var(--ds-border));
    background: var(--ds-accent);
    color: var(--ds-bg-0);
}
.invoice-beta-stepper__item.is-complete .invoice-beta-stepper__dot {
    border-color: var(--ds-border-hover);
    background: var(--inv-surface-2);
    color: var(--ds-text-1);
}

.invoice-beta-step-panel {
    display: none;
}
.invoice-beta-step-panel.is-active {
    display: block;
    animation: ds-slideFadeIn var(--ds-dur-norm) var(--ds-ease-spring);
}
@keyframes ds-slideFadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.invoice-beta-zone {
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    background: var(--inv-surface-1);
    overflow: hidden;
    box-shadow: var(--inv-shadow-1);
}
.invoice-beta-zone__head {
    padding: var(--ds-sp-3) var(--ds-sp-4);
    border-bottom: 1px solid var(--ds-border);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ds-sp-2);
    flex-wrap: wrap;
}
.invoice-beta-zone__head h4 {
    margin: 0;
}
.invoice-beta-zone__head p {
    margin-top: var(--ds-sp-1);
    font-size: var(--ds-text-xs);
    color: var(--ds-text-2);
}
.invoice-beta-zone__body {
    padding: var(--ds-sp-4);
    display: flex;
    flex-direction: column;
    gap: var(--ds-sp-3);
}

.invoice-beta-field-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: var(--ds-sp-3);
}
.invoice-beta-field-grid--wide {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.invoice-beta-field-grid--compact {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.invoice-beta-kpi-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--ds-sp-2);
}
.invoice-beta-kpi {
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    background: var(--inv-surface-2);
    padding: var(--ds-sp-2);
}
.invoice-beta-kpi span {
    font-size: 10px;
    text-transform: none;
    letter-spacing: .02em;
    color: var(--ds-text-3);
}
.invoice-beta-kpi strong {
    display: block;
    margin-top: 2px;
    color: var(--ds-text-0);
    font-size: var(--ds-text-md);
    font-variant-numeric: tabular-nums;
}

.invoice-beta-wo-tabs {
    display: inline-flex;
    border: 1px solid var(--ds-border);
    border-radius: 999px;
    padding: 2px;
    gap: 2px;
    background: var(--inv-surface-2);
}
.invoice-beta-wo-tab {
    border: none;
    background: transparent;
    color: var(--ds-text-2);
    border-radius: 999px;
    padding: 4px 11px;
    font-size: var(--ds-text-xs);
    font-family: var(--ds-font);
    cursor: pointer;
}
.invoice-beta-wo-tab.tab-active,
.invoice-beta-wo-tab.is-active {
    color: var(--ds-text-0);
    background: var(--inv-accent-soft);
    border: 1px solid color-mix(in srgb, var(--inv-border-strong) 80%, var(--ds-border));
}

.invoice-beta-wo-actions {
    display: flex;
    align-items: center;
    gap: var(--ds-sp-2);
    flex-wrap: wrap;
}
.invoice-beta-selected-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-sp-3);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    background: var(--inv-surface-2);
    padding: var(--ds-sp-2) var(--ds-sp-3);
    flex-wrap: wrap;
}

.invoice-beta-step-actions {
    margin-top: var(--ds-sp-3);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--ds-sp-3);
    padding: var(--ds-sp-2) var(--ds-sp-3);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    background: var(--inv-surface-1);
    flex-wrap: wrap;
    box-shadow: var(--inv-shadow-1);
}
.invoice-beta-step-actions .ds-toolbar {
    gap: var(--ds-sp-2);
}
.invoice-beta-step-actions__meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.invoice-beta-step-actions__meta span {
    color: var(--ds-text-3);
    font-size: var(--ds-text-xs);
}
.invoice-beta-step-actions__meta strong {
    color: var(--ds-text-0);
    font-size: var(--ds-text-sm);
}

.invoice-beta-submit-row {
    display: flex;
    align-items: center;
    gap: var(--ds-sp-2);
    flex-wrap: wrap;
}

.invoice-beta-summary-card {
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    background: var(--inv-surface-1);
    padding: var(--ds-sp-3);
    box-shadow: var(--inv-shadow-1);
}
.invoice-beta-summary-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-sp-2);
    margin-bottom: var(--ds-sp-2);
}
.invoice-beta-summary-card__head h4 {
    margin: 0;
}
.invoice-beta-summary-card__amount {
    font-size: clamp(1.4rem, 2.2vw, 1.8rem);
    color: var(--ds-text-0);
    font-family: var(--ds-font-mono);
    letter-spacing: .01em;
}
.invoice-beta-preview-kpi {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ds-sp-2);
}
.invoice-beta-preview-kpi .ds-card {
    padding: var(--ds-sp-2);
    background: var(--inv-surface-2);
}
.invoice-beta-hints {
    margin-top: var(--ds-sp-3);
    display: grid;
    gap: var(--ds-sp-2);
}
.invoice-beta-hint {
    padding: var(--ds-sp-2);
    border-radius: var(--ds-radius-sm);
    border: 1px solid var(--ds-border);
    background: var(--inv-surface-1);
}
.invoice-beta-hint strong {
    display: block;
    color: var(--ds-text-0);
    font-size: var(--ds-text-xs);
}
.invoice-beta-hint span {
    color: var(--ds-text-2);
    font-size: 11px;
    line-height: 1.45;
}

/* Invoice detail timeline */
.invoice-lifecycle {
    display: flex;
    flex-direction: column;
    gap: var(--ds-sp-2);
}
.invoice-lifecycle__item {
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr);
    gap: var(--ds-sp-2);
    align-items: start;
}
.invoice-lifecycle__line {
    width: 2px;
    height: 100%;
    margin-top: 2px;
    justify-self: center;
    background: var(--ds-border);
}
.invoice-lifecycle__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-top: 4px;
    background: var(--ds-border-hover);
}
.invoice-lifecycle__dot--success { background: var(--ds-success); }
.invoice-lifecycle__dot--warning { background: var(--ds-warning); }
.invoice-lifecycle__dot--danger { background: var(--ds-danger); }
.invoice-lifecycle__entry {
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    background: var(--inv-surface-1);
    padding: var(--ds-sp-2);
}
.invoice-lifecycle__title {
    color: var(--ds-text-0);
    font-size: var(--ds-text-sm);
    font-weight: 600;
}
.invoice-lifecycle__meta {
    margin-top: 2px;
    color: var(--ds-text-3);
    font-size: 10px;
}
.invoice-lifecycle__note {
    margin-top: 4px;
    color: var(--ds-text-2);
    font-size: var(--ds-text-xs);
    line-height: 1.4;
}

/* Invoice detail fragment: Work Orders collapsed by default */
.invoice-fragment-work-orders summary::-webkit-details-marker { display: none; }
.invoice-fragment-work-orders__chevron {
    font-size: var(--ds-text-xs);
    transition: transform var(--ds-dur-norm) var(--ds-ease);
}
.invoice-fragment-work-orders[open] .invoice-fragment-work-orders__chevron {
    transform: rotate(90deg);
}

/* Row quick-actions dropdown */
.invoice-row-actions,
.ops-row-actions {
    position: relative;
    display: inline-block;
}
.invoice-row-actions summary,
.ops-row-actions summary {
    list-style: none;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: var(--ds-radius-sm);
}
.invoice-row-actions summary::-webkit-details-marker,
.ops-row-actions summary::-webkit-details-marker {
    display: none;
}
.invoice-row-actions[open] .invoice-row-actions-menu,
.ops-row-actions[open] .ops-row-actions-menu {
    display: block;
}
.invoice-row-actions-menu,
.ops-row-actions-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 2px;
    min-width: 168px;
    z-index: 20;
    padding: var(--ds-sp-1);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius);
    box-shadow: var(--inv-shadow-2);
    background: var(--inv-surface-1);
}
.invoice-row-actions-menu a,
.invoice-row-actions-menu button,
.ops-row-actions-menu a,
.ops-row-actions-menu button {
    display: block;
    width: 100%;
    text-align: left;
    padding: var(--ds-sp-2);
    border: none;
    border-radius: var(--ds-radius-sm);
    text-decoration: none;
    background: none;
    cursor: pointer;
    color: var(--ds-text-0);
    font-size: var(--ds-text-sm);
}
.invoice-row-actions-menu form,
.ops-row-actions-menu form {
    margin: 0;
}
.invoice-row-actions-menu a:hover,
.invoice-row-actions-menu button:hover,
.ops-row-actions-menu a:hover,
.ops-row-actions-menu button:hover {
    background: color-mix(in srgb, var(--ds-bg-2) 92%, var(--ds-bg-1));
}

/* Invoice dense controls */
.invoice-beta-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-sp-2);
    flex-wrap: wrap;
}
.invoice-beta-toolbar__group {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-sp-2);
    flex-wrap: wrap;
}
.invoice-beta-segmented {
    display: inline-flex;
    border: 1px solid var(--ds-border);
    border-radius: 999px;
    background: var(--inv-surface-1);
    padding: 2px;
    gap: 2px;
}
.invoice-beta-segmented__item {
    appearance: none;
    border: 0;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: var(--ds-text-xs);
    color: var(--ds-text-2);
    background: transparent;
    cursor: pointer;
    transition: background var(--ds-dur-fast) var(--ds-ease), color var(--ds-dur-fast) var(--ds-ease);
}
.invoice-beta-segmented__item.is-active,
.invoice-beta-segmented__item[aria-pressed="true"] {
    background: var(--inv-accent-soft);
    color: var(--ds-text-0);
}

.invoice-beta-status-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    border: 1px solid var(--ds-border);
    padding: 2px 8px;
    font-size: 10px;
    color: var(--ds-text-2);
    background: var(--inv-surface-1);
}
.invoice-beta-status-chip::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ds-border-hover);
}
.invoice-beta-status-chip--success::before { background: var(--ds-success); }
.invoice-beta-status-chip--warning::before { background: var(--ds-warning); }
.invoice-beta-status-chip--danger::before { background: var(--ds-danger); }
.invoice-beta-status-chip--info::before { background: var(--ds-info); }

.invoice-beta-key-hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--ds-border);
    border-radius: 999px;
    font-size: 10px;
    color: var(--ds-text-2);
    padding: 3px 8px;
    background: var(--inv-surface-1);
}
.invoice-beta-key-hint kbd {
    font-family: var(--ds-font-mono);
    font-size: 10px;
    line-height: 1;
    border: 1px solid var(--ds-border);
    border-radius: 4px;
    padding: 2px 4px;
    background: var(--inv-surface-2);
    color: var(--ds-text-1);
}

/* Invoice jobs drawer */
.invoice-beta-job-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(380px, 92vw);
    background: var(--inv-surface-1);
    border-left: 1px solid var(--ds-border);
    box-shadow: var(--inv-shadow-2);
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
    z-index: 120;
    display: flex;
    flex-direction: column;
    transition: transform var(--ds-dur-slow) var(--ds-ease-spring), opacity var(--ds-dur-fast) var(--ds-ease);
}
.invoice-beta-job-drawer.is-open {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}
.invoice-beta-job-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-sp-2);
    padding: var(--ds-sp-3) var(--ds-sp-4);
    border-bottom: 1px solid var(--ds-border);
}
.invoice-beta-job-drawer__title {
    margin: 0;
    font-size: var(--ds-text-md);
}
.invoice-beta-job-drawer__subtitle {
    margin-top: 2px;
    font-size: var(--ds-text-xs);
    color: var(--ds-text-3);
}
.invoice-beta-job-drawer__body {
    overflow: auto;
    padding: var(--ds-sp-3);
    display: grid;
    gap: var(--ds-sp-2);
}
.invoice-beta-job-item {
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    padding: var(--ds-sp-2);
    background: var(--inv-surface-1);
}
.invoice-beta-job-item__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-sp-2);
}
.invoice-beta-job-item__meta {
    margin-top: 4px;
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-sp-1);
    color: var(--ds-text-3);
    font-size: 10px;
}
.invoice-beta-job-item__summary {
    margin-top: 5px;
    font-size: 11px;
    color: var(--ds-text-2);
}
.invoice-beta-job-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 118;
    background: var(--ds-bg-overlay);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--ds-dur-fast) var(--ds-ease);
}
.invoice-beta-job-drawer-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}
.invoice-beta-job-fab {
    position: fixed;
    right: var(--ds-sp-4);
    bottom: var(--ds-sp-5);
    z-index: 119;
    box-shadow: var(--ds-shadow-lg);
}

.invoice-beta-drawer-empty {
    border: 1px dashed var(--ds-border);
    border-radius: var(--ds-radius-sm);
    padding: var(--ds-sp-3);
    color: var(--ds-text-3);
    font-size: var(--ds-text-xs);
    text-align: center;
}

/* Invoice bulk modal */
.invoice-beta-bulk-preview {
    display: grid;
    gap: var(--ds-sp-3);
}
.invoice-beta-bulk-preview__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--ds-sp-2);
}
.invoice-beta-bulk-preview__metric {
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    padding: var(--ds-sp-2);
    background: var(--inv-surface-1);
}
.invoice-beta-bulk-preview__metric span {
    font-size: 10px;
    color: var(--ds-text-3);
}
.invoice-beta-bulk-preview__metric strong {
    display: block;
    margin-top: 3px;
    font-size: var(--ds-text-md);
    color: var(--ds-text-0);
}
.invoice-beta-bulk-preview__list {
    max-height: 220px;
    overflow: auto;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
}
.invoice-beta-bulk-preview__list-row {
    padding: var(--ds-sp-2) var(--ds-sp-3);
    border-bottom: 1px solid var(--ds-border);
    font-size: var(--ds-text-xs);
}
.invoice-beta-bulk-preview__list-row:last-child {
    border-bottom: 0;
}
.invoice-beta-bulk-preview__warn {
    color: var(--ds-warning);
    font-size: var(--ds-text-xs);
}

/* Density modes */
.invoice-beta-shell[data-density="compact"] .invoice-beta-content-shell {
    padding: var(--ds-sp-3) var(--ds-sp-4);
}
.invoice-beta-shell[data-density="compact"] .invoice-beta-filter-wrap {
    padding-top: var(--ds-sp-2);
    padding-bottom: var(--ds-sp-1);
}
.invoice-beta-shell[data-density="compact"] .ds-table--dense th,
.invoice-beta-shell[data-density="compact"] .ds-table--dense td {
    padding: 3px 6px;
    font-size: 10px;
}
.invoice-beta-shell[data-density="compact"] .ds-btn--sm {
    padding: 2px 7px;
}
.invoice-beta-shell[data-show-kb-hints="false"] .invoice-beta-key-hint {
    display: none;
}

/* Motion primitives */
.invoice-motion-enter {
    animation: invoiceMotionEnter var(--ds-dur-slow) var(--ds-ease-spring);
}
.invoice-motion-pop {
    animation: invoiceMotionPop var(--ds-dur-slow) var(--ds-ease-spring);
}
.invoice-motion-row-flash {
    animation: invoiceRowFlash 420ms var(--ds-ease);
}
@keyframes invoiceMotionEnter {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes invoiceMotionPop {
    from {
        opacity: 0;
        transform: scale(.985);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}
@keyframes invoiceRowFlash {
    0% { background: color-mix(in srgb, var(--ds-accent) 16%, transparent); }
    100% { background: transparent; }
}

/* Shared spinner (Font Awesome-free) */
@keyframes ds-spin {
    to { transform: rotate(360deg); }
}
.ds-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid var(--ds-border);
    border-top-color: var(--ds-accent);
    border-radius: 50%;
    animation: ds-spin 0.8s linear infinite;
    flex-shrink: 0;
    vertical-align: middle;
}
.ds-spinner--sm {
    width: 12px;
    height: 12px;
    border-width: 2px;
}
.ds-spinner--md {
    width: 16px;
    height: 16px;
}
.ds-spinner--lg {
    width: 22px;
    height: 22px;
    border-width: 3px;
}

@media (max-width: 1200px) {
    .invoice-beta-form-grid {
        grid-template-columns: 1fr;
    }
    .invoice-beta-form-side {
        position: static;
        top: auto;
    }
}

@media (max-width: 980px) {
    .invoice-beta-shell {
        grid-template-columns: minmax(0, 1fr);
    }
    .invoice-beta-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(280px, 88vw);
        z-index: 130;
        transform: translateX(-100%);
        transition: transform var(--ds-dur-slow) var(--ds-ease);
    }
    .invoice-beta-shell.sidebar-open .invoice-beta-sidebar {
        transform: translateX(0);
    }
    .invoice-beta-sidebar-backdrop {
        position: fixed;
        inset: 0;
        z-index: 120;
        background: var(--ds-bg-overlay);
    }
    .invoice-beta-shell.sidebar-open .invoice-beta-sidebar-backdrop {
        display: block;
    }
    .invoice-beta-mobile-header {
        display: flex;
    }
    .invoice-beta-mobile-tabs {
        display: block;
    }
    .invoice-beta-filter-wrap {
        padding: var(--ds-sp-2) var(--ds-sp-3);
    }
    .invoice-beta-content-shell {
        padding: var(--ds-sp-3);
    }
    .invoice-beta-stepper {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .invoice-beta-hero__stats {
        grid-template-columns: 1fr;
    }
    .invoice-beta-step-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .invoice-beta-step-actions .ds-toolbar {
        justify-content: flex-end;
    }
    .invoice-beta-bulk-preview__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (prefers-reduced-motion: reduce) {
    .ds-page *,
    .ds-page *::before,
    .ds-page *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

[data-reduce-motion="true"] .ds-page *,
[data-reduce-motion="true"] .ds-page *::before,
[data-reduce-motion="true"] .ds-page *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
}

/* Operations Beta (inherits Invoice beta shell language) */
.operations-beta-shell {
    grid-template-columns: 248px minmax(0, 1fr);
}
.operations-beta-shell .invoice-beta-nav__title {
    font-size: var(--ds-text-sm);
}
.operations-beta-shell .invoice-beta-nav__meta {
    font-size: 10px;
}
.operations-beta-shell .invoice-beta-content-shell {
    padding: var(--ds-sp-4) var(--ds-sp-5);
}
.operations-beta-shell .ds-filter-bar {
    border-color: var(--ds-border);
    background: var(--inv-surface-1);
}
.operations-beta-shell .ops-filter-bar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--ds-sp-2);
}
.operations-beta-shell .ops-filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ds-sp-2);
}
.operations-beta-shell .ops-filter-row > label {
    min-width: min(100%, 148px);
    flex: 1 1 168px;
}
.operations-beta-shell .ops-filter-row > label .ops-filter-control,
.operations-beta-shell .ops-filter-row > label .ops-filter-control--sm {
    width: 100%;
    max-width: none;
}
.operations-beta-shell .ops-filter-control {
    min-width: 148px;
    max-width: 280px;
}
.operations-beta-shell .ops-filter-control--search {
    min-width: 240px;
    flex: 1 1 280px;
}
.operations-beta-shell .ops-filter-control--sm {
    min-width: 110px;
    max-width: 130px;
}
.operations-beta-shell .ops-filter-actions {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: var(--ds-sp-2);
    flex-wrap: wrap;
}
.operations-beta-shell .invoice-beta-status-chip--neutral::before {
    background: var(--ds-text-3);
}

.ops-beta-page {
    container-type: inline-size;
}
.ops-linked-page {
    display: flex;
    flex-direction: column;
    gap: var(--ds-sp-4);
}
.ops-linked-page .breadcrumbs {
    font-size: var(--ds-text-xs);
    color: var(--ds-text-3);
}
.ops-linked-page .breadcrumbs a {
    color: var(--ds-accent);
}
.ops-linked-page .card {
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius);
    background: var(--inv-surface-1);
    box-shadow: none;
}
.ops-linked-page .card-body {
    padding: var(--ds-sp-4);
}
.ops-linked-page .card-title {
    font-size: var(--ds-text-md);
    color: var(--ds-text-1);
    font-weight: 650;
}
.ops-linked-page .table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--ds-text-sm);
}
.ops-linked-page .table thead th {
    background: var(--inv-surface-2);
    color: var(--ds-text-2);
    border-bottom: 1px solid var(--ds-border);
    padding: var(--ds-sp-2) var(--ds-sp-3);
    font-size: var(--ds-text-xs);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.ops-linked-page .table tbody td {
    border-bottom: 1px solid var(--ds-border);
    padding: var(--ds-sp-2) var(--ds-sp-3);
    vertical-align: top;
}
.ops-linked-page .table tbody tr:hover {
    background: color-mix(in srgb, var(--ds-accent) 5%, var(--inv-surface-1));
}
.ops-linked-page .btn {
    border-radius: var(--ds-radius-sm);
    border: 1px solid var(--ds-border);
    background: var(--inv-surface-2);
    color: var(--ds-text-1);
    box-shadow: none;
    font-weight: 600;
}
.ops-linked-page .btn:hover {
    border-color: var(--ds-border-hover);
    background: var(--inv-surface-1);
}
.ops-linked-page .btn-primary {
    color: #fff;
    border-color: color-mix(in srgb, var(--ds-accent) 70%, #000 10%);
    background: color-mix(in srgb, var(--ds-accent) 88%, #000 8%);
}
.ops-linked-page .btn-primary:hover {
    background: color-mix(in srgb, var(--ds-accent) 76%, #000 16%);
}
.ops-linked-page .btn-ghost,
.ops-linked-page .btn-outline {
    background: transparent;
}
.ops-linked-page .btn-error {
    color: #fff;
    border-color: color-mix(in srgb, var(--ds-danger) 70%, #000 10%);
    background: color-mix(in srgb, var(--ds-danger) 88%, #000 8%);
}
.ops-linked-page .btn-warning {
    color: #1a1300;
    border-color: color-mix(in srgb, var(--ds-warning) 75%, #000 10%);
    background: color-mix(in srgb, var(--ds-warning) 90%, #fff 5%);
}
.ops-linked-page .input,
.ops-linked-page .select,
.ops-linked-page .textarea {
    border: 1px solid var(--ds-border);
    background: var(--inv-surface-1);
    color: var(--ds-text-1);
    border-radius: var(--ds-radius-sm);
}
.ops-linked-page .input:focus,
.ops-linked-page .select:focus,
.ops-linked-page .textarea:focus {
    border-color: var(--ds-accent);
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-accent) 18%, transparent);
}
.ops-linked-page .badge {
    border: 1px solid var(--ds-border);
    border-radius: 999px;
    background: var(--inv-surface-2);
    color: var(--ds-text-2);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .03em;
}
.ops-work-order-view__top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
    align-items: start;
    width: 100%;
}
.ops-work-order-view__top > .ops-form-main {
    grid-column: 1;
    min-width: 0;
}
.ops-work-order-view__top > .ops-form-rail {
    grid-column: 2;
    min-width: 0;
    max-width: 320px;
}
.ops-work-order-view__summary-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.ops-work-order-view__status-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}
.ops-work-order-view__info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: var(--ds-sp-3) var(--ds-sp-4);
}
.ops-work-order-view__field {
    min-width: 0;
}
.ops-work-order-view__field-value {
    margin-top: 4px;
    color: var(--ds-text-1);
    font-weight: 600;
}
.ops-work-order-view__callout {
    padding: var(--ds-sp-3);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    background: var(--inv-surface-2);
}
.ops-work-order-view__callout p {
    margin: 6px 0 0 0;
    color: var(--ds-text-1);
    line-height: 1.6;
}
.ops-work-order-view__note-stack {
    display: grid;
    gap: var(--ds-sp-2);
}
.ops-work-order-view__note-card {
    padding: var(--ds-sp-3);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    background: var(--inv-surface-2);
}
.ops-work-order-view__note-card--warning {
    background: var(--ds-warning-muted, oklch(var(--wa) / .1));
    border-color: var(--ds-warning, oklch(var(--wa)));
}
.ops-work-order-view__note-label {
    margin: 0 0 4px 0;
    font-size: var(--ds-text-xs);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ds-text-2);
}
.ops-work-order-view__note-card--warning .ops-work-order-view__note-label {
    color: var(--ds-warning, oklch(var(--wa)));
}
.ops-work-order-view__note-card p:last-child {
    margin: 0;
}
.ops-work-order-view__documents {
    gap: var(--ds-sp-2);
}
.ops-work-order-view__upload {
    padding: var(--ds-sp-2) var(--ds-sp-3);
    border: 1px dashed var(--ds-border);
    border-radius: var(--ds-radius-sm);
    background: var(--inv-surface-2);
}
.ops-work-order-view__upload summary {
    cursor: pointer;
    list-style: none;
    font-size: var(--ds-text-sm);
    font-weight: 600;
    color: var(--ds-text-1);
}
.ops-work-order-view__upload summary::-webkit-details-marker {
    display: none;
}
.ops-work-order-view__upload[open] summary {
    margin-bottom: var(--ds-sp-2);
}
.ops-work-order-view__upload-form {
    display: grid;
    gap: var(--ds-sp-2);
}
.ops-work-order-view__documents-list {
    display: grid;
    gap: var(--ds-sp-2);
    max-height: 320px;
    overflow: auto;
    padding-right: 2px;
}
.ops-work-order-view__document-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ds-sp-2);
    padding: var(--ds-sp-2);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    background: var(--inv-surface-2);
}
.ops-work-order-view__document-meta {
    min-width: 0;
}
.ops-work-order-view__document-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
.ops-work-order-view__line-table table {
    min-width: 1040px;
}
.ops-work-order-view__col-description {
    min-width: 280px;
}
.ops-work-order-view__pioneer summary {
    list-style: none;
}
.ops-work-order-view__pioneer summary::-webkit-details-marker {
    display: none;
}
.ops-wo-collapse {
    border: 0;
}
.ops-wo-collapse > summary {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem 0.85rem;
    cursor: pointer;
    padding: 0.15rem 0;
}
.ops-wo-collapse > summary::-webkit-details-marker {
    display: none;
}
.ops-wo-collapse > summary::before {
    content: '';
    width: 0.4rem;
    height: 0.4rem;
    border-right: 1.5px solid var(--ds-text-3);
    border-bottom: 1.5px solid var(--ds-text-3);
    transform: rotate(-45deg);
    margin-right: 0.15rem;
    flex: 0 0 auto;
    opacity: 0.7;
}
.ops-wo-collapse[open] > summary::before {
    transform: rotate(45deg);
    margin-top: -0.15rem;
}
.ops-wo-collapse__kicker {
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ds-text-3);
    font-weight: 600;
}
.ops-wo-collapse__title {
    font-size: 1.05rem;
    font-weight: 650;
    color: var(--ds-text-0);
}
.ops-wo-collapse__meta {
    font-size: 0.8rem;
    color: var(--ds-text-3);
}
.ops-wo-collapse__body {
    margin-top: var(--ds-sp-3);
}
.ops-beta-head h1 {
    font-size: var(--ds-text-2xl);
    color: var(--ds-text-0);
}
.ops-beta-split {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(360px, 1fr);
    gap: var(--ds-sp-3);
    align-items: start;
}
.ops-beta-list.ds-card {
    padding: 0;
    overflow: hidden;
}
.ops-beta-list .ds-table {
    width: auto;
    min-width: 100%;
}
.ops-beta-list .ds-table th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--inv-surface-2);
}
.ops-entity-title {
    font-size: var(--ds-text-md);
    font-weight: 650;
    color: var(--ds-text-0);
    line-height: 1.35;
}
.ops-entity-subid {
    margin-top: 2px;
    color: var(--ds-text-3);
    font-size: 10px;
    font-family: var(--ds-font-mono);
}
.ops-lineage-cell {
    min-width: 330px;
}
.ops-lineage-chain {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    font-size: var(--ds-text-xs);
    line-height: 1.45;
}
.ops-lineage-chain__link {
    color: var(--ds-accent);
    text-decoration: none;
    font-weight: 600;
}
.ops-lineage-chain__link:hover {
    text-decoration: underline;
}
.ops-lineage-chain__text {
    color: var(--ds-text-2);
}
.ops-lineage-chain__sep {
    color: var(--ds-text-3);
    font-family: var(--ds-font-mono);
}
.ops-lineage-signals {
    margin-top: 4px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.ops-lineage-signals .invoice-beta-status-chip {
    font-size: 10px;
}
.ops-entity-row {
    cursor: pointer;
    transition: background-color var(--ds-dur-fast) var(--ds-ease), box-shadow var(--ds-dur-fast) var(--ds-ease);
}
.ops-entity-row:hover {
    background: var(--inv-surface-2);
}
.ops-entity-row.is-active {
    background: color-mix(in srgb, var(--ds-accent) 8%, transparent);
    box-shadow: inset 2px 0 0 color-mix(in srgb, var(--ds-accent) 80%, white 20%);
}
.ops-beta-preview.ds-card {
    position: sticky;
    top: calc(var(--ds-sp-3) + 52px);
    min-height: 120px;
}
.ops-preview-panel {
    display: none;
}
.ops-preview-panel.is-active {
    display: block;
}
.ops-preview-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--ds-sp-2);
}
.ops-preview-metrics > div,
.ops-preview-kv {
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    background: var(--inv-surface-2);
    padding: var(--ds-sp-2);
}
.ops-preview-metrics span,
.ops-preview-kv span {
    display: block;
    font-size: var(--ds-text-xs);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ds-text-3);
}
.ops-preview-metrics strong,
.ops-preview-kv strong {
    display: block;
    margin-top: 2px;
    font-size: var(--ds-text-sm);
    color: var(--ds-text-1);
}
.ops-preview-listitem {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-sp-2);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    background: var(--inv-surface-2);
    padding: var(--ds-sp-2);
    color: inherit;
}
.ops-preview-lineitems {
    display: grid;
    gap: 6px;
}

.ops-detail-panel .ds-panel__header {
    padding: var(--ds-sp-3) var(--ds-sp-4);
}
.ops-detail-panel .ds-panel__body {
    padding: var(--ds-sp-4);
}
.ops-detail-panel {
    container-type: inline-size;
}
.ops-fragment {
    display: flex;
    flex-direction: column;
    gap: var(--ds-sp-3);
}
.ops-fragment__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ds-sp-2);
}
.ops-fragment__title {
    margin: 0;
    font-size: var(--ds-text-xl);
    color: var(--ds-text-0);
}
.ops-fragment__subtitle {
    margin: var(--ds-sp-1) 0 0 0;
    color: var(--ds-text-3);
    font-size: var(--ds-text-sm);
}
.ops-fragment__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: var(--ds-sp-1);
}
.ops-fragment__metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--ds-sp-2);
}
.ops-fragment__metric {
    background: var(--inv-surface-2);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    padding: var(--ds-sp-2);
    min-width: 0;
}
.ops-fragment__metric span {
    display: block;
    font-size: var(--ds-text-xs);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ds-text-3);
}
.ops-fragment__metric strong {
    display: block;
    margin-top: 2px;
    font-size: var(--ds-text-sm);
    color: var(--ds-text-1);
    word-break: break-word;
}
.ops-fragment__section {
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    background: var(--inv-surface-2);
    padding: var(--ds-sp-2);
}
.ops-fragment__section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-sp-2);
    margin-bottom: var(--ds-sp-2);
}
.ops-fragment__section-title {
    margin: 0;
    color: var(--ds-text-2);
    font-size: var(--ds-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.ops-fragment__note {
    margin: 0;
    color: var(--ds-text-1);
    font-size: var(--ds-text-sm);
    white-space: pre-wrap;
}
.ops-fragment__list {
    display: grid;
    gap: 6px;
}
.ops-fragment__list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-sp-2);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    background: var(--inv-surface-1);
    padding: var(--ds-sp-2);
    color: inherit;
    text-decoration: none;
}
.ops-fragment__list-row span {
    min-width: 0;
    color: var(--ds-text-2);
    font-size: var(--ds-text-sm);
}
.ops-fragment__list-row strong {
    color: var(--ds-text-1);
    font-size: var(--ds-text-sm);
    font-variant-numeric: tabular-nums;
    text-align: right;
}
.ops-fragment__list-row.is-link:hover {
    border-color: var(--ds-border-hover);
    background: color-mix(in srgb, var(--ds-accent) 6%, var(--inv-surface-1));
}
.ops-fragment__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-sp-1);
}
.ops-fragment__empty {
    margin: 0;
    color: var(--ds-text-3);
    font-size: var(--ds-text-sm);
}

@container (max-width: 460px) {
    .ops-detail-panel .ops-fragment__header {
        flex-direction: column;
    }
    .ops-detail-panel .ops-fragment__actions {
        width: 100%;
        justify-content: flex-start;
    }
    .ops-detail-panel .ops-fragment__metrics,
    .ops-detail-panel .ops-preview-metrics {
        grid-template-columns: 1fr;
    }
    .ops-detail-panel .ops-fragment__list-row,
    .ops-detail-panel .ops-preview-listitem {
        flex-direction: column;
        align-items: flex-start;
    }
    .ops-detail-panel .ops-fragment__list-row strong {
        text-align: left;
    }
}

@media (max-width: 1180px) {
    .operations-beta-shell {
        grid-template-columns: minmax(0, 1fr);
    }
    .operations-beta-shell .invoice-beta-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(280px, 88vw);
        z-index: 130;
        transform: translateX(-100%);
        transition: transform var(--ds-dur-slow) var(--ds-ease);
    }
    .operations-beta-shell.sidebar-open .invoice-beta-sidebar {
        transform: translateX(0);
    }
    .operations-beta-shell .invoice-beta-sidebar-backdrop {
        position: fixed;
        inset: 0;
        z-index: 120;
        background: var(--ds-bg-overlay);
    }
    .operations-beta-shell.sidebar-open .invoice-beta-sidebar-backdrop {
        display: block;
    }
    .operations-beta-shell .invoice-beta-mobile-header {
        display: flex;
    }
    .operations-beta-shell .invoice-beta-mobile-tabs {
        display: block;
    }
    .operations-beta-shell .invoice-beta-filter-wrap {
        padding: var(--ds-sp-2) var(--ds-sp-3);
    }
    .operations-beta-shell .invoice-beta-content-shell {
        padding: var(--ds-sp-3);
    }
    .operations-beta-shell .ds-split__aside.is-open {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(440px, 92vw);
        min-width: min(380px, 100vw);
        border-left: 1px solid var(--ds-border);
        background: var(--inv-surface-1);
        z-index: calc(var(--ds-z-panel) + 1);
        box-shadow: var(--inv-shadow-2);
    }
    .operations-beta-shell .ds-split__aside.is-open .ops-detail-panel {
        height: 100%;
        border-radius: 0;
    }
    .operations-beta-shell .ops-filter-row--context .ops-filter-actions {
        margin-left: 0;
        width: 100%;
        justify-content: flex-start;
    }
}

@media (min-width: 1024px) {
    .operations-beta-shell .sticky-sidebar-wrapper {
        position: -webkit-sticky;
        position: sticky;
        top: 1.5rem;
        align-self: flex-start;
        height: fit-content;
        z-index: 10;
    }
    .operations-beta-shell .sticky-sidebar-wrapper .card {
        max-height: calc(100vh - 3rem);
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    .operations-beta-shell .sticky-sidebar-wrapper .card-body {
        overflow-y: auto;
        overflow-x: hidden;
        flex: 1 1 auto;
        min-height: 0;
        max-height: 100%;
    }
    .operations-beta-shell .ops-work-order-form-grid {
        align-items: start;
    }
    .ops-form-toolbar {
        position: sticky;
        bottom: var(--ds-sp-2);
        z-index: 8;
    }
}
[data-density="compact"] .ops-beta-list .ds-table--dense td {
    padding-top: var(--ds-sp-1);
    padding-bottom: var(--ds-sp-1);
}
[data-density="compact"] .ops-beta-preview.ds-card > div {
    padding: var(--ds-sp-3) !important;
}

@media (max-width: 980px) {
    .operations-beta-shell .ops-filter-control,
    .operations-beta-shell .ops-filter-control--sm {
        min-width: 130px;
        max-width: 100%;
        flex: 1 1 180px;
    }
    .operations-beta-shell .ops-filter-control--search {
        min-width: 100%;
        flex: 1 1 100%;
    }
    .operations-beta-shell .ops-filter-actions {
        margin-left: 0;
    }
    .ops-preview-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .ops-fragment__metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .ops-fragment__header {
        flex-direction: column;
    }
    .ops-fragment__actions {
        width: 100%;
        justify-content: flex-start;
    }
    .ops-form-layout,
    .ops-form-hero__stats,
    .ops-form-metrics {
        grid-template-columns: 1fr;
    }
    .ops-work-order-form__summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .ops-work-order-view__summary-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .ops-form-toolbar__divider {
        width: 100%;
        min-height: 1px;
        margin: 0;
    }
    .ops-form-rail,
    .ops-form-toolbar {
        position: static;
    }
    .ops-work-order-view__documents-list {
        max-height: none;
    }
}

/* Operations Reports Beta */
.operations-reports-beta .card {
    border: 1px solid var(--ds-border);
    background: var(--inv-surface-1);
    box-shadow: none;
}
.operations-reports-beta .collapse {
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    background: var(--inv-surface-2);
}
.operations-reports-beta .collapse-title {
    color: var(--ds-text-1);
}
.operations-reports-beta .alert {
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    background: color-mix(in srgb, var(--ds-info) 8%, var(--inv-surface-1));
}
.operations-reports-beta .alert-warning {
    background: color-mix(in srgb, var(--ds-warning) 12%, var(--inv-surface-1));
}

.rc-page {
    display: grid;
    gap: var(--ds-sp-4);
    padding: var(--ds-sp-4);
}
.rc-filter-bar {
    display: grid;
    gap: 0.75rem;
}
.rc-filter-grid {
    display: grid;
    grid-template-columns: minmax(12rem, 1.4fr) repeat(2, minmax(9rem, 1fr)) auto;
    gap: 0.75rem;
    align-items: end;
}
.rc-filter-field {
    display: grid;
    gap: 0.35rem;
    min-width: 0;
}
.rc-filter-field label {
    color: var(--ds-text-3);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.rc-filter-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: center;
    justify-content: flex-end;
}
.rc-preset-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}
.rc-status {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.85rem;
    border-radius: var(--ds-radius-md);
    border: 1px solid color-mix(in srgb, var(--ds-info) 35%, var(--ds-border));
    background: color-mix(in srgb, var(--ds-info) 10%, var(--inv-surface-1));
    color: var(--ds-text-1);
    font-size: 0.88rem;
    font-weight: 600;
}
.rc-status.is-error {
    border-color: color-mix(in srgb, var(--ds-danger) 40%, var(--ds-border));
    background: color-mix(in srgb, var(--ds-danger) 10%, var(--inv-surface-1));
}
.rc-hero {
    display: grid;
    gap: var(--ds-sp-3);
    padding: var(--ds-sp-4);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    background: var(--inv-surface-1);
    box-shadow: var(--inv-shadow-1);
}
.rc-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--ds-sp-3);
}
.rc-kpi {
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
    background: var(--inv-surface-1);
    padding: var(--ds-sp-4);
    display: grid;
    gap: var(--ds-sp-1);
    box-shadow: none;
}
.rc-kpi span {
    color: var(--ds-text-3);
    font-size: var(--ds-text-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.rc-kpi strong {
    color: var(--ds-text-0);
    font-size: clamp(1.35rem, 1.8vw, 1.75rem);
    font-weight: 800;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.rc-pnl {
    padding: var(--ds-sp-4);
    border-radius: var(--ds-radius-md);
    display: grid;
    gap: var(--ds-sp-3);
}
.rc-pnl-quiet {
    margin: 0.35rem 0 0;
    color: var(--ds-text-3);
    font-size: 0.75rem;
    line-height: 1.35;
}
.rc-pnl-quiet strong { font-weight: 650; }
.rc-pnl-quiet--success strong {
    color: color-mix(in srgb, var(--ds-success, var(--ds-turquoise)) 45%, var(--ds-text-2));
}
.rc-pnl-quiet--danger strong {
    color: color-mix(in srgb, var(--ds-danger, var(--ds-crimson)) 45%, var(--ds-text-2));
}
.rc-pnl-quiet--info strong {
    color: color-mix(in srgb, var(--ds-info) 45%, var(--ds-text-2));
}
.rc-pnl-result {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--ds-sp-3) var(--ds-sp-4);
    padding: 0.85rem 1rem;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    background: var(--inv-surface-2);
}
.rc-pnl-result__copy {
    min-width: 0;
}
.rc-pnl-result > div:first-child {
    min-width: 0;
}
.rc-pnl-result__label {
    color: var(--ds-text-3);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.rc-pnl-result__meta {
    margin: 0.28rem 0 0;
    color: var(--ds-text-2);
    font-size: 0.88rem;
    line-height: 1.35;
}
.rc-pnl-result__value {
    font-size: 1.45rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    align-self: center;
    justify-self: end;
    text-align: right;
}
@media (max-width: 640px) {
    .rc-pnl-result {
        grid-template-columns: 1fr;
    }
    .rc-pnl-result__value {
        justify-self: start;
        text-align: left;
    }
}
.rc-pnl-result--success {
    border-color: color-mix(in srgb, var(--ds-turquoise) 42%, var(--ds-border));
    background: color-mix(in srgb, var(--ds-turquoise) 10%, var(--inv-surface-1));
}
.rc-pnl-result--success .rc-pnl-result__value {
    color: color-mix(in srgb, var(--ds-turquoise) 55%, var(--ds-text-0));
}
.rc-pnl-result--danger {
    border-color: color-mix(in srgb, var(--ds-crimson) 42%, var(--ds-border));
    background: color-mix(in srgb, var(--ds-crimson) 10%, var(--inv-surface-1));
}
.rc-pnl-result--danger .rc-pnl-result__value {
    color: color-mix(in srgb, var(--ds-crimson) 55%, var(--ds-text-0));
}
.rc-kpi--success {
    border-color: color-mix(in srgb, var(--ds-turquoise) 38%, var(--ds-border));
}
.rc-kpi--success strong {
    color: color-mix(in srgb, var(--ds-turquoise) 55%, var(--ds-text-0));
}
.rc-kpi--danger {
    border-color: color-mix(in srgb, var(--ds-crimson) 38%, var(--ds-border));
}
.rc-kpi--danger strong {
    color: color-mix(in srgb, var(--ds-crimson) 55%, var(--ds-text-0));
}
.rc-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-sp-3);
    align-items: center;
    justify-content: space-between;
}
.rc-tabs {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    background: var(--inv-surface-1);
    padding: 2px;
}
.rc-tab {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--ds-text-2);
    border-radius: var(--ds-radius-sm);
    padding: 4px 10px;
    font-size: var(--ds-text-xs);
    font-weight: 600;
    cursor: pointer;
}
.rc-tab.is-active {
    background: var(--inv-accent-soft);
    color: var(--ds-text-0);
}
.rc-search {
    min-width: min(100%, 18rem);
}
.rc-panel {
    padding: var(--ds-sp-4);
    border-radius: var(--ds-radius-md);
}
.rc-panel.is-hidden {
    display: none;
}
.rc-stack {
    display: grid;
    gap: var(--ds-sp-3);
}
.rc-fold {
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    background: var(--inv-surface-2);
    padding: var(--ds-sp-3);
}
.rc-fold > summary {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: center;
    font-weight: 600;
}
.rc-fold__title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.45rem;
    min-width: 0;
}
.rc-fold__meta,
.rc-fold__total {
    color: var(--ds-text-2);
    font-size: 0.88rem;
}
.rc-fold__total {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.rc-po-tickets {
    margin-top: var(--ds-sp-3);
}
.rc-po-tickets h3 {
    margin: 0 0 0.4rem;
    font-size: 0.95rem;
}
.rc-empty {
    padding: var(--ds-sp-4);
    border: 1px dashed var(--ds-border);
    border-radius: var(--ds-radius-md);
    background: var(--inv-surface-1);
    box-shadow: none;
}
.rc-empty__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
}
.rc-empty__body {
    margin: 0.35rem 0 0;
    color: var(--ds-text-2);
}
.rc-flag {
    display: inline-block;
    margin-right: 0.35rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ds-text-3);
}
.rc-flag--made { color: color-mix(in srgb, var(--ds-success) 70%, var(--ds-text-0)); }
.rc-flag--lost { color: color-mix(in srgb, var(--ds-danger) 70%, var(--ds-text-0)); }
.rc-roster-job { background: var(--ds-bg-2); }
.rc-roster-po { background: color-mix(in srgb, var(--ds-bg-2) 55%, transparent); }
@media (max-width: 900px) {
    .rc-filter-grid {
        grid-template-columns: 1fr 1fr;
    }
    .rc-filter-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
}

/* Operations Analytics Beta */
.operations-analytics-beta .health-score-ring {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    position: relative;
    margin: 0 auto;
}
.operations-analytics-beta .health-score-a { background: linear-gradient(135deg, #10b981, #059669); }
.operations-analytics-beta .health-score-b { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.operations-analytics-beta .health-score-c { background: linear-gradient(135deg, #f59e0b, #d97706); }
.operations-analytics-beta .health-score-d { background: linear-gradient(135deg, #f97316, #ea580c); }
.operations-analytics-beta .health-score-f { background: linear-gradient(135deg, #ef4444, #dc2626); }
.operations-analytics-beta .risk-indicator {
    position: relative;
    padding: 1rem;
    border-radius: 0.5rem;
    border-left: 4px solid;
    margin-bottom: 0.5rem;
}
.operations-analytics-beta .risk-low {
    border-left-color: #10b981;
    background: rgba(16, 185, 129, 0.1);
}
.operations-analytics-beta .risk-medium {
    border-left-color: #f59e0b;
    background: rgba(245, 158, 11, 0.1);
}
.operations-analytics-beta .risk-high {
    border-left-color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}
.operations-analytics-beta .narrative-section {
    margin-bottom: 2rem;
    scroll-margin-top: 1rem;
}
.operations-analytics-beta .narrative-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid hsl(var(--b2));
}
.operations-analytics-beta .narrative-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.operations-analytics-beta .section-executive { background: linear-gradient(135deg, #7c3aed, #5b21b6); }
.operations-analytics-beta .section-business { background: linear-gradient(135deg, #059669, #047857); }
.operations-analytics-beta .section-operational { background: linear-gradient(135deg, #dc2626, #b91c1c); }
.operations-analytics-beta .section-predictive { background: linear-gradient(135deg, #0891b2, #0e7490); }
.operations-analytics-beta .chart-container {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    position: relative;
    height: 350px;
    margin: 1rem 0;
}
.operations-analytics-beta .metric-widget {
    transition: all 0.3s ease;
    cursor: pointer;
    border-radius: 0.75rem;
}
.operations-analytics-beta .metric-widget:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
.operations-analytics-beta .widget-expanded {
    grid-column: span 2;
    transform: scale(1.02);
}
.operations-analytics-beta .trend-up { color: #10b981; }
.operations-analytics-beta .trend-down { color: #ef4444; }
.operations-analytics-beta .trend-flat { color: #6b7280; }
.operations-analytics-beta .trend-accelerating::after {
    content: "\2197";
    margin-left: 0.25rem;
}
.operations-analytics-beta .trend-decelerating::after {
    content: "\2935";
    margin-left: 0.25rem;
}
.operations-analytics-beta .trend-flat::after {
    content: "\2192";
    margin-left: 0.25rem;
}
.operations-analytics-beta .detail-section {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}
.operations-analytics-beta .detail-section.expanded {
    max-height: 1000px;
}
.operations-analytics-beta .action-btn {
    background: linear-gradient(135deg, hsl(var(--p)), hsl(var(--pf)));
    border: 0;
    color: #fff;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: all 0.2s;
}
.operations-analytics-beta .action-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3);
}
.operations-analytics-beta .alert-critical { border-left-color: #ef4444; background: rgba(239, 68, 68, 0.1); }
.operations-analytics-beta .alert-warning { border-left-color: #f59e0b; background: rgba(245, 158, 11, 0.1); }
.operations-analytics-beta .alert-info { border-left-color: #3b82f6; background: rgba(59, 130, 246, 0.1); }
.operations-analytics-beta .alert-success { border-left-color: #10b981; background: rgba(16, 185, 129, 0.1); }
.operations-analytics-beta .comet-chart {
    max-width: 100%;
}
/* Ticket view rail: pin 2-col above this width so the 980px form collapse cannot dump Additional Info under Pioneer. */
@media (min-width: 900px) {
    .ops-work-order-view .ops-work-order-view__top {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 300px !important;
        align-items: start;
    }
    .ops-work-order-view .ops-work-order-view__top > .ops-form-main {
        grid-column: 1 !important;
        grid-row: 1;
    }
    .ops-work-order-view .ops-work-order-view__top > .ops-form-rail {
        grid-column: 2 !important;
        grid-row: 1;
        max-width: 300px;
    }
}
@media (max-width: 899px) {
    .ops-work-order-view .ops-work-order-view__top {
        grid-template-columns: 1fr;
    }
    .ops-work-order-view .ops-work-order-view__top > .ops-form-main,
    .ops-work-order-view .ops-work-order-view__top > .ops-form-rail {
        grid-column: auto;
        max-width: none;
    }
}
@media (max-width: 768px) {
    .operations-analytics-beta .health-score-ring {
        width: 100px;
        height: 100px;
        font-size: 1.5rem;
    }
    .operations-analytics-beta .narrative-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}

html.hide-costing .costing-pnl-card,
html.hide-costing .b2w-costing-panel,
html.hide-costing [data-costing-only],
html.hide-costing [data-costing-nav],
html.hide-costing [data-include-costing] {
    display: none !important;
}

/* Shortcut modals (Alt+/ Client POs, Ctrl+/ background processes) */
dialog.ds-modal .shortcut-modal__box {
    width: min(96vw, 1080px);
    max-height: 88vh;
}
.shortcut-modal__body {
    padding: var(--ds-sp-3) var(--ds-sp-5);
}
.shortcut-filter-bar {
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    margin: 0;
}
.shortcut-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.shortcut-section {
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    background: var(--ds-bg-2);
    margin-top: var(--ds-sp-3);
}
.shortcut-section > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px;
    font-size: var(--ds-text-sm);
    font-weight: 600;
}
.shortcut-section > summary::-webkit-details-marker { display: none; }
.shortcut-section__body {
    padding: 0 14px 12px;
}
.shortcut-sync-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.shortcut-job-card {
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    padding: 10px 12px;
    background: var(--ds-bg-1);
}
.shortcut-job-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}
.shortcut-kicker {
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ds-text-3);
    margin: 10px 0 4px;
}
.shortcut-stack { display: flex; flex-direction: column; gap: 6px; }
.shortcut-stack--scroll { max-height: 11rem; overflow: auto; }
.shortcut-nested { margin-top: 8px; }
.shortcut-nested > summary {
    cursor: pointer;
    font-size: var(--ds-text-xs);
    color: var(--ds-text-3);
}
.po-dir-table-wrap { overflow: auto; }
.po-dir-table { width: 100%; border-collapse: collapse; }
.po-dir-table th,
.po-dir-table td {
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid var(--ds-border);
    vertical-align: top;
    font-size: var(--ds-text-sm);
}
.po-dir-table th {
    font-size: 10px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ds-text-3);
    position: sticky;
    top: 0;
    background: var(--ds-bg-1);
}
.po-dir-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.po-dir-po { font-weight: 600; }
.po-dir-table .po-dir-sub,
.po-dir-sub {
    display: block;
    color: var(--ds-text-3);
    font-size: var(--ds-text-xs);
    margin-top: 2px;
    line-height: 1.3;
}
.po-dir-bar {
    height: 4px;
    border-radius: 99px;
    background: var(--ds-border);
    overflow: hidden;
    margin-top: 4px;
    min-width: 72px;
}
.po-dir-bar > span { display: block; height: 100%; border-radius: inherit; }
.po-dir-bar.is-ok > span { background: var(--ds-turquoise); }
.po-dir-bar.is-watch > span { background: var(--ds-blood-orange); }
.po-dir-bar.is-over > span { background: var(--ds-crimson); }
.po-dir-bar.is-open > span { background: var(--ds-text-3); }
@media (max-width: 800px) {
    .shortcut-sync-grid { grid-template-columns: 1fr; }
}