/* CSS Variables - Brand Palette */
:root {
    /* Brand Colors */
    --brand-gray: #4a5568;
    --brand-red: #8B0000;
    --brand-red-dark: #660000;
    
    /* Neutral Grays */
    --gray-50: #f7fafc;
    --gray-100: #edf2f7;
    --gray-200: #e2e8f0;
    --gray-300: #cbd5e0;
    --gray-400: #a0aec0;
    --gray-500: #718096;
    --gray-600: #4a5568;
    --gray-700: #2d3748;
    --gray-800: #1a202c;
    --gray-900: #171923;
    
    /* Semantic Colors */
    --primary: var(--brand-gray);
    --secondary: var(--brand-red);
    --success: #38a169;
    --warning: #d69e2e;
    --error: var(--brand-red);
    --info: #3182ce;
    
    /* Additional Colors for Import System */
    --blue-50: #ebf8ff;
    --blue-100: #bee3f8;
    --blue-200: #90cdf4;
    --blue-800: #2c5282;
    
    /* Typography */
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-size-base: 16px;
    --font-size-sm: 14px;
    --font-size-lg: 18px;
    --font-size-xs: 12px;
    --line-height-base: 1.5;
    
    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    
    /* Border Radius */
    --border-radius: 0.375rem;
    --border-radius-lg: 0.5rem;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

    /* Semantic surface tokens — Light values match today's computed :root */
    --color-bg: var(--gray-50);
    --color-surface: #fff;
    --white: #fff;
    --color-row-hover: #f8fafc;
    --color-text: var(--gray-800);
    --color-text-muted: var(--gray-500);
    --color-border: var(--gray-200);
    --color-icon: var(--gray-500);
    --color-focus-ring: rgba(74, 85, 104, 0.1);
    --color-tooltip-bg: #1a202c;
    --color-tooltip-text: #fff;
    --color-tooltip-border: transparent;
    --color-tooltip-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    --toast-success-bg: #ecfdf5;
    --toast-success-fg: #065f46;
    --toast-success-border: #a7f3d0;
    --toast-error-bg: #fef2f2;
    --toast-error-fg: #991b1b;
    --toast-error-border: #fecaca;
    --toast-warning-bg: #fffbeb;
    --toast-warning-fg: #92400e;
    --toast-warning-border: #fde68a;
    --toast-info-bg: #eff6ff;
    --toast-info-fg: #1e40af;
    --toast-info-border: #bfdbfe;
    /* User-set status pills: 12.5% wash matches the old `#hex20` inline tint. */
    --status-pill-bg-amount: 12.5%;
    --status-pill-bg-base: transparent;
    --status-pill-fg-amount: 100%;
    --status-pill-border-amount: 25%;
    color-scheme: light;
}

/* Light stamp is identical to :root so existing users see no paint change. */
[data-theme="light"] {
    color-scheme: light;
}

/* Dark gray remap: existing color: var(--gray-800) / var(--gray-500) follow the theme.
   Surfaces that still say white/#fff must use --color-surface (set below).
   Hover-note chips use --color-tooltip-* (literal #2d3748 / #fff / rgba border) —
   never remapped --gray-800/--gray-900 or they invert to light-bg + white text,
   or match --color-surface and disappear into the page. */
[data-theme="dark"] {
    --gray-50: #171923;
    --gray-100: #1a202c;
    --gray-200: #2d3748;
    --gray-300: #4a5568;
    --gray-400: #718096;
    --gray-500: #a0aec0;
    --gray-600: #cbd5e0;
    --gray-700: #e2e8f0;
    --gray-800: #edf2f7;
    --gray-900: #f7fafc;
    --color-bg: var(--gray-50);
    --color-surface: #1a202c;
    --white: var(--color-surface);
    --color-row-hover: var(--gray-50);
    --color-text: var(--gray-800);
    --color-text-muted: var(--gray-500);
    --color-border: var(--gray-200);
    --color-icon: var(--gray-500);
    --color-focus-ring: rgba(160, 174, 192, 0.28);
    --color-tooltip-bg: #2d3748;
    --color-tooltip-text: #fff;
    --color-tooltip-border: rgba(255, 255, 255, 0.25);
    --color-tooltip-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
    --toast-success-bg: #064e3b;
    --toast-success-fg: #6ee7b7;
    --toast-success-border: #047857;
    --toast-error-bg: #7f1d1d;
    --toast-error-fg: #fecaca;
    --toast-error-border: #991b1b;
    --toast-warning-bg: #78350f;
    --toast-warning-fg: #fde68a;
    --toast-warning-border: #b45309;
    --toast-info-bg: #1e3a5f;
    --toast-info-fg: #93c5fd;
    --toast-info-border: #1d4ed8;
    --status-pill-bg-amount: 22%;
    --status-pill-bg-base: var(--color-surface);
    --status-pill-fg-amount: 65%;
    --status-pill-border-amount: 40%;
    /* File-drop hover/dragover: hazy accent, not leftover #fff5f5 / #f0f7ff. */
    --dropzone-active-bg: color-mix(in srgb, var(--primary) 15%, var(--color-surface));
    --dropzone-active-border: color-mix(in srgb, var(--primary) 40%, var(--color-border));
    --dropzone-active-fg: var(--color-text);
    --dropzone-active-fg-muted: var(--color-text-muted);
    color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
    [data-theme="system"] {
        --gray-50: #171923;
        --gray-100: #1a202c;
        --gray-200: #2d3748;
        --gray-300: #4a5568;
        --gray-400: #718096;
        --gray-500: #a0aec0;
        --gray-600: #cbd5e0;
        --gray-700: #e2e8f0;
        --gray-800: #edf2f7;
        --gray-900: #f7fafc;
        --color-bg: var(--gray-50);
        --color-surface: #1a202c;
        --white: var(--color-surface);
        --color-row-hover: var(--gray-50);
        --color-text: var(--gray-800);
        --color-text-muted: var(--gray-500);
        --color-border: var(--gray-200);
        --color-icon: var(--gray-500);
        --color-focus-ring: rgba(160, 174, 192, 0.28);
        --color-tooltip-bg: #2d3748;
        --color-tooltip-text: #fff;
        --color-tooltip-border: rgba(255, 255, 255, 0.25);
        --color-tooltip-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
        --toast-success-bg: #064e3b;
        --toast-success-fg: #6ee7b7;
        --toast-success-border: #047857;
        --toast-error-bg: #7f1d1d;
        --toast-error-fg: #fecaca;
        --toast-error-border: #991b1b;
        --toast-warning-bg: #78350f;
        --toast-warning-fg: #fde68a;
        --toast-warning-border: #b45309;
        --toast-info-bg: #1e3a5f;
        --toast-info-fg: #93c5fd;
        --toast-info-border: #1d4ed8;
        --status-pill-bg-amount: 22%;
        --status-pill-bg-base: var(--color-surface);
        --status-pill-fg-amount: 65%;
        --status-pill-border-amount: 40%;
        /* File-drop hover/dragover: hazy accent, not leftover #fff5f5 / #f0f7ff. */
        --dropzone-active-bg: color-mix(in srgb, var(--primary) 15%, var(--color-surface));
        --dropzone-active-border: color-mix(in srgb, var(--primary) 40%, var(--color-border));
        --dropzone-active-fg: var(--color-text);
        --dropzone-active-fg-muted: var(--color-text-muted);
        color-scheme: dark;
    }
}

/* Sidebar already paints today's dark chrome. Pin the original gray
   scale so the content remap does not invert it. Login follows data-theme. */
.sidebar {
    --gray-50: #f7fafc;
    --gray-100: #edf2f7;
    --gray-200: #e2e8f0;
    --gray-300: #cbd5e0;
    --gray-400: #a0aec0;
    --gray-500: #718096;
    --gray-600: #4a5568;
    --gray-700: #2d3748;
    --gray-800: #1a202c;
    --gray-900: #171923;
    --color-bg: var(--gray-50);
    --color-surface: #fff;
    --white: #fff;
    --color-row-hover: #f8fafc;
    --color-text: var(--gray-800);
    --color-text-muted: var(--gray-500);
    --color-border: var(--gray-200);
    --color-icon: var(--gray-500);
    --color-focus-ring: rgba(74, 85, 104, 0.1);
    --color-tooltip-bg: #1a202c;
    --color-tooltip-text: #fff;
    --color-tooltip-border: transparent;
    --color-tooltip-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    color-scheme: dark;
}

@media print {
    :root,
    [data-theme],
    [data-theme="light"],
    [data-theme="dark"],
    [data-theme="system"] {
        --gray-50: #f7fafc;
        --gray-100: #edf2f7;
        --gray-200: #e2e8f0;
        --gray-300: #cbd5e0;
        --gray-400: #a0aec0;
        --gray-500: #718096;
        --gray-600: #4a5568;
        --gray-700: #2d3748;
        --gray-800: #1a202c;
        --gray-900: #171923;
        --color-bg: var(--gray-50);
        --color-surface: #fff;
        --white: #fff;
        --color-row-hover: #f8fafc;
        --color-text: var(--gray-800);
        --color-text-muted: var(--gray-500);
        --color-border: var(--gray-200);
        --color-icon: var(--gray-500);
        --color-focus-ring: rgba(74, 85, 104, 0.1);
        --color-tooltip-bg: #1a202c;
        --color-tooltip-text: #fff;
        --color-tooltip-border: transparent;
        --color-tooltip-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        --toast-success-bg: #ecfdf5;
        --toast-success-fg: #065f46;
        --toast-success-border: #a7f3d0;
        --toast-error-bg: #fef2f2;
        --toast-error-fg: #991b1b;
        --toast-error-border: #fecaca;
        --toast-warning-bg: #fffbeb;
        --toast-warning-fg: #92400e;
        --toast-warning-border: #fde68a;
        --toast-info-bg: #eff6ff;
        --toast-info-fg: #1e40af;
        --toast-info-border: #bfdbfe;
        --status-pill-bg-amount: 12.5%;
        --status-pill-bg-base: transparent;
        --status-pill-fg-amount: 100%;
        --status-pill-border-amount: 25%;
        color-scheme: light;
    }
}

/* User-set status pills (JobStatus.color / POStatus.color).
   Light: same 12.5% wash + solid hue as the old `#hex20` inline style.
   Dark + system/dark: mix the stored hue onto the surface so text stays
   readable and the pill still reads as that status's color. */
.status-color-pill,
.status-badge.status-color-pill,
.job-status-badge.status-color-pill,
.ticket-status-badge.status-color-pill,
.job-stat-icon.status-color-pill,
.po-status-badge.status-color-pill,
.form-header .po-status-badge.status-color-pill,
.po-header .po-status-badge.status-color-pill {
    background: color-mix(in srgb, var(--status-color) var(--status-pill-bg-amount), var(--status-pill-bg-base));
    color: color-mix(in srgb, var(--status-color) var(--status-pill-fg-amount), #fff);
}

.po-status-badge.status-color-pill {
    border: 1px solid color-mix(in srgb, var(--status-color) var(--status-pill-border-amount), transparent);
}

[data-theme="dark"] .status-color-pill:not(.po-status-badge) {
    border: 1px solid color-mix(in srgb, var(--status-color) var(--status-pill-border-amount), transparent);
}

@media (prefers-color-scheme: dark) {
    [data-theme="system"] .status-color-pill:not(.po-status-badge) {
        border: 1px solid color-mix(in srgb, var(--status-color) var(--status-pill-border-amount), transparent);
    }
}

/* Autofill: keep native Light yellow; retint on dark so the chrome does not flash. */
[data-theme="dark"] input:-webkit-autofill,
[data-theme="dark"] textarea:-webkit-autofill,
[data-theme="dark"] select:-webkit-autofill {
    -webkit-text-fill-color: var(--color-text);
    caret-color: var(--color-text);
    box-shadow: 0 0 0 1000px var(--color-surface) inset;
    transition: background-color 9999s ease-out;
}

@media (prefers-color-scheme: dark) {
    [data-theme="system"] input:-webkit-autofill,
    [data-theme="system"] textarea:-webkit-autofill,
    [data-theme="system"] select:-webkit-autofill {
        -webkit-text-fill-color: var(--color-text);
        caret-color: var(--color-text);
        box-shadow: 0 0 0 1000px var(--color-surface) inset;
        transition: background-color 9999s ease-out;
    }
}

/* Dark: native checkboxes already pick up color-scheme: dark from the
   theme root. A 1px outline (or inset shadow) at offset 0 draws a second
   inner square on the UA widget — the box-within-a-box on list filters
   and forms. Kill that leftover chrome; leave :focus-visible alone.
   Light unchanged. */
[data-theme="dark"] input[type="checkbox"] {
    color-scheme: dark;
}

[data-theme="dark"] input[type="checkbox"]:not(:focus-visible) {
    outline: none;
}

@media (prefers-color-scheme: dark) {
    [data-theme="system"] input[type="checkbox"] {
        color-scheme: dark;
    }

    [data-theme="system"] input[type="checkbox"]:not(:focus-visible) {
        outline: none;
    }
}

/* Dark: root color-scheme: dark can make Chromium auto-adjust/invert
   replaced media (photos, document thumbs, PDF frames). There is no
   filter: invert() in first-party CSS; pin media to only-light so the
   actual preview shows. Covers job/part/engine/SOP/settings thumbs and
   catalog photos in one rule — do not add a job-docs-only exception.
   Inline SVG icons/chevrons are not <img> and stay themed. Light unchanged. */
[data-theme="dark"] img,
[data-theme="dark"] picture,
[data-theme="dark"] video,
[data-theme="dark"] canvas,
[data-theme="dark"] iframe.job-attachment-preview-frame,
[data-theme="dark"] iframe.attachment-preview-frame {
    color-scheme: only light;
    filter: none;
}

@media (prefers-color-scheme: dark) {
    [data-theme="system"] img,
    [data-theme="system"] picture,
    [data-theme="system"] video,
    [data-theme="system"] canvas,
    [data-theme="system"] iframe.job-attachment-preview-frame,
    [data-theme="system"] iframe.attachment-preview-frame {
        color-scheme: only light;
        filter: none;
    }
}

/* Empty .component-status (job-list components + developer 3-stage):
   the inner square is the empty-state ICON — job list via
   <use href="#job-comp-icon-box"> (sprite <rect> is not a descendant)
   and developer via an inline <rect>. Hide that icon in every theme
   and use one wrapper border as the checkbox. Dash/check left alone.
   Dark only remaps fill/stroke; light keeps #f3f4f6 + #9ca3af. */
.component-not-started {
    border: 1.5px solid currentColor;
}

.component-not-started svg:has(rect),
.component-not-started svg:has(use),
.component-not-started use,
.component-not-started svg rect,
#job-comp-icon-box {
    display: none;
}

