/*
 * ═══════════════════════════════════════════════════════════════════════════
 * ClearView Design System  -  cv-system.css  v3.6.0
 * ═══════════════════════════════════════════════════════════════════════════
 * Authoritative token + component layer for the entire ClearView platform.
 * Load AFTER styles.css + shell.css so these declarations win cleanly.
 *
 * Aesthetic: OpsControl Tactical Command HUD
 *   - Orbitron ........... headings, nav chrome, buttons, status labels
 *   - JetBrains Mono ..... data, metrics, telemetry, tables, badges
 *   - Plus Jakarta Sans .. body text, descriptions, forms, reading
 *
 * Palette: Amber primary (#ff6b00) / Cyan secondary (#00D8F6) / warm neutrals
 * Shape:   Flat-square (0px radius everywhere)
 *
 * Sections:
 *   1. TOKENS            - CSS custom properties, dark + light
 *   2. RESET & BASE      - global typography, antialiasing
 *   3. PAGE LAYOUT       - page header, page body, content areas
 *   4. CARDS             - .cv-card and variants
 *   5. TABLES            - .cv-table (data grids)
 *   6. BUTTONS           - .cv-btn hierarchy
 *   7. FORMS             - inputs, selects, textareas, labels
 *   8. BADGES & PILLS    - status, priority, role indicators
 *   9. KPI               - metric cards and inline pills
 *  10. TABS              - tab bars
 *  11. MODALS            - overlay dialogs
 *  12. EMPTY STATES      - guided zero-data views
 *  13. ALERTS            - flash messages
 *  14. UTILITY           - spacing, text, flex helpers
 *  15. RESPONSIVE        - mobile-first breakpoints
 *  16. SHELL CHROME LOCK - sidebar/topnav theme authority (absorbs the
 *                          former inline <style id="cv-theme-amber"> patch)
 *  17. SIDEBAR ENHANCE   - nav search, favorites, context menu (absorbs the
 *                          former inline <style id="cv-sidebar-enhance"> patch)
 *  18. MOBILE HARDENING  - touch targets, stacking, modal + table behavior
 *
 * v2.0.0 - Inline shell patches absorbed into the system. ZERO hardcoded
 *          hex outside Section 1. Light accent aligned to design reference
 *          (#E05300). Tenant branding now flows via --cv-accent.
 * v2.9.0 - §25 added: month-end close, accountant controls, recurring
 *          journals, cash-flow reporting, and responsive close workflows.
 * v2.8.2 - §24b added: compact ClearView Books mobile header, wrapped main
 *          navigation, two-column KPI grid, Banking action grid, and wrapped
 *          Banking sub-navigation without changing accounting behavior.
 * v2.1.0 - LIGHT MODE CONTRAST PASS. Canvas darkened so white cards pop.
 *          Borders strengthened. Light cyan deepened for text legibility.
 *          §19 added: generic button normalization (Orbitron + contrast).
 * v2.2.0 - Bridge extended with v1-page vocabulary (--muted, --card,
 *          --button-bg, --input-bg). Scoped KPI metric colors so .num
 *          semantic classes always render warn/danger tokens.
 * v2.3.0 - §19 reined in: typography-only for generic buttons (backgrounds/
 *          padding broke icon buttons and table action buttons).
 * v2.5.0 - §22 added: choice cards (mode selection), check pills (method
 * v2.6.0 - §20 added: responsive layout contract. shell-main is now the
 *          single content frame (max 1600px, centered, fluid padding on
 *          the 1440/1180/1024/768/390 ladder); the five legacy wrappers
 *          (.cv-page/.cv-wrap/.page-wrap/.admin-wrap/#estApp/#invApp) are
 *          normalized to inherit it; box-sizing + media/pre/table guards
 *          contain horizontal overflow system-wide.
 * v2.6.1 - §20 fix: shell-main no longer sets margin-inline/width (that
 *          overrode shell.css's sidebar margin-left, pushing content under
 *          the fixed sidebar and causing left-clipping + overflow). The
 *          1600px cap + centering now live on shell-main's children via
 *          flex align; shell-main stays the offset frame shell.css owns.
 * v2.6.2 - §23 added: responsive ClearView Books one-page workspace,
 *          internal tabs, accounting tables, reports, journal dialogs,
 *          desktop/tablet/mobile layout rules, and shell-logo class rules.
 * v2.6.3 - ClearView Books setup dialog alignment pass: equal-width fields,
 *          stacked labels, separated guidance panel, and mobile-safe footer.
 * v2.6.4 - ClearView Books bank-account dialog alignment and loading-state
 *          readiness controls.
 * v2.6.5 - ClearView Books journal dialog widened for desktop with fixed-fit
 *          columns; tablet/mobile journal lines stack into labeled fields.
 * v2.8.1 - ClearView Books banking review modal rebuilt as separated,
 *          responsive action cards with consistent field and button layout.
 *          toggles), check rows, toasts, .cv-hidden. Built for the Payments
 *          and Financing settings pages; reusable platform-wide.
 * v3.6.0 - Workspace Modernization Phase 1 foundation: explicit dark-action
 *          contrast tokens and button variant, opt-in dense workspace split/list/
 *          detail/activity/file primitives, and shared truthful state actions.
 * v3.5.0 - Customer and Employee shared workspace foundation: dense list and record
 *          composition, page-owned collapsible secondary rail, compact KPI strip,
 *          section navigation, state surfaces and structural action bars.
 * v3.4.0 - UI Normalization Phase 1: governed Square / Soft Rounded Shape token,
 *          canonical component geometry scope, and Settings Appearance reference.
 * v3.3.0 - Global controls completion: compact theme-native date/time overlays,
 *          explicit setting-row toggle utility, and stronger native temporal/
 *          choice suppression while preserving semantic form inputs underneath.
 * v3.2.1 - Phase 1 density correction: restores compact professional desktop
 *          control sizing while keeping 16px padding for textareas/fillable
 *          sections and preserving the Phase 1 custom-control foundation.
 * v3.2.0 - Global Control Foundation Phase 1: reusable density tokens, stronger
 *          native-control suppression, and opt-in multi-select presentation.
 * v3.1.0 - ClearView Surface Standard Build 2: shared page headers, filter rows,
 *          tabs, cards, metrics, action groups, data tables, and contained
 *          planning-board layout using existing theme tokens.
 * v3.0.0 - Global UI Controls Foundation Build 1: compact token-based
 *          form controls, theme-radius inheritance, custom temporal week
 *          support, reusable control/layout utilities, and native spinner
 *          suppression across all authenticated shell surfaces.
 * v2.4.0 - Mobile layout guards: content clears the fixed hamburger toggle
 *          and the floating chat/FAB stack; grid/flex children get
 *          min-width:0 at mobile so side columns stop crushing; media
 *          elements capped at container width.
 * ═══════════════════════════════════════════════════════════════════════════
 */


/* ═══════════════════════════════════════════════════════════════════════════
   1. TOKENS
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* ── Canvas ── */
    --cv-bg:           #08090d;
    --cv-surface:      #11131a;
    --cv-surface2:     #1a1d26;
    --cv-surface3:     #22252f;
    --cv-border:       #2a2d3a;
    --cv-border-subtle:#1e2130;

    /* ── Text ── */
    --cv-text:         #eeeae3;
    --cv-text-dim:     #b0aca5;
    --cv-text-muted:   #706c65;

    /* ── Accent: Amber (primary) ── */
    --cv-accent:       #ff6b00;
    --cv-accent-dim:   #cc5500;
    --cv-accent-soft:  rgba(255, 107, 0, .10);
    --cv-accent-hover: rgba(255, 107, 0, .18);
    --cv-accent-ink:   #08090d;            /* text on amber fills */
    --cv-org-brand-accent: var(--cv-accent); /* explicit organization-brand surfaces only */

    /* ── Shell chrome (sidebar / topnav) ── */
    --cv-shell-fg:      var(--cv-text);
    --cv-shell-fg-dim:  var(--cv-text-dim);
    --cv-shell-section: var(--cv-text-dim);
    --cv-shell-strong:  var(--cv-text);

    /* ── Cyan (secondary / telemetry) ── */
    --cv-cyan:         #00D8F6;
    --cv-cyan-dim:     #00a8c0;
    --cv-cyan-soft:    rgba(0, 216, 246, .10);

    /* ── Semantic ── */
    --cv-success:      #6ee7b7;
    --cv-success-soft: rgba(110, 231, 183, .10);
    --cv-danger:       #fca5a5;
    --cv-danger-soft:  rgba(252, 165, 165, .10);
    --cv-warn:         #fcd34d;
    --cv-warn-soft:    rgba(252, 211, 77, .10);
    --cv-info:         #93c5fd;
    --cv-info-soft:    rgba(147, 197, 253, .10);

    /* ── Shape ──
       --cv-shape-radius is the single authenticated-desktop Shape value.
       --cv-radius remains only as a compatibility alias while exact-current
       route families migrate to --cv-control-radius / --cv-surface-radius. */
    --cv-shape-radius: 0px;
    --cv-shape-control-radius: var(--cv-shape-radius);
    --cv-shape-surface-radius: var(--cv-shape-radius);
    --cv-shape-attached-radius: var(--cv-shape-radius);
    --cv-control-radius: var(--cv-shape-control-radius);
    --cv-surface-radius: var(--cv-shape-surface-radius);
    --cv-attached-radius: var(--cv-shape-attached-radius);
    --cv-pill-radius: 999px;
    --cv-circle-radius: 50%;
    --cv-radius:       var(--cv-shape-radius);

    /* ── Shadows ── */
    --cv-shadow-sm:    0 1px 3px rgba(0,0,0,.4);
    --cv-shadow-md:    0 4px 12px rgba(0,0,0,.5);
    --cv-shadow-lg:    0 8px 30px rgba(0,0,0,.6);

    /* ── Fonts ── */
    --cv-font-display: 'Orbitron', ui-sans-serif, system-ui, sans-serif;
    --cv-font-data:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --cv-font-body:    'Plus Jakarta Sans', 'InterVar', ui-sans-serif, system-ui, -apple-system, sans-serif;

    /* ── Spacing scale (4px base) ── */
    --cv-sp-1: 4px;   --cv-sp-2: 8px;   --cv-sp-3: 12px;
    --cv-sp-4: 16px;  --cv-sp-5: 20px;  --cv-sp-6: 24px;
    --cv-sp-8: 32px;  --cv-sp-10: 40px; --cv-sp-12: 48px;

    /* ── High-contrast dark action ──
       Shared semantic authority for genuinely dark-filled actionable controls.
       The foreground is intentionally white by product contract. */
    --cv-action-dark-bg:        var(--cv-surface3);
    --cv-action-dark-bg-hover:  var(--cv-surface2);
    --cv-action-dark-border:    var(--cv-surface3);
    --cv-action-dark-fg:        #ffffff;
}

/* Appearance Shape projection. The server places cv-shape-soft on <html>
   before CSS is parsed, so canonical components have the correct geometry on
   first paint. Square is the no-class/default state. */
html.cv-shape-soft {
    --cv-shape-radius: 8px;
}

/* ── Light Theme ── */
html.theme-light {
    --cv-bg:           #e7e3da;   /* darkened canvas - white cards now pop */
    --cv-surface:      #ffffff;
    --cv-surface2:     #ece8e1;
    --cv-surface3:     #ddd8ce;
    --cv-border:       #c8c3b8;   /* strengthened so cards/tables read clearly */
    --cv-border-subtle:#d9d4ca;

    --cv-text:         #1e1c18;
    --cv-text-dim:     #6a665e;
    --cv-text-muted:   #9a968e;

    --cv-accent:       #E05300;            /* Deep Amber-Orange (design ref) */
    --cv-accent-dim:   #b34200;
    --cv-accent-soft:  rgba(224, 83, 0, .08);
    --cv-accent-hover: rgba(224, 83, 0, .14);
    --cv-accent-ink:   #08090d;            /* WCAG text on amber fills (light) */

    /* ── Shell chrome (light - deliberately darker than text-dim for nav legibility) ── */
    --cv-shell-fg:      #1e1c18;
    --cv-shell-fg-dim:  #2a2824;
    --cv-shell-section: #4a473f;
    --cv-shell-strong:  #000000;

    --cv-cyan:         #007A8F;   /* deepened - readable as TEXT on light grey */
    --cv-cyan-dim:     #00606F;
    --cv-cyan-soft:    rgba(0, 122, 143, .08);

    --cv-success:      #047857;
    --cv-success-soft: rgba(4, 120, 87, .08);
    --cv-danger:       #b91c1c;
    --cv-danger-soft:  rgba(185, 28, 28, .08);
    --cv-warn:         #b45309;
    --cv-warn-soft:    rgba(180, 83, 9, .08);
    --cv-info:         #1d4ed8;
    --cv-info-soft:    rgba(29, 78, 216, .08);

    --cv-shadow-sm:    0 1px 3px rgba(0,0,0,.10);
    --cv-shadow-md:    0 4px 14px rgba(0,0,0,.13);
    --cv-shadow-lg:    0 10px 34px rgba(0,0,0,.16);

    /* In light mode the dark action is derived from the current theme text
       authority, so Classic and Blue packs remain palette-owned. */
    --cv-action-dark-bg:        var(--cv-text);
    --cv-action-dark-bg-hover:  var(--cv-shell-section);
    --cv-action-dark-border:    var(--cv-text);
}

/* ── ClearView Blue Professional Theme Preset ─────────────────────────────
   Activated by html.cv-scheme-blue. Default amber tokens above remain intact. */
html.cv-scheme-blue {
    --cv-bg:           #061225;
    --cv-surface:      #0A1D3D;
    --cv-surface2:     #102B56;
    --cv-surface3:     #14396F;
    --cv-border:       rgba(229, 231, 235, .18);
    --cv-border-subtle:rgba(229, 231, 235, .10);

    --cv-text:         #FFFFFF;
    --cv-text-dim:     #D7DEE8;
    --cv-text-muted:   #98A5B3;

    --cv-accent:       #1677FF;
    --cv-accent-dim:   #0F5FD1;
    --cv-accent-soft:  rgba(22, 119, 255, .13);
    --cv-accent-hover: rgba(22, 119, 255, .22);
    --cv-accent-ink:   #061225;

    --cv-shell-fg:      #FFFFFF;
    --cv-shell-fg-dim:  #D7DEE8;
    --cv-shell-section: #AEB9C8;
    --cv-shell-strong:  #FFFFFF;

    --cv-cyan:         #00C6FF;
    --cv-cyan-dim:     #00A6D8;
    --cv-cyan-soft:    rgba(0, 198, 255, .13);

    --cv-success:      #34D399;
    --cv-success-soft: rgba(52, 211, 153, .11);
    --cv-danger:       #F87171;
    --cv-danger-soft:  rgba(248, 113, 113, .11);
    --cv-warn:         #FBBF24;
    --cv-warn-soft:    rgba(251, 191, 36, .11);
    --cv-info:         #93C5FD;
    --cv-info-soft:    rgba(147, 197, 253, .11);
}

html.cv-scheme-blue.theme-light {
    --cv-bg:           #F8FAFC;
    --cv-surface:      #FFFFFF;
    --cv-surface2:     #F1F5F9;
    --cv-surface3:     #E5E7EB;
    --cv-border:       #D3D9E3;
    --cv-border-subtle:#E5E7EB;

    --cv-text:         #0A1D3D;
    --cv-text-dim:     #4B5563;
    --cv-text-muted:   #6B7280;

    --cv-accent:       #1677FF;
    --cv-accent-dim:   #0F5FD1;
    --cv-accent-soft:  rgba(22, 119, 255, .09);
    --cv-accent-hover: rgba(22, 119, 255, .15);
    --cv-accent-ink:   #061225;

    --cv-shell-fg:      #0A1D3D;
    --cv-shell-fg-dim:  #334155;
    --cv-shell-section: #4B5563;
    --cv-shell-strong:  #061225;

    --cv-cyan:         #009FCE;
    --cv-cyan-dim:     #007EA4;
    --cv-cyan-soft:    rgba(0, 198, 255, .10);

    --cv-success:      #047857;
    --cv-success-soft: rgba(4, 120, 87, .08);
    --cv-danger:       #B91C1C;
    --cv-danger-soft:  rgba(185, 28, 28, .08);
    --cv-warn:         #B45309;
    --cv-warn-soft:    rgba(180, 83, 9, .08);
    --cv-info:         #1D4ED8;
    --cv-info-soft:    rgba(29, 78, 216, .08);
}

/* ── ClearView Inter Professional Typography Preset ───────────────────────
   Activated by html.cv-font-inter. Data font stays mono for IDs, money, dates. */
html.cv-font-inter {
    --cv-font-display: 'Inter', 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --cv-font-body:    'Inter', 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --cv-font-data:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

html.cv-font-inter body.shell-page {
    font-optical-sizing: auto;
}


/* ═══════════════════════════════════════════════════════════════════════════
   2. RESET & BASE TYPOGRAPHY
   ═══════════════════════════════════════════════════════════════════════════ */

/* Appearance geometry is semantic, not universal. Ordinary controls and
   surfaces receive Shape through --cv-control-radius / --cv-surface-radius;
   semantic circles and pills keep their own permanent geometry. */

/* Body text uses Plus Jakarta Sans */
body.shell-page {
    font-family: var(--cv-font-body) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: var(--cv-bg);
    color: var(--cv-text);
}

/* Display font: Orbitron for all headings */
body.shell-page h1,
body.shell-page h2,
body.shell-page h3,
body.shell-page h4,
body.shell-page h5,
body.shell-page h6 {
    font-family: var(--cv-font-display) !important;
    color: var(--cv-text);
    line-height: 1.2;
    margin: 0;
}
body.shell-page h1 { font-size: 22px; font-weight: 900; letter-spacing: -.03em; }
body.shell-page h2 { font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
body.shell-page h3 { font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
body.shell-page h4 { font-size: 12px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }

/* Data font: JetBrains Mono for numbers/metrics */
body.shell-page .cv-data,
body.shell-page .cv-mono {
    font-family: var(--cv-font-data) !important;
    font-variant-numeric: tabular-nums;
}

/* Body / reading text */
body.shell-page p,
body.shell-page li,
body.shell-page td,
body.shell-page label,
body.shell-page input,
body.shell-page select,
body.shell-page textarea {
    font-family: var(--cv-font-body) !important;
}

/* Links -
   Uses attribute selectors so ANY <a> whose class contains "btn" or "button"
   falls through to that class's own color rule. This means every current
   button-pattern class (.button, .pr-btn, .cv-btn-*, .mh-btn, .btn-open,
   .toolbar-btn, .shell-icon-btn, .est-btn, .inv-btn, etc.) AND every future
   one self-heals - no CSS edit needed when a new button class appears.
   Non-button anchors that still need exclusion (tab strips) get explicit :not(). */
body.shell-page a:not([class*="btn"]):not([class*="button"]):not(.tab-item):not(.etab) {
    color: var(--cv-accent);
    text-decoration: none;
}
body.shell-page a:not([class*="btn"]):not([class*="button"]):not(.tab-item):not(.etab):hover {
    color: var(--cv-accent-dim);
    text-decoration: underline;
}


/* ═══════════════════════════════════════════════════════════════════════════
   3. PAGE LAYOUT
   ═══════════════════════════════════════════════════════════════════════════ */

/* Standard page wrapper inside .shell-main */
.cv-page {
    padding: var(--cv-sp-6) var(--cv-sp-8);
    max-width: 1400px;
    width: 100%;
}

/* Page header: title row with optional subtitle + actions */
.cv-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--cv-sp-4);
    margin-bottom: var(--cv-sp-6);
    flex-wrap: wrap;
}
.cv-page-header-left h1 {
    font-size: 22px;
    margin-bottom: 2px;
}
.cv-page-header-left p {
    color: var(--cv-text-dim);
    font-size: 13px;
    margin: 0;
}
.cv-page-header-actions {
    display: flex;
    align-items: center;
    gap: var(--cv-sp-2);
    flex-wrap: wrap;
}

/* Eyebrow label (section headers, column headers) */
.cv-eyebrow {
    font-family: var(--cv-font-display) !important;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--cv-text-muted);
}

/* Section divider */
.cv-divider {
    height: 1px;
    background: var(--cv-border);
    margin: var(--cv-sp-6) 0;
    border: none;
}

/* Content grid (responsive multi-column) */
.cv-grid {
    display: grid;
    gap: var(--cv-sp-4);
}
.cv-grid-2 { grid-template-columns: repeat(2, 1fr); }
.cv-grid-3 { grid-template-columns: repeat(3, 1fr); }
.cv-grid-4 { grid-template-columns: repeat(4, 1fr); }
.cv-grid-auto { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }


/* ═══════════════════════════════════════════════════════════════════════════
   4. CARDS
   ═══════════════════════════════════════════════════════════════════════════ */

.cv-card {
    background: var(--cv-surface);
    border: 1px solid var(--cv-border);
    padding: var(--cv-sp-5);
    position: relative;
}

.cv-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cv-sp-3);
    margin-bottom: var(--cv-sp-4);
}
.cv-card-header h2,
.cv-card-header h3 {
    margin: 0;
}

.cv-card-body {
    color: var(--cv-text);
    font-size: 13px;
    line-height: 1.6;
}

.cv-card-footer {
    margin-top: var(--cv-sp-4);
    padding-top: var(--cv-sp-3);
    border-top: 1px solid var(--cv-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cv-sp-2);
}

/* Ordinary cards do not carry decorative theme-color edge strips. */
.cv-card--accent,
.cv-card--cyan {
    border-top: 1px solid var(--cv-border);
}

/* Clickable card */
.cv-card--link {
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.cv-card--link:hover {
    border-color: var(--cv-accent);
    background: var(--cv-surface2);
}

/* Compact card (less padding) */
.cv-card--compact {
    padding: var(--cv-sp-3);
}


/* ═══════════════════════════════════════════════════════════════════════════
   5. TABLES
   ═══════════════════════════════════════════════════════════════════════════ */

.cv-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.cv-table thead th {
    font-family: var(--cv-font-display) !important;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: var(--cv-text-muted);
    text-align: left;
    padding: var(--cv-sp-2) var(--cv-sp-3);
    border-bottom: 2px solid var(--cv-border);
    white-space: nowrap;
    user-select: none;
}

.cv-table tbody td {
    padding: var(--cv-sp-3);
    border-bottom: 1px solid var(--cv-border-subtle);
    color: var(--cv-text);
    vertical-align: middle;
    font-family: var(--cv-font-body) !important;
}

.cv-table tbody tr {
    transition: background .1s ease;
}
.cv-table tbody tr:hover td {
    background: var(--cv-surface2);
}
.cv-table tbody tr:last-child td {
    border-bottom: none;
}

/* Clickable row */
.cv-table tbody tr.cv-clickable {
    cursor: pointer;
}
.cv-table tbody tr.cv-clickable:hover td {
    background: var(--cv-accent-soft);
}

/* Numeric columns: monospace, right-aligned */
.cv-table td.cv-num,
.cv-table th.cv-num {
    font-family: var(--cv-font-data) !important;
    font-variant-numeric: tabular-nums;
    text-align: right;
    font-weight: 600;
}

/* Sortable header */
.cv-table th.cv-sortable {
    cursor: pointer;
}
.cv-table th.cv-sortable:hover {
    color: var(--cv-accent);
}

/* Compact table variant */
.cv-table--compact thead th {
    padding: var(--cv-sp-1) var(--cv-sp-2);
    font-size: 9px;
}
.cv-table--compact tbody td {
    padding: var(--cv-sp-2);
    font-size: 12px;
}

/* Scrollable table wrapper for mobile */
.cv-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}


/* ═══════════════════════════════════════════════════════════════════════════
   6. BUTTONS
   ═══════════════════════════════════════════════════════════════════════════ */

/* Base button - Orbitron chrome font */
.cv-btn,
.cv-btn-primary,
.cv-btn-ghost,
.cv-btn-danger,
.cv-btn-cyan {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: var(--cv-font-display) !important;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .03em;
    padding: 8px 16px;
    border: 1px solid var(--cv-border);
    background: var(--cv-surface);
    color: var(--cv-text);
    cursor: pointer;
    text-decoration: none;
    line-height: 1.2;
    white-space: nowrap;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
    -webkit-tap-highlight-color: transparent;
}
.cv-btn:hover {
    background: var(--cv-surface2);
    border-color: var(--cv-accent);
    color: var(--cv-text);
    text-decoration: none;
}

/* Primary: tinted amber (the Tactical Command look - amber border + soft fill) */
.cv-btn-primary {
    background: var(--cv-accent-soft) !important;
    color: var(--cv-accent) !important;
    border: 1px solid var(--cv-accent) !important;
}
.cv-btn-primary:hover {
    background: var(--cv-accent-hover) !important;
    text-decoration: none;
}

/* Ghost: transparent with border */
.cv-btn-ghost {
    background: transparent;
    color: var(--cv-text-dim);
    border: 1px solid var(--cv-border);
}
.cv-btn-ghost:hover {
    background: var(--cv-surface);
    color: var(--cv-text);
    border-color: var(--cv-accent);
    text-decoration: none;
}

/* Danger */
.cv-btn-danger {
    background: var(--cv-danger-soft);
    color: var(--cv-danger);
    border-color: var(--cv-danger);
}
.cv-btn-danger:hover {
    background: rgba(252, 165, 165, .18);
    text-decoration: none;
}
html.theme-light .cv-btn-danger {
    color: var(--cv-danger);
    border-color: var(--cv-danger);
}

/* Cyan / secondary */
.cv-btn-cyan {
    background: var(--cv-cyan-soft);
    color: var(--cv-cyan);
    border-color: var(--cv-cyan);
}
.cv-btn-cyan:hover {
    background: rgba(0, 216, 246, .18);
    text-decoration: none;
}

/* Sizes */
.cv-btn-sm, .cv-btn-primary.cv-btn-sm, .cv-btn-ghost.cv-btn-sm,
.cv-btn-danger.cv-btn-sm, .cv-btn-cyan.cv-btn-sm {
    padding: 5px 10px;
    font-size: 10px;
}
.cv-btn-lg, .cv-btn-primary.cv-btn-lg, .cv-btn-ghost.cv-btn-lg {
    padding: 11px 22px;
    font-size: 14px;
}

/* Disabled */
.cv-btn:disabled, .cv-btn-primary:disabled, .cv-btn-ghost:disabled,
.cv-btn-danger:disabled, .cv-btn-cyan:disabled {
    opacity: .4;
    cursor: not-allowed;
    pointer-events: none;
}

/* Icon-only button (square, 32x32) */
.cv-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    color: var(--cv-text-dim);
    border: 1px solid transparent;
    cursor: pointer;
    padding: 0;
    transition: all .12s ease;
}
.cv-icon-btn:hover {
    color: var(--cv-accent);
    background: var(--cv-surface);
    border-color: var(--cv-border);
}
.cv-icon-btn svg { display: block; width: 16px; height: 16px; }

/* Button press physics (Tactical Command tactile feedback) */
.cv-btn:active, .cv-btn-primary:active, .cv-btn-ghost:active,
.cv-btn-danger:active, .cv-btn-cyan:active, .cv-icon-btn:active {
    transform: scale(.97);
    transition: transform .08s ease;
}


/* ═══════════════════════════════════════════════════════════════════════════
   7. FORMS
   ═══════════════════════════════════════════════════════════════════════════ */

/* Label */
.cv-label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: var(--cv-sp-3);
}
.cv-label span,
.cv-label-text {
    font-family: var(--cv-font-display) !important;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: var(--cv-text-muted);
}

/* Input / Select / Textarea - flat dark field with cyan focus glow */
.cv-input,
.cv-select,
.cv-textarea {
    width: 100%;
    background: var(--cv-bg);
    border: 1px solid var(--cv-border);
    color: var(--cv-text);
    padding: 9px 12px;
    font-family: var(--cv-font-body) !important;
    font-size: 13px;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.cv-input:focus,
.cv-select:focus,
.cv-textarea:focus {
    border-color: var(--cv-cyan);
    box-shadow: 0 0 0 2px var(--cv-cyan-soft);
}
.cv-input::placeholder,
.cv-textarea::placeholder {
    color: var(--cv-text-muted);
}
.cv-textarea {
    resize: vertical;
    min-height: 80px;
    line-height: 1.6;
}
.cv-select {
    cursor: pointer;
}

/* Inline form row */
.cv-form-row {
    display: flex;
    gap: var(--cv-sp-3);
    align-items: flex-end;
    flex-wrap: wrap;
}
.cv-form-row > * {
    flex: 1;
    min-width: 160px;
}

/* Search input with icon */
.cv-search {
    position: relative;
}
.cv-search input {
    padding-left: 36px;
}
.cv-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--cv-text-muted);
    pointer-events: none;
}
.cv-search-icon svg { width: 14px; height: 14px; }

/* Toggle switch */
.cv-toggle {
    position: relative;
    width: 40px;
    height: 22px;
    display: inline-block;
}
.cv-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}
.cv-toggle-track {
    position: absolute;
    inset: 0;
    background: var(--cv-surface2);
    border: 1px solid var(--cv-border);
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease;
}
.cv-toggle-track::after {
    content: '';
    position: absolute;
    left: 2px;
    top: 2px;
    width: 16px;
    height: 16px;
    background: var(--cv-text-dim);
    transition: transform .2s ease, background .2s ease;
}
.cv-toggle input:checked + .cv-toggle-track {
    background: var(--cv-accent-soft);
    border-color: var(--cv-accent);
}
.cv-toggle input:checked + .cv-toggle-track::after {
    transform: translateX(18px);
    background: var(--cv-accent);
}


/* ═══════════════════════════════════════════════════════════════════════════
   8. BADGES & PILLS
   ═══════════════════════════════════════════════════════════════════════════ */

/* Base badge: JetBrains Mono, bold, square */
.cv-badge {
    display: inline-block;
    font-family: var(--cv-font-data) !important;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 3px 10px;
    white-space: nowrap;
    line-height: 1.3;
    background: var(--cv-surface2);
    color: var(--cv-text-dim);
    border: 1px solid var(--cv-border);
}

/* Semantic badge colors */
.cv-badge--active,
.cv-badge--open {
    background: var(--cv-cyan-soft);
    color: var(--cv-cyan);
    border-color: transparent;
}
.cv-badge--progress,
.cv-badge--amber {
    background: var(--cv-accent-soft);
    color: var(--cv-accent);
    border-color: transparent;
}
.cv-badge--success,
.cv-badge--paid,
.cv-badge--closed,
.cv-badge--complete {
    background: var(--cv-success-soft);
    color: var(--cv-success);
    border-color: transparent;
}
.cv-badge--danger,
.cv-badge--overdue {
    background: var(--cv-danger-soft);
    color: var(--cv-danger);
    border-color: transparent;
}
.cv-badge--warn,
.cv-badge--review,
.cv-badge--pending {
    background: var(--cv-warn-soft);
    color: var(--cv-warn);
    border-color: transparent;
}
.cv-badge--info {
    background: var(--cv-info-soft);
    color: var(--cv-info);
    border-color: transparent;
}

/* Priority pills (solid background) */
.cv-badge--high {
    background: var(--cv-accent);
    color: #000;
    border-color: var(--cv-accent);
    font-weight: 800;
}
.cv-badge--medium {
    background: var(--cv-warn);
    color: #000;
    border-color: var(--cv-warn);
}
.cv-badge--low {
    background: var(--cv-surface2);
    color: var(--cv-text-dim);
    border-color: var(--cv-border);
}

/* Dot indicator (small status dot) */
.cv-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    flex-shrink: 0;
}
.cv-dot--active  { background: var(--cv-success); }
.cv-dot--warning { background: var(--cv-warn); }
.cv-dot--danger  { background: var(--cv-danger); }
.cv-dot--idle    { background: var(--cv-text-muted); }
.cv-dot--live    { background: var(--cv-cyan); animation: cv-pulse 2s infinite; }

@keyframes cv-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: .4; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   9. KPI
   ═══════════════════════════════════════════════════════════════════════════ */

/* KPI strip (row of metric cards) */
.cv-kpi-strip {
    display: flex;
    gap: var(--cv-sp-3);
    flex-wrap: wrap;
    margin-bottom: var(--cv-sp-6);
}

/* Individual KPI card */
.cv-kpi {
    flex: 1;
    min-width: 140px;
    background: var(--cv-surface);
    border: 1px solid var(--cv-border);
    border-top: 1px solid var(--cv-border);
    padding: var(--cv-sp-4);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cv-kpi--cyan {
    border-top-color: var(--cv-border);
}

.cv-kpi-value {
    font-family: var(--cv-font-data) !important;
    font-size: 26px;
    font-weight: 800;
    color: var(--cv-text);
    letter-spacing: -.04em;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.cv-kpi-label {
    font-family: var(--cv-font-display) !important;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--cv-text-muted);
}

.cv-kpi-delta {
    font-family: var(--cv-font-data) !important;
    font-size: 11px;
    font-weight: 600;
    margin-top: 2px;
}
.cv-kpi-delta.up   { color: var(--cv-success); }
.cv-kpi-delta.down { color: var(--cv-danger); }

/* Inline KPI pill (compact, for KPI bar) */
.cv-kpi-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--cv-surface);
    border: 1px solid var(--cv-border);
    padding: 5px 12px;
    font-family: var(--cv-font-data) !important;
    font-size: 12px;
    font-weight: 600;
    color: var(--cv-text);
    white-space: nowrap;
}
.cv-kpi-pill svg {
    width: 14px;
    height: 14px;
    color: var(--cv-accent);
    flex-shrink: 0;
}
.cv-kpi-pill-label {
    color: var(--cv-text-dim);
    font-weight: 500;
}


/* ═══════════════════════════════════════════════════════════════════════════
   10. TABS
   ═══════════════════════════════════════════════════════════════════════════ */

.cv-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--cv-border);
    margin-bottom: var(--cv-sp-6);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.cv-tab {
    font-family: var(--cv-font-display) !important;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 10px 18px;
    color: var(--cv-text-dim);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color .12s ease, border-color .12s ease;
    white-space: nowrap;
    cursor: pointer;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
}
.cv-tab:hover {
    color: var(--cv-text);
    text-decoration: none;
}
.cv-tab.active,
.cv-tab.is-active {
    color: var(--cv-text);
    border-bottom-color: transparent;
    background: transparent;
    font-weight: 800;
}

.cv-tab-count {
    font-family: var(--cv-font-data) !important;
    font-size: 10px;
    font-weight: 700;
    background: var(--cv-surface2);
    color: var(--cv-text-dim);
    padding: 1px 6px;
    margin-left: 6px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   11. MODALS
   ═══════════════════════════════════════════════════════════════════════════ */

.cv-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .65);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10020;
    padding: var(--cv-sp-4);
}

.cv-modal {
    background: var(--cv-surface);
    border: 1px solid var(--cv-border);
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: none;
}

.cv-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--cv-sp-5);
    border-bottom: 1px solid var(--cv-border);
}
.cv-modal-header h2 { margin: 0; }

.cv-modal-body {
    padding: var(--cv-sp-5);
}

.cv-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--cv-sp-2);
    padding: var(--cv-sp-4) var(--cv-sp-5);
    border-top: 1px solid var(--cv-border);
}


/* ═══════════════════════════════════════════════════════════════════════════
   12. EMPTY STATES
   ═══════════════════════════════════════════════════════════════════════════ */

.cv-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--cv-sp-12) var(--cv-sp-6);
    text-align: center;
    gap: var(--cv-sp-3);
}

.cv-empty-icon {
    width: 48px;
    height: 48px;
    color: var(--cv-text-muted);
    opacity: .5;
}
.cv-empty-icon svg { width: 100%; height: 100%; }

.cv-empty h3 {
    font-size: 15px;
    color: var(--cv-text);
    margin: 0;
}

.cv-empty p {
    color: var(--cv-text-dim);
    font-size: 13px;
    max-width: 360px;
    margin: 0;
}

/* Empty state gets a primary action button */
.cv-empty .cv-btn-primary {
    margin-top: var(--cv-sp-3);
}

/* BEM class names emitted by includes/cv_ui.php cv_empty_state()
   and assets/js/cv-ui.js cvEmptyState(). Mirror the legacy <h3>/<p>
   styling above so both surface generations look identical. */
.cv-empty-title {
    font-size: 15px;
    color: var(--cv-text);
    font-weight: 600;
    margin: 0;
}
.cv-empty-body {
    color: var(--cv-text-dim);
    font-size: 13px;
    max-width: 360px;
    margin: 0;
    line-height: 1.5;
}
.cv-empty-glyph {
    font-size: 32px;
    line-height: 1;
}
.cv-empty-actions {
    display: flex;
    gap: var(--cv-sp-3);
    margin-top: var(--cv-sp-3);
    flex-wrap: wrap;
    justify-content: center;
}
.cv-empty-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 18px;
    font-family: var(--cv-font-display);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .04em;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid var(--cv-accent);
    transition: filter .15s ease, transform .04s ease;
}
.cv-empty-btn:hover { filter: brightness(1.07); text-decoration: none; }
.cv-empty-btn:active { transform: scale(.97); }
.cv-empty-btn--primary {
    background: var(--cv-accent);
    color: var(--cv-accent-ink);
}
.cv-empty-btn--secondary {
    background: transparent;
    color: var(--cv-accent);
    border-color: var(--cv-border);
}
.cv-empty-btn--secondary:hover { border-color: var(--cv-accent); }

/* Size variants. Default (.cv-empty--md) is already covered by the
   base .cv-empty padding. */
.cv-empty--sm {
    padding: var(--cv-sp-6) var(--cv-sp-4);
}
.cv-empty--sm .cv-empty-icon { width: 36px; height: 36px; }
.cv-empty--sm .cv-empty-title { font-size: 14px; }
.cv-empty--sm .cv-empty-body  { font-size: 12px; }

.cv-empty--lg {
    padding: var(--cv-sp-16) var(--cv-sp-8);
}
.cv-empty--lg .cv-empty-icon { width: 64px; height: 64px; }
.cv-empty--lg .cv-empty-title { font-size: 18px; }
.cv-empty--lg .cv-empty-body  { font-size: 14px; max-width: 440px; }

/* Compact one-liner stub for JS-rendered table rows.
   Emitted by window.cvStub() for loading / error / no-matches states
   that don't warrant a full icon+title+CTA empty state. */
.cv-stub {
    text-align: center;
    padding: 24px 12px;
    font-size: 13px;
    color: var(--cv-text-dim);
    line-height: 1.5;
}
.cv-stub--loading { color: var(--cv-text-muted); }
.cv-stub--error   { color: var(--cv-danger); }
.cv-stub--empty   { color: var(--cv-text-dim); }
/* When a stub lives inside a table row the parent <td> already has
   table cell padding, so trim the stub's own padding to compensate. */
td > .cv-stub,
td.cv-stub { padding: 18px 12px; }


/* ═══════════════════════════════════════════════════════════════════════════
   13. ALERTS / FLASH MESSAGES
   ═══════════════════════════════════════════════════════════════════════════ */

.cv-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--cv-sp-3);
    padding: var(--cv-sp-3) var(--cv-sp-4);
    font-size: 13px;
    margin-bottom: var(--cv-sp-4);
    border: 1px solid;
}
.cv-alert svg { flex-shrink: 0; width: 16px; height: 16px; margin-top: 1px; }

.cv-alert--success {
    background: var(--cv-success-soft);
    border-color: var(--cv-success);
    color: var(--cv-success);
}
.cv-alert--danger {
    background: var(--cv-danger-soft);
    border-color: var(--cv-danger);
    color: var(--cv-danger);
}
.cv-alert--warn {
    background: var(--cv-warn-soft);
    border-color: var(--cv-warn);
    color: var(--cv-warn);
}
.cv-alert--info {
    background: var(--cv-info-soft);
    border-color: var(--cv-info);
    color: var(--cv-info);
}


/* ═══════════════════════════════════════════════════════════════════════════
   14. UTILITY
   ═══════════════════════════════════════════════════════════════════════════ */

/* Text */
.cv-text-accent  { color: var(--cv-accent) !important; }
.cv-text-cyan    { color: var(--cv-cyan) !important; }
.cv-text-dim     { color: var(--cv-text-dim) !important; }
.cv-text-muted   { color: var(--cv-text-muted) !important; }
.cv-text-success { color: var(--cv-success) !important; }
.cv-text-danger  { color: var(--cv-danger) !important; }
.cv-text-warn    { color: var(--cv-warn) !important; }

/* Backgrounds */
.cv-bg-surface   { background: var(--cv-surface) !important; }
.cv-bg-surface2  { background: var(--cv-surface2) !important; }

/* Flex */
.cv-flex      { display: flex; }
.cv-flex-col  { display: flex; flex-direction: column; }
.cv-flex-wrap { display: flex; flex-wrap: wrap; }
.cv-items-center { align-items: center; }
.cv-justify-between { justify-content: space-between; }
.cv-gap-1  { gap: var(--cv-sp-1); }
.cv-gap-2  { gap: var(--cv-sp-2); }
.cv-gap-3  { gap: var(--cv-sp-3); }
.cv-gap-4  { gap: var(--cv-sp-4); }

/* Spacing */
.cv-mt-0 { margin-top: 0; }
.cv-mt-2 { margin-top: var(--cv-sp-2); }
.cv-mt-4 { margin-top: var(--cv-sp-4); }
.cv-mt-6 { margin-top: var(--cv-sp-6); }
.cv-mb-0 { margin-bottom: 0; }
.cv-mb-2 { margin-bottom: var(--cv-sp-2); }
.cv-mb-4 { margin-bottom: var(--cv-sp-4); }
.cv-mb-6 { margin-bottom: var(--cv-sp-6); }
.cv-p-4  { padding: var(--cv-sp-4); }
.cv-p-5  { padding: var(--cv-sp-5); }

/* Text alignment */
.cv-text-left   { text-align: left; }
.cv-text-center { text-align: center; }
.cv-text-right  { text-align: right; }

/* Truncate */
.cv-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Scrollable container */
.cv-scroll {
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.14) transparent;
}
.cv-scroll::-webkit-scrollbar { width: 6px; }
.cv-scroll::-webkit-scrollbar-track { background: transparent; }
.cv-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); }
html.theme-light .cv-scroll { scrollbar-color: rgba(0,0,0,.14) transparent; }
html.theme-light .cv-scroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,.14); }

/* Visually hidden (accessible) */
.cv-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}


/* ═══════════════════════════════════════════════════════════════════════════
   15. RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

/* Tablet (≤ 1024px) */
@media (max-width: 1024px) {
    .cv-grid-4 { grid-template-columns: repeat(2, 1fr); }
    .cv-grid-3 { grid-template-columns: repeat(2, 1fr); }
    .cv-kpi-strip { gap: var(--cv-sp-2); }
    .cv-kpi { min-width: 120px; }
    .cv-kpi-value { font-size: 22px; }
}

/* Mobile (≤ 768px) */
@media (max-width: 768px) {
    .cv-page {
        padding: var(--cv-sp-4) var(--cv-sp-3);
    }
    .cv-page-header {
        flex-direction: column;
        gap: var(--cv-sp-3);
    }
    .cv-page-header-actions {
        width: 100%;
    }
    .cv-page-header-actions .cv-btn,
    .cv-page-header-actions .cv-btn-primary {
        flex: 1;
        justify-content: center;
    }
    .cv-grid-2,
    .cv-grid-3,
    .cv-grid-4 {
        grid-template-columns: 1fr;
    }
    .cv-kpi-strip {
        flex-direction: column;
    }
    .cv-kpi {
        min-width: 0;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: var(--cv-sp-3);
        border-top: none;
        border-left: 1px solid var(--cv-border);
    }
    .cv-kpi--cyan {
        border-left-color: var(--cv-border);
    }
    .cv-kpi-value {
        font-size: 20px;
        order: 2;
    }
    .cv-kpi-label {
        order: 1;
    }
    .cv-kpi-delta {
        order: 3;
    }
    .cv-tabs {
        gap: 0;
        margin-bottom: var(--cv-sp-4);
    }
    .cv-tab {
        padding: 8px 12px;
        font-size: 10px;
    }
    .cv-form-row {
        flex-direction: column;
    }
    .cv-form-row > * {
        min-width: 0;
    }
    /* Cards go full-bleed on small screens */
    .cv-card {
        margin-left: calc(var(--cv-sp-3) * -1);
        margin-right: calc(var(--cv-sp-3) * -1);
        border-left: none;
        border-right: none;
    }
    .cv-modal {
        max-width: 100%;
        margin: var(--cv-sp-3);
    }
}

/* Small phone (≤ 480px) */
@media (max-width: 480px) {
    .cv-page {
        padding: var(--cv-sp-3) var(--cv-sp-2);
    }
    body.shell-page h1 { font-size: 18px; }
    body.shell-page h2 { font-size: 15px; }
    .cv-btn, .cv-btn-primary, .cv-btn-ghost,
    .cv-btn-danger, .cv-btn-cyan {
        padding: 7px 12px;
        font-size: 11px;
    }
    .cv-table thead th { font-size: 9px; padding: 6px 8px; }
    .cv-table tbody td { padding: 8px; font-size: 12px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   EXISTING CLASS NORMALIZATION - COMPREHENSIVE BRIDGE
   Every existing class pattern across every shell page is caught here so the
   entire platform picks up the Tactical Command design system with zero PHP
   changes. Covers: tables, forms, cards, panels, badges, buttons, tabs,
   page headers, modals, alerts, progress bars, KPI cards, section backgrounds.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Token bridge ── */
body.shell-page {
    --bg:         var(--cv-bg);
    --surface:    var(--cv-surface);
    --surface2:   var(--cv-surface2);
    --border:     var(--cv-border);
    --text:       var(--cv-text);
    --sub:        var(--cv-text-dim);
    --accent:     var(--cv-accent);
    --accent-dim: var(--cv-accent-dim);
    --danger:     var(--cv-danger);
    --success:    var(--cv-success);
    --warn:       var(--cv-warn);
    --accent-soft:var(--cv-accent-soft);
    --radius:     var(--cv-shape-radius);
    --ops-cyan:      var(--cv-cyan);
    --ops-cyan-soft: var(--cv-cyan-soft);
    /* legacy names previously force-patched in shell_open.php */
    --panel:       var(--cv-surface);
    --panel2:      var(--cv-surface2);
    --panel-hover: var(--cv-surface2);
    --hover:       var(--cv-surface2);
    --row:         var(--cv-bg);
    --row-alt:     var(--cv-surface);
    --badge:       var(--cv-surface2);
    --accent-ink:  var(--cv-accent-ink);
    --accent2:     var(--cv-cyan);
    --secondary:   var(--cv-cyan);
    --info:        var(--cv-info);
    /* v1-generation page vocabulary */
    --muted:       var(--cv-text-dim);
    --card:        var(--cv-surface);
    --button-bg:   var(--cv-surface2);
    --input-bg:    var(--cv-bg);
}

/* ── ALL TABLES ── */
body.shell-page table {
    border-collapse: collapse;
    width: 100%;
    font-family: var(--cv-font-body) !important;
    font-size: 13px;
}
body.shell-page table th {
    font-family: var(--cv-font-display) !important;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--cv-text-muted);
    text-align: left;
    padding: 8px 12px;
    border-bottom: 2px solid var(--cv-border);
    white-space: nowrap;
}
body.shell-page table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--cv-border-subtle);
    color: var(--cv-text);
    vertical-align: middle;
    font-family: var(--cv-font-body) !important;
}
body.shell-page table tbody tr {
    transition: background .1s ease;
}
body.shell-page table tbody tr:hover td {
    background: var(--cv-surface2);
}
body.shell-page table tbody tr:last-child td {
    border-bottom: none;
}
html.theme-light body.shell-page table th {
    color: var(--cv-text-muted);
    border-bottom-color: var(--cv-border);
}
html.theme-light body.shell-page table td {
    color: var(--cv-text);
    border-bottom-color: var(--cv-border-subtle);
}

/* ── ALL FORM INPUTS ── */
body.shell-page input[type="text"],
body.shell-page input[type="email"],
body.shell-page input[type="password"],
body.shell-page input[type="number"],
body.shell-page input[type="url"],
body.shell-page input[type="tel"],
body.shell-page input[type="date"],
body.shell-page input[type="datetime-local"],
body.shell-page input[type="search"],
body.shell-page select,
body.shell-page textarea {
    background: var(--cv-bg) !important;
    border: 1px solid var(--cv-border) !important;
    color: var(--cv-text) !important;
    font-family: var(--cv-font-body) !important;
    font-size: 13px;
    padding: 9px 12px;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
body.shell-page input:focus,
body.shell-page select:focus,
body.shell-page textarea:focus {
    border-color: var(--cv-cyan) !important;
    box-shadow: 0 0 0 2px var(--cv-cyan-soft);
}
body.shell-page input::placeholder,
body.shell-page textarea::placeholder {
    color: var(--cv-text-muted) !important;
}
html.theme-light body.shell-page input[type="text"],
html.theme-light body.shell-page input[type="email"],
html.theme-light body.shell-page input[type="password"],
html.theme-light body.shell-page input[type="number"],
html.theme-light body.shell-page input[type="url"],
html.theme-light body.shell-page input[type="tel"],
html.theme-light body.shell-page input[type="date"],
html.theme-light body.shell-page input[type="datetime-local"],
html.theme-light body.shell-page input[type="search"],
html.theme-light body.shell-page select,
html.theme-light body.shell-page textarea {
    background: var(--cv-surface) !important;
    border: 1px solid var(--cv-border) !important;
    color: var(--cv-text) !important;
}

/* ── FORM LABELS ── */
body.shell-page label span,
body.shell-page .settings-body label span,
body.shell-page .modal-box label span {
    font-family: var(--cv-font-display) !important;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--cv-text-muted) !important;
}

/* ── ALL HEADINGS (on content area, not sidebar) ── */
body.shell-page .shell-main h1,
body.shell-page .shell-main h2,
body.shell-page .shell-main h3,
body.shell-page .shell-main h4 {
    font-family: var(--cv-font-display) !important;
    color: var(--cv-text);
}
body.shell-page .shell-main p {
    font-family: var(--cv-font-body) !important;
    color: var(--cv-text-dim);
}

/* ── STAT CARDS (used on Reports, Super Admin, various dashboards) ── */
body.shell-page .stat-card,
body.shell-page .admin-stats .stat-card {
    background: var(--cv-surface);
    border: 1px solid var(--cv-border);
    border-top: 1px solid var(--cv-border);
    box-shadow: none;
}
body.shell-page .stat-card .num {
    font-family: var(--cv-font-data) !important;
    color: var(--cv-accent);
    letter-spacing: -.04em;
    font-variant-numeric: tabular-nums;
}
body.shell-page .stat-card .lbl {
    font-family: var(--cv-font-display) !important;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--cv-text-muted);
}
html.theme-light body.shell-page .stat-card {
    background: var(--cv-surface);
    border-color: var(--cv-border);
    border-top-color: var(--cv-border);
}

/* ── PAGE WRAP / PAGE HEADER (used on most pages) ── */
body.shell-page .page-wrap {
    padding: var(--cv-sp-6) var(--cv-sp-8);
}
body.shell-page .page-head {
    margin-bottom: var(--cv-sp-6);
}
body.shell-page .page-head-left h1 {
    font-family: var(--cv-font-display) !important;
    color: var(--cv-text);
}
body.shell-page .page-head-left p {
    color: var(--cv-text-dim);
    font-family: var(--cv-font-body) !important;
}

/* ── ADMIN WRAP (super_admin.php, org_admin.php) ── */
body.shell-page .admin-wrap {
    padding: var(--cv-sp-6) var(--cv-sp-8);
    max-width: 1200px;
}

/* ── TAB BARS (all variants) ──
   .tab-item - used by .settings-tabs, .admin-tabs, .sa-tabs (super_admin /
   org_admin), and any future tab strip. flex:0 0 auto + white-space:nowrap
   are mandatory because the parent is always display:flex; without them,
   tabs shrink below their text width and the labels bleed across boundaries
   on narrow viewports. Active/hover colors live in the same block. */
body.shell-page .tab-item,
body.shell-page .settings-tabs .tab-item,
body.shell-page .admin-tabs .tab-item,
body.shell-page .sa-tabs .tab-item {
    flex: 0 0 auto;
    white-space: nowrap;
    font-family: var(--cv-font-display) !important;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .03em;
    color: var(--cv-text-dim);
    transition: color .12s ease, border-color .12s ease, background .12s ease;
}
body.shell-page .tab-item:hover {
    color: var(--cv-text);
}
body.shell-page .tab-item.active {
    color: var(--cv-text) !important;
    border-bottom-color: transparent !important;
    background: transparent !important;
    font-weight: 800 !important;
}
body.shell-page .settings-tabs,
body.shell-page .admin-tabs,
body.shell-page .sa-tabs {
    display: flex;
    flex-wrap: nowrap;
    border-bottom: 2px solid var(--cv-border);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}
body.shell-page .settings-tabs::-webkit-scrollbar,
body.shell-page .admin-tabs::-webkit-scrollbar,
body.shell-page .sa-tabs::-webkit-scrollbar {
    height: 6px;
}
body.shell-page .settings-tabs::-webkit-scrollbar-thumb,
body.shell-page .admin-tabs::-webkit-scrollbar-thumb,
body.shell-page .sa-tabs::-webkit-scrollbar-thumb {
    background: var(--cv-border);
    border-radius: 3px;
}
body.shell-page .settings-tabs::-webkit-scrollbar-thumb:hover,
body.shell-page .admin-tabs::-webkit-scrollbar-thumb:hover,
body.shell-page .sa-tabs::-webkit-scrollbar-thumb:hover {
    background: var(--cv-text-dim);
}

/* ── ALL BUTTONS ── */
body.shell-page .button,
body.shell-page button[type="submit"],
body.shell-page input[type="submit"] {
    font-family: var(--cv-font-display) !important;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .03em;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease, color .12s ease, transform .08s ease;
}
body.shell-page .button:active,
body.shell-page button:active {
    transform: scale(.97);
}
body.shell-page .button.primary,
body.shell-page .cv-btn-primary,
body.shell-page button.primary {
    background: var(--cv-accent-soft) !important;
    color: var(--cv-accent) !important;
    border: 1px solid var(--cv-accent) !important;
}
body.shell-page .button.primary:hover,
body.shell-page .cv-btn-primary:hover {
    background: var(--cv-accent-hover) !important;
}
body.shell-page .button.ghost {
    background: var(--cv-surface) !important;
    color: var(--cv-text) !important;
    border: 1px solid var(--cv-border) !important;
}
body.shell-page .button.ghost:hover {
    border-color: var(--cv-accent) !important;
}
body.shell-page .button.danger {
    background: var(--cv-danger-soft) !important;
    color: var(--cv-danger) !important;
    border: 1px solid var(--cv-danger) !important;
}

/* ── CARDS / PANELS / SECTIONS ── */
body.shell-page .section-card,
body.shell-page .share-section,
body.shell-page .conn-card,
body.shell-page .shared-card,
body.shell-page .comment-item,
body.shell-page .history-item,
body.shell-page .file-item,
body.shell-page .danger-box {
    background: var(--cv-surface);
    border: 1px solid var(--cv-border);
    box-shadow: none;
}
html.theme-light body.shell-page .section-card,
html.theme-light body.shell-page .share-section,
html.theme-light body.shell-page .conn-card,
html.theme-light body.shell-page .shared-card {
    background: var(--cv-surface);
    border-color: var(--cv-border);
}

/* ── BADGES / PILLS (all existing patterns) ── */
body.shell-page .admin-badge,
body.shell-page .status-pill,
body.shell-page .cv-status-pill,
body.shell-page .cv-priority-pill,
body.shell-page .cv-role-pill,
body.shell-page .nav-badge-inline,
body.shell-page .tag-pill {
    font-family: var(--cv-font-data) !important;
    font-weight: 700;
    letter-spacing: .04em;
}
body.shell-page .admin-badge {
    background: var(--cv-accent);
    color: #000;
}

/* ── MODALS ── */
body.shell-page .modal-overlay {
    background: rgba(0, 0, 0, .65);
    backdrop-filter: blur(4px);
}
body.shell-page .modal-box {
    background: var(--cv-surface);
    border: 1px solid var(--cv-border);
    box-shadow: var(--cv-shadow-lg);
}
body.shell-page .modal-head h3 {
    font-family: var(--cv-font-display) !important;
}
html.theme-light body.shell-page .modal-box {
    background: var(--cv-surface);
    border-color: var(--cv-border);
}

/* ── ALERTS / FLASH MESSAGES ── */
body.shell-page .alert-success,
body.shell-page .flash-success {
    background: var(--cv-success-soft);
    color: var(--cv-success);
    border: 1px solid var(--cv-success);
}
body.shell-page .alert-danger,
body.shell-page .flash-error {
    background: var(--cv-danger-soft);
    color: var(--cv-danger);
    border: 1px solid var(--cv-danger);
}

/* ── LINKS (content area) ── */
body.shell-page .shell-main a:not(.shell-nav-item):not(.cv-btn):not(.cv-btn-primary):not(.cv-btn-ghost):not(.cv-btn-danger):not(.cv-btn-cyan):not(.button):not(.ops-panel-link):not(.ops-refresh-btn):not([class*="btn"]) {
    color: var(--cv-accent);
}
body.shell-page .shell-main a:hover {
    color: var(--cv-accent-dim);
}

/* ── SECTION BACKGROUNDS (alternating panel rows on some pages) ── */
body.shell-page .shell-main > section,
body.shell-page .shell-main > div > section {
    /* no extra backgrounds - let the bg token handle it */
}

/* ── PROGRESS BARS (used in task reports, planning board, etc.) ── */
body.shell-page progress {
    -webkit-appearance: none;
    appearance: none;
    height: 8px;
    border: none;
    background: var(--cv-surface2);
}
body.shell-page progress::-webkit-progress-bar {
    background: var(--cv-surface2);
}
body.shell-page progress::-webkit-progress-value {
    background: var(--cv-accent);
}
body.shell-page progress::-moz-progress-bar {
    background: var(--cv-accent);
}

/* ── NUMERIC VALUES (monospace everywhere numbers appear) ── */
body.shell-page .shell-main [style*="tabular-nums"],
body.shell-page .ops-kpi-value,
body.shell-page .stat-card .num,
body.shell-page .ops-fin-value,
body.shell-page .ops-donut-num {
    font-variant-numeric: tabular-nums;
}

/* ── RESPONSIVE: existing page patterns ── */
@media (max-width: 768px) {
    body.shell-page .page-wrap {
        padding: var(--cv-sp-4) var(--cv-sp-3);
    }
    body.shell-page .admin-wrap {
        padding: var(--cv-sp-4) var(--cv-sp-3);
    }
    body.shell-page .admin-stats {
        grid-template-columns: 1fr;
    }
    body.shell-page table {
        font-size: 12px;
    }
    body.shell-page table th {
        font-size: 9px;
        padding: 6px 8px;
    }
    body.shell-page table td {
        padding: 8px;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   PAGE-SPECIFIC PATTERN NORMALIZATION
   Catches inline-styled components from estimates, invoices, customers,
   employees, and other pages that use their own class prefixes.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── KILL DOUBLE HEADERS ──
   cvpg-head is the old page header that duplicates the .head section below it.
   Present on: cvjobs, cvaudit, cvboard, cvconfig, cvjob, cvreview. */
body.shell-page .cvpg-head { display: none !important; }

/* ── ESTIMATES PAGE (est-* classes) ── */
body.shell-page .est-btn {
    font-family: var(--cv-font-display) !important;
    font-size: 12px; font-weight: 700; letter-spacing: .03em;
}
body.shell-page .est-btn:active { transform: scale(.97); }
body.shell-page .est-btn.accent {
    background: var(--cv-accent-soft) !important;
    color: var(--cv-accent) !important;
    border: 1px solid var(--cv-accent) !important;
}
body.shell-page .est-table th {
    font-family: var(--cv-font-display) !important;
    font-size: 10px; font-weight: 800; letter-spacing: .10em;
    color: var(--cv-text-muted);
    border-bottom: 2px solid var(--cv-border);
}
body.shell-page .est-table td {
    font-family: var(--cv-font-body) !important;
    border-bottom-color: var(--cv-border-subtle);
}
body.shell-page .est-table tr:hover td { background: var(--cv-surface2); }
body.shell-page .est-card {
    background: var(--cv-surface); border-color: var(--cv-border);
}
body.shell-page .est-field label {
    font-family: var(--cv-font-display) !important;
    font-size: 10px; font-weight: 700; letter-spacing: .08em;
    color: var(--cv-text-muted);
}
body.shell-page .est-pill {
    font-family: var(--cv-font-data) !important;
    font-weight: 700; letter-spacing: .04em;
}
body.shell-page #estApp h1 {
    font-family: var(--cv-font-display) !important;
}
body.shell-page .est-money {
    font-family: var(--cv-font-data) !important;
    font-variant-numeric: tabular-nums;
}

/* ── INVOICES PAGE (inv-* classes) ── */
body.shell-page .inv-btn {
    font-family: var(--cv-font-display) !important;
    font-size: 12px; font-weight: 700; letter-spacing: .03em;
}
body.shell-page .inv-btn:active { transform: scale(.97); }
body.shell-page .inv-btn.accent {
    background: var(--cv-accent-soft) !important;
    color: var(--cv-accent) !important;
    border: 1px solid var(--cv-accent) !important;
}
body.shell-page .inv-table th {
    font-family: var(--cv-font-display) !important;
    font-size: 10px; font-weight: 800; letter-spacing: .10em;
    color: var(--cv-text-muted);
    border-bottom: 2px solid var(--cv-border);
}
body.shell-page .inv-table td {
    font-family: var(--cv-font-body) !important;
    border-bottom-color: var(--cv-border-subtle);
}
body.shell-page .inv-table tr:hover td { background: var(--cv-surface2); }
body.shell-page .inv-card {
    background: var(--cv-surface); border-color: var(--cv-border);
}
body.shell-page .inv-field label {
    font-family: var(--cv-font-display) !important;
    font-size: 10px; font-weight: 700; letter-spacing: .08em;
    color: var(--cv-text-muted);
}
body.shell-page .inv-pill {
    font-family: var(--cv-font-data) !important;
    font-weight: 700; letter-spacing: .04em;
}
body.shell-page #invApp h1 {
    font-family: var(--cv-font-display) !important;
}
body.shell-page .inv-money {
    font-family: var(--cv-font-data) !important;
    font-variant-numeric: tabular-nums;
}

/* ── CV-ADMIN PATTERNS (customers, employees - cv-* classes from cv-admin.css) ── */
body.shell-page .cv-wrap {
    padding: var(--cv-sp-6) var(--cv-sp-8);
    max-width: 1200px;
}
body.shell-page .cv-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: var(--cv-sp-4); margin-bottom: var(--cv-sp-6); flex-wrap: wrap;
}
body.shell-page .cv-head h1 {
    font-family: var(--cv-font-display) !important;
}
body.shell-page .cv-sub {
    color: var(--cv-text-dim);
    font-family: var(--cv-font-body) !important;
}
body.shell-page .cv-card {
    background: var(--cv-surface);
    border: 1px solid var(--cv-border);
    box-shadow: none;
}
body.shell-page .cv-eyebrow {
    font-family: var(--cv-font-display) !important;
    font-size: 9px; font-weight: 800; letter-spacing: .14em;
    text-transform: uppercase; color: var(--cv-text-muted);
}
body.shell-page .cv-field {
    font-family: var(--cv-font-body) !important;
}
body.shell-page .cv-table th {
    font-family: var(--cv-font-display) !important;
    font-size: 10px; font-weight: 800; letter-spacing: .10em;
    text-transform: uppercase; color: var(--cv-text-muted);
    border-bottom: 2px solid var(--cv-border);
}
body.shell-page .cv-table td {
    font-family: var(--cv-font-body) !important;
    border-bottom-color: var(--cv-border-subtle);
}
body.shell-page .cv-table tr:hover td { background: var(--cv-surface2); }
body.shell-page .cv-btn {
    font-family: var(--cv-font-display) !important;
    font-size: 12px; font-weight: 700; letter-spacing: .03em;
}
body.shell-page .cv-btn:active { transform: scale(.97); }
body.shell-page .cv-tab {
    font-family: var(--cv-font-display) !important;
    font-size: 11px; font-weight: 700; letter-spacing: .03em;
    color: var(--cv-text-dim);
}
body.shell-page .cv-tab:hover { color: var(--cv-text); }
body.shell-page .cv-tab.is-active {
    color: var(--cv-text) !important;
    border-bottom-color: transparent !important;
    background: transparent !important;
    font-weight: 800 !important;
}
body.shell-page .cv-tabs {
    border-bottom: 2px solid var(--cv-border);
    margin-bottom: var(--cv-sp-6);
}
body.shell-page .cv-stat-k {
    font-family: var(--cv-font-display) !important;
    font-size: 9px; font-weight: 700; letter-spacing: .10em;
    text-transform: uppercase; color: var(--cv-text-muted);
}
body.shell-page .cv-stat-v {
    font-family: var(--cv-font-data) !important;
    font-variant-numeric: tabular-nums;
    color: var(--cv-text);
}
body.shell-page .cv-status {
    font-family: var(--cv-font-data) !important;
    font-size: 11px; font-weight: 700;
    text-transform: capitalize;
}
body.shell-page .cv-link {
    color: var(--cv-accent);
}
body.shell-page .cv-link:hover {
    color: var(--cv-accent-dim);
}
body.shell-page .cv-empty-t {
    font-family: var(--cv-font-display) !important;
    color: var(--cv-text);
}
body.shell-page .cv-empty-d {
    font-family: var(--cv-font-body) !important;
    color: var(--cv-text-dim);
}
body.shell-page .cv-alert--ok {
    background: var(--cv-success-soft);
    color: var(--cv-success);
    border: 1px solid var(--cv-success);
}
body.shell-page .cv-alert--err {
    background: var(--cv-danger-soft);
    color: var(--cv-danger);
    border: 1px solid var(--cv-danger);
}
body.shell-page .cv-mono {
    font-family: var(--cv-font-data) !important;
    font-variant-numeric: tabular-nums;
}
body.shell-page .cv-total td {
    font-weight: 700;
    border-top: 2px solid var(--cv-border);
    color: var(--cv-text);
}

/* ── CUSTOMER ASSETS SECTION (cvcqa-* at bottom of customers page) ── */
body.shell-page .cvcqa-card {
    background: var(--cv-surface);
    border: 1px solid var(--cv-border);
    box-shadow: none;
}
body.shell-page .cvcqa-card h2 {
    font-family: var(--cv-font-display) !important;
}
body.shell-page .cvcqa-muted {
    color: var(--cv-text-dim);
    font-family: var(--cv-font-body) !important;
}
body.shell-page .cvcqa-item {
    background: var(--cv-surface2);
    border-color: var(--cv-border);
}
body.shell-page .cvcqa-title {
    font-family: var(--cv-font-display) !important;
    color: var(--cv-text);
}
body.shell-page .cvcqa-btn {
    font-family: var(--cv-font-display) !important;
    font-size: 12px; font-weight: 700;
    background: var(--cv-accent-soft);
    border: 1px solid var(--cv-accent);
    color: var(--cv-accent);
}
body.shell-page .cvcqa-btn:hover {
    background: var(--cv-accent-hover);
}

/* ── NUMBERS ON ALL PAGES ── */
body.shell-page .num,
body.shell-page td.num,
body.shell-page th.num {
    font-family: var(--cv-font-data) !important;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* ── RESPONSIVE: cv-admin patterns ── */
@media (max-width: 768px) {
    body.shell-page .cv-wrap {
        padding: var(--cv-sp-4) var(--cv-sp-3);
    }
    body.shell-page #estApp,
    body.shell-page #invApp {
        padding: var(--cv-sp-4) var(--cv-sp-3);
    }
    body.shell-page .cv-head {
        flex-direction: column;
    }
    body.shell-page .cv-split {
        flex-direction: column;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   SCROLLBAR THEMING (global - every scrollable surface matches the theme)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Firefox */
body.shell-page,
body.shell-page * {
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.18) transparent;
}
html.theme-light body.shell-page,
html.theme-light body.shell-page * {
    scrollbar-color: rgba(0,0,0,.20) transparent;
}

/* Webkit (Chrome, Safari, Edge) - DARK */
body.shell-page ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
body.shell-page ::-webkit-scrollbar-track {
    background: var(--cv-bg);
    border: none;
}
body.shell-page ::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.16);
    border: 2px solid transparent;
    background-clip: padding-box;
}
body.shell-page ::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,.28);
    background-clip: padding-box;
}
body.shell-page ::-webkit-scrollbar-corner {
    background: var(--cv-bg);
}

/* Webkit - LIGHT */
html.theme-light body.shell-page ::-webkit-scrollbar-track {
    background: var(--cv-surface2);
}
html.theme-light body.shell-page ::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,.18);
    border: 2px solid transparent;
    background-clip: padding-box;
}
html.theme-light body.shell-page ::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,.30);
    background-clip: padding-box;
}
html.theme-light body.shell-page ::-webkit-scrollbar-corner {
    background: var(--cv-surface2);
}

/* Horizontal scrollbar areas (tab bars, tables, settings tabs) - force dark track */
body.shell-page .settings-tabs,
body.shell-page .admin-tabs,
body.shell-page .cv-tabs {
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.18) var(--cv-bg);
}
html.theme-light body.shell-page .settings-tabs,
html.theme-light body.shell-page .admin-tabs,
html.theme-light body.shell-page .cv-tabs {
    scrollbar-color: rgba(0,0,0,.18) var(--cv-surface);
}

/* Range inputs / sliders - match the theme */
body.shell-page input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
}
body.shell-page input[type="range"]::-webkit-slider-track {
    height: 4px;
    background: var(--cv-surface2);
    border: none;
}
body.shell-page input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    background: var(--cv-accent);
    border: none;
    margin-top: -5px;
}
body.shell-page input[type="range"]::-moz-range-track {
    height: 4px;
    background: var(--cv-surface2);
    border: none;
}
body.shell-page input[type="range"]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background: var(--cv-accent);
    border: none;
}

/* Select dropdowns - dark background in both modes */
body.shell-page select,
body.shell-page .sort-row select,
body.shell-page .status-select {
    background: var(--cv-bg) !important;
    border: 1px solid var(--cv-border) !important;
    color: var(--cv-text) !important;
}
html.theme-light body.shell-page select,
html.theme-light body.shell-page .sort-row select,
html.theme-light body.shell-page .status-select {
    background: var(--cv-surface) !important;
    border: 1px solid var(--cv-border) !important;
    color: var(--cv-text) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   16. SHELL CHROME LOCK
   Replaces the former inline <style id="cv-theme-amber"> block that lived in
   includes/shell_open.php. Every value flows from Section 1 tokens - the
   !important flags exist only to defeat legacy page-level :root overrides
   (navy palettes, lighter cyan accents) exactly as the old patch did.
   Saved organization color remains separate as --cv-org-brand-accent;
   Theme Pack tokens remain the authenticated component palette.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Legacy :root token defeat - single source of truth is Section 1 ── */
:root {
    --bg:          var(--cv-bg) !important;
    --surface:     var(--cv-surface) !important;
    --surface2:    var(--cv-surface2) !important;
    --panel:       var(--cv-surface) !important;
    --panel2:      var(--cv-surface2) !important;
    --panel-hover: var(--cv-surface2) !important;
    --border:      var(--cv-border-subtle) !important;
    --text:        var(--cv-text) !important;
    --sub:         var(--cv-text-dim) !important;
    --accent:      var(--cv-accent) !important;
    --accent-dim:  var(--cv-accent-dim) !important;
    --accent-soft: var(--cv-accent-soft) !important;
    --accent-ink:  var(--cv-accent-ink) !important;
    --accent2:     var(--cv-cyan) !important;
    --secondary:   var(--cv-cyan) !important;
    --hover:       var(--cv-surface2) !important;
    --row:         var(--cv-bg) !important;
    --row-alt:     var(--cv-surface) !important;
    --badge:       var(--cv-surface2) !important;
    --success:     var(--cv-success) !important;
    --warn:        var(--cv-warn) !important;
    --danger:      var(--cv-danger) !important;
    --muted:       var(--cv-text-dim) !important;
    --card:        var(--cv-surface) !important;
    --button-bg:   var(--cv-surface2) !important;
    --input-bg:    var(--cv-bg) !important;
}

/* Light mode: legacy row/hover tokens stay card-toned, not canvas-toned */
html.theme-light {
    --row:     var(--cv-surface) !important;
    --row-alt: var(--cv-surface2) !important;
    --hover:   var(--cv-surface2) !important;
    --badge:   var(--cv-surface2) !important;
    --input-bg: var(--cv-surface) !important;
    --button-bg: var(--cv-surface2) !important;
}

html:not(.theme-light) body.shell-page,
html.theme-light  body.shell-page {
    background: var(--cv-bg) !important;
    color: var(--cv-text) !important;
}

/* ── Sidebar surface + token lock (page palettes must never leak in) ── */
body.shell-page .shell-sidebar {
    background: var(--cv-surface) !important;
    border-right-color: var(--cv-border-subtle) !important;
    --surface:  var(--cv-surface) !important;
    --surface2: var(--cv-surface2) !important;
    --border:   var(--cv-border-subtle) !important;
    --text:     var(--cv-shell-fg) !important;
    --sub:      var(--cv-shell-fg-dim) !important;
    --accent:   var(--cv-accent) !important;
    --accent-dim: var(--cv-accent-dim) !important;
    --shell-fg:     var(--cv-shell-fg) !important;
    --shell-fg-dim: var(--cv-shell-fg-dim) !important;
    --shell-accent: var(--cv-accent) !important;
}
body.shell-page .shell-sidebar .shell-nav-item { color: var(--cv-shell-fg-dim) !important; }
body.shell-page .shell-sidebar .shell-nav-item:hover { color: var(--cv-shell-fg) !important; }
body.shell-page .shell-sidebar .shell-nav-section { color: var(--cv-shell-section) !important; }

/* ── Active / admin - amber in both modes ── */
body.shell-page .shell-sidebar .shell-nav-item.is-active,
body.shell-page .shell-sidebar .shell-nav-item.is-admin { color: var(--cv-accent) !important; }

/* ── Nav typography lock ── */
body.shell-page .shell-sidebar .shell-nav-item { font-size: 12px !important; line-height: 1.2 !important; }
body.shell-page .shell-sidebar .shell-nav-section { font-size: 9px !important; }
body.shell-page .shell-sidebar .shell-nav-section--toggle { font-size: 11px !important; font-weight: 700 !important; color: var(--cv-shell-strong) !important; }
body.shell-page .shell-sidebar .shell-nav-section--toggle .shell-nav-section-chev { color: var(--cv-shell-strong) !important; opacity: .85 !important; }

/* ── Font lock - whole left nav: shell sidebar + cv-page secondary aside ── */
body.shell-page .shell-sidebar, body.shell-page .shell-sidebar *,
body.shell-page .wrap > aside, body.shell-page .wrap > aside * {
    font-family: var(--cv-font-data) !important;
}

/* ── Organization sidebar identity ────────────────────────────────────
   Fit, scale and position follow the organization's saved logo presentation.
   When no logo is configured, the organization name remains visible. */
body.shell-page .shell-sidebar .shell-collapse-row {
    justify-content: flex-start;
    gap: 6px;
    background: transparent !important;
}
body.shell-page .shell-sidebar .shell-logo-inline {
    --cv-shell-logo-width: 150px;
    --cv-shell-logo-height: 40px;
    flex: 1 1 auto;
    min-width: 0;
    height: 48px;
    overflow: hidden;
    padding-left: 6px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
}
body.shell-page .shell-sidebar .shell-logo-inline[data-logo-scale="50"]  { --cv-shell-logo-width: 90px;  --cv-shell-logo-height: 22px; }
body.shell-page .shell-sidebar .shell-logo-inline[data-logo-scale="75"]  { --cv-shell-logo-width: 120px; --cv-shell-logo-height: 30px; }
body.shell-page .shell-sidebar .shell-logo-inline[data-logo-scale="100"] { --cv-shell-logo-width: 150px; --cv-shell-logo-height: 40px; }
body.shell-page .shell-sidebar .shell-logo-inline[data-logo-scale="125"] { --cv-shell-logo-width: 174px; --cv-shell-logo-height: 44px; }
body.shell-page .shell-sidebar .shell-logo-inline[data-logo-scale="150"] { --cv-shell-logo-width: 190px; --cv-shell-logo-height: 48px; }
body.shell-page .shell-sidebar .shell-logo-organization {
    display: block;
    width: min(100%, var(--cv-shell-logo-width));
    height: var(--cv-shell-logo-height);
    max-width: 100%;
    flex: 0 1 auto;
    object-fit: contain;
    object-position: 50% 50%;
    background: transparent;
}
body.shell-page .shell-sidebar .shell-logo-inline[data-logo-fit="cover"] .shell-logo-organization { object-fit: cover; }
body.shell-page .shell-sidebar .shell-logo-inline[data-logo-position="top-left"] { justify-content: flex-start; align-items: flex-start; }
body.shell-page .shell-sidebar .shell-logo-inline[data-logo-position="top-center"] { justify-content: center; align-items: flex-start; }
body.shell-page .shell-sidebar .shell-logo-inline[data-logo-position="top-right"] { justify-content: flex-end; align-items: flex-start; }
body.shell-page .shell-sidebar .shell-logo-inline[data-logo-position="center-left"] { justify-content: flex-start; align-items: center; }
body.shell-page .shell-sidebar .shell-logo-inline[data-logo-position="center"] { justify-content: center; align-items: center; }
body.shell-page .shell-sidebar .shell-logo-inline[data-logo-position="center-right"] { justify-content: flex-end; align-items: center; }
body.shell-page .shell-sidebar .shell-logo-inline[data-logo-position="bottom-left"] { justify-content: flex-start; align-items: flex-end; }
body.shell-page .shell-sidebar .shell-logo-inline[data-logo-position="bottom-center"] { justify-content: center; align-items: flex-end; }
body.shell-page .shell-sidebar .shell-logo-inline[data-logo-position="bottom-right"] { justify-content: flex-end; align-items: flex-end; }
body.shell-page .shell-sidebar .shell-logo-inline[data-logo-position="top-left"] .shell-logo-organization { object-position: 0% 0%; }
body.shell-page .shell-sidebar .shell-logo-inline[data-logo-position="top-center"] .shell-logo-organization { object-position: 50% 0%; }
body.shell-page .shell-sidebar .shell-logo-inline[data-logo-position="top-right"] .shell-logo-organization { object-position: 100% 0%; }
body.shell-page .shell-sidebar .shell-logo-inline[data-logo-position="center-left"] .shell-logo-organization { object-position: 0% 50%; }
body.shell-page .shell-sidebar .shell-logo-inline[data-logo-position="center"] .shell-logo-organization { object-position: 50% 50%; }
body.shell-page .shell-sidebar .shell-logo-inline[data-logo-position="center-right"] .shell-logo-organization { object-position: 100% 50%; }
body.shell-page .shell-sidebar .shell-logo-inline[data-logo-position="bottom-left"] .shell-logo-organization { object-position: 0% 100%; }
body.shell-page .shell-sidebar .shell-logo-inline[data-logo-position="bottom-center"] .shell-logo-organization { object-position: 50% 100%; }
body.shell-page .shell-sidebar .shell-logo-inline[data-logo-position="bottom-right"] .shell-logo-organization { object-position: 100% 100%; }
body.shell-page .shell-sidebar .shell-logo-name {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--cv-shell-strong);
    font-family: var(--cv-font-data) !important;
    font-size: 12px;
    font-weight: 700;
}

html.shell-collapsed body.shell-page .shell-sidebar .shell-collapse-row {
    justify-content: flex-start;
    gap: 4px;
    padding: 0 6px;
}
html.shell-collapsed body.shell-page .shell-sidebar .shell-logo-inline {
    display: flex !important;
    flex: 1 1 auto;
    min-width: 0;
    height: 44px;
    padding-left: 0;
}
html.shell-collapsed body.shell-page .shell-sidebar .shell-logo-organization {
    width: 100%;
    height: 26px;
    max-width: 32px;
    object-fit: contain;
    object-position: 50% 50%;
}
html.shell-collapsed body.shell-page .shell-sidebar .shell-logo-name {
    max-width: 32px;
    font-size: 9px !important;
    text-align: center;
}
body.shell-page .shell-sidebar .shell-nav-icon img { display: block; }

/* ── Work-group zone sub-headers ── */
body.shell-page .shell-sidebar .shell-nav-group-inner .shell-nav-subhead { margin-top: 12px !important; }
body.shell-page .shell-sidebar .shell-nav-group-inner .shell-nav-subhead:first-child { margin-top: 2px !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   17. SIDEBAR ENHANCE
   Replaces the former inline <style id="cv-sidebar-enhance"> block from
   shell_open.php. Nav search, favorites, hidden-item manager, context menu.
   ═══════════════════════════════════════════════════════════════════════════ */

.shell-search-wrap { padding: 6px 12px 2px; display: flex; align-items: center; gap: 6px; position: relative; }
.shell-collapsed .shell-search-wrap { display: none; }
.shell-search {
    width: 100%; padding: 5px 8px 5px 28px;
    border: 1px solid var(--cv-border);
    background: var(--cv-surface2);
    color: var(--cv-text);
    font-size: 11px; font-family: inherit; outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.shell-search:focus { border-color: var(--cv-cyan); box-shadow: 0 0 10px var(--cv-cyan-soft); }
.shell-search::placeholder { color: var(--cv-text-dim); opacity: .6; }
.shell-search-wrap svg { position: absolute; left: 20px; pointer-events: none; opacity: .4; width: 14px; height: 14px; color: var(--cv-text-dim); }
.shell-favorites { padding: 0 4px 4px; }
.shell-favorites:empty { display: none; }
.shell-favorites .shell-nav-section { font-size: 9px !important; }
.shell-nav-item.cv-hidden { display: none !important; }
.shell-nav-item.cv-search-hide { display: none !important; }
.shell-nav-group.cv-search-hide-group { display: none !important; }
.shell-nav-group.flyout-open { max-height: 70vh !important; overflow-y: auto !important; }
.shell-nav-section--toggle.cv-search-hide-group { display: none !important; }

/* Right-click context menu */
.cv-ctx-menu {
    position: fixed; z-index: 99999; min-width: 160px; padding: 4px 0;
    border: 1px solid var(--cv-border);
    background: var(--cv-surface);
    box-shadow: var(--cv-shadow-md);
    font-size: 12px; font-family: inherit;
}
.cv-ctx-item { display: flex; align-items: center; gap: 8px; padding: 7px 14px; color: var(--cv-text); cursor: pointer; white-space: nowrap; }
.cv-ctx-item:hover { background: var(--cv-surface2); }
.cv-ctx-item svg { width: 14px; height: 14px; opacity: .6; }
.cv-ctx-sep { height: 1px; margin: 4px 8px; background: var(--cv-border); }

/* Manage hidden items link */
.shell-manage-hidden { padding: 6px 16px; font-size: 10px; color: var(--cv-text-dim); cursor: pointer; display: none; }
.shell-manage-hidden:hover { color: var(--cv-accent); }
.shell-manage-hidden.has-hidden { display: block; }


/* ═══════════════════════════════════════════════════════════════════════════
   18. MOBILE HARDENING
   Premium touch behavior. Tactile press physics per the Tactical Command
   design reference (active:scale-.97), iOS-safe inputs, stacked layouts.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Tactile press - all interactive HUD elements (design ref §5) ── */
body.shell-page .cv-btn:active,
body.shell-page button:not(:disabled):active,
body.shell-page .shell-nav-item:active,
body.shell-page .cv-card--clickable:active {
    transform: scale(.97);
    transition: transform .15s ease-out;
}

/* ── Keyboard focus - cyan telemetry glow (design ref §5) ── */
body.shell-page a:focus-visible,
body.shell-page button:focus-visible,
body.shell-page .shell-nav-item:focus-visible {
    outline: 1px solid var(--cv-cyan);
    outline-offset: 1px;
    box-shadow: 0 0 10px var(--cv-cyan-soft);
}

body.shell-page { -webkit-tap-highlight-color: transparent; }

@media (max-width: 768px) {
    /* Kill horizontal wobble */
    body.shell-page { overflow-x: hidden; }

    /* Touch targets */
    body.shell-page .cv-btn,
    body.shell-page button:not(.shell-icon-btn):not(.cv-ctx-item) { min-height: 40px; }
    body.shell-page .shell-nav-item { min-height: 42px; }

    /* iOS: 16px input font prevents focus auto-zoom */
    body.shell-page input[type="text"],
    body.shell-page input[type="email"],
    body.shell-page input[type="password"],
    body.shell-page input[type="number"],
    body.shell-page input[type="url"],
    body.shell-page input[type="tel"],
    body.shell-page input[type="date"],
    body.shell-page input[type="datetime-local"],
    body.shell-page input[type="search"],
    body.shell-page select,
    body.shell-page textarea {
        font-size: 16px !important;
        min-height: 42px;
    }

    /* Data tables scroll sideways instead of crushing */
    body.shell-page .cv-table,
    body.shell-page .page-wrap table,
    body.shell-page .admin-wrap table,
    body.shell-page .cv-wrap table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

    /* Page headers stack their actions */
    body.shell-page .page-header,
    body.shell-page .cv-head {
        flex-wrap: wrap;
        gap: var(--cv-sp-3);
    }

    /* iOS safe areas */
    body.shell-page .shell-main {
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--cv-sp-4));
    }
    body.shell-page .shell-mobile-toggle {
        top: calc(env(safe-area-inset-top, 0px) + 10px);
        min-width: 44px;
        min-height: 44px;
    }
}

@media (max-width: 640px) {
    /* Modals go full-bleed on phones */
    body.shell-page .modal-box,
    body.shell-page .cv-modal {
        width: 100vw !important;
        max-width: 100vw !important;
        max-height: 100dvh !important;
        margin: 0 !important;
    }
}

@media (max-width: 480px) {
    body.shell-page .shell-main { font-size: 13px; }
    body.shell-page .kpi-grid,
    body.shell-page .admin-stats,
    body.shell-page .stat-grid { grid-template-columns: 1fr !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   19. GENERIC BUTTON TYPOGRAPHY (v2.3.0 - reined in)
   Typography identity only for legacy bare buttons. NO backgrounds, borders,
   padding, or forced colors: icon-only buttons (chat header), fixed-width
   table actions, and page-styled buttons keep their own layout. Their colors
   come from page CSS + the token bridge.
   ═══════════════════════════════════════════════════════════════════════════ */

body.shell-page button:not([class*="shell-"]):not(.cv-ctx-item):not(.cv-btn),
body.shell-page input[type="submit"],
body.shell-page input[type="button"],
body.shell-page a[class*="btn"]:not(.cv-btn) {
    font-family: var(--cv-font-display);
    letter-spacing: .03em;
    cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════════════════
   20. KPI METRIC GUARD (v2.2.0)
   v1-generation pages mark metric numbers with semantic classes
   (.num.cv-warn / .num.cv-danger). Legacy sheets (cv-admin.css) hijack these
   with high-specificity rules; this section, loading last, restores the
   token colors and the monospace data font in both themes.
   ═══════════════════════════════════════════════════════════════════════════ */

body.shell-page .cv-metric .num,
body.shell-page .num {
    font-family: var(--cv-font-data) !important;
    font-variant-numeric: tabular-nums;
}
body.shell-page .num.cv-warn,
body.shell-page .cv-metric .num.cv-warn   { color: var(--cv-warn) !important; }
body.shell-page .num.cv-danger,
body.shell-page .cv-metric .num.cv-danger { color: var(--cv-danger) !important; }
body.shell-page .num.cv-ok,
body.shell-page .cv-metric .num.cv-ok     { color: var(--cv-success) !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   21. MOBILE LAYOUT GUARDS (v2.4.0)
   Fixes the three systemic mobile failures: (1) the fixed .shell-mobile-toggle
   overlapping every page's header, (2) the floating chat bubble + quick-add
   FAB covering bottom-right form controls, (3) grid/flex children refusing to
   shrink (crushed side columns, truncated buttons).
   ═══════════════════════════════════════════════════════════════════════════ */

/* Media never escapes its container - all viewports */
body.shell-page .shell-main img,
body.shell-page .shell-main svg,
body.shell-page .shell-main canvas,
body.shell-page .shell-main video {
    max-width: 100%;
    height: auto;
}

@media (max-width: 900px) {
    /* (1) Clear the fixed hamburger - every page, no per-page edits */
    body.shell-page .shell-main {
        padding-top: calc(env(safe-area-inset-top, 0px) + 64px) !important;
    }

    /* (2) Clear the floating chat bubble + FAB stack */
    body.shell-page .shell-main {
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 120px) !important;
    }

    /* (3) Let grid/flex children shrink - stops side-column crush and
       button truncation. Scoped to mobile widths only. */
    body.shell-page .shell-main * {
        min-width: 0;
    }

    /* Side panels and asides go full-width */
    body.shell-page .wrap > aside {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* §21b - Horizontal hamburger clearance at narrow-desktop / tablet widths.
   Between 1024px and 1280px the .shell-mobile-toggle (hamburger) button is
   visible and overlaps the top-left of page content. This rule shifts page
   header rows (and a few historical page-app containers) right by 64px so
   titles, breadcrumbs, and toolbars never sit under the toggle button.

   Promoted from per-page overrides on 2026-06-26: cvt-employees.php line
   1263, cv-onboarding.php line 20, cvinvoices.php line 166. Every new page
   that uses .cv-wrap or any normalized wrapper gets this for free.
   Vertical clearance at <900px is still owned by §21 (1) above. */
@media (max-width: 1280px) {
    body.shell-page .shell-main > .cv-wrap > .cv-head,
    body.shell-page .shell-main > .cv-page > .cv-head,
    body.shell-page .shell-main > .admin-wrap > .cv-head,
    body.shell-page .shell-main > .page-wrap > .cv-head,
    body.shell-page .shell-main > .cv-onboard,
    body.shell-page .shell-main > #invApp,
    body.shell-page .shell-main > #estApp {
        padding-left: 64px;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   22. CHOICE CARDS, CHECK PILLS, TOASTS & HIDDEN (v2.5.0)
   Selectable option cards (payment mode, plan pickers), checkbox pills
   (accepted methods), labelled checkbox rows, corner toasts, and a global
   hidden utility. Token-only; theme parity via tokens.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Global hidden utility */
.cv-hidden { display: none !important; }

/* ── Choice cards: radio-like selectable cards ── */
.cv-choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--cv-sp-4);
    margin-bottom: var(--cv-sp-6);
}

.cv-choice-grid > .cv-choice,
.cv-choice[data-cv-choice-card] {
    position: relative;
    background: var(--cv-surface);
    border: 1px solid var(--cv-border);
    padding: var(--cv-sp-5);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.cv-choice-grid > .cv-choice:hover,
.cv-choice[data-cv-choice-card]:hover {
    border-color: var(--cv-accent);
    background: var(--cv-surface2);
}
.cv-choice-grid > .cv-choice.is-selected,
.cv-choice[data-cv-choice-card].is-selected {
    border-color: var(--cv-accent);
}
.cv-choice-grid > .cv-choice.is-selected::after,
.cv-choice[data-cv-choice-card].is-selected::after {
    content: '';
    position: absolute;
    top: var(--cv-sp-3);
    right: var(--cv-sp-3);
    width: 10px;
    height: 10px;
    background: var(--cv-accent);
}

.cv-choice-title {
    display: flex;
    align-items: center;
    gap: var(--cv-sp-2);
    font-family: var(--cv-font-display) !important;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .03em;
    color: var(--cv-text);
    margin-bottom: var(--cv-sp-2);
}
.cv-choice-title svg {
    width: 16px;
    height: 16px;
    color: var(--cv-accent);
    flex-shrink: 0;
}

.cv-choice-desc {
    font-family: var(--cv-font-body) !important;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--cv-text-dim);
}

.cv-choice-meta {
    margin-top: var(--cv-sp-3);
    font-family: var(--cv-font-data) !important;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--cv-text-muted);
}

/* ── Check pills: toggleable checkbox chips ── */
.cv-check-pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cv-sp-2);
}

.cv-check-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--cv-surface2);
    border: 1px solid var(--cv-border);
    padding: 7px 14px;
    font-family: var(--cv-font-data) !important;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--cv-text-dim);
    cursor: pointer;
    user-select: none;
    transition: border-color .12s ease, color .12s ease, background .12s ease;
}
.cv-check-pill input {
    width: 14px;
    height: 14px;
    margin: 0;
    accent-color: var(--cv-accent);
    cursor: pointer;
}
.cv-check-pill:hover {
    border-color: var(--cv-accent);
}
.cv-check-pill.is-on {
    border-color: var(--cv-accent);
    background: var(--cv-accent-soft);
    color: var(--cv-accent);
}

/* ── Check row: labelled checkbox line (settings toggles) ── */
.cv-check-row {
    display: flex;
    align-items: center;
    gap: var(--cv-sp-2);
    font-family: var(--cv-font-body) !important;
    font-size: 13px;
    color: var(--cv-text);
    cursor: pointer;
    user-select: none;
}
.cv-check-row input {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: var(--cv-accent);
    cursor: pointer;
    flex-shrink: 0;
}

/* Helper text under a control */
.cv-help {
    font-family: var(--cv-font-body) !important;
    font-size: 12px;
    line-height: 1.5;
    color: var(--cv-text-muted);
    margin-top: var(--cv-sp-2);
}

/* ── Toasts: fixed corner notifications ── */
.cv-toast {
    position: fixed;
    bottom: var(--cv-sp-6);
    right: var(--cv-sp-6);
    z-index: 300;
    background: var(--cv-surface);
    border: 1px solid var(--cv-accent);
    color: var(--cv-text);
    padding: var(--cv-sp-3) var(--cv-sp-4);
    font-family: var(--cv-font-body) !important;
    font-size: 13px;
    box-shadow: var(--cv-shadow-lg);
    max-width: 340px;
    animation: cv-toast-in .18s ease;
}
.cv-toast--danger { border-color: var(--cv-danger); color: var(--cv-danger); }
.cv-toast--success { border-color: var(--cv-success); }

@keyframes cv-toast-in {
    from { transform: translateY(8px); opacity: 0; }
    to   { transform: translateY(0);   opacity: 1; }
}

/* Mobile: choice cards stack, toast full-width above safe area */
@media (max-width: 768px) {
    .cv-choice-grid { grid-template-columns: 1fr; }
    .cv-toast {
        left: var(--cv-sp-3);
        right: var(--cv-sp-3);
        bottom: calc(var(--cv-sp-3) + env(safe-area-inset-bottom, 0px));
        max-width: none;
    }
}

/* ════════════════════════════════════════════════════════════════════
   §18 - ADMS Sidebar Icon System (v2.5.0)
   Bare sprite icons: no chips, no backgrounds, no boxes. Icons inherit
   currentColor from their nav item, so hover/active states color them
   automatically. Sized to sit on the existing 16px icon grid.
   ════════════════════════════════════════════════════════════════════ */
.shell-ic {
    width: 17px;
    height: 17px;
    display: inline-block;
    flex: 0 0 auto;
    vertical-align: -3px;
    color: inherit;
    background: none;
    border: none;
    border-radius: 0;
}
.shell-nav-icon .shell-ic { vertical-align: middle; }
.shell-nav-section .shell-ic,
.shell-nav-section-label .shell-ic {
    width: 14px;
    height: 14px;
    vertical-align: -2px;
    margin-right: 2px;
    opacity: .9;
}
.shell-nav-subhead .shell-ic { opacity: .7; }
/* Guard: nothing ever paints a box behind sidebar icons. */
.shell-nav-icon { background: none !important; border-radius: 0; }

/* ── §18b - Collapsed rail: icons stand in for section headers (v2.5.1).
   shell-sidebar.js hides .shell-nav-section-label and the chevron when the
   rail is collapsed, which used to leave bare divider lines. Instead: keep
   the label element, collapse its TEXT with font-size:0, and let the sprite
   icon inside it carry the section. The toggle button stays clickable, so a
   tap on the icon opens the flyout exactly as the label did. !important is
   required because the JS-injected sheet loads after this file. */
html.shell-collapsed .shell-nav-section {
    font-size: 0 !important;
    letter-spacing: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
html.shell-collapsed .shell-nav-section--toggle .shell-nav-section-label {
    display: inline-flex !important;   /* overrides the JS display:none */
    font-size: 0 !important;
    align-items: center;
    justify-content: center;
}
html.shell-collapsed .shell-nav-section .shell-ic,
html.shell-collapsed .shell-nav-section-label .shell-ic {
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    opacity: 1;
}
/* Chevron stays hidden in the rail - the icon is the whole affordance. */
html.shell-collapsed .shell-nav-section--toggle .shell-nav-section-chev { display: none !important; }

/* ── §18c - Collapsed rail, decisive form (v2.5.2). The §16 typography lock
   (body.shell-page .shell-sidebar …) outranks §18b's selectors, so the header
   text was still painting at 9-11px, and decorative pseudo-elements left line
   stubs beside the icons. These selectors carry strictly higher specificity:
   text goes to zero AND transparent, every ::before/::after on section
   headers is removed, and the sprite icon gets its color set explicitly so
   the transparent parent can't bleed into currentColor. Net result in the
   rail: icon, nothing else. */
html.shell-collapsed body.shell-page .shell-sidebar .shell-nav-section,
html.shell-collapsed body.shell-page .shell-sidebar .shell-nav-section--toggle,
html.shell-collapsed body.shell-page .shell-sidebar .shell-nav-subhead {
    font-size: 0 !important;
    letter-spacing: 0 !important;
    color: transparent !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    border: none !important;
}
html.shell-collapsed body.shell-page .shell-sidebar .shell-nav-section::before,
html.shell-collapsed body.shell-page .shell-sidebar .shell-nav-section::after,
html.shell-collapsed body.shell-page .shell-sidebar .shell-nav-section-label::before,
html.shell-collapsed body.shell-page .shell-sidebar .shell-nav-section-label::after,
html.shell-collapsed body.shell-page .shell-sidebar .shell-nav-section--toggle::before,
html.shell-collapsed body.shell-page .shell-sidebar .shell-nav-section--toggle::after {
    content: none !important;
    display: none !important;
}
html.shell-collapsed body.shell-page .shell-sidebar .shell-nav-section-label {
    display: inline-flex !important;
    font-size: 0 !important;
    color: transparent !important;
}
html.shell-collapsed body.shell-page .shell-sidebar .shell-nav-section .shell-ic,
html.shell-collapsed body.shell-page .shell-sidebar .shell-nav-section-label .shell-ic {
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    color: var(--cv-shell-strong, #6a665e) !important;
    opacity: 1 !important;
}
html.shell-collapsed body.shell-page .shell-sidebar .shell-nav-section--toggle:hover .shell-ic,
html.shell-collapsed body.shell-page .shell-sidebar .shell-nav-section--toggle.flyout-active .shell-ic {
    color: var(--cv-accent, #ff6b00) !important;
}

/* ── §18d - Flyouts escape the rail rules (v2.5.3). §18c zeroes section text
   for the collapsed RAIL, but an open flyout is a full-width card: inside it,
   item labels and zone sub-headers must read like the expanded sidebar.
   These selectors out-rank both §18c and any rail label-hider. */
html.shell-collapsed body.shell-page .shell-sidebar .shell-nav-group.flyout-open .shell-nav-label {
    display: inline !important;
    font-size: 12px !important;
    color: inherit !important;
    letter-spacing: normal !important;
}
html.shell-collapsed body.shell-page .shell-sidebar .shell-nav-group.flyout-open .shell-nav-item {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
}
html.shell-collapsed body.shell-page .shell-sidebar .shell-nav-group.flyout-open .shell-nav-subhead {
    font-size: 9px !important;
    letter-spacing: .08em !important;
    color: var(--cv-shell-section, #8a867e) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    overflow: visible !important;
}
html.shell-collapsed body.shell-page .shell-sidebar .shell-nav-group.flyout-open .shell-nav-subhead .shell-ic {
    width: 14px !important;
    height: 14px !important;
    margin-right: 4px !important;
}
html.shell-collapsed body.shell-page .shell-sidebar .shell-nav-group.flyout-open .shell-badge {
    display: inline-flex !important;
}

/* ── §18e - Mobile reveal (v2.5.4). When the sidebar is forcibly expanded by
   the @media (max-width: 900px) rules in shell.css (mobile open), the rail
   is no longer a rail at all - it's a full-width sidebar. §18b/c zero out
   section header text for the COLLAPSED rail using !important, so without
   this block those headers stay invisible even after the mobile media query
   restores everything else. Match §18c's specificity, gate on max-width:
   900px to only apply when the sidebar is forcibly expanded, and restore the
   section headers to their normal readable state. */
@media (max-width: 900px) {
    html.shell-collapsed body.shell-page .shell-sidebar .shell-nav-section,
    html.shell-collapsed body.shell-page .shell-sidebar .shell-nav-section--toggle,
    html.shell-collapsed body.shell-page .shell-sidebar .shell-nav-subhead {
        font-size: 11px !important;
        letter-spacing: .06em !important;
        color: var(--cv-shell-section, #8a867e) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        overflow: visible !important;
    }
    html.shell-collapsed body.shell-page .shell-sidebar .shell-nav-section--toggle .shell-nav-section-label {
        display: inline-flex !important;
        font-size: 11px !important;
        color: var(--cv-shell-strong, var(--text)) !important;
        font-weight: 700 !important;
        letter-spacing: .06em !important;
        align-items: center !important;
        gap: 6px !important;
    }
    html.shell-collapsed body.shell-page .shell-sidebar .shell-nav-section--toggle .shell-nav-section-chev {
        display: block !important;
        opacity: .85 !important;
    }
    html.shell-collapsed body.shell-page .shell-sidebar .shell-nav-section--toggle.is-collapsed .shell-nav-section-chev {
        transform: rotate(-90deg) !important;
    }
    html.shell-collapsed body.shell-page .shell-sidebar .shell-nav-section .shell-ic,
    html.shell-collapsed body.shell-page .shell-sidebar .shell-nav-section-label .shell-ic {
        width: 14px !important;
        height: 14px !important;
        margin: 0 6px 0 0 !important;
        color: inherit !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   §20 - RESPONSIVE LAYOUT CONTRACT (v2.4.0)
   One shared content contract every page inherits via .shell-main, so the
   ~90 pages stop each defining their own width/padding. This is the
   cohesion layer: content caps at 1600px, centers, and pads fluidly down
   the breakpoint ladder (1440 / 1180 / 1024 / 768 / 390). Hard overflow
   containment kills horizontal scroll on every page at once.
   Appended last so it wins the cascade. Scoped to body.shell-page to match
   the specificity of the existing shell rules.
   ═══════════════════════════════════════════════════════════════════════ */

/* --- The contract: shell-main is the OFFSET FRAME (positioned by shell.css
   with margin-left for the fixed sidebar). We must NOT set margin-inline or
   width here - that overrode shell.css's margin-left and pushed content under
   the sidebar. Instead: shell-main is already display:flex/column, so we cap
   and CENTER its children. Content gets the 1600px cap; the sidebar offset is
   left entirely to shell.css. --- */
body.shell-page .shell-main {
    box-sizing: border-box;
    min-width: 0;                 /* let flex/grid children shrink, no blowout */
    align-items: center;          /* center children horizontally in the frame */
    padding: var(--cv-sp-6) var(--cv-sp-8);   /* desktop default (24 / 32) */
    /* No width / max-width / margin-inline here - those fight shell.css's
       margin-left sidebar offset. Width capping happens on the children below. */
}

/* Cap + frame normal direct page-content children. Modal and drawer surfaces
   own their width/position and must never inherit the page-width contract. */
body.shell-page .shell-main > *:not([role="dialog"]):not(dialog) {
    max-width: var(--cv-content-max, 1600px);
    width: 100%;
    align-self: center;
}

/* Universal box-sizing inside content - stops padding/border overflow math */
body.shell-page .shell-main *,
body.shell-page .shell-main *::before,
body.shell-page .shell-main *::after {
    box-sizing: border-box;
}

/* Media never forces overflow */
body.shell-page .shell-main img,
body.shell-page .shell-main svg,
body.shell-page .shell-main video,
body.shell-page .shell-main canvas {
    max-width: 100%;
    height: auto;
}
/* Code/pre wrap or scroll inside their own box, never the page */
body.shell-page .shell-main pre {
    max-width: 100%;
    overflow-x: auto;
}
/* Wide tables scroll within their own wrapper, not the page.
   Wrap a table in .cv-tablewrap for horizontal scroll; bare tables still
   cap to container width so they reflow rather than push the layout. */
body.shell-page .shell-main .cv-tablewrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
body.shell-page .shell-main table {
    max-width: 100%;
}

/* --- Normalize the five legacy wrappers to the shared contract ---
   These pages set their own max-width/padding historically; neutralize the
   competing width so .shell-main owns it. Keep them as transparent passthroughs
   that just fill the frame. Padding now lives on .shell-main, so zero theirs
   to avoid double-padding. */
body.shell-page .shell-main > .cv-page,
body.shell-page .shell-main > .cv-wrap,
body.shell-page .shell-main > .page-wrap,
body.shell-page .shell-main > .admin-wrap,
body.shell-page .shell-main > #estApp,
body.shell-page .shell-main > #invApp {
    max-width: 100%;
    width: 100%;
    margin-inline: 0;
    padding-left: 0;
    padding-right: 0;
}

/* --- Breakpoint ladder: fluid padding only (layout reflow handled by the
   existing grid/flex rules above in this file) --- */

/* --- Breakpoint ladder: fluid padding only. The 1600px cap from the base
   rule stays in force at every width (it only visibly engages above ~1664px
   of viewport); below that, content is simply full-width-minus-padding.
   These queries change padding, never re-cap width. --- */

/* 1440 - large desktop */
@media (max-width: 1440px) {
    body.shell-page .shell-main {
        padding: var(--cv-sp-6) var(--cv-sp-8);   /* 24 / 32 */
    }
}

/* 1180 - narrow desktop: tighten side padding */
@media (max-width: 1180px) {
    body.shell-page .shell-main {
        padding: var(--cv-sp-6) var(--cv-sp-6);   /* 24 / 24 */
    }
}

/* 1024 - tablet: sidebar collapses to drawer (handled by shell rules);
   content goes full width with comfortable padding */
@media (max-width: 1024px) {
    body.shell-page .shell-main {
        padding: var(--cv-sp-5) var(--cv-sp-5);   /* 20 / 20 */
    }
}

/* 768 - portrait tablet / large phone */
@media (max-width: 768px) {
    body.shell-page .shell-main {
        padding: var(--cv-sp-4) var(--cv-sp-3);   /* 16 / 12 */
    }
}

/* 390 - mobile: minimal padding, every px of width counts */
@media (max-width: 390px) {
    body.shell-page .shell-main {
        padding: var(--cv-sp-3) var(--cv-sp-2);   /* 12 / 8 */
    }
}

/* §20 end */

/* ════════════════════════════════════════════════════════════════════
   §23 - ClearView Books workspace (v2.6.6)
   CLEARVIEW_BOOKS_CP1_3_JOURNAL_RESPONSIVE
   CLEARVIEW_BOOKS_CP1_3A_JOURNAL_FIT
   One-page responsive accounting workspace with internal tab navigation.
   CLEARVIEW_BOOKS_CP1
   CLEARVIEW_BOOKS_CP1_1_MODAL
   CLEARVIEW_BOOKS_CP1_2_BANK_READY
   ════════════════════════════════════════════════════════════════════ */
.cv-books {
    width: 100%;
    max-width: none;
    min-width: 0;
    padding-bottom: calc(var(--cv-sp-8) + env(safe-area-inset-bottom, 0px));
}

.cv-books-header {
    align-items: flex-start;
}

.cv-books-title-row {
    display: flex;
    align-items: center;
    gap: var(--cv-sp-3);
    flex-wrap: wrap;
}

.cv-books-title-row h1 {
    margin: 0;
}

.cv-books-org-switcher {
    display: grid;
    gap: var(--cv-sp-1);
    min-width: 220px;
}

.cv-books-org-switcher > span,
.cv-books-report-controls label > span {
    font-family: var(--cv-font-data);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--cv-text-muted);
}

.cv-books-tabs {
    display: flex;
    align-items: stretch;
    gap: 0;
    width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    border: 1px solid var(--cv-border);
    background: var(--cv-surface);
    margin-bottom: var(--cv-sp-4);
}

.cv-books-tab {
    min-height: 44px;
    padding: 0 var(--cv-sp-4);
    border: 0;
    border-right: 1px solid var(--cv-border);
    border-bottom: 3px solid transparent;
    background: var(--cv-surface);
    color: var(--cv-text-dim);
    font-family: var(--cv-font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
}

.cv-books-tab:last-child {
    border-right: 0;
}

.cv-books-tab:hover,
.cv-books-tab:focus-visible {
    color: var(--cv-text);
    background: var(--cv-surface2);
}

.cv-books-tab.is-active {
    color: var(--cv-text);
    border-bottom-color: transparent;
    background: transparent;
    font-weight: 800;
}

.cv-books-workspace,
.cv-books-panel,
.cv-books-panel-content {
    min-width: 0;
}

.cv-books-panel {
    display: none;
}

.cv-books-panel.is-active {
    display: block;
}

.cv-books-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    border: 1px solid var(--cv-border);
    background: var(--cv-surface);
    color: var(--cv-text-dim);
    font-family: var(--cv-font-data);
    font-size: 12px;
    text-align: center;
    padding: var(--cv-sp-6);
}

.cv-books-loading.is-error {
    border-color: var(--cv-danger);
    color: var(--cv-danger);
}

.cv-books-grid {
    display: grid;
    gap: var(--cv-sp-4);
    min-width: 0;
    margin-bottom: var(--cv-sp-4);
}

.cv-books-grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cv-books-grid--settings {
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
}

.cv-books-kpis {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: var(--cv-sp-4);
}

.cv-books-kpi--accent,
.cv-books-kpi--cyan { border-top-color: var(--cv-border); }
.cv-books-kpi--success { border-top-color: var(--cv-success); }
.cv-books-kpi--warn { border-top-color: var(--cv-warn); }

.cv-books-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--cv-sp-4);
    margin-bottom: var(--cv-sp-4);
}

.cv-books-section-heading h2 {
    margin: 0 0 var(--cv-sp-1);
}

.cv-books-section-heading p {
    margin: 0;
    color: var(--cv-text-dim);
}

.cv-books .cv-card {
    min-width: 0;
    margin-bottom: var(--cv-sp-4);
}

.cv-books .cv-card-header > div {
    min-width: 0;
}

.cv-books .cv-card-header p {
    margin: var(--cv-sp-1) 0 0;
    color: var(--cv-text-dim);
    font-size: 12px;
}

.cv-books .cv-card-header .cv-btn-ghost,
.cv-books .cv-card-header .cv-btn-primary {
    flex: 0 0 auto;
}

.cv-books-status {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 2px var(--cv-sp-2);
    border: 1px solid var(--cv-border);
    background: var(--cv-surface2);
    color: var(--cv-text-dim);
    font-family: var(--cv-font-data);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.cv-books-status--active,
.cv-books-status--paid,
.cv-books-status--accepted,
.cv-books-status--approved,
.cv-books-status--completed,
.cv-books-status--closed {
    border-color: var(--cv-success);
    color: var(--cv-success);
    background: var(--cv-success-soft);
}

.cv-books-status--open,
.cv-books-status--sent,
.cv-books-status--draft,
.cv-books-status--pending,
.cv-books-status--partially-paid {
    border-color: var(--cv-warn);
    color: var(--cv-warn);
    background: var(--cv-warn-soft);
}

.cv-books-status--overdue,
.cv-books-status--void,
.cv-books-status--rejected,
.cv-books-status--inactive,
.cv-books-status--reversed,
.cv-books-status--cancelled {
    border-color: var(--cv-danger);
    color: var(--cv-danger);
    background: var(--cv-danger-soft);
}

.cv-books-status--posted,
.cv-books-status--received,
.cv-books-status--active {
    border-color: var(--cv-cyan);
    color: var(--cv-cyan);
    background: var(--cv-cyan-soft);
}

.cv-books-link-button {
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--cv-accent);
    font-family: var(--cv-font-data);
    font-size: inherit;
    font-weight: 700;
    cursor: pointer;
    text-align: left;
}

.cv-books-link-button:hover,
.cv-books-link-button:focus-visible {
    text-decoration: underline;
}

.cv-books-empty {
    min-height: 0;
    padding: var(--cv-sp-4);
}

.cv-books-report-controls {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) repeat(2, minmax(170px, .5fr));
    gap: var(--cv-sp-3);
    align-items: end;
    margin-bottom: var(--cv-sp-4);
}

.cv-books-report-controls label {
    display: grid;
    gap: var(--cv-sp-1);
}

.cv-books-report-title,
.cv-books-report-total,
.cv-books-report-check {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cv-sp-4);
}

.cv-books-report-title {
    padding-bottom: var(--cv-sp-4);
    border-bottom: 1px solid var(--cv-border);
    margin-bottom: var(--cv-sp-4);
}

.cv-books-report-title h2,
.cv-books-report-title p {
    margin: 0;
}

.cv-books-report-title p {
    margin-top: var(--cv-sp-1);
    color: var(--cv-text-dim);
}

.cv-books-report-title > strong,
.cv-books-report-total > strong,
.cv-books-report-check > strong {
    font-family: var(--cv-font-data);
    font-size: 18px;
    white-space: nowrap;
}

.cv-books-report-section {
    margin-bottom: var(--cv-sp-5);
}

.cv-books-report-section h3 {
    margin: 0 0 var(--cv-sp-2);
}

.cv-books-report-total,
.cv-books-report-check {
    padding: var(--cv-sp-3) 0;
    border-top: 1px solid var(--cv-border);
    font-family: var(--cv-font-display);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.cv-books-report-check {
    color: var(--cv-cyan);
}

.cv-books-modal {
    width: min(680px, calc(100vw - (var(--cv-sp-6) * 2)));
    max-width: min(680px, calc(100vw - (var(--cv-sp-6) * 2)));
    max-height: calc(100vh - (var(--cv-sp-6) * 2));
    overflow: auto;
}

.cv-books-modal--wide {
    width: min(1040px, calc(100vw - (var(--cv-sp-6) * 2)));
    max-width: min(1040px, calc(100vw - (var(--cv-sp-6) * 2)));
}

.cv-books-modal--journal {
    width: min(1240px, calc(100vw - (var(--cv-sp-4) * 2)));
    max-width: min(1240px, calc(100vw - (var(--cv-sp-4) * 2)));
}

.cv-books-modal--setup {
    width: min(760px, calc(100vw - (var(--cv-sp-6) * 2)));
    max-width: min(760px, calc(100vw - (var(--cv-sp-6) * 2)));
}

.cv-books-setup-body {
    display: block;
}

.cv-books-setup-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--cv-sp-4);
    align-items: start;
}

.cv-books-setup-grid .cv-field {
    display: grid;
    gap: var(--cv-sp-2);
    min-width: 0;
    margin: 0;
}

.cv-books-setup-grid .cv-field > span {
    display: block;
    line-height: 1.35;
}

.cv-books-setup-grid input,
.cv-books-setup-grid select {
    width: 100%;
    min-width: 0;
    min-height: 44px;
}

.cv-books-setup-note {
    margin-top: var(--cv-sp-5);
    line-height: 1.6;
}

.cv-books-setup-footer .cv-btn-ghost,
.cv-books-setup-footer .cv-btn-primary {
    min-width: 140px;
    justify-content: center;
}

.cv-books-modal--bank {
    width: min(760px, calc(100vw - (var(--cv-sp-6) * 2)));
    max-width: min(760px, calc(100vw - (var(--cv-sp-6) * 2)));
}

.cv-books-bank-body {
    display: block;
}

.cv-books-bank-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(190px, .75fr);
    gap: var(--cv-sp-4);
    align-items: start;
}

.cv-books-bank-grid .cv-field {
    display: grid;
    gap: var(--cv-sp-2);
    min-width: 0;
    margin: 0;
}

.cv-books-bank-grid .cv-field > span {
    display: block;
    line-height: 1.35;
}

.cv-books-bank-grid input,
.cv-books-bank-grid select {
    width: 100%;
    min-width: 0;
    min-height: 44px;
}

.cv-books-bank-grid .cv-field--full,
.cv-books-bank-note {
    grid-column: 1 / -1;
}

.cv-books-bank-note {
    margin-top: var(--cv-sp-1);
    line-height: 1.6;
}

.cv-books-bank-footer .cv-btn-ghost,
.cv-books-bank-footer .cv-btn-primary {
    min-width: 140px;
    justify-content: center;
}

.cv-books-journal-body {
    overflow: hidden;
}

.cv-books-journal-meta {
    display: grid;
    grid-template-columns: minmax(220px, .55fr) minmax(0, 1.45fr);
    gap: var(--cv-sp-4);
    align-items: end;
}

.cv-books-journal-meta .cv-field {
    display: grid;
    gap: var(--cv-sp-2);
    min-width: 0;
    margin: 0;
}

.cv-books-journal-meta input {
    width: 100%;
    min-width: 0;
    min-height: 44px;
}

.cv-books-journal-lines-wrap {
    margin: var(--cv-sp-4) 0 var(--cv-sp-3);
    overflow: hidden;
}

.cv-books-journal-lines {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
}

.cv-books-journal-col-account {
    width: 29%;
}

.cv-books-journal-col-description {
    width: 31%;
}

.cv-books-journal-col-amount {
    width: 14%;
}

.cv-books-journal-col-remove {
    width: 12%;
}

.cv-books-journal-lines th,
.cv-books-journal-lines td {
    min-width: 0;
    box-sizing: border-box;
    padding-inline: var(--cv-sp-2);
}

.cv-books-journal-lines th:first-child,
.cv-books-journal-lines td:first-child {
    padding-left: 0;
}

.cv-books-journal-lines th:last-child,
.cv-books-journal-lines td:last-child {
    padding-right: 0;
}

.cv-books-journal-lines select,
.cv-books-journal-lines input {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.cv-books-journal-lines td:last-child,
.cv-books-journal-lines th:last-child {
    text-align: center;
}

.cv-books-journal-lines td:last-child .cv-icon-btn {
    margin-inline: auto;
}

.cv-books-journal-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: var(--cv-sp-3);
    border-top: 2px solid var(--cv-border);
    border-bottom: 1px solid var(--cv-border);
    background: var(--cv-surface2);
}

.cv-books-journal-summary > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cv-sp-3);
    min-width: 0;
    padding: var(--cv-sp-3) var(--cv-sp-4);
}

.cv-books-journal-summary > div + div {
    border-left: 1px solid var(--cv-border);
}

.cv-books-journal-summary span {
    font-family: var(--cv-font-display);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--cv-text-muted);
}

.cv-books-journal-summary strong {
    font-family: var(--cv-font-data);
    font-size: 15px;
    font-variant-numeric: tabular-nums;
    color: var(--cv-text);
}

.cv-books-journal-line-actions {
    display: flex;
    justify-content: flex-start;
}

.cv-books-journal-footer {
    gap: var(--cv-sp-4);
}

.cv-books-journal-footer-actions {
    display: flex;
    align-items: center;
    gap: var(--cv-sp-3);
}

.cv-books-balance-status {
    margin-right: auto;
    color: var(--cv-warn);
    font-family: var(--cv-font-data);
    font-size: 11px;
}

.cv-books-balance-status.is-balanced {
    color: var(--cv-success);
}

.cv-books-entry-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--cv-sp-3);
    margin-bottom: var(--cv-sp-4);
}

.cv-books-entry-summary > div {
    display: grid;
    gap: var(--cv-sp-1);
    padding: var(--cv-sp-3);
    border: 1px solid var(--cv-border);
    background: var(--cv-surface2);
}

.cv-books-entry-summary span,
.cv-books-definition-list dt {
    font-family: var(--cv-font-data);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--cv-text-muted);
}

.cv-books-entry-summary strong,
.cv-books-definition-list dd {
    margin: 0;
    font-family: var(--cv-font-data);
    font-size: 13px;
    color: var(--cv-text);
}

.cv-books-entry-memo {
    margin: 0 0 var(--cv-sp-4);
    color: var(--cv-text-dim);
}

.cv-books-reversal-form {
    align-items: end;
    flex-wrap: wrap;
}

.cv-books-definition-list {
    display: grid;
    gap: 0;
    margin: 0;
}

.cv-books-definition-list > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cv-sp-3);
    padding: var(--cv-sp-3) 0;
    border-bottom: 1px solid var(--cv-border);
}

.cv-books-definition-list > div:last-child {
    border-bottom: 0;
}

.cv-books-link-list {
    display: grid;
    gap: var(--cv-sp-2);
}

.cv-books-link-list a {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: var(--cv-sp-2) var(--cv-sp-3);
    border: 1px solid var(--cv-border);
    background: var(--cv-surface2);
    color: var(--cv-text);
    font-family: var(--cv-font-display);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
}

.cv-books-link-list a:hover,
.cv-books-link-list a:focus-visible {
    border-color: var(--cv-accent);
    color: var(--cv-accent);
}

.cv-books-toast--danger {
    border-color: var(--cv-danger);
    color: var(--cv-danger);
}

.cv-books .cv-btn-primary svg,
.cv-books .cv-btn-ghost svg,
.cv-books .cv-btn-danger svg,
.cv-books .cv-icon-btn svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

@media (max-width: 1100px) and (min-width: 901px) {
    .cv-books-modal--journal .cv-modal-header {
        padding-inline: var(--cv-sp-4);
    }

    .cv-books-modal--journal .cv-books-journal-body {
        padding-inline: var(--cv-sp-4);
    }

    .cv-books-modal--journal .cv-modal-footer {
        padding-inline: var(--cv-sp-4);
    }

    .cv-books-journal-meta {
        grid-template-columns: minmax(190px, .5fr) minmax(0, 1.5fr);
    }
}

@media (max-width: 1024px) {
    .cv-books-grid--two,
    .cv-books-grid--settings {
        grid-template-columns: 1fr;
    }

    .cv-books-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .cv-books-journal-body {
        overflow: visible;
    }

    .cv-books-journal-meta {
        grid-template-columns: 1fr;
    }

    .cv-books-journal-lines-wrap {
        overflow: visible;
    }

    .cv-books-journal-lines,
    .cv-books-journal-lines tbody,
    .cv-books-journal-lines tr,
    .cv-books-journal-lines td {
        display: block;
        width: 100%;
    }

    .cv-books-journal-lines colgroup,
    .cv-books-journal-lines thead {
        display: none;
    }

    .cv-books-journal-lines tbody {
        display: grid;
        gap: var(--cv-sp-4);
    }

    .cv-books-journal-lines tbody tr {
        padding: var(--cv-sp-3);
        border: 1px solid var(--cv-border);
        background: var(--cv-surface2);
    }

    .cv-books-journal-lines tbody tr:hover td {
        background: transparent;
    }

    .cv-books-journal-lines tbody td {
        display: grid;
        grid-template-columns: minmax(100px, .38fr) minmax(0, 1fr);
        gap: var(--cv-sp-3);
        align-items: center;
        padding: var(--cv-sp-2) 0;
        border: 0;
        text-align: left;
    }

    .cv-books-journal-lines tbody td::before {
        content: attr(data-label);
        font-family: var(--cv-font-display);
        font-size: 10px;
        font-weight: 800;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--cv-text-muted);
    }

    .cv-books-journal-lines tbody td:last-child {
        text-align: left;
    }

    .cv-books-journal-lines tbody td:last-child .cv-icon-btn {
        margin: 0;
        justify-self: start;
    }

    .cv-books-journal-summary {
        grid-template-columns: 1fr;
    }

    .cv-books-journal-summary > div + div {
        border-left: 0;
        border-top: 1px solid var(--cv-border);
    }

    .cv-books-journal-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .cv-books-journal-footer-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .cv-books-balance-status {
        width: 100%;
        margin-right: 0;
    }
}

@media (max-width: 768px) {
    .cv-books-header,
    .cv-books-section-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .cv-books-header .cv-page-header-actions,
    .cv-books-section-heading > .cv-btn-primary,
    .cv-books-section-heading > .cv-btn-ghost {
        width: 100%;
    }

    .cv-books-org-switcher {
        width: 100%;
        min-width: 0;
    }

    .cv-books-tabs {
        margin-inline: calc(var(--cv-page-pad, var(--cv-sp-4)) * -1);
        width: calc(100% + (var(--cv-page-pad, var(--cv-sp-4)) * 2));
        border-left: 0;
        border-right: 0;
    }

    .cv-books-tab {
        min-height: 48px;
        padding-inline: var(--cv-sp-4);
    }

    .cv-books-report-controls {
        grid-template-columns: 1fr;
    }

    .cv-books-entry-summary {
        grid-template-columns: 1fr;
    }

    .cv-books-modal,
    .cv-books-modal--wide,
    .cv-books-modal--setup,
    .cv-books-modal--bank,
    .cv-books-modal--journal {
        width: 100%;
        max-height: 100%;
    }

    .cv-books-setup-grid,
    .cv-books-bank-grid {
        grid-template-columns: 1fr;
    }

    .cv-books-bank-grid .cv-field--full,
    .cv-books-bank-note {
        grid-column: auto;
    }

    .cv-books-setup-note {
        margin-top: var(--cv-sp-4);
    }

    .cv-books-reversal-form {
        align-items: stretch;
    }

    .cv-books-reversal-form .cv-field,
    .cv-books-reversal-form .cv-btn-danger {
        width: 100%;
    }
}

@media (max-width: 640px) {
    .cv-books-setup-footer,
    .cv-books-bank-footer {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .cv-books-journal-footer-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .cv-books-journal-footer-actions .cv-btn-ghost,
    .cv-books-journal-footer-actions .cv-btn-primary,
    .cv-books-journal-line-actions .cv-btn-ghost {
        width: 100%;
    }

    .cv-books-setup-footer .cv-btn-ghost,
    .cv-books-setup-footer .cv-btn-primary,
    .cv-books-bank-footer .cv-btn-ghost,
    .cv-books-bank-footer .cv-btn-primary {
        width: 100%;
        min-width: 0;
    }

    .cv-books-kpis {
        grid-template-columns: 1fr;
    }

    .cv-books-report-title,
    .cv-books-report-total,
    .cv-books-report-check,
    .cv-books-definition-list > div {
        align-items: flex-start;
        flex-direction: column;
    }

    .cv-books-report-title > strong,
    .cv-books-report-total > strong,
    .cv-books-report-check > strong {
        white-space: normal;
    }
}

@media (max-width: 480px) {
    .cv-books-title-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .cv-books-tab {
        padding-inline: var(--cv-sp-3);
        font-size: 10px;
    }

    .cv-books .cv-card-header {
        align-items: stretch;
        flex-direction: column;
    }

    .cv-books .cv-card-header .cv-btn-ghost,
    .cv-books .cv-card-header .cv-btn-primary {
        width: 100%;
    }
}

/* ════════════════════════════════════════════════════════════════════
   §24 - ClearView Books Accounts Payable (v2.7.0)
   CLEARVIEW_BOOKS_CP3_PAYABLES
   Vendor bills, credits, direct expenses, bill payments, and AP aging.
   ════════════════════════════════════════════════════════════════════ */
.cv-books-kpi--danger {
    border-top-color: var(--cv-danger);
}

.cv-books-heading-actions,
.cv-books-row-actions,
.cv-books-ap-line-actions {
    display: flex;
    align-items: center;
    gap: var(--cv-sp-2);
    flex-wrap: wrap;
}

.cv-books-heading-actions {
    justify-content: flex-end;
}

.cv-books-subtabs {
    display: flex;
    align-items: stretch;
    gap: 0;
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--cv-border);
    background: var(--cv-surface);
    margin-bottom: var(--cv-sp-4);
}

.cv-books-subtab {
    min-height: 40px;
    padding: 0 var(--cv-sp-3);
    border: 0;
    border-right: 1px solid var(--cv-border);
    border-bottom: 2px solid transparent;
    background: var(--cv-surface);
    color: var(--cv-text-dim);
    font-family: var(--cv-font-display);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
}

.cv-books-subtab:last-child {
    border-right: 0;
}

.cv-books-subtab:hover,
.cv-books-subtab:focus-visible,
.cv-books-subtab.is-active {
    color: var(--cv-accent);
    background: var(--cv-surface2);
}

.cv-books-subtab.is-active {
    border-bottom-color: transparent;
}

.cv-books-subpanel {
    display: none;
}

.cv-books-subpanel.is-active {
    display: block;
}

.cv-books-row-actions {
    min-width: 150px;
}

.cv-books-action-link {
    border: 0;
    padding: 2px 0;
    background: transparent;
    color: var(--cv-accent);
    font-family: var(--cv-font-data);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
}

.cv-books-action-link:hover,
.cv-books-action-link:focus-visible {
    text-decoration: underline;
}

.cv-books-action-link--danger {
    color: var(--cv-danger);
}

.cv-books-modal--ap {
    width: min(1180px, calc(100vw - (var(--cv-sp-4) * 2)));
    max-width: min(1180px, calc(100vw - (var(--cv-sp-4) * 2)));
}

.cv-books-ap-body {
    min-width: 0;
}

.cv-books-ap-meta {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--cv-sp-3);
    align-items: start;
}

.cv-books-ap-meta .cv-field,
.cv-books-payment-grid .cv-field {
    display: grid;
    gap: var(--cv-sp-2);
    min-width: 0;
    margin: 0;
}

.cv-books-ap-meta .cv-field--full,
.cv-books-payment-grid .cv-field--full {
    grid-column: 1 / -1;
}

.cv-books-ap-meta input,
.cv-books-ap-meta select,
.cv-books-payment-grid input,
.cv-books-payment-grid select {
    width: 100%;
    min-width: 0;
    min-height: 44px;
}

.cv-books-ap-lines-wrap {
    margin-top: var(--cv-sp-4);
}

.cv-books-ap-lines {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
}

.cv-books-ap-lines th:nth-child(1),
.cv-books-ap-lines td:nth-child(1) { width: 20%; }
.cv-books-ap-lines th:nth-child(2),
.cv-books-ap-lines td:nth-child(2) { width: 24%; }
.cv-books-ap-lines th:nth-child(3),
.cv-books-ap-lines td:nth-child(3) { width: 16%; }
.cv-books-ap-lines th:nth-child(4),
.cv-books-ap-lines td:nth-child(4) { width: 9%; }
.cv-books-ap-lines th:nth-child(5),
.cv-books-ap-lines td:nth-child(5) { width: 12%; }
.cv-books-ap-lines th:nth-child(6),
.cv-books-ap-lines td:nth-child(6) { width: 12%; }
.cv-books-ap-lines th:nth-child(7),
.cv-books-ap-lines td:nth-child(7) { width: 7%; }

.cv-books-ap-lines select,
.cv-books-ap-lines input {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.cv-books-ap-lines td:last-child,
.cv-books-ap-lines th:last-child {
    text-align: center;
}

.cv-books-ap-lines td:last-child .cv-icon-btn {
    margin-inline: auto;
}

.cv-books-ap-line-actions {
    justify-content: flex-start;
    margin-top: var(--cv-sp-3);
}

.cv-books-ap-totals {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: var(--cv-sp-4);
    border-top: 2px solid var(--cv-border);
    border-bottom: 1px solid var(--cv-border);
    background: var(--cv-surface2);
}

.cv-books-ap-totals > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cv-sp-3);
    min-width: 0;
    padding: var(--cv-sp-3) var(--cv-sp-4);
}

.cv-books-ap-totals > div + div {
    border-left: 1px solid var(--cv-border);
}

.cv-books-ap-totals span {
    color: var(--cv-text-muted);
    font-family: var(--cv-font-display);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.cv-books-ap-totals strong,
#booksBillPaymentBalance {
    font-family: var(--cv-font-data);
    font-variant-numeric: tabular-nums;
}

.cv-books-ap-footer .cv-btn-ghost,
.cv-books-ap-footer .cv-btn-primary {
    min-width: 130px;
    justify-content: center;
}

.cv-books-modal--payment {
    width: min(760px, calc(100vw - (var(--cv-sp-6) * 2)));
    max-width: min(760px, calc(100vw - (var(--cv-sp-6) * 2)));
}

.cv-books-payment-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--cv-sp-4);
}

@media (max-width: 1024px) {
    .cv-books-ap-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cv-books-ap-lines thead {
        display: none;
    }

    .cv-books-ap-lines,
    .cv-books-ap-lines tbody,
    .cv-books-ap-lines tr,
    .cv-books-ap-lines td {
        display: block;
        width: 100%;
    }

    .cv-books-ap-lines tr {
        padding: var(--cv-sp-3);
        border: 1px solid var(--cv-border);
        background: var(--cv-surface2);
        margin-bottom: var(--cv-sp-3);
    }

    .cv-books-ap-lines td {
        display: grid;
        grid-template-columns: minmax(120px, .4fr) minmax(0, 1fr);
        gap: var(--cv-sp-3);
        align-items: center;
        padding: var(--cv-sp-2) 0;
        border: 0;
        text-align: left;
    }

    .cv-books-ap-lines td::before {
        content: attr(data-label);
        color: var(--cv-text-muted);
        font-family: var(--cv-font-display);
        font-size: 10px;
        font-weight: 800;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    .cv-books-ap-lines td:last-child {
        text-align: left;
    }

    .cv-books-ap-lines td:last-child .cv-icon-btn {
        margin-inline: 0;
    }
}

@media (max-width: 768px) {
    .cv-books-section-heading {
        align-items: stretch;
    }

    .cv-books-heading-actions {
        justify-content: stretch;
    }

    .cv-books-heading-actions > * {
        flex: 1 1 160px;
        justify-content: center;
    }

    .cv-books-ap-meta,
    .cv-books-payment-grid {
        grid-template-columns: 1fr;
    }

    .cv-books-ap-meta .cv-field--full,
    .cv-books-payment-grid .cv-field--full {
        grid-column: auto;
    }

    .cv-books-ap-totals {
        grid-template-columns: 1fr;
    }

    .cv-books-ap-totals > div + div {
        border-left: 0;
        border-top: 1px solid var(--cv-border);
    }

    .cv-books-ap-footer {
        align-items: stretch;
    }

    .cv-books-ap-footer .cv-btn-ghost,
    .cv-books-ap-footer .cv-btn-primary {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .cv-books-ap-lines td {
        grid-template-columns: 1fr;
        gap: var(--cv-sp-1);
    }
}

.cv-books-aging {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid var(--cv-border);
    border-bottom: 1px solid var(--cv-border);
    background: var(--cv-surface2);
}

.cv-books-aging > div {
    display: grid;
    gap: var(--cv-sp-1);
    padding: var(--cv-sp-3) var(--cv-sp-4);
}

.cv-books-aging > div + div {
    border-left: 1px solid var(--cv-border);
}

.cv-books-aging span {
    color: var(--cv-text-muted);
    font-family: var(--cv-font-display);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.cv-books-aging strong {
    font-family: var(--cv-font-data);
    font-size: 16px;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 768px) {
    .cv-books-aging {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cv-books-aging > div:nth-child(3) {
        border-left: 0;
        border-top: 1px solid var(--cv-border);
    }

    .cv-books-aging > div:nth-child(4) {
        border-top: 1px solid var(--cv-border);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   §24 - ClearView Books first-vendor workflow (v2.7.1)
   CLEARVIEW_BOOKS_CP3_1_FIRST_VENDOR
   ═══════════════════════════════════════════════════════════════════════════ */

.cv-books-vendor-empty.cv-hidden {
    display: none;
}

.cv-books-vendor-empty {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cv-sp-4);
    margin-bottom: var(--cv-sp-4);
}

.cv-books-vendor-empty > div {
    display: grid;
    gap: var(--cv-sp-1);
}

.cv-books-ap-vendor-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--cv-sp-2);
    align-items: end;
    min-width: 0;
}

.cv-books-ap-vendor-field .cv-field,
.cv-books-ap-vendor-field select {
    min-width: 0;
    width: 100%;
}

.cv-books-ap-vendor-field > .cv-btn-ghost {
    min-height: 44px;
    white-space: nowrap;
}

.cv-books-modal--vendor {
    width: min(760px, calc(100vw - (var(--cv-sp-6) * 2)));
    max-width: min(760px, calc(100vw - (var(--cv-sp-6) * 2)));
}

.cv-books-vendor-create-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--cv-sp-4);
}

.cv-books-vendor-create-grid input,
.cv-books-vendor-create-grid select,
.cv-books-vendor-create-grid textarea {
    width: 100%;
    min-width: 0;
}

.cv-books-vendor-create-footer .cv-btn-ghost,
.cv-books-vendor-create-footer .cv-btn-primary {
    min-width: 132px;
    justify-content: center;
}

@media (max-width: 768px) {
    .cv-books-vendor-empty {
        align-items: stretch;
        flex-direction: column;
    }

    .cv-books-vendor-empty .cv-btn-primary {
        width: 100%;
        justify-content: center;
    }

    .cv-books-ap-vendor-field,
    .cv-books-vendor-create-grid {
        grid-template-columns: 1fr;
    }

    .cv-books-ap-vendor-field > .cv-btn-ghost,
    .cv-books-vendor-create-footer .cv-btn-ghost,
    .cv-books-vendor-create-footer .cv-btn-primary {
        width: 100%;
    }

    .cv-books-vendor-create-grid .cv-field--full {
        grid-column: auto;
    }

    .cv-books-vendor-create-footer {
        align-items: stretch;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   §24 - ClearView Books Banking (v2.8.0)
   CLEARVIEW_BOOKS_CP4_BANKING
   ═══════════════════════════════════════════════════════════════════════════ */

.cv-books-bank-heading .cv-books-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--cv-space-2);
}

.cv-books-inline-select {
  min-width: min(320px, 100%);
  margin: 0;
}

.cv-books-inline-select > span {
  font-size: var(--cv-text-xs);
}

.cv-books-modal--banking-action {
  width: min(720px, calc(100vw - 32px));
  max-width: 720px;
}

.cv-books-modal--bank-review {
  width: min(1180px, calc(100vw - 32px));
  max-width: 1180px;
}

.cv-books-review-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--cv-space-3);
  margin-top: var(--cv-space-4);
}

.cv-books-review-grid .cv-card {
  display: flex;
  flex-direction: column;
  gap: var(--cv-space-3);
  min-width: 0;
  padding: var(--cv-space-4);
}

.cv-books-review-grid .cv-card h3,
.cv-books-review-grid .cv-card p {
  margin: 0;
}

.cv-books-review-grid .cv-card .cv-btn-primary,
.cv-books-review-grid .cv-card .cv-btn-danger {
  margin-top: auto;
  width: 100%;
}

.cv-books-modal--reconciliation {
  width: min(1240px, calc(100vw - 32px));
  max-width: 1240px;
}

.cv-books-recon-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--cv-line);
  margin-bottom: var(--cv-space-4);
}

.cv-books-recon-summary > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cv-space-3);
  min-height: 72px;
  padding: var(--cv-space-3) var(--cv-space-4);
}

.cv-books-recon-summary > div + div {
  border-left: 1px solid var(--cv-line);
}

.cv-books-recon-summary span {
  color: var(--cv-text-muted);
  font-family: var(--cv-font-display);
  font-size: var(--cv-text-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.cv-books-recon-summary strong {
  font-family: var(--cv-font-data);
  font-size: var(--cv-text-xl);
  font-variant-numeric: tabular-nums;
}

.cv-books-recon-table {
  max-height: min(54vh, 620px);
  overflow: auto;
}

.cv-books-recon-table input[type="checkbox"] {
  width: 22px;
  height: 22px;
}

.cv-link-button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--cv-accent);
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cv-link-button:hover {
  color: var(--cv-cyan);
}

@media (max-width: 1024px) {
  .cv-books-review-grid {
    grid-template-columns: 1fr;
  }

  .cv-books-bank-heading {
    align-items: flex-start;
  }

  .cv-books-bank-heading .cv-books-actions {
    justify-content: flex-start;
    width: 100%;
  }
}

@media (max-width: 768px) {
  .cv-books-bank-heading .cv-books-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cv-books-bank-heading .cv-books-actions > * {
    width: 100%;
  }

  .cv-books-recon-summary {
    grid-template-columns: 1fr;
  }

  .cv-books-recon-summary > div + div {
    border-left: 0;
    border-top: 1px solid var(--cv-line);
  }

  .cv-books-modal--bank-review,
  .cv-books-modal--banking-action,
  .cv-books-modal--reconciliation {
    width: 100%;
    max-width: none;
  }
}

@media (max-width: 480px) {
  .cv-books-bank-heading .cv-books-actions {
    grid-template-columns: 1fr;
  }

  .cv-books-recon-summary > div {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   §24a - ClearView Books Banking Review UI (v2.8.1)
   CLEARVIEW_BOOKS_CP4_2_BANKING_UI
   ═══════════════════════════════════════════════════════════════════════════ */

.cv-books-modal--bank-review {
  width: min(1320px, calc(100vw - (var(--cv-sp-4) * 2)));
  max-width: min(1320px, calc(100vw - (var(--cv-sp-4) * 2)));
  overflow: hidden;
}

.cv-books-bank-review-body {
  display: grid;
  gap: var(--cv-sp-5);
  max-height: calc(90vh - 96px);
  overflow: auto;
}

.cv-books-bank-review-summary {
  gap: var(--cv-sp-4);
  margin: 0;
}

.cv-books-bank-review-summary > div {
  min-height: 86px;
  padding: var(--cv-sp-4);
}

.cv-books-bank-review-summary strong {
  overflow-wrap: anywhere;
}

.cv-books-review-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--cv-sp-4);
  align-items: stretch;
  margin: 0;
}

.cv-books-review-card {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--cv-border);
  border-top: 3px solid var(--cv-border);
  background: var(--cv-surface);
}

.cv-books-review-card--match {
  border-top-color: var(--cv-cyan);
}

.cv-books-review-card--categorize {
  border-top-color: var(--cv-accent);
}

.cv-books-review-card--exclude {
  border-top-color: var(--cv-danger);
}

.cv-books-review-card-header {
  display: grid;
  gap: var(--cv-sp-2);
  padding: var(--cv-sp-5);
  border-bottom: 1px solid var(--cv-border);
  background: var(--cv-surface2);
}

.cv-books-review-card-header h3,
.cv-books-review-card-header p {
  margin: 0;
}

.cv-books-review-card-header h3 {
  font-size: 15px;
  line-height: 1.3;
}

.cv-books-review-card-header p {
  color: var(--cv-text-dim);
  font-size: 13px;
  line-height: 1.55;
}

.cv-books-review-card-body {
  display: grid;
  align-content: start;
  gap: var(--cv-sp-4);
  min-width: 0;
  padding: var(--cv-sp-5);
}

.cv-books-review-card .cv-field {
  display: grid;
  gap: var(--cv-sp-2);
  min-width: 0;
  margin: 0;
}

.cv-books-review-card .cv-field > span {
  display: block;
  line-height: 1.35;
}

.cv-books-review-card input,
.cv-books-review-card select {
  width: 100%;
  min-width: 0;
  min-height: 46px;
}

.cv-books-review-card-footer {
  padding: var(--cv-sp-4) var(--cv-sp-5);
  border-top: 1px solid var(--cv-border);
  background: var(--cv-surface2);
}

.cv-books-review-card-footer .cv-btn-primary,
.cv-books-review-card-footer .cv-btn-danger {
  width: 100%;
  min-height: 44px;
  justify-content: center;
}

@media (max-width: 1024px) {
  .cv-books-modal--bank-review {
    width: min(760px, calc(100vw - (var(--cv-sp-4) * 2)));
    max-width: min(760px, calc(100vw - (var(--cv-sp-4) * 2)));
  }

  .cv-books-review-grid {
    grid-template-columns: 1fr;
  }

  .cv-books-review-card {
    grid-template-columns: minmax(220px, .8fr) minmax(0, 1.2fr);
    grid-template-rows: auto auto;
  }

  .cv-books-review-card-header {
    grid-row: 1 / -1;
    border-right: 1px solid var(--cv-border);
    border-bottom: 0;
  }

  .cv-books-review-card-body {
    padding-bottom: var(--cv-sp-4);
  }

  .cv-books-review-card-footer {
    padding-top: 0;
    border-top: 0;
    background: var(--cv-surface);
  }
}

@media (max-width: 720px) {
  .cv-books-modal--bank-review {
    width: 100%;
    max-width: none;
    max-height: calc(100vh - (var(--cv-sp-3) * 2));
    max-height: calc(100dvh - (var(--cv-sp-3) * 2));
  }

  .cv-books-bank-review-body {
    gap: var(--cv-sp-4);
    max-height: calc(100vh - 84px);
    max-height: calc(100dvh - 84px);
    overflow: auto;
    overscroll-behavior: contain;
  }

  .cv-books-bank-review-summary {
    grid-template-columns: 1fr;
  }

  .cv-books-bank-review-summary > div {
    min-height: 0;
  }

  .cv-books-review-card {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }

  .cv-books-review-card-header {
    grid-row: auto;
    border-right: 0;
    border-bottom: 1px solid var(--cv-border);
  }

  .cv-books-review-card-body,
  .cv-books-review-card-header,
  .cv-books-review-card-footer {
    padding: var(--cv-sp-4);
  }

  .cv-books-review-card-footer {
    border-top: 1px solid var(--cv-border);
    background: var(--cv-surface2);
  }
}

@media (max-width: 480px) {
  .cv-books-bank-review-body {
    padding: var(--cv-sp-3);
  }

  .cv-books-review-grid {
    gap: var(--cv-sp-3);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   §24b - ClearView Books Compact Mobile Layout (v2.8.2)
   CLEARVIEW_BOOKS_CP4_3_MOBILE_LAYOUT
   Keeps the one-page Books workspace compact and fully navigable on phones
   without changing accounting behavior or desktop presentation.
   ═══════════════════════════════════════════════════════════════════════════ */

.cv-books-journal-label--compact {
  display: none;
}

@media (max-width: 768px) {
  body.cv-books-page .shell-main {
    padding-inline: var(--cv-sp-3);
  }

  .cv-books {
    padding-bottom: calc(var(--cv-sp-6) + env(safe-area-inset-bottom, 0px));
  }

  .cv-books-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--cv-sp-3);
    margin-bottom: var(--cv-sp-3);
  }

  .cv-books-header .cv-page-header-left {
    min-width: 0;
  }

  .cv-books-title-row {
    flex-wrap: nowrap;
    gap: var(--cv-sp-2);
  }

  .cv-books-title-row h1 {
    min-width: 0;
    font-size: clamp(20px, 6vw, 27px);
    line-height: 1.1;
  }

  .cv-books-title-row .cv-badge {
    flex: 0 0 auto;
    min-height: 22px;
    padding-inline: var(--cv-sp-2);
    font-size: 9px;
  }

  .cv-books-header .cv-page-header-left p {
    margin-top: var(--cv-sp-1);
    font-size: 12px;
    line-height: 1.45;
  }

  .cv-books-header .cv-page-header-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: var(--cv-sp-2);
    width: 100%;
  }

  .cv-books-org-switcher {
    gap: 3px;
    width: 100%;
    min-width: 0;
  }

  .cv-books-org-switcher > span {
    font-size: 9px;
  }

  .cv-books-org-switcher select,
  #booksNewJournalBtn {
    min-height: 42px;
  }

  .cv-books-org-switcher select {
    width: 100%;
    min-width: 0;
    padding-block: 8px;
    text-overflow: ellipsis;
  }

  #booksNewJournalBtn {
    width: auto;
    min-width: 112px;
    padding-inline: var(--cv-sp-3);
    white-space: nowrap;
  }

  .cv-books-journal-label--full {
    display: none;
  }

  .cv-books-journal-label--compact {
    display: inline;
  }

  .cv-books-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
    margin: 0 0 var(--cv-sp-3);
    overflow: visible;
    scrollbar-width: none;
  }

  .cv-books-tab {
    min-width: 0;
    min-height: 42px;
    padding: var(--cv-sp-2) var(--cv-sp-1);
    border-right: 1px solid var(--cv-border);
    border-bottom: 1px solid var(--cv-border);
    font-size: 9px;
    letter-spacing: .035em;
    line-height: 1.2;
    white-space: normal;
    text-align: center;
  }

  .cv-books-tab:nth-child(4n),
  .cv-books-tab:last-child {
    border-right: 0;
  }

  .cv-books-tab:nth-child(n + 5) {
    border-bottom: 0;
  }

  .cv-books-tab.is-active {
    box-shadow: inset 0 -3px 0 var(--cv-accent);
    border-bottom-color: var(--cv-border);
  }

  .cv-books-section-heading,
  .cv-books-bank-heading {
    gap: var(--cv-sp-3);
    margin-bottom: var(--cv-sp-3);
  }

  .cv-books-section-heading h2,
  .cv-books-bank-heading h2 {
    font-size: 18px;
    line-height: 1.2;
  }

  .cv-books-section-heading p,
  .cv-books-bank-heading p {
    font-size: 12px;
    line-height: 1.45;
  }

  .cv-books-bank-heading .cv-books-actions {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    width: 100%;
    border: 1px solid var(--cv-border);
    background: var(--cv-border);
  }

  .cv-books-bank-heading .cv-books-actions > * {
    width: 100%;
    min-width: 0;
    min-height: 40px;
    padding: var(--cv-sp-2) var(--cv-sp-1);
    border: 0;
    background: var(--cv-surface);
    font-size: 9px;
    line-height: 1.15;
    white-space: normal;
    justify-content: center;
  }

  .cv-books-bank-heading .cv-books-actions > *.cv-btn-primary {
    color: var(--cv-accent);
    box-shadow: inset 0 0 0 1px var(--cv-accent);
  }

  .cv-books-bank-heading .cv-books-actions > *:disabled {
    background: var(--cv-surface2);
  }

  .cv-books-kpis {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--cv-sp-2) !important;
    margin-bottom: var(--cv-sp-3);
  }

  .cv-books-kpis .cv-kpi {
    min-width: 0;
    min-height: 72px;
    padding: var(--cv-sp-3);
  }

  .cv-books-kpis .cv-kpi-value {
    font-size: clamp(19px, 6vw, 24px);
  }

  .cv-books-kpis .cv-kpi-label {
    font-size: 8px;
    letter-spacing: .06em;
  }

  .cv-books-subtabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
    margin-bottom: var(--cv-sp-3);
    overflow: visible;
    scrollbar-width: none;
  }

  .cv-books-subtab {
    min-width: 0;
    min-height: 40px;
    padding: var(--cv-sp-2) var(--cv-sp-1);
    border-right: 1px solid var(--cv-border);
    border-bottom: 0;
    font-size: 8.5px;
    letter-spacing: .025em;
    line-height: 1.15;
    white-space: normal;
    text-align: center;
  }

  .cv-books-subtab:last-child {
    border-right: 0;
  }

  .cv-books-subtab.is-active {
    box-shadow: inset 0 -3px 0 var(--cv-accent);
  }

  .cv-books .cv-card {
    margin-bottom: var(--cv-sp-3);
  }
}

@media (max-width: 520px) {
  body.cv-books-page .shell-main {
    padding-inline: var(--cv-sp-2);
  }

  .cv-books-header {
    gap: var(--cv-sp-2);
  }

  .cv-books-header .cv-page-header-actions {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  #booksNewJournalBtn {
    min-width: 104px;
    padding-inline: var(--cv-sp-2);
  }

  .cv-books-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cv-books-tab,
  .cv-books-tab:nth-child(4n),
  .cv-books-tab:last-child {
    border-right: 1px solid var(--cv-border);
    border-bottom: 1px solid var(--cv-border);
  }

  .cv-books-tab:nth-child(3n),
  .cv-books-tab:last-child {
    border-right: 0;
  }

  .cv-books-tab:nth-child(n + 7) {
    border-bottom: 0;
  }

  .cv-books-bank-heading .cv-books-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cv-books-subtabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cv-books-subtab {
    border-bottom: 1px solid var(--cv-border);
  }

  .cv-books-subtab:nth-child(2n) {
    border-right: 0;
  }

  .cv-books-subtab:nth-child(n + 3) {
    border-bottom: 0;
  }
}

@media (max-width: 360px) {
  .cv-books-header .cv-page-header-actions {
    grid-template-columns: 1fr;
  }

  #booksNewJournalBtn {
    width: 100%;
  }

  .cv-books-kpis {
    grid-template-columns: 1fr !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   §25 - ClearView Books close + accountant controls (v2.9.0)
   CLEARVIEW_BOOKS_CP5_CLOSE_ACCOUNTANT
   ═══════════════════════════════════════════════════════════════════════════ */

.cv-books-close-heading-actions {
  display: flex;
  align-items: end;
  gap: var(--cv-sp-3);
  flex-wrap: wrap;
}

.cv-books-close-heading-actions .cv-books-inline-select {
  min-width: 260px;
}

.cv-books-close-checklist {
  display: grid;
  gap: var(--cv-sp-3);
}

.cv-books-close-run-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cv-sp-3);
  padding-bottom: var(--cv-sp-3);
  border-bottom: 1px solid var(--cv-border);
}

.cv-books-close-run-head > div {
  display: flex;
  align-items: center;
  gap: var(--cv-sp-2);
  min-width: 0;
}

.cv-books-close-item {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(420px, 1.25fr);
  align-items: center;
  gap: var(--cv-sp-3);
  padding: var(--cv-sp-3);
  border: 1px solid var(--cv-border);
  background: var(--cv-surface-2);
}

.cv-books-close-item.is-blocked {
  border-color: var(--cv-danger);
}

.cv-books-close-item-main {
  display: flex;
  align-items: flex-start;
  gap: var(--cv-sp-3);
  min-width: 0;
}

.cv-books-close-item-main > div {
  display: grid;
  gap: var(--cv-sp-1);
  min-width: 0;
}

.cv-books-close-item-main strong,
.cv-books-close-item-main small {
  overflow-wrap: anywhere;
}

.cv-books-close-item-actions {
  display: grid;
  grid-template-columns: minmax(130px, .35fr) minmax(220px, 1fr) auto;
  gap: var(--cv-sp-2);
  align-items: center;
}

.cv-books-close-item > p {
  margin: 0;
  color: var(--cv-text-dim);
}

.cv-books-inline-actions {
  display: flex;
  align-items: center;
  gap: var(--cv-sp-2);
  flex-wrap: wrap;
}

.cv-books-report-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--cv-sp-3);
  margin-bottom: var(--cv-sp-4);
}

.cv-books-report-summary > div {
  display: grid;
  gap: var(--cv-sp-1);
  padding: var(--cv-sp-3);
  border: 1px solid var(--cv-border);
  background: var(--cv-surface-2);
}

.cv-books-report-summary span {
  color: var(--cv-text-dim);
  font-family: var(--cv-font-display);
  font-size: var(--cv-text-xs);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.cv-books-report-summary strong {
  font-family: var(--cv-font-data);
  font-variant-numeric: tabular-nums;
}

.cv-books-modal--close {
  width: min(720px, calc(100vw - 32px));
  max-width: 720px;
}

.cv-books-modal--recurring {
  width: min(1120px, calc(100vw - 32px));
  max-width: 1120px;
}

.cv-books-recurring-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--cv-sp-3);
  margin-bottom: var(--cv-sp-4);
}

.cv-books-recurring-lines-wrap {
  overflow-x: auto;
}

.cv-books-recurring-lines {
  min-width: 860px;
}

.cv-books-recurring-lines th:nth-child(1),
.cv-books-recurring-lines td:nth-child(1) { width: 31%; }
.cv-books-recurring-lines th:nth-child(2),
.cv-books-recurring-lines td:nth-child(2) { width: 31%; }
.cv-books-recurring-lines th:nth-child(3),
.cv-books-recurring-lines td:nth-child(3),
.cv-books-recurring-lines th:nth-child(4),
.cv-books-recurring-lines td:nth-child(4) { width: 15%; }
.cv-books-recurring-lines th:nth-child(5),
.cv-books-recurring-lines td:nth-child(5) { width: 8%; }

@media (max-width: 1024px) {
  .cv-books-close-item {
    grid-template-columns: 1fr;
  }

  .cv-books-close-item-actions {
    grid-template-columns: minmax(140px, .4fr) minmax(0, 1fr) auto;
  }

  .cv-books-recurring-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .cv-books-close-heading-actions {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }

  .cv-books-close-heading-actions .cv-books-inline-select {
    min-width: 0;
  }

  .cv-books-close-item-actions {
    grid-template-columns: 1fr;
  }

  .cv-books-close-item-actions .cv-btn-sm {
    width: 100%;
  }

  .cv-books-close-run-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .cv-books-report-summary {
    grid-template-columns: 1fr;
  }

  .cv-books-recurring-grid {
    grid-template-columns: 1fr;
  }

  .cv-books-modal--recurring .cv-table-wrap {
    overflow: visible;
  }

  .cv-books-recurring-lines {
    min-width: 0;
  }

  .cv-books-recurring-lines thead {
    display: none;
  }

  .cv-books-recurring-lines tbody,
  .cv-books-recurring-lines tr,
  .cv-books-recurring-lines td {
    display: block;
    width: 100%;
  }

  .cv-books-recurring-lines tr {
    padding: var(--cv-sp-3);
    border: 1px solid var(--cv-border);
    margin-bottom: var(--cv-sp-3);
    background: var(--cv-surface-2);
  }

  .cv-books-recurring-lines td {
    display: grid;
    grid-template-columns: minmax(110px, .4fr) minmax(0, 1fr);
    gap: var(--cv-sp-2);
    align-items: center;
    padding: var(--cv-sp-2) 0;
    border: 0;
  }

  .cv-books-recurring-lines td::before {
    content: attr(data-label);
    font-family: var(--cv-font-display);
    font-size: var(--cv-text-xs);
    color: var(--cv-text-dim);
    text-transform: uppercase;
    letter-spacing: .05em;
  }
}

@media (max-width: 520px) {
  .cv-books-tabs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .cv-books-tab,
  .cv-books-tab:nth-child(3n),
  .cv-books-tab:nth-child(4n),
  .cv-books-tab:last-child {
    border-right: 1px solid var(--cv-border);
    border-bottom: 1px solid var(--cv-border);
  }

  .cv-books-tab:nth-child(4n) {
    border-right: 0;
  }

  .cv-books-tab:nth-child(n + 5) {
    border-bottom: 0;
  }

  .cv-books-close-heading-actions {
    grid-template-columns: 1fr;
  }

  .cv-books-close-heading-actions .cv-btn-primary {
    width: 100%;
  }

  .cv-books-recurring-lines td {
    grid-template-columns: 1fr;
  }
}


/* CV-INTER-FONT-MASTER-v3 START
   Inter is the selected font for the Professional typography option.
   This only applies when html.cv-font-inter is active. */
@font-face {
    font-family: 'InterVar';
    src: url('../fonts/inter-var.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

html.cv-font-inter {
    --cv-font-display: 'InterVar', 'Inter', 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --cv-font-body:    'InterVar', 'Inter', 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --cv-font-data:    'InterVar', 'Inter', 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --font-display:    var(--cv-font-body);
    --font-body:       var(--cv-font-body);
    --font-ui:         var(--cv-font-body);
    --font-sans:       var(--cv-font-body);
    --font-mono:       var(--cv-font-body);
    --cv-font-mono:    var(--cv-font-body);
    --cv-mono:         var(--cv-font-body);
    --shell-mono:      var(--cv-font-body);
    --ops-mono:        var(--cv-font-body);
    --mm-font-ui:      var(--cv-font-body);
    --mm-font-mono:    var(--cv-font-body);
}

html.cv-font-inter body.shell-page,
html.cv-font-inter body.shell-page *:not(svg):not(svg *):not(path):not(use):not(.fa):not(.fas):not(.far):not(.fab):not(.fal):not(.fad):not(.material-icons):not(.material-symbols-outlined) {
    font-family: var(--cv-font-body) !important;
    font-optical-sizing: auto;
}

html.cv-font-inter body.shell-page {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html.cv-font-inter body.shell-page svg text,
html.cv-font-inter body.shell-page svg tspan {
    font-family: var(--cv-font-body) !important;
}

html.cv-font-inter body.shell-page pre,
html.cv-font-inter body.shell-page code,
html.cv-font-inter body.shell-page kbd,
html.cv-font-inter body.shell-page samp {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
}
/* CV-INTER-FONT-MASTER-v3 END */


/* CV_GLOBAL_CONTROL_FOUNDATION */


:root {
    --cv-control-height: 36px;
    --cv-control-height-compact: 32px;
    --cv-control-height-comfortable: 40px;
    --cv-control-radius: var(--cv-shape-control-radius, var(--cv-shape-radius, 0px));
    --cv-control-padding-x: 11px;
    --cv-control-padding-y: 7px;
    --cv-control-padding-x-compact: 9px;
    --cv-control-padding-y-compact: 5px;
    --cv-control-font-size: 13px;
    --cv-control-bg: var(--cv-surface);
    --cv-control-bg-hover: var(--cv-surface2);
    --cv-control-border: var(--cv-border);
    --cv-control-border-hover: var(--cv-text-muted);
    --cv-control-focus: var(--cv-accent);
    --cv-control-focus-ring: var(--cv-accent-soft);
    --cv-control-error: var(--cv-danger);
    --cv-control-disabled-bg: var(--cv-surface2);
    --cv-toggle-off: var(--cv-surface3);
    --cv-toggle-on: var(--cv-accent);
}

/* ClearView desktop controls use a compact enterprise density by default.
   Dense operating surfaces opt into the 32px command density; 40px is reserved
   for explicit comfortable contexts. Textareas/fillable sections keep their
   own 16px content padding below. */
.cv-control-density--compact,
[data-cv-control-density="compact"],
body.shell-page .shell-main :where(
    [role="toolbar"],
    [data-cv-toolbar],
    [data-cv-filter-bar],
    .cv-toolbar,
    .toolbar,
    .filterbar,
    .filter-bar,
    .filters-bar,
    .filter-row,
    .cv-ui-filterbar,
    .tab-bar,
    .tabs-bar,
    .board-toolbar,
    .dispatch-toolbar
) {
    --cv-control-height: var(--cv-control-height-compact);
    --cv-control-padding-x: var(--cv-control-padding-x-compact);
    --cv-control-padding-y: var(--cv-control-padding-y-compact);
}

body.shell-page .shell-main :where(
    input:not([type]), input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="url"],
    input[type="tel"],
    input[type="date"],
    input[type="time"],
    input[type="month"],
    input[type="week"],
    input[type="datetime-local"],
    input[type="search"],
    select:not([multiple]):not([size]),
    textarea,
    .cv-input,
    .cv-select,
    .cv-textarea,
    .form-control,
    .field-control
):not(.cv-select-native):not(.cv-file-native) {
    box-sizing: border-box;
    min-height: var(--cv-control-height);
    max-width: 100%;
    padding: var(--cv-control-padding-y) var(--cv-control-padding-x);
    border: 1px solid var(--cv-control-border) !important;
    border-radius: var(--cv-control-radius) !important;
    background: var(--cv-control-bg) !important;
    color: var(--cv-text) !important;
    box-shadow: none !important;
    outline: none !important;
    font-family: var(--cv-font-body) !important;
    font-size: var(--cv-control-font-size);
    line-height: 1.35;
    transition: border-color .14s ease, background-color .14s ease, box-shadow .14s ease;
}

body.shell-page .shell-main :where(
    input:not([type]), input[type="text"], input[type="email"], input[type="password"],
    input[type="number"], input[type="url"], input[type="tel"],
    input[type="date"], input[type="time"], input[type="month"],
    input[type="week"], input[type="datetime-local"], input[type="search"],
    select:not([multiple]):not([size]), textarea,
    .cv-input, .cv-select, .cv-textarea, .form-control, .field-control
):not(.cv-select-native):not(.cv-file-native):hover:not(:disabled):not([readonly]) {
    border-color: var(--cv-control-border-hover) !important;
}

body.shell-page .shell-main :where(
    input:not([type]), input[type="text"], input[type="email"], input[type="password"],
    input[type="number"], input[type="url"], input[type="tel"],
    input[type="date"], input[type="time"], input[type="month"],
    input[type="week"], input[type="datetime-local"], input[type="search"],
    select:not([multiple]):not([size]), textarea,
    .cv-input, .cv-select, .cv-textarea, .form-control, .field-control
):not(.cv-select-native):not(.cv-file-native):focus,
body.shell-page .shell-main :where(
    input:not([type]), input[type="text"], input[type="email"], input[type="password"],
    input[type="number"], input[type="url"], input[type="tel"],
    input[type="date"], input[type="time"], input[type="month"],
    input[type="week"], input[type="datetime-local"], input[type="search"],
    select:not([multiple]):not([size]), textarea,
    .cv-input, .cv-select, .cv-textarea, .form-control, .field-control
):not(.cv-select-native):not(.cv-file-native):focus-visible {
    border-color: var(--cv-control-focus) !important;
    box-shadow: 0 0 0 3px var(--cv-control-focus-ring) !important;
}

body.shell-page .shell-main :where(textarea, .cv-textarea) {
    min-height: 96px;
    padding: 16px !important;
    resize: vertical;
    line-height: 1.5;
}

body.shell-page .shell-main :where(input, textarea)::placeholder {
    color: var(--cv-text-muted) !important;
    opacity: .9;
}

body.shell-page .shell-main :where(input, select, textarea)[aria-invalid="true"],
body.shell-page .shell-main :where(input, select, textarea).is-invalid,
body.shell-page .shell-main .cv-field.is-invalid :where(input, select, textarea),
body.shell-page .shell-main .form-field.is-invalid :where(input, select, textarea) {
    border-color: var(--cv-control-error) !important;
    box-shadow: 0 0 0 3px var(--cv-danger-soft) !important;
}

body.shell-page .shell-main :where(input, select, textarea):disabled,
body.shell-page .shell-main :where(input, textarea)[readonly] {
    background: var(--cv-control-disabled-bg) !important;
    color: var(--cv-text-dim) !important;
    cursor: not-allowed;
    opacity: 1;
}

body.shell-page .shell-main :where(.cv-field, .form-field, .f-field, .field, .settings-field) > :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
    select,
    textarea,
    .cv-select-control,
    .cv-multiselect-control,
    .cv-file-control
) {
    width: 100%;
}

.cv-form-panel,
.cv-fillable-section,
.cv-fieldset {
    border: 1px solid var(--cv-border);
    border-radius: var(--cv-control-radius) !important;
    background: var(--cv-surface);
    padding: var(--cv-sp-4);
    box-shadow: none;
}

.cv-form-panel__header,
.cv-fillable-section__header,
.cv-fieldset__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cv-sp-3);
    padding-bottom: var(--cv-sp-3);
    margin-bottom: var(--cv-sp-3);
    border-bottom: 1px solid var(--cv-border);
}

.cv-field-stack,
.cv-form-grid {
    display: grid;
    gap: var(--cv-sp-3);
}

.cv-form-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.cv-field-help,
.cv-form-help,
.cv-error-text,
.cv-autosave-state {
    display: block;
    margin-top: 5px;
    font-size: 11px;
    line-height: 1.35;
    color: var(--cv-text-dim);
}

.cv-error-text,
.cv-autosave-state.is-error {
    color: var(--cv-danger);
}

.cv-autosave-state.is-saving {
    color: var(--cv-text-dim);
}

.cv-autosave-state.is-saved {
    color: var(--cv-success);
}

.cv-select-native,
.cv-file-native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.cv-select-control {
    display: inline-flex;
    position: relative;
    min-width: 0;
    max-width: 100%;
    vertical-align: middle;
}

.cv-select-control[data-cv-full-width="1"] {
    width: 100%;
}

.cv-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-width: 0;
    min-height: var(--cv-control-height);
    padding: var(--cv-control-padding-y) var(--cv-control-padding-x);
    border: 1px solid var(--cv-control-border) !important;
    border-radius: var(--cv-control-radius) !important;
    background: var(--cv-control-bg) !important;
    color: var(--cv-text) !important;
    box-shadow: none !important;
    outline: none !important;
    text-align: left;
    cursor: pointer;
    font-family: var(--cv-font-body) !important;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.35;
    transition: border-color .14s ease, background-color .14s ease, box-shadow .14s ease;
}

.cv-select-trigger:hover:not(:disabled) {
    border-color: var(--cv-control-border-hover) !important;
    background: var(--cv-control-bg-hover) !important;
}

.cv-select-trigger:focus-visible,
.cv-select-control.is-open .cv-select-trigger {
    border-color: var(--cv-control-focus) !important;
    box-shadow: 0 0 0 3px var(--cv-control-focus-ring) !important;
}

.cv-select-trigger:disabled {
    background: var(--cv-control-disabled-bg) !important;
    color: var(--cv-text-dim) !important;
    cursor: not-allowed;
}

.cv-select-value {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cv-select-arrow {
    display: inline-flex;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    color: var(--cv-text-dim);
    transition: transform .16s ease, color .16s ease;
}

.cv-select-arrow svg {
    display: block;
    width: 16px;
    height: 16px;
}

.cv-select-control.is-open .cv-select-arrow {
    transform: rotate(180deg);
    color: var(--cv-accent);
}

.cv-select-menu {
    position: fixed;
    z-index: 12050;
    display: none;
    max-height: min(320px, calc(100vh - 24px));
    overflow: auto;
    padding: 4px;
    border: 1px solid var(--cv-border);
    border-radius: var(--cv-control-radius) !important;
    background: var(--cv-surface);
    color: var(--cv-text);
    box-shadow: none;
}

.cv-select-menu.is-open {
    display: block;
}

.cv-select-option,
.cv-select-group-label {
    width: 100%;
    border: 0 !important;
    border-radius: calc(var(--cv-control-radius) - 2px) !important;
    background: transparent !important;
    color: var(--cv-text) !important;
    box-shadow: none !important;
    text-align: left;
}

.cv-select-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 34px;
    padding: 7px 9px;
    cursor: pointer;
    font-family: var(--cv-font-body) !important;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
}

.cv-select-option:hover,
.cv-select-option.is-active {
    background: var(--cv-surface2) !important;
}

.cv-select-option[aria-selected="true"] {
    background: var(--cv-accent-soft) !important;
    color: var(--cv-accent) !important;
}

.cv-select-option:disabled,
.cv-select-option[aria-disabled="true"] {
    color: var(--cv-text-muted) !important;
    cursor: not-allowed;
    opacity: .7;
}

.cv-select-option-check {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    color: var(--cv-accent);
}

.cv-select-group-label {
    display: block;
    padding: 8px 9px 4px;
    color: var(--cv-text-muted) !important;
    font-family: var(--cv-font-display) !important;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.cv-select-empty {
    padding: 10px;
    color: var(--cv-text-dim);
    font-size: 12px;
}

/* Reusable opt-in multi-select. Existing multi-select pages are migrated in
   their owning phases by adding data-cv-multiselect; Phase 1 only establishes
   the shared behavior and theme contract. */
.cv-multiselect-native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.cv-multiselect-control {
    display: inline-flex;
    position: relative;
    min-width: 0;
    max-width: 100%;
    vertical-align: middle;
}

.cv-multiselect-control[data-cv-full-width="1"] {
    width: 100%;
}

.cv-multiselect-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-width: 0;
    min-height: var(--cv-control-height);
    padding: var(--cv-control-padding-y) var(--cv-control-padding-x);
    border: 1px solid var(--cv-control-border) !important;
    border-radius: var(--cv-control-radius) !important;
    background: var(--cv-control-bg) !important;
    color: var(--cv-text) !important;
    box-shadow: none !important;
    outline: none !important;
    text-align: left;
    cursor: pointer;
    font-family: var(--cv-font-body) !important;
    font-size: var(--cv-control-font-size);
    font-weight: 500;
    line-height: 1.35;
    transition: border-color .14s ease, background-color .14s ease, box-shadow .14s ease;
}

.cv-multiselect-trigger:hover:not(:disabled) {
    border-color: var(--cv-control-border-hover) !important;
    background: var(--cv-control-bg-hover) !important;
}

.cv-multiselect-trigger:focus-visible,
.cv-multiselect-control.is-open .cv-multiselect-trigger {
    border-color: var(--cv-control-focus) !important;
    box-shadow: 0 0 0 3px var(--cv-control-focus-ring) !important;
}

.cv-multiselect-trigger:disabled {
    background: var(--cv-control-disabled-bg) !important;
    color: var(--cv-text-dim) !important;
    cursor: not-allowed;
}

.cv-multiselect-value {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cv-multiselect-value.is-placeholder {
    color: var(--cv-text-muted);
}

.cv-multiselect-arrow {
    display: inline-flex;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    color: var(--cv-text-dim);
    transition: transform .16s ease, color .16s ease;
}

.cv-multiselect-arrow svg {
    display: block;
    width: 16px;
    height: 16px;
}

.cv-multiselect-control.is-open .cv-multiselect-arrow {
    transform: rotate(180deg);
    color: var(--cv-accent);
}

.cv-multiselect-menu {
    position: fixed;
    z-index: 12055;
    display: none;
    max-height: min(340px, calc(100vh - 24px));
    overflow: auto;
    padding: 4px;
    border: 1px solid var(--cv-border);
    border-radius: var(--cv-control-radius) !important;
    background: var(--cv-surface);
    color: var(--cv-text);
    box-shadow: none;
}

.cv-multiselect-menu.is-open {
    display: block;
}

.cv-multiselect-option {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    min-height: 34px;
    padding: 7px 9px;
    border: 0 !important;
    border-radius: calc(var(--cv-control-radius) - 2px) !important;
    background: transparent !important;
    color: var(--cv-text) !important;
    box-shadow: none !important;
    text-align: left;
    cursor: pointer;
    font-family: var(--cv-font-body) !important;
    font-size: 12px;
    font-weight: 500;
}

.cv-multiselect-option:hover,
.cv-multiselect-option.is-active {
    background: var(--cv-surface2) !important;
}

.cv-multiselect-option[aria-selected="true"] {
    background: var(--cv-accent-soft) !important;
    color: var(--cv-accent) !important;
}

.cv-multiselect-option:disabled,
.cv-multiselect-option[aria-disabled="true"] {
    color: var(--cv-text-muted) !important;
    cursor: not-allowed;
    opacity: .7;
}

.cv-multiselect-check {
    display: inline-grid;
    place-content: center;
    width: var(--cv-choice-size);
    height: var(--cv-choice-size);
    flex: 0 0 var(--cv-choice-size);
    border: 1px solid var(--cv-control-border);
    border-radius: calc(var(--cv-control-radius) - 2px);
    background: var(--cv-control-bg);
    color: var(--cv-accent-ink);
}

.cv-multiselect-option[aria-selected="true"] .cv-multiselect-check {
    border-color: var(--cv-accent);
    background: var(--cv-accent);
}

.cv-multiselect-check svg {
    width: 12px;
    height: 12px;
}

.cv-multiselect-option[aria-selected="false"] .cv-multiselect-check svg {
    opacity: 0;
}

.cv-multiselect-option-label {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cv-file-control {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    max-width: 100%;
    padding: 8px 10px;
    border: 1px dashed var(--cv-border) !important;
    border-radius: var(--cv-control-radius) !important;
    background: var(--cv-surface) !important;
    color: var(--cv-text) !important;
    box-shadow: none !important;
    cursor: pointer;
    user-select: none;
    transition: border-color .14s ease, background-color .14s ease, box-shadow .14s ease;
}

.cv-file-control:hover,
.cv-file-control.is-dragging {
    border-color: var(--cv-accent) !important;
    background: var(--cv-accent-soft) !important;
}

.cv-file-control:focus-visible,
.cv-file-control.is-focused {
    border-color: var(--cv-control-focus) !important;
    box-shadow: 0 0 0 3px var(--cv-control-focus-ring) !important;
    outline: none;
}

.cv-file-control.is-disabled {
    background: var(--cv-control-disabled-bg) !important;
    color: var(--cv-text-dim) !important;
    cursor: not-allowed;
    opacity: .8;
}

.cv-file-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border: 1px solid var(--cv-border);
    border-radius: calc(var(--cv-control-radius) - 1px) !important;
    background: var(--cv-surface2);
    color: var(--cv-accent);
}

.cv-file-icon svg {
    width: 15px;
    height: 15px;
}

.cv-file-copy {
    min-width: 0;
    flex: 1;
}

.cv-file-title {
    display: block;
    color: var(--cv-text);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
}

.cv-file-detail {
    display: block;
    margin-top: 2px;
    overflow: hidden;
    color: var(--cv-text-dim);
    font-size: 10px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cv-action-bar,
body.shell-page .shell-main :where(.form-actions, .modal-actions, .dialog-actions, .card-actions, .footer-actions, .actions-row, .button-row)[data-cv-action-bar-ready] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--cv-sp-2);
    flex-wrap: wrap;
    width: 100%;
    margin-top: var(--cv-sp-4);
    padding: var(--cv-sp-3) var(--cv-sp-4);
    border-top: 1px solid var(--cv-border);
    border-radius: 0 0 var(--cv-control-radius) var(--cv-control-radius) !important;
    background: var(--cv-surface2);
}

.cv-action-bar--split {
    justify-content: space-between;
}

.cv-action-bar__group {
    display: flex;
    align-items: center;
    gap: var(--cv-sp-2);
    flex-wrap: wrap;
}

.cv-control-button,
.cv-btn,
.cv-btn-primary,
.cv-btn-secondary,
.cv-btn-ghost,
.cv-btn-tertiary,
.cv-btn-danger,
.cv-action-primary,
.cv-action-secondary,
.cv-action-tertiary,
.cv-action-danger {
    min-height: 36px;
    padding: 8px 14px;
    border-radius: var(--cv-control-radius) !important;
    box-shadow: none !important;
    font-family: var(--cv-font-display) !important;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.2;
    text-decoration: none;
}

.cv-btn-primary,
.cv-action-primary {
    border: 1px solid var(--cv-accent) !important;
    background: var(--cv-accent) !important;
    color: var(--cv-accent-ink) !important;
}

.cv-btn-primary:hover,
.cv-action-primary:hover {
    border-color: var(--cv-accent-dim) !important;
    background: var(--cv-accent) !important;
    color: var(--cv-accent-ink) !important;
}

.cv-btn-secondary,
.cv-btn-ghost,
.cv-action-secondary {
    border: 1px solid var(--cv-border) !important;
    background: var(--cv-surface) !important;
    color: var(--cv-text) !important;
}

.cv-btn-secondary:hover,
.cv-btn-ghost:hover,
.cv-action-secondary:hover {
    border-color: var(--cv-accent) !important;
    background: var(--cv-surface2) !important;
    color: var(--cv-accent) !important;
}

.cv-btn-tertiary,
.cv-action-tertiary {
    min-height: auto;
    padding: 4px 2px;
    border-color: transparent !important;
    background: transparent !important;
    color: var(--cv-accent) !important;
}

.cv-btn-tertiary:hover,
.cv-action-tertiary:hover {
    background: transparent !important;
    color: var(--cv-accent-dim) !important;
    text-decoration: underline;
}

.cv-action-danger,
.cv-btn-danger {
    border: 1px solid var(--cv-danger) !important;
    background: var(--cv-danger-soft) !important;
    color: var(--cv-danger) !important;
}

.cv-icon-control {
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
    padding: 0 !important;
    border-radius: var(--cv-control-radius) !important;
}

.cv-toggle-row {
    display: inline-flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--cv-text);
    cursor: pointer;
}

.cv-toggle {
    position: relative;
    display: inline-flex;
    width: 42px;
    height: 24px;
    flex: 0 0 42px;
    border-radius: 999px !important;
}

.cv-toggle input {
    position: absolute;
    width: 1px !important;
    height: 1px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    opacity: 0;
    pointer-events: none;
}

.cv-toggle-track {
    position: absolute;
    inset: 0;
    border: 1px solid var(--cv-border);
    border-radius: var(--cv-pill-radius) !important;
    background: var(--cv-toggle-off);
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.cv-toggle-track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: var(--cv-circle-radius) !important;
    background: var(--cv-surface);
    box-shadow: none;
    transition: transform .18s ease, background-color .18s ease;
}

.cv-toggle input:checked + .cv-toggle-track {
    border-color: var(--cv-toggle-on);
    background: var(--cv-toggle-on);
}

.cv-toggle input:checked + .cv-toggle-track::after {
    transform: translateX(18px);
    background: var(--cv-accent-ink);
}

.cv-toggle input:focus-visible + .cv-toggle-track {
    border-color: var(--cv-control-focus);
    box-shadow: 0 0 0 3px var(--cv-control-focus-ring);
}

.cv-toggle input:disabled + .cv-toggle-track {
    cursor: not-allowed;
    opacity: .6;
}

.cv-toggle-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.cv-toggle-label {
    color: var(--cv-text);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
}

.cv-toggle-help {
    color: var(--cv-text-dim);
    font-size: 10px;
    line-height: 1.35;
}

.cv-toggle-row--setting {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: var(--cv-sp-4);
    min-width: 0;
}

.cv-toggle-row--setting .cv-toggle-copy {
    flex: 1 1 auto;
}

.cv-toggle-row--setting .cv-toggle {
    flex: 0 0 42px;
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
}

.cv-toggle-row--setting .cv-toggle-track {
    width: 42px !important;
    height: 24px !important;
}

/* Checkbox/radio presentation is defined by the shared custom-choice
   contract below. Native rendering is not used for eligible shell controls. */

@media (max-width: 720px) {
    .cv-action-bar,
    body.shell-page .shell-main :where(.form-actions, .modal-actions, .dialog-actions, .card-actions, .footer-actions, .actions-row, .button-row)[data-cv-action-bar-ready] {
        align-items: stretch;
        padding: var(--cv-sp-3);
    }

    .cv-action-bar > :where(button, a, input[type="submit"]),
    .cv-action-bar__group,
    .cv-action-bar__group > :where(button, a, input[type="submit"]) {
        width: 100%;
    }

    .cv-select-control,
    .cv-multiselect-control {
        max-width: 100%;
    }
}

body.shell-page .shell-main .cv-form-panel,
body.shell-page .shell-main .cv-fillable-section,
body.shell-page .shell-main .cv-fieldset,
body.shell-page .shell-main .cv-select-trigger,
body.shell-page .shell-main .cv-multiselect-trigger,
body.shell-page .shell-main .cv-file-control,
body.shell-page .shell-main .cv-file-icon,
body.shell-page .shell-main .cv-action-bar,
body.shell-page .shell-main [data-cv-action-bar-ready] {
    border-radius: var(--cv-control-radius) !important;
}

body.shell-page .cv-select-menu,
body.shell-page .cv-multiselect-menu,
body.shell-page .cv-select-option,
body.shell-page .cv-multiselect-option,
body.shell-page .cv-select-group-label {
    border-radius: var(--cv-control-radius) !important;
}

body.shell-page .shell-main .cv-toggle,
body.shell-page .shell-main .cv-toggle-track {
    border-radius: 999px !important;
}

body.shell-page .shell-main .cv-toggle-track::after {
    border-radius: 50% !important;
}

:root {
    --cv-choice-size: 18px;
    --cv-temporal-width: 320px;
    --cv-control-icon-size: 18px;
}

body.shell-page input[type="number"] {
    appearance: textfield !important;
    -moz-appearance: textfield !important;
}

body.shell-page input[type="number"]::-webkit-inner-spin-button,
body.shell-page input[type="number"]::-webkit-outer-spin-button {
    margin: 0 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

/* Browser temporal overlays are suppressed for controls owned by the shared
   ClearView temporal enhancer. Explicit legacy opt-outs remain isolated for
   their later section migration rather than being silently rewritten here. */
body.shell-page .shell-main :where(
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    input[type="month"],
    input[type="week"]
):not([data-cv-native-temporal]):not([data-no-custom-temporal]) {
    appearance: none !important;
    -webkit-appearance: none !important;
}

body.shell-page .shell-main :where(
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    input[type="month"],
    input[type="week"]
):not([data-cv-native-temporal]):not([data-no-custom-temporal])::-webkit-calendar-picker-indicator {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Eligible shell checkboxes and radios are theme-rendered even before the
   JavaScript enhancer adds its marker class. Existing custom switch wrappers
   and explicit native-choice opt-outs keep their existing presentation. */
body.shell-page .shell-main input[type="checkbox"]:not([data-cv-native-choice]):not([data-no-custom-choice]):not(.cv-toggle input):not(.toggle input):not(.toggle-switch input):not(.switch input):not(.switch-control input):not(.form-switch input):not(.custom-control input):not([role="switch"]),
body.shell-page .shell-main input[type="radio"]:not([data-cv-native-choice]):not([data-no-custom-choice]):not(.custom-control input) {
    appearance: none !important;
    -webkit-appearance: none !important;
    display: inline-grid !important;
    place-content: center;
    width: var(--cv-choice-size) !important;
    height: var(--cv-choice-size) !important;
    min-width: var(--cv-choice-size) !important;
    min-height: var(--cv-choice-size) !important;
    margin: 0 6px 0 0 !important;
    padding: 0 !important;
    border: 1px solid var(--cv-control-border) !important;
    border-radius: calc(var(--cv-control-radius) - 2px) !important;
    background: var(--cv-control-bg) !important;
    color: var(--cv-accent-ink) !important;
    box-shadow: none !important;
    outline: none !important;
    cursor: pointer;
    vertical-align: -3px;
    transition: border-color .14s ease, background-color .14s ease, box-shadow .14s ease;
}

body.shell-page .shell-main input[type="radio"]:not([data-cv-native-choice]):not([data-no-custom-choice]):not(.custom-control input) {
    border-radius: 50% !important;
}

body.shell-page .shell-main input[type="checkbox"]:not([data-cv-native-choice]):not([data-no-custom-choice]):not(.cv-toggle input):not(.toggle input):not(.toggle-switch input):not(.switch input):not(.switch-control input):not(.form-switch input):not(.custom-control input):not([role="switch"])::before,
body.shell-page .shell-main input[type="radio"]:not([data-cv-native-choice]):not([data-no-custom-choice]):not(.custom-control input)::before {
    content: "";
    width: 10px;
    height: 10px;
    background: currentColor;
    transform: scale(0);
    transition: transform .12s ease;
}

body.shell-page .shell-main input[type="checkbox"]:not([data-cv-native-choice]):not([data-no-custom-choice]):not(.cv-toggle input):not(.toggle input):not(.toggle-switch input):not(.switch input):not(.switch-control input):not(.form-switch input):not(.custom-control input):not([role="switch"])::before {
    clip-path: polygon(14% 44%, 0 59%, 38% 96%, 100% 24%, 84% 9%, 37% 64%);
}

body.shell-page .shell-main input[type="radio"]:not([data-cv-native-choice]):not([data-no-custom-choice]):not(.custom-control input)::before {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

body.shell-page .shell-main input[type="checkbox"]:not([data-cv-native-choice]):not([data-no-custom-choice]):not(.cv-toggle input):not(.toggle input):not(.toggle-switch input):not(.switch input):not(.switch-control input):not(.form-switch input):not(.custom-control input):not([role="switch"]):checked,
body.shell-page .shell-main input[type="radio"]:not([data-cv-native-choice]):not([data-no-custom-choice]):not(.custom-control input):checked,
body.shell-page .shell-main input[type="checkbox"]:not([data-cv-native-choice]):not([data-no-custom-choice]):not(.cv-toggle input):not(.toggle input):not(.toggle-switch input):not(.switch input):not(.switch-control input):not(.form-switch input):not(.custom-control input):not([role="switch"]):indeterminate {
    border-color: var(--cv-accent) !important;
    background: var(--cv-accent) !important;
}

body.shell-page .shell-main input[type="checkbox"]:not([data-cv-native-choice]):not([data-no-custom-choice]):not(.cv-toggle input):not(.toggle input):not(.toggle-switch input):not(.switch input):not(.switch-control input):not(.form-switch input):not(.custom-control input):not([role="switch"]):checked::before,
body.shell-page .shell-main input[type="radio"]:not([data-cv-native-choice]):not([data-no-custom-choice]):not(.custom-control input):checked::before,
body.shell-page .shell-main input[type="checkbox"]:not([data-cv-native-choice]):not([data-no-custom-choice]):not(.cv-toggle input):not(.toggle input):not(.toggle-switch input):not(.switch input):not(.switch-control input):not(.form-switch input):not(.custom-control input):not([role="switch"]):indeterminate::before {
    transform: scale(1);
}

body.shell-page .shell-main input[type="checkbox"]:not([data-cv-native-choice]):not([data-no-custom-choice]):not(.cv-toggle input):not(.toggle input):not(.toggle-switch input):not(.switch input):not(.switch-control input):not(.form-switch input):not(.custom-control input):not([role="switch"]):indeterminate::before {
    width: 9px;
    height: 2px;
    clip-path: none;
}

body.shell-page .shell-main input[type="checkbox"]:not([data-cv-native-choice]):not([data-no-custom-choice]):not(.cv-toggle input):not(.toggle input):not(.toggle-switch input):not(.switch input):not(.switch-control input):not(.form-switch input):not(.custom-control input):not([role="switch"]):focus-visible,
body.shell-page .shell-main input[type="radio"]:not([data-cv-native-choice]):not([data-no-custom-choice]):not(.custom-control input):focus-visible {
    border-color: var(--cv-control-focus) !important;
    box-shadow: 0 0 0 3px var(--cv-control-focus-ring) !important;
}

body.shell-page .shell-main input.cv-choice-native[type="checkbox"],
body.shell-page .shell-main input.cv-choice-native[type="radio"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    display: inline-grid !important;
    place-content: center;
    width: var(--cv-choice-size) !important;
    height: var(--cv-choice-size) !important;
    min-width: var(--cv-choice-size) !important;
    min-height: var(--cv-choice-size) !important;
    margin: 0 6px 0 0 !important;
    padding: 0 !important;
    border: 1px solid var(--cv-control-border) !important;
    border-radius: calc(var(--cv-control-radius) - 2px) !important;
    background: var(--cv-control-bg) !important;
    color: var(--cv-accent-ink) !important;
    box-shadow: none !important;
    outline: none !important;
    cursor: pointer;
    vertical-align: -3px;
    transition: border-color .14s ease, background-color .14s ease, box-shadow .14s ease;
}

body.shell-page .shell-main input.cv-choice-native[type="radio"] {
    border-radius: 50% !important;
}

body.shell-page .shell-main input.cv-choice-native[type="checkbox"]::before,
body.shell-page .shell-main input.cv-choice-native[type="radio"]::before {
    content: "";
    width: 10px;
    height: 10px;
    background: currentColor;
    transform: scale(0);
    transition: transform .12s ease;
}

body.shell-page .shell-main input.cv-choice-native[type="checkbox"]::before {
    clip-path: polygon(14% 44%, 0 59%, 38% 96%, 100% 24%, 84% 9%, 37% 64%);
}

body.shell-page .shell-main input.cv-choice-native[type="radio"]::before {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

body.shell-page .shell-main input.cv-choice-native[type="checkbox"]:hover:not(:disabled),
body.shell-page .shell-main input.cv-choice-native[type="radio"]:hover:not(:disabled) {
    border-color: var(--cv-control-border-hover) !important;
    background: var(--cv-control-bg-hover) !important;
}

body.shell-page .shell-main input.cv-choice-native[type="checkbox"]:checked,
body.shell-page .shell-main input.cv-choice-native[type="radio"]:checked,
body.shell-page .shell-main input.cv-choice-native[type="checkbox"]:indeterminate {
    border-color: var(--cv-accent) !important;
    background: var(--cv-accent) !important;
}

body.shell-page .shell-main input.cv-choice-native[type="checkbox"]:checked::before,
body.shell-page .shell-main input.cv-choice-native[type="radio"]:checked::before,
body.shell-page .shell-main input.cv-choice-native[type="checkbox"]:indeterminate::before {
    transform: scale(1);
}

body.shell-page .shell-main input.cv-choice-native[type="checkbox"]:indeterminate::before {
    width: 9px;
    height: 2px;
    clip-path: none;
}

body.shell-page .shell-main input.cv-choice-native[type="checkbox"]:focus-visible,
body.shell-page .shell-main input.cv-choice-native[type="radio"]:focus-visible {
    border-color: var(--cv-control-focus) !important;
    box-shadow: 0 0 0 3px var(--cv-control-focus-ring) !important;
}

body.shell-page .shell-main input.cv-choice-native[type="checkbox"]:disabled,
body.shell-page .shell-main input.cv-choice-native[type="radio"]:disabled {
    border-color: var(--cv-border) !important;
    background: var(--cv-control-disabled-bg) !important;
    color: var(--cv-text-muted) !important;
    cursor: not-allowed;
    opacity: .65;
}

.cv-temporal-native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.cv-temporal-control {
    display: inline-flex;
    position: relative;
    min-width: 0;
    max-width: 100%;
    vertical-align: middle;
}

.cv-temporal-control[data-cv-full-width="1"] {
    width: 100%;
}

.cv-temporal-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-width: 0;
    min-height: var(--cv-control-height);
    padding: var(--cv-control-padding-y) var(--cv-control-padding-x);
    border: 1px solid var(--cv-control-border) !important;
    border-radius: var(--cv-control-radius) !important;
    background: var(--cv-control-bg) !important;
    color: var(--cv-text) !important;
    box-shadow: none !important;
    outline: none !important;
    text-align: left;
    cursor: pointer;
    font-family: var(--cv-font-body) !important;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
    transition: border-color .14s ease, background-color .14s ease, box-shadow .14s ease;
}

.cv-temporal-trigger:hover:not(:disabled) {
    border-color: var(--cv-control-border-hover) !important;
    background: var(--cv-control-bg-hover) !important;
}

.cv-temporal-trigger:focus-visible,
.cv-temporal-control.is-open .cv-temporal-trigger {
    border-color: var(--cv-control-focus) !important;
    box-shadow: 0 0 0 3px var(--cv-control-focus-ring) !important;
}

.cv-temporal-trigger:disabled {
    background: var(--cv-control-disabled-bg) !important;
    color: var(--cv-text-dim) !important;
    cursor: not-allowed;
}

.cv-temporal-value {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cv-temporal-value.is-placeholder {
    color: var(--cv-text-muted);
}

.cv-temporal-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--cv-control-icon-size);
    height: var(--cv-control-icon-size);
    flex: 0 0 var(--cv-control-icon-size);
    color: var(--cv-text-dim);
}

.cv-temporal-icon svg {
    width: 100%;
    height: 100%;
}

.cv-temporal-menu {
    position: fixed;
    z-index: 100080;
    display: none;
    width: min(var(--cv-temporal-width), calc(100vw - 16px));
    max-height: min(520px, calc(100vh - 16px));
    overflow: hidden;
    border: 1px solid var(--cv-border);
    border-radius: var(--cv-control-radius) !important;
    background: var(--cv-surface);
    color: var(--cv-text);
    box-shadow: none;
}

.cv-temporal-menu.is-open {
    display: flex;
    flex-direction: column;
}

.cv-temporal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cv-sp-2);
    min-height: 44px;
    padding: var(--cv-sp-2) var(--cv-sp-3);
    border-bottom: 1px solid var(--cv-border);
    background: var(--cv-surface2);
}

.cv-temporal-title {
    min-width: 0;
    flex: 1;
    color: var(--cv-text);
    font-size: 12px;
    font-weight: 800;
    text-align: center;
}

.cv-temporal-nav,
.cv-temporal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 0 !important;
    border: 1px solid var(--cv-border) !important;
    border-radius: var(--cv-control-radius) !important;
    background: var(--cv-surface) !important;
    color: var(--cv-text) !important;
    box-shadow: none !important;
    cursor: pointer;
}

.cv-temporal-nav:hover,
.cv-temporal-close:hover {
    border-color: var(--cv-accent) !important;
    background: var(--cv-accent-soft) !important;
    color: var(--cv-accent) !important;
}

.cv-temporal-nav svg,
.cv-temporal-close svg {
    width: 16px;
    height: 16px;
}

.cv-temporal-body {
    min-height: 0;
    overflow: auto;
    padding: var(--cv-sp-3);
}

.cv-calendar-weekdays,
.cv-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 3px;
}

.cv-calendar-weekdays {
    margin-bottom: 5px;
}

.cv-calendar-weekday {
    padding: 4px 0;
    color: var(--cv-text-muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .06em;
    text-align: center;
    text-transform: uppercase;
}

.cv-calendar-day,
.cv-month-option,
.cv-time-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    border: 1px solid transparent !important;
    border-radius: calc(var(--cv-control-radius) - 1px) !important;
    background: transparent !important;
    color: var(--cv-text) !important;
    box-shadow: none !important;
    cursor: pointer;
    font-family: var(--cv-font-body) !important;
    font-size: 11px;
    font-weight: 650;
}

.cv-calendar-day {
    min-height: 34px;
    padding: 0;
}

.cv-calendar-day:hover:not(:disabled),
.cv-month-option:hover:not(:disabled),
.cv-time-option:hover:not(:disabled) {
    border-color: var(--cv-border) !important;
    background: var(--cv-surface2) !important;
}

.cv-calendar-day.is-outside {
    color: var(--cv-text-muted) !important;
}

.cv-calendar-day.is-today {
    border-color: var(--cv-accent) !important;
}

.cv-calendar-day.is-selected,
.cv-month-option.is-selected,
.cv-time-option.is-selected {
    border-color: var(--cv-accent) !important;
    background: var(--cv-accent) !important;
    color: var(--cv-accent-ink) !important;
}

.cv-calendar-day:disabled,
.cv-month-option:disabled,
.cv-time-option:disabled {
    color: var(--cv-text-muted) !important;
    cursor: not-allowed;
    opacity: .45;
}

.cv-month-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.cv-month-option {
    min-height: 38px;
    padding: 7px 6px;
}

.cv-time-picker {
    display: grid;
    gap: var(--cv-sp-3);
}

.cv-time-section {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.cv-time-section-title {
    color: var(--cv-text-dim);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .06em;
    line-height: 1.2;
    text-transform: uppercase;
}

.cv-time-hour-grid,
.cv-time-minute-grid,
.cv-time-period-grid {
    display: grid;
    gap: 4px;
}

.cv-time-hour-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.cv-time-minute-grid {
    grid-template-columns: repeat(10, minmax(0, 1fr));
}

.cv-time-period-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cv-time-option {
    min-width: 0;
    min-height: 30px;
    padding: 5px 4px;
    border: 1px solid var(--cv-border) !important;
    border-radius: var(--cv-control-radius) !important;
    background: var(--cv-surface2) !important;
    color: var(--cv-text) !important;
    box-shadow: none !important;
    font-family: var(--cv-font-data) !important;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

.cv-time-option:hover:not(:disabled) {
    border-color: var(--cv-control-border-hover) !important;
    background: var(--cv-surface3) !important;
}

.cv-time-option.is-selected {
    border-color: var(--cv-accent) !important;
    background: var(--cv-accent) !important;
    color: var(--cv-accent-ink) !important;
}


@media (max-width: 520px) {
    .cv-time-hour-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .cv-time-minute-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

.cv-temporal-section + .cv-temporal-section {
    margin-top: var(--cv-sp-3);
    padding-top: var(--cv-sp-3);
    border-top: 1px solid var(--cv-border);
}

.cv-temporal-section-title {
    margin: 0 0 var(--cv-sp-2);
    color: var(--cv-text-dim);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.cv-temporal-error {
    min-height: 16px;
    padding: 0 var(--cv-sp-3);
    color: var(--cv-danger);
    font-size: 10px;
    line-height: 1.35;
}

.cv-temporal-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--cv-sp-2);
    padding: var(--cv-sp-2) var(--cv-sp-3);
    border-top: 1px solid var(--cv-border);
    background: var(--cv-surface2);
}

.cv-temporal-foot .cv-btn-tertiary {
    margin-right: auto;
}

.cv-file-control.cv-file-control--utility {
    display: inline-flex;
    width: auto !important;
    min-width: 180px;
    min-height: var(--cv-control-height);
    padding: 6px 9px;
    border-style: solid !important;
}

.cv-file-control.cv-file-control--utility .cv-file-icon {
    width: 26px;
    height: 26px;
    flex-basis: 26px;
}

.cv-file-control.cv-file-control--dropzone {
    width: 100% !important;
    min-height: 72px;
    border-style: dashed !important;
}

.cv-number-stepper {
    display: inline-grid;
    grid-template-columns: 34px minmax(64px, 1fr) 34px;
    align-items: stretch;
    max-width: 100%;
    border: 1px solid var(--cv-control-border);
    border-radius: var(--cv-control-radius) !important;
    background: var(--cv-control-bg);
    overflow: hidden;
}

.cv-number-stepper[data-cv-full-width="1"] {
    width: 100%;
}

.cv-number-stepper input[type="number"] {
    width: 100%;
    min-width: 0;
    border: 0 !important;
    border-radius: 0 !important;
    text-align: center;
    box-shadow: none !important;
}

.cv-number-stepper__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    min-height: var(--cv-control-height);
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--cv-surface2) !important;
    color: var(--cv-text) !important;
    box-shadow: none !important;
    cursor: pointer;
    font-size: 16px;
    font-weight: 800;
}

.cv-number-stepper__button:first-child {
    border-right: 1px solid var(--cv-border) !important;
}

.cv-number-stepper__button:last-child {
    border-left: 1px solid var(--cv-border) !important;
}

.cv-number-stepper__button:hover:not(:disabled) {
    background: var(--cv-accent-soft) !important;
    color: var(--cv-accent) !important;
}

.cv-number-stepper:focus-within {
    border-color: var(--cv-control-focus);
    box-shadow: 0 0 0 3px var(--cv-control-focus-ring);
}

.cv-number-stepper__button:disabled {
    color: var(--cv-text-muted) !important;
    cursor: not-allowed;
    opacity: .55;
}

.cv-dialog-bg {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: color-mix(in srgb, var(--cv-bg) 72%, transparent);
}

.cv-dialog-box {
    display: flex;
    flex-direction: column;
    width: min(500px, 96vw);
    max-height: 86vh;
    overflow: hidden;
    border: 1px solid var(--cv-border);
    border-radius: var(--cv-control-radius) !important;
    background: var(--cv-surface);
    color: var(--cv-text);
    box-shadow: none;
}

.cv-dialog-head,
.cv-dialog-foot {
    display: flex;
    align-items: center;
    gap: var(--cv-sp-2);
    padding: var(--cv-sp-3) var(--cv-sp-4);
    background: var(--cv-surface2);
}

.cv-dialog-head {
    border-bottom: 1px solid var(--cv-border);
}

.cv-dialog-foot {
    justify-content: flex-end;
    border-top: 1px solid var(--cv-border);
}

.cv-dialog-title {
    min-width: 0;
    flex: 1;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.3;
}

.cv-dialog-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 0 !important;
    border: 1px solid var(--cv-border) !important;
    border-radius: var(--cv-control-radius) !important;
    background: var(--cv-surface) !important;
    color: var(--cv-text) !important;
    box-shadow: none !important;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
}

.cv-dialog-x:hover {
    border-color: var(--cv-accent) !important;
    background: var(--cv-accent-soft) !important;
    color: var(--cv-accent) !important;
}

.cv-dialog-body {
    overflow: auto;
    padding: var(--cv-sp-4);
    font-size: 13px;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}

.cv-dialog-field {
    display: grid;
    gap: 6px;
    margin-top: var(--cv-sp-3);
}

.cv-dialog-field label {
    color: var(--cv-text);
    font-size: 11px;
    font-weight: 750;
}

.cv-dialog-error {
    min-height: 16px;
    margin-top: 4px;
    color: var(--cv-danger);
    font-size: 10px;
}

.cv-dialog-btn {
    min-height: 36px;
    padding: 8px 14px;
    border: 1px solid var(--cv-border) !important;
    border-radius: var(--cv-control-radius) !important;
    background: var(--cv-surface) !important;
    color: var(--cv-text) !important;
    box-shadow: none !important;
    cursor: pointer;
    font-size: 11px;
    font-weight: 750;
}

.cv-dialog-btn--primary {
    border-color: var(--cv-accent) !important;
    background: var(--cv-accent) !important;
    color: var(--cv-accent-ink) !important;
}

.cv-dialog-btn--danger {
    border-color: var(--cv-danger) !important;
    background: var(--cv-danger-soft) !important;
    color: var(--cv-danger) !important;
}

body.shell-page .shell-main button.cv-icon-control {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
    padding: 0 !important;
    border: 1px solid var(--cv-border) !important;
    border-radius: var(--cv-control-radius) !important;
    background: var(--cv-surface) !important;
    color: var(--cv-text) !important;
    box-shadow: none !important;
}

body.shell-page .shell-main button.cv-icon-control:hover {
    border-color: var(--cv-accent) !important;
    background: var(--cv-accent-soft) !important;
    color: var(--cv-accent) !important;
}

@media (max-width: 640px) {
    .cv-temporal-menu {
        top: auto !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        max-height: 88vh;
        border-right: 0;
        border-bottom: 0;
        border-left: 0;
        border-radius: var(--cv-control-radius) var(--cv-control-radius) 0 0 !important;
    }

    .cv-dialog-bg {
        align-items: flex-end;
        padding: 0;
    }

    .cv-dialog-box {
        width: 100%;
        max-height: 90vh;
        border-right: 0;
        border-bottom: 0;
        border-left: 0;
        border-radius: var(--cv-control-radius) var(--cv-control-radius) 0 0 !important;
    }

    .cv-dialog-foot {
        padding-bottom: max(var(--cv-sp-3), env(safe-area-inset-bottom));
    }
}

.cv-choice-row {
    display: inline-flex;
    align-items: flex-start;
    gap: 0;
    min-width: 0;
    color: var(--cv-text);
    cursor: pointer;
}

.cv-choice-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.cv-choice-label {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
}

.cv-choice-help {
    color: var(--cv-text-dim);
    font-size: 10px;
    line-height: 1.35;
}


/* ═══════════════════════════════════════════════════════════════════════════
   27. GLOBAL UI CONTROL STANDARD — FOUNDATION BUILD 1
   Shared density, field, group, and temporal-week rules. All values inherit
   from the active ClearView theme tokens above.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Compact controls inside command bars, filters, and explicit compact areas. */
body.shell-page .shell-main :where(
    .cv-toolbar, .toolbar, [role="toolbar"],
    .filter-bar, .filters-bar, .filter-row,
    .board-toolbar, .dispatch-toolbar,
    [data-cv-density="compact"]
) {
    --cv-control-height: var(--cv-control-height-compact);
    --cv-control-padding-x: 9px;
    --cv-control-padding-y: 5px;
    --cv-control-font-size: 12px;
}

body.shell-page .shell-main [data-cv-density="comfortable"] {
    --cv-control-height: var(--cv-control-height-comfortable);
    --cv-control-padding-x: 12px;
    --cv-control-padding-y: 9px;
}

body.shell-page .shell-main :where(.cv-control--compact, .cv-input--compact, .cv-select--compact) {
    min-height: var(--cv-control-height-compact) !important;
    padding: 5px 9px !important;
    font-size: 12px !important;
}

body.shell-page .shell-main :where(.cv-control--comfortable, .cv-input--comfortable, .cv-select--comfortable) {
    min-height: var(--cv-control-height-comfortable) !important;
    padding: 9px 12px !important;
}

/* Explicit reusable layout utilities for new and converted forms. */
.cv-control-row,
.cv-control-cluster {
    display: flex;
    align-items: center;
    gap: var(--cv-sp-2);
    min-width: 0;
}

.cv-control-row {
    flex-wrap: wrap;
}

.cv-control-cluster {
    flex-wrap: nowrap;
}

.cv-control-row > *,
.cv-control-cluster > * {
    min-width: 0;
}

.cv-control-group {
    display: inline-flex;
    align-items: stretch;
    min-width: 0;
    max-width: 100%;
}

.cv-control-group > :where(input, select, textarea, button, .cv-select-control, .cv-multiselect-control, .cv-temporal-control, .cv-number-stepper) {
    border-radius: 0 !important;
}

.cv-control-group > * + * {
    margin-left: -1px;
}

.cv-control-group > :first-child {
    border-top-left-radius: var(--cv-control-radius) !important;
    border-bottom-left-radius: var(--cv-control-radius) !important;
}

.cv-control-group > :last-child {
    border-top-right-radius: var(--cv-control-radius) !important;
    border-bottom-right-radius: var(--cv-control-radius) !important;
}

.cv-form-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cv-form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cv-form-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cv-field-span-2 { grid-column: span 2; }
.cv-field-span-3 { grid-column: span 3; }
.cv-field-span-full { grid-column: 1 / -1; }

.cv-control-field {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.cv-control-label {
    color: var(--cv-text-dim);
    font-family: var(--cv-font-body) !important;
    font-size: 11px;
    font-weight: 750;
    line-height: 1.25;
}

.cv-control-label .is-required,
.cv-control-required {
    color: var(--cv-danger);
}

.cv-fillable-section--compact,
.cv-form-panel--compact,
.cv-fieldset--compact {
    padding: var(--cv-sp-3);
}

/* Multiple-choice lists remain native data controls but never unstyled. */
body.shell-page .shell-main select[multiple],
body.shell-page .shell-main select[size]:not([size="1"]) {
    box-sizing: border-box;
    width: 100%;
    min-height: 112px;
    max-width: 100%;
    padding: 4px !important;
    border: 1px solid var(--cv-control-border) !important;
    border-radius: var(--cv-control-radius) !important;
    background: var(--cv-control-bg) !important;
    color: var(--cv-text) !important;
    font-family: var(--cv-font-body) !important;
    font-size: var(--cv-control-font-size);
    outline: none !important;
}

body.shell-page .shell-main select[multiple] option,
body.shell-page .shell-main select[size]:not([size="1"]) option {
    padding: 7px 8px;
    background: var(--cv-control-bg);
    color: var(--cv-text);
}

body.shell-page .shell-main select[multiple]:focus-visible,
body.shell-page .shell-main select[size]:not([size="1"]):focus-visible {
    border-color: var(--cv-control-focus) !important;
    box-shadow: 0 0 0 3px var(--cv-control-focus-ring) !important;
}

/* Week inputs use the same internal ClearView calendar as date controls. */
.cv-calendar-day.is-week-selected {
    border-color: color-mix(in srgb, var(--cv-accent) 55%, var(--cv-border)) !important;
    background: var(--cv-accent-soft) !important;
    color: var(--cv-accent) !important;
}

.cv-calendar-day.is-week-selected:hover {
    border-color: var(--cv-accent) !important;
    background: var(--cv-accent-hover) !important;
}

.cv-temporal-week-note {
    margin: 0 0 var(--cv-sp-2);
    color: var(--cv-text-dim);
    font-size: 10px;
    line-height: 1.35;
}

/* Control menus remain sharp, contained, and theme-owned. */
.cv-select-menu,
.cv-temporal-menu {
    scrollbar-width: thin;
    scrollbar-color: var(--cv-border) transparent;
}

.cv-select-menu::-webkit-scrollbar,
.cv-temporal-menu::-webkit-scrollbar,
.cv-time-options::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

.cv-select-menu::-webkit-scrollbar-thumb,
.cv-temporal-menu::-webkit-scrollbar-thumb,
.cv-time-options::-webkit-scrollbar-thumb {
    background: var(--cv-border);
}

/* Touch surfaces stay usable without making desktop controls oversized. */
@media (max-width: 640px) {
    body.shell-page .shell-main {
        --cv-control-height: var(--cv-control-height-comfortable);
        --cv-control-padding-x: 12px;
        --cv-control-padding-y: 9px;
    }

    body.shell-page .shell-main :where(
        .cv-toolbar, .toolbar, [role="toolbar"],
        .filter-bar, .filters-bar, .filter-row,
        .board-toolbar, .dispatch-toolbar,
        [data-cv-density="compact"]
    ) {
        --cv-control-height: 36px;
        --cv-control-padding-y: 7px;
    }

    .cv-form-grid--2,
    .cv-form-grid--3,
    .cv-form-grid--4 {
        grid-template-columns: 1fr;
    }

    .cv-field-span-2,
    .cv-field-span-3 {
        grid-column: auto;
    }

    .cv-control-cluster {
        flex-wrap: wrap;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   28. CLEARVIEW SURFACE STANDARD — BUILD 2
   Shared page headers, filter rows, tabs, cards, metrics, action groups,
   tables, and board containment using the active ClearView theme tokens.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --cv-surface-radius: var(--cv-shape-surface-radius, var(--cv-control-radius, var(--cv-shape-radius, 0px)));
    --cv-surface-gap: clamp(10px, 1vw, 16px);
    --cv-surface-pad-x: clamp(12px, 1.2vw, 18px);
    --cv-surface-pad-y: clamp(10px, .9vw, 15px);
    --cv-surface-shadow: 0 1px 2px color-mix(in srgb, var(--cv-text) 7%, transparent);
    --cv-table-row-height: 42px;
}

body.shell-page .shell-main {
    isolation: isolate;
}

body.shell-page .shell-main .cv-ui-pagehead {
    display: flex !important;
    align-items: flex-start !important;
    gap: var(--cv-surface-gap) !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 var(--cv-surface-gap) !important;
    padding: var(--cv-surface-pad-y) var(--cv-surface-pad-x) !important;
    border: 1px solid var(--cv-border) !important;
    border-left: 1px solid var(--cv-border) !important;
    border-radius: var(--cv-surface-radius) !important;
    background: var(--cv-surface) !important;
    box-shadow: none !important;
}

body.shell-page .shell-main .cv-ui-pagehead :where(.t,h1) {
    margin: 0 !important;
    color: var(--cv-text) !important;
    font-size: clamp(17px, 1.4vw, 21px) !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
}

body.shell-page .shell-main .cv-ui-pagehead :where(.d,.sub,.cv-sub,p) {
    max-width: 780px !important;
    margin: 3px 0 0 !important;
    color: var(--cv-text-dim) !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
}

body.shell-page .shell-main .cv-ui-filterbar {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 var(--cv-surface-gap) !important;
    padding: 9px 10px !important;
    border: 1px solid var(--cv-border) !important;
    border-radius: var(--cv-surface-radius) !important;
    background: var(--cv-surface) !important;
    box-shadow: var(--cv-surface-shadow) !important;
}

body.shell-page .shell-main .cv-ui-filterbar > * {
    min-width: 0;
}

body.shell-page .shell-main .cv-ui-tabs {
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 var(--cv-surface-gap) !important;
    padding: 0 6px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border: 1px solid var(--cv-border) !important;
    border-radius: var(--cv-surface-radius) !important;
    background: var(--cv-surface) !important;
    box-shadow: var(--cv-surface-shadow) !important;
    scrollbar-width: thin;
}

body.shell-page .shell-main .cv-ui-tabs > :where(a,button,.tab,.tab-item,.cu-tab,.cvwq-view) {
    flex: 0 0 auto !important;
    min-height: 38px !important;
    padding: 9px 11px !important;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    border-radius: var(--cv-control-radius) !important;
    background: transparent !important;
    color: var(--cv-text-dim) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}

body.shell-page .shell-main .cv-ui-tabs > :where(a,button,.tab,.tab-item,.cu-tab,.cvwq-view):hover {
    background: var(--cv-surface2) !important;
    color: var(--cv-text) !important;
}

body.shell-page .shell-main .cv-ui-tabs > :where(.active,.is-active,[aria-selected="true"]) {
    border-bottom-color: transparent !important;
    background: transparent !important;
    color: var(--cv-text) !important;
    font-weight: 800 !important;
}

body.shell-page .shell-main .cv-ui-card {
    min-width: 0 !important;
    max-width: 100% !important;
    border: 1px solid var(--cv-border) !important;
    border-radius: var(--cv-surface-radius) !important;
    background: var(--cv-surface) !important;
    box-shadow: var(--cv-surface-shadow) !important;
}

body.shell-page .shell-main .cv-ui-sectionhead {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    min-width: 0 !important;
    padding: 10px 12px !important;
    border-bottom: 1px solid var(--cv-border) !important;
    border-radius: var(--cv-surface-radius) var(--cv-surface-radius) 0 0 !important;
    background: var(--cv-surface2) !important;
}

body.shell-page .shell-main .cv-ui-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 7px !important;
    flex-wrap: wrap !important;
    min-width: 0 !important;
}

body.shell-page .shell-main .cv-ui-actions > :where(button,a,[role="button"]) {
    flex: 0 0 auto;
}

body.shell-page .shell-main .cv-ui-metric {
    min-width: 0 !important;
    border: 1px solid var(--cv-border) !important;
    border-top: 1px solid var(--cv-border) !important;
    border-radius: var(--cv-surface-radius) !important;
    background: var(--cv-surface) !important;
    box-shadow: none !important;
}

body.shell-page .shell-main .cv-ui-tablewrap {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    border: 1px solid var(--cv-border) !important;
    border-radius: var(--cv-surface-radius) !important;
    background: var(--cv-surface) !important;
    box-shadow: var(--cv-surface-shadow) !important;
}

body.shell-page .shell-main table.cv-ui-data-table {
    width: 100% !important;
    margin: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: var(--cv-surface) !important;
}

body.shell-page .shell-main .cv-ui-tablewrap > table.cv-ui-data-table {
    border: 0 !important;
}

body.shell-page .shell-main table.cv-ui-data-table--standalone {
    border: 1px solid var(--cv-border) !important;
    border-radius: var(--cv-surface-radius) !important;
    box-shadow: var(--cv-surface-shadow) !important;
}

body.shell-page .shell-main table.cv-ui-data-table > thead > tr > th {
    height: 34px !important;
    padding: 7px 10px !important;
    border-bottom: 1px solid var(--cv-border) !important;
    background: var(--cv-surface2) !important;
    color: var(--cv-text-muted) !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}

body.shell-page .shell-main table.cv-ui-data-table > tbody > tr > td {
    min-height: var(--cv-table-row-height) !important;
    padding: 9px 10px !important;
    border-bottom: 1px solid var(--cv-border-subtle, var(--cv-border)) !important;
    background: var(--cv-surface) !important;
    color: var(--cv-text) !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    vertical-align: middle !important;
}

body.shell-page .shell-main table.cv-ui-data-table > tbody > tr:last-child > td {
    border-bottom: 0 !important;
}

body.shell-page .shell-main table.cv-ui-data-table > tbody > tr:hover > td {
    background: color-mix(in srgb, var(--cv-accent) 5%, var(--cv-surface)) !important;
}

/* First converted workspaces. */
body.cv-page-jobs .shell-main .cvwq-viewbar.cv-ui-tabs {
    margin-bottom: 10px !important;
}

body.cv-page-jobs .shell-main .cv-followup-filterbar.cv-ui-filterbar {
    align-items: flex-end !important;
    background: var(--cv-surface2) !important;
}

body.cv-page-job-detail .shell-main .cv-status-bar {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    margin: 0 0 var(--cv-surface-gap) !important;
    padding: 9px 10px !important;
    border: 1px solid var(--cv-border) !important;
    border-radius: var(--cv-surface-radius) !important;
    background: var(--cv-surface) !important;
    box-shadow: var(--cv-surface-shadow) !important;
}

body.cv-page-job-detail .shell-main .tabpanel.active,
body.cv-page-customers .shell-main .cu-panel:not([hidden]) {
    min-width: 0 !important;
    max-width: 100% !important;
}

body.cv-page-customers .shell-main .cu-workspace {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 0 0 24px !important;
}

body.cv-page-customers .shell-main .cu-list-summary,
body.cv-page-customers .shell-main .cu-kpi-row,
body.cv-page-customers .shell-main .cu-r5-summary {
    gap: 7px !important;
}

/* Planning Board remains a contained horizontal workspace inside shell-main. */
body.cv-page-planning-board .shell-main {
    overflow-x: hidden !important;
}

body.cv-page-planning-board .shell-main > .boardwrap {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 2px 0 0 !important;
    overflow: hidden !important;
    isolation: isolate;
}

body.cv-page-planning-board .shell-main > .boardwrap > .board {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overscroll-behavior-inline: contain;
}

body.cv-page-planning-board .shell-main > .boardwrap .col {
    border-radius: var(--cv-surface-radius) !important;
    box-shadow: var(--cv-surface-shadow) !important;
}

body.cv-page-planning-board .shell-main > .boardwrap .colhead {
    border-radius: var(--cv-surface-radius) var(--cv-surface-radius) 0 0 !important;
}

@media (min-width: 901px) {
    body.cv-page-planning-board .shell-main > .boardwrap {
        height: calc(100dvh - 252px) !important;
        min-height: 360px !important;
    }
}

@media (max-width: 900px) {
    body.shell-page .shell-main .cv-ui-pagehead,
    body.shell-page .shell-main .cv-ui-filterbar {
        padding: 10px 11px !important;
    }

    body.shell-page .shell-main .cv-ui-actions {
        justify-content: flex-start !important;
    }

    body.cv-page-planning-board .shell-main > .boardwrap {
        height: calc(100dvh - 270px) !important;
        min-height: 330px !important;
    }
}

@media (max-width: 560px) {
    body.shell-page .shell-main .cv-ui-pagehead {
        align-items: stretch !important;
    }

    body.shell-page .shell-main .cv-ui-pagehead > .spacer {
        display: none !important;
    }

    body.shell-page .shell-main .cv-ui-pagehead > :where(button,a,[role="button"]) {
        flex: 1 1 auto !important;
        justify-content: center !important;
        text-align: center !important;
    }

    body.shell-page .shell-main .cv-ui-filterbar > :where(input,.cv-select-control,.cv-multiselect-control,.cv-temporal-control,.cv-choice) {
        flex: 1 1 100% !important;
        width: 100% !important;
        max-width: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   29. CLEARVIEW FILTER RAIL — BUILD 2R1
   Compact shared filter/search/date presentation. Uses the existing
   ClearView select and temporal engines; no browser-native popup is exposed.
   ═══════════════════════════════════════════════════════════════════════════ */

body.shell-page .shell-main .cv-ui-filterbar .cv-select-trigger,
body.shell-page .shell-main .cv-ui-filterbar .cv-multiselect-trigger,
body.shell-page .shell-main .cv-ui-filterbar .cv-temporal-trigger,
body.shell-page .shell-main .cv-ui-filterbar > :where(button,a,[role="button"]) {
    min-height: 36px;
}

body.shell-page .shell-main .cv-ui-filterbar .cv-select-trigger,
body.shell-page .shell-main .cv-ui-filterbar .cv-temporal-trigger {
    border-color: var(--cv-border) !important;
    background: var(--cv-surface) !important;
    color: var(--cv-text) !important;
    box-shadow: none !important;
}

body.shell-page .shell-main .cv-ui-filterbar .cv-select-trigger:hover,
body.shell-page .shell-main .cv-ui-filterbar .cv-temporal-trigger:hover {
    border-color: var(--cv-text-muted) !important;
    background: var(--cv-surface2) !important;
}

body.shell-page .shell-main .cv-ui-filterbar .cv-select-control.is-open .cv-select-trigger,
body.shell-page .shell-main .cv-ui-filterbar .cv-temporal-control.is-open .cv-temporal-trigger {
    border-color: var(--cv-accent) !important;
    box-shadow: 0 0 0 3px var(--cv-accent-soft) !important;
}

body.cv-page-jobs.cv-ui-surfaces-b2r1 .shell-main .filterbar.cv-ui-filterbar,
body.cv-page-jobs.cv-ui-surfaces-b2r1 .shell-main .cv-followup-filterbar.cv-ui-filterbar {
    margin-bottom: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    box-shadow: none !important;
}

body.cv-page-jobs.cv-ui-surfaces-b2r1 .shell-main .filterbar.cv-ui-filterbar {
    padding: 8px 12px !important;
    background: var(--cv-surface) !important;
}

body.cv-page-jobs.cv-ui-surfaces-b2r1 .shell-main .cv-followup-filterbar.cv-ui-filterbar {
    align-items: center !important;
    padding: 8px 12px !important;
    background: var(--cv-surface2) !important;
}

body.cv-page-jobs.cv-ui-surfaces-b2r1 .shell-main .filterbar .cvsv-btn,
body.cv-page-jobs.cv-ui-surfaces-b2r1 .shell-main .filterbar .cvtc-btn,
body.cv-page-jobs.cv-ui-surfaces-b2r1 .shell-main .filterbar .cvwq-clear {
    min-height: 36px !important;
    height: 36px !important;
    padding: 0 10px !important;
    border: 1px solid var(--cv-border) !important;
    border-radius: var(--cv-control-radius) !important;
    background: var(--cv-surface) !important;
    color: var(--cv-text) !important;
    box-shadow: none !important;
    font-size: 11px !important;
    font-weight: 700 !important;
}

body.cv-page-jobs.cv-ui-surfaces-b2r1 .shell-main .filterbar .cvsv-btn:hover,
body.cv-page-jobs.cv-ui-surfaces-b2r1 .shell-main .filterbar .cvtc-btn:hover,
body.cv-page-jobs.cv-ui-surfaces-b2r1 .shell-main .filterbar .cvwq-clear:hover {
    border-color: var(--cv-accent) !important;
    background: var(--cv-accent-soft) !important;
    color: var(--cv-text) !important;
}

body.cv-page-jobs.cv-ui-surfaces-b2r1 .shell-main .filterbar .cvsv-btn svg,
body.cv-page-jobs.cv-ui-surfaces-b2r1 .shell-main .filterbar .cvtc-btn svg {
    width: 15px !important;
    height: 15px !important;
}

@media (max-width: 900px) {
    body.cv-page-jobs.cv-ui-surfaces-b2r1 .shell-main .cv-filter-search {
        flex: 1 1 100%;
        max-width: none;
    }
}

@media (max-width: 560px) {
    body.cv-page-jobs.cv-ui-surfaces-b2r1 .shell-main .filterbar > select.cv-jobs-filter-select,
    body.cv-page-jobs.cv-ui-surfaces-b2r1 .shell-main .cv-followup-filterbar > select.cv-jobs-filter-select,
    body.cv-page-jobs.cv-ui-surfaces-b2r1 .shell-main .filterbar .cv-select-control,
    body.cv-page-jobs.cv-ui-surfaces-b2r1 .shell-main .cv-followup-filterbar .cv-select-control,
    body.cv-page-jobs.cv-ui-surfaces-b2r1 .shell-main .cv-followup-date,
    body.cv-page-jobs.cv-ui-surfaces-b2r1 .shell-main .cv-followup-date .cv-temporal-control {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        flex: 1 1 100% !important;
    }

    body.cv-page-jobs.cv-ui-surfaces-b2r1 .shell-main .cv-followup-date {
        display: grid;
        gap: 4px;
    }
}

body.cv-page-jobs.cv-ui-surfaces-b2r1 .shell-main .filterbar .cv-filter-search .search {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   30. CUSTOMER COMMAND CONTROLS — GLOBAL UI SURFACES BUILD 3
   Bounded conversion of the Customers list filter rail and customer record
   command surface. Uses the existing ClearView select engine and theme tokens.
   ═══════════════════════════════════════════════════════════════════════════ */

body.cv-page-customers.cv-ui-surfaces-b3 .shell-main .cu-customer-filter.cv-ui-filterbar {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 10px !important;
    padding: 8px 10px !important;
    border: 1px solid var(--cv-border) !important;
    border-radius: var(--cv-surface-radius) !important;
    background: var(--cv-surface) !important;
    box-shadow: var(--cv-surface-shadow, none) !important;
}

body.cv-page-customers.cv-ui-surfaces-b3 .shell-main .cu-filter-search {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 360px;
    min-width: 260px;
    max-width: 620px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--cv-border);
    border-radius: var(--cv-control-radius);
    background: var(--cv-surface);
    transition: border-color .14s ease, box-shadow .14s ease, background-color .14s ease;
}

body.cv-page-customers.cv-ui-surfaces-b3 .shell-main .cu-filter-search:hover {
    border-color: var(--cv-text-muted);
}

body.cv-page-customers.cv-ui-surfaces-b3 .shell-main .cu-filter-search:focus-within {
    border-color: var(--cv-accent);
    box-shadow: 0 0 0 3px var(--cv-accent-soft);
}

body.cv-page-customers.cv-ui-surfaces-b3 .shell-main .cu-filter-search svg {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    color: var(--cv-text-dim);
}

body.cv-page-customers.cv-ui-surfaces-b3 .shell-main .cu-filter-search input {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 34px !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 12px !important;
}

body.cv-page-customers.cv-ui-surfaces-b3 .shell-main .cu-filter-search input:focus,
body.cv-page-customers.cv-ui-surfaces-b3 .shell-main .cu-filter-search input:focus-visible {
    box-shadow: none !important;
    outline: 0 !important;
}

body.cv-page-customers.cv-ui-surfaces-b3 .shell-main select.cu-customer-filter-select {
    width: 146px;
    min-width: 146px;
    height: 36px;
}

body.cv-page-customers.cv-ui-surfaces-b3 .shell-main select.cu-customer-sort-select {
    width: 154px;
    min-width: 154px;
}

body.cv-page-customers.cv-ui-surfaces-b3 .shell-main .cu-customer-filter .cv-select-control {
    flex: 0 0 auto;
}

body.cv-page-customers.cv-ui-surfaces-b3 .shell-main .cu-customer-filter .cv-select-trigger {
    min-height: 36px !important;
    height: 36px !important;
    padding: 0 9px 0 10px !important;
    border-color: var(--cv-border) !important;
    background: var(--cv-surface) !important;
    color: var(--cv-text) !important;
    box-shadow: none !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

body.cv-page-customers.cv-ui-surfaces-b3 .shell-main .cu-customer-filter .cv-select-trigger:hover {
    border-color: var(--cv-text-muted) !important;
    background: var(--cv-surface2) !important;
}

body.cv-page-customers.cv-ui-surfaces-b3 .shell-main .cu-customer-filter .cv-select-control.is-open .cv-select-trigger {
    border-color: var(--cv-accent) !important;
    box-shadow: 0 0 0 3px var(--cv-accent-soft) !important;
}

body.cv-page-customers.cv-ui-surfaces-b3 .shell-main .cu-filter-apply,
body.cv-page-customers.cv-ui-surfaces-b3 .shell-main .cu-filter-clear {
    min-height: 36px !important;
    height: 36px !important;
    padding: 0 11px !important;
    white-space: nowrap !important;
}

body.cv-page-customers.cv-ui-surfaces-b3 .shell-main .cu-record-command {
    display: grid;
    gap: 7px;
    width: 100%;
    min-width: 0;
    margin: 0 0 10px;
    padding: 8px 10px;
    border: 1px solid var(--cv-border);
    border-radius: var(--cv-surface-radius);
    background: var(--cv-surface);
    box-shadow: var(--cv-surface-shadow, none);
}

body.cv-page-customers.cv-ui-surfaces-b3 .shell-main .cu-record-badges {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    min-height: 22px;
}

body.cv-page-customers.cv-ui-surfaces-b3 .shell-main .cu-record-membership {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 2px 8px;
    border: 1px solid color-mix(in srgb, var(--cu-membership-color) 70%, var(--cv-border));
    border-radius: 999px;
    background: color-mix(in srgb, var(--cu-membership-color) 18%, var(--cv-surface));
    color: var(--cv-text);
    font-size: 10px;
    font-weight: 800;
    line-height: 1.2;
}

body.cv-page-customers.cv-ui-surfaces-b3 .shell-main .cu-record-state {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 2px 8px;
    border: 1px solid var(--cv-border);
    border-radius: 999px;
    background: var(--cv-surface2);
    color: var(--cv-text-dim);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}

body.cv-page-customers.cv-ui-surfaces-b3 .shell-main .cu-record-actions {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    margin: 0 !important;
}

body.cv-page-customers.cv-ui-surfaces-b3 .shell-main .cu-record-actions > :where(button,a) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px !important;
    padding: 0 9px !important;
    border: 1px solid var(--cv-border) !important;
    border-radius: var(--cv-control-radius) !important;
    background: var(--cv-surface2) !important;
    color: var(--cv-text) !important;
    box-shadow: none !important;
    font-family: var(--cv-font-body) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    cursor: pointer;
}

body.cv-page-customers.cv-ui-surfaces-b3 .shell-main .cu-record-actions > :where(button,a):hover {
    border-color: var(--cv-accent) !important;
    background: var(--cv-accent-soft) !important;
    color: var(--cv-accent) !important;
}

body.cv-page-customers.cv-ui-surfaces-b3 .shell-main .cu-record-actions > .primary {
    border-color: var(--cv-accent) !important;
    background: var(--cv-accent) !important;
    color: #fff !important;
}

body.cv-page-customers.cv-ui-surfaces-b3 .shell-main .cu-record-actions > .primary:hover {
    filter: brightness(1.06);
    color: #fff !important;
}

body.cv-page-customers.cv-ui-surfaces-b3 .shell-main .cu-record-actions > .cu-record-merge {
    margin-left: auto;
    border-color: color-mix(in srgb, var(--cv-danger, #dc2626) 45%, var(--cv-border)) !important;
    color: var(--cv-danger, #dc2626) !important;
}

@media (max-width: 1180px) {
    body.cv-page-customers.cv-ui-surfaces-b3 .shell-main .cu-filter-search {
        flex: 1 1 100%;
        max-width: none;
    }

    body.cv-page-customers.cv-ui-surfaces-b3 .shell-main .cu-record-actions > .cu-record-merge {
        margin-left: 0;
    }
}

@media (max-width: 700px) {
    body.cv-page-customers.cv-ui-surfaces-b3 .shell-main .cu-customer-filter.cv-ui-filterbar {
        align-items: stretch !important;
    }

    body.cv-page-customers.cv-ui-surfaces-b3 .shell-main .cu-filter-search,
    body.cv-page-customers.cv-ui-surfaces-b3 .shell-main select.cu-customer-filter-select,
    body.cv-page-customers.cv-ui-surfaces-b3 .shell-main .cu-customer-filter .cv-select-control,
    body.cv-page-customers.cv-ui-surfaces-b3 .shell-main .cu-filter-apply,
    body.cv-page-customers.cv-ui-surfaces-b3 .shell-main .cu-filter-clear {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        flex: 1 1 100% !important;
    }

    body.cv-page-customers.cv-ui-surfaces-b3 .shell-main .cu-record-actions > :where(button,a) {
        flex: 1 1 calc(50% - 5px);
    }
}


/* CLEARVIEW_UI_PHASE2_HARDENING_R1_START
 * Theme-token-neutral accessibility, fallback, focus, and coarse-pointer
 * presentation for the existing cv-ui.js component authority.
 */
.cv-ui-phase2-live {
  position: absolute !important;
  inline-size: 1px !important;
  block-size: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.cv-ui-native-fallback {
  display: revert !important;
  position: static !important;
  inline-size: auto !important;
  block-size: auto !important;
  min-inline-size: 0 !important;
  min-block-size: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.cv-calendar-row,
.cv-month-row {
  display: contents;
}

.cv-select-trigger[data-cv-ui-phase2-ready="1"]:focus-visible,
.cv-multiselect-trigger[data-cv-ui-phase2-multiselect-ready="1"]:focus-visible,
.cv-temporal-trigger[data-cv-ui-phase2-temporal-trigger-ready="1"]:focus-visible,
[role="switch"][data-cv-ui-phase2-switch-ready="1"]:focus-visible,
[data-cv-ui-phase2-tablist-ready="1"] [role="tab"][data-cv-ui-phase2-local-tab="1"]:focus-visible,
[data-cv-ui-phase2-temporal-ready="1"] :is([role="gridcell"],[role="option"]):focus-visible,
[data-cv-ui-phase2-dialog-ready="1"] :is(
  button,
  a[href],
  input,
  select,
  textarea,
  [tabindex]
):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

[role="switch"][aria-busy="true"],
[data-cv-ui-phase2-status-ready="1"][aria-busy="true"] {
  cursor: progress;
}

.cv-select-trigger[aria-disabled="true"],
.cv-multiselect-trigger[aria-disabled="true"],
.cv-temporal-trigger[aria-disabled="true"],
[role="switch"][aria-disabled="true"],
[data-cv-ui-phase2-temporal-ready="1"] [aria-disabled="true"] {
  cursor: not-allowed;
}

[data-cv-ui-phase2-temporal-ready="1"] [role="gridcell"],
[data-cv-ui-phase2-temporal-ready="1"] [role="option"] {
  touch-action: manipulation;
}

@media (pointer: coarse) {
  .cv-select-trigger[data-cv-ui-phase2-ready="1"],
  .cv-multiselect-trigger[data-cv-ui-phase2-multiselect-ready="1"],
  .cv-temporal-trigger[data-cv-ui-phase2-temporal-trigger-ready="1"],
  [role="switch"][data-cv-ui-phase2-switch-ready="1"],
  [data-cv-ui-phase2-tablist-ready="1"] [role="tab"][data-cv-ui-phase2-local-tab="1"],
  [data-cv-ui-phase2-temporal-ready="1"] :is([role="gridcell"],[role="option"]),
  [data-cv-ui-phase2-dialog-ready="1"] :is(
    button,
    a[href],
    input,
    select,
    textarea
  ) {
    min-inline-size: 44px;
    min-block-size: 44px;
  }
}
/* CLEARVIEW_UI_PHASE2_HARDENING_R1_END */


/* ═══════════════════════════════════════════════════════════════════════════
   29. UI NORMALIZATION PHASE 1 — GOVERNED SHAPE + APPEARANCE REFERENCE
   Ordinary ClearView components consume semantic Shape geometry. The legacy
   universal forced-square selector is retired; route families migrate any
   remaining local geometry to these authorities. Semantic circles and pills stay round.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Ordinary canonical rectangular surfaces. */
body.shell-page :where(
    .cv-card,
    .cv-kpi,
    .cv-modal,
    .cv-dialog,
    .cv-empty,
    .cv-alert,
    .alert,
    .cv-form-panel,
    .cv-fillable-section,
    .cv-fieldset,
    .cv-table-wrap,
    .cv-tablewrap,
    .cv-badge
) {
    border-radius: var(--cv-surface-radius) !important;
}

/* Canonical control surfaces use the same Shape authority. */
body.shell-page :where(
    .cv-btn,
    .cv-btn-primary,
    .cv-btn-secondary,
    .cv-btn-ghost,
    .cv-btn-tertiary,
    .cv-btn-danger,
    .cv-action-primary,
    .cv-action-secondary,
    .cv-action-tertiary,
    .cv-action-danger,
    .cv-control-button,
    .cv-icon-control,
    .cv-select-trigger,
    .cv-select-menu,
    .cv-select-option,
    .cv-multiselect-trigger,
    .cv-multiselect-menu,
    .cv-multiselect-option,
    .cv-temporal-trigger,
    .cv-temporal-menu,
    .cv-number-stepper,
    .cv-number-stepper__button,
    .cv-file-control,
    .cv-file-icon
) {
    border-radius: var(--cv-control-radius) !important;
}

/* Table Shape belongs to the containing surface only. Rows and cells never
   become individual rounded bubbles. */
body.shell-page :where(.cv-table, .cv-table thead, .cv-table tbody, .cv-table tr, .cv-table th, .cv-table td) {
    border-radius: 0 !important;
}

/* Structural utility bars inherit the bottom corners of their owning panel. */
body.shell-page :where(.cv-action-bar, [data-cv-action-bar-ready]) {
    border-radius: 0 0 var(--cv-surface-radius) var(--cv-surface-radius) !important;
}

/* Semantic round exceptions are permanent in both Shape modes. */
body.shell-page :where(
    .cv-toggle,
    .cv-toggle-track,
    .cv-kpi-pill,
    .cv-check-pill
) {
    border-radius: 999px !important;
}
body.shell-page .cv-toggle-track::after,
body.shell-page input[type="radio"]:not([data-cv-native-choice]):not([data-no-custom-choice]),
body.shell-page input.cv-choice-native[type="radio"] {
    border-radius: 50% !important;
}

/* Settings > Appearance is the Phase 1 reference implementation. */
body.shell-page .settings-body .cv-appearance-card {
    margin: 0 0 var(--cv-sp-5);
    padding: 0;
    overflow: visible;
}
body.shell-page .settings-body .cv-appearance-card > .cv-card-header {
    align-items: flex-start;
    margin: 0;
    padding: var(--cv-sp-5);
    border-bottom: 1px solid var(--cv-border);
}
body.shell-page .settings-body .cv-appearance-card > .cv-card-header .cv-appearance-card-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}
body.shell-page .settings-body .cv-appearance-card > .cv-card-header h3 {
    margin: 0;
    color: var(--cv-text);
    font-size: 14px;
}
body.shell-page .settings-body .cv-appearance-card > .cv-card-header p {
    margin: 0;
    color: var(--cv-text-dim);
    font-size: 12px;
    line-height: 1.5;
}
body.shell-page .settings-body .cv-appearance-form {
    display: grid;
    gap: var(--cv-sp-5);
    padding: var(--cv-sp-5) var(--cv-sp-5) 0;
}
body.shell-page .settings-body .cv-appearance-group {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}
body.shell-page .settings-body .cv-appearance-group > legend {
    width: 100%;
    margin: 0 0 var(--cv-sp-2);
    padding: 0;
    color: var(--cv-text-dim);
    font-family: var(--cv-font-display) !important;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    line-height: 1.3;
    text-transform: uppercase;
}
body.shell-page .settings-body .cv-appearance-choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--cv-sp-2);
}
body.shell-page .settings-body label.cv-appearance-choice {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
    margin: 0;
    padding: 12px;
    border: 1px solid var(--cv-border);
    border-radius: var(--cv-surface-radius) !important;
    background: var(--cv-surface2);
    color: var(--cv-text);
    cursor: pointer;
    transition: border-color .14s ease, background-color .14s ease, box-shadow .14s ease;
}
body.shell-page .settings-body label.cv-appearance-choice:hover {
    border-color: var(--cv-control-border-hover);
    background: var(--cv-surface3);
}
body.shell-page .settings-body label.cv-appearance-choice:has(input:checked) {
    border-color: var(--cv-accent);
    background: var(--cv-accent-soft);
}
body.shell-page .settings-body label.cv-appearance-choice:has(input:focus-visible) {
    border-color: var(--cv-control-focus);
    box-shadow: 0 0 0 3px var(--cv-control-focus-ring);
}
body.shell-page .settings-body label.cv-appearance-choice > input {
    flex: 0 0 var(--cv-choice-size);
    margin-top: 1px !important;
}
body.shell-page .settings-body label.cv-appearance-choice .cv-choice-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}
body.shell-page .settings-body label.cv-appearance-choice .cv-choice-label,
body.shell-page .settings-body label.cv-appearance-choice .cv-choice-help {
    display: block;
    margin: 0;
    padding: 0;
    font-family: var(--cv-font-body) !important;
    letter-spacing: 0;
    text-transform: none;
}
body.shell-page .settings-body label.cv-appearance-choice .cv-choice-label {
    color: var(--cv-text) !important;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
}
body.shell-page .settings-body label.cv-appearance-choice .cv-choice-help {
    color: var(--cv-text-dim) !important;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.45;
}
body.shell-page .settings-body .cv-appearance-form > .cv-action-bar {
    margin: 0 calc(var(--cv-sp-5) * -1);
    width: calc(100% + (var(--cv-sp-5) * 2));
}
body.shell-page .settings-body .cv-appearance-language-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cv-sp-4);
    padding: var(--cv-sp-5);
}
body.shell-page .settings-body .cv-appearance-language-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
    flex: 1 1 auto;
}
body.shell-page .settings-body .cv-appearance-language-copy strong {
    color: var(--cv-text);
    font-size: 13px;
}
body.shell-page .settings-body .cv-appearance-language-copy span {
    color: var(--cv-text-dim);
    font-size: 11px;
    line-height: 1.45;
}
body.shell-page .settings-body .cv-appearance-language-control {
    display: flex;
    align-items: center;
    gap: var(--cv-sp-2);
    min-width: 220px;
    justify-content: flex-end;
}
body.shell-page .settings-body .cv-appearance-language-control > .cv-select,
body.shell-page .settings-body .cv-appearance-language-control > .cv-select-control {
    width: 190px;
    min-width: 190px;
}
body.shell-page .settings-body .cv-appearance-status {
    min-width: 54px;
    color: var(--cv-text-dim);
    font-size: 10px;
    text-align: right;
}
body.shell-page .settings-body .cv-appearance-status.is-saving {
    color: var(--cv-text-dim);
}
body.shell-page .settings-body .cv-appearance-status.is-saved {
    color: var(--cv-success);
}
body.shell-page .settings-body .cv-appearance-status.is-error {
    color: var(--cv-danger);
}

@media (max-width: 700px) {
    body.shell-page .settings-body .cv-appearance-choice-grid {
        grid-template-columns: 1fr;
    }
    body.shell-page .settings-body .cv-appearance-language-body {
        align-items: stretch;
        flex-direction: column;
    }
    body.shell-page .settings-body .cv-appearance-language-control {
        min-width: 0;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    body.shell-page .settings-body .cv-appearance-language-control > .cv-select,
    body.shell-page .settings-body .cv-appearance-language-control > .cv-select-control {
        width: 100%;
        min-width: 0;
        max-width: none;
    }
    body.shell-page .settings-body .cv-appearance-status {
        min-width: 0;
        text-align: left;
    }
}
/* CV_UI_NORMALIZATION_PHASE1_SHAPE_AUTHORITY_END */

/* ═══════════════════════════════════════════════════════════════════════════
   31. THEME AUTHORITY PHASE 1 — CONSOLIDATED LATE APPEARANCE AUTHORITY
   These rules previously lived as end-of-shell <style> blocks. They now live
   in the final shared CSS authority so Theme Packs remain palette/token data,
   shell_close.php remains lifecycle-only, and route CSS cannot own a pack.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Empty-state icon chrome is intentionally unboxed in every Theme Pack. */
body.shell-page .cv-empty-icon,
body.shell-page .empty-icon,
body.shell-page .empty-state-icon,
body.shell-page .grid-empty-icon,
body.shell-page .cv-empty-glyph {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
    border-radius: 0 !important;
}
body.shell-page .cv-empty-icon {
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    opacity: .72 !important;
    color: var(--cv-accent) !important;
}
body.shell-page .cv-empty-icon svg {
    width: 34px !important;
    height: 34px !important;
    display: block !important;
}
body.shell-page .cv-empty--sm .cv-empty-icon svg { width: 24px !important; height: 24px !important; }
body.shell-page .cv-empty--lg .cv-empty-icon svg { width: 42px !important; height: 42px !important; }

/* Professional typography normalization. The font resource and primary
   cv-font-inter token definitions already live in the shared font authority. */
html.cv-font-inter body.shell-page input,
html.cv-font-inter body.shell-page button,
html.cv-font-inter body.shell-page select,
html.cv-font-inter body.shell-page textarea,
html.cv-font-inter body.shell-page option,
html.cv-font-inter body.shell-page optgroup,
html.cv-font-inter body.shell-page ::placeholder {
    font-family: var(--cv-font-body) !important;
}
html.cv-font-inter body.shell-page .shell-main,
html.cv-font-inter body.shell-page .shell-main *,
html.cv-font-inter body.shell-page .shell-sidebar,
html.cv-font-inter body.shell-page .shell-sidebar *,
html.cv-font-inter body.shell-page table,
html.cv-font-inter body.shell-page table * {
    letter-spacing: normal !important;
}
html.cv-font-inter body.shell-page .shell-main h1,
html.cv-font-inter body.shell-page .shell-main h2,
html.cv-font-inter body.shell-page .shell-main h3,
html.cv-font-inter body.shell-page .shell-main h4,
html.cv-font-inter body.shell-page .shell-main h5,
html.cv-font-inter body.shell-page .shell-main h6,
html.cv-font-inter body.shell-page .shell-main label,
html.cv-font-inter body.shell-page .shell-main table th,
html.cv-font-inter body.shell-page .shell-sidebar .shell-section-title,
html.cv-font-inter body.shell-page .shell-sidebar .shell-nav-section,
html.cv-font-inter body.shell-page .shell-sidebar .shell-nav-label,
html.cv-font-inter body.shell-page .cv-card-title,
html.cv-font-inter body.shell-page .section-title,
html.cv-font-inter body.shell-page .card-title,
html.cv-font-inter body.shell-page .metric .m-label,
html.cv-font-inter body.shell-page .rpt-stat-label,
html.cv-font-inter body.shell-page .rpt-card h3,
html.cv-font-inter body.shell-page .ops-kpi-head span,
html.cv-font-inter body.shell-page .ops-panel-title,
html.cv-font-inter body.shell-page .home-stat-box .l,
html.cv-font-inter body.shell-page .cv-books-kpi-label,
html.cv-font-inter body.shell-page .cv-books-tab,
html.cv-font-inter body.shell-page .ao-tab,
html.cv-font-inter body.shell-page .sa-tabs a,
html.cv-font-inter body.shell-page .settings-tabs a {
    text-transform: none !important;
    letter-spacing: normal !important;
}
html.cv-font-inter body.shell-page .cv-num,
html.cv-font-inter body.shell-page .cv-number,
html.cv-font-inter body.shell-page .metric-value,
html.cv-font-inter body.shell-page .metric .m-value,
html.cv-font-inter body.shell-page .kpi-value,
html.cv-font-inter body.shell-page .stat-value,
html.cv-font-inter body.shell-page .stat-number,
html.cv-font-inter body.shell-page .sa-stat-value,
html.cv-font-inter body.shell-page .sa-stat-number,
html.cv-font-inter body.shell-page .rpt-stat-value,
html.cv-font-inter body.shell-page .rpt-card .n,
html.cv-font-inter body.shell-page .home-stat-box .n,
html.cv-font-inter body.shell-page .ops-kpi-value,
html.cv-font-inter body.shell-page .ops-kpi-value span,
html.cv-font-inter body.shell-page .cv-books-kpi-value,
html.cv-font-inter body.shell-page .cv-books-stat-value,
html.cv-font-inter body.shell-page .ao-kpi-value,
html.cv-font-inter body.shell-page .db-ds-value,
html.cv-font-inter body.shell-page .db-stat,
html.cv-font-inter body.shell-page .db-date-label,
html.cv-font-inter body.shell-page .money,
html.cv-font-inter body.shell-page .amount,
html.cv-font-inter body.shell-page .count,
html.cv-font-inter body.shell-page .badge,
html.cv-font-inter body.shell-page .pill {
    font-family: var(--cv-font-body) !important;
    letter-spacing: normal !important;
}

/* Shared page-header foundation. Palette and geometry are entirely semantic. */
body.shell-page .shell-main > .page-head,
body.shell-page .shell-main .rpt-head,
body.shell-page .shell-main .cv-page-header,
body.shell-page .shell-main .cv-autoops-header,
body.shell-page .shell-main .cvcfg-head,
body.shell-page .shell-main .oa-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    margin: 0 0 18px !important;
    padding: clamp(14px, 1.5vw, 20px) !important;
    border: 1px solid var(--cv-border) !important;
    border-radius: var(--cv-surface-radius) !important;
    background: var(--cv-surface) !important;
    color: var(--cv-text) !important;
    box-shadow: none !important;
}
body.shell-page .shell-main .ops-subheader {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    margin: 0 0 16px !important;
    padding: 12px 16px !important;
    border: 1px solid var(--cv-border) !important;
    border-radius: var(--cv-surface-radius) !important;
    background: var(--cv-surface) !important;
    color: var(--cv-text) !important;
    box-shadow: none !important;
}
body.shell-page .shell-main > .page-head h1,
body.shell-page .shell-main .rpt-head h1,
body.shell-page .shell-main .cv-page-header h1,
body.shell-page .shell-main .cv-autoops-header h1,
body.shell-page .shell-main .cvcfg-head h1,
body.shell-page .shell-main .oa-header h1,
body.shell-page .shell-main .ops-subheader strong {
    margin: 0 !important;
    color: var(--cv-text) !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
}
body.shell-page .shell-main > .page-head h1,
body.shell-page .shell-main .rpt-head h1,
body.shell-page .shell-main .cv-page-header h1,
body.shell-page .shell-main .cv-autoops-header h1,
body.shell-page .shell-main .cvcfg-head h1,
body.shell-page .shell-main .oa-header h1 {
    font-size: clamp(20px, 1.7vw, 28px) !important;
}
body.shell-page .shell-main > .page-head p,
body.shell-page .shell-main .rpt-head span,
body.shell-page .shell-main .cv-page-header p,
body.shell-page .shell-main .cv-autoops-header p,
body.shell-page .shell-main .cvcfg-head .who,
body.shell-page .shell-main .oa-header p,
body.shell-page .shell-main .ops-subheader span {
    color: var(--cv-text-dim) !important;
    line-height: 1.45 !important;
}
body.shell-page .shell-main .cv-page-header-left,
body.shell-page .shell-main .cv-autoops-header > div:first-child,
body.shell-page .shell-main .oa-header > div:first-child,
body.shell-page .shell-main .page-head-left,
body.shell-page .shell-main .ops-subheader-left {
    min-width: 0 !important;
}
body.shell-page .shell-main .cv-page-header-actions,
body.shell-page .shell-main .cv-autoops-header-actions,
body.shell-page .shell-main .page-head-actions,
body.shell-page .shell-main .ops-subheader-right,
body.shell-page .shell-main .oa-header > div:last-child {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}
body.shell-page .shell-main .cv-page-header .cv-books-search,
body.shell-page .shell-main .cv-page-header input[type="search"],
body.shell-page .shell-main .cv-autoops-header input[type="search"],
body.shell-page .shell-main .page-head input[type="search"] {
    min-width: min(360px, 100%) !important;
}
body.shell-page .shell-main .cv-page-header img,
body.shell-page .shell-main .cv-autoops-header img,
body.shell-page .shell-main .oa-header img,
body.shell-page .shell-main .page-head img,
body.shell-page .shell-main .rpt-head img,
body.shell-page .shell-main .cvcfg-head img {
    max-height: 42px !important;
    width: auto !important;
}
@media (max-width: 840px) {
    body.shell-page .shell-main > .page-head,
    body.shell-page .shell-main .rpt-head,
    body.shell-page .shell-main .cv-page-header,
    body.shell-page .shell-main .cv-autoops-header,
    body.shell-page .shell-main .cvcfg-head,
    body.shell-page .shell-main .oa-header,
    body.shell-page .shell-main .ops-subheader {
        align-items: stretch !important;
        flex-direction: column !important;
        padding: 14px !important;
    }
    body.shell-page .shell-main .cv-page-header-actions,
    body.shell-page .shell-main .cv-autoops-header-actions,
    body.shell-page .shell-main .page-head-actions,
    body.shell-page .shell-main .ops-subheader-right,
    body.shell-page .shell-main .oa-header > div:last-child {
        justify-content: flex-start !important;
        width: 100% !important;
    }
    body.shell-page .shell-main .cv-page-header-actions > *,
    body.shell-page .shell-main .cv-autoops-header-actions > *,
    body.shell-page .shell-main .page-head-actions > * {
        max-width: 100% !important;
    }
}

/* Search-field alignment uses semantic text tokens in every Theme Pack. */
body.shell-page .shell-sidebar .shell-search-wrap,
body.shell-page .shell-main .cv-books-search,
body.shell-page .shell-main .cv-search,
body.shell-page .shell-main .cv-search-wrap,
body.shell-page .shell-main .search-wrap,
body.shell-page .shell-main .search-box,
body.shell-page .shell-main .search-field,
body.shell-page .shell-main .vision-search,
body.shell-page .shell-main .vision-search-wrap,
body.shell-page .shell-main .vision-chat-search,
body.shell-page .shell-main .assistant-search,
body.shell-page .shell-main .chat-search,
body.shell-page .shell-main div:has(> svg + input[type="search"]),
body.shell-page .shell-main div:has(> svg ~ input[type="search"]),
body.shell-page .shell-main div:has(> .search-icon + input[type="search"]),
body.shell-page .shell-main div:has(> .search-icon ~ input[type="search"]),
body.shell-page .shell-main label:has(> svg + input[type="search"]),
body.shell-page .shell-main label:has(> svg ~ input[type="search"]) {
    position: relative !important;
}
body.shell-page .shell-sidebar .shell-search-wrap > svg,
body.shell-page .shell-main .cv-books-search > svg,
body.shell-page .shell-main .cv-search > svg,
body.shell-page .shell-main .cv-search-wrap > svg,
body.shell-page .shell-main .search-wrap > svg,
body.shell-page .shell-main .search-box > svg,
body.shell-page .shell-main .search-field > svg,
body.shell-page .shell-main .vision-search > svg,
body.shell-page .shell-main .vision-search-wrap > svg,
body.shell-page .shell-main .vision-chat-search > svg,
body.shell-page .shell-main .assistant-search > svg,
body.shell-page .shell-main .chat-search > svg,
body.shell-page .shell-main div:has(> svg + input[type="search"]) > svg,
body.shell-page .shell-main div:has(> svg ~ input[type="search"]) > svg,
body.shell-page .shell-main label:has(> svg + input[type="search"]) > svg,
body.shell-page .shell-main label:has(> svg ~ input[type="search"]) > svg,
body.shell-page .shell-main .cv-books-search-icon,
body.shell-page .shell-main .search-icon,
body.shell-page .shell-main .cv-search-icon,
body.shell-page .shell-main [data-lucide="search"] {
    position: absolute !important;
    left: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 18px !important;
    height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    color: var(--cv-text-muted) !important;
    stroke: currentColor !important;
    fill: none !important;
    opacity: .95 !important;
    pointer-events: none !important;
    z-index: 3 !important;
}
body.shell-page .shell-main .cv-books-search input[type="search"],
body.shell-page .shell-main .cv-search input[type="search"],
body.shell-page .shell-main .cv-search-wrap input[type="search"],
body.shell-page .shell-main .search-wrap input[type="search"],
body.shell-page .shell-main .search-box input[type="search"],
body.shell-page .shell-main .search-field input[type="search"],
body.shell-page .shell-main .vision-search input[type="search"],
body.shell-page .shell-main .vision-search-wrap input[type="search"],
body.shell-page .shell-main .vision-chat-search input[type="search"],
body.shell-page .shell-main .assistant-search input[type="search"],
body.shell-page .shell-main .chat-search input[type="search"],
body.shell-page .shell-main div:has(> svg + input[type="search"]) > input[type="search"],
body.shell-page .shell-main div:has(> svg ~ input[type="search"]) > input[type="search"],
body.shell-page .shell-main div:has(> .search-icon + input[type="search"]) > input[type="search"],
body.shell-page .shell-main div:has(> .search-icon ~ input[type="search"]) > input[type="search"],
body.shell-page .shell-main label:has(> svg + input[type="search"]) > input[type="search"],
body.shell-page .shell-main label:has(> svg ~ input[type="search"]) > input[type="search"] {
    box-sizing: border-box !important;
    width: 100% !important;
    padding-left: 48px !important;
    min-height: 46px !important;
    line-height: 1.35 !important;
}
body.shell-page .shell-sidebar .shell-search {
    padding-left: 46px !important;
    min-height: 44px !important;
}
body.shell-page .shell-main input[type="search"]::placeholder,
body.shell-page .shell-sidebar input[type="search"]::placeholder {
    color: var(--cv-text-muted) !important;
    opacity: 1 !important;
}

/* Canonical single-surface search control.
   Opt in with .cv-search.cv-search--single so the wrapper stays structural
   and exactly one bordered input is rendered. This prevents nested search
   boxes when the shared form-control authority also styles text inputs. */
body.shell-page .shell-main .cv-search.cv-search--single {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}
body.shell-page .shell-main .cv-search.cv-search--single > input[type="text"],
body.shell-page .shell-main .cv-search.cv-search--single > input[type="search"] {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 7px 38px 7px 38px !important;
    border: 1px solid var(--cv-control-border) !important;
    border-radius: var(--cv-control-radius) !important;
    background: var(--cv-control-bg) !important;
    color: var(--cv-text) !important;
    box-shadow: none !important;
    outline: none !important;
    line-height: 1.35 !important;
}
body.shell-page .shell-main .cv-search.cv-search--single > input[type="text"]:hover:not(:disabled):not([readonly]),
body.shell-page .shell-main .cv-search.cv-search--single > input[type="search"]:hover:not(:disabled):not([readonly]) {
    border-color: var(--cv-control-border-hover) !important;
}
body.shell-page .shell-main .cv-search.cv-search--single > input[type="text"]:focus,
body.shell-page .shell-main .cv-search.cv-search--single > input[type="text"]:focus-visible,
body.shell-page .shell-main .cv-search.cv-search--single > input[type="search"]:focus,
body.shell-page .shell-main .cv-search.cv-search--single > input[type="search"]:focus-visible {
    border-color: var(--cv-control-focus) !important;
    box-shadow: 0 0 0 3px var(--cv-control-focus-ring) !important;
}
body.shell-page .shell-main .cv-search.cv-search--single > .cv-search-icon {
    position: absolute !important;
    left: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 16px !important;
    height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--cv-text-muted) !important;
    pointer-events: none !important;
    z-index: 2 !important;
}
body.shell-page .shell-main .cv-search.cv-search--single > .cv-search-icon svg {
    width: 16px !important;
    height: 16px !important;
    display: block !important;
}
body.shell-page .shell-main .cv-search.cv-search--single > .cv-search-clear {
    position: absolute !important;
    right: 6px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-radius: var(--cv-control-radius) !important;
    background: transparent !important;
    color: var(--cv-text-muted) !important;
    box-shadow: none !important;
    z-index: 2 !important;
}
body.shell-page .shell-main .cv-search.cv-search--single > .cv-search-clear:hover,
body.shell-page .shell-main .cv-search.cv-search--single > .cv-search-clear:focus-visible {
    background: var(--cv-surface2) !important;
    color: var(--cv-text) !important;
}
body.shell-page .shell-main .cv-search.cv-search--single > .cv-search-clear[hidden] {
    display: none !important;
}
html:not(.theme-light) body.shell-page .shell-main .cv-books-search > svg,
html:not(.theme-light) body.shell-page .shell-main .cv-search > svg,
html:not(.theme-light) body.shell-page .shell-main .cv-search-wrap > svg,
html:not(.theme-light) body.shell-page .shell-main .search-wrap > svg,
html:not(.theme-light) body.shell-page .shell-main .search-box > svg,
html:not(.theme-light) body.shell-page .shell-main .search-field > svg,
html:not(.theme-light) body.shell-page .shell-main .vision-search > svg,
html:not(.theme-light) body.shell-page .shell-main .vision-search-wrap > svg,
html:not(.theme-light) body.shell-page .shell-main .vision-chat-search > svg,
html:not(.theme-light) body.shell-page .shell-main .assistant-search > svg,
html:not(.theme-light) body.shell-page .shell-main .chat-search > svg,
html:not(.theme-light) body.shell-page .shell-main .cv-books-search-icon,
html:not(.theme-light) body.shell-page .shell-main .search-icon,
html:not(.theme-light) body.shell-page .shell-main .cv-search-icon,
html:not(.theme-light) body.shell-page .shell-main [data-lucide="search"] {
    color: var(--cv-text-dim) !important;
    opacity: .85 !important;
}

body.shell-page .shell-main .vw-search { position: relative !important; }
body.shell-page .shell-main .vw-search::before {
    left: 18px !important;
    width: 20px !important;
    height: 20px !important;
    opacity: .9 !important;
    z-index: 3 !important;
}
body.shell-page .shell-main .vw-search input,
body.shell-page .shell-main .vw-search input#vw-search-input {
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 58px !important;
    padding-left: 56px !important;
    padding-right: 18px !important;
    line-height: 1.35 !important;
}
body.shell-page .shell-main .vw-search input::placeholder,
body.shell-page .shell-main .vw-search input#vw-search-input::placeholder {
    color: var(--cv-text-muted) !important;
    opacity: 1 !important;
}
html:not(.theme-light) body.shell-page .shell-main .vw-search::before {
    filter: brightness(1.7) saturate(.65) !important;
    opacity: .9 !important;
}

/* Button/action standard. All packs use the same selectors and semantic tokens. */
body.shell-page .shell-main :is(a,button)[class*="btn"],
body.shell-page .shell-main :is(a,button)[class*="button"],
body.shell-page .shell-main :is(a,button)[class*="action"],
body.shell-page .shell-main :is(a,button)[data-tone],
body.shell-page .shell-main .cv-link-button,
body.shell-page .shell-main .cv-books-action-link,
body.shell-page .shell-main .ops-actionbar-btn {
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}
body.shell-page .shell-main :is(a,button)[class*="btn"] svg,
body.shell-page .shell-main :is(a,button)[class*="button"] svg,
body.shell-page .shell-main :is(a,button)[class*="action"] svg,
body.shell-page .shell-main :is(a,button)[data-tone] svg,
body.shell-page .shell-main .cv-link-button svg,
body.shell-page .shell-main .cv-books-action-link svg,
body.shell-page .shell-main .ops-actionbar-btn svg {
    flex: 0 0 auto !important;
    color: currentColor !important;
    fill: none !important;
    stroke: currentColor !important;
}
body.shell-page .shell-main :is(a,button).cv-btn-primary:not(:disabled):not(.disabled):not([aria-disabled="true"]),
body.shell-page .shell-main :is(a,button).btn-primary:not(:disabled):not(.disabled):not([aria-disabled="true"]),
body.shell-page .shell-main :is(a,button).primary:not(:disabled):not(.disabled):not([aria-disabled="true"]),
body.shell-page .shell-main :is(a,button).button-primary:not(:disabled):not(.disabled):not([aria-disabled="true"]),
body.shell-page .shell-main :is(a,button).cv-empty-btn--primary:not(:disabled):not(.disabled):not([aria-disabled="true"]),
body.shell-page .shell-main :is(a,button).cvgs-banner-cta:not(.disabled):not([aria-disabled="true"]),
body.shell-page .shell-main :is(a,button).cvgs-step-cta:not(.is-ghost):not(.disabled):not([aria-disabled="true"]),
body.shell-page .shell-main :is(a,button).ops-actionbar-btn[data-tone="primary"]:not(:disabled):not(.disabled),
body.shell-page .shell-main :is(a,button)[data-tone="primary"]:not(:disabled):not(.disabled) {
    background: var(--cv-accent) !important;
    border-color: var(--cv-accent) !important;
    color: var(--cv-accent-ink) !important;
    opacity: 1 !important;
    filter: none !important;
    text-shadow: none !important;
    box-shadow: none !important;
}
body.shell-page .shell-main :is(a,button).cv-btn-primary:hover,
body.shell-page .shell-main :is(a,button).btn-primary:hover,
body.shell-page .shell-main :is(a,button).primary:hover,
body.shell-page .shell-main :is(a,button).button-primary:hover,
body.shell-page .shell-main :is(a,button).cv-empty-btn--primary:hover,
body.shell-page .shell-main :is(a,button).cvgs-banner-cta:hover,
body.shell-page .shell-main :is(a,button).cvgs-step-cta:not(.is-ghost):hover,
body.shell-page .shell-main :is(a,button).ops-actionbar-btn[data-tone="primary"]:hover,
body.shell-page .shell-main :is(a,button)[data-tone="primary"]:hover {
    background: var(--cv-accent) !important;
    border-color: var(--cv-accent-dim) !important;
    color: var(--cv-accent-ink) !important;
}
body.shell-page .shell-main :is(a,button).cv-btn:not(.cv-btn-primary):not(.cv-btn-danger):not(:disabled):not(.disabled),
body.shell-page .shell-main :is(a,button).cv-btn-ghost:not(:disabled):not(.disabled),
body.shell-page .shell-main :is(a,button).btn-secondary:not(:disabled):not(.disabled),
body.shell-page .shell-main :is(a,button).btn-outline:not(:disabled):not(.disabled),
body.shell-page .shell-main :is(a,button).button-secondary:not(:disabled):not(.disabled),
body.shell-page .shell-main :is(a,button).cv-link-button:not(:disabled):not(.disabled),
body.shell-page .shell-main :is(a,button).cv-books-action-link:not(.cv-books-action-link--danger),
body.shell-page .shell-main :is(a,button)[data-tone="secondary"]:not(:disabled):not(.disabled),
body.shell-page .shell-main :is(a,button)[data-tone="neutral"]:not(:disabled):not(.disabled) {
    background: var(--cv-surface) !important;
    border-color: var(--cv-border) !important;
    color: var(--cv-text) !important;
    opacity: 1 !important;
    text-shadow: none !important;
    box-shadow: none !important;
}
body.shell-page .shell-main :is(a,button).cv-btn:not(.cv-btn-primary):not(.cv-btn-danger):not(:disabled):not(.disabled):hover,
body.shell-page .shell-main :is(a,button).cv-btn-ghost:not(:disabled):not(.disabled):hover,
body.shell-page .shell-main :is(a,button).btn-secondary:not(:disabled):not(.disabled):hover,
body.shell-page .shell-main :is(a,button).btn-outline:not(:disabled):not(.disabled):hover,
body.shell-page .shell-main :is(a,button).button-secondary:not(:disabled):not(.disabled):hover,
body.shell-page .shell-main :is(a,button).cv-link-button:not(:disabled):not(.disabled):hover,
body.shell-page .shell-main :is(a,button).cv-books-action-link:not(.cv-books-action-link--danger):hover,
body.shell-page .shell-main :is(a,button)[data-tone="secondary"]:not(:disabled):not(.disabled):hover,
body.shell-page .shell-main :is(a,button)[data-tone="neutral"]:not(:disabled):not(.disabled):hover {
    background: var(--cv-surface2) !important;
    border-color: var(--cv-accent) !important;
    color: var(--cv-accent) !important;
}
body.shell-page .shell-main :is(a,button).cv-btn-danger:not(:disabled):not(.disabled),
body.shell-page .shell-main :is(a,button).btn-danger:not(:disabled):not(.disabled),
body.shell-page .shell-main :is(a,button).button-danger:not(:disabled):not(.disabled),
body.shell-page .shell-main :is(a,button).cv-books-action-link--danger,
body.shell-page .shell-main :is(a,button)[data-tone="danger"]:not(:disabled):not(.disabled),
body.shell-page .shell-main :is(a,button).is-danger:not(:disabled):not(.disabled) {
    background: var(--cv-danger-soft) !important;
    border-color: var(--cv-danger) !important;
    color: var(--cv-danger) !important;
    opacity: 1 !important;
}
body.shell-page .shell-main :is(a,button)[class*="btn"]:disabled,
body.shell-page .shell-main :is(a,button)[class*="btn"].disabled,
body.shell-page .shell-main :is(a,button)[class*="button"]:disabled,
body.shell-page .shell-main :is(a,button)[class*="button"].disabled,
body.shell-page .shell-main :is(a,button)[aria-disabled="true"],
body.shell-page .shell-main :is(a,button)[disabled] {
    background: var(--cv-control-disabled-bg) !important;
    border-color: var(--cv-border) !important;
    color: var(--cv-text-dim) !important;
    opacity: 1 !important;
    filter: none !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}
body.shell-page .shell-main :is(a,button)[class*="btn"]:disabled *,
body.shell-page .shell-main :is(a,button)[class*="btn"].disabled *,
body.shell-page .shell-main :is(a,button)[class*="button"]:disabled *,
body.shell-page .shell-main :is(a,button)[class*="button"].disabled *,
body.shell-page .shell-main :is(a,button)[aria-disabled="true"] *,
body.shell-page .shell-main :is(a,button)[disabled] * {
    color: inherit !important;
    fill: currentColor !important;
    stroke: currentColor !important;
}
@media (max-width: 720px) {
    body.shell-page .shell-main :is(a,button)[class*="btn"],
    body.shell-page .shell-main :is(a,button)[class*="button"] {
        max-width: 100% !important;
        white-space: normal !important;
    }
}

/* Dark-mode repair uses the default no-theme-light mode contract. */
html:not(.theme-light) body.shell-page .af-filters,
html:not(.theme-light) body.shell-page .af-card {
    background: var(--cv-surface) !important;
    border-color: var(--cv-border) !important;
    color: var(--cv-text) !important;
}
html:not(.theme-light) body.shell-page .af-day {
    background: var(--cv-surface2) !important;
    border-color: var(--cv-border) !important;
    color: var(--cv-text) !important;
}
html:not(.theme-light) body.shell-page .af-row {
    background: var(--cv-surface) !important;
    border-color: var(--cv-border) !important;
    color: var(--cv-text) !important;
}
html:not(.theme-light) body.shell-page .af-row:hover { background: var(--cv-surface2) !important; }
html:not(.theme-light) body.shell-page .af-label,
html:not(.theme-light) body.shell-page .af-tenant b,
html:not(.theme-light) body.shell-page .af-meta .amt { color: var(--cv-text) !important; }
html:not(.theme-light) body.shell-page .af-sub,
html:not(.theme-light) body.shell-page .af-tenant,
html:not(.theme-light) body.shell-page .af-detail,
html:not(.theme-light) body.shell-page .af-meta,
html:not(.theme-light) body.shell-page .af-count { color: var(--cv-text-dim) !important; }
html:not(.theme-light) body.shell-page .af-icon {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
    border-radius: 0 !important;
    color: var(--cv-text-dim) !important;
}
html:not(.theme-light) body.shell-page .af-filters select,
html:not(.theme-light) body.shell-page .af-filters input {
    background: var(--cv-bg) !important;
    border-color: var(--cv-border) !important;
    color: var(--cv-text) !important;
}
html:not(.theme-light) body.shell-page .af-pill:not(.active) {
    background: var(--cv-bg) !important;
    border-color: var(--cv-border) !important;
    color: var(--cv-text) !important;
}
html:not(.theme-light) body.shell-page .ops-dashboard .cv-kpi,
html:not(.theme-light) body.shell-page .ops-dashboard .ops-panel,
html:not(.theme-light) body.shell-page .ops-dashboard .ops-kpi,
html:not(.theme-light) body.shell-page .ops-dashboard .cv-card {
    background: var(--cv-surface) !important;
    border-color: var(--cv-border) !important;
    color: var(--cv-text) !important;
}
html:not(.theme-light) body.shell-page .ops-dashboard .cv-kpi-label,
html:not(.theme-light) body.shell-page .ops-dashboard .ops-kpi-head,
html:not(.theme-light) body.shell-page .ops-dashboard .ops-kpi-foot { color: var(--cv-text-dim) !important; }
html:not(.theme-light) body.shell-page .ops-dashboard .cv-kpi-value,
html:not(.theme-light) body.shell-page .ops-dashboard .ops-kpi-value,
html:not(.theme-light) body.shell-page .ops-dashboard .ops-panel h2,
html:not(.theme-light) body.shell-page .ops-dashboard .ops-panel h3 { color: var(--cv-text) !important; }

/* CLEARVIEW_WORKSPACE_MODERNIZATION_PHASE9_SEARCH_AUTHORITY_CORRECTIVE_R3 */
/* Form field standard. Geometry comes only from the shared control token.
   Search inputs are intentionally excluded here. Authenticated desktop search
   geometry is owned by the dedicated shared search authority below so generic
   form-control padding cannot move search text underneath its magnifier. */
body.shell-page .shell-main :is(
    input:not([type]), input[type="text"], input[type="email"], input[type="password"],
    input[type="number"], input[type="url"], input[type="tel"],
    input[type="date"], input[type="time"], input[type="month"],
    input[type="week"], input[type="datetime-local"],
    select:not([multiple]):not([size]), textarea,
    .form-control, .field-control, .cv-input, .cv-select, .cv-textarea
):not(.cv-select-native):not(.cv-file-native):not([inputmode="search"]):not(.cv-search-field-v2__input) {
    box-sizing: border-box !important;
    min-height: var(--cv-control-height) !important;
    max-width: 100% !important;
    padding: var(--cv-control-padding-y) var(--cv-control-padding-x) !important;
    border: 1px solid var(--cv-control-border) !important;
    border-radius: var(--cv-control-radius) !important;
    background: var(--cv-control-bg) !important;
    color: var(--cv-text) !important;
    box-shadow: none !important;
    outline: none !important;
    line-height: 1.35 !important;
}
body.shell-page .shell-main :is(
    input:not([type]), input[type="text"], input[type="email"], input[type="password"],
    input[type="number"], input[type="url"], input[type="tel"],
    input[type="date"], input[type="time"], input[type="month"],
    input[type="week"], input[type="datetime-local"],
    select:not([multiple]):not([size]), textarea,
    .form-control, .field-control, .cv-input, .cv-select, .cv-textarea
):not(.cv-select-native):not(.cv-file-native):not([inputmode="search"]):not(.cv-search-field-v2__input):hover:not(:disabled):not([readonly]) {
    border-color: var(--cv-control-border-hover) !important;
}
body.shell-page .shell-main :is(
    input:not([type]), input[type="text"], input[type="email"], input[type="password"],
    input[type="number"], input[type="url"], input[type="tel"],
    input[type="date"], input[type="time"], input[type="month"],
    input[type="week"], input[type="datetime-local"],
    select:not([multiple]):not([size]), textarea,
    .form-control, .field-control, .cv-input, .cv-select, .cv-textarea
):not(.cv-select-native):not(.cv-file-native):not([inputmode="search"]):not(.cv-search-field-v2__input):focus,
body.shell-page .shell-main :is(
    input:not([type]), input[type="text"], input[type="email"], input[type="password"],
    input[type="number"], input[type="url"], input[type="tel"],
    input[type="date"], input[type="time"], input[type="month"],
    input[type="week"], input[type="datetime-local"],
    select:not([multiple]):not([size]), textarea,
    .form-control, .field-control, .cv-input, .cv-select, .cv-textarea
):not(.cv-select-native):not(.cv-file-native):not([inputmode="search"]):not(.cv-search-field-v2__input):focus-visible {
    border-color: var(--cv-control-focus) !important;
    box-shadow: 0 0 0 3px var(--cv-control-focus-ring) !important;
}
body.shell-page .shell-main textarea,
body.shell-page .shell-main .cv-textarea {
    min-height: 96px !important;
    resize: vertical;
}
body.shell-page .shell-main :is(input, textarea)::placeholder {
    color: var(--cv-text-muted) !important;
    opacity: .9 !important;
}
body.shell-page .shell-main :is(input, select, textarea)[aria-invalid="true"],
body.shell-page .shell-main :is(input, select, textarea).is-invalid,
body.shell-page .shell-main .cv-field.is-invalid :is(input, select, textarea),
body.shell-page .shell-main .form-field.is-invalid :is(input, select, textarea) {
    border-color: var(--cv-danger) !important;
    box-shadow: 0 0 0 3px var(--cv-danger-soft) !important;
}
body.shell-page .shell-main :is(input, select, textarea):disabled,
body.shell-page .shell-main :is(input, textarea)[readonly] {
    background: var(--cv-control-disabled-bg) !important;
    color: var(--cv-text-dim) !important;
    opacity: 1 !important;
    cursor: not-allowed;
}
body.shell-page .shell-main :is(.cv-field, .form-field, .f-field, .field, .settings-field) > :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
    select, textarea, .cv-select-control, .cv-file-control
) { width: 100% !important; }
body.shell-page .shell-main .cv-select-native,
body.shell-page .shell-main .cv-file-native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
body.shell-page .shell-main :is(
    .cv-control-button, .cv-btn, .cv-btn-primary, .cv-btn-secondary,
    .cv-btn-ghost, .cv-btn-tertiary, .cv-btn-danger,
    .cv-action-primary, .cv-action-secondary, .cv-action-tertiary, .cv-action-danger,
    .cv-empty-btn, .toolbar-btn
) {
    border-radius: var(--cv-control-radius) !important;
    box-shadow: none !important;
}
body.shell-page .shell-main input[type="checkbox"]:not(.cv-toggle input),
body.shell-page .shell-main input[type="radio"] {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    accent-color: var(--cv-accent) !important;
}
@media (max-width: 720px) {
    body.shell-page .shell-main :is(
        input:not([type]), input[type="text"], input[type="email"], input[type="password"],
        input[type="number"], input[type="url"], input[type="tel"],
        input[type="date"], input[type="time"], input[type="month"],
        input[type="week"], input[type="datetime-local"], input[type="search"],
        select:not([multiple]):not([size]), textarea,
        .form-control, .field-control, .cv-input, .cv-select, .cv-textarea
    ):not(.cv-select-native):not(.cv-file-native) {
        width: 100% !important;
    }
}


/* Authenticated shell geometry uses the same Shape contract. This final
   shared projection outranks legacy shell.css numeric radii without making
   Theme Pack identity part of shell component behavior. Scrollbar thumbs
   remain a semantic round exception. */
html body.shell-page .shell-sidebar .shell-search {
    border-radius: var(--cv-control-radius) !important;
}
html body.shell-page .shell-nav-section--toggle[class] {
    border-radius: var(--cv-control-radius) !important;
}
html body.shell-page .shell-nav-group .shell-nav-item[class] {
    border-radius: var(--cv-control-radius) !important;
}
@media (min-width: 901px) {
    html body.shell-page .shell-nav-group.flyout-open {
        border-radius: var(--cv-surface-radius) !important;
    }
}
/* CLEARVIEW_THEME_AUTHORITY_PHASE1_END */

/* CLEARVIEW_THEME_AUTHORITY_FULL_BROWSER_SHARED_CORRECTIVE_START
   Shared shell, application-frame, and Vision controls consume the same
   Shape and palette authorities as authenticated route content. Theme Pack
   identity is intentionally absent from component selectors. */
html body.shell-page :is(
    .shell-icon-btn,
    .shell-user-btn,
    .shell-chat-trigger,
    .cv-ntoggle,
    .cv-appbar-search,
    .cv-appbar-page-help,
    .cv-appbar-date-trigger,
    .cv-header-weather-trigger,
    .cv-appbar-create,
    .cv-appbar-mobile-menu,
    .cv-appbar-attention,
    .cv-header-notification-close,
    .cv-header-notification-back,
    .cv-header-notification-step button,
    .cv-header-notification-open,
    .cv-header-notification-view-all,
    .cv-appbar-search-result,
    .cv-appbar-date-panel-head button,
    .cv-appbar-date-quick button,
    .cv-appbar-date-field-row button,
    .cv-appbar-date-field-row input,
    .cv-appbar-date-day,
    .cv-appbar-create-item,
    .cvcmd-item,
    #cvHeaderWeather .cv-header-weather-close,
    #cvHeaderWeather .cv-header-weather-actions button,
    .vd-hd-mark,
    .vd-hd-btn,
    .vd-textarea,
    .vd-send
) {
    border-radius: var(--cv-control-radius) !important;
}

html body.shell-page :is(
    .cv-header-notification-panel,
    .cv-appbar-search-results,
    .cv-appbar-date-panel,
    .cv-appbar-create-menu,
    .cvcmd-box,
    .cv-frame-busy-card,
    .cv-frame-error-panel,
    #cvHeaderWeather .cv-header-weather-panel,
    #cvHeaderWeather .cv-header-weather-current,
    .vd-msg
) {
    border-radius: var(--cv-surface-radius) !important;
}

html body.shell-page :is(
    .cv-appbar-create,
    .vd-hd-mark,
    .vd-send,
    .vd-msg.user
) {
    background: var(--cv-accent) !important;
    border-color: var(--cv-accent) !important;
    color: var(--cv-accent-ink) !important;
}

html body.shell-page .shell-sidebar {
    --shell-fg: var(--cv-shell-fg) !important;
    --shell-fg-dim: var(--cv-shell-fg-dim) !important;
    --shell-accent: var(--cv-accent) !important;
}

html body.shell-page .shell-nav-section--toggle:hover,
html body.shell-page .shell-nav-section--toggle.flyout-active,
html body.shell-page .shell-nav-section--toggle.has-active,
html body.shell-page .shell-nav-group .shell-nav-item:hover,
html body.shell-page .shell-nav-group .shell-nav-item.is-active {
    background: var(--cv-accent-soft) !important;
    border-color: color-mix(in srgb, var(--cv-accent) 28%, transparent) !important;
    color: var(--cv-text) !important;
}

html body.shell-page .shell-nav-group .shell-nav-item.is-active .shell-nav-icon,
html body.shell-page .shell-nav-section--toggle.flyout-active .shell-nav-icon,
html body.shell-page .shell-nav-section--toggle.has-active .shell-nav-icon {
    color: var(--cv-accent) !important;
}
/* CLEARVIEW_THEME_AUTHORITY_FULL_BROWSER_SHARED_CORRECTIVE_END */

/* ═══════════════════════════════════════════════════════════════════════════
   THEME AUTHORITY PHASE 3 R4 — CUSTOM CONTROL TEXT + DANGER CONTRAST
   Keep generated custom-control values under the shared control authority even
   when the control is nested inside a form label. The earlier legacy label-span
   bridge is intentionally left intact for actual field captions.
   ═══════════════════════════════════════════════════════════════════════════ */
body.shell-page .cv-select-trigger .cv-select-value,
body.shell-page .cv-multiselect-trigger .cv-multiselect-value,
body.shell-page .cv-temporal-trigger .cv-temporal-value {
    font-family: var(--cv-font-body) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    line-height: 1.35 !important;
    text-transform: none !important;
    color: var(--cv-text) !important;
}

body.shell-page .cv-multiselect-trigger .cv-multiselect-value.is-placeholder,
body.shell-page .cv-temporal-trigger .cv-temporal-value.is-placeholder {
    color: var(--cv-text-dim) !important;
}

/* Light-mode danger controls retain semantic danger text/border while using
   the shared surface token for the control fill so text contrast clears the
   shared browser acceptance floor without introducing a route color. */
html.theme-light body.shell-page .cv-btn-danger {
    background: var(--cv-surface) !important;
    color: var(--cv-danger) !important;
    border-color: var(--cv-danger) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   THEME AUTHORITY PHASE 3 R6 — FINAL LIGHT DANGER CONTROL AUTHORITY
   Match the high-specificity shared danger-control selector so Classic Light
   cannot fall back to the translucent danger fill. This remains centralized,
   token-driven, and applies to semantic danger controls without route edits.
   ═══════════════════════════════════════════════════════════════════════════ */
html.theme-light body.shell-page .shell-main :is(a,button).cv-btn-danger:not(:disabled):not(.disabled),
html.theme-light body.shell-page .shell-main :is(a,button).btn-danger:not(:disabled):not(.disabled),
html.theme-light body.shell-page .shell-main :is(a,button).button-danger:not(:disabled):not(.disabled),
html.theme-light body.shell-page .shell-main :is(a,button).cv-books-action-link--danger,
html.theme-light body.shell-page .shell-main :is(a,button)[data-tone="danger"]:not(:disabled):not(.disabled),
html.theme-light body.shell-page .shell-main :is(a,button).is-danger:not(:disabled):not(.disabled) {
    background: var(--cv-surface) !important;
    border-color: var(--cv-danger) !important;
    color: var(--cv-danger) !important;
    opacity: 1 !important;
}

/* CLEARVIEW_SYSTEMWIDE_DECORATIVE_ACCENT_CLEANUP_PHASE5
   Decorative accent rails, strips and active-tab underlines are removed from
   authenticated desktop presentation. Selected controls remain clear through
   neutral theme-token backgrounds, text weight and ordinary borders.

   Protected semantic color authorities are intentionally excluded:
   status, priority, severity, warning, success, danger, record-state,
   job-row state rails, map markers, charts and other data visualizations. */
body.shell-page .shell-main .cv-ui-pagehead {
    border-left: 0 !important;
}
body.shell-page .shell-main :is(.cv-card--accent,.cv-kpi,.stat-card,.admin-stats .stat-card,.cv-ui-metric) {
    border-top-color: var(--cv-border) !important;
}
@media (max-width: 720px) {
    body.shell-page .shell-main .cv-kpi {
        border-left-color: var(--cv-border) !important;
    }
}
body.shell-page .shell-main :is(
    .cv-tab,.tab-item,.otab,.cma-tab,.lr-tab,.rtab,.qi-tabs a,
    .tc-tabs a,.apc-tabs a,.arc-tabs a,.pr-tabs a,
    .cv-books-tab,.cv-books-subtab
).active,
body.shell-page .shell-main :is(
    .cv-tab,.tab-item,.otab,.cma-tab,.lr-tab,.rtab,.qi-tabs a,
    .tc-tabs a,.apc-tabs a,.arc-tabs a,.pr-tabs a,
    .cv-books-tab,.cv-books-subtab
).is-active,
body.shell-page .shell-main :is(
    .cv-tab,.tab-item,.otab,.cma-tab,.lr-tab,.rtab,.qi-tabs a,
    .tc-tabs a,.apc-tabs a,.arc-tabs a,.pr-tabs a,
    .cv-books-tab,.cv-books-subtab
)[aria-selected="true"] {
    color: var(--cv-text) !important;
    border-bottom-color: transparent !important;
    box-shadow: none !important;
    background: transparent !important;
    font-weight: 800 !important;
}
html body.shell-page .shell-nav-section--toggle.flyout-active,
html body.shell-page .shell-nav-section--toggle.has-active,
html body.shell-page .shell-nav-group .shell-nav-item.is-active {
    background: transparent !important;
    border-color: transparent !important;
    color: var(--cv-text) !important;
    box-shadow: none !important;
    font-weight: 700 !important;
}
html body.shell-page .shell-nav-group .shell-nav-item.is-active .shell-nav-icon,
html body.shell-page .shell-nav-section--toggle.flyout-active .shell-nav-icon,
html body.shell-page .shell-nav-section--toggle.has-active .shell-nav-icon {
    color: currentColor !important;
}
/* Dense admin list selections use neutral selection treatment instead of a
   decorative accent edge. These selectors intentionally do not target job,
   ticket, status, priority or data-visualization rows. */
body.shell-page .shell-main :is(
    .cvta-list-item,.cvlp-list-item,.cvpm-list-item,.vo-view-group-trigger
).is-active,
body.shell-page .shell-main .vo-view-group.is-active .vo-view-group-trigger,
body.shell-page .shell-main .vo-view-group.is-open .vo-view-group-trigger {
    background: transparent !important;
    border-color: var(--cv-border) !important;
    color: var(--cv-text) !important;
    box-shadow: none !important;
}

/* CLEARVIEW_THEME_AUTHORITY_PHASE5_R2_SYSTEMWIDE_DECORATIVE_HIGHLIGHT_CLOSURE_START
   Removes decorative accent rails and underlines from authenticated desktop
   chrome. Business-state color remains owned by status, priority, severity,
   record-state, map and visualization components. */

/* Page identity/header panels keep an ordinary neutral border. Decorative
   accent rails and pseudo-strips are not part of the page identity. */
html body.shell-page .shell-main .cv-ui-pagehead,
html body.shell-page .shell-main > :is(.head,.page-head,.page-header,.cv-head) {
    border-left: 0 !important;
    box-shadow: none !important;
}
html body.shell-page .shell-main .cv-ui-pagehead::before,
html body.shell-page .shell-main .cv-ui-pagehead::after,
html body.shell-page .shell-main > :is(.head,.page-head,.page-header,.cv-head)::before,
html body.shell-page .shell-main > :is(.head,.page-head,.page-header,.cv-head)::after {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Shared and route-named tab strips use a neutral selected state. This covers
   the common cv-ui marker plus existing *-tabs/*-tabbar naming contracts. */
html body.shell-page .shell-main :is(
    .cv-ui-tabs, .cvwq-viewbar,
    [role="tablist"],
    [class$="-tabs"], [class*="-tabs "],
    [class$="-tabbar"], [class*="-tabbar "],
    [class$="-tab-bar"], [class*="-tab-bar "],
    [class$="-tabs-bar"], [class*="-tabs-bar "]
) > :is(.active,.is-active,[aria-selected="true"],[aria-current="page"],[aria-pressed="true"]),
html body.shell-page .shell-main :is(
    .cv-ui-tabs, .cvwq-viewbar,
    [role="tablist"],
    [class$="-tabs"], [class*="-tabs "],
    [class$="-tabbar"], [class*="-tabbar "],
    [class$="-tab-bar"], [class*="-tab-bar "],
    [class$="-tabs-bar"], [class*="-tabs-bar "]
) > .active > :is(a,button,[role="tab"]),
html body.shell-page .shell-main :is(
    .cv-ui-tabs, .cvwq-viewbar,
    [role="tablist"],
    [class$="-tabs"], [class*="-tabs "],
    [class$="-tabbar"], [class*="-tabbar "],
    [class$="-tab-bar"], [class*="-tab-bar "],
    [class$="-tabs-bar"], [class*="-tabs-bar "]
) > .is-active > :is(a,button,[role="tab"]) {
    border-bottom-color: transparent !important;
    box-shadow: none !important;
    background: var(--cv-surface2) !important;
    color: var(--cv-text) !important;
    text-decoration: none !important;
}
html body.shell-page .shell-main :is(
    .cv-ui-tabs, .cvwq-viewbar,
    [role="tablist"],
    [class$="-tabs"], [class*="-tabs "],
    [class$="-tabbar"], [class*="-tabbar "],
    [class$="-tab-bar"], [class*="-tab-bar "],
    [class$="-tabs-bar"], [class*="-tabs-bar "]
) > :is(.active,.is-active,[aria-selected="true"],[aria-current="page"],[aria-pressed="true"])::before,
html body.shell-page .shell-main :is(
    .cv-ui-tabs, .cvwq-viewbar,
    [role="tablist"],
    [class$="-tabs"], [class*="-tabs "],
    [class$="-tabbar"], [class*="-tabbar "],
    [class$="-tab-bar"], [class*="-tab-bar "],
    [class$="-tabs-bar"], [class*="-tabs-bar "]
) > :is(.active,.is-active,[aria-selected="true"],[aria-current="page"],[aria-pressed="true"])::after,
html body.shell-page .shell-main :is(
    .cv-ui-tabs, .cvwq-viewbar,
    [role="tablist"],
    [class$="-tabs"], [class*="-tabs "],
    [class$="-tabbar"], [class*="-tabbar "],
    [class$="-tab-bar"], [class*="-tab-bar "],
    [class$="-tabs-bar"], [class*="-tabs-bar "]
) > :is(.active,.is-active) > :is(a,button,[role="tab"])::before,
html body.shell-page .shell-main :is(
    .cv-ui-tabs, .cvwq-viewbar,
    [role="tablist"],
    [class$="-tabs"], [class*="-tabs "],
    [class$="-tabbar"], [class*="-tabbar "],
    [class$="-tab-bar"], [class*="-tab-bar "],
    [class$="-tabs-bar"], [class*="-tabs-bar "]
) > :is(.active,.is-active) > :is(a,button,[role="tab"])::after {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Sidebar selection stays readable through neutral fill and text weight. No
   accent edge, inset rail or decorative pseudo-marker remains. */
html body.shell-page .shell-sidebar :is(
    .shell-nav-section--toggle.flyout-active,
    .shell-nav-section--toggle.has-active,
    .shell-nav-item.is-active,
    .shell-nav-item[aria-current="page"]
) {
    border-left: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    color: var(--cv-text) !important;
    font-weight: 700 !important;
}
html body.shell-page .shell-sidebar :is(
    .shell-nav-section--toggle.flyout-active,
    .shell-nav-section--toggle.has-active,
    .shell-nav-item.is-active,
    .shell-nav-item[aria-current="page"]
)::before,
html body.shell-page .shell-sidebar :is(
    .shell-nav-section--toggle.flyout-active,
    .shell-nav-section--toggle.has-active,
    .shell-nav-item.is-active,
    .shell-nav-item[aria-current="page"]
)::after {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
html body.shell-page .shell-sidebar :is(
    .shell-nav-section--toggle.flyout-active,
    .shell-nav-section--toggle.has-active,
    .shell-nav-item.is-active,
    .shell-nav-item[aria-current="page"]
) .shell-nav-icon {
    color: currentColor !important;
}

/* Compact filter labels may identify a filter group, but do not get an accent
   rail or accent wash. */
html body.shell-page .shell-main :is(
    .cv-ui-filterbar,.filterbar,.filter-bar,.filters-bar,.filter-row,
    .cv-followup-filterbar,[class$="-filterbar"],[class*="-filterbar "]
) > :is(
    .cv-followup-filter-title,.filter-title,
    [class$="-filter-title"],[class*="-filter-title "]
) {
    border-left: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    color: var(--cv-text-dim) !important;
}

/* Full-height secondary workspace rails are separated by layout and surface
   contrast, not by decorative edge lines. */
html body.shell-page .shell-main :is([class$="-left-rail"],[class*="-left-rail "]) {
    border-right: 0 !important;
    box-shadow: none !important;
}
html body.shell-page .shell-main :is([class$="-right-rail"],[class*="-right-rail "]) {
    border-left: 0 !important;
    box-shadow: none !important;
}

/* Explicit accent-card classes keep ordinary border geometry without an
   accent strip. Semantic warning/success/danger/status classes are excluded. */
html body.shell-page .shell-main :is(
    .cv-card--accent,.cv-ui-card.is-accent,.card.is-accent,.panel.is-accent,
    [class$="-card--accent"],[class*="-card--accent "]
):not(.is-warning):not(.is-warn):not(.is-danger):not(.is-error):not(.is-success):not(.is-info):not([data-status]):not([data-priority]):not([data-severity]):not([data-state]) {
    border-top-color: var(--cv-border) !important;
    border-left-color: var(--cv-border) !important;
    box-shadow: none !important;
}

/* Known dense-admin selection components keep neutral selection without
   an inset accent edge. Record-state rows are not part of these classes. */
html body.shell-page .shell-main :is(
    .cvta-list-item,.cvlp-list-item,.cvpm-list-item,.vo-view-group-trigger
):is(.active,.is-active,[aria-selected="true"]),
html body.shell-page .shell-main .vo-view-group:is(.is-active,.is-open) > .vo-view-group-trigger {
    border-left: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    color: var(--cv-text) !important;
    font-weight: 700 !important;
}
html body.shell-page .shell-main :is(
    .cvta-list-item,.cvlp-list-item,.cvpm-list-item,.vo-view-group-trigger
):is(.active,.is-active,[aria-selected="true"])::before,
html body.shell-page .shell-main :is(
    .cvta-list-item,.cvlp-list-item,.cvpm-list-item,.vo-view-group-trigger
):is(.active,.is-active,[aria-selected="true"])::after {
    content: none !important;
    display: none !important;
    box-shadow: none !important;
}

/* CLEARVIEW_THEME_AUTHORITY_PHASE5_R2_SYSTEMWIDE_DECORATIVE_HIGHLIGHT_CLOSURE_END */

/* CLEARVIEW_THEME_AUTHORITY_FINAL_DECORATIVE_EDGE_FIREWALL_START
   Exact screenshot corrective authority.

   The user-requested presentation rule is literal: decorative page-head rails,
   active-tab bars/fills, active-sidebar rails/fills, the full-height sidebar
   divider, informational edge strips and selected-list rails are removed, not
   recolored. Active state remains readable by text weight only.

   Semantic record/business-state color is explicitly preserved: job state bars,
   ticket state, warning/error/success/danger, priority/severity/status/risk,
   pinned/expired announcement state, calendar/map/timeline event geometry and
   charts remain outside the destructive scope. */

/* The full-height sidebar divider in the screenshot is not an active-state marker. */
html body.shell-page .shell-sidebar {
    border-right: 0 !important;
    box-shadow: none !important;
}

/* Page identity/header accent rail: remove the edge itself. */
html body.shell-page .shell-main :is(
    .cv-ui-pagehead,
    .head,.page-head,.page-header,.cv-head,
    [class$="-head"],[class*="-head "],
    [class$="-header"],[class*="-header "]
) {
    border-left: 0 !important;
    box-shadow: none !important;
}
html body.shell-page .shell-main :is(
    .cv-ui-pagehead,.head,.page-head,.page-header,.cv-head
)::before,
html body.shell-page .shell-main :is(
    .cv-ui-pagehead,.head,.page-head,.page-header,.cv-head
)::after {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Active sidebar navigation: no rail and no colored/neutral highlight wash. */
html body.shell-page .shell-sidebar :is(
    .shell-nav-section--toggle.flyout-active,
    .shell-nav-section--toggle.has-active,
    .shell-nav-item.is-active,
    .shell-nav-item[aria-current="page"]
) {
    border-left: 0 !important;
    border-color: transparent !important;
    box-shadow: none !important;
    background: transparent !important;
    color: var(--cv-text) !important;
    font-weight: 700 !important;
}
html body.shell-page .shell-sidebar :is(
    .shell-nav-section--toggle.flyout-active,
    .shell-nav-section--toggle.has-active,
    .shell-nav-item.is-active,
    .shell-nav-item[aria-current="page"]
)::before,
html body.shell-page .shell-sidebar :is(
    .shell-nav-section--toggle.flyout-active,
    .shell-nav-section--toggle.has-active,
    .shell-nav-item.is-active,
    .shell-nav-item[aria-current="page"]
)::after {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
html body.shell-page .shell-sidebar :is(
    .shell-nav-section--toggle.flyout-active,
    .shell-nav-section--toggle.has-active,
    .shell-nav-item.is-active,
    .shell-nav-item[aria-current="page"]
) .shell-nav-icon {
    color: currentColor !important;
}

/* Active tabs: no underline, pseudo strip, or selection fill. */
html body.shell-page .shell-main :is(
    .tabs,.cv-tabs,.cv-ui-tabs,.cvwq-viewbar,[role="tablist"],
    [class$="-tabs"],[class*="-tabs "],
    [class$="-tabbar"],[class*="-tabbar "],
    [class$="-tab-bar"],[class*="-tab-bar "],
    [class$="-tabs-bar"],[class*="-tabs-bar "]
) > :is(.active,.is-active,[aria-selected="true"],[aria-current="page"],[aria-pressed="true"]) {
    border-bottom-color: transparent !important;
    box-shadow: none !important;
    background: transparent !important;
    color: var(--cv-text) !important;
    text-decoration: none !important;
    font-weight: 800 !important;
}
html body.shell-page .shell-main :is(
    .tabs,.cv-tabs,.cv-ui-tabs,.cvwq-viewbar,[role="tablist"],
    [class$="-tabs"],[class*="-tabs "],
    [class$="-tabbar"],[class*="-tabbar "],
    [class$="-tab-bar"],[class*="-tab-bar "],
    [class$="-tabs-bar"],[class*="-tabs-bar "]
) > :is(.active,.is-active,[aria-selected="true"],[aria-current="page"],[aria-pressed="true"])::before,
html body.shell-page .shell-main :is(
    .tabs,.cv-tabs,.cv-ui-tabs,.cvwq-viewbar,[role="tablist"],
    [class$="-tabs"],[class*="-tabs "],
    [class$="-tabbar"],[class*="-tabbar "],
    [class$="-tab-bar"],[class*="-tab-bar "],
    [class$="-tabs-bar"],[class*="-tabs-bar "]
) > :is(.active,.is-active,[aria-selected="true"],[aria-current="page"],[aria-pressed="true"])::after {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Informational labels/callouts lose decorative edge bars. Semantic states are excluded. */
html body.shell-page .shell-main :is(
    .cv-followup-filter-title,.filter-title,
    [class$="-filter-title"],[class*="-filter-title "],
    [class$="-note"],[class*="-note "],
    [class$="-source"],[class*="-source "],
    [class$="-guidance"],[class*="-guidance "],
    [class$="-summary"],[class*="-summary "],
    [class$="-callout"],[class*="-callout "],
    [class$="-banner"],[class*="-banner "]
):not(.danger):not(.warn):not(.warning):not(.error):not(.success):not(.critical):not(.blocking):not(.attention):not(.is-error):not(.is-overdue):not([data-status]):not([data-priority]):not([data-severity]):not([data-state]):not([data-risk]):not([class*="-danger"]):not([class*="-warning"]):not([class*="-error"]):not([class*="-success"]):not([class*="-critical"]):not([class*="-risk"]):not([class*="-priority"]):not([class*="-severity"]):not([class*="-status"]):not([class*="-state"]) {
    border-left: 0 !important;
    box-shadow: none !important;
}
html body.shell-page .shell-main :is(
    .cv-followup-filter-title,.filter-title,
    [class$="-filter-title"],[class*="-filter-title "]
) {
    background: transparent !important;
    color: var(--cv-text-dim) !important;
}

/* Non-semantic selected lists/cards use text weight only, not rails/washes. */
html body.shell-page .shell-main :is(
    .item,[class$="-item"],[class*="-item "],
    [class$="-thread"],[class*="-thread "],
    [class$="-card"],[class*="-card "]
):is(.active,.is-active,.sel,.selected,[aria-selected="true"],[aria-current="page"]):not(.cvwq-job-status):not(.ticket-card):not(.ann-card):not(.danger):not(.warn):not(.warning):not(.error):not(.success):not(.critical):not(.blocking):not(.attention):not(.is-error):not(.is-overdue):not([data-status]):not([data-priority]):not([data-severity]):not([data-state]):not([data-risk]) {
    border-left: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    color: var(--cv-text) !important;
    font-weight: 700 !important;
}

/* Full-height secondary workspace dividers are not decorative selection/status. */
html body.shell-page .shell-main :is([class$="-left-rail"],[class*="-left-rail "]) {
    border-right: 0 !important;
    box-shadow: none !important;
}
html body.shell-page .shell-main :is([class$="-right-rail"],[class*="-right-rail "]) {
    border-left: 0 !important;
    box-shadow: none !important;
}

/* Generic accent-card strips are decorative. Semantic status modifiers stay outside. */
html body.shell-page .shell-main :is(
    .cv-card--accent,.cv-ui-card.is-accent,.card.is-accent,.panel.is-accent,
    [class$="-card--accent"],[class*="-card--accent "]
):not(.is-warning):not(.is-warn):not(.is-danger):not(.is-error):not(.is-success):not(.is-info):not([data-status]):not([data-priority]):not([data-severity]):not([data-state]) {
    border-top-color: var(--cv-border) !important;
    border-left-color: var(--cv-border) !important;
    box-shadow: none !important;
}

/* Shared metrics keep ordinary border geometry. Semantic metric states keep color. */
html body.shell-page .shell-main :is(.cv-kpi,.stat-card,.cv-ui-metric,.cv-books-kpi) {
    border-top-width: 1px !important;
    border-top-color: var(--cv-border) !important;
}
html body.shell-page .shell-main :is(.cv-books-kpi--success) { border-top-color: var(--cv-success) !important; }
html body.shell-page .shell-main :is(.cv-books-kpi--warn) { border-top-color: var(--cv-warn) !important; }
html body.shell-page .shell-main :is(.cv-books-kpi--danger) { border-top-color: var(--cv-danger) !important; }

/* CLEARVIEW_THEME_AUTHORITY_FINAL_DECORATIVE_EDGE_FIREWALL_END */


/* CLEARVIEW_SHARED_DESIGN_AUTHORITY_RUNTIME_CLOSURE_R6_START
   Authenticated desktop visual authority closure.

   Contract:
   - assets/css/cv-system.css owns shared shell/theme presentation.
   - shell-sidebar.js, shell-pins.js and shell-sidebar-enhance.js own behavior only.
   - cv-application-frame.css owns frame geometry only.
   - route styles may own domain layout, but persistent shell appearance and the
     decorative-highlight firewall remain authoritative here.
   - semantic business state color remains outside the destructive selectors. */

/* Shared shell surface and non-semantic context label. */
html body.shell-page .shell-sidebar {
    background: var(--cv-surface) !important;
    border-right: 0 !important;
    box-shadow: none !important;
}
html body.shell-page .shell-sidebar .shell-nav-view-mode-indicator {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--cv-shell-section) !important;
}
html body.shell-page .shell-sidebar .shell-nav-view-mode-indicator::before,
html body.shell-page .shell-sidebar .shell-nav-view-mode-indicator::after {
    content: none !important;
    display: none !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Shared sidebar hover is temporary neutral interaction feedback. */
html body.shell-page .shell-sidebar :is(
    a.shell-nav-item,
    .shell-nav-section--toggle
):hover {
    background: var(--cv-surface2) !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: var(--cv-text) !important;
}

/* Persistent current/active navigation has no decorative rail, underline or fill. */
html body.shell-page .shell-sidebar :is(
    a.shell-nav-item.is-active,
    a.shell-nav-item[aria-current="page"],
    .shell-nav-section--toggle.has-active,
    .shell-nav-section--toggle.flyout-active
) {
    background: transparent !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-top-color: transparent !important;
    border-bottom-color: transparent !important;
    box-shadow: none !important;
    color: var(--cv-text) !important;
    font-weight: 700 !important;
}
html body.shell-page .shell-sidebar :is(
    a.shell-nav-item.is-active,
    a.shell-nav-item[aria-current="page"],
    .shell-nav-section--toggle.has-active,
    .shell-nav-section--toggle.flyout-active
)::before,
html body.shell-page .shell-sidebar :is(
    a.shell-nav-item.is-active,
    a.shell-nav-item[aria-current="page"],
    .shell-nav-section--toggle.has-active,
    .shell-nav-section--toggle.flyout-active
)::after {
    content: none !important;
    display: none !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
html.shell-collapsed body.shell-page .shell-sidebar :is(
    a.shell-nav-item.is-active,
    a.shell-nav-item[aria-current="page"],
    .shell-nav-section--toggle.has-active,
    .shell-nav-section--toggle.flyout-active
) {
    border-bottom: 0 !important;
}

/* Flyout layout/presentation moved out of shell-sidebar.js. */
html body.shell-page .shell-sidebar .shell-nav-group {
    display: none !important;
    position: fixed;
    z-index: 250;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: min(680px, calc(100vh - 28px));
    min-width: 320px;
    width: min(360px, calc(100vw - 96px));
    padding: 10px 0 12px !important;
    background: var(--cv-surface) !important;
    border: 1px solid var(--cv-border) !important;
    border-radius: var(--cv-surface-radius) !important;
    box-shadow: none !important;
    scrollbar-width: thin;
}
html body.shell-page .shell-sidebar .shell-nav-group.flyout-open {
    display: block !important;
    animation: cvFlyIn .15s ease-out;
}
html body.shell-page .shell-sidebar .shell-nav-group.is-collapsed:not(.flyout-open) {
    display: none !important;
}
html body.shell-page .shell-sidebar .shell-nav-group.flyout-open .shell-nav-group-inner {
    display: grid !important;
    gap: 2px !important;
    padding: 0 4px 2px !important;
}
@keyframes cvFlyIn {
    from { opacity: 0; transform: translateX(-8px); }
    to { opacity: 1; transform: translateX(0); }
}
html body.shell-page .shell-sidebar .cv-flyout-head {
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px !important;
    padding: 14px 16px 12px !important;
    background: var(--cv-surface) !important;
    border-bottom: 1px solid var(--cv-border-subtle) !important;
    color: var(--cv-text) !important;
    font-family: var(--cv-font-body) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: .01em !important;
    text-transform: none !important;
}
html body.shell-page .shell-sidebar .cv-flyout-head span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
html body.shell-page .shell-sidebar .cv-flyout-close {
    padding: 2px 4px;
    background: transparent !important;
    border: 0 !important;
    border-radius: var(--cv-control-radius) !important;
    color: var(--cv-text-dim) !important;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
}
html body.shell-page .shell-sidebar .cv-flyout-close:hover {
    background: var(--cv-surface2) !important;
    color: var(--cv-text) !important;
}
html body.shell-page .shell-sidebar .shell-nav-section--toggle {
    cursor: grab;
    transition: color .15s ease, background .15s ease, border-color .15s ease;
}
html body.shell-page .shell-sidebar .shell-nav-section--toggle .shell-nav-section-chev {
    transition: transform .2s ease;
    transform: rotate(-90deg);
}
html body.shell-page .shell-sidebar .shell-nav-section--toggle.flyout-active .shell-nav-section-chev {
    transform: rotate(0deg);
}
html body.shell-page .shell-sidebar .shell-nav-group .shell-nav-item {
    min-height: 42px !important;
    margin: 2px 10px !important;
    padding: 10px 14px !important;
    gap: 12px !important;
    border-radius: var(--cv-control-radius) !important;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}
html body.shell-page .shell-sidebar .shell-nav-group .shell-nav-icon {
    width: 22px !important;
    height: 22px !important;
    opacity: .92 !important;
}
html body.shell-page .shell-sidebar .shell-nav-group .shell-nav-label {
    padding-right: 6px !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
}
html body.shell-page .shell-sidebar .shell-nav-group .shell-badge,
html body.shell-page .shell-sidebar .shell-nav-group .shell-pill {
    margin-left: auto !important;
    align-self: center !important;
}
html body.shell-page .shell-sidebar .shell-nav-group .shell-nav-subhead {
    margin-top: 4px;
    padding: 10px 16px 4px !important;
    color: var(--cv-text-dim) !important;
    font-family: var(--cv-font-body) !important;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .01em;
    text-transform: none;
}

/* CLEARVIEW_SIDEBAR_FLYOUT_SECTIONING_V1
   Long flyouts stay one navigation level. These are visual section headings
   only, built from the current server-authorized destinations. */
html body.shell-page .shell-sidebar .shell-nav-group .cv-nav-subsection {
    margin: 10px 12px 2px !important;
    padding: 10px 4px 5px !important;
    border-top: 1px solid var(--cv-border-subtle) !important;
    color: var(--cv-text-dim) !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
}
html body.shell-page .shell-sidebar .shell-nav-group .cv-nav-subsection.is-first {
    margin-top: 2px !important;
    padding-top: 4px !important;
    border-top: 0 !important;
}
html.shell-collapsed body.shell-page .shell-sidebar .shell-nav-group.flyout-open .cv-nav-subsection {
    display: block !important;
}
html body.shell-page .shell-sidebar .shell-nav-group::-webkit-scrollbar { width: 7px; }
html body.shell-page .shell-sidebar .shell-nav-group::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--cv-shell-fg) 24%, transparent) !important;
    border-radius: 999px !important;
}
html body.shell-page .shell-sidebar .shell-nav-bottom {
    margin-top: auto !important;
    padding: 10px 6px 8px !important;
    border-top: 1px solid var(--cv-border-subtle) !important;
}
html body.shell-page .shell-sidebar .shell-nav-bottom .shell-nav-item { margin: 2px 2px !important; }
html.shell-collapsed body.shell-page .shell-sidebar .shell-nav-bottom {
    margin-top: 8px !important;
    padding: 8px 0 !important;
}
html:not(.shell-collapsed) body.shell-page .shell-sidebar .shell-nav-section--toggle .shell-badge--rollup {
    display: none !important;
}
html body.shell-page .shell-sidebar .shell-nav-section--toggle .shell-badge--rollup {
    transform: scale(.88) !important;
    opacity: .78 !important;
}
html body.shell-page .shell-sidebar .shell-nav-group .shell-pin-star { right: 8px !important; }
html body.shell-page .shell-sidebar .cv-slash { color: inherit !important; }
html body.shell-page .shell-sidebar .shell-nav-section--toggle.cv-dragging { opacity: .4; }
html body.shell-page .shell-sidebar .shell-nav-section--toggle.cv-drag-over {
    box-shadow: 0 -2px 0 0 var(--cv-accent) !important;
}

/* Favorites/pins presentation moved out of shell-pins.js. */
html body.shell-page .shell-sidebar .shell-nav-item { position: relative; }
html body.shell-page .shell-sidebar .shell-pin-star {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    padding: 5px;
    background: transparent !important;
    border: 0 !important;
    border-radius: var(--cv-control-radius) !important;
    color: var(--cv-text-dim) !important;
    cursor: pointer;
    line-height: 0;
    opacity: 0;
    transition: opacity .12s ease, color .12s ease, transform .12s ease;
}
html body.shell-page .shell-sidebar .shell-nav-item:hover .shell-pin-star,
html body.shell-page .shell-sidebar .shell-nav-item:focus-within .shell-pin-star { opacity: .7; }
html body.shell-page .shell-sidebar .shell-pin-star:hover {
    opacity: 1 !important;
    color: var(--cv-accent) !important;
    transform: translateY(-50%) scale(1.05);
}
html body.shell-page .shell-sidebar .shell-pin-star.is-on { opacity: 1; color: var(--cv-accent) !important; }
html body.shell-page .shell-sidebar .shell-pin-star.is-on svg { fill: var(--cv-accent) !important; }
html body.shell-page .shell-sidebar .shell-nav-group .shell-nav-item.has-shell-pin-star > :is(.shell-badge,.shell-pill,.cvbadge) {
    margin-right: 38px !important;
}
html.shell-collapsed body.shell-page .shell-sidebar .shell-nav-group .shell-nav-item.has-shell-pin-star > :is(.shell-badge,.shell-pill,.cvbadge) {
    margin-right: 0 !important;
}
html.shell-collapsed body.shell-page .shell-sidebar .shell-pin-star { display: none !important; }
html body.shell-page .shell-sidebar .shell-favorites { margin: 0 0 8px; }
html body.shell-page .shell-sidebar .shell-favorites:empty { display: none !important; }
html body.shell-page .shell-sidebar .shell-favorites-head { margin-top: 2px !important; }
html body.shell-page .shell-sidebar .shell-favorites-list { display: grid; gap: 2px; margin: 0 6px 8px; }
html body.shell-page .shell-sidebar .shell-favorites-list .shell-nav-item { margin: 0 !important; }
html.shell-collapsed body.shell-page .shell-sidebar .shell-favorites { display: none !important; }
html body.shell-page .shell-sidebar .cv-drag-ghost { opacity: .4; }

/* Context-menu visibility remains behavior-owned; visual state is CSS-owned. */
html body.shell-page .cv-ctx-menu[hidden] { display: none !important; }

/* Manage-hidden modal presentation moved out of shell-sidebar-enhance.js. */
html body.shell-page .cv-sidebar-hidden-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--cv-bg) 68%, transparent);
}
html body.shell-page .cv-sidebar-hidden-panel {
    width: min(400px, 90vw);
    max-height: 60vh;
    overflow-y: auto;
    padding: 20px;
    background: var(--cv-surface);
    border: 1px solid var(--cv-border);
    border-radius: var(--cv-surface-radius);
    box-shadow: none;
}
html body.shell-page .cv-sidebar-hidden-title {
    margin: 0 0 12px;
    color: var(--cv-text);
    font-size: 14px;
}
html body.shell-page .cv-sidebar-hidden-copy {
    margin: 0 0 16px;
    color: var(--cv-text-dim);
    font-size: 11px;
}
html body.shell-page .cv-sidebar-hidden-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--cv-border-subtle);
}
html body.shell-page .cv-sidebar-hidden-label {
    min-width: 0;
    color: var(--cv-text);
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
html body.shell-page .cv-sidebar-hidden-restore { flex: 0 0 auto; }
html body.shell-page .cv-sidebar-hidden-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
}

@media (max-width: 900px) {
    html body.shell-page .shell-sidebar .shell-nav-group.flyout-open {
        position: static !important;
        width: auto !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 0 8px !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        animation: none !important;
    }
    html body.shell-page .shell-sidebar .cv-flyout-head { display: none !important; }
}

/* Cascade firewall: route/body styles can load after the shared sheet on a full
   document. Important rules in this named layer outrank unlayered author
   !important declarations while leaving semantic business-state selectors alone. */
@layer cv-shared-design-authority {
    /* Persistent authenticated shell edges and context decoration. */
    html body.shell-page .shell-sidebar {
        border-right: 0 !important;
        box-shadow: none !important;
    }
    html body.shell-page .shell-sidebar .shell-nav-view-mode-indicator {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }
    html body.shell-page .shell-sidebar .shell-nav-view-mode-indicator::before,
    html body.shell-page .shell-sidebar .shell-nav-view-mode-indicator::after {
        content: none !important;
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    /* Persistent active navigation uses text weight only. */
    html body.shell-page .shell-sidebar :is(
        a.shell-nav-item.is-active,
        a.shell-nav-item[aria-current="page"],
        .shell-nav-section--toggle.has-active,
        .shell-nav-section--toggle.flyout-active
    ) {
        background: transparent !important;
        border-left: 0 !important;
        border-right: 0 !important;
        border-bottom: 0 !important;
        box-shadow: none !important;
    }
    html body.shell-page .shell-sidebar :is(
        a.shell-nav-item.is-active,
        a.shell-nav-item[aria-current="page"],
        .shell-nav-section--toggle.has-active,
        .shell-nav-section--toggle.flyout-active
    )::before,
    html body.shell-page .shell-sidebar :is(
        a.shell-nav-item.is-active,
        a.shell-nav-item[aria-current="page"],
        .shell-nav-section--toggle.has-active,
        .shell-nav-section--toggle.flyout-active
    )::after {
        content: none !important;
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    /* Page identity/header accent rails are never route-owned decoration. */
    html body.shell-page .shell-main :is(
        .cv-ui-pagehead,.head,.page-head,.page-header,.cv-head,
        [class$="-head"],[class*="-head "],
        [class$="-header"],[class*="-header "]
    ) {
        border-left: 0 !important;
        box-shadow: none !important;
    }
    html body.shell-page .shell-main :is(
        .cv-ui-pagehead,.head,.page-head,.page-header,.cv-head
    )::before,
    html body.shell-page .shell-main :is(
        .cv-ui-pagehead,.head,.page-head,.page-header,.cv-head
    )::after {
        content: none !important;
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    /* Active tabs have no underline, pseudo strip or persistent fill. */
    html body.shell-page .shell-main :is(
        .tabs,.cv-tabs,.cv-ui-tabs,.cvwq-viewbar,[role="tablist"],
        [class$="-tabs"],[class*="-tabs "],
        [class$="-tabbar"],[class*="-tabbar "],
        [class$="-tab-bar"],[class*="-tab-bar "],
        [class$="-tabs-bar"],[class*="-tabs-bar "]
    ) > :is(.active,.is-active,[aria-selected="true"],[aria-current="page"],[aria-pressed="true"]):not(.cvwq-job-status):not(.ticket-card):not(.ann-card):not(.danger):not(.warn):not(.warning):not(.error):not(.success):not(.critical):not(.blocking):not(.attention):not(.is-error):not(.is-overdue):not([data-status]):not([data-priority]):not([data-severity]):not([data-state]):not([data-risk]),
    html body.shell-page .shell-main :is(
        .tabs,.cv-tabs,.cv-ui-tabs,.cvwq-viewbar,[role="tablist"],
        [class$="-tabs"],[class*="-tabs "],
        [class$="-tabbar"],[class*="-tabbar "],
        [class$="-tab-bar"],[class*="-tab-bar "],
        [class$="-tabs-bar"],[class*="-tabs-bar "]
    ) > .active > :is(a,button,[role="tab"]):not(.danger):not(.warn):not(.warning):not(.error):not(.success):not(.critical):not([data-status]):not([data-priority]):not([data-severity]):not([data-state]):not([data-risk]),
    html body.shell-page .shell-main :is(
        .tabs,.cv-tabs,.cv-ui-tabs,.cvwq-viewbar,[role="tablist"],
        [class$="-tabs"],[class*="-tabs "],
        [class$="-tabbar"],[class*="-tabbar "],
        [class$="-tab-bar"],[class*="-tab-bar "],
        [class$="-tabs-bar"],[class*="-tabs-bar "]
    ) > .is-active > :is(a,button,[role="tab"]):not(.danger):not(.warn):not(.warning):not(.error):not(.success):not(.critical):not([data-status]):not([data-priority]):not([data-severity]):not([data-state]):not([data-risk]) {
        background: transparent !important;
        border-bottom: 0 !important;
        box-shadow: none !important;
        text-decoration: none !important;
    }
    html body.shell-page .shell-main :is(
        .tabs,.cv-tabs,.cv-ui-tabs,.cvwq-viewbar,[role="tablist"],
        [class$="-tabs"],[class*="-tabs "],
        [class$="-tabbar"],[class*="-tabbar "],
        [class$="-tab-bar"],[class*="-tab-bar "],
        [class$="-tabs-bar"],[class*="-tabs-bar "]
    ) > :is(.active,.is-active,[aria-selected="true"],[aria-current="page"],[aria-pressed="true"]):not(.cvwq-job-status):not(.ticket-card):not(.ann-card):not(.danger):not(.warn):not(.warning):not(.error):not(.success):not(.critical):not(.blocking):not(.attention):not(.is-error):not(.is-overdue):not([data-status]):not([data-priority]):not([data-severity]):not([data-state]):not([data-risk])::before,
    html body.shell-page .shell-main :is(
        .tabs,.cv-tabs,.cv-ui-tabs,.cvwq-viewbar,[role="tablist"],
        [class$="-tabs"],[class*="-tabs "],
        [class$="-tabbar"],[class*="-tabbar "],
        [class$="-tab-bar"],[class*="-tab-bar "],
        [class$="-tabs-bar"],[class*="-tabs-bar "]
    ) > :is(.active,.is-active,[aria-selected="true"],[aria-current="page"],[aria-pressed="true"]):not(.cvwq-job-status):not(.ticket-card):not(.ann-card):not(.danger):not(.warn):not(.warning):not(.error):not(.success):not(.critical):not(.blocking):not(.attention):not(.is-error):not(.is-overdue):not([data-status]):not([data-priority]):not([data-severity]):not([data-state]):not([data-risk])::after,
    html body.shell-page .shell-main :is(
        .tabs,.cv-tabs,.cv-ui-tabs,.cvwq-viewbar,[role="tablist"],
        [class$="-tabs"],[class*="-tabs "],
        [class$="-tabbar"],[class*="-tabbar "],
        [class$="-tab-bar"],[class*="-tab-bar "],
        [class$="-tabs-bar"],[class*="-tabs-bar "]
    ) > :is(.active,.is-active) > :is(a,button,[role="tab"])::before,
    html body.shell-page .shell-main :is(
        .tabs,.cv-tabs,.cv-ui-tabs,.cvwq-viewbar,[role="tablist"],
        [class$="-tabs"],[class*="-tabs "],
        [class$="-tabbar"],[class*="-tabbar "],
        [class$="-tab-bar"],[class*="-tab-bar "],
        [class$="-tabs-bar"],[class*="-tabs-bar "]
    ) > :is(.active,.is-active) > :is(a,button,[role="tab"])::after {
        content: none !important;
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    /* Non-semantic information/callout edges never become accent rails. */
    html body.shell-page .shell-main :is(
        .cv-followup-filter-title,.filter-title,
        [class$="-filter-title"],[class*="-filter-title "],
        [class$="-note"],[class*="-note "],
        [class$="-source"],[class*="-source "],
        [class$="-guidance"],[class*="-guidance "],
        [class$="-summary"],[class*="-summary "],
        [class$="-callout"],[class*="-callout "],
        [class$="-banner"],[class*="-banner "]
    ):not(.danger):not(.warn):not(.warning):not(.error):not(.success):not(.critical):not(.blocking):not(.attention):not(.is-error):not(.is-overdue):not([data-status]):not([data-priority]):not([data-severity]):not([data-state]):not([data-risk]):not([class*="-danger"]):not([class*="-warning"]):not([class*="-error"]):not([class*="-success"]):not([class*="-critical"]):not([class*="-risk"]):not([class*="-priority"]):not([class*="-severity"]):not([class*="-status"]):not([class*="-state"]) {
        border-left: 0 !important;
        box-shadow: none !important;
    }
    html body.shell-page .shell-main :is(
        .cv-followup-filter-title,.filter-title,
        [class$="-filter-title"],[class*="-filter-title "]
    ) {
        background: transparent !important;
    }

    /* Non-semantic selected rows/cards use text weight, not an accent rail/wash. */
    html body.shell-page .shell-main :is(
        .item,[class$="-item"],[class*="-item "],
        [class$="-thread"],[class*="-thread "],
        [class$="-card"],[class*="-card "]
    ):is(.active,.is-active,.sel,.selected,[aria-selected="true"],[aria-current="page"]):not(.cvwq-job-status):not(.ticket-card):not(.ann-card):not(.danger):not(.warn):not(.warning):not(.error):not(.success):not(.critical):not(.blocking):not(.attention):not(.is-error):not(.is-overdue):not([data-status]):not([data-priority]):not([data-severity]):not([data-state]):not([data-risk]) {
        border-left: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    /* Full-height secondary workspace rails use layout/surface contrast, not edge decoration. */
    html body.shell-page .shell-main :is([class$="-left-rail"],[class*="-left-rail "]) {
        border-right: 0 !important;
        box-shadow: none !important;
    }
    html body.shell-page .shell-main :is([class$="-right-rail"],[class*="-right-rail "]) {
        border-left: 0 !important;
        box-shadow: none !important;
    }

    /* Generic accent-card strips remain ordinary borders unless business state is explicit. */
    html body.shell-page .shell-main :is(
        .cv-card--accent,.cv-ui-card.is-accent,.card.is-accent,.panel.is-accent,
        [class$="-card--accent"],[class*="-card--accent "]
    ):not(.is-warning):not(.is-warn):not(.is-danger):not(.is-error):not(.is-success):not(.is-info):not([data-status]):not([data-priority]):not([data-severity]):not([data-state]) {
        border-top-color: var(--cv-border) !important;
        border-left-color: var(--cv-border) !important;
        box-shadow: none !important;
    }
}

/* CLEARVIEW_SHARED_DESIGN_AUTHORITY_RUNTIME_CLOSURE_R6_END */

/* CLEARVIEW_SHARED_DESIGN_AUTHORITY_SECONDARY_RAIL_TAB_RESIDUAL_R7_START
   Exact post-R6 corrective. Secondary workspace rails are structural panes, not
   highlighted surfaces. Persistent active tabs use text weight only. Calendar
   today/event/state presentation remains outside this boundary. */
@layer cv-shared-design-authority {
    /* Full-height secondary workspace rails use the same ordinary workspace
       surface. This removes residual rail washes such as Calendar's left pane
       without changing rail layout, scrolling, controls or semantic content. */
    html body.shell-page .shell-main :is(
        [class$="-left-rail"],[class*="-left-rail "],
        [class$="-right-rail"],[class*="-right-rail "]
    ) {
        background: var(--cv-surface) !important;
        box-shadow: none !important;
    }

    /* Persistent selected tabs must not retain a visible selected box after
       the shared active-tab fill/underline firewall. Preserve geometry to
       avoid layout movement, but make the selected edge fully transparent. */
    html body.shell-page .shell-main :is(
        .tabs,.cv-tabs,.cv-ui-tabs,.cvwq-viewbar,[role="tablist"],
        [class$="-tabs"],[class*="-tabs "],
        [class$="-tabbar"],[class*="-tabbar "],
        [class$="-tab-bar"],[class*="-tab-bar "],
        [class$="-tabs-bar"],[class*="-tabs-bar "]
    ) > :is(.active,.is-active,[aria-selected="true"],[aria-current="page"],[aria-pressed="true"]):not(.cvwq-job-status):not(.ticket-card):not(.ann-card):not(.danger):not(.warn):not(.warning):not(.error):not(.success):not(.critical):not(.blocking):not(.attention):not(.is-error):not(.is-overdue):not([data-status]):not([data-priority]):not([data-severity]):not([data-state]):not([data-risk]),
    html body.shell-page .shell-main :is(
        .tabs,.cv-tabs,.cv-ui-tabs,.cvwq-viewbar,[role="tablist"],
        [class$="-tabs"],[class*="-tabs "],
        [class$="-tabbar"],[class*="-tabbar "],
        [class$="-tab-bar"],[class*="-tab-bar "],
        [class$="-tabs-bar"],[class*="-tabs-bar "]
    ) > :is(.active,.is-active) > :is(a,button,[role="tab"]):not(.danger):not(.warn):not(.warning):not(.error):not(.success):not(.critical):not([data-status]):not([data-priority]):not([data-severity]):not([data-state]):not([data-risk]) {
        background: transparent !important;
        border-color: transparent !important;
        box-shadow: none !important;
        text-decoration: none !important;
    }
}
/* CLEARVIEW_SHARED_DESIGN_AUTHORITY_SECONDARY_RAIL_TAB_RESIDUAL_R7_END */

/* CLEARVIEW_CUSTOMER_WORKFORCE_PHASE1_FOUNDATION_START
   Shared Customer and Employee workspace presentation foundation.
   This block supplies structure only. Domain data, permissions, writers,
   route ownership, theme values and the persistent shell remain authoritative. */
@layer cv-customer-workforce-foundation {
    body.shell-page .shell-main :is(
        [data-cv-record-workspace="1"],
        [data-cv-list-workspace="1"]
    ) {
        --cv-workspace-rail-width: 228px;
        --cv-workspace-rail-collapsed-width: 56px;
        --cv-workspace-gap: var(--cv-sp-4);
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    body.shell-page .shell-main [data-cv-record-workspace="1"] {
        display: grid;
        grid-template-columns: minmax(0, var(--cv-workspace-rail-width)) minmax(0, 1fr);
        align-items: start;
        gap: var(--cv-workspace-gap);
    }

    body.shell-page .shell-main [data-cv-record-workspace="1"].is-rail-collapsed {
        grid-template-columns: var(--cv-workspace-rail-collapsed-width) minmax(0, 1fr);
    }

    body.shell-page .shell-main .cv-record-workspace-main,
    body.shell-page .shell-main .cv-list-workspace-main {
        min-width: 0;
        max-width: 100%;
    }

    body.shell-page .shell-main [data-cv-secondary-rail="1"] {
        position: sticky;
        top: calc(var(--cv-frame-height, 56px) + var(--cv-sp-3));
        display: flex;
        flex-direction: column;
        align-self: start;
        width: 100%;
        min-width: 0;
        max-height: calc(100dvh - var(--cv-frame-height, 56px) - var(--cv-sp-6));
        overflow: auto;
        background: var(--cv-surface);
        color: var(--cv-text);
        border: 0;
        border-right: 1px solid var(--cv-border);
        box-shadow: none;
        z-index: 2;
        transition: width .16s ease, transform .16s ease;
    }

    body.shell-page .shell-main .cv-secondary-rail-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--cv-sp-2);
        min-width: 0;
        padding: 0 var(--cv-sp-3) var(--cv-sp-3) 0;
        border-bottom: 1px solid var(--cv-border-subtle);
    }

    body.shell-page .shell-main .cv-secondary-rail-title {
        min-width: 0;
        margin: 0;
        color: var(--cv-text);
        font-family: var(--cv-font-display) !important;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: .05em;
        text-transform: uppercase;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.shell-page .shell-main :is(
        [data-cv-secondary-rail-toggle="1"],
        [data-cv-secondary-rail-opener="1"],
        [data-cv-secondary-rail-close="1"]
    ) {
        min-width: 32px;
        min-height: 32px;
        padding: var(--cv-sp-1) var(--cv-sp-2);
        border: 1px solid var(--cv-border);
        border-radius: var(--cv-control-radius);
        background: transparent;
        color: var(--cv-text-dim);
        font: inherit;
        cursor: pointer;
    }

    body.shell-page .shell-main :is(
        [data-cv-secondary-rail-toggle="1"],
        [data-cv-secondary-rail-opener="1"],
        [data-cv-secondary-rail-close="1"]
    ):hover,
    body.shell-page .shell-main :is(
        [data-cv-secondary-rail-toggle="1"],
        [data-cv-secondary-rail-opener="1"],
        [data-cv-secondary-rail-close="1"]
    ):focus-visible {
        background: var(--cv-surface2);
        color: var(--cv-text);
        border-color: var(--cv-border);
        outline: none;
    }

    body.shell-page .shell-main [data-cv-secondary-rail-opener="1"],
    body.shell-page .shell-main [data-cv-secondary-rail-close="1"] {
        display: none;
    }

    body.shell-page .shell-main .cv-secondary-rail-nav {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
        padding: var(--cv-sp-3) var(--cv-sp-3) var(--cv-sp-3) 0;
    }

    body.shell-page .shell-main .cv-secondary-rail-group + .cv-secondary-rail-group {
        margin-top: var(--cv-sp-3);
        padding-top: var(--cv-sp-3);
        border-top: 1px solid var(--cv-border-subtle);
    }

    body.shell-page .shell-main .cv-secondary-rail-group-label {
        display: block;
        margin: 0 0 var(--cv-sp-2);
        color: var(--cv-text-muted);
        font-family: var(--cv-font-display) !important;
        font-size: 9px;
        font-weight: 800;
        letter-spacing: .10em;
        text-transform: uppercase;
    }

    body.shell-page .shell-main .cv-secondary-rail-link {
        display: flex;
        align-items: center;
        gap: var(--cv-sp-2);
        width: 100%;
        min-width: 0;
        min-height: 34px;
        padding: var(--cv-sp-2) var(--cv-sp-3);
        border: 0;
        border-radius: var(--cv-control-radius);
        background: transparent;
        color: var(--cv-text-dim);
        font-family: var(--cv-font-body) !important;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.25;
        text-align: left;
        text-decoration: none;
        cursor: pointer;
    }

    body.shell-page .shell-main .cv-secondary-rail-link:hover,
    body.shell-page .shell-main .cv-secondary-rail-link:focus-visible {
        background: var(--cv-surface2);
        color: var(--cv-text);
        outline: none;
        text-decoration: none;
    }

    body.shell-page .shell-main .cv-secondary-rail-link:is(
        .is-active,
        [aria-current="page"],
        [aria-selected="true"]
    ) {
        background: transparent;
        color: var(--cv-text);
        font-weight: 800;
    }

    body.shell-page .shell-main .cv-secondary-rail-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        flex: 0 0 20px;
        color: currentColor;
    }

    body.shell-page .shell-main .cv-secondary-rail-icon > svg {
        width: 16px;
        height: 16px;
    }

    body.shell-page .shell-main .cv-secondary-rail-label {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.shell-page .shell-main [data-cv-record-workspace="1"].is-rail-collapsed .cv-secondary-rail-title,
    body.shell-page .shell-main [data-cv-record-workspace="1"].is-rail-collapsed .cv-secondary-rail-group-label,
    body.shell-page .shell-main [data-cv-record-workspace="1"].is-rail-collapsed .cv-secondary-rail-label,
    body.shell-page .shell-main [data-cv-record-workspace="1"].is-rail-collapsed [data-cv-rail-toggle-label] {
        display: none;
    }

    body.shell-page .shell-main [data-cv-record-workspace="1"].is-rail-collapsed .cv-secondary-rail-head,
    body.shell-page .shell-main [data-cv-record-workspace="1"].is-rail-collapsed .cv-secondary-rail-nav {
        padding-right: var(--cv-sp-2);
    }

    body.shell-page .shell-main [data-cv-record-workspace="1"].is-rail-collapsed .cv-secondary-rail-head,
    body.shell-page .shell-main [data-cv-record-workspace="1"].is-rail-collapsed .cv-secondary-rail-link {
        justify-content: center;
    }

    body.shell-page .shell-main .cv-record-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: var(--cv-sp-4);
        min-width: 0;
        padding: 0 0 var(--cv-sp-4);
        margin: 0 0 var(--cv-sp-4);
        border-bottom: 1px solid var(--cv-border);
    }

    body.shell-page .shell-main .cv-record-identity {
        display: grid;
        gap: var(--cv-sp-1);
        flex: 1 1 auto;
        min-width: 0;
    }

    body.shell-page .shell-main .cv-record-title-row {
        display: flex;
        align-items: center;
        gap: var(--cv-sp-2);
        min-width: 0;
        flex-wrap: wrap;
    }

    body.shell-page .shell-main .cv-record-title {
        min-width: 0;
        margin: 0;
        color: var(--cv-text);
        font-size: clamp(19px, 2vw, 24px);
        line-height: 1.2;
        overflow-wrap: anywhere;
    }

    body.shell-page .shell-main .cv-record-subtitle {
        margin: 0;
        color: var(--cv-text-dim);
        font-size: 13px;
        line-height: 1.45;
    }

    body.shell-page .shell-main .cv-record-meta {
        display: flex;
        align-items: center;
        gap: var(--cv-sp-2) var(--cv-sp-3);
        min-width: 0;
        flex-wrap: wrap;
        color: var(--cv-text-dim);
        font-size: 12px;
    }

    body.shell-page .shell-main .cv-record-meta-item {
        display: inline-flex;
        align-items: center;
        gap: var(--cv-sp-1);
        min-width: 0;
    }

    body.shell-page .shell-main .cv-record-actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: var(--cv-sp-2);
        flex: 0 1 auto;
        min-width: 0;
        flex-wrap: wrap;
    }

    body.shell-page .shell-main .cv-workspace-kpis {
        display: flex;
        align-items: stretch;
        gap: 0;
        min-width: 0;
        margin: 0 0 var(--cv-sp-4);
        padding: var(--cv-sp-3) 0;
        border-bottom: 1px solid var(--cv-border-subtle);
        overflow-x: auto;
        overscroll-behavior-inline: contain;
    }

    body.shell-page .shell-main .cv-workspace-kpi {
        display: grid;
        gap: 2px;
        flex: 1 0 132px;
        min-width: 0;
        padding: 0 var(--cv-sp-4);
        border-right: 1px solid var(--cv-border-subtle);
        background: transparent;
    }

    body.shell-page .shell-main .cv-workspace-kpi:first-child {
        padding-left: 0;
    }

    body.shell-page .shell-main .cv-workspace-kpi:last-child {
        border-right: 0;
    }

    body.shell-page .shell-main .cv-workspace-kpi-value {
        color: var(--cv-text);
        font-family: var(--cv-font-data) !important;
        font-size: 18px;
        font-weight: 800;
        line-height: 1.2;
        font-variant-numeric: tabular-nums;
    }

    body.shell-page .shell-main .cv-workspace-kpi-label {
        color: var(--cv-text-muted);
        font-family: var(--cv-font-display) !important;
        font-size: 9px;
        font-weight: 800;
        letter-spacing: .08em;
        text-transform: uppercase;
        white-space: nowrap;
    }

    body.shell-page .shell-main .cv-workspace-tabs {
        display: flex;
        align-items: center;
        gap: var(--cv-sp-1);
        width: 100%;
        min-width: 0;
        margin: 0 0 var(--cv-sp-4);
        padding: 0 0 var(--cv-sp-2);
        border-bottom: 1px solid var(--cv-border);
        overflow-x: auto;
        overscroll-behavior-inline: contain;
    }

    body.shell-page .shell-main .cv-workspace-tab {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--cv-sp-1);
        min-height: 34px;
        padding: var(--cv-sp-2) var(--cv-sp-3);
        border: 0;
        border-radius: var(--cv-control-radius);
        background: transparent;
        color: var(--cv-text-dim);
        font-family: var(--cv-font-body) !important;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.2;
        text-decoration: none;
        white-space: nowrap;
        cursor: pointer;
    }

    body.shell-page .shell-main .cv-workspace-tab:hover,
    body.shell-page .shell-main .cv-workspace-tab:focus-visible {
        background: var(--cv-surface2);
        color: var(--cv-text);
        outline: none;
        text-decoration: none;
    }

    body.shell-page .shell-main .cv-workspace-tab:is(.is-active,[aria-selected="true"],[aria-current="page"]) {
        background: transparent;
        color: var(--cv-text);
        font-weight: 800;
    }

    body.shell-page .shell-main .cv-data-workspace {
        width: 100%;
        min-width: 0;
        background: var(--cv-surface);
        border: 1px solid var(--cv-border);
        border-radius: var(--cv-surface-radius);
        overflow: hidden;
        box-shadow: none;
    }

    body.shell-page .shell-main .cv-data-toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--cv-sp-3);
        min-width: 0;
        padding: var(--cv-sp-3);
        border-bottom: 1px solid var(--cv-border);
        background: var(--cv-surface);
        flex-wrap: wrap;
    }

    body.shell-page .shell-main .cv-data-toolbar-group {
        display: flex;
        align-items: center;
        gap: var(--cv-sp-2);
        flex: 1 1 auto;
        min-width: 0;
        flex-wrap: wrap;
    }

    body.shell-page .shell-main .cv-data-toolbar-group--actions {
        justify-content: flex-end;
        flex: 0 1 auto;
    }

    body.shell-page .shell-main .cv-data-summary {
        color: var(--cv-text-dim);
        font-size: 12px;
        line-height: 1.4;
    }

    body.shell-page .shell-main .cv-data-table-wrap {
        width: 100%;
        min-width: 0;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
    }

    body.shell-page .shell-main .cv-data-table {
        width: 100%;
        min-width: 720px;
        border-collapse: collapse;
    }

    body.shell-page .shell-main .cv-data-table th {
        padding: var(--cv-sp-2) var(--cv-sp-3);
        border-bottom: 1px solid var(--cv-border);
        background: var(--cv-surface);
        color: var(--cv-text-muted);
        font-family: var(--cv-font-display) !important;
        font-size: 9px;
        font-weight: 800;
        letter-spacing: .08em;
        text-align: left;
        text-transform: uppercase;
        white-space: nowrap;
    }

    body.shell-page .shell-main .cv-data-table td {
        padding: 10px var(--cv-sp-3);
        border-bottom: 1px solid var(--cv-border-subtle);
        color: var(--cv-text);
        font-family: var(--cv-font-body) !important;
        font-size: 13px;
        vertical-align: middle;
    }

    body.shell-page .shell-main .cv-data-table tbody tr:last-child td {
        border-bottom: 0;
    }

    body.shell-page .shell-main .cv-data-table tbody tr:hover td,
    body.shell-page .shell-main .cv-data-table tbody tr:focus-within td {
        background: var(--cv-surface2);
    }

    body.shell-page .shell-main .cv-data-primary {
        color: var(--cv-text);
        font-weight: 700;
    }

    body.shell-page .shell-main .cv-data-secondary {
        margin-top: 2px;
        color: var(--cv-text-dim);
        font-size: 12px;
        line-height: 1.35;
    }

    body.shell-page .shell-main .cv-workspace-state {
        display: grid;
        place-items: center;
        min-height: 180px;
        padding: var(--cv-sp-8) var(--cv-sp-4);
        text-align: center;
    }

    body.shell-page .shell-main .cv-workspace-state-inner {
        display: grid;
        gap: var(--cv-sp-2);
        justify-items: center;
        max-width: 460px;
    }

    body.shell-page .shell-main .cv-workspace-state-title {
        margin: 0;
        color: var(--cv-text);
        font-size: 14px;
        font-weight: 800;
    }

    body.shell-page .shell-main .cv-workspace-state-body {
        margin: 0;
        color: var(--cv-text-dim);
        font-size: 13px;
        line-height: 1.5;
    }

    body.shell-page .shell-main .cv-workspace-state[aria-busy="true"] .cv-workspace-state-title {
        color: var(--cv-text-dim);
    }

    body.shell-page .shell-main .cv-workspace-state[data-state="error"] .cv-workspace-state-title {
        color: var(--cv-danger);
    }

    body.shell-page .shell-main .cv-workspace-action-bar {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: var(--cv-sp-2);
        min-width: 0;
        margin-top: var(--cv-sp-4);
        padding-top: var(--cv-sp-3);
        border-top: 1px solid var(--cv-border);
        flex-wrap: wrap;
    }

    body.shell-page .shell-main .cv-workspace-action-bar--between {
        justify-content: space-between;
    }

    body.shell-page .shell-main .cv-secondary-rail-backdrop {
        display: none;
    }

    @media (max-width: 900px) {
        body.shell-page .shell-main [data-cv-record-workspace="1"] {
            display: block;
        }

        body.shell-page .shell-main [data-cv-secondary-rail-opener="1"],
        body.shell-page .shell-main [data-cv-secondary-rail-close="1"] {
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        body.shell-page .shell-main [data-cv-secondary-rail="1"] {
            position: fixed;
            top: var(--cv-frame-height, 56px);
            right: auto;
            bottom: 0;
            left: 0;
            width: clamp(260px, 86vw, 320px);
            max-height: none;
            padding: var(--cv-sp-4);
            border-right: 1px solid var(--cv-border);
            transform: translateX(-100%);
            visibility: hidden;
            z-index: 250;
        }

        body.shell-page .shell-main [data-cv-record-workspace="1"].is-rail-drawer-open [data-cv-secondary-rail="1"] {
            transform: translateX(0);
            visibility: visible;
        }

        body.shell-page .shell-main [data-cv-record-workspace="1"].is-rail-drawer-open .cv-secondary-rail-backdrop {
            position: fixed;
            inset: var(--cv-frame-height, 56px) 0 0;
            display: block;
            background: color-mix(in srgb, var(--cv-bg) 72%, transparent);
            z-index: 240;
        }

        body.shell-page .shell-main [data-cv-record-workspace="1"].is-rail-collapsed .cv-secondary-rail-title,
        body.shell-page .shell-main [data-cv-record-workspace="1"].is-rail-collapsed .cv-secondary-rail-group-label,
        body.shell-page .shell-main [data-cv-record-workspace="1"].is-rail-collapsed .cv-secondary-rail-label,
        body.shell-page .shell-main [data-cv-record-workspace="1"].is-rail-collapsed [data-cv-rail-toggle-label] {
            display: initial;
        }

        body.shell-page .shell-main [data-cv-record-workspace="1"].is-rail-collapsed .cv-secondary-rail-head,
        body.shell-page .shell-main [data-cv-record-workspace="1"].is-rail-collapsed .cv-secondary-rail-link {
            justify-content: initial;
        }

        body.shell-page .shell-main .cv-record-header {
            flex-direction: column;
            align-items: stretch;
        }

        body.shell-page .shell-main .cv-record-actions,
        body.shell-page .shell-main .cv-data-toolbar-group--actions {
            justify-content: flex-start;
        }
    }

    @media (max-width: 640px) {
        body.shell-page .shell-main .cv-data-workspace {
            border-inline: 0;
        }

        body.shell-page .shell-main .cv-data-toolbar {
            align-items: stretch;
        }

        body.shell-page .shell-main .cv-data-toolbar-group,
        body.shell-page .shell-main .cv-data-toolbar-group--actions {
            width: 100%;
        }

        body.shell-page .shell-main .cv-workspace-action-bar,
        body.shell-page .shell-main .cv-workspace-action-bar--between {
            justify-content: stretch;
        }

        body.shell-page .shell-main .cv-workspace-action-bar > :is(button,a) {
            flex: 1 1 auto;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        body.shell-page .shell-main [data-cv-secondary-rail="1"] {
            transition: none;
        }
    }
}
/* CLEARVIEW_CUSTOMER_WORKFORCE_PHASE1_FOUNDATION_END */


/* CLEARVIEW_CUSTOMER_WORKFORCE_PHASE3_SECONDARY_RAIL_HIGHLIGHT_FIREWALL
   Secondary workspace navigation uses text weight only for persistent state.
   Decorative active rails, fills, pseudo strips, and shadows are prohibited. */
html body.shell-page .shell-main .cv-secondary-rail-link:is(
    .is-active,
    [aria-current="page"],
    [aria-selected="true"]
) {
    border-left: 0 !important;
    border-inline-start: 0 !important;
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--cv-text) !important;
    font-weight: 800 !important;
}
html body.shell-page .shell-main .cv-secondary-rail-link:is(
    .is-active,
    [aria-current="page"],
    [aria-selected="true"]
)::before,
html body.shell-page .shell-main .cv-secondary-rail-link:is(
    .is-active,
    [aria-current="page"],
    [aria-selected="true"]
)::after {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body.shell-page .shell-main .cv-secondary-rail-link:is(
    .is-active,
    [aria-current="page"],
    [aria-selected="true"]
):is(:hover, :focus-visible) {
    background: var(--cv-surface2) !important;
    color: var(--cv-text) !important;
}

/* CLEARVIEW_CUSTOMER_WORKFORCE_PHASE3_SECONDARY_RAIL_FIREWALL_END */


/* CLEARVIEW_CUSTOMER_WORKFORCE_PHASE4_RAIL_CARRYFORWARD_START
 * Accepted Phase 3 browser carry-forward: remove decorative count bubbles,
 * keep secondary rail content away from its boundary, and prevent the desktop
 * drawer opener from duplicating the rail's own collapse control.
 */
html body.shell-page .shell-main [data-cv-secondary-rail="1"]{
  padding:var(--cv-sp-3) !important;
  box-sizing:border-box;
}
html body.shell-page .shell-main [data-cv-secondary-rail="1"] .cv-secondary-rail-head{
  padding:0 0 var(--cv-sp-3) !important;
}
html body.shell-page .shell-main [data-cv-secondary-rail="1"] .cv-secondary-rail-nav{
  padding:var(--cv-sp-3) 0 var(--cv-sp-4) !important;
}
html body.shell-page .shell-main [data-cv-secondary-rail="1"] :is(.cu-customer-rail-count,.cv-secondary-rail-count,[data-cv-secondary-rail-count]){
  display:none !important;
}
@media(min-width:901px){
  html body.shell-page .shell-main [data-cv-secondary-rail-opener="1"]{
    display:none !important;
  }
}
@media(max-width:900px){
  html body.shell-page .shell-main [data-cv-secondary-rail="1"]{
    padding:var(--cv-sp-4) !important;
  }
  html body.shell-page .shell-main .cu-customer-rail-opener{
    width:36px !important;
    min-width:36px !important;
    height:36px !important;
    min-height:36px !important;
    padding:0 !important;
    overflow:hidden !important;
    color:transparent !important;
    font-size:0 !important;
  }
  html body.shell-page .shell-main .cu-customer-rail-opener::before{
    content:"☰";
    color:var(--cv-text-dim);
    font-size:16px;
    line-height:1;
  }
}
/* CLEARVIEW_CUSTOMER_WORKFORCE_PHASE4_RAIL_CARRYFORWARD_END */

/* CLEARVIEW_WORKSPACE_MODERNIZATION_PHASE1_FOUNDATION_START
   Shared presentation-only primitives for the authenticated desktop
   modernization program. All workspace layout selectors are explicitly
   opt-in through data-cv-workspace-modernized="1". No route, writer, record,
   permission, provider, Mobile or Dispatch Board behavior is defined here. */

/* Dark-filled actionable controls use an explicit semantic variant. */
body.shell-page .shell-main :is(
    .cv-btn-dark,
    .cv-action-dark,
    [data-tone="dark"]
) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--cv-sp-2);
    min-height: 36px;
    padding: 8px 14px;
    border: 1px solid var(--cv-action-dark-border) !important;
    border-radius: var(--cv-control-radius) !important;
    background: var(--cv-action-dark-bg) !important;
    color: var(--cv-action-dark-fg) !important;
    box-shadow: none !important;
    text-shadow: none !important;
    font-family: var(--cv-font-display) !important;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.2;
    text-decoration: none !important;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .14s ease, border-color .14s ease, transform .08s ease;
}

body.shell-page .shell-main :is(
    .cv-btn-dark,
    .cv-action-dark,
    [data-tone="dark"]
):not(:disabled):not(.disabled):not([aria-disabled="true"]):hover {
    border-color: var(--cv-action-dark-bg-hover) !important;
    background: var(--cv-action-dark-bg-hover) !important;
    color: var(--cv-action-dark-fg) !important;
}

body.shell-page .shell-main :is(
    .cv-btn-dark,
    .cv-action-dark,
    [data-tone="dark"]
):focus-visible {
    outline: 2px solid var(--cv-cyan);
    outline-offset: 2px;
    color: var(--cv-action-dark-fg) !important;
}

body.shell-page .shell-main :is(
    .cv-btn-dark,
    .cv-action-dark,
    [data-tone="dark"]
):not(:disabled):not(.disabled):not([aria-disabled="true"]):active {
    transform: scale(.97);
    color: var(--cv-action-dark-fg) !important;
}

body.shell-page .shell-main :is(
    .cv-btn-dark,
    .cv-action-dark,
    [data-tone="dark"]
)[aria-busy="true"],
body.shell-page .shell-main :is(
    .cv-btn-dark,
    .cv-action-dark,
    [data-tone="dark"]
).is-loading {
    color: var(--cv-action-dark-fg) !important;
    cursor: progress;
    pointer-events: none;
}

body.shell-page .shell-main :is(
    .cv-btn-dark,
    .cv-action-dark,
    [data-tone="dark"]
):is(:disabled,.disabled,[aria-disabled="true"]) {
    border-color: var(--cv-action-dark-border) !important;
    background: var(--cv-action-dark-bg) !important;
    color: var(--cv-action-dark-fg) !important;
    opacity: .55;
    cursor: not-allowed;
    pointer-events: none;
}

body.shell-page .shell-main :is(
    .cv-btn-dark,
    .cv-action-dark,
    [data-tone="dark"]
) svg {
    color: currentColor !important;
}

body.shell-page .shell-main :is(
    .cv-btn-dark,
    .cv-action-dark,
    [data-tone="dark"]
) svg [stroke]:not([stroke="none"]) {
    stroke: currentColor !important;
}

body.shell-page .shell-main :is(
    .cv-btn-dark,
    .cv-action-dark,
    [data-tone="dark"]
) svg [fill]:not([fill="none"]) {
    fill: currentColor !important;
}

/* Generic authenticated desktop workspace boundary. */
body.shell-page .shell-main [data-cv-workspace-modernized="1"] {
    --cv-workspace-list-width: minmax(300px, 380px);
    display: grid;
    gap: var(--cv-sp-4);
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

body.shell-page .shell-main [data-cv-workspace-modernized="1"] .cv-workspace-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cv-sp-3);
    min-width: 0;
    padding: var(--cv-sp-3);
    border: 1px solid var(--cv-border);
    border-radius: var(--cv-surface-radius);
    background: var(--cv-surface);
    box-shadow: none;
    flex-wrap: wrap;
}

body.shell-page .shell-main [data-cv-workspace-modernized="1"] .cv-workspace-toolbar-group {
    display: flex;
    align-items: center;
    gap: var(--cv-sp-2);
    min-width: 0;
    flex: 1 1 auto;
    flex-wrap: wrap;
}

body.shell-page .shell-main [data-cv-workspace-modernized="1"] .cv-workspace-toolbar-group--actions {
    justify-content: flex-end;
    flex: 0 1 auto;
}

body.shell-page .shell-main [data-cv-workspace-modernized="1"] .cv-workspace-split {
    display: grid;
    grid-template-columns: var(--cv-workspace-list-width) minmax(0, 1fr);
    min-width: 0;
    min-height: 0;
    border: 1px solid var(--cv-border);
    border-radius: var(--cv-surface-radius);
    background: var(--cv-surface);
    box-shadow: none;
    overflow: hidden;
}

body.shell-page .shell-main [data-cv-workspace-modernized="1"] .cv-workspace-list-pane,
body.shell-page .shell-main [data-cv-workspace-modernized="1"] .cv-workspace-detail-pane {
    min-width: 0;
    min-height: 0;
    background: var(--cv-surface);
}

body.shell-page .shell-main [data-cv-workspace-modernized="1"] .cv-workspace-list-pane {
    border-right: 1px solid var(--cv-border);
}

body.shell-page .shell-main [data-cv-workspace-modernized="1"] .cv-workspace-detail-pane {
    padding: var(--cv-sp-4);
}

body.shell-page .shell-main [data-cv-workspace-modernized="1"] .cv-workspace-list {
    display: grid;
    min-width: 0;
}

body.shell-page .shell-main [data-cv-workspace-modernized="1"] .cv-workspace-list-row {
    display: grid;
    gap: var(--cv-sp-1);
    min-width: 0;
    padding: var(--cv-sp-3);
    border: 0;
    border-bottom: 1px solid var(--cv-border-subtle);
    border-radius: 0;
    background: transparent;
    color: var(--cv-text);
    text-align: left;
    text-decoration: none;
    box-shadow: none;
}

body.shell-page .shell-main [data-cv-workspace-modernized="1"] .cv-workspace-list-row:last-child {
    border-bottom: 0;
}

body.shell-page .shell-main [data-cv-workspace-modernized="1"] .cv-workspace-list-row:is(:hover,:focus-visible,.is-active,[aria-current="true"],[aria-selected="true"]) {
    background: var(--cv-surface2);
    color: var(--cv-text);
    outline: none;
    text-decoration: none;
}

body.shell-page .shell-main [data-cv-workspace-modernized="1"] .cv-workspace-list-row-title {
    min-width: 0;
    overflow: hidden;
    color: var(--cv-text);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.shell-page .shell-main [data-cv-workspace-modernized="1"] .cv-workspace-list-row-meta {
    min-width: 0;
    overflow: hidden;
    color: var(--cv-text-dim);
    font-size: 11px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.shell-page .shell-main [data-cv-workspace-modernized="1"] .cv-workspace-kpi-row {
    display: flex;
    align-items: stretch;
    gap: 0;
    min-width: 0;
    padding: var(--cv-sp-3) 0;
    border-block: 1px solid var(--cv-border-subtle);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
}

body.shell-page .shell-main [data-cv-workspace-modernized="1"] .cv-workspace-kpi-row > .cv-workspace-kpi {
    flex: 1 0 132px;
}

body.shell-page .shell-main [data-cv-workspace-modernized="1"] .cv-workspace-activity {
    display: grid;
    min-width: 0;
}

body.shell-page .shell-main [data-cv-workspace-modernized="1"] .cv-workspace-activity-item {
    display: grid;
    grid-template-columns: minmax(110px, 150px) minmax(0, 1fr);
    gap: var(--cv-sp-3);
    min-width: 0;
    padding: var(--cv-sp-3) 0;
    border-bottom: 1px solid var(--cv-border-subtle);
}

body.shell-page .shell-main [data-cv-workspace-modernized="1"] .cv-workspace-activity-item:last-child {
    border-bottom: 0;
}

body.shell-page .shell-main [data-cv-workspace-modernized="1"] .cv-workspace-activity-time {
    color: var(--cv-text-muted);
    font-family: var(--cv-font-data) !important;
    font-size: 10px;
    line-height: 1.4;
}

body.shell-page .shell-main [data-cv-workspace-modernized="1"] .cv-workspace-activity-copy {
    min-width: 0;
    color: var(--cv-text);
    font-size: 12px;
    line-height: 1.5;
}

body.shell-page .shell-main [data-cv-workspace-modernized="1"] .cv-workspace-file-list {
    display: grid;
    min-width: 0;
    border: 1px solid var(--cv-border);
    border-radius: var(--cv-surface-radius);
    background: var(--cv-surface);
    overflow: hidden;
    box-shadow: none;
}

body.shell-page .shell-main [data-cv-workspace-modernized="1"] .cv-workspace-file-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--cv-sp-3);
    align-items: center;
    min-width: 0;
    padding: var(--cv-sp-3);
    border-bottom: 1px solid var(--cv-border-subtle);
    color: var(--cv-text);
}

body.shell-page .shell-main [data-cv-workspace-modernized="1"] .cv-workspace-file-row:last-child {
    border-bottom: 0;
}

body.shell-page .shell-main [data-cv-workspace-modernized="1"] .cv-workspace-file-row:hover,
body.shell-page .shell-main [data-cv-workspace-modernized="1"] .cv-workspace-file-row:focus-within {
    background: var(--cv-surface2);
}

body.shell-page .shell-main [data-cv-workspace-modernized="1"] .cv-workspace-state-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--cv-sp-2);
    margin-top: var(--cv-sp-2);
    flex-wrap: wrap;
}

body.shell-page .shell-main [data-cv-workspace-modernized="1"] .cv-workspace-state[data-state="error"] {
    border-color: var(--cv-danger);
}

body.shell-page .shell-main [data-cv-workspace-modernized="1"] .cv-workspace-state[data-state="loading"] {
    color: var(--cv-text-dim);
}

@media (max-width: 900px) {
    body.shell-page .shell-main [data-cv-workspace-modernized="1"] .cv-workspace-split {
        grid-template-columns: minmax(0, 1fr);
    }

    body.shell-page .shell-main [data-cv-workspace-modernized="1"] .cv-workspace-list-pane {
        border-right: 0;
        border-bottom: 1px solid var(--cv-border);
    }

    body.shell-page .shell-main [data-cv-workspace-modernized="1"] .cv-workspace-toolbar-group--actions {
        justify-content: flex-start;
    }
}

@media (max-width: 640px) {
    body.shell-page .shell-main [data-cv-workspace-modernized="1"] .cv-workspace-toolbar {
        align-items: stretch;
    }

    body.shell-page .shell-main [data-cv-workspace-modernized="1"] .cv-workspace-toolbar-group,
    body.shell-page .shell-main [data-cv-workspace-modernized="1"] .cv-workspace-toolbar-group--actions {
        width: 100%;
    }

    body.shell-page .shell-main [data-cv-workspace-modernized="1"] .cv-workspace-activity-item {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--cv-sp-1);
    }

    body.shell-page .shell-main [data-cv-workspace-modernized="1"] .cv-workspace-file-row {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* CLEARVIEW_WORKSPACE_MODERNIZATION_PHASE1_FOUNDATION_END */


/* CLEARVIEW_WORKSPACE_MODERNIZATION_PHASE1_BLUE_PRIMARY_CONTRAST_CORRECTIVE_START
   Runtime corrective for the Blue theme's filled primary actions. The exact
   current shared primary authority used --cv-accent with --cv-accent-ink,
   which rendered dark foreground text on filled blue actions in Settings,
   Estimates, and the application bar.

   White foreground text on the current Blue --cv-accent is below the 4.5:1
   normal-text contrast threshold, so this corrective does not merely swap the
   foreground. Blue primary action fills use the existing --cv-accent-dim token,
   which provides accessible contrast with the existing white action foreground
   token. Classic theme primary actions remain unchanged because the current
   amber fill requires its existing dark foreground for accessible contrast.

   The selector set is limited to existing semantic primary action classes and
   the existing application-bar Create / Vision send controls. No route-specific
   selector, generic button rule, domain behavior, or Dispatch Board authority is
   introduced. */
html.cv-scheme-blue body.shell-page:not(.cv-dispatch-workspace-v1a) .shell-main :is(
    a,
    button
):is(
    .cv-btn-primary,
    .cv-action-primary,
    .btn-primary,
    .primary,
    .button-primary,
    .cv-empty-btn--primary,
    .cv-dialog-btn--primary,
    .cvgs-banner-cta,
    .cvgs-step-cta:not(.is-ghost),
    .ops-actionbar-btn[data-tone="primary"],
    [data-tone="primary"]
) {
    background: var(--cv-accent-dim) !important;
    border-color: var(--cv-accent-dim) !important;
    color: var(--cv-action-dark-fg) !important;
    text-shadow: none !important;
}

html.cv-scheme-blue body.shell-page:not(.cv-dispatch-workspace-v1a) .shell-main :is(
    a,
    button
):is(
    .cv-btn-primary,
    .cv-action-primary,
    .btn-primary,
    .primary,
    .button-primary,
    .cv-empty-btn--primary,
    .cv-dialog-btn--primary,
    .cvgs-banner-cta,
    .cvgs-step-cta:not(.is-ghost),
    .ops-actionbar-btn[data-tone="primary"],
    [data-tone="primary"]
):not(:disabled):not(.disabled):not([aria-disabled="true"]):hover {
    background: var(--cv-accent-dim) !important;
    border-color: var(--cv-accent) !important;
    color: var(--cv-action-dark-fg) !important;
}

html.cv-scheme-blue body.shell-page:not(.cv-dispatch-workspace-v1a) :is(
    button.cv-appbar-create,
    button.vd-send
) {
    background: var(--cv-accent-dim) !important;
    border-color: var(--cv-accent-dim) !important;
    color: var(--cv-action-dark-fg) !important;
    text-shadow: none !important;
}

html.cv-scheme-blue body.shell-page:not(.cv-dispatch-workspace-v1a) :is(
    button.cv-appbar-create,
    button.vd-send
):not(:disabled):not(.disabled):not([aria-disabled="true"]):hover {
    background: var(--cv-accent-dim) !important;
    border-color: var(--cv-accent) !important;
    color: var(--cv-action-dark-fg) !important;
}

html.cv-scheme-blue body.shell-page:not(.cv-dispatch-workspace-v1a) .shell-main :is(
    a,
    button
):is(
    .cv-btn-primary,
    .cv-action-primary,
    .btn-primary,
    .primary,
    .button-primary,
    .cv-empty-btn--primary,
    .cv-dialog-btn--primary,
    .cvgs-banner-cta,
    .cvgs-step-cta:not(.is-ghost),
    .ops-actionbar-btn[data-tone="primary"],
    [data-tone="primary"]
) svg,
html.cv-scheme-blue body.shell-page:not(.cv-dispatch-workspace-v1a) :is(
    button.cv-appbar-create,
    button.vd-send
) svg {
    color: currentColor !important;
}

html.cv-scheme-blue body.shell-page:not(.cv-dispatch-workspace-v1a) .shell-main :is(
    a,
    button
):is(
    .cv-btn-primary,
    .cv-action-primary,
    .btn-primary,
    .primary,
    .button-primary,
    .cv-empty-btn--primary,
    .cv-dialog-btn--primary,
    .cvgs-banner-cta,
    .cvgs-step-cta:not(.is-ghost),
    .ops-actionbar-btn[data-tone="primary"],
    [data-tone="primary"]
) svg [stroke]:not([stroke="none"]),
html.cv-scheme-blue body.shell-page:not(.cv-dispatch-workspace-v1a) :is(
    button.cv-appbar-create,
    button.vd-send
) svg [stroke]:not([stroke="none"]) {
    stroke: currentColor !important;
}

html.cv-scheme-blue body.shell-page:not(.cv-dispatch-workspace-v1a) .shell-main :is(
    a,
    button
):is(
    .cv-btn-primary,
    .cv-action-primary,
    .btn-primary,
    .primary,
    .button-primary,
    .cv-empty-btn--primary,
    .cv-dialog-btn--primary,
    .cvgs-banner-cta,
    .cvgs-step-cta:not(.is-ghost),
    .ops-actionbar-btn[data-tone="primary"],
    [data-tone="primary"]
) svg [fill]:not([fill="none"]),
html.cv-scheme-blue body.shell-page:not(.cv-dispatch-workspace-v1a) :is(
    button.cv-appbar-create,
    button.vd-send
) svg [fill]:not([fill="none"]) {
    fill: currentColor !important;
}
/* CLEARVIEW_WORKSPACE_MODERNIZATION_PHASE1_BLUE_PRIMARY_CONTRAST_CORRECTIVE_END */

/* CLEARVIEW_CANONICAL_DESKTOP_SEARCH_FIELD_V1
   Shared opt-in authority for authenticated desktop searches. The wrapper is
   structural only, the input owns the single visible border, the glyph remains
   internal, and reserved input padding prevents icon/text overlap. Legacy
   search selectors remain only for untouched routes until their owning phase. */
body.shell-page .shell-main .cv-search-field-v2 {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
body.shell-page .shell-main .cv-search-field-v2 > .cv-search-field-v2__input {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 8px 40px 8px 42px !important;
    border: 1px solid var(--cv-control-border) !important;
    border-radius: var(--cv-control-radius) !important;
    background: var(--cv-control-bg) !important;
    color: var(--cv-text) !important;
    box-shadow: none !important;
    outline: none !important;
    line-height: 1.35 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}
body.shell-page .shell-main .cv-search-field-v2 > .cv-search-field-v2__input::placeholder {
    color: var(--cv-text-muted) !important;
    opacity: 1 !important;
}
body.shell-page .shell-main .cv-search-field-v2 > .cv-search-field-v2__input:hover:not(:disabled):not([readonly]) {
    border-color: var(--cv-control-border-hover) !important;
}
body.shell-page .shell-main .cv-search-field-v2 > .cv-search-field-v2__input:focus,
body.shell-page .shell-main .cv-search-field-v2 > .cv-search-field-v2__input:focus-visible {
    border-color: var(--cv-control-focus) !important;
    box-shadow: 0 0 0 3px var(--cv-control-focus-ring) !important;
}
body.shell-page .shell-main .cv-search-field-v2 > .cv-search-field-v2__icon {
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 18px !important;
    height: 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--cv-text-muted) !important;
    pointer-events: none !important;
    z-index: 2 !important;
}
body.shell-page .shell-main .cv-search-field-v2 > .cv-search-field-v2__icon svg {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
}
body.shell-page .shell-main .cv-search-field-v2 > .cv-search-field-v2__clear {
    position: absolute !important;
    right: 6px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-radius: var(--cv-control-radius) !important;
    background: transparent !important;
    color: var(--cv-text-muted) !important;
    box-shadow: none !important;
    z-index: 2 !important;
}
body.shell-page .shell-main .cv-search-field-v2 > .cv-search-field-v2__clear:hover,
body.shell-page .shell-main .cv-search-field-v2 > .cv-search-field-v2__clear:focus-visible {
    background: var(--cv-surface2) !important;
    color: var(--cv-text) !important;
}
body.shell-page .shell-main .cv-search-field-v2 > .cv-search-field-v2__clear[hidden] {
    display: none !important;
}

/* CLEARVIEW_WORKSPACE_MODERNIZATION_PHASE8B_CANONICAL_SEARCH_COMPACT */
body.shell-page .shell-main .cv-search-field-v2.cv-search-field-v2--compact > .cv-search-field-v2__input {
    min-height: 34px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}
body.shell-page .shell-main .cv-search-field-v2.cv-search-field-v2--compact > .cv-search-field-v2__clear {
    width: 26px !important;
    height: 26px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CLEARVIEW_SHARED_THEME_TOGGLE_V2
   Exact user-approved moon/sun switch geometry and colors. The runtime theme
   persistence authority remains unchanged. This component deliberately uses
   its own named design tokens because the requested switch colors are fixed
   product presentation, not tenant theme-pack colors.
   ═══════════════════════════════════════════════════════════════════════════ */
.shell-theme-toggle {
    --cv-theme-toggle-dark-track: rgb(75, 73, 74);
    --cv-theme-toggle-moon-bg: #000000;
    --cv-theme-toggle-moon-cutout: #ffffff;
    --cv-theme-toggle-light-track: #2196f3;
    --cv-theme-toggle-sun-bg: #ffff00;

    -webkit-appearance: none;
    appearance: none;
    position: relative;
    display: inline-block;
    width: 3.5em;
    height: 2em;
    min-width: 3.5em;
    min-height: 2em;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    font-size: 13px;
    cursor: pointer;
    vertical-align: middle;
}
.shell-theme-toggle__track {
    position: absolute;
    inset: 0;
    display: block;
    border: 0;
    border-radius: 30px !important;
    background: var(--cv-theme-toggle-dark-track);
    transition: background-color .4s ease;
}
.shell-theme-toggle__thumb {
    position: absolute;
    left: .3em;
    bottom: .3em;
    display: block;
    width: 1.4em;
    height: 1.4em;
    border-radius: 20px !important;
    background: var(--cv-theme-toggle-moon-bg);
    box-shadow: inset 8px -4px 0 0 var(--cv-theme-toggle-moon-cutout);
    transform: translateX(0);
    transition: transform .4s ease, background-color .4s ease, box-shadow .4s ease;
}
.shell-theme-toggle__thumb svg {
    display: none !important;
}
.shell-theme-toggle:hover .shell-theme-toggle__track {
    filter: brightness(1.03);
}
.shell-theme-toggle:focus-visible {
    outline: 2px solid var(--cv-focus-ring, var(--cv-accent));
    outline-offset: 3px;
    border-radius: 30px !important;
}
html.theme-light .shell-theme-toggle__track {
    background: var(--cv-theme-toggle-light-track);
}
html.theme-light .shell-theme-toggle__thumb {
    background: var(--cv-theme-toggle-sun-bg);
    box-shadow: none;
    transform: translateX(1.5em);
}
@media (prefers-reduced-motion: reduce) {
    .shell-theme-toggle__track,
    .shell-theme-toggle__thumb {
        transition: none;
    }
}

/* ========================================================================== 
   CLEARVIEW WORKSPACE MODERNIZATION PHASE 9
   AUTHENTICATED SEARCH SINGLE-SURFACE AUTHORITY CLOSURE

   Legacy authenticated search wrappers are presentation aliases only. The
   wrapper is structural and invisible; the input owns the one visual border.
   This prevents nested boxes and reserves fixed internal space for the search
   icon so page CSS cannot place the icon over the text. New/touched routes
   should use .cv-search-field-v2 directly.
   ========================================================================== */
body.shell-page .shell-main :is(
    .cv-books-search,
    .cv-search,
    .cv-search-wrap,
    .search-wrap,
    .search-box,
    .search-field,
    .vision-search,
    .vision-search-wrap,
    .vision-chat-search,
    .assistant-search,
    .chat-search
),
body.shell-page .shell-main :is(div,label):has(> svg + input[type="search"]),
body.shell-page .shell-main :is(div,label):has(> svg ~ input[type="search"]),
body.shell-page .shell-main :is(div,label):has(> svg + input[inputmode="search"]),
body.shell-page .shell-main :is(div,label):has(> svg ~ input[inputmode="search"]),
body.shell-page .shell-main :is(div,label):has(> .search-icon + input),
body.shell-page .shell-main :is(div,label):has(> .search-icon ~ input),
body.shell-page .shell-main :is(div,label):has(> .cv-search-icon + input),
body.shell-page .shell-main :is(div,label):has(> .cv-search-icon ~ input) {
    position: relative !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: 0 !important;
    overflow: visible !important;
}

body.shell-page .shell-main :is(
    .cv-books-search,
    .cv-search,
    .cv-search-wrap,
    .search-wrap,
    .search-box,
    .search-field,
    .vision-search,
    .vision-search-wrap,
    .vision-chat-search,
    .assistant-search,
    .chat-search
) > input:is([type="search"],[inputmode="search"]),
body.shell-page .shell-main :is(div,label):has(> svg + input[type="search"]) > input[type="search"],
body.shell-page .shell-main :is(div,label):has(> svg ~ input[type="search"]) > input[type="search"],
body.shell-page .shell-main :is(div,label):has(> svg + input[inputmode="search"]) > input[inputmode="search"],
body.shell-page .shell-main :is(div,label):has(> svg ~ input[inputmode="search"]) > input[inputmode="search"],
body.shell-page .shell-main :is(div,label):has(> .search-icon + input) > input,
body.shell-page .shell-main :is(div,label):has(> .search-icon ~ input) > input,
body.shell-page .shell-main :is(div,label):has(> .cv-search-icon + input) > input,
body.shell-page .shell-main :is(div,label):has(> .cv-search-icon ~ input) > input {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 8px 38px 8px 42px !important;
    border: 1px solid var(--cv-control-border) !important;
    border-radius: var(--cv-control-radius) !important;
    background: var(--cv-control-bg) !important;
    color: var(--cv-text) !important;
    font: inherit !important;
    line-height: 1.35 !important;
    box-shadow: none !important;
    outline: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

body.shell-page .shell-main :is(
    .cv-books-search,
    .cv-search,
    .cv-search-wrap,
    .search-wrap,
    .search-box,
    .search-field,
    .vision-search,
    .vision-search-wrap,
    .vision-chat-search,
    .assistant-search,
    .chat-search
) > input:is([type="search"],[inputmode="search"]):hover:not(:disabled):not([readonly]) {
    border-color: var(--cv-control-border-hover) !important;
}

body.shell-page .shell-main :is(
    .cv-books-search,
    .cv-search,
    .cv-search-wrap,
    .search-wrap,
    .search-box,
    .search-field,
    .vision-search,
    .vision-search-wrap,
    .vision-chat-search,
    .assistant-search,
    .chat-search
) > input:is([type="search"],[inputmode="search"]):focus,
body.shell-page .shell-main :is(
    .cv-books-search,
    .cv-search,
    .cv-search-wrap,
    .search-wrap,
    .search-box,
    .search-field,
    .vision-search,
    .vision-search-wrap,
    .vision-chat-search,
    .assistant-search,
    .chat-search
) > input:is([type="search"],[inputmode="search"]):focus-visible {
    border-color: var(--cv-control-focus) !important;
    box-shadow: 0 0 0 3px var(--cv-control-focus-ring) !important;
}

body.shell-page .shell-main :is(
    .cv-books-search,
    .cv-search,
    .cv-search-wrap,
    .search-wrap,
    .search-box,
    .search-field,
    .vision-search,
    .vision-search-wrap,
    .vision-chat-search,
    .assistant-search,
    .chat-search
) > :is(svg,.search-icon,.cv-search-icon,.cv-books-search-icon),
body.shell-page .shell-main :is(div,label):has(> svg + input[type="search"]) > svg,
body.shell-page .shell-main :is(div,label):has(> svg ~ input[type="search"]) > svg,
body.shell-page .shell-main :is(div,label):has(> svg + input[inputmode="search"]) > svg,
body.shell-page .shell-main :is(div,label):has(> svg ~ input[inputmode="search"]) > svg,
body.shell-page .shell-main :is(div,label):has(> .search-icon + input) > .search-icon,
body.shell-page .shell-main :is(div,label):has(> .search-icon ~ input) > .search-icon,
body.shell-page .shell-main :is(div,label):has(> .cv-search-icon + input) > .cv-search-icon,
body.shell-page .shell-main :is(div,label):has(> .cv-search-icon ~ input) > .cv-search-icon {
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    width: 16px !important;
    height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translateY(-50%) !important;
    color: var(--cv-text-muted) !important;
    stroke: currentColor !important;
    fill: none !important;
    opacity: 1 !important;
    pointer-events: none !important;
    z-index: 2 !important;
}

body.shell-page .shell-main input[type="search"]::-webkit-search-decoration,
body.shell-page .shell-main input[type="search"]::-webkit-search-cancel-button,
body.shell-page .shell-main input[type="search"]::-webkit-search-results-button,
body.shell-page .shell-main input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: none !important;
}

/* CLEARVIEW_BUTTON_STATUS_SCOPE_CORRECTIVE_R3_START
   Button color authority is limited to existing semantic primary actions.
   Navigation, view selectors, workflow selectors, tabs, header utilities,
   search controls, dropdown/listbox choices and other non-action controls keep
   their existing ClearView Light/Dark and shape-token presentation.
   Lifecycle/status controls use the extracted reference status palette. */
:root {
    --cv-ref-action-blue: #26B4FF;
    --cv-ref-action-blue-hover: #24ABF2;
    --cv-ref-action-blue-active: #219DDE;
    --cv-ref-status-new: #8897AA;
    --cv-ref-status-planning: #E5731B;
    --cv-ref-status-ready: #26B4FF;
    --cv-ref-status-in-progress: #02BC77;
    --cv-ref-status-punchlist: #28C3D7;
    --cv-ref-status-on-hold: #FFD950;
    --cv-ref-status-cancelled: #D9534F;
    --cv-ref-status-complete: #181C21;
    --cv-ref-status-imported: #9B59B6;
    --cv-ref-action-fg: #FFFFFF;
    --cv-ref-warning-fg: #665720;
}

/* Existing semantic primary actions only. */
body.shell-page:not(.cv-dispatch-workspace-v1a) .shell-main:not([data-cv-page-route^="/cv-dispatch"]):not([data-cv-page-route^="/cvt-field"]) :is(a,button):is(
    .cv-btn-primary,
    .cv-action-primary,
    .btn-primary,
    .primary,
    .button-primary,
    .cv-empty-btn--primary,
    .cv-dialog-btn--primary,
    .cvgs-banner-cta,
    .cvgs-step-cta:not(.is-ghost),
    .ops-actionbar-btn[data-tone="primary"],
    [data-tone="primary"]
):not(:disabled):not(.disabled):not([aria-disabled="true"]) {
    background: var(--cv-ref-action-blue) !important;
    border-color: var(--cv-ref-action-blue) !important;
    color: var(--cv-ref-action-fg) !important;
    box-shadow: none !important;
    text-shadow: none !important;
}
body.shell-page:not(.cv-dispatch-workspace-v1a) .shell-main:not([data-cv-page-route^="/cv-dispatch"]):not([data-cv-page-route^="/cvt-field"]) :is(a,button):is(
    .cv-btn-primary,
    .cv-action-primary,
    .btn-primary,
    .primary,
    .button-primary,
    .cv-empty-btn--primary,
    .cv-dialog-btn--primary,
    .cvgs-banner-cta,
    .cvgs-step-cta:not(.is-ghost),
    .ops-actionbar-btn[data-tone="primary"],
    [data-tone="primary"]
):not(:disabled):not(.disabled):not([aria-disabled="true"]):hover {
    background: var(--cv-ref-action-blue-hover) !important;
    border-color: var(--cv-ref-action-blue-hover) !important;
    color: var(--cv-ref-action-fg) !important;
}
body.shell-page:not(.cv-dispatch-workspace-v1a) .shell-main:not([data-cv-page-route^="/cv-dispatch"]):not([data-cv-page-route^="/cvt-field"]) :is(a,button):is(
    .cv-btn-primary,
    .cv-action-primary,
    .btn-primary,
    .primary,
    .button-primary,
    .cv-empty-btn--primary,
    .cv-dialog-btn--primary,
    .cvgs-banner-cta,
    .cvgs-step-cta:not(.is-ghost),
    .ops-actionbar-btn[data-tone="primary"],
    [data-tone="primary"]
):not(:disabled):not(.disabled):not([aria-disabled="true"]):active {
    background: var(--cv-ref-action-blue-active) !important;
    border-color: var(--cv-ref-action-blue-active) !important;
    color: var(--cv-ref-action-fg) !important;
}
body.shell-page:not(.cv-dispatch-workspace-v1a) .shell-main:not([data-cv-page-route^="/cv-dispatch"]):not([data-cv-page-route^="/cvt-field"]) :is(a,button):is(
    .cv-btn-primary,
    .cv-action-primary,
    .btn-primary,
    .primary,
    .button-primary,
    .cv-empty-btn--primary,
    .cv-dialog-btn--primary,
    .cvgs-banner-cta,
    .cvgs-step-cta:not(.is-ghost),
    .ops-actionbar-btn[data-tone="primary"],
    [data-tone="primary"]
):focus-visible {
    outline: 0 !important;
    box-shadow: 0 0 0 2px rgba(38, 180, 255, .40) !important;
}

/* Persistent-header primary actions only. Header utilities remain unboxed and
   theme-token-driven by the existing cv-layout authority. */
body.shell-page:not(.cv-dispatch-workspace-v1a) :is(button.cv-appbar-create,button.vd-send):not(:disabled):not(.disabled):not([aria-disabled="true"]) {
    background: var(--cv-ref-action-blue) !important;
    border-color: var(--cv-ref-action-blue) !important;
    color: var(--cv-ref-action-fg) !important;
    box-shadow: none !important;
    text-shadow: none !important;
}
body.shell-page:not(.cv-dispatch-workspace-v1a) :is(button.cv-appbar-create,button.vd-send):not(:disabled):not(.disabled):not([aria-disabled="true"]):hover {
    background: var(--cv-ref-action-blue-hover) !important;
    border-color: var(--cv-ref-action-blue-hover) !important;
    color: var(--cv-ref-action-fg) !important;
}
body.shell-page:not(.cv-dispatch-workspace-v1a) :is(button.cv-appbar-create,button.vd-send):focus-visible {
    outline: 0 !important;
    box-shadow: 0 0 0 2px rgba(38, 180, 255, .40) !important;
}

/* Exact lifecycle markers - compact outlined presentation. */
body.shell-page:not(.cv-dispatch-workspace-v1a) .shell-main:not([data-cv-page-route^="/cv-dispatch"]):not([data-cv-page-route^="/cvt-field"]) :is(.cv-badge,.status-pill,.cv-status-pill,.cv-status)[data-status="new" i] { border-color: var(--cv-ref-status-new) !important; background: transparent !important; color: var(--cv-ref-status-new) !important; }
body.shell-page:not(.cv-dispatch-workspace-v1a) .shell-main:not([data-cv-page-route^="/cv-dispatch"]):not([data-cv-page-route^="/cvt-field"]) :is(.cv-badge,.status-pill,.cv-status-pill,.cv-status)[data-status="planning" i] { border-color: var(--cv-ref-status-planning) !important; background: transparent !important; color: var(--cv-ref-status-planning) !important; }
body.shell-page:not(.cv-dispatch-workspace-v1a) .shell-main:not([data-cv-page-route^="/cv-dispatch"]):not([data-cv-page-route^="/cvt-field"]) :is(.cv-badge,.status-pill,.cv-status-pill,.cv-status)[data-status="ready" i] { border-color: var(--cv-ref-status-ready) !important; background: transparent !important; color: var(--cv-ref-status-ready) !important; }
body.shell-page:not(.cv-dispatch-workspace-v1a) .shell-main:not([data-cv-page-route^="/cv-dispatch"]):not([data-cv-page-route^="/cvt-field"]) :is(.cv-badge,.status-pill,.cv-status-pill,.cv-status):is([data-status="in progress" i],[data-status="in-progress" i],[data-status="in_progress" i]) { border-color: var(--cv-ref-status-in-progress) !important; background: transparent !important; color: var(--cv-ref-status-in-progress) !important; }
body.shell-page:not(.cv-dispatch-workspace-v1a) .shell-main:not([data-cv-page-route^="/cv-dispatch"]):not([data-cv-page-route^="/cvt-field"]) :is(.cv-badge,.status-pill,.cv-status-pill,.cv-status):is([data-status="punchlist" i],[data-status="punch list" i]) { border-color: var(--cv-ref-status-punchlist) !important; background: transparent !important; color: var(--cv-ref-status-punchlist) !important; }
body.shell-page:not(.cv-dispatch-workspace-v1a) .shell-main:not([data-cv-page-route^="/cv-dispatch"]):not([data-cv-page-route^="/cvt-field"]) :is(.cv-badge,.status-pill,.cv-status-pill,.cv-status):is([data-status="on hold" i],[data-status="on-hold" i],[data-status="on_hold" i]) { border-color: var(--cv-ref-status-on-hold) !important; background: transparent !important; color: var(--cv-ref-status-on-hold) !important; }
body.shell-page:not(.cv-dispatch-workspace-v1a) .shell-main:not([data-cv-page-route^="/cv-dispatch"]):not([data-cv-page-route^="/cvt-field"]) :is(.cv-badge,.status-pill,.cv-status-pill,.cv-status):is([data-status="cancelled" i],[data-status="canceled" i]) { border-color: var(--cv-ref-status-cancelled) !important; background: transparent !important; color: var(--cv-ref-status-cancelled) !important; }
body.shell-page:not(.cv-dispatch-workspace-v1a) .shell-main:not([data-cv-page-route^="/cv-dispatch"]):not([data-cv-page-route^="/cvt-field"]) :is(.cv-badge,.status-pill,.cv-status-pill,.cv-status):is([data-status="complete" i],[data-status="completed" i]) { border-color: var(--cv-ref-status-complete) !important; background: transparent !important; color: var(--cv-ref-status-complete) !important; }
body.shell-page:not(.cv-dispatch-workspace-v1a) .shell-main:not([data-cv-page-route^="/cv-dispatch"]):not([data-cv-page-route^="/cvt-field"]) :is(.cv-badge,.status-pill,.cv-status-pill,.cv-status)[data-status="imported" i] { border-color: var(--cv-ref-status-imported) !important; background: transparent !important; color: var(--cv-ref-status-imported) !important; }
html:not(.theme-light) body.shell-page .shell-main :is(.cv-badge,.status-pill,.cv-status-pill,.cv-status):is([data-status="complete" i],[data-status="completed" i]) { border-color: var(--cv-text-dim) !important; color: var(--cv-text) !important; }

/* Current Job lifecycle authority. */
body.cv-page-job-detail .shell-main .badge.lifecycle.ready { border-color: var(--cv-ref-status-ready) !important; background: transparent !important; color: var(--cv-ref-status-ready) !important; }
body.cv-page-job-detail .shell-main .badge.lifecycle.in_progress { border-color: var(--cv-ref-status-in-progress) !important; background: transparent !important; color: var(--cv-ref-status-in-progress) !important; }
body.cv-page-job-detail .shell-main .badge.lifecycle.cancelled { border-color: var(--cv-ref-status-cancelled) !important; background: transparent !important; color: var(--cv-ref-status-cancelled) !important; }
body.cv-page-job-detail .shell-main .badge.lifecycle.closed { border-color: var(--cv-ref-status-complete) !important; background: transparent !important; color: var(--cv-ref-status-complete) !important; }
html:not(.theme-light) body.cv-page-job-detail .shell-main .badge.lifecycle.closed { border-color: var(--cv-text-dim) !important; color: var(--cv-text) !important; }

/* Filled lifecycle buttons/choices only. */
body.cv-page-job-detail .shell-main :is(.cv-sb-pill-ready,.cv-sb-btn-ready) { background: var(--cv-ref-status-ready) !important; border-color: var(--cv-ref-status-ready) !important; color: var(--cv-ref-action-fg) !important; }
body.cv-page-job-detail .shell-main :is(.cv-sb-pill-in_progress,.cv-sb-btn-in_progress) { background: var(--cv-ref-status-in-progress) !important; border-color: var(--cv-ref-status-in-progress) !important; color: var(--cv-ref-action-fg) !important; }
body.cv-page-job-detail .shell-main :is(.cv-sb-pill-cancelled,.cv-sb-btn-cancelled) { background: var(--cv-ref-status-cancelled) !important; border-color: var(--cv-ref-status-cancelled) !important; color: var(--cv-ref-action-fg) !important; }
body.cv-page-job-detail .shell-main :is(.cv-sb-pill-closed,.cv-sb-btn-closed) { background: var(--cv-ref-status-complete) !important; border-color: var(--cv-ref-status-complete) !important; color: var(--cv-ref-action-fg) !important; }
html:not(.theme-light) body.cv-page-job-detail .shell-main :is(.cv-sb-pill-closed,.cv-sb-btn-closed) { border-color: var(--cv-text-dim) !important; }

/* Other exact-status action controls. Explicit navigation/workflow selectors are
   excluded so status color never turns view navigation into filled buttons. */
body.shell-page:not(.cv-dispatch-workspace-v1a) .shell-main:not([data-cv-page-route^="/cv-dispatch"]):not([data-cv-page-route^="/cvt-field"]) :is(button,a,[role="button"]):not([role="tab"]):not([role="option"]):not([role="switch"]):not([data-view]):not([data-workflow-nav]):not([data-source-nav])[data-status="new" i] { background: var(--cv-ref-status-new) !important; border-color: var(--cv-ref-status-new) !important; color: var(--cv-ref-action-fg) !important; }
body.shell-page:not(.cv-dispatch-workspace-v1a) .shell-main:not([data-cv-page-route^="/cv-dispatch"]):not([data-cv-page-route^="/cvt-field"]) :is(button,a,[role="button"]):not([role="tab"]):not([role="option"]):not([role="switch"]):not([data-view]):not([data-workflow-nav]):not([data-source-nav])[data-status="planning" i] { background: var(--cv-ref-status-planning) !important; border-color: var(--cv-ref-status-planning) !important; color: var(--cv-ref-action-fg) !important; }
body.shell-page:not(.cv-dispatch-workspace-v1a) .shell-main:not([data-cv-page-route^="/cv-dispatch"]):not([data-cv-page-route^="/cvt-field"]) :is(button,a,[role="button"]):not([role="tab"]):not([role="option"]):not([role="switch"]):not([data-view]):not([data-workflow-nav]):not([data-source-nav])[data-status="ready" i] { background: var(--cv-ref-status-ready) !important; border-color: var(--cv-ref-status-ready) !important; color: var(--cv-ref-action-fg) !important; }
body.shell-page:not(.cv-dispatch-workspace-v1a) .shell-main:not([data-cv-page-route^="/cv-dispatch"]):not([data-cv-page-route^="/cvt-field"]) :is(button,a,[role="button"]):not([role="tab"]):not([role="option"]):not([role="switch"]):not([data-view]):not([data-workflow-nav]):not([data-source-nav]):is([data-status="in progress" i],[data-status="in-progress" i],[data-status="in_progress" i]) { background: var(--cv-ref-status-in-progress) !important; border-color: var(--cv-ref-status-in-progress) !important; color: var(--cv-ref-action-fg) !important; }
body.shell-page:not(.cv-dispatch-workspace-v1a) .shell-main:not([data-cv-page-route^="/cv-dispatch"]):not([data-cv-page-route^="/cvt-field"]) :is(button,a,[role="button"]):not([role="tab"]):not([role="option"]):not([role="switch"]):not([data-view]):not([data-workflow-nav]):not([data-source-nav]):is([data-status="punchlist" i],[data-status="punch list" i]) { background: var(--cv-ref-status-punchlist) !important; border-color: var(--cv-ref-status-punchlist) !important; color: var(--cv-ref-action-fg) !important; }
body.shell-page:not(.cv-dispatch-workspace-v1a) .shell-main:not([data-cv-page-route^="/cv-dispatch"]):not([data-cv-page-route^="/cvt-field"]) :is(button,a,[role="button"]):not([role="tab"]):not([role="option"]):not([role="switch"]):not([data-view]):not([data-workflow-nav]):not([data-source-nav]):is([data-status="on hold" i],[data-status="on-hold" i],[data-status="on_hold" i]) { background: var(--cv-ref-status-on-hold) !important; border-color: var(--cv-ref-status-on-hold) !important; color: var(--cv-ref-warning-fg) !important; }
body.shell-page:not(.cv-dispatch-workspace-v1a) .shell-main:not([data-cv-page-route^="/cv-dispatch"]):not([data-cv-page-route^="/cvt-field"]) :is(button,a,[role="button"]):not([role="tab"]):not([role="option"]):not([role="switch"]):not([data-view]):not([data-workflow-nav]):not([data-source-nav]):is([data-status="cancelled" i],[data-status="canceled" i]) { background: var(--cv-ref-status-cancelled) !important; border-color: var(--cv-ref-status-cancelled) !important; color: var(--cv-ref-action-fg) !important; }
body.shell-page:not(.cv-dispatch-workspace-v1a) .shell-main:not([data-cv-page-route^="/cv-dispatch"]):not([data-cv-page-route^="/cvt-field"]) :is(button,a,[role="button"]):not([role="tab"]):not([role="option"]):not([role="switch"]):not([data-view]):not([data-workflow-nav]):not([data-source-nav]):is([data-status="complete" i],[data-status="completed" i]) { background: var(--cv-ref-status-complete) !important; border-color: var(--cv-ref-status-complete) !important; color: var(--cv-ref-action-fg) !important; }
body.shell-page:not(.cv-dispatch-workspace-v1a) .shell-main:not([data-cv-page-route^="/cv-dispatch"]):not([data-cv-page-route^="/cvt-field"]) :is(button,a,[role="button"]):not([role="tab"]):not([role="option"]):not([role="switch"]):not([data-view]):not([data-workflow-nav]):not([data-source-nav])[data-status="imported" i] { background: var(--cv-ref-status-imported) !important; border-color: var(--cv-ref-status-imported) !important; color: var(--cv-ref-action-fg) !important; }
html:not(.theme-light) body.shell-page .shell-main :is(button,a,[role="button"]):not([role="tab"]):not([role="option"]):not([role="switch"]):not([data-view]):not([data-workflow-nav]):not([data-source-nav]):is([data-status="complete" i],[data-status="completed" i]) { border-color: var(--cv-text-dim) !important; }
/* CLEARVIEW_BUTTON_STATUS_SCOPE_CORRECTIVE_R3_END */

/* CLEARVIEW_SETTINGS_PREFERENCES_FIRST_ENTRY_AUTHORITY_V1
 * Personal preference components are shared presentation authority.
 * Keeping these rules in cv-system.css ensures they are active before Settings
 * is mounted through Single Entry, while preserving the same token-based
 * Light/Dark and Square/Soft Rounded behavior used on a full document load.
 */
.cv-pref-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.cv-pref-header h2{margin:0 0 6px}
.cv-pref-header p{margin:0;color:var(--cv-text-dim);font-size:13px;line-height:1.5;max-width:760px}
.cv-pref-panel{display:grid;gap:16px}
.cv-pref-loading,.cv-pref-error,.cv-pref-empty{border:1px solid var(--cv-border);border-radius:var(--cv-surface-radius);background:var(--cv-bg);padding:14px 16px;color:var(--cv-text-dim);font-size:12px}
.cv-pref-error{color:var(--cv-danger)}
.cv-pref-section{display:grid;gap:8px}
.cv-pref-section-title{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--cv-text-dim)}
.cv-pref-card{border:1px solid var(--cv-border);border-radius:var(--cv-surface-radius);background:var(--cv-surface);overflow:visible}
.cv-pref-row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 16px;border-bottom:1px solid var(--cv-border);position:relative}
.cv-pref-row:last-child{border-bottom:0}
.cv-pref-row-stack{align-items:stretch;flex-direction:column}
.cv-pref-copy{display:grid;gap:3px;min-width:0;flex:1}
.cv-pref-copy strong{font-size:13px;color:var(--cv-text)}
.cv-pref-copy span{font-size:11px;line-height:1.45;color:var(--cv-text-dim)}
.cv-pref-control{display:flex;align-items:center;gap:8px;min-width:220px;justify-content:flex-end}
.cv-pref-status{min-width:48px;text-align:right;font-size:10px;color:var(--cv-text-dim)}
.cv-pref-status.is-saved{color:var(--cv-success)}
.cv-pref-status.is-error{color:var(--cv-danger)}
.cv-pref-dropdown{position:relative;min-width:190px}
.cv-pref-dropdown-trigger{width:100%;min-height:36px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 11px;border:1px solid var(--cv-border);border-radius:var(--cv-control-radius);background:var(--cv-bg);color:var(--cv-text);font-size:12px;font-weight:600;line-height:1.2;font-family:inherit;text-align:left;cursor:pointer}
.cv-pref-dropdown-trigger:hover,.cv-pref-dropdown-trigger:focus-visible{border-color:var(--cv-accent);outline:none}
.cv-pref-caret{font-size:14px;color:var(--cv-text-dim)}
.cv-pref-dropdown-menu{position:absolute;z-index:60;left:0;right:0;top:calc(100% + 5px);padding:5px;border:1px solid var(--cv-border);border-radius:var(--cv-control-radius);background:var(--cv-surface);max-height:260px;overflow:auto;}
.cv-pref-option{display:block;width:100%;padding:8px 10px;border:0;border-radius:var(--cv-control-radius);background:transparent;color:var(--cv-text);font-size:12px;font-weight:500;line-height:1.25;font-family:inherit;text-align:left;cursor:pointer}
.cv-pref-option:hover,.cv-pref-option:focus-visible,.cv-pref-option.is-selected{background:var(--cv-surface2);outline:none}
.cv-pref-toggle{display:inline-flex;align-items:center;gap:8px;border:0;background:transparent;color:var(--cv-text);font-size:11px;font-weight:600;line-height:1;font-family:inherit;cursor:pointer;padding:4px}
.cv-pref-toggle-track{width:42px;height:24px;border-radius:var(--cv-pill-radius);border:1px solid var(--cv-border);background:var(--cv-surface2);padding:2px;display:flex;align-items:center;transition:background .18s,border-color .18s;}
.cv-pref-toggle-thumb{width:18px;height:18px;border-radius:var(--cv-circle-radius);background:var(--cv-text-dim);transform:translateX(0);transition:transform .18s,background .18s;}
.cv-pref-toggle.is-on .cv-pref-toggle-track{background:var(--cv-accent);border-color:var(--cv-accent)}
.cv-pref-toggle.is-on .cv-pref-toggle-thumb{transform:translateX(18px);background:var(--cv-accent-ink)}
.cv-pref-toggle:focus-visible{outline:1px solid var(--cv-accent);outline-offset:2px;border-radius:var(--cv-pill-radius);}
.cv-pref-hidden-list{display:grid;gap:7px}
.cv-pref-hidden-item{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--cv-border);border-radius:var(--cv-surface-radius);background:var(--cv-bg);padding:9px 10px}
.cv-pref-hidden-item>span{display:grid;gap:2px;min-width:0}
.cv-pref-hidden-item strong{font-size:12px;color:var(--cv-text);font-weight:650}
.cv-pref-hidden-item small{font-size:10px;color:var(--cv-text-dim);overflow-wrap:anywhere}
.cv-pref-utility-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;border:1px solid var(--cv-border);border-radius:var(--cv-surface-radius);background:var(--cv-surface);padding:12px 14px}
.cv-pref-utility-bar>span{font-size:11px;color:var(--cv-text-dim);line-height:1.45}
.cv-org-pref-defaults{margin-bottom:16px}
.cv-org-pref-defaults .cv-pref-card{margin-top:12px}
@media(max-width:700px){
  .cv-pref-row{align-items:stretch;flex-direction:column}
  .cv-pref-control{min-width:0;justify-content:space-between;width:100%}
  .cv-pref-dropdown{min-width:0;flex:1}
  .cv-pref-hidden-item{align-items:flex-start;flex-direction:column}
}

/* CLEARVIEW_SIDEBAR_COLLAPSED_ROLLUP_BADGE_ANCHOR_V1
   Collapsed section rollup counts belong to their section control. The base
   shell badge rule is absolute in rail mode, so give each section button its
   own positioning context and keep the count inside that 44px control. */
html.shell-collapsed body.shell-page .shell-sidebar .shell-nav-section--toggle {
    position: relative !important;
    overflow: visible !important;
}
html.shell-collapsed body.shell-page .shell-sidebar .shell-nav-section--toggle .shell-badge--rollup {
    position: absolute !important;
    top: 2px !important;
    right: 2px !important;
    z-index: 2 !important;
    margin: 0 !important;
}

/* CLEARVIEW_SIDEBAR_BOTTOM_UTILITIES_FAVORITES_V1
   Fixed Favorites lives at the top of the navigation as one flyout. View-mode,
   Help and Support controls live in the stable bottom utility zone. */
html body.shell-page .shell-sidebar .shell-favorites-toggle,
html body.shell-page .shell-sidebar .shell-favorites-flyout {
    order: 10 !important;
}
html body.shell-page .shell-sidebar .shell-favorites-toggle {
    flex: 0 0 auto !important;
    cursor: pointer !important;
}
html body.shell-page .shell-sidebar .shell-favorites-flyout .shell-favorites-list {
    display: grid !important;
    gap: 2px !important;
    padding: 0 4px 2px !important;
    margin: 0 !important;
}
html body.shell-page .shell-sidebar .shell-favorites-flyout .shell-favorite-link {
    margin: 2px 10px !important;
}
html body.shell-page .shell-sidebar .shell-favorites-empty {
    padding: 16px !important;
    color: var(--cv-text-dim) !important;
    font-family: var(--cv-font-body) !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
}
html.shell-collapsed body.shell-page .shell-sidebar .shell-favorites-toggle .shell-ic {
    width: 18px !important;
    height: 18px !important;
}

html body.shell-page .shell-sidebar .shell-nav-bottom {
    order: 10000 !important;
    flex: 0 0 auto !important;
    margin-top: auto !important;
    padding: 10px 6px 8px !important;
    border-top: 1px solid var(--cv-border-subtle) !important;
    background: var(--cv-surface) !important;
}
html body.shell-page .shell-sidebar .shell-nav-bottom .shell-nav-view-mode-indicator {
    margin: 0 2px 2px !important;
    padding: 8px 12px 5px !important;
}
html body.shell-page .shell-sidebar .shell-nav-bottom .shell-nav-item {
    min-height: 40px !important;
    margin: 2px 2px !important;
    padding: 8px 12px !important;
}
html body.shell-page .shell-sidebar .shell-nav-bottom .shell-nav-icon {
    width: 24px !important;
    height: 24px !important;
    flex: 0 0 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
html body.shell-page .shell-sidebar .shell-nav-bottom .shell-nav-icon > svg,
html body.shell-page .shell-sidebar .shell-nav-bottom .shell-nav-icon > .shell-ic,
html body.shell-page .shell-sidebar .shell-nav-bottom .shell-nav-icon .shell-ic {
    width: 18px !important;
    height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    margin: 0 !important;
}
html.shell-collapsed body.shell-page .shell-sidebar .shell-nav-bottom {
    margin-top: 8px !important;
    padding: 8px 0 !important;
}
html.shell-collapsed body.shell-page .shell-sidebar .shell-nav-bottom .shell-nav-item {
    width: 100% !important;
    min-height: 40px !important;
    padding: 8px 0 !important;
    justify-content: center !important;
    gap: 0 !important;
}
html.shell-collapsed body.shell-page .shell-sidebar .shell-nav-bottom .shell-nav-icon {
    width: 24px !important;
    height: 24px !important;
    margin: 0 auto !important;
}
html.shell-collapsed body.shell-page .shell-sidebar .shell-nav-bottom .shell-nav-label {
    display: none !important;
}
html.shell-collapsed body.shell-page .shell-sidebar .shell-nav-bottom .shell-nav-view-mode-indicator {
    justify-content: center !important;
    padding: 8px 0 5px !important;
}
html.shell-collapsed body.shell-page .shell-sidebar .shell-nav-bottom .shell-nav-view-mode-indicator .shell-ic {
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
}