[data-theme="dark"] .component-not-started {
    background: transparent;
    color: var(--color-text-muted);
}

@media (prefers-color-scheme: dark) {
    [data-theme="system"] .component-not-started {
        background: transparent;
        color: var(--color-text-muted);
    }
}

/* List rows: leftover #fff / #f8fafc hover+select paints white while
   remapped --gray-800 text stays light. Dark uses an elevated navy. */
[data-theme="dark"] .job-row:hover,
[data-theme="dark"] .job-row:hover td,
[data-theme="dark"] .job-row:active,
[data-theme="dark"] .job-row:active td,
[data-theme="dark"] .job-row:focus,
[data-theme="dark"] .job-row:focus td,
[data-theme="dark"] .job-row:focus-visible,
[data-theme="dark"] .job-row:focus-visible td,
[data-theme="dark"] .engine-row:hover,
[data-theme="dark"] .engine-row:hover td,
[data-theme="dark"] .engine-row:active,
[data-theme="dark"] .engine-row:active td,
[data-theme="dark"] .engine-row:focus,
[data-theme="dark"] .engine-row:focus td,
[data-theme="dark"] .part-row:hover,
[data-theme="dark"] .part-row:hover td,
[data-theme="dark"] .part-row:active,
[data-theme="dark"] .part-row:active td,
[data-theme="dark"] .part-row:focus,
[data-theme="dark"] .part-row:focus td,
[data-theme="dark"] .build-list-row:hover,
[data-theme="dark"] .build-list-row:hover td,
[data-theme="dark"] .build-list-row:active,
[data-theme="dark"] .build-list-row:active td,
[data-theme="dark"] .machine-row:hover,
[data-theme="dark"] .machine-row:hover td,
[data-theme="dark"] .machine-row:active,
[data-theme="dark"] .machine-row:active td,
[data-theme="dark"] .vendor-row:hover,
[data-theme="dark"] .vendor-row:hover td,
[data-theme="dark"] .vendor-row:active,
[data-theme="dark"] .vendor-row:active td,
[data-theme="dark"] .catalog-row:hover,
[data-theme="dark"] .catalog-row:hover td,
[data-theme="dark"] .customer-history-row:hover,
[data-theme="dark"] .customer-history-row:hover td,
[data-theme="dark"] .contact-row:hover,
[data-theme="dark"] .contact-row:hover td,
[data-theme="dark"] .ship-to-row:hover,
[data-theme="dark"] .ship-to-row:hover td,
[data-theme="dark"] .cpv-row:hover,
[data-theme="dark"] .cpv-row:hover td,
[data-theme="dark"] .discount-layer-row:hover,
[data-theme="dark"] .discount-layer-row:hover td,
[data-theme="dark"] .vendor-history-row:hover,
[data-theme="dark"] .vendor-history-row:hover td,
[data-theme="dark"] .shipping-child-row:hover td,
[data-theme="dark"] .mf-entity-row:hover td,
[data-theme="dark"] .sg-engine-row:hover,
[data-theme="dark"] .sg-engine-row:hover td,
[data-theme="dark"] .qe-row:hover,
[data-theme="dark"] .qe-row:hover td,
[data-theme="dark"] .customer-row:hover,
[data-theme="dark"] .customer-row:active,
[data-theme="dark"] .ticket-row:hover,
[data-theme="dark"] .ticket-row:active,
[data-theme="dark"] .row-link:hover,
[data-theme="dark"] .po-row:hover,
[data-theme="dark"] .table-wrap tbody tr:hover,
[data-theme="dark"] .related-table tbody tr:hover,
[data-theme="dark"] .jobs-table tbody tr:hover,
[data-theme="dark"] .component-table tbody tr:hover,
[data-theme="dark"] .po-modal-body .data-table tbody tr:hover,
[data-theme="dark"] .notification-item-main:hover,
[data-theme="dark"] .engine-table--frozen-keys .engine-row:hover td[data-col="engine_make"],
[data-theme="dark"] .engine-table--frozen-keys .engine-row:hover td[data-col="engine_model"],
[data-theme="dark"] .engine-table--frozen-keys .engine-row:hover td[data-col="oh_kit_no"],
[data-theme="dark"] .engine-table--frozen-keys .engine-row:hover td[data-col="piston_no"],
[data-theme="dark"] .engine-table--frozen-keys .engine-row:hover td.engine-cell-select,
[data-theme="dark"] .engine-table--frozen-keys .engine-row:hover td:first-child {
    background: var(--color-row-hover);
    background-color: var(--color-row-hover);
    color: var(--color-text);
}

@media (prefers-color-scheme: dark) {
    [data-theme="system"] .job-row:hover,
    [data-theme="system"] .job-row:hover td,
    [data-theme="system"] .job-row:active,
    [data-theme="system"] .job-row:active td,
    [data-theme="system"] .job-row:focus,
    [data-theme="system"] .job-row:focus td,
    [data-theme="system"] .job-row:focus-visible,
    [data-theme="system"] .job-row:focus-visible td,
    [data-theme="system"] .engine-row:hover,
    [data-theme="system"] .engine-row:hover td,
    [data-theme="system"] .engine-row:active,
    [data-theme="system"] .engine-row:active td,
    [data-theme="system"] .engine-row:focus,
    [data-theme="system"] .engine-row:focus td,
    [data-theme="system"] .part-row:hover,
    [data-theme="system"] .part-row:hover td,
    [data-theme="system"] .part-row:active,
    [data-theme="system"] .part-row:active td,
    [data-theme="system"] .part-row:focus,
    [data-theme="system"] .part-row:focus td,
    [data-theme="system"] .build-list-row:hover,
    [data-theme="system"] .build-list-row:hover td,
    [data-theme="system"] .build-list-row:active,
    [data-theme="system"] .build-list-row:active td,
    [data-theme="system"] .machine-row:hover,
    [data-theme="system"] .machine-row:hover td,
    [data-theme="system"] .machine-row:active,
    [data-theme="system"] .machine-row:active td,
    [data-theme="system"] .vendor-row:hover,
    [data-theme="system"] .vendor-row:hover td,
    [data-theme="system"] .vendor-row:active,
    [data-theme="system"] .vendor-row:active td,
    [data-theme="system"] .catalog-row:hover,
    [data-theme="system"] .catalog-row:hover td,
    [data-theme="system"] .customer-history-row:hover,
    [data-theme="system"] .customer-history-row:hover td,
    [data-theme="system"] .contact-row:hover,
    [data-theme="system"] .contact-row:hover td,
    [data-theme="system"] .ship-to-row:hover,
    [data-theme="system"] .ship-to-row:hover td,
    [data-theme="system"] .cpv-row:hover,
    [data-theme="system"] .cpv-row:hover td,
    [data-theme="system"] .discount-layer-row:hover,
    [data-theme="system"] .discount-layer-row:hover td,
    [data-theme="system"] .vendor-history-row:hover,
    [data-theme="system"] .vendor-history-row:hover td,
    [data-theme="system"] .shipping-child-row:hover td,
    [data-theme="system"] .mf-entity-row:hover td,
    [data-theme="system"] .sg-engine-row:hover,
    [data-theme="system"] .sg-engine-row:hover td,
    [data-theme="system"] .qe-row:hover,
    [data-theme="system"] .qe-row:hover td,
    [data-theme="system"] .customer-row:hover,
    [data-theme="system"] .customer-row:active,
    [data-theme="system"] .ticket-row:hover,
    [data-theme="system"] .ticket-row:active,
    [data-theme="system"] .row-link:hover,
    [data-theme="system"] .po-row:hover,
    [data-theme="system"] .table-wrap tbody tr:hover,
    [data-theme="system"] .related-table tbody tr:hover,
    [data-theme="system"] .jobs-table tbody tr:hover,
    [data-theme="system"] .component-table tbody tr:hover,
    [data-theme="system"] .po-modal-body .data-table tbody tr:hover,
    [data-theme="system"] .notification-item-main:hover,
    [data-theme="system"] .engine-table--frozen-keys .engine-row:hover td[data-col="engine_make"],
    [data-theme="system"] .engine-table--frozen-keys .engine-row:hover td[data-col="engine_model"],
    [data-theme="system"] .engine-table--frozen-keys .engine-row:hover td[data-col="oh_kit_no"],
    [data-theme="system"] .engine-table--frozen-keys .engine-row:hover td[data-col="piston_no"],
    [data-theme="system"] .engine-table--frozen-keys .engine-row:hover td.engine-cell-select,
    [data-theme="system"] .engine-table--frozen-keys .engine-row:hover td:first-child {
        background: var(--color-row-hover);
        background-color: var(--color-row-hover);
        color: var(--color-text);
    }
}

/* Bill/quote part picker: page CSS uses unmapped --blue-50 for hover and
   focus, which stays a light bar under light text. Dark uses a slate row.
   Light mode keeps the blue-50 rule in the workspace template. */
[data-theme="dark"] .bill-workspace-page .bill-part-picker-row:hover,
[data-theme="dark"] .bill-workspace-page .bill-part-picker-row:hover td,
[data-theme="dark"] .bill-workspace-page .bill-part-picker-row:focus,
[data-theme="dark"] .bill-workspace-page .bill-part-picker-row:focus td {
    background: var(--gray-200);
    background-color: var(--gray-200);
    color: var(--color-text);
}

[data-theme="dark"] .bill-workspace-page .bill-part-picker-row:hover code,
[data-theme="dark"] .bill-workspace-page .bill-part-picker-row:focus code {
    color: inherit;
    background: transparent;
}

[data-theme="dark"] .bill-workspace-page .bill-part-picker-row:focus-visible {
    outline-color: var(--gray-400);
}

@media (prefers-color-scheme: dark) {
    [data-theme="system"] .bill-workspace-page .bill-part-picker-row:hover,
    [data-theme="system"] .bill-workspace-page .bill-part-picker-row:hover td,
    [data-theme="system"] .bill-workspace-page .bill-part-picker-row:focus,
    [data-theme="system"] .bill-workspace-page .bill-part-picker-row:focus td {
        background: var(--gray-200);
        background-color: var(--gray-200);
        color: var(--color-text);
    }

    [data-theme="system"] .bill-workspace-page .bill-part-picker-row:hover code,
    [data-theme="system"] .bill-workspace-page .bill-part-picker-row:focus code {
        color: inherit;
        background: transparent;
    }

    [data-theme="system"] .bill-workspace-page .bill-part-picker-row:focus-visible {
        outline-color: var(--gray-400);
    }
}

/* Reset and Base Styles */
* {
    box-sizing: border-box;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--color-text);
    background-color: var(--color-bg);
    margin: 0;
    padding: 0;
}

/* Body Classes */
.app-body {
    display: flex;
    min-height: 100vh;
}

.login-body {
    background-color: var(--color-bg);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Sidebar Layout */
.sidebar-layout {
    display: flex;
    min-height: 100vh;
}

/* Modern Sidebar */
.sidebar {
    width: var(--sidebar-width, 200px);
    background: linear-gradient(180deg, var(--gray-900) 0%, var(--gray-800) 100%);
    color: white;
    position: fixed;
    height: 100vh;
    left: 0;
    top: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
}

/* Sidebar Header */
.sidebar-header {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sidebar-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
}

.logo-icon {
    font-size: 1.25rem;
    line-height: 1;
    flex-shrink: 0;
}

.sidebar-logo-img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.sidebar-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: white;
    letter-spacing: -0.025em;
    white-space: nowrap;
    overflow: hidden;
    transition: opacity 0.2s ease;
}

/* Sidebar Collapse Button */
.sidebar-collapse-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: rgba(255, 255, 255, 0.08);
    border: none;
    border-radius: 0.375rem;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.15s ease;
}

.sidebar-collapse-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: white;
}

.sidebar-collapse-btn svg {
    width: 16px;
    height: 16px;
    transition: transform 0.3s ease;
}

/* Sidebar Navigation */
.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 0.25rem 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.sidebar-nav::-webkit-scrollbar {
    width: 6px;
}

.sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-nav::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

/* Navigation Sections */
.nav-section {
    padding: 0.125rem 0.5rem;
}

.nav-section-label {
    display: block;
    padding: 0.25rem 0.5rem;
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 0.125rem;
}

.nav-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 0.25rem;
}

.nav-section-header .nav-section-label {
    margin-bottom: 0;
    flex: 1;
}

.nav-section-action {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    padding: 0.15rem;
    border-radius: 0.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.nav-section-action:hover {
    color: white;
    background-color: rgba(255, 255, 255, 0.08);
}

.nav-section-action svg {
    width: 12px;
    height: 12px;
}

.sidebar-nav-link.is-placeholder {
    color: rgba(255, 255, 255, 0.45);
    font-style: italic;
    background: none;
    border: 1px dashed rgba(255, 255, 255, 0.15);
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}

.sidebar-nav-link.is-placeholder:hover {
    color: white;
    border-color: rgba(255, 255, 255, 0.3);
}

.sidebar.collapsed .nav-section-header {
    justify-content: center;
}

.sidebar.collapsed .nav-section-action {
    display: none;
}

.nav-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    margin: 0.25rem 0.75rem;
}

/* Navigation Links */
.sidebar-nav-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.5rem;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: all 0.15s ease;
    font-weight: 500;
    font-size: 0.8rem;
    border-radius: 0.375rem;
    margin: 1px 0;
}

.sidebar-nav-link:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: white;
}

.sidebar-nav-link.active {
    background-color: var(--brand-red);
    color: white;
    box-shadow: 0 2px 8px rgba(139, 0, 0, 0.4);
}

.sidebar-nav-link.active .nav-icon {
    opacity: 1;
}

/* Sidebar Notification Indicator */
.sidebar-nav-link.has-notifications {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.5);
    animation: notification-pulse 2s ease-in-out infinite;
}

.sidebar-nav-link.has-notifications .nav-icon {
    opacity: 1;
}

.sidebar-nav-link.has-notifications.active {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.5);
}

/* Live turbo-stream / poll target. display:contents keeps the host transparent
   to flex layout so the badge stays a direct flex item of .sidebar-nav-link and
   its margin-left:auto right-aligns it -- whether rendered nested here (initial
   load / stream update) or as a direct child (poll create). Store Orders uses
   the same host-plus-badge markup in Favorites and Logistics. */
#sidebar-home-notif-badge,
#sidebar-store-orders-notif-badge {
    display: contents;
}

#sidebar-imports-review-badge {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
}

#sidebar-imports-review-badge .nav-notification-badge {
    margin-left: 0;
}

.smart-import-review-badge-swap {
    display: contents;
}

.nav-notification-badge {
    background: #dc2626;
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.1rem 0.4rem;
    border-radius: 9999px;
    min-width: 18px;
    text-align: center;
    margin-left: auto;
    box-shadow: 0 0 6px rgba(220, 38, 38, 0.5);
}

@keyframes notification-pulse {
    0%, 100% {
        box-shadow: 0 0 12px rgba(245, 158, 11, 0.5);
    }
    50% {
        box-shadow: 0 0 20px rgba(245, 158, 11, 0.8);
    }
}

/* Navigation Icons */
.nav-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: 0.7;
    transition: opacity 0.15s ease;
}

.sidebar-nav-link:hover .nav-icon {
    opacity: 1;
}

.sidebar-nav-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Sidebar Footer */
.sidebar-footer {
    padding: 0.25rem 0.5rem 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: auto;
}

.sidebar-footer .nav-divider {
    display: none;
}

.sidebar-footer .sidebar-nav-link {
    color: rgba(255, 255, 255, 0.6);
}

.sidebar-footer .sidebar-nav-link:hover {
    color: white;
}

/* Logout Form and Button */
.logout-form {
    margin: 0;
}

.logout-btn {
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
}

.logout-btn:hover {
    background-color: rgba(255, 100, 100, 0.15) !important;
    color: #ff8a8a !important;
}

/* ── Sidebar Collapsed State ── */
.sidebar {
    transition: width 0.3s ease;
}

.sidebar.collapsed {
    width: 60px;
}

.sidebar.collapsed .sidebar-header {
    padding: 0.75rem 0.5rem;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
}

.sidebar.collapsed .sidebar-title {
    opacity: 0;
    width: 0;
    overflow: hidden;
}

.sidebar.collapsed .sidebar-logo {
    gap: 0;
}

.sidebar.collapsed .sidebar-logo-img {
    max-height: 28px;
    width: auto;
    max-width: 36px;
}

.sidebar.collapsed .sidebar-collapse-btn {
    margin: 0 auto;
}

.sidebar.collapsed .sidebar-collapse-btn svg {
    transform: rotate(180deg);
}

.sidebar.collapsed .nav-section {
    padding: 0.25rem 0.375rem;
}

.sidebar.collapsed .nav-section-label {
    opacity: 0;
    height: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

.sidebar.collapsed .sidebar-nav-link {
    justify-content: center;
    padding: 0.625rem;
    gap: 0;
    position: relative;
    overflow: visible;
}

.sidebar.collapsed .sidebar-nav-text {
    display: none;
}

.sidebar.collapsed .nav-notification-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    margin-left: 0;
    font-size: 0.55rem;
    padding: 0.05rem 0.3rem;
    min-width: 14px;
}

.sidebar.collapsed .sidebar-footer {
    padding: 0.25rem 0.375rem 0.5rem;
}

.sidebar.collapsed .nav-divider {
    margin: 0.5rem 0.5rem;
}

.sidebar.collapsed .logo-icon {
    cursor: pointer;
}

.sidebar.collapsed .sidebar-resize-handle {
    display: none;
}

.sidebar.collapsed .sidebar-nav-link::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 8px;
    padding: 0.375rem 0.75rem;
    background: var(--color-tooltip-bg);
    color: var(--color-tooltip-text);
    border: 1px solid var(--color-tooltip-border);
    font-size: 0.8125rem;
    font-weight: 500;
    border-radius: 0.375rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    z-index: 200;
    box-shadow: var(--color-tooltip-shadow);
}

.sidebar.collapsed .sidebar-nav-link:hover::after {
    opacity: 1;
}

/* Sidebar Resize Handle */
.sidebar-resize-handle {
    position: absolute;
    top: 0;
    right: -3px;
    width: 6px;
    height: 100%;
    cursor: col-resize;
    z-index: 101;
    transition: background 0.15s ease;
}

.sidebar-resize-handle:hover,
.sidebar-resize-handle.dragging {
    background: var(--brand-red);
}

body.sidebar-resizing {
    cursor: col-resize !important;
    user-select: none;
}

/* hx-boost page-content wrapper */
#page-content {
    flex: 1;
    min-width: 0;
}

/* Main Content with Sidebar */
.main-content {
    flex: 1;
    margin-left: var(--sidebar-width, 200px);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--gray-50);
    transition: margin-left 0.3s ease;
}

body.sidebar-resizing .main-content,
body.sidebar-resizing .sidebar {
    transition: none;
}

.sidebar.collapsed ~ .main-content,
.sidebar.collapsed ~ #page-content .main-content {
    margin-left: 60px;
}

.main-content-container {
    flex: 1;
    max-width: 95%;
    margin: 0 auto;
    padding: var(--spacing-xl) var(--spacing-lg);
    width: 100%;
}

/* Login Layout */
.login-main {
    width: 100%;
    max-width: 400px;
    padding: 2rem;
}

.login-container {
    background: var(--color-surface);
    border-radius: var(--border-radius);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    padding: 2rem;
    width: 100%;
}

/* Old Layout Styles (keeping for backwards compatibility) */
.header {
    background-color: var(--color-surface);
    border-bottom: 1px solid var(--gray-200);
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 0;
    z-index: 10;
    display: none; /* Hidden when using sidebar layout */
}

.header-container {
    max-width: 95%;
    margin: 0 auto;
    padding: var(--spacing-md) var(--spacing-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-brand .brand-title {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--primary);
}

.header-nav .nav-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: var(--spacing-lg);
}

.nav-link {
    text-decoration: none;
    color: var(--gray-600);
    font-weight: 500;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius);
    transition: all 0.2s ease;
}

.nav-link:hover {
    color: var(--primary);
    background-color: var(--gray-100);
}

.nav-link.active {
    color: var(--secondary);
    background-color: var(--gray-100);
}

/* Main Content (old layout) */
.main {
    min-height: calc(100vh - 140px); /* Account for header and footer */
    padding: var(--spacing-xl) 0;
}

.main-container {
    max-width: 95%;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}

/* Footer */
.footer {
    background-color: var(--color-surface);
    border-top: 1px solid var(--gray-200);
    padding: var(--spacing-lg) 0;
    margin-top: auto;
}

.footer-container {
    max-width: 95%;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
    text-align: center;
    color: var(--gray-600);
}

/* Sidebar Layout Footer */
.sidebar-layout .footer {
    margin-left: var(--sidebar-width, 200px);
}

/* Auto-hide rests on the 60px rail. The lock stays at min-width 769px so it
   does not beat the mobile margin-left: 0 rule. The max-width 1024px
   .main-content / footer margins are less specific, so they do not need a copy. */
@media (min-width: 769px) {
    body.sidebar-autohide .main-content,
    body.sidebar-autohide #page-content .main-content,
    body.sidebar-autohide .sidebar-layout .footer {
        margin-left: 60px;
    }

    .sidebar.auto-hide:not(.collapsed) {
        width: var(--sidebar-width, 200px);
        box-shadow: 8px 0 28px rgba(0, 0, 0, 0.4);
    }
}

.sidebar.auto-hide .sidebar-collapse-btn {
    background: rgba(255, 255, 255, 0.28);
    color: white;
}

.sidebar.auto-hide .sidebar-collapse-btn:hover {
    background: rgba(255, 255, 255, 0.4);
    color: white;
}

/* Toast Notifications */
#toast-container {
    position: fixed;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    z-index: 10200;
    isolation: isolate;
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.4;
    min-width: 280px;
    max-width: 420px;
    pointer-events: auto;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08);
    opacity: 0;
    transform: translateX(100%);
    transition: none;
}

.toast-enter {
    animation: toastSlideIn 0.3s ease-out forwards;
}

.toast-exit {
    animation: toastSlideOut 0.25s ease-in forwards;
}

@keyframes toastSlideIn {
    from { opacity: 0; transform: translateY(-1rem); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes toastSlideOut {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-1rem); }
}

.toast-icon {
    display: flex;
    flex-shrink: 0;
}

.toast-msg {
    flex: 1;
}

.toast-close {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    background: transparent;
    font-size: 1.125rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 4px;
    opacity: 0.6;
    transition: opacity 0.15s;
}

.toast-close:hover { opacity: 1; }

.toast-success {
    background: var(--toast-success-bg);
    color: var(--toast-success-fg);
    border: 1px solid var(--toast-success-border);
}
.toast-success .toast-close { color: var(--toast-success-fg); }

.toast-error {
    background: var(--toast-error-bg);
    color: var(--toast-error-fg);
    border: 1px solid var(--toast-error-border);
}
.toast-error .toast-close { color: var(--toast-error-fg); }

.toast-warning {
    background: var(--toast-warning-bg);
    color: var(--toast-warning-fg);
    border: 1px solid var(--toast-warning-border);
}
.toast-warning .toast-close { color: var(--toast-warning-fg); }

.toast-info {
    background: var(--toast-info-bg);
    color: var(--toast-info-fg);
    border: 1px solid var(--toast-info-border);
}
.toast-info .toast-close { color: var(--toast-info-fg); }

@media (max-width: 480px) {
    #toast-container {
        left: 1rem;
        right: 1rem;
        top: 0.5rem;
        transform: none;
    }
    .toast {
        min-width: 0;
        max-width: none;
    }
}

/* Table Helpers */
.table-wrap {
    overflow: auto;
    max-height: 70vh;
    border: 1px solid var(--gray-200);
    border-radius: var(--border-radius);
    background-color: var(--color-surface);
}

.table-wrap table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}

.table-wrap thead {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
}

.table-wrap th {
    padding: var(--spacing-md);
    text-align: left;
    font-weight: 600;
    color: var(--gray-700);
    background-color: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
}

.table-wrap td {
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--gray-100);
    vertical-align: top;
}

.table-wrap tbody tr:hover {
    background-color: var(--gray-50);
}

/* Never put display:flex or display:grid on a real <td>. That takes the
   cell out of table layout so its border-bottom no longer shares the row
   height and the line jogs at Actions. Put the button row on this wrapper. */
.td-actions-inner {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

/* List headers wrap to two lines only once column widths are pinned.
   Auto layout measures headers on one line; wrapping there would shrink
   new columns. Never clip the th itself: the resize handle sits half
   outside the cell. */
.job-table.widths-set th .sort-link,
.job-table.widths-set th .col-head-label,
.part-table[style*="table-layout: fixed"] th .sort-link,
.part-table[style*="table-layout: fixed"] th .col-head-label,
.part-table[style*="table-layout:fixed"] th .sort-link,
.part-table[style*="table-layout:fixed"] th .col-head-label,
.engine-table[style*="table-layout: fixed"] th .sort-link,
.engine-table[style*="table-layout: fixed"] th .col-head-label,
.engine-table[style*="table-layout:fixed"] th .sort-link,
.engine-table[style*="table-layout:fixed"] th .col-head-label,
.machine-table[style*="table-layout: fixed"] th .sort-link,
.machine-table[style*="table-layout: fixed"] th .col-head-label,
.machine-table[style*="table-layout:fixed"] th .sort-link,
.machine-table[style*="table-layout:fixed"] th .col-head-label {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    white-space: normal;
    overflow-wrap: break-word;
    max-width: 100%;
    min-width: 0;
    line-height: 1.25;
    text-align: inherit;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid transparent;
    border-radius: var(--border-radius);
    font-size: var(--font-size-sm);
    font-weight: 500;
    /* <button> doesn't inherit font/line-height by default, so without
       these <button class="btn"> renders in the UA button font and a
       hair taller than its sibling <a class="btn"> elements. */
    font-family: inherit;
    line-height: 1.25;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

.btn-primary {
    background-color: var(--primary);
    color: white;
    border-color: var(--primary);
}

.btn-primary:hover {
    background-color: var(--gray-700);
    border-color: var(--gray-700);
}

.btn-secondary {
    background-color: var(--secondary);
    color: white;
    border-color: var(--secondary);
}

.btn-secondary:hover {
    background-color: var(--brand-red-dark);
    border-color: var(--brand-red-dark);
}

.btn-outline {
    background-color: transparent;
    color: var(--primary);
    border-color: var(--gray-300);
}

.btn-outline:hover {
    background-color: var(--gray-50);
    border-color: var(--gray-400);
}

/* Dark: --primary is leftover brand-gray (#4a5568) and is not remapped, so
   ghost buttons (Print Schedule, QuickBooks Sync, other list-header outlines)
   paint mid-dark text/icon/border on a near-black page. Keep the outline
   style — just use theme text and a border that clears the page. */
[data-theme="dark"] .btn-outline {
    color: var(--color-text);
    border-color: var(--gray-400);
}

[data-theme="dark"] .btn-outline:hover {
    background-color: var(--gray-200);
    border-color: var(--gray-500);
    color: var(--color-text);
}

/* Dark: --primary is leftover brand-gray (#4a5568) and is not remapped;
   hover uses remapped --gray-700 which becomes pale. Mid-slate fill so
   white label text clears the navy page. Keep slate identity — not brand-red. */
[data-theme="dark"] .btn-primary {
    background-color: #718096;
    border-color: #718096;
    color: #fff;
}

[data-theme="dark"] .btn-primary:hover {
    background-color: #8a9bb0;
    border-color: #8a9bb0;
}

@media (prefers-color-scheme: dark) {
    [data-theme="system"] .btn-outline {
        color: var(--color-text);
        border-color: var(--gray-400);
    }

    [data-theme="system"] .btn-outline:hover {
        background-color: var(--gray-200);
        border-color: var(--gray-500);
        color: var(--color-text);
    }

    [data-theme="system"] .btn-primary {
        background-color: #718096;
        border-color: #718096;
        color: #fff;
    }

    [data-theme="system"] .btn-primary:hover {
        background-color: #8a9bb0;
        border-color: #8a9bb0;
    }
}

/* Outlined "danger" variant used by the shared unsaved-changes modal
   (Don't Save) and a handful of destructive secondary actions. This rule
   used to live only in form-page.css, which is *not* loaded by base.html,
   so on pages outside the forms bundle (e.g. /reports/scorecard/thresholds/)
   the button rendered as a plain unstyled <button>. */
.btn-danger-outline,
.btn-outline-danger {
    background: var(--color-surface);
    color: var(--error);
    border: 1px solid var(--gray-300);
}

.btn-danger-outline:hover,
.btn-outline-danger:hover {
    background: #fef2f2;
    border-color: var(--error);
}

/* Dark: --error stays brand #8B0000 (unreadable on navy). Use toast-error ink. */
[data-theme="dark"] .btn-danger-outline,
[data-theme="dark"] .btn-outline-danger {
    color: var(--toast-error-fg);
    border-color: var(--toast-error-border);
}

/* Dark: light-pink hover (#fef2f2) flashes on a dark row. Tint toast-error instead. */
[data-theme="dark"] .btn-danger-outline:hover,
[data-theme="dark"] .btn-outline-danger:hover {
    background: color-mix(in srgb, var(--toast-error-fg) 22%, var(--color-surface));
    border-color: var(--toast-error-border);
    color: var(--toast-error-fg);
}

@media (prefers-color-scheme: dark) {
    [data-theme="system"] .btn-danger-outline,
    [data-theme="system"] .btn-outline-danger {
        color: var(--toast-error-fg);
        border-color: var(--toast-error-border);
    }

    [data-theme="system"] .btn-danger-outline:hover,
    [data-theme="system"] .btn-outline-danger:hover {
        background: color-mix(in srgb, var(--toast-error-fg) 22%, var(--color-surface));
        border-color: var(--toast-error-border);
        color: var(--toast-error-fg);
    }
}

/* Forms */
.form-group {
    margin-bottom: var(--spacing-lg);
}

.form-label {
    display: block;
    margin-bottom: var(--spacing-sm);
    font-weight: 500;
    color: var(--gray-700);
}

.form-control {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--gray-300);
    border-radius: var(--border-radius);
    font-size: var(--font-size-base);
    transition: border-color 0.2s ease;
}

.form-control:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--color-focus-ring);
}

/* HTMX Forms and Related Tables */
.add-form-container {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
    margin-top: var(--spacing-md);
}

.add-form-container h4 {
    margin-bottom: var(--spacing-md);
    color: var(--gray-900);
    font-size: var(--font-size-lg);
}

.form-actions {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-lg);
}

.related-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: var(--spacing-md);
}

.related-table th {
    background: var(--gray-50);
    padding: var(--spacing-sm) var(--spacing-md);
    text-align: left;
    font-weight: 600;
    color: var(--gray-700);
    border-bottom: 2px solid var(--gray-200);
}

.related-table td {
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid var(--gray-100);
    vertical-align: top;
}

.related-table tbody tr:hover {
    background-color: var(--gray-50);
}

.empty-message {
    text-align: center;
    padding: var(--spacing-xl);
    color: var(--gray-500);
    background: var(--gray-50);
    border-radius: var(--border-radius);
    font-style: italic;
}

.btn-sm {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-xs);
}

.btn-danger {
    background-color: var(--error);
    color: white;
    border-color: var(--error);
}

.btn-danger:hover {
    background-color: var(--brand-red-dark);
    border-color: var(--brand-red-dark);
}

.btn-warning {
    background-color: #f59e0b;
    color: white;
    border-color: #f59e0b;
}

.btn-warning:hover {
    background-color: #d97706;
    border-color: #d97706;
    color: white;
}

.model3d-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    height: 22px;
    padding: 0 0.4rem;
    font-size: 0.6875rem;
    font-weight: 600;
    font-family: inherit;
    line-height: 1;
    border-radius: 999px;
    border: 1px solid var(--gray-300);
    background: var(--color-surface);
    color: var(--gray-700);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    flex-shrink: 0;
}

.model3d-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--gray-50);
}

.model3d-btn svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

[data-theme="dark"] .model3d-btn {
    border-color: var(--gray-400);
    color: var(--color-text);
    background: var(--color-surface);
}

[data-theme="dark"] .model3d-btn:hover {
    background: var(--gray-200);
    border-color: var(--gray-500);
    color: var(--color-text);
}

.alert {
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-md);
}

.alert-info {
    background-color: #ebf8ff;
    color: var(--info);
    border: 1px solid #bee3f8;
}

.mt-3 {
    margin-top: var(--spacing-md);
}

/* Modal Styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-container {
    background: var(--color-surface);
    border-radius: var(--border-radius);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--gray-200);
}

.modal-header h3 {
    margin: 0;
    color: var(--gray-900);
}

.modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--gray-500);
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-close:hover {
    color: var(--gray-700);
}

.modal-body {
    padding: var(--spacing-lg);
}

/* Kit dialogs use .modal-content. home.css fills that class, and bill
   and quote pages do not load it, so the panel was transparent in light
   mode. Both kit panels get an opaque surface in every theme. */
.kit-add-modal,
.kit-alt-modal {
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
}

.kit-alt-modal .kit-alt-modal-header {
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
}

.kit-alt-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
}

.kit-alt-kit-line {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.5rem;
    min-width: 0;
}

.kit-alt-kit-line span {
    color: var(--color-text-muted);
    font-weight: 400;
}

.kit-add-modal .modal-footer,
.kit-alt-modal .modal-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0;
    border-top: 1px solid var(--color-border);
    padding: var(--spacing-md) var(--spacing-lg) var(--spacing-lg);
}

[data-theme="dark"] .kit-add-modal,
[data-theme="dark"] .kit-alt-modal {
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] .kit-add-modal .modal-header h3,
[data-theme="dark"] .kit-alt-modal .modal-header h3,
[data-theme="dark"] .kit-add-modal .kit-alt-footer-row,
[data-theme="dark"] .kit-alt-modal .kit-alt-footer-row,
[data-theme="dark"] .kit-add-modal .kit-alt-choice,
[data-theme="dark"] .kit-alt-modal .kit-alt-choice {
    color: var(--color-text);
}

[data-theme="dark"] .kit-add-modal .modal-close,
[data-theme="dark"] .kit-alt-modal .modal-close,
[data-theme="dark"] .kit-add-modal .kit-alt-choice-desc,
[data-theme="dark"] .kit-alt-modal .kit-alt-choice-desc,
[data-theme="dark"] .kit-add-modal .kit-alt-slot-label,
[data-theme="dark"] .kit-alt-modal .kit-alt-slot-label,
[data-theme="dark"] .kit-add-modal .kit-alt-slot-readonly,
[data-theme="dark"] .kit-alt-modal .kit-alt-slot-readonly,
[data-theme="dark"] .kit-add-modal .kit-alt-relation,
[data-theme="dark"] .kit-alt-modal .kit-alt-relation {
    color: var(--color-text-muted);
}

[data-theme="dark"] .kit-add-modal .kit-alt-choice,
[data-theme="dark"] .kit-alt-modal .kit-alt-choice {
    background: var(--color-surface);
    border-color: var(--gray-400);
}

[data-theme="dark"] .kit-add-modal .kit-alt-choice-selected,
[data-theme="dark"] .kit-alt-modal .kit-alt-choice-selected {
    background: var(--gray-200);
    color: var(--color-text);
    border-color: var(--gray-500);
}

[data-theme="dark"] .kit-add-modal .kit-alt-choice-selected .kit-alt-choice-desc,
[data-theme="dark"] .kit-alt-modal .kit-alt-choice-selected .kit-alt-choice-desc {
    color: var(--color-text);
}

[data-theme="dark"] .kit-add-modal .form-control,
[data-theme="dark"] .kit-alt-modal .form-control {
    background: var(--color-bg);
    color: var(--color-text);
    border-color: var(--gray-400);
}

[data-theme="dark"] .kit-add-modal .modal-footer,
[data-theme="dark"] .kit-alt-modal .modal-footer {
    border-top: 1px solid var(--color-border);
    padding: var(--spacing-md) var(--spacing-lg) var(--spacing-lg);
}

@media (prefers-color-scheme: dark) {
    [data-theme="system"] .kit-add-modal,
    [data-theme="system"] .kit-alt-modal {
        background: var(--color-surface);
        color: var(--color-text);
        border: 1px solid var(--color-border);
        border-radius: 0.5rem;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
    }

    [data-theme="system"] .kit-add-modal .modal-header h3,
    [data-theme="system"] .kit-alt-modal .modal-header h3,
    [data-theme="system"] .kit-add-modal .kit-alt-footer-row,
    [data-theme="system"] .kit-alt-modal .kit-alt-footer-row,
    [data-theme="system"] .kit-add-modal .kit-alt-choice,
    [data-theme="system"] .kit-alt-modal .kit-alt-choice {
        color: var(--color-text);
    }

    [data-theme="system"] .kit-add-modal .modal-close,
    [data-theme="system"] .kit-alt-modal .modal-close,
    [data-theme="system"] .kit-add-modal .kit-alt-choice-desc,
    [data-theme="system"] .kit-alt-modal .kit-alt-choice-desc,
    [data-theme="system"] .kit-add-modal .kit-alt-slot-label,
    [data-theme="system"] .kit-alt-modal .kit-alt-slot-label,
    [data-theme="system"] .kit-add-modal .kit-alt-slot-readonly,
    [data-theme="system"] .kit-alt-modal .kit-alt-slot-readonly,
    [data-theme="system"] .kit-add-modal .kit-alt-relation,
    [data-theme="system"] .kit-alt-modal .kit-alt-relation {
        color: var(--color-text-muted);
    }

    [data-theme="system"] .kit-add-modal .kit-alt-choice,
    [data-theme="system"] .kit-alt-modal .kit-alt-choice {
        background: var(--color-surface);
        border-color: var(--gray-400);
    }

    [data-theme="system"] .kit-add-modal .kit-alt-choice-selected,
    [data-theme="system"] .kit-alt-modal .kit-alt-choice-selected {
        background: var(--gray-200);
        color: var(--color-text);
        border-color: var(--gray-500);
    }

    [data-theme="system"] .kit-add-modal .kit-alt-choice-selected .kit-alt-choice-desc,
    [data-theme="system"] .kit-alt-modal .kit-alt-choice-selected .kit-alt-choice-desc {
        color: var(--color-text);
    }

    [data-theme="system"] .kit-add-modal .form-control,
    [data-theme="system"] .kit-alt-modal .form-control {
        background: var(--color-bg);
        color: var(--color-text);
        border-color: var(--gray-400);
    }

    [data-theme="system"] .kit-add-modal .modal-footer,
    [data-theme="system"] .kit-alt-modal .modal-footer {
        border-top: 1px solid var(--color-border);
        padding: var(--spacing-md) var(--spacing-lg) var(--spacing-lg);
    }
}

.modal-actions {
    display: flex;
    gap: var(--spacing-sm);
    justify-content: flex-end;
    margin-top: var(--spacing-lg);
}

/* Unsaved Changes Modal */
.unsaved-modal-overlay {
    /* Above quote Part Details (10150) and the hoisted part-picker (10100).
       Stay below .po-req-overlay (10200) so Print/Email PO prompts still win. */
    z-index: 10175;
    animation: unsaved-fade-in 0.15s ease;
}

@keyframes unsaved-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.unsaved-modal-container {
    max-width: 440px;
    animation: unsaved-slide-in 0.15s ease;
}

@keyframes unsaved-slide-in {
    from { opacity: 0; transform: translateY(-12px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.unsaved-modal-actions {
    display: flex;
    gap: var(--spacing-sm);
    justify-content: flex-end;
    padding: var(--spacing-md) var(--spacing-lg);
    border-top: 1px solid var(--gray-200);
}

/* Section Actions */
.section-actions {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--gray-200);
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: var(--spacing-xl);
    color: var(--gray-500);
}

.empty-state svg {
    width: 40px;
    height: 40px;
    margin-bottom: 0.5rem;
    opacity: 0.5;
}

.empty-state p {
    margin-bottom: var(--spacing-lg);
    font-size: var(--font-size-lg);
}

.empty-actions {
    display: flex;
    gap: var(--spacing-sm);
    justify-content: center;
    flex-wrap: wrap;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .sidebar {
        width: var(--sidebar-width, 180px);
    }
    
    .main-content {
        margin-left: var(--sidebar-width, 180px);
    }
    
    .sidebar-layout .footer {
        margin-left: var(--sidebar-width, 180px);
    }

    .sidebar.collapsed ~ .main-content,
    .sidebar.collapsed ~ #page-content .main-content {
        margin-left: 60px;
    }
}

@media (max-width: 768px) {
    /* Sidebar becomes overlay on mobile */
    .sidebar {
        width: 260px;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }

    .sidebar-resize-handle {
        display: none;
    }
    
    .sidebar.open {
        transform: translateX(0);
    }
    
    .main-content {
        margin-left: 0;
    }
    
    .sidebar-layout .footer {
        margin-left: 0;
    }
    
    /* Old header styles for mobile compatibility */
    .header-container {
        flex-direction: column;
        gap: var(--spacing-md);
    }
    
    .header-nav .nav-list {
        gap: var(--spacing-md);
    }
    
    .main-container,
    .main-content-container {
        max-width: 100%;
        padding: var(--spacing-md);
    }
    
    .table-wrap {
        font-size: 12px;
    }
    
    .table-wrap th,
    .table-wrap td {
        padding: var(--spacing-sm);
    }
}

/* Utility Classes */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--spacing-sm); }
.mb-2 { margin-bottom: var(--spacing-md); }
.mb-3 { margin-bottom: var(--spacing-lg); }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--spacing-sm); }
.mt-2 { margin-top: var(--spacing-md); }
.mt-3 { margin-top: var(--spacing-lg); }
.mt-auto { margin-top: auto; }

.p-0 { padding: 0; }
.p-1 { padding: var(--spacing-sm); }
.p-2 { padding: var(--spacing-md); }
.p-3 { padding: var(--spacing-lg); }

/* Demo Page Styles */
.page-header {
    margin-bottom: var(--spacing-2xl);
    text-align: center;
}

.page-header h1 {
    color: var(--primary);
    margin-bottom: var(--spacing-md);
}

.lead {
    font-size: var(--font-size-lg);
    color: var(--gray-600);
    margin-bottom: 0;
}

.demo-section {
    margin-bottom: var(--spacing-2xl);
    padding: var(--spacing-lg);
    background-color: var(--color-surface);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow);
}

.demo-section h2 {
    color: var(--primary);
    margin-bottom: var(--spacing-lg);
    border-bottom: 2px solid var(--gray-200);
    padding-bottom: var(--spacing-sm);
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-lg);
    margin-top: var(--spacing-lg);
}

.feature-card {
    padding: var(--spacing-lg);
    background-color: var(--gray-50);
    border-radius: var(--border-radius);
    border: 1px solid var(--gray-200);
}

.feature-card h3 {
    color: var(--primary);
    margin-bottom: var(--spacing-md);
    font-size: var(--font-size-base);
}

.action-buttons {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    justify-content: center;
}

.btn-sm {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: 12px;
}

.status-badge {
    display: inline-block;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
}

.status-active {
    background-color: #f0fff4;
    color: var(--success);
    border: 1px solid #c6f6d5;
}

/* Import System Styles */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.stat-card {
    background: var(--color-surface);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    text-align: center;
    border: 1px solid var(--gray-200);
}

.stat-number {
    font-size: 2rem;
    font-weight: bold;
    color: var(--primary);
    margin-bottom: var(--spacing-xs);
}

.stat-label {
    color: var(--gray-600);
    font-size: var(--font-size-sm);
}

.status-badge.status-uploaded {
    background-color: var(--gray-100);
    color: var(--gray-700);
}

.status-badge.status-mapped {
    background-color: var(--blue-100);
    color: var(--blue-800);
}

.status-badge.status-processing {
    background-color: var(--warning);
    color: white;
}

.status-badge.status-completed {
    background-color: var(--success);
    color: white;
}

.status-badge.status-failed {
    background-color: var(--error);
    color: white;
}

.status-badge.status-cancelled {
    background-color: #6c757d;
    color: white;
}

.status-badge.status-reverted {
    background-color: #17a2b8;
    color: white;
}

.badge {
    display: inline-block;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius);
    font-size: var(--font-size-xs);
    font-weight: 500;
    text-transform: uppercase;
}

.badge-csv {
    background-color: var(--success);
    color: white;
}

.badge-xlsx {
    background-color: var(--info);
    color: white;
}

.progress-bar {
    width: 100%;
    height: 8px;
    background-color: var(--gray-200);
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background-color: var(--primary);
    transition: width 0.3s ease;
}

/* Error Messages */
.error-message {
    color: var(--error);
    font-size: var(--font-size-sm);
    background-color: #fed7d7;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius);
    border: 1px solid #feb2b2;
}

/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
    padding: var(--spacing-md);
}

.page-link {
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--gray-300);
    border-radius: var(--border-radius);
    text-decoration: none;
    color: var(--gray-700);
    background-color: var(--color-surface);
    transition: all 0.2s ease;
}

.page-link:hover {
    background-color: var(--gray-50);
    border-color: var(--gray-400);
    color: var(--gray-900);
}

.page-info {
    color: var(--gray-600);
    font-size: var(--font-size-sm);
}

/* Text utilities */
.text-muted {
    color: var(--gray-500);
    font-style: italic;
}

/* Card Components */
.card {
    background: var(--color-surface);
    border: 1px solid var(--gray-200);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--spacing-lg);
}

.card-header {
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-header h2 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--gray-900);
}

.card-body {
    padding: var(--spacing-lg);
}

.card-actions {
    display: flex;
    gap: var(--spacing-sm);
}

/* Info Grid */
.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-md);
}

.info-item {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.info-item label {
    font-weight: 600;
    color: var(--gray-700);
    font-size: var(--font-size-sm);
}

.info-item span {
    color: var(--gray-900);
}

.info-item.full-width {
    grid-column: 1 / -1;
}

/* Form Grid */
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-md);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.form-group label {
    font-weight: 600;
    color: var(--gray-700);
    font-size: var(--font-size-sm);
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: var(--spacing-sm);
    border: 1px solid var(--gray-300);
    border-radius: var(--border-radius);
    font-size: var(--font-size-sm);
    transition: border-color 0.2s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.form-group.full-width {
    grid-column: 1 / -1;
}

.form-actions {
    display: flex;
    gap: var(--spacing-sm);
    justify-content: flex-end;
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--gray-200);
}

.form-inline {
    background: var(--gray-50);
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    border: 1px solid var(--gray-200);
    margin-bottom: var(--spacing-md);
}

/* Badge variants */
.badge-success {
    background-color: var(--success);
    color: white;
}

.badge-warning {
    background-color: var(--warning);
    color: white;
}

.badge-error {
    background-color: var(--error);
    color: white;
}

/* Loading state */
.loading {
    text-align: center;
    padding: var(--spacing-xl);
    color: var(--gray-500);
}

/* Help text */
.help-text {
    font-size: var(--font-size-sm);
    color: var(--gray-500);
    margin-top: var(--spacing-xs);
}

/* Field error */
.field-error {
    color: var(--error);
    font-size: var(--font-size-sm);
    margin-top: var(--spacing-xs);
}

/* ===== Modal System (po-modal) ===== */

.po-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: poModalFadeIn 0.2s ease-out;
}

/*
 * QuickBooks match-review modals (customer + vendor) use a robust open/close
 * pattern driven by an ``is-open`` class instead of inline ``style.display``
 * toggles. The modal starts hidden, only renders when ``is-open`` is added by
 * the delegated click handler, and sits above the QB Sync modal overlay
 * (``.qb-modal-overlay`` at z-index 5000) so it always wins the stacking
 * battle even if the parent page had it open.
 *
 * Specificity (two classes) defeats the single-class ``.po-modal-overlay``
 * rule defined in form-page.css that purchasing pages load AFTER this file.
 */
.po-modal-overlay.qb-match-modal {
    display: none;
}

.po-modal-overlay.qb-match-modal.is-open {
    display: flex;
}

@keyframes poModalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.po-modal {
    background: var(--color-surface);
    border-radius: 0.75rem;
    width: 90%;
    max-width: 700px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    animation: poModalSlideIn 0.2s ease-out;
}

.po-modal-sm { max-width: 500px; }
.po-modal-sm .po-modal-body { max-height: calc(90vh - 140px); overflow-y: auto; }

.po-modal-md { max-width: 600px; }

.po-modal-lg {
    max-width: 900px;
    height: 75vh;
    max-height: 700px;
    min-height: 500px;
}

.po-modal-search {
    height: 70vh;
    max-height: 600px;
    min-height: 400px;
}

.po-modal-xl {
    max-width: 1000px;
    height: 80vh;
    max-height: 800px;
    min-height: 400px;
}

.po-modal-full {
    width: calc(100vw - 2rem);
    max-width: calc(100vw - 2rem);
    height: 85vh;
    max-height: 90vh;
    min-height: 400px;
}

@keyframes poModalSlideIn {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

.po-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--gray-200);
    flex-shrink: 0;
}

.po-modal-title {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--gray-900);
}

.po-modal-title svg { color: var(--gray-500); }

.po-modal-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.header-qty-group {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--gray-600);
}

.header-qty-input {
    width: 56px;
    padding: var(--spacing-xs) var(--spacing-sm);
    border: 1px solid var(--gray-300);
    border-radius: var(--border-radius);
    font-size: var(--font-size-sm);
    text-align: center;
    background: var(--color-surface);
    transition: border-color 0.2s ease;
}

.header-qty-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--color-focus-ring);
}

.po-modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0.375rem;
    color: var(--gray-400);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    transition: all 0.15s ease;
}

.po-modal-close:hover {
    background: var(--gray-100);
    color: var(--gray-600);
}

.po-modal-close svg {
    display: block;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* PDF preview modal (SGRPrint.previewPdfInModal) — keep close control easy to hit */
#sgr-pdf-preview-modal .po-modal-close {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
}

html.sgr-pdf-preview-open,
body.sgr-pdf-preview-open {
    overflow: hidden;
}

.po-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
}

.po-modal-body-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.po-modal-body-search {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
}

.po-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--gray-200);
    flex-shrink: 0;
}

.po-modal-footer-between { justify-content: space-between; }
.po-modal-footer-actions { display: flex; gap: 0.75rem; }

/* Job/ticket pages load styles.css, not form-page.css. Without overflow-y
   here, .po-modal-body-scroll only clips at max-height and the list paints
   over the footer. */
.po-modal-body-scroll {
    overflow-y: auto;
}

/* When body/footer are wrapped in <form>, the form must participate in the
   modal flex column or the footer is pushed outside the clipped panel. */
.po-modal > form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}
.po-modal > form > .po-modal-body,
.po-modal > form > .po-modal-body-scroll {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
}

.po-modal-cancel {
    padding: 0.625rem 1.25rem;
    background: var(--color-surface);
    border: 1px solid var(--gray-300);
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gray-700);
    cursor: pointer;
    transition: all 0.15s ease;
}

.po-modal-cancel:hover {
    background: var(--gray-50);
    border-color: var(--gray-400);
}

.po-modal-submit {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: var(--primary);
    border: none;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: white;
    cursor: pointer;
    transition: all 0.15s ease;
}

.po-modal-submit:hover {
    background: var(--gray-700, #374151) !important;
    color: white !important;
}

.po-modal-submit-timer { background: #10b981; }
.po-modal-submit-timer:hover { background: #059669 !important; }

.po-modal-danger {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: var(--color-surface);
    border: 1px solid var(--gray-300);
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #dc3545;
    cursor: pointer;
    transition: all 0.15s ease;
}

.po-modal-danger:hover {
    background: #fef2f2;
    border-color: #dc3545;
}

/* Modal Info Box */
.po-info-box {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 0.5rem;
    padding: 1rem;
}

.po-info-row {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.875rem;
    color: var(--gray-700);
    margin-bottom: 0.5rem;
}

.po-info-row:last-child { margin-bottom: 0; }
.po-info-row svg { color: var(--gray-400); flex-shrink: 0; }
.po-info-row strong { color: var(--gray-600); }

/* Modal Form Fields */
.po-form-field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.po-form-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.po-required { color: var(--error); }

.po-form-input,
.po-form-select,
.po-form-textarea {
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--gray-300);
    border-radius: 0.375rem;
    font-size: 0.875rem;
    color: var(--gray-900);
    background: var(--color-surface);
    transition: all 0.15s ease;
}

.po-form-input:focus,
.po-form-select:focus,
.po-form-textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.po-form-input:hover:not(:disabled):not(:focus):not([readonly]),
.po-form-select:hover:not(:disabled):not(:focus):not([readonly]),
.po-form-textarea:hover:not(:disabled):not(:focus):not([readonly]) {
    border-color: var(--gray-400);
}

.po-form-input:disabled,
.po-form-select:disabled,
.po-form-textarea:disabled {
    background: var(--gray-100);
    color: var(--gray-500);
    cursor: not-allowed;
}

.po-form-input::placeholder,
.po-form-textarea::placeholder { color: var(--gray-400); }

.po-form-textarea { resize: vertical; min-height: 60px; }
.po-form-hint { font-size: 0.75rem; color: var(--gray-500); }

.po-input-with-prefix {
    display: flex;
    align-items: center;
    border: 1px solid var(--gray-300);
    border-radius: 0.375rem;
    overflow: hidden;
    background: var(--color-surface);
    transition: all 0.15s ease;
}
.po-input-with-prefix:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--color-focus-ring);
}
.po-input-prefix {
    padding: 0.625rem 0 0.625rem 0.875rem;
    color: var(--gray-500);
    font-size: 0.875rem;
    font-weight: 500;
    user-select: none;
}
/* Trailing affix, for units that follow the number ("10%") rather than lead it
   ("$100"). Padding is .po-input-prefix mirrored to the right edge. */
.po-input-suffix {
    padding: 0.625rem 0.875rem 0.625rem 0.25rem;
    color: var(--gray-500);
    font-size: 0.875rem;
    font-weight: 500;
    user-select: none;
    flex: 0 0 auto;
}
/* data-unit is optional: wrappers without it show both affixes as authored.
   With the prefix hidden, the input takes back the left padding it supplied. */
.po-input-with-prefix[data-unit="percent"] .po-input-prefix,
.po-input-with-prefix[data-unit="amount"] .po-input-suffix {
    display: none;
}
.po-input-with-prefix[data-unit="percent"] input {
    padding-left: 0.875rem;
}
.po-input-with-prefix .po-form-input,
.po-input-with-prefix .po-create-vendor-input,
.po-input-with-prefix .form-control {
    border: none;
    border-radius: 0;
    padding-left: 0.25rem;
    box-shadow: none;
}
.po-input-with-prefix .po-form-input:focus,
.po-input-with-prefix .po-create-vendor-input:focus,
.po-input-with-prefix .form-control:focus {
    box-shadow: none;
}
.po-input-with-prefix input[type="number"] {
    -moz-appearance: textfield;
    background: transparent;
}
.po-input-with-prefix input[type="number"]::-webkit-inner-spin-button,
.po-input-with-prefix input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.po-form-field input,
.po-form-field textarea {
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--gray-300);
    border-radius: 0.375rem;
    font-size: 0.875rem;
    color: var(--gray-900);
    background: var(--color-surface);
    transition: all 0.15s ease;
    width: 100%;
}

.po-form-field input:focus,
.po-form-field textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.po-field-error { font-size: 0.75rem; color: #dc3545; }

.po-form-group { margin-bottom: 1.25rem; }
.po-form-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.po-form-row.po-form-row-3col { grid-template-columns: repeat(3, 1fr); }
.po-form-row.po-form-row-4col { grid-template-columns: repeat(4, 1fr); }

.po-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--gray-200);
}

/* Modal Alerts */
.po-alert {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
}

.po-alert-error {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.po-alert svg { flex-shrink: 0; }

/* Modal Search Components */
.po-search-box {
    position: relative;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--gray-200);
}

.po-search-icon {
    position: absolute;
    left: 2.25rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-400);
    pointer-events: none;
}

.po-search-input {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.75rem;
    border: 1px solid var(--gray-300);
    border-radius: 0.5rem;
    font-size: 0.9375rem;
    background: var(--gray-50);
    transition: all 0.15s ease;
}

.po-search-input:focus {
    outline: none;
    background: var(--color-surface);
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.po-search-input::placeholder { color: var(--gray-400); }

.po-search-results {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.5rem;
}

.po-search-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
    color: var(--gray-400);
}

.po-search-placeholder svg { margin-bottom: 0.75rem; }
.po-search-placeholder p { margin: 0; font-size: 0.9375rem; }

/* Modal Checkbox List */
.po-checkbox-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.po-checkbox-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.po-checkbox-item:hover {
    background: var(--color-surface);
    border-color: var(--primary);
}

.po-checkbox {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
    cursor: pointer;
    flex-shrink: 0;
}

.po-checkbox-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--color-surface);
    border: 1px solid var(--gray-200);
    border-radius: 0.375rem;
    color: var(--gray-400);
    flex-shrink: 0;
}

.po-checkbox-content {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
}

.po-checkbox-label {
    font-size: 0.9375rem;
    color: var(--gray-700);
    font-weight: 500;
}

/* Modal Radio Group */
.po-radio-group {
    display: flex;
    gap: 1rem;
    margin-top: 0.25rem;
}

.po-radio-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--gray-700);
}

.po-radio-label input[type="radio"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--primary);
}

/* Modal Filter Tabs */
.filter-tabs {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--gray-200);
}

.filter-tab {
    background: none;
    border: none;
    padding: 0.75rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gray-600);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.15s ease;
}

.filter-tab:hover {
    color: var(--gray-900);
    background: var(--gray-50);
}

.filter-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

/* Dark: --primary is leftover brand-gray (#4a5568) and is not remapped, so
   .filter-tab.active text/underline disappears into the navy page. Use theme
   text and a border that clears the page. */
[data-theme="dark"] .filter-tab.active {
    color: var(--color-text);
    border-bottom-color: var(--color-text);
}

[data-theme="dark"] .filter-tab.active:hover {
    color: var(--color-text);
    border-bottom-color: var(--color-text);
}

@media (prefers-color-scheme: dark) {
    [data-theme="system"] .filter-tab.active {
        color: var(--color-text);
        border-bottom-color: var(--color-text);
    }

    [data-theme="system"] .filter-tab.active:hover {
        color: var(--color-text);
        border-bottom-color: var(--color-text);
    }
}

/* Modal Data Table */
.po-modal-body .data-table {
    width: 100%;
    border-collapse: collapse;
}

.po-modal-body .data-table th,
.po-modal-body .data-table td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--gray-200);
    font-size: 0.875rem;
}

.po-modal-body .data-table th {
    background: var(--gray-50);
    font-weight: 600;
    color: var(--gray-600);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    position: sticky;
    top: 0;
    z-index: 10;
}

.po-modal-body .data-table tbody tr:hover { background: var(--gray-50); }

.po-modal-body input[type="checkbox"] {
    cursor: pointer;
    width: 16px;
    height: 16px;
    accent-color: var(--primary);
}

/* Timer Active Box */
.po-timer-active-box {
    background: #fef3c7;
    border: 1px solid #fbbf24;
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 0.5rem;
}

.po-timer-active-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    font-weight: 600;
    color: #92400e;
}

.po-timer-active-header svg { color: #f59e0b; }

.po-timer-active-info {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
}

.po-timer-active-item {
    display: flex;
    justify-content: space-between;
    color: #78350f;
}

.po-timer-active-item span:first-child {
    font-weight: 500;
    color: #92400e;
}

.po-timer-stop-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: #dc2626;
    border: none;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: white;
    cursor: pointer;
    transition: all 0.15s ease;
    width: 100%;
    justify-content: center;
}

.po-timer-stop-btn:hover { background: #b91c1c; }

/* Engine Filter Bar */
.engine-filter-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.5rem;
    border-bottom: 1px solid var(--gray-200);
    background: var(--gray-50);
}

.engine-filter-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--gray-500);
    white-space: nowrap;
}

.engine-filter-toggle {
    display: flex;
    gap: 0.25rem;
    background: var(--color-surface);
    border: 1px solid var(--gray-200);
    border-radius: 0.375rem;
    padding: 0.125rem;
}

.engine-filter-btn {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.3125rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--gray-600);
    background: transparent;
    border: none;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.engine-filter-btn:hover {
    color: var(--gray-900);
    background: var(--gray-100);
}

.engine-filter-btn.active {
    color: white;
    background: var(--primary, #4a5568);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.engine-filter-btn.active svg { stroke: white; }

/* Component Table */
.component-table {
    width: 100%;
    border-collapse: collapse;
}

.component-table th,
.component-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--gray-100);
    text-align: left;
    vertical-align: middle;
}

.component-table th {
    background-color: var(--gray-50);
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.component-table tbody tr:hover {
    background-color: var(--gray-50);
}

.component-table tbody tr:last-child td {
    border-bottom: none;
}

.component-table td.component-name {
    font-weight: 600;
}

.component-table td.component-name label {
    font-weight: 600;
}

.component-table input[type="checkbox"],
.component-table input[type="radio"] {
    margin-right: 0.5rem;
    cursor: pointer;
    accent-color: var(--primary);
}

.component-table label {
    display: inline;
    font-weight: normal;
    margin-bottom: 0;
    cursor: pointer;
    font-size: 0.875rem;
}

.component-table input[type="text"],
.component-table input[type="number"] {
    display: inline-block;
    width: auto;
    max-width: 120px;
    padding: 0.375rem 0.5rem;
    font-size: 0.875rem;
    border: 1px solid var(--gray-300);
    border-radius: 0.375rem;
}

.inline-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--gray-600);
    margin-right: 0.5rem;
}

/* ── Notification Styles (shared: dashboard + job page) ── */

.notification-filters {
    display: flex;
    gap: 0.3rem;
}

.notification-filter-btn {
    padding: 0.25rem 0.5rem;
    border: none;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    background: #f1f5f9;
    color: #64748b;
}

.notification-filter-btn.active {
    background: #8B0000;
    color: white;
}

/* Desktop OS notification opt-in toggle (lives in the notifications card header). */
.desktop-notif-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-right: 0.4rem;
    font-size: 0.7rem;
}

.desktop-notif-toggle-link {
    background: transparent;
    border: 1px solid #cbd5e1;
    color: #334155;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.desktop-notif-toggle-link:hover:not(:disabled) {
    border-color: #94a3b8;
    background: #f1f5f9;
}

.desktop-notif-toggle-link svg {
    width: 12px;
    height: 12px;
}

.desktop-notif-toggle-link:disabled {
    opacity: 0.6;
    cursor: progress;
}

/* "On" variant: green-tinted to signal the toggle is currently active. */
.desktop-notif-toggle-link.on {
    background: #ecfdf5;
    border-color: #a7f3d0;
    color: #047857;
}

.desktop-notif-toggle-link.on:hover:not(:disabled) {
    background: #d1fae5;
    border-color: #6ee7b7;
}

.desktop-notif-toggle-blocked {
    color: #b91c1c;
    font-size: 0.65rem;
    margin-left: 0.3rem;
}

.notification-list-main {
    display: flex;
    flex-direction: column;
}

.notification-item-main {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #f1f5f9;
    align-items: flex-start;
    transition: background-color 0.15s;
}

.notification-item-main:hover {
    background: var(--color-row-hover);
}

.notification-item-main:last-child {
    border-bottom: none;
}

.notification-item-main.unread {
    background: #fef7f7;
    border-left: 3px solid #8B0000;
}

.notification-item-main.unread:hover {
    background: #fef2f2;
}

.notification-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.notification-content {
    flex: 1;
    min-width: 0;
}

.notification-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.2rem;
}

.notification-from {
    font-weight: 600;
    font-size: 0.8rem;
    color: #1a202c;
}

.notification-time {
    font-size: 0.7rem;
    color: #9CA3AF;
}

.notification-message-main {
    font-size: 0.8rem;
    color: #4a5568;
    line-height: 1.4;
    margin-bottom: 0.25rem;
}

.notification-job-link {
    font-size: 0.7rem;
    color: #8B0000;
    text-decoration: none;
    font-weight: 500;
}

.notification-job-link:hover {
    text-decoration: underline;
}

.notification-job-ref {
    font-size: 0.7rem;
    color: #8B0000;
    font-weight: 500;
}

.notification-actions {
    display: flex;
    gap: 0.25rem;
    flex-shrink: 0;
}

.notification-action-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    background: var(--color-surface);
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s;
}

.notification-action-btn:hover {
    transform: scale(1.1);
}

.notification-action-btn svg {
    width: 16px;
    height: 16px;
}

.notification-action-btn[title="Mark as read"] {
    border-color: #10b981;
    color: #10b981;
}

.notification-action-btn[title="Mark as read"]:hover {
    background: #10b981;
    color: white;
}

.notification-action-btn[title="Mark as unread"] {
    border-color: #f59e0b;
    color: #f59e0b;
}

.notification-action-btn[title="Mark as unread"]:hover {
    background: #f59e0b;
    color: white;
}

.notification-action-btn[title="Reply"] {
    border-color: #3b82f6;
    color: #3b82f6;
}

.notification-action-btn[title="Reply"]:hover {
    background: #3b82f6;
    color: white;
}

/* ── Job Communications Card ── */

.notification-item-main.sent-by-me {
    background: #f0f4ff;
}

.notification-item-main.sent-by-me:hover {
    background: #e8eeff;
}

.notification-avatar.avatar-me {
    background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
}

.job-comm-scroll {
    max-height: 400px;
    overflow-y: auto;
}

.job-comm-send-form {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--gray-200);
    background: var(--gray-50);
}

.job-comm-input {
    flex: 1;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--gray-300);
    border-radius: 0.375rem;
    font-size: 0.8rem;
    font-family: inherit;
    color: var(--gray-900);
    background: var(--color-surface);
    transition: border-color 0.15s ease;
}

.job-comm-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.job-comm-input::placeholder {
    color: var(--gray-400);
}

.job-comm-send-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.85rem;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 0.375rem;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease;
    white-space: nowrap;
}

.job-comm-send-btn:hover {
    background: var(--gray-800);
}

.job-comm-send-btn svg {
    width: 14px;
    height: 14px;
}

.job-comm-voice-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    background: var(--color-surface);
    border: 2px solid var(--gray-300);
    border-radius: 0.375rem;
    color: var(--gray-500);
    cursor: pointer;
    transition: all 0.2s ease;
    overflow: hidden;
    padding: 0;
}

.job-comm-voice-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.job-comm-voice-btn.listening {
    background: linear-gradient(135deg, #8B0000 0%, #660000 100%);
    border-color: #8B0000;
    color: white;
    animation: pulse-glow 1.5s ease-in-out infinite;
}

.job-comm-voice-btn.listening .comm-mic-icon {
    animation: mic-bounce 0.5s ease-in-out infinite;
}

.comm-voice-pulse {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 0.375rem;
    background: rgba(139, 0, 0, 0.3);
    opacity: 0;
    pointer-events: none;
}

.job-comm-voice-btn.listening .comm-voice-pulse {
    animation: voice-pulse-anim 1.5s ease-out infinite;
}

@keyframes voice-pulse-anim {
    0% { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(1.5); opacity: 0; }
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(139, 0, 0, 0.4); }
    50% { box-shadow: 0 0 0 6px rgba(139, 0, 0, 0); }
}

@keyframes mic-bounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

.job-comm-voice-status {
    font-size: 0.7rem;
    color: var(--gray-500);
    padding: 0 1rem 0.5rem;
    min-height: 0;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.job-comm-voice-status:empty {
    display: none;
}

.job-comm-voice-status.listening {
    color: #8B0000;
    font-weight: 500;
}

.job-comm-voice-status.error {
    color: #ef4444;
}

.voice-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #8B0000;
    animation: blink 1s ease-in-out infinite;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* ---- Communication recipient picker button ---- */
.comm-recipients-btn {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.6rem;
    background: var(--color-surface);
    border: 1px solid var(--gray-300);
    border-radius: 0.375rem;
    font-size: 0.75rem;
    color: var(--gray-600);
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    flex-shrink: 0;
}
.comm-recipients-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}
.comm-recipients-btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}
.comm-recipient-label {
    max-width: 11rem;
    overflow: hidden;
    text-overflow: ellipsis;
}
.comm-label-warn {
    color: #ef4444;
}

/* Dark: leftover slate hex on Team Communication thread (Home remaps the
   same classes in home.css; job page does not load that sheet). Light unchanged. */
[data-theme="dark"] .notification-from,
[data-theme="dark"] .notification-message-main {
    color: var(--color-text);
}
[data-theme="dark"] .notification-time,
[data-theme="dark"] .notification-filter-btn:not(.active) {
    color: var(--color-text-muted);
}
[data-theme="dark"] .notification-filter-btn:not(.active) {
    background: var(--gray-50);
}
[data-theme="dark"] .notification-item-main {
    border-color: var(--color-border);
}
[data-theme="dark"] .notification-item-main.unread {
    background: rgba(139, 0, 0, 0.18);
}
[data-theme="dark"] .notification-item-main.unread:hover {
    background: rgba(139, 0, 0, 0.28);
}
[data-theme="dark"] .notification-item-main.sent-by-me {
    background: rgba(102, 126, 234, 0.16);
}
[data-theme="dark"] .notification-item-main.sent-by-me:hover {
    background: rgba(102, 126, 234, 0.24);
}
[data-theme="dark"] .notification-action-btn {
    border-color: var(--color-border);
    color: var(--color-text-muted);
}
[data-theme="dark"] .notification-action-btn[title="Mark as read"] {
    border-color: #10b981;
    color: #10b981;
}
[data-theme="dark"] .notification-action-btn[title="Mark as unread"] {
    border-color: #f59e0b;
    color: #f59e0b;
}
/* Hover must beat leftover light fill (#10b981 + color:white) AND the dark
   rest color (#10b981), which otherwise paints a solid green square with
   an invisible same-as-fill icon. */
[data-theme="dark"] .notification-action-btn:hover {
    background: color-mix(in srgb, var(--color-text-muted) 18%, var(--color-surface));
    border-color: var(--color-border);
    color: var(--color-text);
}
[data-theme="dark"] .notification-action-btn[title="Mark as read"]:hover {
    background: color-mix(in srgb, #10b981 18%, var(--color-surface));
    border-color: var(--color-border);
    color: var(--color-text);
}
[data-theme="dark"] .notification-action-btn[title="Mark as unread"]:hover {
    background: color-mix(in srgb, #f59e0b 18%, var(--color-surface));
    border-color: var(--color-border);
    color: var(--color-text);
}
[data-theme="dark"] .notification-action-btn[title="Reply"]:hover,
[data-theme="dark"] .notification-action-btn[title^="Reply"]:hover,
[data-theme="dark"] .notification-action-btn[title="Add a follow-up note"]:hover {
    background: color-mix(in srgb, #3b82f6 18%, var(--color-surface));
    border-color: var(--color-border);
    color: var(--color-text);
}

@media (prefers-color-scheme: dark) {
    [data-theme="system"] .notification-from,
    [data-theme="system"] .notification-message-main {
        color: var(--color-text);
    }
    [data-theme="system"] .notification-time,
    [data-theme="system"] .notification-filter-btn:not(.active) {
        color: var(--color-text-muted);
    }
    [data-theme="system"] .notification-filter-btn:not(.active) {
        background: var(--gray-50);
    }
    [data-theme="system"] .notification-item-main {
        border-color: var(--color-border);
    }
    [data-theme="system"] .notification-item-main.unread {
        background: rgba(139, 0, 0, 0.18);
    }
    [data-theme="system"] .notification-item-main.unread:hover {
        background: rgba(139, 0, 0, 0.28);
    }
    [data-theme="system"] .notification-item-main.sent-by-me {
        background: rgba(102, 126, 234, 0.16);
    }
    [data-theme="system"] .notification-item-main.sent-by-me:hover {
        background: rgba(102, 126, 234, 0.24);
    }
    [data-theme="system"] .notification-action-btn {
        border-color: var(--color-border);
        color: var(--color-text-muted);
    }
    [data-theme="system"] .notification-action-btn[title="Mark as read"] {
        border-color: #10b981;
        color: #10b981;
    }
    [data-theme="system"] .notification-action-btn[title="Mark as unread"] {
        border-color: #f59e0b;
        color: #f59e0b;
    }
    [data-theme="system"] .notification-action-btn:hover {
        background: color-mix(in srgb, var(--color-text-muted) 18%, var(--color-surface));
        border-color: var(--color-border);
        color: var(--color-text);
    }
    [data-theme="system"] .notification-action-btn[title="Mark as read"]:hover {
        background: color-mix(in srgb, #10b981 18%, var(--color-surface));
        border-color: var(--color-border);
        color: var(--color-text);
    }
    [data-theme="system"] .notification-action-btn[title="Mark as unread"]:hover {
        background: color-mix(in srgb, #f59e0b 18%, var(--color-surface));
        border-color: var(--color-border);
        color: var(--color-text);
    }
    [data-theme="system"] .notification-action-btn[title="Reply"]:hover,
    [data-theme="system"] .notification-action-btn[title^="Reply"]:hover,
    [data-theme="system"] .notification-action-btn[title="Add a follow-up note"]:hover {
        background: color-mix(in srgb, #3b82f6 18%, var(--color-surface));
        border-color: var(--color-border);
        color: var(--color-text);
    }
}

/* Legacy pac-container (unused after Places Autocomplete New); keep for safety */
.pac-container {
    z-index: 99999 !important;
}

/* Custom Places Autocomplete (New) suggestion list — match searchable-select chrome */
.sgr-places-dropdown {
    position: fixed;
    max-height: 240px;
    overflow-y: auto;
    background: var(--color-surface);
    border: 1px solid var(--primary, #2563eb);
    border-radius: 0.375rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 99999;
}

.sgr-places-option {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.125rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: none;
    background: transparent;
    text-align: left;
    font-size: 0.875rem;
    color: var(--gray-700, #374151);
    cursor: pointer;
    transition: background 0.1s ease;
}

.sgr-places-option:hover,
.sgr-places-option.sgr-places-option-active {
    background: var(--gray-100, #f3f4f6);
    color: var(--gray-900, #111827);
}

.sgr-places-option-main {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.sgr-places-option-secondary {
    font-size: 0.75rem;
    color: var(--gray-500, #6b7280);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* ============ Voice-to-Text Mic Button ============ */
.voice-textarea-wrapper {
    position: relative;
    display: block;
}

.voice-mic-btn {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 50%;
    background: var(--gray-100, #f3f4f6);
    color: var(--gray-500, #6b7280);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    z-index: 2;
    opacity: 0.7;
}

.voice-mic-btn:hover {
    background: var(--gray-200, #e5e7eb);
    color: var(--gray-700, #374151);
    opacity: 1;
}

.voice-mic-btn.voice-mic-recording {
    background: #fee2e2;
    color: #dc2626;
    opacity: 1;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.25);
    animation: voice-pulse 1.5s ease-in-out infinite;
}

@keyframes voice-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.25); }
    50%      { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0.10); }
}

/* ── Launcher Page ───────────────────────────────────────────── */

.launcher-page {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 1rem);
    padding: 1.5rem 1.5rem 0.5rem;
    overflow: hidden;
}

.launcher-header {
    text-align: center;
    flex-shrink: 0;
    padding-bottom: 0.75rem;
}

.launcher-logo {
    max-height: 48px;
    margin-bottom: 0.25rem;
}

.launcher-header h1 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gray-800);
}

.launcher-favorites-strip {
    flex-shrink: 0;
    margin-bottom: 0.75rem;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--gray-200);
    border-radius: var(--border-radius-lg);
    background: var(--gray-50);
}

.launcher-favorites-strip-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.45rem;
}

.launcher-favorites-strip-title {
    margin: 0;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gray-400);
}

.launcher-favorites-cap-hint {
    margin: 0;
    font-size: 0.75rem;
    color: var(--gray-500);
}

.launcher-favorites-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    min-height: 2rem;
}

.launcher-favorites-empty {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--gray-500);
}

.launcher-fav-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.55rem 0.3rem 0.35rem;
    border: 1px solid var(--gray-200);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--gray-700);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: grab;
    user-select: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.launcher-fav-chip:hover {
    border-color: var(--gray-300);
}

.launcher-fav-chip.is-dragging {
    opacity: 0.55;
    cursor: grabbing;
}

.launcher-fav-chip.drag-over-before {
    box-shadow: inset 3px 0 0 var(--brand-red);
}

.launcher-fav-chip.drag-over-after {
    box-shadow: inset -3px 0 0 var(--brand-red);
}

.launcher-fav-chip-handle {
    display: inline-flex;
    color: var(--gray-400);
}

.launcher-fav-chip-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.launcher-fav-chip-label {
    white-space: nowrap;
}

.launcher-columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    flex: 1;
    min-height: 0;
    align-content: start;
    overflow-y: auto;
}

.launcher-col {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.launcher-group-title {
    margin: 0.5rem 0 0;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gray-400);
    padding-left: 0.25rem;
}

.launcher-col .launcher-group-title:first-child {
    margin-top: 0;
}

.launcher-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.85rem;
    border: 1px solid var(--gray-200);
    border-radius: var(--border-radius-lg);
    background: var(--color-surface);
    color: var(--gray-700);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.launcher-btn-main:hover {
    background: var(--gray-50);
    color: var(--brand-red);
    border-color: var(--gray-200);
    box-shadow: none;
    transform: none;
}

.launcher-btn-main:active {
    background: var(--gray-100);
    transform: none;
    box-shadow: none;
}

.launcher-icon {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
}

.launcher-item {
    display: flex;
    align-items: stretch;
}

.launcher-item.is-sidebar-hidden .launcher-btn-main {
    color: var(--gray-500);
}

.launcher-btn-main {
    flex: 1;
    min-width: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
}

.launcher-item-actions {
    display: flex;
    flex-shrink: 0;
    align-items: stretch;
    border-top: 1px solid var(--gray-200);
    border-bottom: 1px solid var(--gray-200);
    background: var(--color-surface);
}

.launcher-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    padding: 0;
    border: none;
    border-left: 1px solid var(--gray-200);
    background: transparent;
    color: var(--gray-400);
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}

.launcher-action-btn:hover:not(:disabled) {
    color: var(--brand-red);
    background: var(--gray-50);
}

.launcher-action-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.launcher-action-btn svg {
    width: 15px;
    height: 15px;
}

.launcher-star-btn.is-on {
    color: #d69e2e;
}

.launcher-star-btn.is-on:hover:not(:disabled) {
    color: #b7791f;
}

.launcher-eye-btn.is-off {
    color: var(--gray-500);
}

.launcher-btn-newtab {
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 0.6rem;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: 1px solid var(--gray-200);
    color: var(--gray-400);
}

.launcher-btn-newtab svg {
    width: 16px;
    height: 16px;
}

.launcher-btn-newtab:hover {
    color: var(--brand-red);
    background: var(--gray-50);
    border-color: var(--gray-200);
    box-shadow: none;
    transform: none;
}

.launcher-btn-newtab:active {
    transform: none;
    box-shadow: none;
    background: var(--gray-100);
}

@media (max-width: 900px) {
    .launcher-columns {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 550px) {
    .launcher-columns {
        grid-template-columns: 1fr;
    }

    .launcher-page {
        overflow-y: auto;
        height: auto;
    }
}

/* Launcher page manual (opened from the book button). */
.po-modal-overlay.page-manual-overlay {
    z-index: 9999;
}

.po-modal.page-manual-dialog {
    width: min(68rem, calc(100vw - 2rem));
    max-width: calc(100vw - 2rem);
    height: min(85vh, 52rem);
    max-height: 85vh;
}

.page-manual-dialog > .po-search-box {
    flex-shrink: 0;
}

.page-manual-layout {
    display: flex;
    flex: 1;
    min-height: 0;
}

.page-manual-contents {
    flex: 0 0 15rem;
    align-self: stretch;
    position: sticky;
    top: 0;
    overflow: auto;
    border-right: 1px solid var(--gray-200);
    background: var(--gray-50);
    padding: 0.75rem 0 1rem;
}

.page-manual-contents-heading {
    margin: 0 0 0.35rem;
    padding: 0 1rem;
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--gray-500);
}

.page-manual-contents-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.page-manual-contents-link {
    display: block;
    padding: 0.35rem 1rem;
    color: var(--gray-700);
    text-decoration: none;
    font-size: var(--font-size-sm);
    line-height: 1.35;
}

.page-manual-contents-link:hover,
.page-manual-contents-link:focus {
    color: var(--brand-red);
    background: var(--gray-100);
}

.page-manual-empty {
    margin: 0.35rem 1rem 0;
    color: var(--gray-500);
    font-size: var(--font-size-sm);
}

.page-manual-body {
    flex: 1;
    min-width: 0;
    overflow: auto;
    padding: 1.25rem 1.5rem 1.75rem;
}

.page-manual-section[hidden],
.page-manual-contents-list li[hidden],
.page-manual-empty[hidden] {
    display: none !important;
}

.page-manual {
    margin: 0;
}

.page-manual-section + .page-manual-section {
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--gray-200);
}

.page-manual-section h2 {
    margin: 0 0 0.75rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--gray-900);
}

.page-manual-section h3 {
    margin: 1rem 0 0.35rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--gray-800);
}

.page-manual-section p,
.page-manual-section li {
    margin: 0.25rem 0;
    color: var(--gray-700);
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

.page-manual-section ul {
    margin: 0.25rem 0 0.5rem;
    padding-left: 1.25rem;
}

.page-manual-figure {
    margin: 0.75rem 0 0.5rem;
    max-width: 100%;
}

.page-manual-figure img {
    display: block;
    max-width: 100%;
    height: auto;
    border: 1px solid var(--gray-200);
    border-radius: 0.375rem;
}

.page-manual-figure figcaption {
    margin-top: 0.35rem;
    color: var(--gray-700);
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

@media (max-width: 720px) {
    .page-manual-layout {
        flex-direction: column;
    }

    .page-manual-contents {
        position: static;
        flex: 0 0 auto;
        max-height: 9.5rem;
        border-right: none;
        border-bottom: 1px solid var(--gray-200);
    }

    .page-manual-body {
        flex: 1;
        min-height: 0;
    }
}

/* ── Searchable Select ── */
.ss-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.ss-hidden-select {
    position: absolute !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
}

.ss-input {
    width: 100%;
    padding: 0.5rem 2.25rem 0.5rem 0.75rem;
    border: 1px solid var(--gray-300);
    border-radius: 0.375rem;
    font-size: 0.875rem;
    color: var(--gray-900);
    background: var(--color-surface);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    cursor: pointer;
    text-overflow: ellipsis;
}

.ss-input::placeholder {
    color: var(--gray-400);
}

.ss-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--color-focus-ring);
    cursor: text;
}

.ss-wrapper.ss-invalid .ss-input {
    border-color: var(--error);
    box-shadow: 0 0 0 3px rgba(139, 0, 0, 0.18);
}

.ss-wrapper.ss-invalid .ss-input:focus {
    border-color: var(--error);
    box-shadow: 0 0 0 3px rgba(139, 0, 0, 0.22);
}

.ss-wrapper.ss-active .ss-input {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-color: var(--primary);
}

.ss-wrapper.ss-active.ss-drop-up .ss-input {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 0.375rem;
    border-bottom-right-radius: 0.375rem;
}

.ss-chevron {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-400);
    pointer-events: all;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: transform 0.15s ease;
    z-index: 1;
    padding: 0.25rem;
}

.ss-wrapper.ss-active .ss-chevron {
    transform: translateY(-50%) rotate(180deg);
    color: var(--primary);
}

.ss-clear {
    position: absolute;
    right: 1.75rem;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    align-items: center;
    justify-content: center;
    width: 1.125rem;
    height: 1.125rem;
    border: none;
    background: var(--gray-300);
    color: white;
    border-radius: 50%;
    font-size: 0.75rem;
    line-height: 1;
    cursor: pointer;
    z-index: 1;
    padding: 0;
    transition: background 0.15s ease;
}

.ss-clear:hover {
    background: var(--gray-500);
}

.ss-dropdown {
    display: none;
    position: fixed;
    max-height: 220px;
    overflow-y: auto;
    background: var(--color-surface);
    border: 1px solid var(--primary);
    border-top: none;
    border-bottom-left-radius: 0.375rem;
    border-bottom-right-radius: 0.375rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 10000;
}

.ss-dropdown.ss-drop-up {
    border-top: 1px solid var(--primary);
    border-bottom: none;
    border-top-left-radius: 0.375rem;
    border-top-right-radius: 0.375rem;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
}

.ss-dropdown.ss-open {
    display: block;
}

.ss-option {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: var(--gray-700);
    cursor: pointer;
    transition: background 0.1s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ss-option:hover,
.ss-option.ss-highlighted {
    background: var(--gray-100);
    color: var(--gray-900);
}

.ss-option.ss-selected {
    background: #dbeafe;
    color: #1e40af;
    font-weight: 500;
}

.ss-option.ss-selected:hover,
.ss-option.ss-selected.ss-highlighted {
    background: #bfdbfe;
}

.ss-empty {
    padding: 0.75rem;
    font-size: 0.8125rem;
    color: var(--gray-400);
    text-align: center;
    font-style: italic;
}

/* Match .po-form-select sizing when inside modal forms */
.po-form-field .ss-input {
    padding: 0.625rem 2.25rem 0.625rem 0.875rem;
}

/* Catalog Part.notes hover tooltip (shared across inventory/jobs/purchasing) */
.part-notes-hover {
    position: relative;
}

.part-notes-hover .part-notes-tooltip {
    display: none;
    position: absolute;
    left: 0;
    bottom: calc(100% + 4px);
    background: var(--color-tooltip-bg);
    color: var(--color-tooltip-text);
    border: 1px solid var(--color-tooltip-border);
    padding: 0.375rem 0.5rem;
    border-radius: 0.375rem;
    z-index: 100;
    max-width: 320px;
    min-width: 120px;
    width: max-content;
    box-shadow: var(--color-tooltip-shadow);
    font-size: 0.6875rem;
    line-height: 1.5;
    font-weight: 400;
    white-space: pre-wrap;
    word-break: break-word;
    pointer-events: none;
    text-align: left;
}

.part-notes-hover:hover .part-notes-tooltip {
    display: block;
}

/* Indicator is a visual "has notes" badge only — part-number hover already
   shows the note content; do not re-show it when the icon itself is hovered.
   Edit-page .part-notes-badge hides the indicator, so badge hover still works. */
.part-notes-hover:has(.part-notes-indicator:hover) .part-notes-tooltip {
    display: none;
}

/* Vendor-inventory hover on job / parts-list stock cells */
.vendor-inv-hover {
    position: relative;
    display: inline-block;
    z-index: 1;
}

.vendor-inv-hover .vendor-inv-tooltip {
    display: none;
    position: absolute;
    left: 0;
    /* Open below the cell so first-row tips stay inside overflow:auto parents. */
    top: calc(100% + 4px);
    bottom: auto;
    background: var(--color-tooltip-bg);
    color: var(--color-tooltip-text);
    border: 1px solid var(--color-tooltip-border);
    padding: 0.375rem 0.5rem;
    border-radius: 0.375rem;
    z-index: 120;
    max-width: 320px;
    min-width: 140px;
    width: max-content;
    box-shadow: var(--color-tooltip-shadow);
    font-size: 0.6875rem;
    line-height: 1.45;
    font-weight: 400;
    white-space: nowrap;
    pointer-events: none;
    text-align: left;
}

.vendor-inv-hover:hover {
    z-index: 120;
}

.vendor-inv-hover:hover .vendor-inv-tooltip {
    display: block;
}

/* overflow-x:auto / overflow:auto parents clip absolute tooltips. */
.part-table-card:has(.vendor-inv-hover:hover),
.job-parts-section-root:has(.vendor-inv-hover:hover),
.po-items-table:has(.vendor-inv-hover:hover),
#po-items-section:has(.vendor-inv-hover:hover),
#cm-items-section:has(.vendor-inv-hover:hover),
.po-modal-body:has(.vendor-inv-hover:hover),
#parts-reorder-modal .po-modal-body:has(.vendor-inv-hover:hover),
#reorder-po-modal .po-modal-body:has(.vendor-inv-hover:hover),
#create-po-modal .po-modal-body:has(.vendor-inv-hover:hover),
.sc-drill-body:has(.vendor-inv-hover:hover),
.part-card:has(.vendor-inv-hover:hover),
.part-sidebar:has(.vendor-inv-hover:hover),
.table-card:has(.vendor-inv-hover:hover),
#engine-parts-section:has(.vendor-inv-hover:hover),
.engine-table:has(.vendor-inv-hover:hover),
.count-review-root:has(.vendor-inv-hover:hover) {
    overflow: visible !important;
}

/* PO parts card body is the horizontal scrollport. Do not match
   .vendor-inv-hover here: overflow:visible drops that scroll and the
   1130px table runs into the main-column clip. Stock tips open left
   and stay inside the scrollport. Part-note tips open above the cell. */
.po-page .po-card:has(#po-items-section) > .po-card-body:has(.part-notes-hover:hover) {
    overflow: visible !important;
}

.vendor-inv-tooltip-title {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.vendor-inv-tooltip-row {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
}

.vendor-inv-tooltip-qty {
    font-variant-numeric: tabular-nums;
}

.vendor-inv-tooltip-empty {
    color: var(--color-tooltip-text);
}

td[data-col="stock"] {
    overflow: visible;
}

/* Always-visible catalog-notes alert beside part numbers */
.part-notes-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.25rem;
    vertical-align: middle;
    color: #ea580c;
    flex-shrink: 0;
    line-height: 1;
}

.part-notes-indicator svg {
    width: 13px;
    height: 13px;
    display: block;
}

/* Part edit header badge — clickable jump-to-Notes control */
.part-notes-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: 0.25rem;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    border: 1px solid var(--brand-red, #8B0000);
    background: rgba(139, 0, 0, 0.08);
    color: var(--brand-red, #8B0000);
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    user-select: none;
    /* Stack above sticky .part-header (z-index: 50); escape card clipping */
    z-index: 60;
    overflow: visible;
}

.part-notes-badge:hover {
    background: rgba(139, 0, 0, 0.14);
}

.part-notes-badge svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    color: inherit;
}

/* Badge sits under sticky header — open tooltip below, not upward into header */
.part-notes-badge .part-notes-tooltip {
    top: calc(100% + 4px);
    bottom: auto;
    z-index: 60;
}

/* Badge already signals notes — do not show a second indicator */
.part-notes-badge .part-notes-indicator {
    display: none;
}

/* Catalog Engine.notes hover tooltip (shared across inventory/jobs) */
.engine-notes-hover {
    position: relative;
}

.engine-notes-hover .engine-notes-tooltip {
    display: none;
    position: absolute;
    left: 0;
    bottom: calc(100% + 4px);
    background: var(--color-tooltip-bg);
    color: var(--color-tooltip-text);
    border: 1px solid var(--color-tooltip-border);
    padding: 0.375rem 0.5rem;
    border-radius: 0.375rem;
    z-index: 100;
    max-width: 320px;
    min-width: 120px;
    width: max-content;
    box-shadow: var(--color-tooltip-shadow);
    font-size: 0.6875rem;
    line-height: 1.5;
    font-weight: 400;
    white-space: pre-wrap;
    word-break: break-word;
    pointer-events: none;
    text-align: left;
}

.engine-notes-hover:hover .engine-notes-tooltip {
    display: block;
}

/* Indicator is a visual "has notes" badge only — name/identifier hover already
   shows the note content; do not re-show it when the icon itself is hovered.
   Edit-page .engine-notes-badge hides the indicator, so badge hover still works. */
.engine-notes-hover:has(.engine-notes-indicator:hover) .engine-notes-tooltip {
    display: none;
}

/* Always-visible catalog-notes alert beside engine names/identifiers */
.engine-notes-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.25rem;
    vertical-align: middle;
    color: #ea580c;
    flex-shrink: 0;
    line-height: 1;
}

.engine-notes-indicator svg {
    width: 13px;
    height: 13px;
    display: block;
}

/* Engine edit Basic Info badge — clickable jump-to-Notes control */
.engine-notes-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: 0.25rem;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    border: 1px solid var(--brand-red, #8B0000);
    background: rgba(139, 0, 0, 0.08);
    color: var(--brand-red, #8B0000);
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    user-select: none;
    flex-shrink: 0;
    /* Stack above sticky .engine-header (z-index: 50); escape card clipping */
    z-index: 60;
    overflow: visible;
}

.engine-notes-badge:hover {
    background: rgba(139, 0, 0, 0.14);
}

.engine-notes-badge svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    color: inherit;
}

/* Badge sits under sticky header — open tooltip below, not upward into header */
.engine-notes-badge .engine-notes-tooltip {
    top: calc(100% + 4px);
    bottom: auto;
    z-index: 60;
}

/* Badge already signals notes — do not show a second indicator */
.engine-notes-badge .engine-notes-indicator {
    display: none;
}

/* Nested picker alternate rows (job / PO / purchasing / inventory pickers).
   Compound selectors must beat later single-class padding/border shorthands:
   HTMX ``.result-item { padding; border }``, inline-search
   ``.inline-result-checkbox { padding }`` (this file loads first), and
   form-page ``.po-part-result-item { padding; border }`` on PO/CM pages.
   Two classes beats those one-class resets even when they come later. */
.picker-result-alternate,
.result-item.picker-result-alternate,
.inline-result-checkbox.picker-result-alternate,
.inline-result-item.picker-result-alternate,
.po-part-result-item.picker-result-alternate,
.po-result-row.picker-result-alternate,
.ctx-add-row.picker-result-alternate {
    padding-left: 1.75rem;
    border-left: 3px solid var(--gray-300, #cbd5e0);
}

tr.picker-result-alternate > td:first-child {
    padding-left: 1.75rem;
    box-shadow: inset 3px 0 0 var(--gray-300, #cbd5e0);
}

/* Build-list pickers: "N parts" badge + collapsed list of the catalog parts
   that ride in with a list (engine Add Items dialog, job build-list picker
   modal, inline build-list search). jobs/partials/_build_list_parts_badge.html
   and _build_list_parts_panel.html. Badge is a real <button> inside the row
   <label>; the panel is the label's sibling inside .bl-parts-row-wrap. */
.bl-parts-row-wrap {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.bl-parts-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
    margin-left: 0.375rem;
    padding: 0.0625rem 0.5rem 0.0625rem 0.375rem;
    border: 1px solid color-mix(in srgb, #3b82f6 40%, transparent);
    border-radius: 9999px;
    background: color-mix(in srgb, #3b82f6 16%, var(--color-surface, #fff));
    /* Blue leaned toward the theme text color: readable on light and dark. */
    color: color-mix(in srgb, #3b82f6 70%, var(--color-text, #1e293b));
    font: inherit;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.02em;
    white-space: nowrap;
    cursor: pointer;
    vertical-align: middle;
}

.bl-parts-badge:hover {
    background: color-mix(in srgb, #3b82f6 26%, var(--color-surface, #fff));
}

.bl-parts-badge:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 1px;
}

.bl-parts-badge-chevron {
    transition: transform 0.15s ease;
}

.bl-parts-badge[aria-expanded="true"] .bl-parts-badge-chevron {
    transform: rotate(180deg);
}

.bl-parts-panel {
    padding: 0.25rem 0.75rem 0.5rem 2.5rem;
    background: var(--gray-50, #f9fafb);
    border-bottom: 1px solid var(--gray-100, #f3f4f6);
}

.bl-parts-panel[hidden] {
    display: none;
}

.bl-parts-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.bl-parts-row {
    display: flex;
    align-items: baseline;
    gap: 0.625rem;
    min-width: 0;
    font-size: 0.75rem;
    line-height: 1.4;
}

.bl-parts-number {
    flex-shrink: 0;
    min-width: 7rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--gray-700, #374151);
}

.bl-parts-desc {
    flex: 1;
    min-width: 0;
    color: var(--gray-500, #6b7280);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.picker-show-alternates {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.5rem;
    font-size: 0.8125rem;
    color: var(--gray-600, #475569);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.picker-show-alternates input {
    cursor: pointer;
}

.compare-parts-header .picker-show-alternates {
    margin-top: 0;
}

.inline-search-bar .picker-show-alternates {
    margin-top: 0;
}

.po-search-controls .po-search-box {
    border-bottom: none;
    padding-bottom: 0.5rem;
}

.po-search-controls .picker-show-alternates {
    padding: 0 1.5rem 0.75rem;
    margin-top: 0;
}