/*
 * styles.css — Yard Management application styles
 *
 * TABLE OF CONTENTS (search for section titles):
 *   1. Design tokens (:root, dark theme variables)
 *   2. Loading overlay
 *   3. Login / auth pages
 *   4. App layout & header navigation
 *   5. Support → Users panel
 *   6. Profile modal & avatars
 *   7. Tabs, Support flyout, toolbars
 *   8. Forms, buttons, tables, badges
 *   9. Module stat cards
 *  10. Trailers list module
 *  11. Yard Check toolbars & edit panels
 *  12. Dashboard & site cards
 *  13. Trailer detail page (panels, records, history)
 *  14. Modals, alerts, panels
 *  15. Email configuration & schedules
 *  16. Billing module
 *  17. Work Orders module
 *  18. Module toolbar & filter bars (shared)
 *  19. Inventory module
 *  20. Touch hints, customer records, utilities
 *  21. Gate module
 *  22. Responsive breakpoints (@media)
 *  23. Theme toggle & dark-mode overrides
 */

/* =============================================================================
   1. Design tokens
   Brand colors, layout variables, and light/dark theme custom properties.
   ============================================================================= */
:root {
  /* CSG Brand Colors */
  --csg-blue: #0072BC;
  --csg-blue-dark: #005A94;
  --csg-blue-darker: #004A7C;
  --csg-blue-light: #0091EA;
  --csg-blue-pale: #E8F4FC;
  --csg-blue-muted: #D6EBFA;

  --primary: var(--csg-blue);
  --primary-dark: var(--csg-blue-dark);
  --primary-light: var(--csg-blue-light);

  /* Login + in-app portal accents (Staff = blue, Customer = teal) */
  --portal-staff-accent: var(--csg-blue);
  --portal-staff-accent-dark: var(--csg-blue-dark);
  --portal-customer-accent: #0d9488;
  --portal-customer-accent-dark: #0f766e;
  --portal-chart-value-color: var(--text);
  --portal-chart-value-accent: var(--primary-dark);

  --nav-bg: #0F1419;
  --nav-bg-hover: #243044;
  --nav-border: rgba(255, 255, 255, 0.16);
  --nav-text: rgba(255, 255, 255, 0.9);
  --nav-text-muted: rgba(255, 255, 255, 0.68);
  --nav-divider: rgba(255, 255, 255, 0.22);
  --nav-active-bg: var(--csg-blue);
  --nav-active-shadow: 0 2px 8px rgba(0, 114, 188, 0.45);
  --nav-brand-subtext: rgba(255, 255, 255, 0.68);
  --nav-user-badge-bg: rgba(255, 255, 255, 0.16);
  --nav-user-badge-text: #fff;
  --surface: #FFFFFF;
  --surface-raised: #FFFFFF;
  --bg: #F0F2F5;
  --bg-subtle: #F8FAFB;

  --success: #10B981;
  --success-dark: #059669;
  --danger: #EF4444;
  --warning: #F59E0B;
  --info: #38BDF8;

  --text: #111827;
  --text-secondary: #374151;
  --text-muted: #6B7280;
  --border: #CBD5E1;
  --border-light: #E2E8F0;
  --stripe: #F8FAFC;

  --ui-panel-bg: #FFFFFF;
  --ui-panel-border: #CBD5E1;
  --ui-card-bg: #F1F5F9;
  --ui-card-border: #CBD5E1;
  --ui-inset-bg: #FFFFFF;
  --ui-inset-border: #CBD5E1;
  --ui-table-header-bg: #E2E8F0;
  --ui-table-header-text: #1F2937;
  --ui-table-stripe: #F8FAFC;
  --ui-table-hover: #E8F4FC;
  --ui-table-cell-border: #E2E8F0;
  --ui-toolbar-bg: #FFFFFF;
  --ui-toolbar-border: #CBD5E1;
  --ui-filter-label: #374151;
  --ui-section-bg: linear-gradient(90deg, #DBEAFE 0%, #F8FAFC 100%);
  --ui-section-text: #1E3A5F;
  --ui-label-accent: #005A94;
  --ui-muted-readable: #4B5563;
  --ui-accent-chip-bg: #DBEAFE;
  --ui-accent-chip-border: #93C5FD;
  --ui-accent-chip-text: #1E3A5F;
  --ui-panel-shadow: var(--shadow-md);
  --ui-focus-ring: rgba(0, 114, 188, 0.15);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.12);
  --shadow-blue: 0 4px 14px rgba(0, 114, 188, 0.25);

  --radius: 8px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-sm: 6px;

  --header-height: 64px;
  --transition: 0.2s ease;

  /* Terminal-lite accents (login + in-app portals) */
  --terminal-mono: ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', Consolas, monospace;
  /* Readable dark green on light surfaces; dark theme overrides below */
  --terminal-green: #166534;
  --terminal-green-bright: #047857;
  --terminal-green-muted: #065f46;
  --terminal-amber: rgba(212, 196, 158, 0.82);
  --terminal-phosphor: rgba(0, 145, 234, 0.82);
  --terminal-phosphor-bright: rgba(100, 190, 255, 0.95);
  --terminal-phosphor-dim: rgba(0, 114, 188, 0.45);
  --terminal-border-mix: color-mix(in srgb, var(--border) 74%, var(--terminal-phosphor) 26%);
  --terminal-panel-glow: 0 0 32px rgba(0, 145, 234, 0.09), 0 0 52px rgba(1, 205, 254, 0.045);
  --terminal-title-rule: color-mix(in srgb, var(--terminal-phosphor) 38%, transparent);
  --terminal-row-hover: color-mix(in srgb, var(--terminal-phosphor) 7%, var(--ui-table-hover));
  --synth-cyan: rgba(1, 205, 254, 0.55);
  --synth-pink: rgba(255, 113, 206, 0.45);

  --inventory-site-header-bg: #E2E8F0;
  --inventory-site-header-border: #CBD5E1;
  --inventory-cards-grid-bg: #F1F5F9;
  --inventory-cards-grid-border: #CBD5E1;
  --inventory-type-card-border: #CBD5E1;
  --inventory-status-available-bg: #d9f2e3;
  --inventory-status-oos-bg: #fce4e4;
  --inventory-status-sell-bg: #fef3c7;
  --inventory-status-available-text: #1a7a3a;
  --inventory-status-oos-text: #b91c1c;
  --inventory-status-sell-text: #b45309;
  --inventory-status-count-bg: #4a4a4a;

  --customer-record-current-bg: rgba(16, 185, 129, 0.08);
  --customer-record-current-hover-bg: rgba(16, 185, 129, 0.12);
  --customer-record-current-accent: #10B981;
  --customer-record-current-text: var(--text);
  --customer-record-current-muted: var(--ui-muted-readable);

  --customer-yard-card-bg: rgba(15, 23, 42, 0.03);
  --customer-yard-card-border: rgba(148, 163, 184, 0.14);
  --customer-assignment-banner-bg: rgba(15, 23, 42, 0.02);
  --customer-assignment-banner-on-bg: color-mix(in srgb, rgba(16, 185, 129, 0.08) 100%, var(--trailer-detail-panel-bg));
  --customer-assignment-banner-off-bg: color-mix(in srgb, rgba(245, 158, 11, 0.07) 100%, var(--trailer-detail-panel-bg));
  --customer-assignment-banner-on-accent: rgba(16, 185, 129, 0.55);
  --customer-assignment-banner-off-accent: rgba(245, 158, 11, 0.5);
  --customer-yard-timeline-divider: rgba(148, 163, 184, 0.12);
  --customer-yard-badge-on-bg: rgba(16, 185, 129, 0.12);
  --customer-yard-badge-on-text: #047857;
  --customer-yard-badge-off-bg: rgba(245, 158, 11, 0.11);
  --customer-yard-badge-off-text: #92400E;
  --customer-record-status-current-bg: rgba(16, 185, 129, 0.14);
  --customer-record-status-current-text: #047857;
  --customer-record-status-off-bg: rgba(245, 158, 11, 0.12);
  --customer-record-status-off-text: #92400E;
  --customer-record-current-on-bg: rgba(16, 185, 129, 0.05);
  --customer-record-current-on-hover: rgba(15, 23, 42, 0.03);
  --customer-record-current-off-bg: rgba(245, 158, 11, 0.05);
  --customer-record-current-off-hover: rgba(15, 23, 42, 0.03);
  --customer-record-current-on-accent: rgba(16, 185, 129, 0.45);
  --customer-record-current-off-accent: rgba(245, 158, 11, 0.42);
  --customer-record-row-hover-bg: rgba(15, 23, 42, 0.03);

  --trailer-record-inset-bg: var(--customer-yard-card-bg);
  --trailer-record-inset-border: var(--customer-yard-card-border);
  --trailer-record-pill-success-bg: rgba(16, 185, 129, 0.12);
  --trailer-record-pill-success-text: #047857;
  --trailer-record-pill-info-bg: rgba(59, 130, 246, 0.12);
  --trailer-record-pill-info-text: #1D4ED8;
  --trailer-record-pill-warning-bg: rgba(245, 158, 11, 0.12);
  --trailer-record-pill-warning-text: #92400E;
  --trailer-record-pill-danger-bg: rgba(239, 68, 68, 0.12);
  --trailer-record-pill-danger-text: #B91C1C;
  --trailer-record-pill-purple-bg: rgba(139, 92, 246, 0.12);
  --trailer-record-pill-purple-text: #6D28D9;
  --trailer-record-pill-neutral-bg: rgba(100, 116, 139, 0.12);
  --trailer-record-pill-neutral-text: #475569;
  --trailer-record-row-open-bg: rgba(59, 130, 246, 0.05);
  --trailer-record-row-open-hover: rgba(59, 130, 246, 0.08);
  --trailer-record-row-open-accent: rgba(59, 130, 246, 0.42);
  --trailer-record-row-progress-bg: rgba(245, 158, 11, 0.05);
  --trailer-record-row-progress-hover: rgba(245, 158, 11, 0.08);
  --trailer-record-row-progress-accent: rgba(245, 158, 11, 0.4);
  --trailer-record-row-hold-bg: rgba(139, 92, 246, 0.05);
  --trailer-record-row-hold-hover: rgba(139, 92, 246, 0.08);
  --trailer-record-row-hold-accent: rgba(139, 92, 246, 0.4);

  --billing-off-yard-bg: rgba(245, 158, 11, 0.06);
  --billing-off-yard-hover-bg: rgba(245, 158, 11, 0.1);
  --billing-off-yard-accent: #F59E0B;
  --billing-on-yard-bg: rgba(16, 185, 129, 0.05);
  --billing-on-yard-hover-bg: rgba(16, 185, 129, 0.09);
  --billing-on-yard-accent: #10B981;

  --dashboard-surface-gradient-end: #FAFCFE;
  --dashboard-card-actions-bg: rgba(255, 255, 255, 0.78);
  --dashboard-stat-value-color: var(--primary-dark);
  --dashboard-site-count-active-num: #047857;
  --dashboard-site-count-active-label: #059669;

  --inventory-unit-row-oos-bg: #fef2f2;
  --inventory-unit-row-oos-hover-bg: #fee2e2;
  --inventory-unit-row-sell-bg: #fffbeb;
  --inventory-unit-row-sell-hover-bg: #fef3c7;

  --trailer-detail-header-bg: var(--ui-panel-bg);
  --trailer-detail-header-border: var(--ui-panel-border);
  --trailer-detail-panel-bg: var(--ui-panel-bg);
  --trailer-detail-panel-border: var(--ui-panel-border);
  --trailer-detail-card-bg: var(--ui-card-bg);
  --trailer-detail-card-border: var(--ui-card-border);
  --trailer-detail-section-bg: var(--ui-section-bg);
  --trailer-detail-section-text: var(--ui-section-text);
  --trailer-detail-label-color: var(--ui-label-accent);
  --trailer-detail-notes-bg: var(--ui-panel-bg);
  --trailer-detail-notes-filled-bg: #EFF6FF;
  --trailer-detail-notes-filled-border: var(--ui-accent-chip-border);
  --trailer-detail-location-bg: var(--ui-accent-chip-bg);
  --trailer-detail-location-border: var(--ui-accent-chip-border);
  --trailer-detail-location-text: var(--ui-accent-chip-text);
  --trailer-detail-table-header-bg: var(--ui-table-header-bg);
  --trailer-detail-table-header-text: var(--ui-table-header-text);
  --trailer-detail-table-stripe: var(--ui-table-stripe);
  --trailer-detail-table-hover: var(--ui-table-hover);
  --trailer-detail-condition-active-bg: #FEF2F2;
  --trailer-detail-condition-active-border: #FCA5A5;
  --trailer-detail-condition-active-text: #991B1B;

  --trailers-page-toolbar-bg: var(--ui-toolbar-bg);
  --trailers-page-toolbar-border: var(--ui-toolbar-border);
  --trailers-page-filter-label: var(--ui-filter-label);
  --trailers-page-control-bg: var(--ui-inset-bg);
  --trailers-page-control-border: var(--ui-inset-border);
  --trailers-page-panel-bg: var(--ui-panel-bg);
  --trailers-page-panel-border: var(--ui-panel-border);
  --trailers-page-table-header-bg: var(--ui-table-header-bg);
  --trailers-page-table-header-text: var(--ui-table-header-text);
  --trailers-page-table-stripe: var(--ui-table-stripe);
  --trailers-page-table-hover: var(--ui-table-hover);
  --trailers-page-table-cell-border: var(--ui-table-cell-border);
  --trailers-page-muted-text: var(--ui-muted-readable);
  --trailers-page-dot-info-bg: var(--ui-accent-chip-bg);
  --trailers-page-dot-info-text: var(--ui-accent-chip-text);
  --trailers-page-dot-info-border: var(--ui-accent-chip-border);
}

[data-theme="dark"] {
  color-scheme: dark;

  --terminal-green: rgba(134, 196, 154, 0.88);
  --terminal-green-bright: #6EE7B7;
  --terminal-green-muted: #bbf7d0;

  --surface: #1A2332;
  --surface-raised: #212D3D;
  --bg: #0F1419;
  --bg-subtle: #151C26;

  --text: #F3F4F6;
  --text-secondary: #D1D5DB;
  --text-muted: #9CA3AF;

  --border: #64748B;
  --border-light: #475569;
  --stripe: #111827;

  --ui-panel-bg: #1E293B;
  --ui-panel-border: #64748B;
  --ui-card-bg: #0A0E12;
  --ui-card-border: #475569;
  --ui-inset-bg: #0A0E12;
  --ui-inset-border: #64748B;
  --ui-table-header-bg: #334155;
  --ui-table-header-text: #F9FAFB;
  --ui-table-stripe: #111827;
  --ui-table-hover: rgba(0, 145, 234, 0.28);
  --ui-table-cell-border: #475569;
  --ui-toolbar-bg: #1E293B;
  --ui-toolbar-border: #64748B;
  --ui-filter-label: #E2E8F0;
  --ui-section-bg: linear-gradient(90deg, rgba(0, 145, 234, 0.38) 0%, rgba(30, 41, 59, 0.98) 100%);
  --ui-section-text: #E0F2FE;
  --ui-label-accent: #38BDF8;
  --ui-muted-readable: #CBD5E1;
  --ui-accent-chip-bg: rgba(0, 145, 234, 0.28);
  --ui-accent-chip-border: #38BDF8;
  --ui-accent-chip-text: #E0F2FE;
  --ui-panel-shadow: 0 2px 8px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(148, 163, 184, 0.08);
  --ui-focus-ring: rgba(0, 145, 234, 0.28);

  --csg-blue-pale: rgba(0, 114, 188, 0.16);
  --csg-blue-muted: rgba(0, 114, 188, 0.28);

  --nav-bg: #05080C;
  --nav-bg-hover: #1A2535;
  --nav-border: rgba(148, 163, 184, 0.32);
  --nav-text: #F9FAFB;
  --nav-text-muted: rgba(226, 232, 240, 0.78);
  --nav-divider: rgba(148, 163, 184, 0.38);
  --nav-active-bg: #0091EA;
  --nav-active-shadow: 0 2px 10px rgba(0, 145, 234, 0.5);
  --nav-brand-subtext: rgba(226, 232, 240, 0.72);
  --nav-user-badge-bg: rgba(255, 255, 255, 0.14);
  --nav-user-badge-text: #F9FAFB;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.55);
  --shadow-blue: 0 4px 14px rgba(0, 114, 188, 0.35);

  --inventory-site-header-bg: #334155;
  --inventory-site-header-border: #64748B;
  --inventory-cards-grid-bg: #1E293B;
  --inventory-cards-grid-border: #64748B;
  --inventory-type-card-border: #64748B;
  --inventory-status-available-bg: rgba(16, 185, 129, 0.18);
  --inventory-status-oos-bg: rgba(239, 68, 68, 0.16);
  --inventory-status-sell-bg: rgba(245, 158, 11, 0.18);
  --inventory-status-available-text: #6EE7B7;
  --inventory-status-oos-text: #FCA5A5;
  --inventory-status-sell-text: #FCD34D;
  --inventory-status-count-bg: #374151;

  --customer-record-current-bg: rgba(16, 185, 129, 0.1);
  --customer-record-current-hover-bg: rgba(16, 185, 129, 0.16);
  --customer-record-current-accent: #34D399;
  --customer-record-current-text: var(--text);
  --customer-record-current-muted: var(--ui-muted-readable);

  --customer-yard-card-bg: rgba(255, 255, 255, 0.03);
  --customer-yard-card-border: rgba(148, 163, 184, 0.14);
  --customer-assignment-banner-bg: rgba(255, 255, 255, 0.02);
  --customer-assignment-banner-on-bg: color-mix(in srgb, rgba(16, 185, 129, 0.08) 100%, var(--trailer-detail-panel-bg));
  --customer-assignment-banner-off-bg: color-mix(in srgb, rgba(245, 158, 11, 0.07) 100%, var(--trailer-detail-panel-bg));
  --customer-assignment-banner-on-accent: rgba(52, 211, 153, 0.55);
  --customer-assignment-banner-off-accent: rgba(251, 191, 36, 0.5);
  --customer-yard-timeline-divider: rgba(148, 163, 184, 0.12);
  --customer-yard-badge-on-bg: rgba(16, 185, 129, 0.12);
  --customer-yard-badge-on-text: #86EFAC;
  --customer-yard-badge-off-bg: rgba(245, 158, 11, 0.11);
  --customer-yard-badge-off-text: #E8C468;
  --customer-record-status-current-bg: rgba(16, 185, 129, 0.14);
  --customer-record-status-current-text: #86EFAC;
  --customer-record-status-off-bg: rgba(245, 158, 11, 0.12);
  --customer-record-status-off-text: #E8C468;
  --customer-record-current-on-bg: rgba(16, 185, 129, 0.05);
  --customer-record-current-on-hover: rgba(255, 255, 255, 0.03);
  --customer-record-current-off-bg: rgba(245, 158, 11, 0.05);
  --customer-record-current-off-hover: rgba(255, 255, 255, 0.03);
  --customer-record-current-on-accent: rgba(52, 211, 153, 0.45);
  --customer-record-current-off-accent: rgba(251, 191, 36, 0.42);
  --customer-record-row-hover-bg: rgba(255, 255, 255, 0.03);

  --trailer-record-inset-bg: var(--customer-yard-card-bg);
  --trailer-record-inset-border: var(--customer-yard-card-border);
  --trailer-record-pill-success-bg: rgba(16, 185, 129, 0.12);
  --trailer-record-pill-success-text: #86EFAC;
  --trailer-record-pill-info-bg: rgba(59, 130, 246, 0.14);
  --trailer-record-pill-info-text: #93C5FD;
  --trailer-record-pill-warning-bg: rgba(245, 158, 11, 0.12);
  --trailer-record-pill-warning-text: #FCD34D;
  --trailer-record-pill-danger-bg: rgba(239, 68, 68, 0.14);
  --trailer-record-pill-danger-text: #FCA5A5;
  --trailer-record-pill-purple-bg: rgba(139, 92, 246, 0.14);
  --trailer-record-pill-purple-text: #C4B5FD;
  --trailer-record-pill-neutral-bg: rgba(148, 163, 184, 0.14);
  --trailer-record-pill-neutral-text: #CBD5E1;
  --trailer-record-row-open-bg: rgba(59, 130, 246, 0.08);
  --trailer-record-row-open-hover: rgba(255, 255, 255, 0.03);
  --trailer-record-row-open-accent: rgba(96, 165, 250, 0.45);
  --trailer-record-row-progress-bg: rgba(245, 158, 11, 0.05);
  --trailer-record-row-progress-hover: rgba(255, 255, 255, 0.03);
  --trailer-record-row-progress-accent: rgba(251, 191, 36, 0.42);
  --trailer-record-row-hold-bg: rgba(139, 92, 246, 0.08);
  --trailer-record-row-hold-hover: rgba(255, 255, 255, 0.03);
  --trailer-record-row-hold-accent: rgba(167, 139, 250, 0.42);

  --billing-off-yard-bg: rgba(245, 158, 11, 0.1);
  --billing-off-yard-hover-bg: rgba(245, 158, 11, 0.16);
  --billing-off-yard-accent: #FBBF24;
  --billing-on-yard-bg: rgba(16, 185, 129, 0.08);
  --billing-on-yard-hover-bg: rgba(16, 185, 129, 0.14);
  --billing-on-yard-accent: #34D399;

  --dashboard-surface-gradient-end: #151C26;
  --dashboard-card-actions-bg: rgba(21, 28, 38, 0.92);
  --dashboard-stat-value-color: var(--csg-blue-light);
  --dashboard-site-count-active-num: #6EE7B7;
  --dashboard-site-count-active-label: #34D399;

  --inventory-unit-row-oos-bg: rgba(239, 68, 68, 0.14);
  --inventory-unit-row-oos-hover-bg: rgba(239, 68, 68, 0.22);
  --inventory-unit-row-sell-bg: rgba(245, 158, 11, 0.12);
  --inventory-unit-row-sell-hover-bg: rgba(245, 158, 11, 0.2);
  --inventory-unit-row-oos-hover-bg: rgba(239, 68, 68, 0.22);

  --trailer-detail-header-bg: #2A3749;
  --trailer-detail-condition-active-bg: rgba(239, 68, 68, 0.22);
  --trailer-detail-condition-active-border: #F87171;
  --trailer-detail-condition-active-text: #FECACA;
  --trailer-detail-notes-filled-bg: rgba(0, 145, 234, 0.2);
}

html {
  color-scheme: light;
}

html[data-theme="dark"] {
  color-scheme: dark;
}

body {
  transition: background-color var(--transition), color var(--transition);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Beat inline boot splash body color — never inherit pale mint on light UI */
html:not([data-theme="dark"]) body {
  color: var(--text);
  background: var(--bg);
}

html[data-theme="dark"] body {
  color: var(--text);
  background: var(--bg);
}

a { color: var(--primary); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--primary-dark); }

/* =============================================================================
   Loading
   ============================================================================= */
.loading-screen {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--nav-bg);
  position: relative;
  overflow: hidden;
}

.loading-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 80%, rgba(0, 114, 188, 0.28) 0%, transparent 52%),
    radial-gradient(ellipse at 80% 20%, rgba(0, 145, 234, 0.14) 0%, transparent 48%);
  pointer-events: none;
}

.loading-screen::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.24;
  background-image:
    linear-gradient(rgba(0, 145, 234, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 114, 188, 0.04) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse 88% 72% at 50% 42%, #000 18%, transparent 74%);
}

.loading-screen__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 24px;
}

.loading-screen__brand {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.58);
}

.loading-screen__logo-ring {
  position: relative;
  width: 88px;
  height: 88px;
  display: grid;
  place-items: center;
}

.loading-screen__logo-ring-track {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.12);
  border-top-color: rgba(0, 145, 234, 0.95);
  animation: loading-ring-spin 1.1s linear infinite;
}

.loading-logo {
  width: 52px;
  height: 52px;
  object-fit: contain;
  animation: loading-logo-breathe 2.4s ease-in-out infinite;
}

.loading-screen__app-name {
  display: flex;
  align-items: baseline;
  justify-content: center;
  margin-top: 2px;
  font-family: var(--terminal-mono);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 1.35;
  color: rgba(236, 253, 245, 0.92);
  text-shadow:
    0 0 16px rgba(134, 196, 154, 0.14),
    0 0 28px rgba(0, 145, 234, 0.1);
}

.loading-screen__app-name::before {
  content: '# ';
  font-weight: 600;
  color: var(--terminal-phosphor);
  opacity: 0.58;
}

.loading-screen__status {
  display: flex;
  align-items: center;
  gap: 2px;
  font-family: var(--terminal-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, rgba(255, 255, 255, 0.72) 88%, var(--terminal-phosphor) 12%);
  min-height: 22px;
}

.loading-screen__status::before {
  content: '> ';
  color: var(--terminal-phosphor);
  opacity: 0.72;
}

.loading-screen__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 8px;
}

.loading-screen__actions.is-hidden {
  display: none;
}

.loading-screen__btn {
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--terminal-phosphor) 35%, transparent);
  background: color-mix(in srgb, var(--terminal-phosphor) 12%, transparent);
  color: rgba(236, 253, 245, 0.95);
  border-radius: var(--radius);
  padding: 10px 16px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}

.loading-screen__btn:hover,
.loading-screen__btn:focus-visible {
  background: color-mix(in srgb, var(--terminal-phosphor) 22%, transparent);
  border-color: color-mix(in srgb, var(--terminal-phosphor) 48%, transparent);
  outline: none;
}

.loading-screen--offline .loading-screen__logo-ring-track {
  border-top-color: rgba(245, 158, 11, 0.9);
  animation: none;
}

.loading-screen--offline .loading-screen__status {
  color: rgba(254, 243, 199, 0.92);
}

.startup-error-screen__inner {
  max-width: 460px;
  text-align: center;
}

.startup-error-screen__logo .loading-screen__logo-ring-track {
  display: none;
}

.startup-error-screen__title {
  margin: 4px 0 0;
  font-family: var(--terminal-mono);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(254, 243, 199, 0.96);
}

.startup-error-screen__message {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
}

.startup-error-screen__hint {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.62);
}

.startup-error-screen__hint a {
  color: rgba(100, 190, 255, 0.95);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.startup-error-screen__hint a:hover,
.startup-error-screen__hint a:focus-visible {
  color: #fff;
}

.startup-error-screen__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
}

.startup-error-screen__btn {
  appearance: none;
  border-radius: var(--radius);
  padding: 10px 16px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}

.startup-error-screen__btn--primary {
  border: 1px solid color-mix(in srgb, var(--terminal-phosphor) 42%, transparent);
  background: color-mix(in srgb, var(--terminal-phosphor) 18%, transparent);
  color: rgba(236, 253, 245, 0.96);
}

.startup-error-screen__btn--primary:hover,
.startup-error-screen__btn--primary:focus-visible {
  background: color-mix(in srgb, var(--terminal-phosphor) 28%, transparent);
  border-color: color-mix(in srgb, var(--terminal-phosphor-bright) 55%, transparent);
  outline: none;
}

.startup-error-screen__btn--secondary {
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.86);
}

.startup-error-screen__btn--secondary:hover,
.startup-error-screen__btn--secondary:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.28);
  outline: none;
}

.loading-dots {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 4px;
  height: 10px;
}

.loading-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.35;
  animation: loading-dot-bounce 1.2s ease-in-out infinite;
}

.loading-dots span:nth-child(2) { animation-delay: 0.15s; }
.loading-dots span:nth-child(3) { animation-delay: 0.3s; }

@keyframes loading-ring-spin {
  to { transform: rotate(360deg); }
}

@keyframes loading-logo-breathe {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.88; transform: scale(0.97); }
}

@keyframes loading-dot-bounce {
  0%, 70%, 100% {
    opacity: 0.35;
    transform: translateY(0);
  }
  35% {
    opacity: 1;
    transform: translateY(-4px);
  }
}

/* =============================================================================
   Login, forgot-password, and forced password-change (shared .login-page layout)
   ============================================================================= */
.login-page {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  position: relative;
}

.login-brand-panel {
  background:
    linear-gradient(165deg, #0a1628 0%, var(--nav-bg) 42%, #0d2844 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px clamp(32px, 4vw, 48px);
  min-height: 100dvh;
  position: relative;
  overflow: hidden;
}

.login-brand-panel__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 55% at 12% 88%, rgba(0, 114, 188, 0.34) 0%, transparent 58%),
    radial-gradient(ellipse 55% 45% at 88% 12%, rgba(0, 145, 234, 0.18) 0%, transparent 52%),
    linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.12) 100%);
}

.login-brand-panel__glow::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.35;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse 85% 75% at 30% 40%, #000 20%, transparent 72%);
}

.login-brand-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 460px;
}

.login-brand-hero {
  margin-bottom: 24px;
}

.login-brand-heading {
  display: flex;
  align-items: center;
  gap: 14px;
}

.login-brand-heading__copy {
  min-width: 0;
  flex: 1;
}

.login-brand-eyebrow {
  display: block;
  margin: 0 0 3px;
  padding: 0;
  border: none;
  background: none;
  border-radius: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.58);
  line-height: 1.3;
}

.login-company-name {
  font-size: clamp(14px, 2.1vw, 28px);
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.03em;
  margin: 0 0 6px;
  line-height: 1.2;
  white-space: nowrap;
}

.login-tagline {
  margin: 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 15px;
  line-height: 1.45;
}

.login-app-name {
  display: none;
}

.login-brand-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.login-brand-feature {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background 0.18s ease, border-color 0.18s ease;
}

.login-brand-feature:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.16);
}

.login-brand-feature__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  color: var(--csg-blue-light);
  background: rgba(0, 145, 234, 0.14);
  border: 1px solid rgba(0, 145, 234, 0.22);
}

.login-brand-feature__icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

.login-brand-feature__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.login-brand-feature__title {
  font-size: 14px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.94);
  line-height: 1.3;
}

.login-brand-feature__desc {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.62);
  line-height: 1.4;
}

.login-form-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px clamp(32px, 4vw, 48px);
  padding-left: max(clamp(32px, 4vw, 48px), env(safe-area-inset-left));
  padding-right: max(clamp(32px, 4vw, 48px), env(safe-area-inset-right));
  padding-bottom: max(40px, env(safe-area-inset-bottom));
  min-height: 100dvh;
  background: var(--bg);
  position: relative;
}

/* Login right pane — theme-aware yard / trucking backdrop */
.login-page--terminal-lite .login-form-panel {
  overflow: hidden;
  --login-fx-sky-height: 32%;
  --login-fx-rail-top: 38%;
  --login-fx-sky-deep: #5da3db;
  --login-fx-sky-top: #72b3e6;
  --login-fx-sky-mid: #94c5ef;
  --login-fx-sky-horizon: color-mix(in srgb, var(--bg) 68%, #c4d4e4 32%);
  --login-fx-sky-glow: rgba(255, 246, 220, 0.42);
  --login-fx-horizon-ground: color-mix(in srgb, var(--bg) 86%, #b4c2d0 14%);
  --login-fx-haze-a: rgba(255, 255, 255, 0.28);
  --login-fx-haze-b: color-mix(in srgb, var(--primary) 5%, transparent);
  --login-fx-cloud-ceiling: 40%;
  --login-fx-clouds-scroll-top: 0%;
  --login-fx-clouds-scroll-height: 100%;
  --login-fx-cloud-core: #ffffff;
  --login-fx-cloud-flare: #ffffff;
  --login-fx-cloud-top: #f2f7fc;
  --login-fx-cloud-mid: #aebecf;
  --login-fx-cloud-depth: #8a9cb0;
  --login-fx-cloud-bottom: #788ea4;
  --login-fx-cloud-shade-fade: rgba(120, 140, 162, 0);
  --login-fx-cloud-shade: rgba(100, 120, 142, 0.32);
  --login-fx-cloud-shade-deep: rgba(82, 102, 124, 0.48);
  --login-fx-cloud-cap: rgba(255, 255, 255, 0.76);
  --login-fx-cloud-cap-fade: rgba(255, 255, 255, 0);
  --login-fx-cloud-shadow: #708498;
  --login-fx-cloud-scroll-duration: 280s;
  --login-fx-hill-distant-top: color-mix(in srgb, #b0c4bc 42%, var(--bg) 58%);
  --login-fx-hill-distant-bottom: color-mix(in srgb, #8ea49a 32%, var(--bg) 68%);
  --login-fx-hill-far-top: color-mix(in srgb, #9cb4a8 52%, var(--bg) 48%);
  --login-fx-hill-far-bottom: color-mix(in srgb, #7a9288 38%, var(--bg) 62%);
  --login-fx-hill-mid-top: color-mix(in srgb, #8aa092 48%, var(--bg) 52%);
  --login-fx-hill-mid-bottom: color-mix(in srgb, #6a8278 42%, var(--bg) 58%);
  --login-fx-hill-near-top: color-mix(in srgb, var(--bg) 55%, #6a8070 45%);
  --login-fx-hill-near-bottom: color-mix(in srgb, var(--bg) 70%, #4a5e52 30%);
  --login-fx-hill-blend: color-mix(in srgb, var(--login-fx-hill-near-bottom) 35%, var(--login-fx-horizon-ground) 65%);
  --login-fx-hill-fade: color-mix(in srgb, var(--login-fx-horizon-ground) 55%, transparent);
  --login-fx-hill-ridge: rgba(255, 255, 255, 0.28);
  --login-fx-grid-line: color-mix(in srgb, var(--border) 38%, transparent);
  --login-fx-yard-opacity: 0.22;
  --login-fx-container-opacity: 0.38;
  --login-fx-fleet-opacity: 1;
  --login-fx-road-shoulder: color-mix(in srgb, var(--text-muted) 9%, var(--bg));
  --login-fx-road-top: color-mix(in srgb, var(--text-muted) 7%, transparent);
  --login-fx-road-body: color-mix(in srgb, var(--text) 9%, var(--bg));
  --login-fx-road-body-bottom: color-mix(in srgb, var(--text) 14%, var(--bg));
  --login-fx-road-opacity: 0.94;
  --login-fx-road-lane-opacity: 0.88;
  --login-fx-road-mask: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.42) 10%,
    rgba(0, 0, 0, 0.86) 22%,
    #000 38%,
    #000 88%,
    rgba(0, 0, 0, 0.32) 96%,
    transparent 100%
  );
  --login-fx-lane-dash: rgba(168, 132, 42, 0.82);
  --login-fx-haze-opacity: 0.74;
  --login-fx-truck-cab-top: #5f7388;
  --login-fx-truck-cab-bottom: #46586a;
  --login-fx-truck-trailer-top: #c8d0da;
  --login-fx-truck-trailer-bottom: #a8b2be;
  --login-fx-truck-window: #243447;
  --login-fx-truck-window-shine: rgba(255, 255, 255, 0.18);
  --login-fx-truck-chassis: #3f4f60;
  --login-fx-truck-underbody: #364556;
  --login-fx-truck-tire: #1f2937;
  --login-fx-truck-rim: #94a3b8;
  --login-fx-truck-headlight: rgba(255, 244, 214, 0.35);
  --login-fx-truck-rib: rgba(15, 23, 42, 0.14);
  --login-fx-truck-cargo: #64748b;
  --login-fx-truck-reefer: #dbeafe;
  --login-fx-truck-reefer-grille: #64748b;
  --login-fx-container-slate: #6b7c8f;
  --login-fx-container-slate-stroke: #556575;
  --login-fx-container-ocean: #4f6b84;
  --login-fx-container-ocean-stroke: #3f586d;
  --login-fx-container-rust: #8a6a55;
  --login-fx-container-rust-stroke: #705646;
  --login-fx-container-steel: #778495;
  --login-fx-container-steel-stroke: #606f7f;
  --login-fx-container-rib: rgba(15, 23, 42, 0.16);
  --login-fx-container-door: rgba(15, 23, 42, 0.12);
  --login-fx-rail-ballast: color-mix(in srgb, var(--text-muted) 14%, var(--bg));
  --login-fx-rail-tie: color-mix(in srgb, var(--text-muted) 22%, var(--bg));
  --login-fx-rail-steel: color-mix(in srgb, var(--text-muted) 34%, var(--bg));
  --login-fx-rail-steel-highlight: color-mix(in srgb, var(--login-fx-rail-steel) 55%, #fff 45%);
  --login-fx-rail-steel-shadow: color-mix(in srgb, var(--login-fx-rail-steel) 70%, #000 30%);
  --login-fx-rail-opacity: 0.72;
  --login-fx-rail-tie-opacity: 0.78;
  --login-fx-rail-mask: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.32) 12%,
    rgba(0, 0, 0, 0.82) 28%,
    #000 44%,
    #000 76%,
    rgba(0, 0, 0, 0.42) 90%,
    transparent 100%
  );
  --login-fx-loco-blue-top: #1f4f8f;
  --login-fx-loco-blue-bottom: #153862;
  --login-fx-loco-yellow-top: #f6d34a;
  --login-fx-loco-yellow-bottom: #c9a820;
  --login-fx-loco-orange-top: #e87828;
  --login-fx-loco-orange-bottom: #bf5218;
  --login-fx-loco-underframe: #2a323a;
  --login-fx-loco-roof: #9aa8b6;
  --login-fx-flatcar: #4b5563;
  --login-fx-shadow: rgba(15, 23, 42, 0.16);
  --login-fx-vignette-edge: color-mix(in srgb, var(--bg) 30%, transparent);
  --login-fx-vignette-center: transparent;
  --login-fx-grain-opacity: 0.035;
  --login-fx-scanline-opacity: 0;
  background: var(--bg);
}

[data-theme="dark"] .login-page--terminal-lite .login-form-panel {
  --login-fx-cloud-ceiling: 40%;
  --login-fx-clouds-scroll-top: 0%;
  --login-fx-clouds-scroll-height: 100%;
  --login-fx-cloud-scroll-duration: 280s;
  --login-fx-sky-deep: #070f1a;
  --login-fx-sky-top: #0b1524;
  --login-fx-sky-mid: #101e32;
  --login-fx-sky-horizon: color-mix(in srgb, var(--bg) 80%, #1a2838 20%);
  --login-fx-sky-glow: rgba(100, 150, 200, 0.09);
  --login-fx-horizon-ground: color-mix(in srgb, var(--bg) 92%, #182230 8%);
  --login-fx-haze-a: rgba(120, 180, 220, 0.05);
  --login-fx-haze-b: rgba(134, 196, 154, 0.03);
  --login-fx-cloud-core: #f0f6fc;
  --login-fx-cloud-flare: #e8f0f8;
  --login-fx-cloud-top: #d8e4f0;
  --login-fx-cloud-mid: #7a94ac;
  --login-fx-cloud-depth: #5a7490;
  --login-fx-cloud-bottom: #485e78;
  --login-fx-cloud-shade-fade: rgba(50, 70, 94, 0);
  --login-fx-cloud-shade: rgba(40, 58, 80, 0.36);
  --login-fx-cloud-shade-deep: rgba(28, 42, 62, 0.52);
  --login-fx-cloud-cap: rgba(240, 248, 255, 0.48);
  --login-fx-cloud-cap-fade: rgba(240, 248, 255, 0);
  --login-fx-cloud-shadow: #1e3044;
  --login-fx-hill-distant-top: #243448;
  --login-fx-hill-distant-bottom: #182430;
  --login-fx-hill-far-top: #1e2e42;
  --login-fx-hill-far-bottom: #141e2c;
  --login-fx-hill-mid-top: #182636;
  --login-fx-hill-mid-bottom: #101820;
  --login-fx-hill-near-top: color-mix(in srgb, var(--bg) 42%, #1e3040 58%);
  --login-fx-hill-near-bottom: color-mix(in srgb, var(--bg) 65%, #0e1820 35%);
  --login-fx-hill-blend: color-mix(in srgb, var(--login-fx-hill-near-bottom) 30%, var(--login-fx-horizon-ground) 70%);
  --login-fx-hill-fade: color-mix(in srgb, var(--login-fx-horizon-ground) 50%, transparent);
  --login-fx-hill-ridge: rgba(140, 175, 210, 0.2);
  --login-fx-haze-opacity: 0.72;
  --login-fx-grid-line: rgba(148, 163, 184, 0.07);
  --login-fx-yard-opacity: 0.16;
  --login-fx-container-opacity: 0.34;
  --login-fx-fleet-opacity: 1;
  --login-fx-road-shoulder: color-mix(in srgb, var(--login-fx-horizon-ground) 48%, rgba(0, 0, 0, 0.35));
  --login-fx-road-top: color-mix(in srgb, var(--login-fx-horizon-ground) 42%, rgba(0, 0, 0, 0.42));
  --login-fx-road-body: color-mix(in srgb, var(--login-fx-horizon-ground) 38%, #1a222c);
  --login-fx-road-body-bottom: color-mix(in srgb, var(--bg) 42%, #0e141c);
  --login-fx-road-opacity: 0.9;
  --login-fx-road-lane-opacity: 0.68;
  --login-fx-road-mask: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.35) 12%,
    rgba(0, 0, 0, 0.82) 26%,
    #000 42%,
    #000 86%,
    rgba(0, 0, 0, 0.28) 96%,
    transparent 100%
  );
  --login-fx-lane-dash: rgba(212, 196, 158, 0.42);
  --login-fx-truck-cab-top: #667788;
  --login-fx-truck-cab-bottom: #4f5d6c;
  --login-fx-truck-trailer-top: #b8c2cc;
  --login-fx-truck-trailer-bottom: #949fa8;
  --login-fx-truck-window: #0f172a;
  --login-fx-truck-window-shine: rgba(148, 163, 184, 0.22);
  --login-fx-truck-chassis: #394656;
  --login-fx-truck-underbody: #2a343f;
  --login-fx-truck-tire: #090e14;
  --login-fx-truck-rim: #64748b;
  --login-fx-truck-headlight: rgba(254, 243, 199, 0.92);
  --login-fx-truck-rib: rgba(0, 0, 0, 0.22);
  --login-fx-truck-cargo: #536273;
  --login-fx-truck-reefer: #cbd5e1;
  --login-fx-truck-reefer-grille: #475569;
  --login-fx-container-slate: #3a4858;
  --login-fx-container-slate-stroke: #2f3b49;
  --login-fx-container-ocean: #2f4558;
  --login-fx-container-ocean-stroke: #263846;
  --login-fx-container-rust: #5a463a;
  --login-fx-container-rust-stroke: #48372e;
  --login-fx-container-steel: #465462;
  --login-fx-container-steel-stroke: #38444f;
  --login-fx-container-rib: rgba(0, 0, 0, 0.24);
  --login-fx-container-door: rgba(0, 0, 0, 0.28);
  --login-fx-rail-ballast: color-mix(in srgb, var(--login-fx-horizon-ground) 52%, rgba(0, 0, 0, 0.34));
  --login-fx-rail-tie: color-mix(in srgb, var(--login-fx-horizon-ground) 38%, rgba(82, 92, 106, 0.72));
  --login-fx-rail-steel: color-mix(in srgb, var(--login-fx-horizon-ground) 32%, rgba(148, 163, 184, 0.58));
  --login-fx-rail-steel-highlight: rgba(203, 213, 225, 0.62);
  --login-fx-rail-steel-shadow: rgba(71, 85, 105, 0.72);
  --login-fx-rail-opacity: 0.74;
  --login-fx-rail-tie-opacity: 0.72;
  --login-fx-rail-mask: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.28) 14%,
    rgba(0, 0, 0, 0.78) 30%,
    #000 46%,
    #000 72%,
    rgba(0, 0, 0, 0.42) 88%,
    transparent 100%
  );
  --login-fx-loco-blue-top: #255a9e;
  --login-fx-loco-blue-bottom: #184472;
  --login-fx-loco-yellow-top: #f0cc42;
  --login-fx-loco-yellow-bottom: #b89818;
  --login-fx-loco-orange-top: #d86820;
  --login-fx-loco-orange-bottom: #a84814;
  --login-fx-loco-underframe: #222930;
  --login-fx-loco-roof: #788898;
  --login-fx-flatcar: #3a4550;
  --login-fx-shadow: rgba(0, 0, 0, 0.42);
  --login-fx-vignette-edge: rgba(0, 0, 0, 0.48);
  --login-fx-grain-opacity: 0.055;
  --login-fx-scanline-opacity: 0.05;
}

.login-page--terminal-lite .login-form-body {
  position: relative;
  z-index: 2;
}

.login-form-panel__fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
  contain: layout style paint;
}

.login-form-panel__fx-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.login-form-panel__fx--paused .login-form-panel__fx-fleet-track,
.login-form-panel__fx--paused .login-form-panel__fx-rail-train-track,
.login-form-panel__fx--paused .login-form-panel__fx-clouds-strip {
  animation-play-state: paused !important;
}

.login-form-panel__fx-sky {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--login-fx-sky-height, 32%);
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 48% 62% at 84% 8%, var(--login-fx-sky-glow) 0%, transparent 70%),
    radial-gradient(ellipse 42% 50% at 14% 6%, var(--login-fx-haze-a) 0%, transparent 64%),
    radial-gradient(ellipse 80% 55% at 50% 100%, color-mix(in srgb, var(--login-fx-sky-horizon) 55%, transparent) 0%, transparent 72%),
    linear-gradient(
      180deg,
      var(--login-fx-sky-deep, var(--login-fx-sky-top)) 0%,
      var(--login-fx-sky-top) 22%,
      var(--login-fx-sky-mid) 58%,
      var(--login-fx-sky-horizon) 100%
    );
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 58%, rgba(0, 0, 0, 0.72) 78%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 58%, rgba(0, 0, 0, 0.72) 78%, transparent 100%);
}

.login-form-panel__fx-sky-zone {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--login-fx-cloud-ceiling, 40%);
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.login-form-panel__fx-sky-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 32% 44% at 80% 16%, var(--login-fx-sky-glow) 0%, transparent 72%),
    radial-gradient(ellipse 24% 32% at 22% 12%, color-mix(in srgb, var(--login-fx-haze-a) 65%, transparent) 0%, transparent 68%);
}

.login-form-panel__fx-clouds-scroll {
  position: absolute;
  left: -3%;
  right: -3%;
  top: var(--login-fx-clouds-scroll-top, 0%);
  height: var(--login-fx-clouds-scroll-height, 100%);
  overflow: hidden;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%),
    linear-gradient(180deg, #000 0%, #000 88%, transparent 100%);
  mask-image:
    linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%),
    linear-gradient(180deg, #000 0%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.login-form-panel__fx-clouds-strip {
  display: block;
  width: 200%;
  min-width: 200%;
  height: 100%;
  flex: none;
  transform: translate3d(0, 0, 0);
  will-change: transform;
  backface-visibility: hidden;
  animation: login-form-cloud-scroll var(--login-fx-cloud-scroll-duration, 280s) linear infinite;
  overflow: hidden;
}

.login-fx-svg-stop-cloud-core { stop-color: var(--login-fx-cloud-core); }
.login-fx-svg-stop-cloud-flare { stop-color: var(--login-fx-cloud-flare); }
.login-fx-svg-stop-cloud-top { stop-color: var(--login-fx-cloud-top); }
.login-fx-svg-stop-cloud-mid { stop-color: var(--login-fx-cloud-mid); }
.login-fx-svg-stop-cloud-depth { stop-color: var(--login-fx-cloud-depth); }
.login-fx-svg-stop-cloud-bottom { stop-color: var(--login-fx-cloud-bottom); }
.login-fx-svg-stop-cloud-shade-fade { stop-color: var(--login-fx-cloud-shade-fade); }
.login-fx-svg-stop-cloud-shade { stop-color: var(--login-fx-cloud-shade); }
.login-fx-svg-stop-cloud-shade-deep { stop-color: var(--login-fx-cloud-shade-deep); }
.login-fx-svg-stop-cloud-cap { stop-color: var(--login-fx-cloud-cap); }
.login-fx-svg-stop-cloud-cap-fade { stop-color: var(--login-fx-cloud-cap-fade); }

.login-fx-svg-cloud-lobe { fill: url(#loginFxCloudLobeGrad); }

.login-fx-svg-cloud-base { fill: url(#loginFxCloudBaseGrad); }

.login-fx-svg-cloud-bridge { fill: url(#loginFxCloudBridgeGrad); }

.login-fx-svg-cloud-shade--soft { fill: url(#loginFxCloudShadeGrad); opacity: 0.42; }

.login-fx-svg-cloud-shade--deep { fill: url(#loginFxCloudShadeDeepGrad); opacity: 0.58; }

.login-fx-svg-cloud-glow { fill: url(#loginFxCloudGlowGrad); opacity: 0.76; }

.login-fx-svg-cloud-shadow { fill: var(--login-fx-cloud-shadow); opacity: 0.5; }

[data-theme="dark"] .login-fx-svg-cloud-shade--soft { opacity: 0.52; }

[data-theme="dark"] .login-fx-svg-cloud-shade--deep { opacity: 0.64; }

[data-theme="dark"] .login-fx-svg-cloud-glow { opacity: 0.6; }

[data-theme="dark"] .login-fx-svg-cloud-shadow { opacity: 0.56; }

.login-fx-svg-stop-hill-distant-top { stop-color: var(--login-fx-hill-distant-top); }
.login-fx-svg-stop-hill-distant-bottom { stop-color: var(--login-fx-hill-distant-bottom); }
.login-fx-svg-stop-hill-far-top { stop-color: var(--login-fx-hill-far-top); }
.login-fx-svg-stop-hill-far-bottom { stop-color: var(--login-fx-hill-far-bottom); }
.login-fx-svg-stop-hill-mid-top { stop-color: var(--login-fx-hill-mid-top); }
.login-fx-svg-stop-hill-mid-bottom { stop-color: var(--login-fx-hill-mid-bottom); }
.login-fx-svg-stop-hill-near-top { stop-color: var(--login-fx-hill-near-top); }
.login-fx-svg-stop-hill-near-bottom { stop-color: var(--login-fx-hill-near-bottom); }
.login-fx-svg-stop-hill-blend { stop-color: var(--login-fx-hill-blend); }
.login-fx-svg-stop-hill-fade { stop-color: var(--login-fx-hill-blend); stop-opacity: 0; }

.login-form-panel__fx-hills {
  position: absolute;
  left: -14%;
  right: -14%;
  top: calc(var(--login-fx-rail-top, 38%) - 13%);
  height: 15%;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 52%, rgba(0, 0, 0, 0.45) 72%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 52%, rgba(0, 0, 0, 0.45) 72%, transparent 100%);
}

.login-form-panel__fx-hills-svg {
  display: block;
  width: 100%;
  height: 100%;
}

.login-form-panel__fx-hills-blend {
  position: absolute;
  left: -8%;
  right: -8%;
  bottom: -4%;
  height: 62%;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    transparent 0%,
    color-mix(in srgb, var(--login-fx-horizon-ground) 6%, transparent) 22%,
    color-mix(in srgb, var(--login-fx-horizon-ground) 35%, transparent) 50%,
    color-mix(in srgb, var(--login-fx-horizon-ground) 65%, var(--bg) 35%) 78%,
    color-mix(in srgb, var(--login-fx-horizon-ground) 85%, var(--bg) 15%) 100%
  );
}

.login-fx-svg-hill--distant { opacity: 0.62; }
.login-fx-svg-hill--far { opacity: 0.82; }
.login-fx-svg-hill--mid { opacity: 0.92; }
.login-fx-svg-hill--near { opacity: 1; }

[data-theme="dark"] .login-form-panel__fx-hills {
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.45) 8%, #000 22%, #000 50%, rgba(0, 0, 0, 0.4) 70%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.45) 8%, #000 22%, #000 50%, rgba(0, 0, 0, 0.4) 70%, transparent 100%);
}

[data-theme="dark"] .login-form-panel__fx-hills-blend {
  background: linear-gradient(
    180deg,
    transparent 0%,
    color-mix(in srgb, var(--login-fx-horizon-ground) 10%, transparent) 20%,
    color-mix(in srgb, var(--login-fx-horizon-ground) 40%, transparent) 48%,
    color-mix(in srgb, var(--login-fx-horizon-ground) 70%, var(--bg) 30%) 76%,
    color-mix(in srgb, var(--login-fx-horizon-ground) 88%, var(--bg) 12%) 100%
  );
}

[data-theme="dark"] .login-form-panel__fx-horizon {
  opacity: 0.58;
}

.login-form-panel__fx-horizon {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--login-fx-sky-height, 32%) - 6%);
  height: calc(var(--login-fx-rail-top, 38%) - var(--login-fx-sky-height, 32%) + 8%);
  z-index: 0;
  pointer-events: none;
  opacity: 0.72;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--login-fx-sky-horizon) 22%, transparent) 0%,
    var(--login-fx-horizon-ground) 48%,
    color-mix(in srgb, var(--login-fx-horizon-ground) 68%, var(--bg) 32%) 100%
  );
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 38%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 38%, #000 100%);
}

.login-form-panel__fx-haze {
  position: absolute;
  inset: 0;
  opacity: var(--login-fx-haze-opacity, 0.86);
  background:
    radial-gradient(ellipse 90% 60% at 50% 72%, color-mix(in srgb, var(--login-fx-road-body) 22%, transparent) 0%, transparent 68%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 34%, rgba(0, 0, 0, 0.45) 48%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0%, transparent 34%, rgba(0, 0, 0, 0.45) 48%, #000 100%);
}

.login-form-panel__fx-yard {
  position: absolute;
  inset: -18%;
  opacity: var(--login-fx-yard-opacity);
  background-image:
    linear-gradient(var(--login-fx-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--login-fx-grid-line) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 88% 72% at 50% 52%, #000 12%, transparent 80%);
}

.login-form-panel__fx-rail-zone {
  position: absolute;
  left: -10%;
  right: -10%;
  top: var(--login-fx-rail-top, 38%);
  height: 58px;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
  opacity: var(--login-fx-rail-opacity);
  -webkit-mask-image: var(--login-fx-rail-mask);
  mask-image: var(--login-fx-rail-mask);
}

.login-form-panel__fx-rail-bed {
  position: absolute;
  inset: 0;
}

.login-form-panel__fx-rail-ballast {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 20px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    color-mix(in srgb, var(--login-fx-rail-ballast) 42%, transparent) 20%,
    var(--login-fx-rail-ballast) 50%,
    color-mix(in srgb, var(--login-fx-rail-ballast) 78%, #000 22%) 100%
  );
  mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
}

.login-form-panel__fx-rail-tie-shadow {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  height: 3px;
  opacity: 0.55;
  background: repeating-linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.2) 0 6px,
    transparent 6px 19px
  );
  mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
}

.login-form-panel__fx-rail-ties {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  height: 4px;
  opacity: var(--login-fx-rail-tie-opacity, 0.88);
  background: repeating-linear-gradient(
    90deg,
    var(--login-fx-rail-tie) 0 6px,
    color-mix(in srgb, var(--login-fx-rail-tie) 68%, #000 32%) 6px 7px,
    transparent 7px 19px
  );
  mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
}

.login-form-panel__fx-rail-tie-plates {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  height: 1px;
  opacity: 0.45;
  background: repeating-linear-gradient(
    90deg,
    transparent 0 5px,
    var(--login-fx-rail-steel-shadow) 5px 6px,
    transparent 6px 19px
  );
  mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
}

.login-form-panel__fx-rail-rail {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 1px;
  background: linear-gradient(
    180deg,
    var(--login-fx-rail-steel-highlight) 0%,
    var(--login-fx-rail-steel) 52%,
    var(--login-fx-rail-steel-shadow) 100%
  );
  mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
}

.login-form-panel__fx-rail-rail--far {
  bottom: 12px;
  opacity: 0.52;
  transform: scaleY(0.82);
}

.login-form-panel__fx-rail-rail--near {
  bottom: 9px;
  opacity: 0.96;
}

.login-form-panel__fx-rail-train {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42px;
  overflow: hidden;
}

.login-form-panel__fx-rail-train-track {
  display: flex;
  width: max-content;
  contain: layout style;
  transform: translate3d(0, 0, 0);
  will-change: transform;
  animation: login-form-rail-scroll 72s linear infinite;
  animation-delay: -28s;
}

.login-form-panel__fx-rail-train-row {
  display: flex;
  flex-shrink: 0;
  align-items: flex-end;
}

.login-form-panel__fx-rail-train-unit {
  flex-shrink: 0;
  margin-right: var(--login-fx-train-gap, 1280px);
}

.login-form-panel__fx-rail-train-svg {
  display: block;
  width: var(--login-fx-train-display-width, 298px);
  height: 38px;
  overflow: visible;
  --login-fx-train-container-slate: #788898;
  --login-fx-train-container-slate-stroke: #586878;
  --login-fx-train-container-ocean: #5a7088;
  --login-fx-train-container-ocean-stroke: #425868;
  --login-fx-train-container-rust: #9a7868;
  --login-fx-train-container-rust-stroke: #745848;
  --login-fx-train-container-steel: #849098;
  --login-fx-train-container-steel-stroke: #646e7c;
  --login-fx-train-container-teal: #6a8880;
  --login-fx-train-container-teal-stroke: #506860;
  --login-fx-train-container-brick: #986860;
  --login-fx-train-container-brick-stroke: #745048;
  --login-fx-train-container-forest: #6a8474;
  --login-fx-train-container-forest-stroke: #506858;
  --login-fx-train-container-gold: #a89468;
  --login-fx-train-container-gold-stroke: #807050;
  --login-fx-train-container-rib: rgba(0, 0, 0, 0.18);
  --login-fx-train-container-highlight: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .login-form-panel__fx-rail-train-svg {
  --login-fx-train-container-slate: #8898a8;
  --login-fx-train-container-slate-stroke: #606e7c;
  --login-fx-train-container-ocean: #6a8094;
  --login-fx-train-container-ocean-stroke: #4a6070;
  --login-fx-train-container-rust: #b08878;
  --login-fx-train-container-rust-stroke: #886858;
  --login-fx-train-container-steel: #98a4b0;
  --login-fx-train-container-steel-stroke: #707a88;
  --login-fx-train-container-teal: #789890;
  --login-fx-train-container-teal-stroke: #587068;
  --login-fx-train-container-brick: #a87870;
  --login-fx-train-container-brick-stroke: #805850;
  --login-fx-train-container-forest: #789080;
  --login-fx-train-container-forest-stroke: #586860;
  --login-fx-train-container-gold: #b8a478;
  --login-fx-train-container-gold-stroke: #908060;
  --login-fx-train-container-rib: rgba(0, 0, 0, 0.26);
  --login-fx-train-container-highlight: rgba(255, 255, 255, 0.1);
}

.login-fx-svg-stop-loco-blue-top { stop-color: var(--login-fx-loco-blue-top); }
.login-fx-svg-stop-loco-blue-bottom { stop-color: var(--login-fx-loco-blue-bottom); }
.login-fx-svg-stop-loco-yellow-top { stop-color: var(--login-fx-loco-yellow-top); }
.login-fx-svg-stop-loco-yellow-bottom { stop-color: var(--login-fx-loco-yellow-bottom); }
.login-fx-svg-stop-loco-orange-top { stop-color: var(--login-fx-loco-orange-top); }
.login-fx-svg-stop-loco-orange-bottom { stop-color: var(--login-fx-loco-orange-bottom); }
.login-fx-svg-locomotive-body { stroke: rgba(0, 0, 0, 0.14); stroke-width: 0.55; stroke-linejoin: round; }
.login-fx-svg-locomotive-nose { stroke: rgba(0, 0, 0, 0.18); stroke-width: 0.55; stroke-linejoin: round; }
.login-fx-svg-locomotive-nose-face { fill: rgba(255, 255, 255, 0.1); stroke: rgba(0, 0, 0, 0.14); stroke-width: 0.35; }
.login-fx-svg-locomotive-nose-chin { fill: rgba(0, 0, 0, 0.1); stroke: rgba(0, 0, 0, 0.12); stroke-width: 0.3; }
.login-fx-svg-locomotive-nose-edge { stroke: rgba(0, 0, 0, 0.22); stroke-width: 0.55; stroke-linecap: round; }
.login-fx-svg-locomotive-nose-join { stroke: rgba(0, 0, 0, 0.16); stroke-width: 0.45; opacity: 0.75; }
.login-fx-svg-locomotive-nose-band { stroke: rgba(0, 0, 0, 0.1); stroke-width: 0.3; }
.login-fx-svg-locomotive-nose-band--upper { opacity: 0.9; }
.login-fx-svg-locomotive-pilot { fill: var(--login-fx-loco-underframe); stroke: rgba(0, 0, 0, 0.2); stroke-width: 0.4; }
.login-fx-svg-locomotive-pilot-cap { fill: var(--login-fx-loco-underframe); opacity: 0.88; stroke: rgba(0, 0, 0, 0.14); stroke-width: 0.3; }
.login-fx-svg-locomotive-headlight-ring { fill: rgba(0, 0, 0, 0.14); stroke: rgba(0, 0, 0, 0.22); stroke-width: 0.35; }
.login-fx-svg-locomotive-pilot-face { fill: var(--login-fx-loco-underframe); opacity: 0.92; stroke: rgba(0, 0, 0, 0.16); stroke-width: 0.35; }
.login-fx-svg-locomotive-pilot-bar { stroke: rgba(255, 255, 255, 0.28); stroke-width: 0.45; stroke-linecap: round; }
.login-fx-svg-locomotive-nose-cap { stroke: rgba(0, 0, 0, 0.12); stroke-width: 0.4; stroke-linejoin: round; }
.login-fx-svg-locomotive-nose-window { fill: var(--login-fx-truck-window); stroke: rgba(0, 0, 0, 0.16); stroke-width: 0.35; }

.login-fx-svg-locomotive-windows .login-fx-svg-locomotive-window {
  fill: #b8c9dc;
  stroke: rgba(15, 23, 42, 0.4);
  stroke-width: 0.55;
  stroke-linejoin: round;
  opacity: 1;
}

.login-fx-svg-locomotive-windows .login-fx-svg-locomotive-window-shine {
  fill: rgba(255, 255, 255, 0.44);
  opacity: 1;
}

[data-theme="dark"] .login-fx-svg-locomotive-windows .login-fx-svg-locomotive-window {
  fill: #9eb4cc;
  stroke: rgba(186, 200, 220, 0.48);
}

[data-theme="dark"] .login-fx-svg-locomotive-windows .login-fx-svg-locomotive-window-shine {
  fill: rgba(226, 236, 248, 0.38);
}
.login-fx-svg-locomotive-nose-chevron { stroke: rgba(0, 0, 0, 0.12); stroke-width: 0.28; }
.login-fx-svg-locomotive-nose-seam { stroke: rgba(0, 0, 0, 0.18); stroke-width: 0.45; opacity: 0.82; }
.login-fx-svg-locomotive-headlight-housing { fill: rgba(0, 0, 0, 0.32); stroke: rgba(0, 0, 0, 0.2); stroke-width: 0.35; }
.login-fx-svg-locomotive-wing { stroke: rgba(0, 0, 0, 0.1); stroke-width: 0.35; }
.login-fx-svg-locomotive-stripe { stroke: rgba(0, 0, 0, 0.08); stroke-width: 0.25; }
.login-fx-svg-locomotive-stripe--thin { opacity: 0.88; }
.login-fx-svg-locomotive-underframe { stroke: rgba(0, 0, 0, 0.22); stroke-width: 0.55; opacity: 0.7; }
.login-fx-svg-locomotive-roof { fill: var(--login-fx-loco-roof); opacity: 0.92; stroke: rgba(0, 0, 0, 0.1); stroke-width: 0.35; }
.login-fx-svg-locomotive-roof-bump { fill: var(--login-fx-loco-roof); stroke: rgba(0, 0, 0, 0.12); stroke-width: 0.3; }
.login-fx-svg-locomotive-roof-bump--horn { fill: var(--login-fx-truck-chassis); opacity: 0.88; }
.login-fx-svg-locomotive-roof-bump--cab { opacity: 0.82; }
.login-fx-svg-locomotive-roof-bump--rear { opacity: 0.78; }
.login-fx-svg-locomotive-handrail { stroke: var(--login-fx-loco-yellow-top); stroke-width: 0.65; stroke-linecap: round; opacity: 0.92; }
.login-fx-svg-locomotive-handrail--lower { stroke-width: 0.55; opacity: 0.78; }
.login-fx-svg-locomotive-fan { fill: var(--login-fx-loco-roof); stroke: rgba(0, 0, 0, 0.18); stroke-width: 0.35; opacity: 0.88; }
.login-fx-svg-locomotive-ditch-light { fill: var(--login-fx-truck-headlight); opacity: 0.82; }
.login-fx-svg-locomotive-panel { stroke: rgba(0, 0, 0, 0.12); stroke-width: 0.45; opacity: 0.65; }
.login-fx-svg-locomotive-vent { fill: rgba(0, 0, 0, 0.28); }
.login-fx-svg-locomotive-headlight { fill: var(--login-fx-truck-headlight); opacity: 0.95; }
.login-fx-svg-locomotive-marker--rear { fill: #dc2626; opacity: 0.85; }
.login-fx-svg-locomotive-marker--outer { fill: #dc2626; opacity: 0.85; }
.login-fx-svg-locomotive-fuel-tank { fill: var(--login-fx-loco-underframe); stroke: rgba(0, 0, 0, 0.18); stroke-width: 0.4; }
.login-fx-svg-locomotive-window--cab,
.login-fx-svg-locomotive-window--rear,
.login-fx-svg-locomotive-window--nose {
  fill: var(--login-fx-truck-window);
  stroke: rgba(0, 0, 0, 0.22);
  stroke-width: 0.45;
  stroke-linejoin: round;
}

.login-fx-svg-locomotive-window-shine { fill: var(--login-fx-truck-window-shine); opacity: 0.85; }
.login-fx-svg-locomotive-hood-seam { stroke: rgba(0, 0, 0, 0.14); stroke-width: 0.5; }
.login-fx-svg-locomotive-stack { fill: var(--login-fx-truck-chassis); opacity: 0.78; stroke: rgba(0, 0, 0, 0.12); stroke-width: 0.35; }
.login-fx-svg-locomotive-number {
  fill: var(--login-fx-loco-yellow-top);
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 3.4px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.login-fx-svg-train-truck-frame { fill: var(--login-fx-truck-chassis); opacity: 0.82; stroke: rgba(0, 0, 0, 0.1); stroke-width: 0.35; }
.login-fx-svg-train-coupler { fill: var(--login-fx-truck-rim); opacity: 0.82; }
.login-fx-svg-flatcar-frame { fill: var(--login-fx-truck-chassis); opacity: 0.78; stroke: rgba(0, 0, 0, 0.1); stroke-width: 0.35; }
.login-fx-svg-flatcar-bed { fill: var(--login-fx-flatcar); stroke: rgba(0, 0, 0, 0.12); stroke-width: 0.4; }
.login-fx-svg-flatcar-side-rail { fill: var(--login-fx-truck-chassis); opacity: 0.82; stroke: rgba(0, 0, 0, 0.1); stroke-width: 0.3; }
.login-fx-svg-flatcar-edge-rail { stroke: var(--login-fx-truck-rim); stroke-width: 0.55; opacity: 0.78; }
.login-fx-svg-flatcar-bulkhead { fill: var(--login-fx-truck-chassis); opacity: 0.85; stroke: rgba(0, 0, 0, 0.1); stroke-width: 0.35; }
.login-fx-svg-flatcar-lock { fill: var(--login-fx-truck-rim); opacity: 0.7; stroke: rgba(0, 0, 0, 0.12); stroke-width: 0.25; }
.login-fx-svg-flatcar--empty .login-fx-svg-flatcar-bed { opacity: 0.92; }
.login-fx-svg-train-underframe { stroke: rgba(0, 0, 0, 0.2); stroke-width: 0.5; opacity: 0.65; }

.login-fx-svg-boxcar-roof { fill: var(--login-fx-truck-chassis); opacity: 0.88; stroke: rgba(0, 0, 0, 0.12); stroke-width: 0.35; }
.login-fx-svg-boxcar-body { stroke: rgba(0, 0, 0, 0.14); stroke-width: 0.55; }
.login-fx-svg-boxcar-door { fill: rgba(0, 0, 0, 0.12); stroke: rgba(0, 0, 0, 0.16); stroke-width: 0.4; }
.login-fx-svg-boxcar-door-seam,
.login-fx-svg-boxcar-ladder { stroke: rgba(255, 255, 255, 0.22); stroke-width: 0.45; opacity: 0.75; }
.login-fx-svg-boxcar--blue .login-fx-svg-boxcar-body { fill: #3d6a9a; }
.login-fx-svg-boxcar--green .login-fx-svg-boxcar-body { fill: #4a6858; }
.login-fx-svg-boxcar--brown .login-fx-svg-boxcar-body { fill: #7a5048; }

.login-fx-svg-tankcar-frame,
.login-fx-svg-tankcar-saddle { fill: var(--login-fx-truck-chassis); opacity: 0.78; stroke: rgba(0, 0, 0, 0.1); stroke-width: 0.35; }
.login-fx-svg-tankcar-tank { stroke: rgba(0, 0, 0, 0.16); stroke-width: 0.55; }
.login-fx-svg-tankcar-walkway { fill: var(--login-fx-truck-chassis); opacity: 0.82; stroke: rgba(0, 0, 0, 0.12); stroke-width: 0.3; }
.login-fx-svg-tankcar-rail,
.login-fx-svg-tankcar-ladder { stroke: var(--login-fx-truck-rim); stroke-width: 0.45; opacity: 0.75; }
.login-fx-svg-tankcar-dome { fill: var(--login-fx-truck-chassis); stroke: rgba(0, 0, 0, 0.14); stroke-width: 0.35; }
.login-fx-svg-tankcar--black .login-fx-svg-tankcar-tank { fill: #3a4048; }
.login-fx-svg-tankcar--tan .login-fx-svg-tankcar-tank { fill: #b8a888; }
.login-fx-svg-tankcar--banded .login-fx-svg-tankcar-tank { fill: #2f4f78; }
.login-fx-svg-tankcar--banded .login-fx-svg-tankcar-band { fill: #d4a017; opacity: 0.92; }

.login-fx-svg-autorack-frame { fill: var(--login-fx-truck-chassis); opacity: 0.78; stroke: rgba(0, 0, 0, 0.1); stroke-width: 0.35; }
.login-fx-svg-autorack-rail,
.login-fx-svg-autorack-deck { stroke: var(--login-fx-truck-chassis); stroke-width: 0.55; opacity: 0.72; }
.login-fx-svg-autorack-car { stroke: rgba(0, 0, 0, 0.18); stroke-width: 0.35; }
.login-fx-svg-autorack-car-roof { fill: rgba(0, 0, 0, 0.14); stroke: rgba(0, 0, 0, 0.12); stroke-width: 0.25; }
.login-fx-svg-autorack-car-glass { fill: var(--login-fx-truck-window); opacity: 0.82; stroke: rgba(0, 0, 0, 0.12); stroke-width: 0.25; }

.login-fx-svg-skeleton-stake { fill: var(--login-fx-truck-chassis); opacity: 0.82; stroke: rgba(0, 0, 0, 0.12); stroke-width: 0.3; }

.login-fx-svg-trailer-flat-body { fill: #e8eef3; stroke: rgba(0, 0, 0, 0.12); stroke-width: 0.5; }
.login-fx-svg-trailer-flat-stripe { fill: #c53030; opacity: 0.88; }
.login-fx-svg-trailer-flat-stripe--lower { opacity: 0.78; }
.login-fx-svg-trailer-flat-wheel { fill: var(--login-fx-truck-tire); stroke: var(--login-fx-truck-rim); stroke-width: 0.35; }

.login-fx-svg-caboose-body { fill: #b83232; stroke: rgba(0, 0, 0, 0.16); stroke-width: 0.55; }
.login-fx-svg-caboose-roof,
.login-fx-svg-caboose-cupola { fill: #2a323a; stroke: rgba(0, 0, 0, 0.14); stroke-width: 0.4; }
.login-fx-svg-caboose-platform { fill: var(--login-fx-truck-chassis); opacity: 0.82; stroke: rgba(0, 0, 0, 0.12); stroke-width: 0.35; }
.login-fx-svg-caboose-rail { stroke: var(--login-fx-truck-rim); stroke-width: 0.45; opacity: 0.72; }
.login-fx-svg-caboose-window { fill: var(--login-fx-truck-window); stroke: rgba(0, 0, 0, 0.14); stroke-width: 0.35; }

[data-theme="dark"] .login-fx-svg-boxcar--blue .login-fx-svg-boxcar-body { fill: #4a78a8; }
[data-theme="dark"] .login-fx-svg-boxcar--green .login-fx-svg-boxcar-body { fill: #5a7868; }
[data-theme="dark"] .login-fx-svg-boxcar--brown .login-fx-svg-boxcar-body { fill: #8a6058; }
[data-theme="dark"] .login-fx-svg-tankcar--black .login-fx-svg-tankcar-tank { fill: #4a5058; }
[data-theme="dark"] .login-fx-svg-tankcar--tan .login-fx-svg-tankcar-tank { fill: #c8b898; }
[data-theme="dark"] .login-fx-svg-tankcar--banded .login-fx-svg-tankcar-tank { fill: #3a5f88; }
[data-theme="dark"] .login-fx-svg-trailer-flat-body { fill: #c8d0da; }
[data-theme="dark"] .login-fx-svg-caboose-body { fill: #c84040; }

.login-fx-svg-hopper-body { fill: #687888; stroke: rgba(0, 0, 0, 0.14); stroke-width: 0.55; stroke-linejoin: round; }
.login-fx-svg-hopper-load { stroke: rgba(0, 0, 0, 0.12); stroke-width: 0.35; }
.login-fx-svg-hopper-rib { stroke: rgba(0, 0, 0, 0.14); stroke-width: 0.45; opacity: 0.7; }
.login-fx-svg-hopper-hatch { fill: var(--login-fx-truck-chassis); opacity: 0.82; stroke: rgba(0, 0, 0, 0.12); stroke-width: 0.3; }
.login-fx-svg-hopper--coal .login-fx-svg-hopper-load { fill: #3a4048; }
.login-fx-svg-hopper--gravel .login-fx-svg-hopper-load { fill: #9a9080; }

.login-fx-svg-gondola-tub { fill: #5a6674; stroke: rgba(0, 0, 0, 0.14); stroke-width: 0.55; }
.login-fx-svg-gondola-rail { stroke: var(--login-fx-truck-chassis); stroke-width: 0.55; opacity: 0.78; }
.login-fx-svg-gondola-pipe { fill: #849098; stroke: rgba(0, 0, 0, 0.14); stroke-width: 0.35; }
.login-fx-svg-gondola-coil { fill: #788898; stroke: rgba(0, 0, 0, 0.14); stroke-width: 0.4; }

[data-theme="dark"] .login-fx-svg-hopper-body { fill: #586878; }
[data-theme="dark"] .login-fx-svg-hopper--coal .login-fx-svg-hopper-load { fill: #4a5058; }
[data-theme="dark"] .login-fx-svg-hopper--gravel .login-fx-svg-hopper-load { fill: #b0a898; }
[data-theme="dark"] .login-fx-svg-gondola-tub { fill: #4a5664; }

.login-fx-svg-wellcar-sill { fill: var(--login-fx-flatcar); stroke: rgba(0, 0, 0, 0.12); stroke-width: 0.4; }
.login-fx-svg-wellcar-sill--left,
.login-fx-svg-wellcar-sill--right { opacity: 0.95; }
.login-fx-svg-wellcar-well { fill: #3a4550; stroke: rgba(0, 0, 0, 0.14); stroke-width: 0.45; }
.login-fx-svg-wellcar-rim { stroke: var(--login-fx-truck-chassis); stroke-width: 0.55; opacity: 0.75; }
.login-fx-svg-lumber-bundle { fill: #b89468; stroke: rgba(0, 0, 0, 0.14); stroke-width: 0.4; }
.login-fx-svg-lumber-band { stroke: rgba(0, 0, 0, 0.18); stroke-width: 0.45; }
.login-fx-svg-reefer-box-body { fill: #e8eef3; stroke: rgba(0, 0, 0, 0.14); stroke-width: 0.55; }
.login-fx-svg-reefer-box-unit { fill: #cbd5e1; stroke: rgba(0, 0, 0, 0.12); stroke-width: 0.35; }
.login-fx-svg-reefer-box-grille { fill: #64748b; opacity: 0.85; }

[data-theme="dark"] .login-fx-svg-wellcar-well { fill: #2a343f; }
[data-theme="dark"] .login-fx-svg-lumber-bundle { fill: #c8a878; }
[data-theme="dark"] .login-fx-svg-reefer-box-body { fill: #c8d0da; }
[data-theme="dark"] .login-fx-svg-dump-load--gravel { fill: #b0a898; }

.login-fx-svg-train-container-reefer { fill: #b86860; opacity: 0.82; }
.login-fx-svg-train-container-hazmat { fill: #d69e2e; opacity: 0.88; }
.login-fx-svg-train-wheel { fill: var(--login-fx-truck-tire); }
.login-fx-svg-train-wheel-rim { fill: var(--login-fx-truck-rim); opacity: 0.82; }
.login-fx-svg-train-container-body { stroke-width: 0.75; }
.login-fx-svg-train-container-highlight { fill: var(--login-fx-train-container-highlight, rgba(255, 255, 255, 0.2)); }
.login-fx-svg-train-container-rib { stroke: var(--login-fx-train-container-rib, var(--login-fx-container-rib)); stroke-width: 0.55; opacity: 0.85; }

.login-fx-svg-train-container--slate .login-fx-svg-train-container-body {
  fill: var(--login-fx-train-container-slate, var(--login-fx-container-slate));
  stroke: var(--login-fx-train-container-slate-stroke, var(--login-fx-container-slate-stroke));
}

.login-fx-svg-train-container--ocean .login-fx-svg-train-container-body {
  fill: var(--login-fx-train-container-ocean, var(--login-fx-container-ocean));
  stroke: var(--login-fx-train-container-ocean-stroke, var(--login-fx-container-ocean-stroke));
}

.login-fx-svg-train-container--steel .login-fx-svg-train-container-body {
  fill: var(--login-fx-train-container-steel, var(--login-fx-container-steel));
  stroke: var(--login-fx-train-container-steel-stroke, var(--login-fx-container-steel-stroke));
}

.login-fx-svg-train-container--rust .login-fx-svg-train-container-body {
  fill: var(--login-fx-train-container-rust, var(--login-fx-container-rust));
  stroke: var(--login-fx-train-container-rust-stroke, var(--login-fx-container-rust-stroke));
}

.login-fx-svg-train-container--teal .login-fx-svg-train-container-body {
  fill: var(--login-fx-train-container-teal);
  stroke: var(--login-fx-train-container-teal-stroke);
}

.login-fx-svg-train-container--brick .login-fx-svg-train-container-body {
  fill: var(--login-fx-train-container-brick);
  stroke: var(--login-fx-train-container-brick-stroke);
}

.login-fx-svg-train-container--forest .login-fx-svg-train-container-body {
  fill: var(--login-fx-train-container-forest);
  stroke: var(--login-fx-train-container-forest-stroke);
}

.login-fx-svg-train-container--gold .login-fx-svg-train-container-body {
  fill: var(--login-fx-train-container-gold);
  stroke: var(--login-fx-train-container-gold-stroke);
}

.login-form-panel__fx-road-zone {
  position: absolute;
  left: -8%;
  right: -8%;
  bottom: 9%;
  height: 30%;
  overflow: visible;
  isolation: isolate;
}

.login-form-panel__fx-yard-containers {
  position: absolute;
  bottom: 68%;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  opacity: calc(var(--login-fx-container-opacity) * 0.55);
  z-index: 0;
  pointer-events: none;
  transform: scale(0.88);
}

.login-form-panel__fx-yard-containers--left {
  left: 3%;
  transform-origin: bottom left;
  mask-image: linear-gradient(90deg, #000 0%, transparent 100%);
}

.login-form-panel__fx-yard-containers--right {
  right: 3%;
  transform-origin: bottom right;
  mask-image: linear-gradient(270deg, #000 0%, transparent 100%);
}

.login-form-panel__fx-container-column {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-end;
  gap: 2px;
  flex-shrink: 0;
}

.login-form-panel__fx-container-svg {
  display: block;
  width: var(--login-fx-container-width, 56px);
  height: auto;
}

.login-form-panel__fx-road {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: var(--login-fx-road-opacity, 1);
  -webkit-mask-image: var(--login-fx-road-mask);
  mask-image: var(--login-fx-road-mask);
}

.login-form-panel__fx-road-shoulder {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 0%,
    color-mix(in srgb, var(--login-fx-road-shoulder) 42%, transparent) 14%,
    color-mix(in srgb, var(--login-fx-road-shoulder) 82%, transparent) 28%,
    var(--login-fx-road-shoulder) 44%,
    var(--login-fx-road-shoulder) 100%
  );
}

.login-form-panel__fx-road-surface {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, var(--login-fx-road-top) 0%, transparent 28%),
    linear-gradient(
      180deg,
      transparent 0%,
      color-mix(in srgb, var(--login-fx-road-body) 52%, transparent) 14%,
      var(--login-fx-road-body) 36%,
      var(--login-fx-road-body-bottom) 100%
    );
}

.login-form-panel__fx-road-center-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 2px;
  opacity: var(--login-fx-road-lane-opacity, 0.78);
  background: repeating-linear-gradient(
    90deg,
    var(--login-fx-lane-dash) 0 18px,
    transparent 18px 36px
  );
}

.login-form-panel__fx-fleet {
  position: absolute;
  left: 0;
  right: 0;
  overflow: hidden;
}

.login-form-panel__fx-fleet--north {
  bottom: calc(50% + 10px);
  z-index: 2;
}

.login-form-panel__fx-fleet--south {
  top: calc(50% - 5px);
  z-index: 3;
}

.login-form-panel__fx-fleet-track {
  display: flex;
  width: max-content;
  contain: layout style;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.login-form-panel__fx-fleet-track--forward {
  animation: login-form-fleet-scroll var(--login-fx-fleet-duration, 43s) linear infinite;
  animation-delay: var(--login-fx-fleet-delay, -19s);
}

.login-form-panel__fx-fleet-track--reverse {
  animation: login-form-fleet-scroll-reverse var(--login-fx-fleet-duration, 37s) linear infinite;
  animation-delay: var(--login-fx-fleet-delay, -11s);
}

.login-form-panel__fx-fleet-row {
  display: flex;
  flex-shrink: 0;
  align-items: flex-end;
  overflow: visible;
  padding-left: var(--login-fx-row-lead, 0);
  padding-right: var(--login-fx-row-tail, 0);
}

.login-form-panel__fx-fleet-unit {
  flex-shrink: 0;
  margin-right: var(--login-fx-unit-gap, 96px);
  opacity: 1;
  overflow: visible;
}

.login-form-panel__fx-truck-svg {
  display: block;
  width: 172px;
  height: 55px;
  overflow: visible;
  opacity: 1;
}

.login-form-panel__fx-fleet-unit .login-fx-svg-stop-cab-top { stop-color: var(--login-fx-truck-cab-top); }
.login-form-panel__fx-fleet-unit .login-fx-svg-stop-cab-bottom { stop-color: var(--login-fx-truck-cab-bottom); }
.login-form-panel__fx-fleet-unit .login-fx-svg-stop-trailer-top { stop-color: var(--login-fx-truck-trailer-top); }
.login-form-panel__fx-fleet-unit .login-fx-svg-stop-trailer-bottom { stop-color: var(--login-fx-truck-trailer-bottom); }

.login-fx-svg-trailer-body { stroke: rgba(0, 0, 0, 0.1); stroke-width: 0.6; }
.login-fx-svg-trailer-highlight { fill: rgba(255, 255, 255, 0.24); }
.login-fx-svg-trailer-marker { fill: #d4a017; opacity: 0.88; }
.login-fx-svg-fleet-stripe { fill: var(--login-fx-truck-accent, #c53030); opacity: 0.9; }

.login-form-panel__fx-fleet-unit--accent-red { --login-fx-truck-accent: #c53030; }
.login-form-panel__fx-fleet-unit--accent-blue { --login-fx-truck-accent: #2b6cb0; }
.login-form-panel__fx-fleet-unit--accent-green { --login-fx-truck-accent: #2f855a; }
.login-form-panel__fx-fleet-unit--accent-yellow { --login-fx-truck-accent: #d69e2e; }
.login-form-panel__fx-fleet-unit--accent-orange { --login-fx-truck-accent: #dd6b20; }
.login-form-panel__fx-fleet-unit--accent-black { --login-fx-truck-accent: #2d3748; }

.login-form-panel__fx-fleet-unit {
  --login-fx-truck-mudflap: var(--login-fx-truck-cab-bottom);
}

.login-fx-svg-fleet-logo-box { fill: rgba(255, 255, 255, 0.92); stroke: rgba(0, 0, 0, 0.12); stroke-width: 0.25; }
.login-fx-svg-fleet-logo-text {
  fill: var(--login-fx-truck-accent, #2d3748);
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 2.1px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.login-fx-svg-fleet-name-text {
  fill: rgba(15, 23, 42, 0.28);
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 1.55px;
  font-weight: 600;
  letter-spacing: 0.02em;
  pointer-events: none;
}

.login-fx-svg-trailer-weathering {
  fill: rgba(62, 48, 32, 0.22);
  mix-blend-mode: multiply;
  pointer-events: none;
}

.login-fx-svg-trailer-weathering--2 {
  fill: rgba(52, 40, 28, 0.32);
}

.login-form-panel__fx-fleet-unit--weathered-1 .login-fx-svg-trailer-body {
  filter: saturate(0.94);
}

.login-form-panel__fx-fleet-unit--weathered-2 .login-fx-svg-trailer-body {
  filter: saturate(0.88) brightness(0.97);
}

.login-fx-svg-cab-hood-accent { fill: var(--login-fx-truck-accent, #c53030); opacity: 0.88; }
.login-fx-svg-grille-slot-line { stroke: rgba(0, 0, 0, 0.28); stroke-width: 0.35; stroke-linecap: round; }
.login-fx-svg-clearance-light--red { fill: #c53030; opacity: 0.9; }
.login-fx-svg-clearance-light--amber { fill: #d69e2e; opacity: 0.92; }
.login-fx-svg-mudflap { fill: var(--login-fx-truck-mudflap, var(--login-fx-truck-tire)); opacity: 0.92; }
.login-fx-svg-mudflap--trailer { opacity: 0.78; }
.login-fx-svg-trailer-handle { fill: var(--login-fx-truck-chassis); opacity: 0.65; stroke: rgba(0, 0, 0, 0.1); stroke-width: 0.3; }
.login-fx-svg-trailer-plate { fill: #e8eef3; stroke: rgba(0, 0, 0, 0.18); stroke-width: 0.35; }
.login-fx-svg-trailer-lights--secondary { fill: #991b1b; opacity: 0.68; }

[data-theme="dark"] .login-fx-svg-trailer-highlight { fill: rgba(255, 255, 255, 0.14); }
[data-theme="dark"] .login-fx-svg-trailer-marker { fill: #e8b828; opacity: 0.82; }
[data-theme="dark"] .login-fx-svg-trailer-plate { fill: #c8d0da; }
[data-theme="dark"] .login-fx-svg-fleet-logo-box { fill: rgba(255, 255, 255, 0.85); }
[data-theme="dark"] .login-fx-svg-fleet-name-text { fill: rgba(226, 232, 240, 0.22); }
[data-theme="dark"] .login-fx-svg-trailer-weathering { fill: rgba(28, 22, 16, 0.38); mix-blend-mode: soft-light; }
[data-theme="dark"] .login-fx-svg-trailer-weathering--2 { fill: rgba(20, 16, 12, 0.48); }

.login-fx-svg-shadow { fill: var(--login-fx-shadow); }
.login-fx-svg-trailer { stroke: rgba(0, 0, 0, 0.08); stroke-width: 0.6; }
.login-fx-svg-cab { stroke: rgba(0, 0, 0, 0.1); stroke-width: 0.5; }
.login-fx-svg-cab-roof { fill: var(--login-fx-truck-trailer-top); }
.login-fx-svg-window { fill: var(--login-fx-truck-window); }
.login-fx-svg-window-shine { fill: var(--login-fx-truck-window-shine); }
.login-fx-svg-chassis { fill: var(--login-fx-truck-chassis); }
.login-fx-svg-underbody { fill: var(--login-fx-truck-underbody); }
.login-fx-svg-fuel-tank { fill: var(--login-fx-truck-chassis); stroke: rgba(0, 0, 0, 0.12); stroke-width: 0.4; }
.login-fx-svg-fifth-wheel { fill: var(--login-fx-truck-chassis); }
.login-fx-svg-mudflap { fill: var(--login-fx-truck-tire); }
.login-fx-svg-bumper { fill: var(--login-fx-truck-chassis); }
.login-fx-svg-trailer-rail { fill: var(--login-fx-truck-chassis); }
.login-fx-svg-trailer-skirt { fill: var(--login-fx-truck-trailer-bottom); opacity: 0.92; }
.login-fx-svg-trailer-neck { fill: var(--login-fx-truck-trailer-bottom); stroke: rgba(0, 0, 0, 0.1); stroke-width: 0.45; }
.login-fx-svg-trailer-frame-rail { fill: var(--login-fx-truck-chassis); stroke: rgba(0, 0, 0, 0.12); stroke-width: 0.35; }
.login-fx-svg-trailer-suspension { stroke: var(--login-fx-truck-chassis); stroke-width: 0.85; stroke-linecap: round; opacity: 0.82; }
.login-fx-svg-trailer-bogie { fill: var(--login-fx-truck-underbody); stroke: rgba(0, 0, 0, 0.14); stroke-width: 0.35; }
.login-fx-svg-landing-gear { fill: var(--login-fx-truck-chassis); stroke: rgba(0, 0, 0, 0.14); stroke-width: 0.35; opacity: 0.88; }
.login-fx-svg-door-seam { stroke: var(--login-fx-truck-rib); stroke-width: 0.75; }
.login-fx-svg-rib { stroke: var(--login-fx-truck-rib); stroke-width: 0.65; }
.login-fx-svg-cargo { fill: var(--login-fx-truck-cargo); }
.login-fx-svg-cargo--b { fill: var(--login-fx-truck-cargo); opacity: 0.9; }
.login-fx-svg-strap { stroke: var(--login-fx-truck-rib); stroke-width: 0.7; }
.login-fx-svg-reefer-nose { fill: var(--login-fx-truck-reefer); stroke: rgba(0, 0, 0, 0.1); stroke-width: 0.5; }
.login-fx-svg-reefer-vent { fill: var(--login-fx-truck-reefer-grille); }
.login-fx-svg-chassis-rail { fill: var(--login-fx-truck-chassis); }
.login-fx-svg-chassis-pin { fill: var(--login-fx-truck-trailer-top); stroke: rgba(0, 0, 0, 0.1); stroke-width: 0.45; }
.login-fx-svg-exhaust { fill: var(--login-fx-truck-chassis); }
.login-fx-svg-exhaust-stack { fill: var(--login-fx-truck-chassis); stroke: rgba(0, 0, 0, 0.12); stroke-width: 0.35; }
.login-fx-svg-grille { fill: var(--login-fx-truck-chassis); }
.login-fx-svg-grille-slot { fill: var(--login-fx-truck-rib); }
.login-fx-svg-sunvisor { fill: var(--login-fx-truck-tire); }
.login-fx-svg-mirror { fill: var(--login-fx-truck-chassis); }
.login-fx-svg-stake-pocket { fill: var(--login-fx-truck-chassis); }

.login-fx-svg-cab-accent { fill: var(--login-fx-truck-trailer-top); }

.login-form-panel__fx-fleet-unit--trailer-tone-white {
  --login-fx-truck-trailer-top: #eef1f5;
  --login-fx-truck-trailer-bottom: #d5dce5;
}

.login-form-panel__fx-fleet-unit--trailer-tone-silver {
  --login-fx-truck-trailer-top: #c6ced8;
  --login-fx-truck-trailer-bottom: #a6b0bc;
}

.login-form-panel__fx-fleet-unit--trailer-tone-blue {
  --login-fx-truck-trailer-top: #4e6d8c;
  --login-fx-truck-trailer-bottom: #3a5570;
}

.login-form-panel__fx-fleet-unit--trailer-tone-burgundy {
  --login-fx-truck-trailer-top: #7a4248;
  --login-fx-truck-trailer-bottom: #5c3238;
}

.login-form-panel__fx-fleet-unit--trailer-tone-tan {
  --login-fx-truck-trailer-top: #a89078;
  --login-fx-truck-trailer-bottom: #887058;
}

.login-form-panel__fx-fleet-unit--trailer-tone-forest {
  --login-fx-truck-trailer-top: #4a6656;
  --login-fx-truck-trailer-bottom: #3a5044;
}

.login-form-panel__fx-fleet-unit--trailer-tone-slate {
  --login-fx-truck-trailer-top: #687888;
  --login-fx-truck-trailer-bottom: #505e6c;
}

.login-form-panel__fx-fleet-unit--trailer-tone-orange {
  --login-fx-truck-trailer-top: #b87848;
  --login-fx-truck-trailer-bottom: #945e38;
}

.login-form-panel__fx-fleet-unit--trailer-tone-teal {
  --login-fx-truck-trailer-top: #6a8880;
  --login-fx-truck-trailer-bottom: #506860;
}

.login-form-panel__fx-fleet-unit--trailer-tone-gold {
  --login-fx-truck-trailer-top: #a89468;
  --login-fx-truck-trailer-bottom: #807050;
}

.login-form-panel__fx-fleet-unit--trailer-tone-brick {
  --login-fx-truck-trailer-top: #986860;
  --login-fx-truck-trailer-bottom: #745048;
}

.login-form-panel__fx-fleet-unit--trailer-tone-ocean {
  --login-fx-truck-trailer-top: #5a7088;
  --login-fx-truck-trailer-bottom: #425868;
}

.login-form-panel__fx-fleet-unit--trailer-tone-rust {
  --login-fx-truck-trailer-top: #9a7868;
  --login-fx-truck-trailer-bottom: #745848;
}

.login-form-panel__fx-fleet-unit--trailer-tone-steel {
  --login-fx-truck-trailer-top: #849098;
  --login-fx-truck-trailer-bottom: #646e7c;
}

[data-theme="dark"] .login-form-panel__fx-fleet-unit--trailer-tone-white {
  --login-fx-truck-trailer-top: #e4e9ef;
  --login-fx-truck-trailer-bottom: #c8d0da;
}

[data-theme="dark"] .login-form-panel__fx-fleet-unit--trailer-tone-silver {
  --login-fx-truck-trailer-top: #b0bac6;
  --login-fx-truck-trailer-bottom: #909aa6;
}

[data-theme="dark"] .login-form-panel__fx-fleet-unit--trailer-tone-blue {
  --login-fx-truck-trailer-top: #5a7898;
  --login-fx-truck-trailer-bottom: #456078;
}

[data-theme="dark"] .login-form-panel__fx-fleet-unit--trailer-tone-burgundy {
  --login-fx-truck-trailer-top: #885058;
  --login-fx-truck-trailer-bottom: #683c42;
}

[data-theme="dark"] .login-form-panel__fx-fleet-unit--trailer-tone-tan {
  --login-fx-truck-trailer-top: #b89878;
  --login-fx-truck-trailer-bottom: #987860;
}

[data-theme="dark"] .login-form-panel__fx-fleet-unit--trailer-tone-forest {
  --login-fx-truck-trailer-top: #567060;
  --login-fx-truck-trailer-bottom: #42564a;
}

[data-theme="dark"] .login-form-panel__fx-fleet-unit--trailer-tone-slate {
  --login-fx-truck-trailer-top: #788898;
  --login-fx-truck-trailer-bottom: #606e7c;
}

[data-theme="dark"] .login-form-panel__fx-fleet-unit--trailer-tone-orange {
  --login-fx-truck-trailer-top: #c88858;
  --login-fx-truck-trailer-bottom: #a06840;
}

[data-theme="dark"] .login-form-panel__fx-fleet-unit--trailer-tone-teal {
  --login-fx-truck-trailer-top: #789890;
  --login-fx-truck-trailer-bottom: #587068;
}

[data-theme="dark"] .login-form-panel__fx-fleet-unit--trailer-tone-gold {
  --login-fx-truck-trailer-top: #b8a478;
  --login-fx-truck-trailer-bottom: #908060;
}

[data-theme="dark"] .login-form-panel__fx-fleet-unit--trailer-tone-brick {
  --login-fx-truck-trailer-top: #a87870;
  --login-fx-truck-trailer-bottom: #805850;
}

[data-theme="dark"] .login-form-panel__fx-fleet-unit--trailer-tone-ocean {
  --login-fx-truck-trailer-top: #6a8094;
  --login-fx-truck-trailer-bottom: #4a6070;
}

[data-theme="dark"] .login-form-panel__fx-fleet-unit--trailer-tone-rust {
  --login-fx-truck-trailer-top: #b08878;
  --login-fx-truck-trailer-bottom: #886858;
}

[data-theme="dark"] .login-form-panel__fx-fleet-unit--trailer-tone-steel {
  --login-fx-truck-trailer-top: #98a4b0;
  --login-fx-truck-trailer-bottom: #707a88;
}

.login-form-panel__fx-fleet-unit--cab-tone-white {
  --login-fx-truck-cab-top: #eef1f5;
  --login-fx-truck-cab-bottom: #d0d8e0;
}

.login-form-panel__fx-fleet-unit--cab-tone-cream {
  --login-fx-truck-cab-top: #e8e0d0;
  --login-fx-truck-cab-bottom: #c8c0b0;
}

.login-form-panel__fx-fleet-unit--cab-tone-silver {
  --login-fx-truck-cab-top: #c6ced8;
  --login-fx-truck-cab-bottom: #a6b0bc;
}

.login-form-panel__fx-fleet-unit--cab-tone-crimson {
  --login-fx-truck-cab-top: #9a4a42;
  --login-fx-truck-cab-bottom: #6b3530;
}

.login-form-panel__fx-fleet-unit--cab-tone-red {
  --login-fx-truck-cab-top: #b84040;
  --login-fx-truck-cab-bottom: #882828;
}

.login-form-panel__fx-fleet-unit--cab-tone-maroon {
  --login-fx-truck-cab-top: #7a4840;
  --login-fx-truck-cab-bottom: #553028;
}

.login-form-panel__fx-fleet-unit--cab-tone-burgundy {
  --login-fx-truck-cab-top: #7a4248;
  --login-fx-truck-cab-bottom: #5c3238;
}

.login-form-panel__fx-fleet-unit--cab-tone-navy {
  --login-fx-truck-cab-top: #3d6580;
  --login-fx-truck-cab-bottom: #284558;
}

.login-form-panel__fx-fleet-unit--cab-tone-blue {
  --login-fx-truck-cab-top: #4e6d8c;
  --login-fx-truck-cab-bottom: #3a5570;
}

.login-form-panel__fx-fleet-unit--cab-tone-royal {
  --login-fx-truck-cab-top: #4858a8;
  --login-fx-truck-cab-bottom: #344080;
}

.login-form-panel__fx-fleet-unit--cab-tone-teal {
  --login-fx-truck-cab-top: #4a7878;
  --login-fx-truck-cab-bottom: #355858;
}

.login-form-panel__fx-fleet-unit--cab-tone-forest {
  --login-fx-truck-cab-top: #4a6656;
  --login-fx-truck-cab-bottom: #3a5044;
}

.login-form-panel__fx-fleet-unit--cab-tone-green {
  --login-fx-truck-cab-top: #4a8050;
  --login-fx-truck-cab-bottom: #356038;
}

.login-form-panel__fx-fleet-unit--cab-tone-amber {
  --login-fx-truck-cab-top: #b87848;
  --login-fx-truck-cab-bottom: #945e38;
}

.login-form-panel__fx-fleet-unit--cab-tone-orange {
  --login-fx-truck-cab-top: #c87840;
  --login-fx-truck-cab-bottom: #a05830;
}

.login-form-panel__fx-fleet-unit--cab-tone-yellow {
  --login-fx-truck-cab-top: #c8b048;
  --login-fx-truck-cab-bottom: #a89030;
}

.login-form-panel__fx-fleet-unit--cab-tone-gold {
  --login-fx-truck-cab-top: #a89468;
  --login-fx-truck-cab-bottom: #807050;
}

.login-form-panel__fx-fleet-unit--cab-tone-tan {
  --login-fx-truck-cab-top: #a89078;
  --login-fx-truck-cab-bottom: #887058;
}

.login-form-panel__fx-fleet-unit--cab-tone-copper {
  --login-fx-truck-cab-top: #a87050;
  --login-fx-truck-cab-bottom: #885038;
}

.login-form-panel__fx-fleet-unit--cab-tone-purple {
  --login-fx-truck-cab-top: #684878;
  --login-fx-truck-cab-bottom: #503860;
}

.login-form-panel__fx-fleet-unit--cab-tone-pink {
  --login-fx-truck-cab-top: #a86878;
  --login-fx-truck-cab-bottom: #884858;
}

.login-form-panel__fx-fleet-unit--cab-tone-black {
  --login-fx-truck-cab-top: #484848;
  --login-fx-truck-cab-bottom: #2a2a2a;
}

.login-form-panel__fx-fleet-unit--trailer-reefer:not([class*="trailer-tone-"]) {
  --login-fx-truck-trailer-top: #e8eef3;
  --login-fx-truck-trailer-bottom: #c8d1da;
}

.login-form-panel__fx-fleet-unit--trailer-flatbed:not([class*="trailer-tone-"]) {
  --login-fx-truck-trailer-top: #8a949e;
  --login-fx-truck-trailer-bottom: #6a747e;
}

.login-form-panel__fx-fleet-unit--trailer-chassis:not([class*="trailer-tone-"]) {
  --login-fx-truck-trailer-top: #788898;
  --login-fx-truck-trailer-bottom: #5a6674;
}

.login-form-panel__fx-fleet-unit--trailer-pup:not([class*="trailer-tone-"]) {
  --login-fx-truck-trailer-top: #98a4b0;
  --login-fx-truck-trailer-bottom: #788490;
}

.login-form-panel__fx-fleet-unit--trailer-storage-container:not([class*="trailer-tone-"]) {
  --login-fx-truck-trailer-top: #6a8498;
  --login-fx-truck-trailer-bottom: #506878;
}

.login-form-panel__fx-fleet-unit--trailer-tanker:not([class*="trailer-tone-"]) {
  --login-fx-truck-trailer-top: #b8c4d0;
  --login-fx-truck-trailer-bottom: #8898a8;
}

.login-form-panel__fx-fleet-unit--trailer-lowboy:not([class*="trailer-tone-"]) {
  --login-fx-truck-trailer-top: #7a848e;
  --login-fx-truck-trailer-bottom: #5c6670;
}

.login-form-panel__fx-fleet-unit--trailer-step-deck:not([class*="trailer-tone-"]) {
  --login-fx-truck-trailer-top: #8a949e;
  --login-fx-truck-trailer-bottom: #6a747e;
}

.login-form-panel__fx-fleet-unit--trailer-dump:not([class*="trailer-tone-"]) {
  --login-fx-truck-trailer-top: #889098;
  --login-fx-truck-trailer-bottom: #687078;
}

.login-form-panel__fx-fleet-unit--trailer-curtain-side:not([class*="trailer-tone-"]) {
  --login-fx-truck-trailer-top: #e8eef3;
  --login-fx-truck-trailer-bottom: #c8d1da;
}

.login-form-panel__fx-fleet-unit--trailer-car-hauler:not([class*="trailer-tone-"]) {
  --login-fx-truck-trailer-top: #788898;
  --login-fx-truck-trailer-bottom: #5a6674;
}

.login-form-panel__fx-fleet-unit--trailer-container-chassis:not([class*="trailer-tone-"]) {
  --login-fx-truck-trailer-top: #eef1f5;
  --login-fx-truck-trailer-bottom: #d5dce5;
}

.login-form-panel__fx-fleet-unit--trailer-container-flatbed:not([class*="trailer-tone-"]) {
  --login-fx-truck-trailer-top: #3a4550;
  --login-fx-truck-trailer-bottom: #2a323a;
}

[data-theme="dark"] .login-form-panel__fx-fleet-unit--cab-tone-white {
  --login-fx-truck-cab-top: #e4e9ef;
  --login-fx-truck-cab-bottom: #c8d0da;
}

[data-theme="dark"] .login-form-panel__fx-fleet-unit--cab-tone-cream {
  --login-fx-truck-cab-top: #dcd4c4;
  --login-fx-truck-cab-bottom: #b8b0a0;
}

[data-theme="dark"] .login-form-panel__fx-fleet-unit--cab-tone-silver {
  --login-fx-truck-cab-top: #b0bac6;
  --login-fx-truck-cab-bottom: #909aa6;
}

[data-theme="dark"] .login-form-panel__fx-fleet-unit--cab-tone-crimson {
  --login-fx-truck-cab-top: #8a4840;
  --login-fx-truck-cab-bottom: #553028;
}

[data-theme="dark"] .login-form-panel__fx-fleet-unit--cab-tone-red {
  --login-fx-truck-cab-top: #a83838;
  --login-fx-truck-cab-bottom: #782020;
}

[data-theme="dark"] .login-form-panel__fx-fleet-unit--cab-tone-maroon {
  --login-fx-truck-cab-top: #6e4038;
  --login-fx-truck-cab-bottom: #4a2822;
}

[data-theme="dark"] .login-form-panel__fx-fleet-unit--cab-tone-burgundy {
  --login-fx-truck-cab-top: #885058;
  --login-fx-truck-cab-bottom: #683c42;
}

[data-theme="dark"] .login-form-panel__fx-fleet-unit--cab-tone-navy {
  --login-fx-truck-cab-top: #4a7088;
  --login-fx-truck-cab-bottom: #2f4a5c;
}

[data-theme="dark"] .login-form-panel__fx-fleet-unit--cab-tone-blue {
  --login-fx-truck-cab-top: #5a7898;
  --login-fx-truck-cab-bottom: #456078;
}

[data-theme="dark"] .login-form-panel__fx-fleet-unit--cab-tone-royal {
  --login-fx-truck-cab-top: #5060a0;
  --login-fx-truck-cab-bottom: #3a4878;
}

[data-theme="dark"] .login-form-panel__fx-fleet-unit--cab-tone-teal {
  --login-fx-truck-cab-top: #588888;
  --login-fx-truck-cab-bottom: #406060;
}

[data-theme="dark"] .login-form-panel__fx-fleet-unit--cab-tone-forest {
  --login-fx-truck-cab-top: #567060;
  --login-fx-truck-cab-bottom: #42564a;
}

[data-theme="dark"] .login-form-panel__fx-fleet-unit--cab-tone-green {
  --login-fx-truck-cab-top: #508858;
  --login-fx-truck-cab-bottom: #386840;
}

[data-theme="dark"] .login-form-panel__fx-fleet-unit--cab-tone-amber {
  --login-fx-truck-cab-top: #c88858;
  --login-fx-truck-cab-bottom: #a06840;
}

[data-theme="dark"] .login-form-panel__fx-fleet-unit--cab-tone-orange {
  --login-fx-truck-cab-top: #d08850;
  --login-fx-truck-cab-bottom: #a86838;
}

[data-theme="dark"] .login-form-panel__fx-fleet-unit--cab-tone-yellow {
  --login-fx-truck-cab-top: #d0b850;
  --login-fx-truck-cab-bottom: #a89038;
}

[data-theme="dark"] .login-form-panel__fx-fleet-unit--cab-tone-gold {
  --login-fx-truck-cab-top: #b8a478;
  --login-fx-truck-cab-bottom: #908060;
}

[data-theme="dark"] .login-form-panel__fx-fleet-unit--cab-tone-tan {
  --login-fx-truck-cab-top: #b89878;
  --login-fx-truck-cab-bottom: #987860;
}

[data-theme="dark"] .login-form-panel__fx-fleet-unit--cab-tone-copper {
  --login-fx-truck-cab-top: #b87858;
  --login-fx-truck-cab-bottom: #985838;
}

[data-theme="dark"] .login-form-panel__fx-fleet-unit--cab-tone-purple {
  --login-fx-truck-cab-top: #785888;
  --login-fx-truck-cab-bottom: #584068;
}

[data-theme="dark"] .login-form-panel__fx-fleet-unit--cab-tone-pink {
  --login-fx-truck-cab-top: #b86070;
  --login-fx-truck-cab-bottom: #984050;
}

[data-theme="dark"] .login-form-panel__fx-fleet-unit--cab-tone-black {
  --login-fx-truck-cab-top: #585858;
  --login-fx-truck-cab-bottom: #383838;
}

[data-theme="dark"] .login-form-panel__fx-fleet-unit--trailer-reefer:not([class*="trailer-tone-"]) {
  --login-fx-truck-trailer-top: #d8e0e8;
  --login-fx-truck-trailer-bottom: #aeb9c4;
}

.login-fx-svg-cab-group { stroke: none; }
.login-fx-svg-tractor-body { stroke: rgba(0, 0, 0, 0.12); stroke-width: 0.55; stroke-linejoin: round; }
.login-fx-svg-tractor-rail { fill: var(--login-fx-truck-chassis); opacity: 0.78; }
.login-fx-svg-roof-fairing--day { fill: var(--login-fx-truck-trailer-top); opacity: 0.72; stroke: rgba(0, 0, 0, 0.08); stroke-width: 0.35; }
.login-fx-svg-mirror--lower { opacity: 0.88; }
.login-fx-svg-trailer-icc-bumper { fill: var(--login-fx-truck-chassis); stroke: rgba(0, 0, 0, 0.14); stroke-width: 0.3; opacity: 0.85; }
.login-fx-svg-trailer-reflector--amber { fill: #d69e2e; opacity: 0.88; }
.login-fx-svg-trailer-reflector--red { fill: #c53030; opacity: 0.85; }
.login-fx-svg-wheel-well { fill: none; stroke: var(--login-fx-truck-underbody); stroke-width: 0.65; opacity: 0.55; }
.login-fx-svg-door-handle { fill: var(--login-fx-truck-rim); opacity: 0.82; stroke: rgba(0, 0, 0, 0.12); stroke-width: 0.25; }
.login-fx-svg-hood-line { stroke: rgba(255, 255, 255, 0.28); stroke-width: 0.65; stroke-linecap: round; }
.login-fx-svg-hood-cowl { stroke: rgba(0, 0, 0, 0.14); stroke-width: 0.5; stroke-linecap: round; opacity: 0.7; }
.login-fx-svg-window,
.login-fx-svg-sleeper-window,
.login-fx-svg-quarter-window {
  fill: var(--login-fx-truck-window);
  stroke: rgba(0, 0, 0, 0.22);
  stroke-width: 0.45;
  stroke-linejoin: round;
}

.login-fx-svg-window-shine { fill: var(--login-fx-truck-window-shine); opacity: 0.9; }
.login-fx-svg-grille-face { fill: rgba(0, 0, 0, 0.35); }
.login-fx-svg-grille-face--mack,
.login-fx-svg-grille-face--freightliner { fill: rgba(0, 0, 0, 0.28); }
.login-fx-svg-exhaust-stack--peterbilt,
.login-fx-svg-exhaust-stack--kenworth { fill: var(--login-fx-truck-rim); opacity: 0.85; }
.login-fx-svg-exhaust-stack--mack,
.login-fx-svg-exhaust-stack--freightliner { fill: var(--login-fx-truck-chassis); opacity: 0.75; }
.login-fx-svg-roof-fairing--mack { fill: var(--login-fx-truck-cab-top); opacity: 0.95; }
.login-fx-svg-bumper--mack,
.login-fx-svg-bumper--freightliner { fill: var(--login-fx-truck-chassis); opacity: 0.85; }
.login-fx-svg-sleeper-window { opacity: 0.92; }
.login-fx-svg-window-pillar { stroke: var(--login-fx-truck-cab-bottom); stroke-width: 0.85; stroke-linecap: round; opacity: 0.92; }

.login-fx-svg-cab-windows--mack .login-fx-svg-window,
.login-fx-svg-cab-windows--mack .login-fx-svg-sleeper-window,
.login-fx-svg-cab-windows--mack .login-fx-svg-door-window,
.login-fx-svg-cab-windows--peterbilt .login-fx-svg-window,
.login-fx-svg-cab-windows--peterbilt .login-fx-svg-sleeper-window,
.login-fx-svg-cab-windows--peterbilt .login-fx-svg-door-window,
.login-fx-svg-cab-windows--kenworth .login-fx-svg-window,
.login-fx-svg-cab-windows--kenworth .login-fx-svg-sleeper-window,
.login-fx-svg-cab-windows--kenworth .login-fx-svg-door-window,
.login-fx-svg-cab-windows--freightliner .login-fx-svg-window,
.login-fx-svg-cab-windows--freightliner .login-fx-svg-quarter-window {
  fill: #b8c9dc;
  stroke: rgba(15, 23, 42, 0.38);
  stroke-width: 0.55;
  opacity: 1;
}

.login-fx-svg-cab-windows--mack .login-fx-svg-window-shine,
.login-fx-svg-cab-windows--peterbilt .login-fx-svg-window-shine,
.login-fx-svg-cab-windows--kenworth .login-fx-svg-window-shine,
.login-fx-svg-cab-windows--freightliner .login-fx-svg-window-shine {
  fill: rgba(255, 255, 255, 0.42);
  opacity: 1;
}

[data-theme="dark"] .login-fx-svg-cab-windows--mack .login-fx-svg-window,
[data-theme="dark"] .login-fx-svg-cab-windows--mack .login-fx-svg-sleeper-window,
[data-theme="dark"] .login-fx-svg-cab-windows--mack .login-fx-svg-door-window,
[data-theme="dark"] .login-fx-svg-cab-windows--peterbilt .login-fx-svg-window,
[data-theme="dark"] .login-fx-svg-cab-windows--peterbilt .login-fx-svg-sleeper-window,
[data-theme="dark"] .login-fx-svg-cab-windows--peterbilt .login-fx-svg-door-window,
[data-theme="dark"] .login-fx-svg-cab-windows--kenworth .login-fx-svg-window,
[data-theme="dark"] .login-fx-svg-cab-windows--kenworth .login-fx-svg-sleeper-window,
[data-theme="dark"] .login-fx-svg-cab-windows--kenworth .login-fx-svg-door-window,
[data-theme="dark"] .login-fx-svg-cab-windows--freightliner .login-fx-svg-window,
[data-theme="dark"] .login-fx-svg-cab-windows--freightliner .login-fx-svg-quarter-window {
  fill: #9eb4cc;
  stroke: rgba(186, 200, 220, 0.45);
}

[data-theme="dark"] .login-fx-svg-cab-windows--mack .login-fx-svg-window-shine,
[data-theme="dark"] .login-fx-svg-cab-windows--peterbilt .login-fx-svg-window-shine,
[data-theme="dark"] .login-fx-svg-cab-windows--kenworth .login-fx-svg-window-shine,
[data-theme="dark"] .login-fx-svg-cab-windows--freightliner .login-fx-svg-window-shine {
  fill: rgba(226, 236, 248, 0.35);
}

.login-fx-svg-sleeper-window--mack { opacity: 1; }
.login-fx-svg-sleeper-handle { fill: var(--login-fx-truck-chassis); opacity: 0.7; }
.login-fx-svg-hood-panel { fill: var(--login-fx-truck-cab-bottom); opacity: 0.45; }
.login-fx-svg-roof-fairing { fill: var(--login-fx-truck-cab-top); opacity: 0.9; }
.login-fx-svg-door-line { stroke: var(--login-fx-truck-rib); stroke-width: 0.6; opacity: 0.55; }
.login-fx-svg-fender { fill: var(--login-fx-truck-chassis); opacity: 0.88; }
.login-fx-svg-fender--drive { fill: var(--login-fx-truck-underbody); opacity: 0.55; }
.login-fx-svg-air-intake { fill: var(--login-fx-truck-trailer-top); stroke: rgba(0, 0, 0, 0.12); stroke-width: 0.45; }
.login-fx-svg-air-intake-cap { fill: var(--login-fx-truck-chassis); opacity: 0.85; }
.login-fx-svg-bumper--chrome { fill: var(--login-fx-truck-rim); opacity: 0.82; stroke: rgba(0, 0, 0, 0.1); stroke-width: 0.35; }
.login-fx-svg-headlight-bucket { fill: var(--login-fx-truck-chassis); opacity: 0.65; stroke: rgba(0, 0, 0, 0.08); stroke-width: 0.35; }
.login-fx-svg-exhaust-cap { fill: var(--login-fx-truck-rim); opacity: 0.8; }
.login-fx-svg-stack-ring { stroke: var(--login-fx-truck-rib); stroke-width: 0.5; opacity: 0.45; }
.login-fx-svg-exhaust-shield { fill: var(--login-fx-truck-chassis); opacity: 0.55; }
.login-fx-svg-exhaust-stack--mack { opacity: 0.9; }
.login-fx-svg-mirror-arm { stroke: var(--login-fx-truck-chassis); stroke-width: 0.7; }
.login-fx-svg-grille--mack { fill: var(--login-fx-truck-chassis); opacity: 0.92; }
.login-fx-svg-step { fill: var(--login-fx-truck-rim); opacity: 0.7; stroke: rgba(0, 0, 0, 0.1); stroke-width: 0.3; }
.login-fx-svg-cab-accent { fill: var(--login-fx-truck-trailer-top); opacity: 0.75; }
.login-fx-svg-reefer-stripe { fill: #dc2626; opacity: 0.82; }
.login-fx-svg-cargo--lumber { fill: #8b6f4e; stroke: rgba(0, 0, 0, 0.12); stroke-width: 0.4; }
.login-fx-svg-cargo--pipe { fill: #64748b; stroke: rgba(0, 0, 0, 0.14); stroke-width: 0.35; }
.login-fx-svg-cargo--tarp { fill: #94a3b8; opacity: 0.88; stroke: rgba(0, 0, 0, 0.1); stroke-width: 0.35; }
.login-fx-svg-cargo--steel { fill: #71717a; stroke: rgba(0, 0, 0, 0.12); stroke-width: 0.35; }
.login-fx-svg-headlight-glow { fill: var(--login-fx-truck-headlight); opacity: 0.28; }
[data-theme="dark"] .login-fx-svg-headlight-glow { opacity: 0.42; }
.login-fx-svg-container-stripe { fill: rgba(15, 23, 42, 0.22); }
.login-fx-svg-trailer--storage { stroke: rgba(0, 0, 0, 0.1); stroke-width: 0.6; }
.login-fx-svg-trailer--container-flatbed { stroke: rgba(0, 0, 0, 0.14); stroke-width: 0.65; }
.login-fx-svg-container-flatbed-rail { fill: var(--login-fx-truck-chassis); opacity: 0.88; stroke: rgba(0, 0, 0, 0.12); stroke-width: 0.35; }
.login-fx-svg-chassis-rail--bright { fill: #eef1f5; stroke: rgba(0, 0, 0, 0.1); stroke-width: 0.4; }
.login-fx-svg-chassis-crossmember { stroke: var(--login-fx-truck-chassis); stroke-width: 0.65; opacity: 0.75; }
.login-fx-svg-twist-lock { fill: var(--login-fx-truck-rim); stroke: rgba(0, 0, 0, 0.14); stroke-width: 0.35; }
.login-fx-svg-conspicuity-tape--white { fill: #f8fafc; opacity: 0.92; }
.login-fx-svg-conspicuity-tape--red { fill: #c53030; opacity: 0.88; }
.login-fx-svg-iso-container-body { stroke-width: 0.65; }
.login-fx-svg-iso-container-rib { stroke: rgba(0, 0, 0, 0.16); stroke-width: 0.48; opacity: 0.85; }
.login-fx-svg-iso-container-door-bar { stroke: rgba(255, 255, 255, 0.32); stroke-width: 0.55; opacity: 0.8; }
.login-fx-svg-iso-container-highlight { fill: rgba(255, 255, 255, 0.14); }
.login-fx-svg-iso-container-label { fill: rgba(37, 99, 235, 0.72); stroke: rgba(0, 0, 0, 0.12); stroke-width: 0.3; }
.login-fx-svg-iso-container--tan .login-fx-svg-iso-container-body { fill: #c8b898; stroke: #a09070; }
.login-fx-svg-iso-container--white .login-fx-svg-iso-container-body { fill: #e8eef3; stroke: #b8c2cc; }
.login-fx-svg-iso-container--ocean .login-fx-svg-iso-container-body { fill: #5a7088; stroke: #425868; }
.login-fx-svg-iso-container--slate .login-fx-svg-iso-container-body { fill: #788898; stroke: #586878; }
.login-fx-svg-iso-container--brick .login-fx-svg-iso-container-body { fill: #986860; stroke: #745048; }
.login-fx-svg-iso-container--steel .login-fx-svg-iso-container-body { fill: #849098; stroke: #646e7c; }
.login-fx-svg-iso-container--gold .login-fx-svg-iso-container-body { fill: #a89468; stroke: #807050; }
[data-theme="dark"] .login-fx-svg-chassis-rail--bright { fill: #c8d0da; }
[data-theme="dark"] .login-fx-svg-iso-container--tan .login-fx-svg-iso-container-body { fill: #d8c8a8; stroke: #b0a088; }
[data-theme="dark"] .login-fx-svg-iso-container--white .login-fx-svg-iso-container-body { fill: #d8e0e8; stroke: #a8b2be; }
.login-fx-svg-trailer--flatbed { stroke: rgba(0, 0, 0, 0.08); stroke-width: 0.6; }
.login-fx-svg-tire { fill: var(--login-fx-truck-tire); }
.login-fx-svg-rim { fill: none; stroke: var(--login-fx-truck-rim); stroke-width: 1.4; }
.login-fx-svg-hub { fill: var(--login-fx-truck-chassis); }
.login-fx-svg-trailer-edge { stroke: var(--login-fx-truck-trailer-top); stroke-width: 0.65; opacity: 0.55; }
.login-fx-svg-trailer-lights { fill: #991b1b; opacity: 0.75; }
.login-fx-svg-deck-plank { stroke: var(--login-fx-truck-rib); stroke-width: 0.55; opacity: 0.45; }

.login-fx-svg-tanker-frame { fill: var(--login-fx-truck-chassis); opacity: 0.82; }
.login-fx-svg-tanker-cylinder { stroke: rgba(0, 0, 0, 0.12); stroke-width: 0.55; }
.login-fx-svg-tanker-end { stroke: rgba(0, 0, 0, 0.1); stroke-width: 0.45; }
.login-fx-svg-tanker-shine { fill: rgba(255, 255, 255, 0.28); opacity: 0.75; }
.login-fx-svg-tanker-dome {
  fill: var(--login-fx-truck-chassis);
  stroke: rgba(0, 0, 0, 0.14);
  stroke-width: 0.35;
}
.login-fx-svg-tanker-ladder {
  stroke: var(--login-fx-truck-chassis);
  stroke-width: 0.55;
  opacity: 0.65;
  stroke-dasharray: 1.2 1.1;
}

.login-fx-svg-trailer--lowboy { stroke: rgba(0, 0, 0, 0.1); stroke-width: 0.6; }
.login-fx-svg-trailer--step-deck,
.login-fx-svg-trailer--dump,
.login-fx-svg-trailer--curtain { stroke: rgba(0, 0, 0, 0.1); stroke-width: 0.6; }
.login-fx-svg-stepdeck-well { fill: var(--login-fx-truck-chassis); opacity: 0.82; stroke: rgba(0, 0, 0, 0.12); stroke-width: 0.4; }
.login-fx-svg-stepdeck-ramp { stroke: var(--login-fx-truck-chassis); stroke-width: 0.55; opacity: 0.72; }
.login-fx-svg-dump-cylinder { fill: var(--login-fx-truck-chassis); stroke: rgba(0, 0, 0, 0.14); stroke-width: 0.4; }
.login-fx-svg-dump-hoist { stroke: var(--login-fx-truck-rim); stroke-width: 0.55; opacity: 0.75; }
.login-fx-svg-dump-load { stroke: rgba(0, 0, 0, 0.12); stroke-width: 0.35; }
.login-fx-svg-dump-load--gravel { fill: #9a9080; }
.login-fx-svg-dump-load--asphalt { fill: #3a4048; }
.login-fx-svg-curtain-fold { stroke: rgba(0, 0, 0, 0.1); stroke-width: 0.45; opacity: 0.65; }
.login-fx-svg-curtain-bow { fill: rgba(0, 0, 0, 0.08); stroke: rgba(0, 0, 0, 0.12); stroke-width: 0.35; }
.login-fx-svg-carhauler-frame { fill: var(--login-fx-truck-chassis); opacity: 0.78; stroke: rgba(0, 0, 0, 0.1); stroke-width: 0.35; }
.login-fx-svg-carhauler-rail { stroke: var(--login-fx-truck-chassis); stroke-width: 0.55; opacity: 0.72; }
.login-fx-svg-carhauler-car { stroke: rgba(0, 0, 0, 0.18); stroke-width: 0.35; }
.login-fx-svg-carhauler-car-roof { fill: rgba(0, 0, 0, 0.14); stroke: rgba(0, 0, 0, 0.12); stroke-width: 0.25; }
.login-fx-svg-carhauler-car-glass { fill: var(--login-fx-truck-window); opacity: 0.82; stroke: rgba(0, 0, 0, 0.12); stroke-width: 0.25; }
.login-fx-svg-cargo--machinery { fill: #d4a017; stroke: rgba(0, 0, 0, 0.14); stroke-width: 0.35; }
.login-fx-svg-cargo--machinery-cab { fill: #3a4550; stroke: rgba(0, 0, 0, 0.12); stroke-width: 0.3; }
.login-fx-svg-cargo--coil { fill: #849098; stroke: rgba(0, 0, 0, 0.14); stroke-width: 0.4; }

.login-fx-svg-cargo--excavator { fill: #eab308; stroke: rgba(0, 0, 0, 0.14); stroke-width: 0.35; }
.login-fx-svg-cargo--excavator-arm { fill: #ca8a04; stroke: rgba(0, 0, 0, 0.12); stroke-width: 0.3; }
.login-fx-svg-cargo--excavator-track { fill: #374151; opacity: 0.88; }
.login-fx-svg-cargo--dozer { fill: #eab308; stroke: rgba(0, 0, 0, 0.14); stroke-width: 0.35; }
.login-fx-svg-cargo--dozer-blade { fill: #94a3b8; stroke: rgba(0, 0, 0, 0.12); stroke-width: 0.3; }
.login-fx-svg-cargo--dozer-track { fill: #374151; opacity: 0.88; }

[data-theme="dark"] .login-fx-svg-tanker-shine { fill: rgba(255, 255, 255, 0.16); }
[data-theme="dark"] .login-fx-svg-cargo--excavator { fill: #ca8a04; }
[data-theme="dark"] .login-fx-svg-cargo--dozer { fill: #ca8a04; }
.login-fx-svg-headlight {
  fill: var(--login-fx-truck-headlight);
  opacity: 0.45;
}

[data-theme="dark"] .login-fx-svg-headlight {
  opacity: 0.95;
}

.login-fx-svg-container-body { stroke-width: 0.8; }

.login-form-panel__fx-container-svg--slate-0 .login-fx-svg-container-body,
.login-form-panel__fx-container-svg--slate-1 .login-fx-svg-container-body,
.login-form-panel__fx-container-svg--slate-2 .login-fx-svg-container-body {
  fill: var(--login-fx-container-slate);
  stroke: var(--login-fx-container-slate-stroke);
}

.login-form-panel__fx-container-svg--ocean-0 .login-fx-svg-container-body,
.login-form-panel__fx-container-svg--ocean-1 .login-fx-svg-container-body,
.login-form-panel__fx-container-svg--ocean-2 .login-fx-svg-container-body {
  fill: var(--login-fx-container-ocean);
  stroke: var(--login-fx-container-ocean-stroke);
}

.login-form-panel__fx-container-svg--rust-0 .login-fx-svg-container-body,
.login-form-panel__fx-container-svg--rust-1 .login-fx-svg-container-body,
.login-form-panel__fx-container-svg--rust-2 .login-fx-svg-container-body {
  fill: var(--login-fx-container-rust);
  stroke: var(--login-fx-container-rust-stroke);
}

.login-form-panel__fx-container-svg--steel-0 .login-fx-svg-container-body,
.login-form-panel__fx-container-svg--steel-1 .login-fx-svg-container-body,
.login-form-panel__fx-container-svg--steel-2 .login-fx-svg-container-body {
  fill: var(--login-fx-container-steel);
  stroke: var(--login-fx-container-steel-stroke);
}

.login-fx-svg-container-rib { stroke: var(--login-fx-container-rib); stroke-width: 0.55; }
.login-fx-svg-container-casting { fill: var(--login-fx-container-door); stroke: rgba(0, 0, 0, 0.12); stroke-width: 0.35; }

.login-form-panel__fx-grain {
  position: absolute;
  inset: 0;
  opacity: var(--login-fx-grain-opacity);
  background-image: radial-gradient(rgba(255, 255, 255, 0.75) 0.55px, transparent 0.55px);
  background-size: 4px 4px;
}

.login-form-panel__fx-scanlines {
  position: absolute;
  inset: 0;
  opacity: var(--login-fx-scanline-opacity);
  background: repeating-linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.035) 0 1px,
    transparent 1px 4px
  );
}

.login-form-panel__fx-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 74% 60% at 50% 42%, var(--login-fx-vignette-center) 0%, var(--login-fx-vignette-edge) 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--login-fx-vignette-edge) 55%, transparent) 0%, transparent 20%, transparent 72%, color-mix(in srgb, var(--login-fx-vignette-edge) 70%, transparent) 100%);
}

@keyframes login-form-cloud-scroll {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

@keyframes login-form-fleet-scroll {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}

@keyframes login-form-fleet-scroll-reverse {
  0% { transform: translate3d(-50%, 0, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

@keyframes login-form-rail-scroll {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}

@media (min-width: 901px) {
  .login-brand-panel,
  .login-form-panel {
    justify-content: center;
    align-items: center;
  }

  .login-brand-content,
  .login-form-body {
    max-width: 460px;
  }

  .login-brand-heading {
    gap: 16px;
  }

  .login-hero-logo--inline {
    width: 58px;
    height: 58px;
  }

  .login-company-name {
    font-size: clamp(24px, 2vw, 30px);
  }

  .login-tagline {
    font-size: 16px;
  }

  .login-brand-hero {
    margin-bottom: 28px;
  }

  .login-brand-features {
    gap: 12px;
  }

  .login-brand-feature {
    padding: 14px 16px;
    gap: 14px;
  }

  .login-brand-feature__icon {
    width: 40px;
    height: 40px;
  }

  .login-brand-feature__icon svg {
    width: 20px;
    height: 20px;
  }

  .login-brand-feature__title {
    font-size: 15px;
  }

  .login-brand-feature__desc {
    font-size: 13px;
  }

  .login-card--portal {
    padding: 40px 36px 36px;
  }

  .login-card-header--portal .brand-logo--login-card {
    width: 56px;
    height: 56px;
  }

  .login-card-header--portal h2 {
    font-size: 26px;
  }

  .login-portal-picker {
    gap: 14px;
  }

  .login-portal-card {
    padding: 18px 18px 18px 16px;
  }
}

.login-form-body {
  width: 100%;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

.login-session-banner {
  width: 100%;
  margin-bottom: 16px;
  animation: login-session-banner-in 0.4s ease;
}

.login-session-banner--terminal .login-session-banner__terminal {
  display: flex;
  align-items: flex-start;
  gap: 0.35em;
  margin: 0;
  padding: 12px 14px;
  font-family: ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', Consolas, monospace;
  font-size: 12px;
  line-height: 1.55;
  letter-spacing: 0.02em;
  color: #166534;
  background:
    linear-gradient(180deg, rgba(22, 101, 52, 0.07) 0%, rgba(22, 101, 52, 0.03) 100%),
    color-mix(in srgb, var(--surface) 94%, #166534 6%);
  border: 1px solid rgba(22, 101, 52, 0.28);
  border-radius: var(--radius-md);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.login-session-banner__prompt {
  flex-shrink: 0;
  color: rgba(22, 163, 74, 0.55);
  font-weight: 600;
}

.login-session-banner__body {
  flex: 1;
  min-width: 0;
}

.login-session-banner__text,
.login-session-banner__cursor {
  display: inline;
}

.login-session-banner__text {
  word-break: break-word;
}

.login-session-banner__cursor {
  color: rgba(22, 163, 74, 0.85);
  font-weight: 600;
  animation: login-session-terminal-cursor 1.05s step-end infinite;
}

[data-theme="dark"] .login-session-banner--terminal .login-session-banner__terminal {
  color: #bbf7d0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0.18) 100%),
    color-mix(in srgb, var(--surface) 88%, #052e16 12%);
  border-color: rgba(134, 239, 172, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(134, 239, 172, 0.06),
    0 0 20px rgba(134, 239, 172, 0.06);
}

[data-theme="dark"] .login-session-banner__prompt {
  color: rgba(134, 239, 172, 0.48);
}

[data-theme="dark"] .login-session-banner__cursor {
  color: rgba(134, 239, 172, 0.92);
  text-shadow: 0 0 8px rgba(134, 239, 172, 0.35);
}

@keyframes login-session-banner-in {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes login-session-terminal-cursor {
  0%,
  49% {
    opacity: 1;
  }

  50%,
  100% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .login-session-banner {
    animation: none;
  }

  .login-session-banner__cursor,
  .login-brand-eyebrow__cursor,
  .login-card-title__cursor {
    animation: none;
    opacity: 0.65;
  }

  .login-page--terminal-lite .login-brand-panel__fx-feed-track--ready,
  .login-page--terminal-lite .login-brand-panel__fx-scanbeam,
  .login-page--terminal-lite .login-brand-panel__fx-scanlines,
  .login-page--terminal-lite .login-brand-panel__fx-phosphor,
  .login-form-panel__fx-yard,
  .login-form-panel__fx-fleet-track,
  .login-form-panel__fx-rail-train-track,
  .login-form-panel__fx-clouds-strip,
  .login-form-panel__fx-scanlines {
    animation: none;
  }

  .login-form-panel__fx-haze {
    opacity: 0.82;
  }
}

.login-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px;
  width: 100%;
  box-shadow: var(--shadow-md);
}

.login-card-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
}

.login-card-header h2 {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}

.login-card .subtitle {
  color: var(--text-secondary);
  font-size: 14px;
  margin-top: 2px;
}

.login-footer {
  margin-top: 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

.login-page--terminal-lite .login-footer--panel-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  margin: 0;
  padding: 10px 16px max(14px, env(safe-area-inset-bottom));
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-secondary);
  text-align: center;
  text-shadow: 0 1px 0 color-mix(in srgb, var(--bg) 92%, transparent);
  background: linear-gradient(
    180deg,
    transparent 0%,
    color-mix(in srgb, var(--bg) 72%, transparent) 38%,
    color-mix(in srgb, var(--bg) 94%, transparent) 100%
  );
}

.login-page--terminal-lite .login-form-panel {
  justify-content: flex-start;
}

.login-page--terminal-lite .login-form-panel__column {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 460px;
  min-height: 0;
  margin-inline: auto;
  align-self: center;
  container-type: inline-size;
  container-name: login-form-column;
}

.login-page--terminal-lite .login-form-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: none;
  min-height: 0;
}

.login-page--terminal-lite .login-form-panel-notes {
  position: relative;
  z-index: 5;
  flex-shrink: 0;
  width: 100%;
  margin-top: auto;
  padding-top: 20px;
  padding-bottom: max(6px, env(safe-area-inset-bottom));
  pointer-events: none;
  text-align: center;
}

.login-page--terminal-lite .login-form-panel-notes__line {
  margin: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

.login-page--terminal-lite .login-form-panel-notes__scale {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  margin-inline: auto;
  box-sizing: border-box;
}

.login-page--terminal-lite .login-form-panel-notes__fit {
  display: inline-block;
  white-space: nowrap;
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-muted);
  text-shadow: 0 1px 0 color-mix(in srgb, var(--bg) 88%, transparent);
}

@media (min-width: 901px) {
  .login-page--terminal-lite .login-form-panel {
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }

  .login-page--terminal-lite .login-form-panel-notes {
    padding-top: 16px;
    padding-bottom: max(4px, env(safe-area-inset-bottom));
  }

  .login-page--terminal-lite .login-form-panel-notes__fit {
    font-size: 12px;
  }
}

.login-page--terminal-lite .login-form-panel-notes__sep {
  opacity: 0.82;
}

.login-page--terminal-lite .login-form-panel-notes__name {
  font-weight: 600;
  color: var(--text-secondary);
}

.login-page--terminal-lite .login-footer--panel-bottom a,
.login-page--terminal-lite .login-footer--panel-bottom .page-back-btn {
  pointer-events: auto;
}

[data-theme="dark"] .login-page--terminal-lite .login-footer--panel-bottom {
  color: color-mix(in srgb, var(--text-muted) 88%, #cbd5e1 12%);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}


.login-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.login-label-row label {
  margin-bottom: 0;
}

.login-forgot-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--primary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}

.login-card .alert {
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.45;
}

.login-card .form-control {
  font-size: 16px;
}

.login-card .btn-lg {
  margin-top: 8px;
}

.login-forgot-link:hover {
  text-decoration: underline;
}

.login-otp-panel {
  margin-top: 4px;
}

.login-otp-hint {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.login-otp-code-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.login-otp-field {
  overflow: hidden;
}

.login-otp-digit-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  justify-content: center;
  align-items: center;
  margin-top: 2px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.login-card .login-otp-digit-row .login-otp-digit.form-control {
  flex: 0 0 2.5rem;
  width: 2.5rem;
  min-width: 2.5rem;
  max-width: 2.5rem;
  min-height: 0;
  height: 2.75rem;
  padding: 0;
  box-sizing: border-box;
  text-align: center;
  font-size: 1.15rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  border-radius: 10px;
}

.login-card .login-otp-digit-row .login-otp-digit.form-control:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
}

@media (max-width: 480px) {
  .login-otp-digit-row {
    gap: 6px;
  }

  .login-card .login-otp-digit-row .login-otp-digit.form-control {
    flex: 0 0 2.125rem;
    width: 2.125rem;
    min-width: 2.125rem;
    max-width: 2.125rem;
    height: 2.5rem;
    font-size: 1.05rem;
    border-radius: 9px;
  }
}

.login-back-btn {
  width: 100%;
  margin-top: 10px;
}

.login-form-body--portal {
  max-width: 460px;
}

.login-card--portal {
  padding: 36px 32px 32px;
}

.login-card-header--portal {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  margin-bottom: 24px;
  width: 100%;
}

.login-card-header--portal .brand-logo--login-card {
  width: 52px;
  height: 52px;
}

.login-card-header--portal h2 {
  font-size: 24px;
  margin: 0;
}

.login-card-header--portal .subtitle {
  margin: 0;
  max-width: 28ch;
}

.login-portal-picker {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.login-portal-options {
  display: grid;
  gap: 14px;
}

.login-portal-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px 16px 16px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--surface) 92%, var(--primary) 8%) 0%,
    var(--surface) 100%
  );
  cursor: pointer;
  text-align: left;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease,
    background 0.18s ease;
}

.login-portal-card--employee {
  --portal-accent: var(--portal-staff-accent);
}

.login-portal-card--customer {
  --portal-accent: var(--portal-customer-accent);
}

.login-portal-card:hover,
.login-portal-card:focus-visible {
  border-color: color-mix(in srgb, var(--portal-accent) 55%, var(--border));
  box-shadow:
    0 10px 24px color-mix(in srgb, var(--portal-accent) 12%, transparent),
    0 0 0 3px color-mix(in srgb, var(--portal-accent) 14%, transparent);
  transform: translateY(-1px);
  outline: none;
}

.login-portal-card:active {
  transform: translateY(0);
}

.login-portal-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  color: var(--portal-accent);
  background: color-mix(in srgb, var(--portal-accent) 14%, transparent);
  flex-shrink: 0;
}

.login-portal-card__icon svg {
  width: 24px;
  height: 24px;
}

.login-portal-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.login-portal-card__heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.login-portal-card__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}

.login-portal-card__badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--portal-accent);
  background: color-mix(in srgb, var(--portal-accent) 12%, transparent);
}

.login-portal-card__desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.45;
}

.login-portal-card__chevron {
  width: 18px;
  height: 18px;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: transform 0.18s ease, color 0.18s ease;
}

.login-portal-card:hover .login-portal-card__chevron,
.login-portal-card:focus-visible .login-portal-card__chevron {
  color: var(--portal-accent);
  transform: translateX(2px);
}

.login-portal-footnote {
  margin: 0;
  padding: 0 4px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
  text-align: center;
}

/* Login — terminal + light synth accent (login / auth pages) */
.login-page--terminal-lite .login-brand-panel {
  background:
    radial-gradient(ellipse 80% 55% at 50% 0%, rgba(0, 114, 188, 0.14) 0%, transparent 58%),
    linear-gradient(180deg, #040810 0%, #081420 46%, #0a1628 100%);
  --terminal-green: rgba(134, 196, 154, 0.88);
  --terminal-green-bright: #6EE7B7;
  --terminal-green-muted: #bbf7d0;
}

.login-page--terminal-lite .login-brand-panel__fx {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.login-page--terminal-lite .login-brand-panel__fx::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(4, 8, 16, 0.42) 0%, transparent 28%, transparent 72%, rgba(4, 8, 16, 0.48) 100%),
    radial-gradient(ellipse 95% 75% at 50% 50%, transparent 42%, rgba(0, 0, 0, 0.32) 100%);
}

.login-page--terminal-lite .login-brand-panel__fx-feed {
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 28px clamp(18px, 3vw, 34px);
  overflow: hidden;
  opacity: 0.46;
  mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
}

.login-page--terminal-lite .login-brand-panel__fx-feed-track {
  display: flex;
  flex-direction: column;
  will-change: transform;
}

.login-page--terminal-lite .login-brand-panel__fx-feed-track--ready {
  animation: login-terminal-feed-scroll 80s linear infinite;
}

.login-page--terminal-lite .login-brand-panel__fx-feed-block {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.login-page--terminal-lite .login-brand-panel__fx-feed-spacer {
  flex-shrink: 0;
  height: 0;
}

.login-page--terminal-lite .login-brand-panel__fx-feed-line {
  font-family: var(--terminal-mono);
  font-size: clamp(10px, 1.05vw, 11.5px);
  height: 1.45em;
  line-height: 1.45em;
  margin: 0;
  letter-spacing: 0.04em;
  color: var(--terminal-phosphor);
  text-shadow: 0 0 8px var(--terminal-phosphor-dim);
  white-space: nowrap;
}

.login-page--terminal-lite .login-brand-panel__fx-scanbeam {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 4;
  height: 5px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 114, 188, 0.75) 42%,
    var(--terminal-phosphor-bright) 50%,
    rgba(0, 114, 188, 0.75) 58%,
    transparent 100%
  );
  box-shadow:
    0 0 14px rgba(0, 145, 234, 0.65),
    0 0 28px rgba(0, 114, 188, 0.35);
  opacity: 0;
  animation: login-terminal-scanbeam 22s linear infinite;
}

.login-page--terminal-lite .login-brand-panel__fx-scanlines {
  position: absolute;
  inset: -100% 0 0;
  z-index: 3;
  height: 200%;
  opacity: 0.32;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0) 0,
    rgba(0, 0, 0, 0) 2px,
    rgba(0, 0, 0, 0.28) 2px,
    rgba(0, 0, 0, 0.28) 4px
  );
  mix-blend-mode: multiply;
  animation: login-terminal-scanlines 14s linear infinite;
}

.login-page--terminal-lite .login-brand-panel__fx-phosphor {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(0, 114, 188, 0.035);
  mix-blend-mode: screen;
  animation: login-terminal-phosphor 7s ease-in-out infinite;
}

@keyframes login-terminal-feed-scroll {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(calc(-1 * var(--terminal-feed-loop, 0px)));
  }
}

@keyframes login-terminal-scanbeam {
  0%,
  82% {
    top: -10%;
    opacity: 0;
  }

  84% {
    opacity: 0.42;
  }

  94% {
    top: 110%;
    opacity: 0.42;
  }

  96%,
  100% {
    top: 110%;
    opacity: 0;
  }
}

@keyframes login-terminal-scanlines {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(4px);
  }
}

@keyframes login-terminal-phosphor {
  0%,
  100% {
    opacity: 0.4;
  }

  50% {
    opacity: 0.72;
  }
}

.login-page--terminal-lite .login-brand-panel__glow {
  z-index: 1;
  background:
    radial-gradient(ellipse 70% 50% at 14% 88%, rgba(0, 114, 188, 0.16) 0%, transparent 58%),
    radial-gradient(ellipse 55% 40% at 88% 10%, rgba(0, 145, 234, 0.08) 0%, transparent 52%),
    linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.18) 100%);
}

.login-page--terminal-lite .login-brand-content {
  z-index: 2;
}

.login-page--terminal-lite .login-brand-panel__glow::after {
  opacity: 0.28;
  background-image:
    linear-gradient(rgba(0, 145, 234, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 114, 188, 0.04) 1px, transparent 1px);
}

.login-page--terminal-lite .login-brand-eyebrow {
  font-family: var(--terminal-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--terminal-green);
  text-shadow:
    0 0 10px rgba(134, 196, 154, 0.35),
    0 0 18px rgba(1, 205, 254, 0.12);
}

.login-page--terminal-lite .login-brand-heading__copy {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.35em;
  row-gap: 4px;
  align-items: baseline;
}

.login-page--terminal-lite .login-brand-eyebrow--typewriter,
.login-page--terminal-lite .login-brand-terminal-line {
  display: contents;
}

.login-page--terminal-lite .login-brand-eyebrow__prompt,
.login-page--terminal-lite .login-brand-terminal-line__prompt {
  grid-column: 1;
  font-family: var(--terminal-mono);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  justify-self: start;
}

.login-page--terminal-lite .login-brand-eyebrow__prompt {
  color: var(--synth-cyan);
  opacity: 0.55;
}

.login-page--terminal-lite .login-brand-terminal-line__prompt {
  color: var(--terminal-amber);
  opacity: 0.72;
}

.login-page--terminal-lite .login-brand-terminal-line__prompt--spacer {
  visibility: hidden;
}

.login-page--terminal-lite .login-brand-eyebrow__body,
.login-page--terminal-lite .login-company-name__text,
.login-page--terminal-lite .login-tagline__text {
  grid-column: 2;
  min-width: 0;
}

.login-page--terminal-lite .login-brand-eyebrow__text,
.login-page--terminal-lite .login-brand-eyebrow__cursor {
  display: inline;
}

.login-page--terminal-lite .login-brand-eyebrow__cursor {
  color: rgba(134, 196, 154, 0.92);
  font-weight: 600;
  animation: login-session-terminal-cursor 1.05s step-end infinite;
}

.login-page--terminal-lite .login-company-name__text {
  font-family: var(--terminal-mono);
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  font-size: clamp(12px, 1.55vw, 19px);
  color: rgba(236, 253, 245, 0.95);
  text-shadow: 0 0 18px rgba(134, 196, 154, 0.1);
}

.login-page--terminal-lite .login-tagline__text {
  font-family: var(--terminal-mono);
  font-size: 13px;
  letter-spacing: 0.03em;
  line-height: 1.5;
  color: rgba(212, 196, 158, 0.78);
}

.login-page--terminal-lite .login-card--portal,
.login-page--terminal-lite .login-card--auth,
.login-page--terminal-lite .login-form-body > .login-card {
  border-color: color-mix(in srgb, var(--border) 88%, var(--synth-cyan) 12%);
  box-shadow:
    var(--shadow-md),
    0 0 28px rgba(1, 205, 254, 0.07),
    0 0 48px rgba(255, 113, 206, 0.04);
}

.login-page--terminal-lite .login-card-header--portal,
.login-page--terminal-lite .login-card-header--auth {
  gap: 6px;
  margin-bottom: 26px;
}

.login-page--terminal-lite .login-card-header--portal .brand-logo--login-card,
.login-page--terminal-lite .login-card-header--auth .brand-logo--login-card {
  margin-bottom: 0;
}

.login-page--terminal-lite .login-card-title--typewriter {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.35em;
  max-width: 100%;
  font-family: var(--terminal-mono);
  font-weight: 600;
  font-size: clamp(20px, 3.1vw, 24px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.35;
  margin: 0;
  padding: 0 4px;
  color: var(--terminal-green);
  text-shadow:
    0 0 10px rgba(134, 196, 154, 0.35),
    0 0 18px rgba(1, 205, 254, 0.12);
}

.login-page--terminal-lite .login-card-header--portal .login-card-title--typewriter {
  margin-top: 18px;
  padding-bottom: 10px;
  align-self: center;
  border-bottom: 1px solid color-mix(in srgb, var(--terminal-green) 28%, transparent);
}

.login-page--terminal-lite .login-card-title__prompt {
  flex-shrink: 0;
  font-family: var(--terminal-mono);
  font-size: inherit;
  font-weight: 600;
  line-height: inherit;
  color: var(--synth-cyan);
  opacity: 0.55;
}

.login-page--terminal-lite .login-card-title__body {
  flex: 0 1 auto;
  min-width: 0;
}

.login-page--terminal-lite .login-card-title__text,
.login-page--terminal-lite .login-card-title__cursor {
  display: inline;
  font-family: var(--terminal-mono);
}

.login-page--terminal-lite .login-card-title__cursor {
  color: rgba(134, 196, 154, 0.92);
  font-weight: 600;
  animation: login-session-terminal-cursor 1.05s step-end infinite;
}

.login-page--terminal-lite .login-auth-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 10px;
  width: 100%;
  margin-top: 18px;
  padding: 0 4px 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--terminal-green) 28%, transparent);
}

.login-page--terminal-lite .login-card-header--auth .login-card-title--typewriter {
  width: auto;
  max-width: none;
  padding: 0;
  border-bottom: none;
}

.login-page--terminal-lite .login-card-header h2.login-card-title--typewriter,
.login-page--terminal-lite .login-card-header--auth h2.login-card-title--typewriter,
.login-page--terminal-lite .login-card-header--portal h2.login-card-title--typewriter {
  font-family: var(--terminal-mono);
  font-size: clamp(20px, 3.1vw, 24px);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--terminal-green);
}

[data-theme="dark"] .login-page--terminal-lite .login-card-header--portal .login-card-title--typewriter {
  border-bottom-color: color-mix(in srgb, var(--terminal-green) 32%, transparent);
}

[data-theme="dark"] .login-page--terminal-lite .login-auth-heading {
  border-bottom-color: color-mix(in srgb, var(--terminal-green) 32%, transparent);
}

.login-page--terminal-lite .login-card-header--portal .subtitle,
.login-page--terminal-lite .login-card-header--auth .subtitle {
  font-family: var(--terminal-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  margin-top: 6px;
  padding-top: 0;
  max-width: 26ch;
  color: color-mix(in srgb, var(--text-secondary) 90%, #166534 10%);
}

.login-page--terminal-lite .login-card-header--auth .login-auth-badge {
  font-family: var(--terminal-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
}

@media (min-width: 901px) {
  .login-page--terminal-lite .login-card-title--typewriter,
  .login-page--terminal-lite .login-card-header h2.login-card-title--typewriter,
  .login-page--terminal-lite .login-card-header--auth h2.login-card-title--typewriter,
  .login-page--terminal-lite .login-card-header--portal h2.login-card-title--typewriter {
    font-size: 24px;
  }

  .login-page--terminal-lite .login-card-header--portal .login-card-title--typewriter {
    margin-top: 20px;
    padding-bottom: 12px;
  }

  .login-page--terminal-lite .login-auth-heading {
    margin-top: 20px;
    padding-bottom: 12px;
  }

  .login-page--terminal-lite .login-card-header--portal .subtitle,
  .login-page--terminal-lite .login-card-header--auth .subtitle {
    margin-top: 8px;
  }

  .login-page--terminal-lite .login-tagline {
    font-size: 14px;
  }

  .login-page--terminal-lite .login-company-name__text {
    font-size: clamp(14px, 1.25vw, 20px);
  }
}

/* Sign-in & forgot-password — shared auth styling with portal picker */
.login-card--auth {
  padding: 36px 32px 32px;
}

.login-card--auth.login-card--employee {
  --portal-accent: var(--portal-staff-accent);
}

.login-card--auth.login-card--customer {
  --portal-accent: var(--portal-customer-accent);
}

.login-card-header--auth {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  margin-bottom: 22px;
  width: 100%;
}

.login-card-header--auth .brand-logo--login-card {
  width: 52px;
  height: 52px;
}

.login-card-header--auth h2 {
  font-size: 24px;
  margin: 0;
}

.login-card-header--auth .subtitle {
  margin: 0;
}

.login-auth-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.login-auth-badge {
  --portal-accent: var(--portal-staff-accent);
}

.login-card--customer .login-auth-badge {
  --portal-accent: var(--portal-customer-accent);
}

.login-auth-panel {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.login-auth-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 88%, var(--portal-accent, var(--primary)) 12%);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition:
    border-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.login-auth-back svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.login-auth-back:hover,
.login-auth-back:focus-visible {
  border-color: color-mix(in srgb, var(--portal-accent, var(--primary)) 45%, var(--border));
  color: var(--portal-accent, var(--primary));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--portal-accent, var(--primary)) 12%, transparent);
  outline: none;
}

.login-auth-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.login-auth-form .form-group {
  margin-bottom: 0;
}

.login-auth-input.form-control {
  min-height: 46px;
  border-radius: var(--radius-md);
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}

.login-card--auth .login-auth-input.form-control:focus {
  border-color: color-mix(in srgb, var(--portal-accent, var(--primary)) 55%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--portal-accent, var(--primary)) 14%, transparent);
}

.login-auth-submit.btn-lg {
  width: 100%;
  min-height: 48px;
  margin-top: 4px;
  border-radius: var(--radius-md);
  font-weight: 700;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--portal-accent, var(--primary)) 18%, transparent);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.login-card--auth.login-card--customer .login-auth-submit.btn-primary {
  background: var(--portal-customer-accent);
  border-color: var(--portal-customer-accent);
}

.login-card--auth.login-card--customer .login-auth-submit.btn-primary:hover,
.login-card--auth.login-card--customer .login-auth-submit.btn-primary:focus-visible {
  background: var(--portal-customer-accent-dark);
  border-color: var(--portal-customer-accent-dark);
}

.login-auth-submit.btn-lg:hover,
.login-auth-submit.btn-lg:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px color-mix(in srgb, var(--portal-accent, var(--primary)) 22%, transparent);
}

.login-forgot-copy {
  margin: 0;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.55;
}

@media (max-width: 900px) {
  .login-page {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }

  .login-page--terminal-lite .login-form-panel {
    padding-top: 20px;
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    box-sizing: border-box;
  }

  .login-page--terminal-lite .login-form-panel-notes {
    padding-top: 20px;
    padding-left: max(8px, env(safe-area-inset-left));
    padding-right: max(8px, env(safe-area-inset-right));
    padding-bottom: max(10px, env(safe-area-inset-bottom));
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .login-page--terminal-lite .login-form-panel-notes__line {
    width: 100%;
    max-width: 100%;
    padding: 0;
  }

  .login-page--terminal-lite .login-form-panel-notes__scale {
    width: 100%;
    max-width: 100%;
  }

  .login-page--terminal-lite .login-form-panel-notes__fit {
    font-size: 10px;
    letter-spacing: -0.03em;
    text-align: center;
    margin-inline: auto;
  }

  .login-page--terminal-lite .login-form-panel__column {
    max-width: min(460px, 100%);
    width: 100%;
    box-sizing: border-box;
    padding-inline: 0;
    margin-inline: auto;
  }

  .login-brand-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(20px, env(safe-area-inset-top)) 20px 16px;
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(52px, calc(20px + env(safe-area-inset-right)));
    min-height: 0;
    border-radius: 0 0 24px 24px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
  }

  .login-page--terminal-lite .login-brand-panel__fx-feed {
    opacity: 0.28;
  }

  .login-page--terminal-lite .login-brand-panel__fx-scanlines {
    opacity: 0.22;
  }

  .login-brand-content {
    max-width: 100%;
    width: min(100%, 480px);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .login-brand-hero {
    margin-bottom: 12px;
    width: 100%;
    max-width: 420px;
  }

  .login-brand-heading__copy {
    text-align: left;
  }

  .login-brand-heading {
    justify-content: center;
    gap: 12px;
  }

  .login-hero-logo--inline {
    width: 48px;
    height: 48px;
  }

  .login-brand-eyebrow {
    font-size: 10px;
    margin-bottom: 2px;
  }

  .login-company-name {
    font-size: clamp(12.5px, 3.6vw, 17px);
    margin-bottom: 4px;
  }

  .login-tagline {
    font-size: 13px;
  }

  .login-brand-heading {
    max-width: 100%;
  }

  .login-brand-features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
    max-width: 420px;
  }

  .login-brand-feature {
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 8px;
    padding: 8px 10px;
  }

  .login-brand-feature__icon {
    width: 28px;
    height: 28px;
    border-radius: 7px;
  }

  .login-brand-feature__icon svg {
    width: 14px;
    height: 14px;
  }

  .login-brand-feature__title {
    font-size: 11px;
    line-height: 1.25;
  }

  .login-brand-feature__desc {
    display: none;
  }

  .login-form-panel {
    flex: 0 0 auto;
    justify-content: flex-start;
    min-height: 0;
    overflow: hidden;
    padding: 12px max(12px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom))
      max(12px, env(safe-area-inset-left));
    box-sizing: border-box;
  }

  .login-form-panel__fx-rail-zone {
    top: 36%;
    height: 48px;
    opacity: calc(var(--login-fx-rail-opacity) * 0.92);
  }

  .login-form-panel__fx-rail-train-svg {
    width: calc(var(--login-fx-train-display-width, 298px) * 0.846);
    height: 32px;
  }

  .login-form-panel__fx-road-zone {
    bottom: 8%;
    height: 28%;
  }

  .login-form-panel__fx-yard-containers {
    bottom: 64%;
    opacity: calc(var(--login-fx-container-opacity) * 0.45);
    transform: scale(0.78);
  }

  .login-form-panel__fx-fleet--north {
    bottom: calc(50% + 8px);
  }

  .login-form-panel__fx-fleet--south {
    top: calc(50% - 4px);
  }

  .login-form-panel__fx-fleet-unit {
    margin-right: max(52px, calc(var(--login-fx-unit-gap, 96px) * 0.58));
  }

  .login-form-panel__fx-truck-svg {
    width: 136px;
    height: 42px;
  }

  .login-form-body {
    max-width: 440px;
    width: 100%;
    margin: 0 auto;
  }

  .login-card--portal {
    padding: 24px 20px 20px;
  }

  .login-card-header--portal {
    margin-bottom: 14px;
  }

  .login-card-header--portal .brand-logo--login-card {
    display: none;
  }

  .login-card-header--portal h2 {
    font-size: 20px;
  }

  .login-portal-card {
    padding: 14px 14px 14px 12px;
  }

  .login-card {
    padding: 28px 24px;
    box-shadow: var(--shadow-lg);
  }

  .login-card-header .brand-logo--login-card {
    display: none;
  }

  .login-card-header {
    margin-bottom: 22px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
  }

  .login-card .form-control {
    min-height: 48px;
    padding: 12px 14px;
  }

  .login-card .btn-lg {
    min-height: 48px;
    padding: 14px 18px;
  }

  .login-forgot-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 6px 0;
  }

  .login-footer {
    flex-shrink: 0;
    padding-top: 4px;
  }

  .theme-toggle-btn--login {
    top: max(12px, env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
    z-index: 30;
  }
}

@media (min-width: 601px) and (max-width: 900px) {
  .login-brand-panel {
    padding-top: max(36px, env(safe-area-inset-top));
    padding-bottom: 28px;
  }

  .login-hero-logo--inline {
    width: 52px;
    height: 52px;
  }

  .login-company-name {
    font-size: clamp(15px, 2.4vw, 20px);
  }

  .login-tagline {
    font-size: 14px;
  }

  .login-form-panel {
    padding: 28px 40px max(36px, env(safe-area-inset-bottom));
  }

  .login-form-body {
    max-width: 480px;
  }

  .login-card {
    padding: 32px 28px;
  }
}

@media (max-width: 480px) {
  .login-brand-panel {
    padding: max(22px, env(safe-area-inset-top)) 16px 18px;
    border-radius: 0 0 22px 22px;
  }

  .login-hero-logo--inline {
    width: 44px;
    height: 44px;
  }

  .login-company-name {
    font-size: clamp(11.5px, 3.55vw, 15px);
    line-height: 1.25;
  }

  .login-tagline {
    font-size: 12px;
  }

  .login-brand-features {
    gap: 6px;
  }

  .login-brand-feature {
    padding: 8px 6px;
  }

  .login-brand-feature__title {
    font-size: 11px;
  }

  .login-form-panel {
    padding: 16px 16px max(24px, env(safe-area-inset-bottom));
  }

  .login-form-body {
    max-width: none;
  }

  .login-card {
    padding: 24px 20px;
  }

  .login-card-header h2 {
    font-size: 20px;
  }

  .login-page--terminal-lite .login-card-header h2.login-card-title--typewriter {
    font-size: 20px;
  }

  .login-label-row {
    flex-wrap: wrap;
    gap: 4px 12px;
  }

  .login-footer {
    font-size: 12px;
    margin-top: 12px;
  }
}

/* =============================================================================
   Layout
   ============================================================================= */
.app-header {
  background: var(--nav-bg);
  height: var(--header-height);
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-start;
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--nav-border);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.28);
  overflow: hidden;
  min-width: 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  min-width: 0;
  max-width: 340px;
}

.brand:hover { opacity: 0.9; }

.brand--static {
  cursor: default;
}

.brand--static:hover {
  opacity: 1;
}

.brand-logo {
  flex-shrink: 0;
  object-fit: contain;
  border-radius: 3px;
  display: block;
}

.brand-logo--header {
  width: 30px;
  height: 30px;
}

.brand-logo--login-card {
  width: 36px;
  height: 36px;
}

.login-classic-logo-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 100%;
}

.login-classic-logo {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 96px;
  margin: 0;
  flex-shrink: 0;
  object-fit: contain;
  object-position: center center;
}

.login-hero-logo {
  display: block;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.28));
}

.login-hero-logo--inline {
  width: 52px;
  height: 52px;
  margin: 0;
  flex-shrink: 0;
  align-self: center;
}

.loading-logo {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  min-width: 0;
}

.brand-name {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.brand-app {
  font-size: 10px;
  font-weight: 500;
  color: var(--nav-brand-subtext);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.app-nav-shell {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}

.app-nav-shell .app-nav {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  min-width: 0;
}

.app-nav-scroll-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--nav-border);
  border-radius: var(--radius-sm);
  background: var(--nav-bg);
  color: var(--nav-text-muted);
  cursor: pointer;
  transition:
    color var(--transition),
    background var(--transition),
    border-color var(--transition),
    box-shadow var(--transition);
}

.app-nav-scroll-btn:not([hidden]) {
  display: inline-flex;
}

.app-nav-scroll-btn--prev {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
}

.app-nav-scroll-btn--next {
  grid-column: 1;
  grid-row: 1;
  justify-self: end;
}

.app-nav-shell--overflow {
  grid-template-columns: 32px minmax(0, 1fr) 32px;
}

.app-nav-shell--overflow .app-nav {
  grid-column: 2;
}

.app-nav-shell--overflow .app-nav-scroll-btn--prev {
  grid-column: 1;
}

.app-nav-shell--overflow .app-nav-scroll-btn--next {
  grid-column: 3;
}

.app-nav-shell--overflow .app-nav-scroll-btn[hidden] {
  display: inline-flex;
  visibility: hidden;
  pointer-events: none;
}

.app-nav-scroll-btn:hover,
.app-nav-scroll-btn:focus-visible {
  color: var(--nav-text);
  background: var(--nav-bg-hover);
  border-color: color-mix(in srgb, var(--nav-border) 70%, var(--nav-text) 30%);
  outline: none;
}

.app-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.app-nav::-webkit-scrollbar {
  display: none;
}

.app-nav .nav-item,
.app-nav button.nav-link {
  padding: 8px 14px;
  border: 1px solid transparent;
  background: none;
  color: var(--nav-text-muted);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  transition: all var(--transition);
  text-decoration: none;
  font-family: inherit;
  scroll-margin-inline: 12px;
  scroll-padding-inline: 6px;
}

.app-nav .nav-item:hover,
.app-nav button.nav-link:hover {
  background: var(--nav-bg-hover);
  border-color: var(--nav-border);
  color: var(--nav-text);
  text-decoration: none;
}

.app-nav .nav-item.active {
  background: var(--nav-active-bg);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
  font-weight: 700;
  box-shadow: var(--nav-active-shadow);
}

.app-nav .nav-item--flyout {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.app-nav .nav-item__chevron {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.85;
}

.app-nav__flyout {
  display: inline-flex;
  flex-shrink: 0;
}

@media (min-width: 901px) {
  .app-header {
    gap: 10px;
  }

  .brand {
    flex-shrink: 0;
    max-width: 300px;
  }

  .app-nav-shell {
    margin-left: 4px;
    padding-left: 20px;
    padding-right: 6px;
    border-left: 1px solid var(--nav-divider);
    flex: 1 1 auto;
    min-width: 0;
  }

  .app-nav .nav-item,
  .app-nav button.nav-link {
    flex-shrink: 0;
    white-space: nowrap;
  }
}

.nav-user {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  padding: 0 0 0 14px;
  border-left: 1px solid var(--nav-divider);
  flex: 0 0 auto;
  flex-shrink: 0;
  background: var(--nav-bg);
  position: relative;
  z-index: 2;
  box-shadow: -10px 0 14px -6px var(--nav-bg);
}

.nav-user-profile {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.nav-notifications-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--nav-text);
  cursor: pointer;
  font-family: inherit;
  transition: background var(--transition), color var(--transition);
  flex-shrink: 0;
}

.nav-notifications-btn:hover,
.nav-notifications-btn:focus-visible {
  background: var(--nav-bg-hover);
  outline: none;
}

.nav-notifications-btn:focus-visible {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
}

.nav-notifications-btn__icon {
  display: block;
}

.nav-notifications-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #DC2626;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  pointer-events: none;
  box-shadow: 0 0 0 2px var(--nav-bg);
}

.nav-profile-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 50%;
  font-family: inherit;
  transition: background var(--transition);
  flex-shrink: 0;
}

.nav-profile-btn:hover,
.nav-profile-btn:focus-visible {
  background: var(--nav-bg-hover);
  outline: none;
}

.nav-profile-btn:focus-visible {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
}

.nav-profile-avatar {
  flex-shrink: 0;
  pointer-events: none;
}

.user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--csg-blue-pale);
  color: var(--primary-dark);
  font-weight: 700;
  line-height: 1;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.25);
}

.user-avatar--sm {
  width: 32px;
  height: 32px;
  font-size: 11px;
}

/* =============================================================================
   Support → Users panel
   Admin user list: fixed column widths, compact actions, inactive row styling.
   ============================================================================= */
#users-panel .data-table td {
  vertical-align: middle;
}

#users-panel .data-table td.user-avatar-cell {
  width: 56px;
  line-height: 0;
}

#users-panel .data-table td.user-avatar-cell .user-avatar {
  vertical-align: middle;
}

#users-panel .data-table .user-mobile-meta {
  display: none;
}

#users-panel .support-list-card > .table-wrap,
#users-panel .support-list-card > .support-panel-table {
  overflow-x: hidden;
}

#users-panel .users-table {
  table-layout: fixed;
  width: 100%;
}

#users-panel .users-table th,
#users-panel .users-table td {
  padding: 10px 10px;
  vertical-align: middle;
}

#users-panel .users-table th {
  font-size: 11px;
  padding-top: 9px;
  padding-bottom: 9px;
}

#users-panel .users-table .user-avatar-cell {
  width: 46px;
  padding-left: 10px;
  padding-right: 4px;
}

#users-panel .users-table .col-username,
#users-panel .users-table .col-display-name,
#users-panel .users-table .col-email,
#users-panel .users-table .col-role {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 0;
}

#users-panel .users-table .col-status {
  width: 74px;
  white-space: nowrap;
}

#users-panel .users-table .col-created {
  width: 88px;
  white-space: nowrap;
  font-size: 12px;
}

/* =============================================================================
   Fixed actions column — sized for edit / deactivate / delete icon buttons
   ============================================================================= */
#users-panel .users-table th.col-actions,
#users-panel .users-table td.col-actions {
  width: 118px;
  min-width: 118px;
  max-width: 118px;
  padding-left: 6px;
  padding-right: 8px;
  white-space: nowrap;
}

#users-panel .users-table td.col-actions .action-links {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 6px;
  align-items: center;
}

#users-panel .users-table .user-status-badge {
  font-size: 10px;
  padding: 2px 6px;
}

.user-roles-panel__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.user-roles-panel__header > .dashboard-accent-cmd-bar--toolbar {
  flex-shrink: 0;
  align-self: center;
}

.user-roles-panel__summary {
  margin: 4px 0 0;
  font-size: 12px;
  font-weight: 400;
}

.user-roles-table__code {
  font-size: 11px;
  margin-top: 2px;
}

.user-roles-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}

.user-roles-table__permissions {
  font-size: 12px;
  line-height: 1.45;
  max-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

.user-roles-table .col-users-count {
  width: 56px;
  white-space: nowrap;
}

table.data-table.user-roles-table th.col-actions,
table.data-table.user-roles-table td.col-actions {
  width: 88px;
  min-width: 88px;
  max-width: 88px;
}

.role-permissions-groups {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-height: min(58vh, 520px);
  overflow-y: auto;
  padding-right: 4px;
}

.role-permissions-group__title {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.role-permissions-grid {
  display: grid;
  gap: 10px;
}

.role-permission-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--ui-panel-border);
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
  cursor: pointer;
}

.role-permission-option input {
  margin-top: 3px;
  flex-shrink: 0;
}

.role-permission-option__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.role-permission-option__text strong {
  font-size: 13px;
}

.role-permission-option__text small {
  font-size: 11px;
  line-height: 1.35;
}

@media (max-width: 1280px) {
  #users-panel .users-table .col-display-name {
    display: none;
  }

  #users-panel .users-table .user-mobile-meta {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (max-width: 1024px) {
  #users-panel .users-table .col-email,
  #users-panel .users-table .col-created {
    display: none;
  }
}

img.user-avatar {
  display: block;
}

.user-avatar--md {
  width: 40px;
  height: 40px;
  font-size: 13px;
}

.user-avatar--lg {
  width: 64px;
  height: 64px;
  font-size: 18px;
}

.user-avatar--initials {
  background: linear-gradient(135deg, var(--csg-blue), var(--primary-dark));
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
}

.profile-picture-picker {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}

.profile-picture-preview-wrap {
  line-height: 0;
}

.profile-picture-preview {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border);
  background: var(--bg-subtle);
}

.profile-picture-preview--empty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  color: var(--primary-dark);
  background: var(--csg-blue-pale);
}

.profile-picture-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.profile-picture-upload-label {
  cursor: pointer;
  margin: 0;
}

.profile-picture-input-hidden {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  overflow: hidden;
}

/* =============================================================================
   Profile modal
   ============================================================================= */
.profile-modal {
  max-width: 480px;
}

.profile-modal-body {
  padding-top: 4px;
}

.profile-modal-identity {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 16px 16px 24px;
  margin-bottom: 20px;
  border-radius: var(--radius);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--primary) 5%, var(--ui-inset-bg)) 0%,
    var(--ui-inset-bg) 100%
  );
  border: 1px solid var(--ui-panel-border);
}

.profile-modal .profile-picture-picker {
  align-items: center;
  gap: 14px;
  width: 100%;
}

.profile-modal .profile-picture-preview,
.profile-modal .profile-picture-preview--empty {
  width: 92px;
  height: 92px;
  border-width: 3px;
  box-shadow: 0 6px 18px rgba(0, 114, 188, 0.1);
}

.profile-modal .profile-picture-preview--empty {
  font-size: 26px;
}

.profile-modal .profile-picture-actions {
  justify-content: center;
}

.profile-modal .profile-picture-picker > .text-muted {
  max-width: 320px;
  font-size: 12px;
  line-height: 1.5;
}

.profile-modal-section {
  margin-bottom: 20px;
}

.profile-modal-section:last-child {
  margin-bottom: 0;
}

.profile-modal-section__title {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--primary);
}

.profile-modal-section--account {
  padding: 14px 16px 12px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--text-muted) 6%, var(--ui-inset-bg));
  border: 1px solid var(--ui-panel-border);
}

.profile-modal-section--editable {
  padding-top: 4px;
}

.profile-modal-readonly-label {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.profile-modal-account-row {
  margin-bottom: 0;
  gap: 12px;
}

.profile-readonly-field {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 9px 12px;
  border: 1px dashed color-mix(in srgb, var(--text-muted) 28%, var(--ui-panel-border));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--text-muted) 8%, var(--ui-panel-bg));
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 500;
  cursor: not-allowed;
  user-select: none;
}

.profile-readonly-field--role {
  color: color-mix(in srgb, var(--primary) 72%, var(--text-muted));
  font-weight: 600;
}

.profile-modal-account-note {
  margin: 10px 0 0;
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-muted);
  font-style: italic;
}

.profile-modal-section--editable .form-control {
  background: var(--ui-panel-bg);
  border-color: var(--ui-panel-border);
}

.profile-modal-section--editable .form-control:focus {
  background: var(--ui-panel-bg);
}

.profile-modal-label-note {
  font-weight: 500;
  font-size: 12px;
}

.profile-modal-field-last {
  margin-bottom: 0;
}

[data-theme="dark"] .profile-modal-identity {
  background: linear-gradient(
    180deg,
    rgba(0, 145, 234, 0.08) 0%,
    rgba(0, 0, 0, 0.18) 100%
  );
}

[data-theme="dark"] .profile-modal-section--account {
  background: rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .profile-readonly-field {
  background: rgba(0, 0, 0, 0.22);
  border-color: rgba(148, 163, 184, 0.22);
  color: #94A3B8;
}

[data-theme="dark"] .profile-readonly-field--role {
  color: #7DD3FC;
}

[data-theme="dark"] .profile-modal .profile-picture-preview,
[data-theme="dark"] .profile-modal .profile-picture-preview--empty {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

@media (max-width: 520px) {
  .profile-modal-account-row {
    grid-template-columns: 1fr;
  }
}

.user-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

.user-status-badge--active {
  background: #D1FAE5;
  color: #065F46;
}

.user-status-badge--inactive {
  background: #F3F4F6;
  color: #6B7280;
}

.user-row--inactive td:not(.col-actions) {
  opacity: 0.72;
}

[data-theme="dark"] .user-status-badge--active {
  background: rgba(16, 185, 129, 0.18);
  color: #6EE7B7;
}

[data-theme="dark"] .user-status-badge--inactive {
  background: rgba(156, 163, 175, 0.16);
  color: #D1D5DB;
}

.profile-crop-modal__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: stretch;
}

.profile-crop-modal__hint {
  margin: 0;
  font-size: 13px;
  text-align: center;
}

.profile-crop-viewport {
  position: relative;
  width: min(100%, 280px);
  aspect-ratio: 1;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--bg-subtle);
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.profile-crop-viewport--dragging {
  cursor: grabbing;
}

.profile-crop-image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: center center;
  max-width: none;
  pointer-events: none;
}

.profile-crop-zoom {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
}

.profile-crop-zoom__label {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}

.profile-crop-zoom__input {
  flex: 1;
  min-width: 0;
}

.nav-logout-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--nav-border);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.06);
  color: var(--nav-text);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  font-family: inherit;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
  flex-shrink: 0;
  box-sizing: border-box;
}

.nav-logout-btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.nav-logout-btn__icon svg {
  display: block;
}

.nav-logout-btn:hover,
.nav-logout-btn:focus-visible {
  background: rgba(239, 68, 68, 0.16);
  border-color: rgba(252, 165, 165, 0.42);
  color: #FEE2E2;
  outline: none;
}

.nav-logout-btn:focus-visible {
  box-shadow: 0 0 0 2px rgba(252, 165, 165, 0.38);
}

.nav-logout-btn:disabled {
  opacity: 0.65;
  cursor: wait;
}

.nav-logout-btn.is-loading .nav-logout-btn__label {
  opacity: 0.85;
}

/* Auth transition overlays — sign-in & sign-out (staff & customer portals) */
.auth-overlay,
.logout-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.22s ease;
  pointer-events: all;
}

.auth-overlay.is-visible,
.logout-overlay.is-visible {
  opacity: 1;
}

.auth-overlay.is-hiding,
.logout-overlay.is-hiding {
  opacity: 0;
}

.auth-overlay__panel,
.logout-overlay__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 28px 32px 24px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  min-width: min(280px, 92vw);
  text-align: center;
  animation: auth-overlay-panel-in 0.28s ease;
}

@keyframes auth-overlay-panel-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.auth-overlay--customer .auth-overlay__panel,
.logout-overlay--customer .logout-overlay__panel {
  border-color: color-mix(in srgb, var(--portal-customer-accent) 28%, var(--border));
  box-shadow:
    var(--shadow-lg),
    0 0 0 1px color-mix(in srgb, var(--portal-customer-accent) 8%, transparent);
}

.auth-overlay--staff .auth-overlay__panel,
.logout-overlay--staff .logout-overlay__panel {
  border-color: color-mix(in srgb, var(--portal-staff-accent) 28%, var(--border));
  box-shadow:
    var(--shadow-lg),
    0 0 0 1px color-mix(in srgb, var(--portal-staff-accent) 8%, transparent);
}

.auth-overlay__spinner,
.logout-overlay__spinner {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 3px solid color-mix(in srgb, var(--text-muted) 18%, transparent);
  border-top-color: var(--portal-staff-accent);
  animation: auth-overlay-spin 0.72s linear infinite;
}

.auth-overlay--customer .auth-overlay__spinner,
.logout-overlay--customer .logout-overlay__spinner {
  border-top-color: var(--portal-customer-accent);
}

@keyframes auth-overlay-spin {
  to {
    transform: rotate(360deg);
  }
}

.auth-overlay__title,
.logout-overlay__title {
  margin: 4px 0 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}

.auth-overlay__subtitle,
.logout-overlay__subtitle {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
}

.user-greeting {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  padding: 0 12px;
  font-size: 13px;
  line-height: 1;
  box-sizing: border-box;
  margin: 0;
  vertical-align: middle;
  pointer-events: none;
  user-select: none;
  color: var(--nav-user-badge-text);
  background: var(--nav-user-badge-bg);
  border: 1px solid var(--nav-border);
  border-radius: 999px;
  backdrop-filter: blur(6px);
}

.user-greeting-label {
  font-weight: 500;
  opacity: 0.88;
}

.user-greeting .user-name {
  font-weight: 700;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  border-radius: 0;
}

@media (max-width: 1320px) and (min-width: 901px) {
  .user-greeting-label {
    display: none;
  }

  .user-greeting {
    padding: 0 10px;
  }

  .app-nav .nav-item,
  .app-nav button.nav-link {
    padding: 7px 11px;
    font-size: 12px;
  }
}

@media (max-width: 1180px) and (min-width: 901px) {
  .user-greeting {
    display: none;
  }

  .brand {
    max-width: 240px;
  }
}

.main-content {
  padding: 28px 32px;
  max-width: 1440px;
  margin: 0 auto;
}

.page-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  padding: 32px;
}

.page-loading__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.page-loading-text {
  color: var(--text-muted);
  font-size: 15px;
  font-weight: 500;
}

.loading-dots--page span {
  background: var(--primary);
}

.page-title {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--text);
  letter-spacing: -0.02em;
}

.page-title + .text-muted,
.page-title ~ .toolbar .text-muted {
  margin-bottom: 0;
}

/* =============================================================================
   Tabs
   ============================================================================= */
.tabs {
  display: flex;
  border-bottom: 2px solid var(--ui-panel-border);
  margin-bottom: 20px;
  gap: 0;
  background: var(--ui-panel-bg);
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 0 8px;
  box-shadow: var(--ui-panel-shadow);
}

.tab {
  padding: 12px 18px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all var(--transition);
  font-family: inherit;
}

.tab:hover:not(:disabled) { color: var(--primary); background: var(--csg-blue-pale); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.tab.active {
  border-bottom-color: var(--primary);
  color: var(--primary);
  font-weight: 600;
}
.tab:disabled { opacity: 0.4; cursor: not-allowed; }

.tabs.tabs--wrap {
  flex-wrap: wrap;
  row-gap: 0;
}

/* =============================================================================
   Support — segmented section nav
   ============================================================================= */
.page-title + .support-nav {
  margin-top: 2px;
}

.support-nav {
  margin-bottom: 22px;
}

.support-nav__shell {
  border: 1px solid var(--ui-panel-border);
  border-radius: var(--radius-lg);
  background: var(--ui-inset-bg);
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06);
  overflow: visible;
  position: relative;
  z-index: 40;
}

.support-nav__scroll {
  overflow-x: auto;
  overflow-y: visible;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.support-nav__scroll::-webkit-scrollbar {
  display: none;
}

.support-nav__track {
  display: inline-flex;
  align-items: stretch;
  gap: 4px;
  min-width: min(100%, max-content);
  padding: 5px;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

.support-nav__flyout {
  position: relative;
  flex: 0 0 auto;
  min-width: max-content;
}

.support-nav__tab--flyout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.support-nav__tab-label {
  min-width: max-content;
}

.support-nav__tab-chevron {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.65;
  transition: transform var(--transition), opacity var(--transition);
}

.support-nav__flyout.is-open .support-nav__tab-chevron,
.support-nav__flyout.is-active:hover .support-nav__tab-chevron {
  opacity: 1;
}

.support-nav__flyout.is-open .support-nav__tab--flyout {
  position: relative;
  z-index: 5001;
}

.support-nav__flyout.is-open .support-nav__tab-chevron {
  transform: rotate(180deg);
}

.support-flyout-root {
  position: fixed;
  inset: 0;
  z-index: 5000;
  pointer-events: none;
}

.support-flyout-root .support-nav__flyout-menu {
  position: fixed;
  pointer-events: auto;
  transform: none;
  min-width: 220px;
  max-width: min(280px, 92vw);
  padding: 0;
  border: 1px solid var(--ui-panel-border);
  border-radius: var(--radius);
  background: var(--ui-panel-bg);
  box-shadow: var(--shadow-lg);
  overflow: visible;
  max-height: none;
}

.support-flyout-root .support-nav__flyout-menu-body {
  padding: 6px;
  border-radius: inherit;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.support-flyout-root .support-nav__flyout-menu::before {
  content: '';
  position: absolute;
  z-index: 2;
  width: 10px;
  height: 10px;
  background: var(--ui-panel-bg);
  transform: rotate(45deg);
  pointer-events: none;
}

.support-flyout-root .support-nav__flyout-menu--below::before {
  top: -6px;
  left: var(--flyout-caret-left, 24px);
  margin-left: -5px;
  border-left: 1px solid var(--ui-panel-border);
  border-top: 1px solid var(--ui-panel-border);
  border-right: none;
  border-bottom: none;
}

.support-flyout-root .support-nav__flyout-menu--below::after {
  content: '';
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
}

.support-flyout-root .support-nav__flyout-menu--above::before {
  top: auto;
  bottom: -6px;
  left: var(--flyout-caret-left, 24px);
  margin-left: -5px;
  border-right: 1px solid var(--ui-panel-border);
  border-bottom: 1px solid var(--ui-panel-border);
  border-left: none;
  border-top: none;
}

.support-flyout-root .support-nav__flyout-menu--above::after {
  content: '';
  position: absolute;
  bottom: -12px;
  left: 0;
  right: 0;
  height: 12px;
}

.support-flyout-root .support-nav__flyout-menu:not(.support-nav__flyout-menu--below):not(.support-nav__flyout-menu--above)::before {
  display: none;
}

.support-flyout-root .export-dropdown-menu {
  min-width: 268px;
  max-width: min(320px, 92vw);
}

.support-flyout-root .yard-trailer-menu {
  min-width: 240px;
  max-width: min(320px, 92vw);
}

.support-flyout-root .export-dropdown-item,
.support-flyout-root .yard-trailer-menu-item {
  border-radius: var(--radius-sm);
}

.support-flyout-root .export-dropdown-group-label,
.support-flyout-root .action-flyout-group-label {
  padding: 6px 10px 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.support-flyout-root .export-dropdown-divider,
.support-flyout-root .action-flyout-divider {
  height: 1px;
  margin: 4px 6px;
  background: var(--ui-panel-border, var(--border));
}

.support-nav__flyout-group {
  position: relative;
}

.support-nav__flyout-item--parent {
  width: 100%;
}

.support-nav__flyout-item-chevron {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.7;
}

.support-nav__flyout-group.is-active > .support-nav__flyout-item--parent,
.support-nav__flyout-group.is-open > .support-nav__flyout-item--parent {
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}

.support-nav__flyout-group.is-open > .support-nav__flyout-item--parent .support-nav__flyout-item-chevron {
  transform: rotate(90deg);
}

.support-nav__flyout-submenu {
  display: none;
  position: absolute;
  top: -4px;
  left: calc(100% + 2px);
  min-width: 180px;
  padding: 6px;
  border: 1px solid var(--ui-panel-border);
  border-radius: var(--radius);
  background: var(--ui-panel-bg);
  box-shadow: var(--shadow-lg);
  z-index: 2;
}

/* =============================================================================
   Invisible bridge so hover is not lost moving from parent item to submenu
   ============================================================================= */
.support-nav__flyout-submenu::before {
  content: '';
  position: absolute;
  top: -6px;
  bottom: -6px;
  width: 16px;
  left: -16px;
}

.support-nav__flyout-submenu--left {
  left: auto;
  right: calc(100% + 2px);
}

.support-nav__flyout-submenu--left::before {
  left: auto;
  right: -16px;
}

.support-nav__flyout-group:hover > .support-nav__flyout-submenu,
.support-nav__flyout-group.is-open > .support-nav__flyout-submenu {
  display: block;
}

@media (max-width: 900px) {
  .support-nav__flyout-submenu {
    position: static;
    left: auto;
    right: auto;
    margin: 0 0 4px 8px;
    box-shadow: none;
    border: none;
    background: transparent;
    padding: 0 0 0 8px;
    border-left: 2px solid var(--ui-panel-border);
  }

  .support-nav__flyout-submenu--left {
    right: auto;
  }

  .support-nav__flyout-group:hover > .support-nav__flyout-submenu {
    display: none;
  }

  .support-nav__flyout-group.is-open > .support-nav__flyout-submenu {
    display: block;
  }
}

.support-nav__flyout-menu--floating {
  position: fixed;
  top: var(--flyout-top, 0);
  left: var(--flyout-left, 0);
  transform: none;
  z-index: 5000;
}

.support-nav__flyout-menu--floating::before {
  display: none;
}

.support-nav__flyout-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 300;
  min-width: 240px;
  max-width: min(320px, 92vw);
  padding: 6px;
  border: 1px solid var(--ui-panel-border);
  border-radius: var(--radius);
  background: var(--ui-panel-bg);
  box-shadow: var(--shadow-lg);
}

.support-nav__flyout-menu::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  width: 10px;
  height: 10px;
  background: var(--ui-panel-bg);
  border-left: 1px solid var(--ui-panel-border);
  border-top: 1px solid var(--ui-panel-border);
  transform: translateX(-50%) rotate(45deg);
}

.support-nav__flyout-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 10px 12px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: color var(--transition), background var(--transition);
}

.support-nav__flyout-item-label {
  flex: 1;
  min-width: 0;
}

.support-nav__flyout-item-check {
  flex-shrink: 0;
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
}

.support-nav__flyout-item:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--primary) 8%, transparent);
}

.support-nav__flyout-item.active {
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
}

.support-nav__flyout-item:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--ui-focus-ring);
}

.support-nav .support-nav__tab {
  position: relative;
  flex: 0 0 auto;
  margin: 0;
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: calc(var(--radius-lg) - 3px);
  background: transparent;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  white-space: nowrap;
  scroll-margin-inline: 12px;
  cursor: pointer;
  transition:
    color var(--transition),
    background var(--transition),
    border-color var(--transition),
    box-shadow var(--transition),
    transform var(--transition);
}

.support-nav .support-nav__tab:hover:not(:disabled):not(.active) {
  color: var(--text);
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  border-color: color-mix(in srgb, var(--primary) 14%, transparent);
}

.support-nav .support-nav__tab:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ui-focus-ring);
}

.support-nav .support-nav__tab.active {
  color: var(--primary);
  background: var(--ui-panel-bg);
  border-color: color-mix(in srgb, var(--primary) 24%, var(--ui-panel-border));
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.06),
    0 4px 12px rgba(0, 114, 188, 0.08);
}

.support-nav .support-nav__tab:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

[data-theme="dark"] .support-nav__shell {
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.22);
}

[data-theme="dark"] .support-nav .support-nav__tab:hover:not(:disabled):not(.active) {
  background: rgba(0, 145, 234, 0.12);
  border-color: rgba(0, 145, 234, 0.22);
}

[data-theme="dark"] .support-nav .support-nav__tab.active {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.28),
    0 4px 14px rgba(0, 145, 234, 0.16);
}

[data-theme="dark"] .support-nav__flyout-menu {
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}

@media (max-width: 720px) {
  .support-nav .support-nav__tab {
    padding: 9px 14px;
    font-size: 12px;
  }

  .support-nav__flyout-menu {
    left: 0;
    transform: none;
    min-width: min(280px, calc(100vw - 32px));
  }

  .support-nav__flyout-menu::before {
    left: 24px;
    transform: rotate(45deg);
  }
}

@media (min-width: 901px) {
  .support-nav__track {
    display: flex;
    width: 100%;
    min-width: max-content;
  }

  .support-nav .support-nav__tab,
  .support-nav__flyout {
    flex: 1 1 auto;
    min-width: max-content;
  }

  .support-nav .support-nav__tab {
    width: 100%;
    min-width: max-content;
    text-align: center;
    padding-inline: 12px;
  }
}

/* =============================================================================
   Toolbar
   ============================================================================= */
.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}

.main-content .toolbar {
  background: var(--ui-toolbar-bg);
  border: 1px solid var(--ui-toolbar-border);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--ui-panel-shadow);
}

.toolbar-left, .toolbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.export-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.export-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ui-filter-label);
}

.export-dropdown {
  position: relative;
  display: inline-flex;
}

.export-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.export-dropdown-chevron {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.7;
  transition: transform var(--transition);
}

.export-dropdown.is-open .export-dropdown-chevron,
.export-dropdown-trigger.is-open .export-dropdown-chevron {
  transform: rotate(180deg);
}

.export-dropdown-menu {
  display: none;
}

.export-dropdown-menu:not([hidden]) {
  display: block;
}

.export-dropdown-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.export-dropdown-group-label {
  padding: 6px 10px 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.export-dropdown-divider {
  height: 1px;
  margin: 4px 6px;
  background: var(--border);
}

.export-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  text-align: left;
  font-family: inherit;
  color: var(--text);
  cursor: pointer;
  transition: background 0.12s ease;
}

.export-dropdown-item:hover,
.export-dropdown-item:focus-visible {
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  outline: none;
}

.export-dropdown-item:focus-visible {
  box-shadow: 0 0 0 2px var(--ui-focus-ring);
}

.export-dropdown-item-icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.export-dropdown-item-icon--csv {
  background: #d1fae5;
  color: #065f46;
}

.export-dropdown-item-icon--excel {
  background: #dcfce7;
  color: #166534;
  font-size: 12px;
}

.export-dropdown-item-icon--pdf {
  background: #fee2e2;
  color: #991b1b;
}

.export-dropdown-item-icon--json {
  background: #e0e7ff;
  color: #3730a3;
  font-size: 9px;
}

.export-dropdown-item-icon--sheets {
  background: #dbeafe;
  color: #1d4ed8;
}

.export-dropdown-item-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.export-dropdown-item-label {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
}

.export-dropdown-item-desc {
  font-size: 11px;
  line-height: 1.3;
  color: var(--text-muted);
}

.billing-filter-bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  width: 100%;
}

.billing-filters {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}

.billing-filter-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.billing-filter-field label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ui-filter-label);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.2;
  white-space: nowrap;
}

.billing-filter-field .form-control {
  width: auto;
  min-width: 152px;
  height: 42px;
  padding: 9px 12px;
}

.billing-filter-field--date .form-control,
.billing-filter-field:has(> input[type="date"].form-control) .form-control {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.billing-filter-field--year-range .form-control {
  min-width: 88px;
}

.year-range-inputs {
  display: flex;
  align-items: center;
  gap: 8px;
}

.year-range-sep {
  color: var(--text-secondary);
  font-weight: 600;
}


.billing-filter-field--customer .form-control {
  min-width: 200px;
  max-width: 240px;
}

.billing-filter-field--action {
  justify-content: flex-end;
}

.billing-filter-field--action .btn {
  height: 42px;
  padding: 0 14px;
  white-space: nowrap;
}

.billing-filter-bar .export-group {
  flex-shrink: 0;
  margin-left: auto;
  padding-bottom: 2px;
}

.billing-customer-picker {
  width: 100%;
  flex-basis: 100%;
  margin-top: 4px;
  padding: 12px 14px;
  border: 1px solid var(--ui-panel-border);
  border-radius: 8px;
  background: var(--ui-panel-bg);
  box-shadow: var(--shadow-sm);
}

.billing-customer-picker-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}

.billing-customer-picker-head span {
  margin-right: auto;
}

.billing-customer-picker-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  max-height: 132px;
  overflow-y: auto;
}

.billing-customer-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  background: var(--surface);
  color: var(--text-primary);
}

.billing-customer-chip input {
  margin: 0;
}

.billing-customer-chip:has(input:checked) {
  border-color: var(--csg-blue);
  background: var(--csg-blue-pale);
}

.billing-date-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.billing-date-filter label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}

.billing-date-filter .form-control[type="date"] {
  width: auto;
  min-width: 150px;
}

@media (max-width: 900px) {
  .billing-date-filter .form-control[type="date"] {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
}

.btn-sheets {
  background: #0F9D58;
  color: #fff;
  border-color: #0B8043;
}
.btn-sheets:hover {
  background: #0B8043;
  transform: translateY(-1px);
}

.export-toast,
.app-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  max-width: 380px;
  padding: 14px 18px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
  color: #fff;
  background: var(--primary-dark);
  box-shadow: var(--shadow-lg);
  z-index: 2000;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

.export-toast--visible,
.app-toast--visible {
  opacity: 1;
  transform: translateY(0);
}

.export-toast--success,
.app-toast--success { background: #0B8043; }

.export-toast--info,
.app-toast--info { background: var(--primary); }

.app-toast--error { background: #B42318; }
.app-toast--warning { background: #B45309; }

[data-theme="dark"] .app-toast,
[data-theme="dark"] .export-toast {
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] .app-toast--error { background: #DC2626; }
[data-theme="dark"] .app-toast--warning { background: #D97706; }

.notification-prompt-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 2001;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: min(420px, calc(100vw - 32px));
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--ui-panel-bg);
  color: var(--text);
  border: 1px solid var(--ui-panel-border);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: auto;
}

.notification-prompt-toast--visible {
  opacity: 1;
  transform: translateY(0);
}

.notification-prompt-toast__content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  font-size: 13px;
  line-height: 1.4;
}

.notification-prompt-toast__content strong {
  font-size: 14px;
}

.notification-prompt-toast__actions {
  display: flex;
  flex-shrink: 0;
  gap: 8px;
}

.notification-center-modal,
.notification-login-modal,
.notification-preferences-modal {
  max-width: 640px;
}

.notification-preferences-modal,
#notification-center-preferences-view,
.profile-modal-section--notifications {
  --notif-unread-text: #003B63;
  --notif-unread-bg: #DBEAFE;
  --notif-unread-border: #60A5FA;
  --notif-new-text: #003B63;
  --notif-new-bg: #BFDBFE;
  --notif-new-border: #3B82F6;
}

[data-theme="dark"] .notification-preferences-modal,
[data-theme="dark"] #notification-center-preferences-view,
[data-theme="dark"] .profile-modal-section--notifications {
  --notif-unread-text: #F8FAFC;
  --notif-unread-bg: #0369A1;
  --notif-unread-border: #38BDF8;
}

.modal.notification-center-modal {
  display: flex;
  flex-direction: column;
  height: min(85vh, 780px);
  max-height: min(85vh, 780px);
  overflow: hidden;
}

.notification-center-modal .modal-header {
  flex: 0 0 auto;
}

.notification-center-modal .modal-body.notification-center-body {
  flex: 1 1 0;
  min-height: 0;
  max-height: none;
  padding: 10px 14px 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.notification-center-modal,
.notification-login-modal {
  --notif-unread-text: #003B63;
  --notif-unread-bg: #DBEAFE;
  --notif-unread-border: #60A5FA;
  --notif-new-text: #003B63;
  --notif-new-bg: #BFDBFE;
  --notif-new-border: #3B82F6;
  --notif-critical-text: #7F1D1D;
  --notif-critical-bg: #FEE2E2;
  --notif-critical-border: #F87171;
  --notif-warning-text: #78350F;
  --notif-warning-bg: #FEF3C7;
  --notif-warning-border: #FBBF24;
}

[data-theme="dark"] .notification-center-modal,
[data-theme="dark"] .notification-login-modal {
  --notif-unread-text: #F8FAFC;
  --notif-unread-bg: #0369A1;
  --notif-unread-border: #38BDF8;
  --notif-new-text: #FFFFFF;
  --notif-new-bg: #0284C7;
  --notif-new-border: #7DD3FC;
  --notif-critical-text: #FFFFFF;
  --notif-critical-bg: #B91C1C;
  --notif-critical-border: #FCA5A5;
  --notif-warning-text: #1C1917;
  --notif-warning-bg: #FBBF24;
  --notif-warning-border: #FDE68A;
}

.notification-preferences-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: min(78vh, 720px);
  padding-top: 4px;
}

.notification-center-view {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}

.notification-center-view.hidden {
  display: none;
}

#notification-center-preferences-view {
  overflow-y: auto;
  min-height: 0;
  flex: 1 1 auto;
}

.notification-center-toolbar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
  padding: 8px 10px;
  border: 1px solid var(--ui-panel-border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--ui-panel-bg) 88%, var(--surface-elevated, #fff) 12%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent);
  flex-shrink: 0;
}

[data-theme="dark"] .notification-center-toolbar {
  background: color-mix(in srgb, var(--ui-panel-bg) 78%, #1e293b 22%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 4%, transparent);
}

.notification-center-toolbar__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.notification-center-toolbar__body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.notification-center-filter-hint {
  display: block;
  min-width: 0;
  margin: 0;
  font-size: 11px;
  line-height: 1.35;
  color: var(--ui-muted-readable);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notification-center-toolbar__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.notification-center-updated {
  margin: 0;
  font-size: 11px;
  white-space: nowrap;
  flex-shrink: 0;
}

.notification-center-type-filters {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
}

.notification-type-filter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 2px 6px;
  font-size: 11px;
  border-radius: 999px;
  border: 1px solid var(--ui-panel-border);
  background: var(--ui-panel-bg);
  color: var(--text-secondary);
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.notification-type-filter:hover,
.notification-type-filter:focus-visible {
  border-color: color-mix(in srgb, var(--primary) 35%, var(--ui-panel-border));
  color: var(--text);
  outline: none;
}

.notification-type-filter--active {
  color: var(--notif-unread-text, #003B63);
  background: var(--notif-unread-bg, #DBEAFE);
  border-color: var(--notif-unread-border, #60A5FA);
}

[data-theme="dark"] .notification-center-filter-hint {
  color: color-mix(in srgb, var(--text) 72%, #94a3b8 28%);
}

.notification-center-list-scroll {
  flex: 1 1 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 2px 4px 4px 2px;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}

.notification-center-group + .notification-center-group {
  margin-top: 20px;
  padding-top: 4px;
  border-top: 1px solid color-mix(in srgb, var(--ui-panel-border) 85%, transparent);
}

.notification-center-group__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.notification-center-group__title--sticky {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 6px 0;
  background: color-mix(in srgb, var(--ui-panel-bg) 92%, transparent);
  backdrop-filter: blur(6px);
}

.notification-center-group__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
  background: var(--ui-panel-bg);
  border: 1px solid var(--ui-panel-border);
}

.notification-center-group--critical .notification-center-group__title {
  color: #DC2626;
}

.notification-center-group--warning .notification-center-group__title {
  color: #D97706;
}

[data-theme="dark"] .notification-center-group--critical .notification-center-group__title {
  color: #FCA5A5;
}

[data-theme="dark"] .notification-center-group--warning .notification-center-group__title {
  color: #FCD34D;
}

.notification-center-toolbar .notification-soft-btn {
  min-height: 28px;
  padding: 4px 10px;
  font-size: 12px;
}

.notification-center-toolbar .notification-soft-btn--icon span {
  display: none;
}

.notification-center-toolbar .notification-soft-btn--icon {
  min-width: 28px;
  width: 28px;
  padding: 0;
}

.notification-center-toolbar__actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 5px;
  justify-content: flex-end;
  flex-shrink: 0;
}

.notification-center-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
  flex: 1 1 auto;
}

.notification-stat-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  font-size: 11px;
  border-radius: 999px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: var(--text);
  background: var(--ui-panel-bg);
  border: 1px solid var(--ui-panel-border);
}

.notification-stat-chip--neutral {
  color: var(--text-secondary);
  font-weight: 600;
  background: color-mix(in srgb, var(--ui-panel-bg) 90%, var(--text) 10%);
}

.notification-stat-chip--clear {
  color: #065F46;
  background: #D1FAE5;
  border-color: #6EE7B7;
  font-weight: 700;
}

[data-theme="dark"] .notification-stat-chip--clear {
  color: #ECFDF5;
  background: #047857;
  border-color: #6EE7B7;
}

.notification-stat-chip--unread {
  color: var(--notif-unread-text);
  background: var(--notif-unread-bg);
  border-color: var(--notif-unread-border);
  box-shadow: 0 1px 0 color-mix(in srgb, #000 8%, transparent);
}

.notification-stat-chip--critical {
  color: var(--notif-critical-text);
  background: var(--notif-critical-bg);
  border-color: var(--notif-critical-border);
}

.notification-stat-chip--warning {
  color: var(--notif-warning-text);
  background: var(--notif-warning-bg);
  border-color: var(--notif-warning-border);
}

.notification-soft-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--ui-panel-border);
  background: var(--ui-panel-bg);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.notification-soft-btn::after {
  content: none !important;
}

.notification-soft-btn:hover,
.notification-soft-btn:focus-visible {
  border-color: color-mix(in srgb, var(--primary) 35%, var(--ui-panel-border));
  background: color-mix(in srgb, var(--primary) 6%, var(--ui-panel-bg));
}

.notification-soft-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.notification-soft-btn--primary {
  color: #fff;
  border-color: color-mix(in srgb, var(--primary) 80%, #000 20%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 92%, #fff 8%), var(--primary));
}

.notification-soft-btn--primary:hover,
.notification-soft-btn--primary:focus-visible {
  color: #fff;
  border-color: var(--primary);
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 88%, #fff 12%), color-mix(in srgb, var(--primary) 92%, #000 8%));
}

.notification-soft-btn--icon {
  gap: 6px;
}

.notification-soft-btn--icon svg {
  flex-shrink: 0;
}

#notification-center-preferences-view .notification-preferences-panel {
  padding-top: 2px;
}

.notification-preferences-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.notification-preferences-panel .notification-preferences-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.notification-preferences-callout {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--notif-unread-border, #60A5FA) 35%, var(--ui-panel-border));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--notif-unread-bg, #DBEAFE) 28%, var(--ui-panel-bg));
}

.notification-preferences-callout__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 999px;
  color: var(--notif-unread-text, #003B63);
  background: color-mix(in srgb, var(--notif-unread-bg, #DBEAFE) 70%, var(--ui-panel-bg));
  border: 1px solid color-mix(in srgb, var(--notif-unread-border, #60A5FA) 45%, transparent);
}

.notification-preferences-callout__text {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
}

[data-theme="dark"] .notification-preferences-callout__text {
  color: color-mix(in srgb, var(--text) 92%, #fff 8%);
}

.notification-preferences-section {
  border: 1px solid var(--ui-panel-border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--ui-panel-bg) 94%, var(--surface-elevated, #fff) 6%);
  overflow: hidden;
}

[data-theme="dark"] .notification-preferences-section {
  background: color-mix(in srgb, var(--ui-panel-bg) 82%, #1e293b 18%);
}

.notification-preferences-section--compact {
  padding: 0;
}

.notification-preferences-section__title {
  margin: 0;
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--ui-panel-bg) 80%, var(--text) 20%);
  border-bottom: 1px solid var(--ui-panel-border);
}

.notification-preferences-section__body {
  padding: 14px;
}

.notification-preferences-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 14px;
}

.notification-preferences-field {
  margin-bottom: 0;
}

.notification-preferences-field label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.notification-preferences-control {
  min-height: 38px;
  font-size: 13px;
  color: var(--text);
  background: var(--ui-panel-bg);
  border-color: var(--ui-panel-border);
}

.notification-preferences-control:focus {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--ui-panel-border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent);
}

.notification-preferences-field-hint {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ui-muted-readable);
}

[data-theme="dark"] .notification-preferences-field-hint {
  color: color-mix(in srgb, var(--text) 70%, #94a3b8 30%);
}

.notification-preferences-types {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.notification-preferences-type-tile {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--ui-panel-border);
  border-radius: var(--radius-sm);
  background: var(--ui-panel-bg);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.notification-preferences-type-tile:hover {
  border-color: color-mix(in srgb, var(--primary) 30%, var(--ui-panel-border));
  background: color-mix(in srgb, var(--primary) 4%, var(--ui-panel-bg));
}

.notification-preferences-type-tile__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.notification-preferences-type-tile__label {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
  padding-left: 28px;
  position: relative;
}

.notification-preferences-type-tile__label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1.5px solid var(--ui-panel-border);
  background: var(--ui-panel-bg);
  box-sizing: border-box;
}

.notification-preferences-type-tile__input:checked + .notification-preferences-type-tile__label::before {
  border-color: var(--primary);
  background: var(--primary);
  box-shadow: inset 0 0 0 2px var(--ui-panel-bg);
}

.notification-preferences-type-tile__input:checked + .notification-preferences-type-tile__label::after {
  content: '';
  position: absolute;
  left: 7px;
  top: 50%;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: translateY(calc(-50% - 1px)) rotate(45deg);
}

.notification-preferences-type-tile__input:checked + .notification-preferences-type-tile__label {
  color: var(--text);
}

.notification-preferences-type-tile__input:focus-visible + .notification-preferences-type-tile__label::before {
  outline: 2px solid color-mix(in srgb, var(--primary) 45%, transparent);
  outline-offset: 2px;
}

.notification-preferences-type-tile:has(.notification-preferences-type-tile__input:checked) {
  border-color: color-mix(in srgb, var(--primary) 40%, var(--ui-panel-border));
  background: color-mix(in srgb, var(--primary) 8%, var(--ui-panel-bg));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 10%, transparent);
}

.notification-preferences-type-tile--dot { border-left: 3px solid #3B82F6; }
.notification-preferences-type-tile--tire { border-left: 3px solid #10B981; }
.notification-preferences-type-tile--brake { border-left: 3px solid #F97316; }
.notification-preferences-type-tile--condition { border-left: 3px solid #DC2626; }
.notification-preferences-type-tile--work-order { border-left: 3px solid #8B5CF6; }
.notification-preferences-type-tile--yard-dwell { border-left: 3px solid #14B8A6; }
.notification-preferences-type-tile--inventory { border-left: 3px solid #EAB308; }
.notification-preferences-type-tile--gate { border-left: 3px solid #6366F1; }
.notification-preferences-type-tile--trailer-quote { border-left: 3px solid #0D9488; }

.notification-preferences-attention {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 14px;
  cursor: pointer;
}

.notification-preferences-attention__input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--primary);
}

.notification-preferences-attention__content {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.notification-preferences-attention__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.35;
}

.notification-preferences-attention__hint {
  font-size: 12px;
  line-height: 1.45;
  color: var(--ui-muted-readable);
}

[data-theme="dark"] .notification-preferences-attention__hint {
  color: color-mix(in srgb, var(--text) 68%, #94a3b8 32%);
}

.notification-preferences-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--ui-panel-border);
  flex-shrink: 0;
}

.notification-preferences-footer__actions {
  display: flex;
  gap: 8px;
}

.notification-soft-btn--ghost {
  border-color: transparent;
  background: transparent;
  color: var(--text-secondary);
  padding-left: 0;
}

.notification-soft-btn--ghost:hover,
.notification-soft-btn--ghost:focus-visible {
  color: var(--text);
  background: color-mix(in srgb, var(--text) 6%, transparent);
  border-color: transparent;
}

.notification-soft-btn--secondary {
  color: var(--text);
  background: var(--ui-panel-bg);
}

.profile-modal-section--notifications {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--ui-panel-border);
}

.profile-modal-section--notifications .notification-preferences-form {
  gap: 12px;
}

.profile-modal-section--notifications .notification-preferences-callout {
  margin-bottom: 2px;
}

.notification-center-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 36px 20px;
  text-align: center;
  border: 1px dashed color-mix(in srgb, var(--ui-panel-border) 88%, var(--primary) 12%);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--ui-panel-bg) 94%, transparent);
}

.notification-center-empty__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  margin-bottom: 4px;
}

.notification-center-empty__title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.notification-center-empty__hint {
  margin: 0;
  max-width: 34ch;
  font-size: 13px;
  line-height: 1.45;
}

.notification-center-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.notification-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px 16px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--ui-panel-border);
  border-radius: var(--radius);
  background: var(--ui-panel-bg);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--ui-panel-border) 65%, transparent);
  transition: opacity 0.22s ease, transform 0.22s ease, max-height 0.22s ease, margin 0.22s ease, padding 0.22s ease;
}

.notification-item--dismissing {
  opacity: 0;
  transform: translateX(10px);
  pointer-events: none;
}

.notification-item--unread {
  border-color: color-mix(in srgb, var(--notif-unread-border, #60A5FA) 45%, var(--ui-panel-border));
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--notif-unread-bg, #DBEAFE) 22%, var(--ui-panel-bg)),
    var(--ui-panel-bg)
  );
  box-shadow: 0 1px 0 color-mix(in srgb, var(--ui-panel-border) 70%, transparent);
}

.notification-item--unread.notification-item--info {
  box-shadow:
    inset 3px 0 0 var(--notif-unread-border, #60A5FA),
    0 1px 0 color-mix(in srgb, var(--ui-panel-border) 70%, transparent);
}

[data-theme="dark"] .notification-item--unread {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--notif-unread-bg) 35%, var(--ui-panel-bg)),
    var(--ui-panel-bg)
  );
}

.notification-item--critical {
  border-left: 4px solid #DC2626;
}

.notification-item--warning {
  border-left: 4px solid #D97706;
}

.notification-item--info {
  border-left: 4px solid var(--primary);
}

.notification-item__main {
  min-width: 0;
}

.notification-item__head {
  margin-bottom: 8px;
}

.notification-item__labels {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.notification-type-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1px solid transparent;
}

.notification-type-badge--critical {
  color: #991B1B;
  background: color-mix(in srgb, #DC2626 12%, transparent);
  border-color: color-mix(in srgb, #DC2626 24%, transparent);
}

.notification-type-badge--warning {
  color: #92400E;
  background: color-mix(in srgb, #D97706 12%, transparent);
  border-color: color-mix(in srgb, #D97706 24%, transparent);
}

.notification-type-badge--info {
  color: var(--primary-dark);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  border-color: color-mix(in srgb, var(--primary) 24%, transparent);
}

.notification-type-badge--dot { color: #1D4ED8; background: color-mix(in srgb, #3B82F6 12%, transparent); border-color: color-mix(in srgb, #3B82F6 22%, transparent); }
.notification-type-badge--b-service { color: #5B21B6; background: color-mix(in srgb, #8B5CF6 12%, transparent); border-color: color-mix(in srgb, #8B5CF6 22%, transparent); }
.notification-type-badge--tire { color: #047857; background: color-mix(in srgb, #10B981 12%, transparent); border-color: color-mix(in srgb, #10B981 22%, transparent); }
.notification-type-badge--brake { color: #7C2D12; background: color-mix(in srgb, #F97316 12%, transparent); border-color: color-mix(in srgb, #F97316 22%, transparent); }
.notification-type-badge--condition { color: #991B1B; background: color-mix(in srgb, #DC2626 12%, transparent); border-color: color-mix(in srgb, #DC2626 22%, transparent); }
.notification-type-badge--work-order { color: #5B21B6; background: color-mix(in srgb, #8B5CF6 12%, transparent); border-color: color-mix(in srgb, #8B5CF6 22%, transparent); }
.notification-type-badge--yard-dwell { color: #0F766E; background: color-mix(in srgb, #14B8A6 12%, transparent); border-color: color-mix(in srgb, #14B8A6 22%, transparent); }
.notification-type-badge--inventory { color: #854D0E; background: color-mix(in srgb, #EAB308 12%, transparent); border-color: color-mix(in srgb, #EAB308 22%, transparent); }
.notification-type-badge--gate { color: #3730A3; background: color-mix(in srgb, #6366F1 12%, transparent); border-color: color-mix(in srgb, #6366F1 22%, transparent); }
.notification-type-badge--trailer-quote { color: #0F766E; background: color-mix(in srgb, #14B8A6 14%, transparent); border-color: color-mix(in srgb, #0D9488 24%, transparent); }

[data-theme="dark"] .notification-type-badge--critical,
[data-theme="dark"] .notification-type-badge--condition {
  color: #FEE2E2;
  background: color-mix(in srgb, #DC2626 42%, #1e293b 58%);
  border-color: color-mix(in srgb, #FCA5A5 45%, #7F1D1D 55%);
}

[data-theme="dark"] .notification-type-badge--warning {
  color: #FEF3C7;
  background: color-mix(in srgb, #D97706 40%, #1e293b 60%);
  border-color: color-mix(in srgb, #FCD34D 40%, #92400E 60%);
}

[data-theme="dark"] .notification-type-badge--info {
  color: #E0F2FE;
  background: color-mix(in srgb, #0284C7 42%, #1e293b 58%);
  border-color: color-mix(in srgb, #7DD3FC 40%, #0369A1 60%);
}

[data-theme="dark"] .notification-type-badge--dot {
  color: #DBEAFE;
  background: color-mix(in srgb, #2563EB 40%, #1e293b 60%);
  border-color: color-mix(in srgb, #93C5FD 38%, #1D4ED8 62%);
}

[data-theme="dark"] .notification-type-badge--b-service {
  color: #EDE9FE;
  background: color-mix(in srgb, #7C3AED 38%, #1e293b 62%);
  border-color: color-mix(in srgb, #C4B5FD 35%, #5B21B6 65%);
}

[data-theme="dark"] .notification-type-badge--tire {
  color: #D1FAE5;
  background: color-mix(in srgb, #059669 38%, #1e293b 62%);
  border-color: color-mix(in srgb, #6EE7B7 35%, #047857 65%);
}

[data-theme="dark"] .notification-type-badge--brake {
  color: #FFEDD5;
  background: color-mix(in srgb, #EA580C 38%, #1e293b 62%);
  border-color: color-mix(in srgb, #FDBA74 35%, #9A3412 65%);
}

[data-theme="dark"] .notification-type-badge--work-order {
  color: #EDE9FE;
  background: color-mix(in srgb, #7C3AED 38%, #1e293b 62%);
  border-color: color-mix(in srgb, #C4B5FD 35%, #5B21B6 65%);
}

[data-theme="dark"] .notification-type-badge--yard-dwell {
  color: #CCFBF1;
  background: color-mix(in srgb, #0D9488 38%, #1e293b 62%);
  border-color: color-mix(in srgb, #5EEAD4 35%, #115E59 65%);
}

[data-theme="dark"] .notification-type-badge--inventory {
  color: #FEF9C3;
  background: color-mix(in srgb, #CA8A04 38%, #1e293b 62%);
  border-color: color-mix(in srgb, #FDE047 35%, #854D0E 65%);
}

[data-theme="dark"] .notification-type-badge--gate {
  color: #E0E7FF;
  background: color-mix(in srgb, #4F46E5 38%, #1e293b 62%);
  border-color: color-mix(in srgb, #A5B4FC 35%, #3730A3 65%);
}

[data-theme="dark"] .notification-type-badge--trailer-quote {
  color: #CCFBF1;
  background: color-mix(in srgb, #0D9488 38%, #1e293b 62%);
  border-color: color-mix(in srgb, #5EEAD4 35%, #0F766E 65%);
}

.notification-unit-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--text);
  background: color-mix(in srgb, var(--text) 8%, var(--ui-panel-bg));
  border: 1px solid var(--ui-panel-border);
}

.notification-group-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
}

.notification-item--group {
  grid-template-columns: 1fr;
  align-items: stretch;
}

.notification-item__alert-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.notification-alert-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--ui-panel-border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--ui-panel-bg) 96%, var(--surface-elevated, #fff) 4%);
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.notification-alert-line--unread {
  border-color: color-mix(in srgb, var(--notif-unread-border, #60A5FA) 35%, var(--ui-panel-border));
  background: color-mix(in srgb, var(--notif-unread-bg, #DBEAFE) 14%, var(--ui-panel-bg));
}

.notification-alert-line.notification-item--dismissing {
  opacity: 0;
  transform: translateX(8px);
  pointer-events: none;
}

.notification-alert-line__labels {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.notification-alert-line__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.35;
}

.notification-alert-line__message {
  font-size: 12px;
  line-height: 1.45;
  color: var(--ui-muted-readable);
}

.notification-alert-line__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.notification-item__dismiss--icon {
  min-width: 32px;
  width: 32px;
  padding: 0;
  color: var(--text-secondary);
}

.notification-item__dismiss-text {
  display: none;
}

.notification-center-read-section {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--ui-panel-border);
}

.notification-center-read-toggle {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--ui-panel-border);
  background: var(--ui-panel-bg);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.notification-center-read-toggle:hover,
.notification-center-read-toggle:focus-visible {
  color: var(--text);
  border-color: color-mix(in srgb, var(--primary) 30%, var(--ui-panel-border));
  outline: none;
}

.notification-center-read-panel {
  margin-top: 12px;
  opacity: 0.88;
}

.notification-center-empty__reset {
  margin-top: 12px;
}

.notification-undo-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(12px);
  z-index: 10050;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--ui-panel-border);
  background: var(--ui-panel-bg);
  box-shadow: 0 10px 30px color-mix(in srgb, #000 18%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.notification-undo-toast--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.notification-undo-toast__message {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.notification-undo-toast__undo {
  border: 0;
  background: transparent;
  color: var(--primary);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  padding: 4px 6px;
}

.notification-item__new {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--notif-new-text);
  background: var(--notif-new-bg);
  border: 1px solid var(--notif-new-border);
  padding: 3px 8px;
  border-radius: 999px;
  box-shadow: 0 1px 0 color-mix(in srgb, #000 10%, transparent);
}

.notification-item__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
  line-height: 1.35;
}

.notification-item__message {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ui-muted-readable);
}

.notification-item__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  align-self: center;
}

.notification-login-lead {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.5;
}

.notification-login-more {
  margin: 10px 0 0;
  font-size: 13px;
}

@media (max-width: 640px) {
  .notification-prompt-toast {
    left: 16px;
    right: 16px;
    bottom: 16px;
    flex-direction: column;
    align-items: stretch;
  }

  .notification-prompt-toast__actions {
    justify-content: flex-end;
  }

  .notification-center-toolbar__head {
    flex-wrap: wrap;
  }

  .notification-center-toolbar__actions {
    width: 100%;
    justify-content: flex-end;
  }

  .notification-center-toolbar .notification-soft-btn--icon span {
    display: inline;
  }

  .notification-center-toolbar .notification-soft-btn--icon {
    width: auto;
    min-width: 0;
    padding: 4px 10px;
  }

  .notification-center-type-filters {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .notification-center-filter-hint {
    white-space: normal;
  }

  .notification-item {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .notification-item__actions {
    justify-content: flex-start;
  }

  .notification-alert-line {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .notification-alert-line__actions {
    justify-content: flex-start;
  }

  .notification-item__dismiss--icon {
    width: auto;
    min-width: 0;
    padding: 6px 12px;
  }

  .notification-item__dismiss-text {
    display: inline;
  }

  .notification-preferences-row {
    grid-template-columns: 1fr;
  }

  .notification-preferences-types {
    grid-template-columns: 1fr;
  }

  .notification-preferences-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .notification-soft-btn--ghost {
    align-self: flex-start;
    padding-left: 0;
  }

  .notification-preferences-footer__actions {
    justify-content: stretch;
  }

  .notification-preferences-footer__actions .notification-soft-btn {
    flex: 1 1 auto;
  }
}

/* =============================================================================
   Forms
   ============================================================================= */
.form-group { margin-bottom: 18px; }

.form-group label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
}

.form-group small { display: block; margin-top: 4px; }

.form-control {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--ui-inset-border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: inherit;
  background: var(--ui-inset-bg);
  color: var(--text);
  transition: border-color var(--transition), box-shadow var(--transition);
}

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

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

select.form-control {
  cursor: pointer;
  max-width: 100%;
  text-overflow: ellipsis;
}

.custom-select {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

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

.custom-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}

.custom-select-value {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.custom-select-chevron {
  flex: 0 0 auto;
  opacity: 0.55;
  font-size: 12px;
  line-height: 1;
}

.custom-select.is-open {
  z-index: 401;
}

.custom-select-menu {
  position: absolute;
  z-index: 400;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  margin: 0;
  padding: 4px 0;
  list-style: none;
  max-height: min(280px, 50vh);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--ui-panel-bg);
  border: 1px solid var(--ui-panel-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--ui-panel-shadow);
}

.custom-select-option {
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1.3;
  cursor: pointer;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.custom-select-option:hover,
.custom-select-option:focus-visible {
  background: var(--ui-table-hover);
}

.custom-select-option.is-selected {
  background: var(--csg-blue-pale);
  color: var(--primary-dark);
  font-weight: 600;
}

[data-theme="dark"] .custom-select-option.is-selected {
  background: rgba(0, 145, 234, 0.22);
  color: var(--csg-blue-light);
}

.toolbar-left .custom-select,
.form-group .custom-select,
.billing-filter-field .custom-select,
.support-section-toolbar .custom-select,
.dashboard-select-wrap .custom-select {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
}
textarea.form-control { min-height: 88px; resize: vertical; }

.misc-features-dropdown {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.misc-features-dropdown > summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 14px;
  font-size: 14px;
  color: var(--text);
  user-select: none;
}

.misc-features-dropdown > summary::-webkit-details-marker {
  display: none;
}

.misc-features-dropdown > summary::after {
  content: '▾';
  float: right;
  color: var(--text-muted);
}

.misc-features-dropdown[open] > summary::after {
  content: '▴';
}

.misc-features-dropdown > summary:hover {
  background: var(--bg-subtle);
}

.misc-features-panel {
  border-top: 1px solid var(--border);
  max-height: 240px;
  overflow-y: auto;
  padding: 8px 0;
}

.misc-features-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}

.misc-features-option:hover {
  background: var(--csg-blue-pale);
}

.misc-features-option input {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  cursor: pointer;
}

/* =============================================================================
   Buttons
   ============================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 18px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all var(--transition);
  white-space: nowrap;
}

.btn-primary {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary-dark);
  box-shadow: var(--shadow-blue);
}
.btn-primary:hover {
  background: var(--primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 114, 188, 0.35);
}

.btn-edit {
  background: #F59E0B;
  color: #fff;
  border-color: #D97706;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.28);
}
.btn-edit:hover,
.btn-edit:focus-visible {
  background: #D97706;
  border-color: #B45309;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(217, 119, 6, 0.38);
  font-weight: 700;
}

.btn-success {
  background: var(--success);
  color: #fff;
}
.btn-success:hover { background: var(--success-dark); transform: translateY(-1px); }

.btn-danger {
  background: var(--danger);
  color: #fff;
  border-color: #DC2626;
}
.btn-danger:hover {
  background: #B91C1C;
  border-color: #991B1B;
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}
.btn-secondary:hover { background: var(--bg); border-color: var(--text-muted); }

.btn-sm { padding: 5px 12px; font-size: 12px; }
.btn-lg { width: 100%; padding: 12px 18px; font-size: 15px; margin-top: 4px; }

.btn-trailer {
  background: var(--primary);
  color: #fff;
  border: none;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition);
}

.yard-trailer-actions {
  display: inline-flex;
  align-items: stretch;
  vertical-align: middle;
  position: relative;
}

.btn-trailer-unit {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  padding: 7px 14px;
  display: inline-flex;
  align-items: center;
}

.yard-trailer-menu-wrap {
  position: static;
  display: inline-flex;
}

.btn-trailer-menu {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 7px 10px;
  border-left: 1px solid rgba(255, 255, 255, 0.25);
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.btn-trailer:hover,
.btn-trailer-menu:hover {
  background: var(--primary-dark);
}

.yard-trailer-actions:hover .btn-trailer {
  background: var(--primary-dark);
  transform: translateY(-1px);
  box-shadow: var(--shadow-blue);
}

.yard-trailer-menu {
  display: none;
}

.yard-trailer-menu:not([hidden]) {
  display: block;
}

.yard-trailer-menu-wrap.is-open .btn-trailer-menu {
  background: var(--primary-dark);
}

.yard-trailer-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  border: none;
  background: transparent;
  text-align: left;
  font-size: 13px;
  font-family: inherit;
  color: var(--text, #1f2937);
  cursor: pointer;
}

.yard-trailer-menu-icon {
  flex: 0 0 18px;
  width: 18px;
  text-align: center;
  font-size: 14px;
  line-height: 1;
}

.yard-trailer-menu-label {
  flex: 1;
  text-align: left;
  line-height: 1.3;
}

.yard-trailer-menu-item:hover,
.yard-trailer-menu-item:focus-visible {
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  outline: none;
}

.yard-trailer-menu-item:focus-visible {
  box-shadow: 0 0 0 2px var(--ui-focus-ring);
}

.yard-trailer-menu-item--danger {
  color: #b91c1c;
}

.yard-trailer-menu-item--danger:hover {
  background: #fef2f2;
}

.yard-trailer-menu-divider {
  height: 1px;
  margin: 4px 0;
  background: var(--border);
}

.yard-trailer-menu-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.yard-trailer-menu-hint {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  line-height: 1.25;
}

.yard-trailer-menu-item--transfer-now {
  border-left: 3px solid #0d9488;
}

.yard-trailer-menu-item--transfer-now .yard-trailer-menu-icon {
  color: #0d9488;
}

.yard-trailer-menu-item--transfer-now:hover {
  background: color-mix(in srgb, #0d9488 8%, var(--csg-blue-pale, #eff6ff));
}

.yard-trailer-menu-item--schedule-transfer {
  border-left: 3px solid #7c3aed;
}

.yard-trailer-menu-item--schedule-transfer .yard-trailer-menu-icon {
  color: #7c3aed;
}

.yard-trailer-menu-item--schedule-transfer:hover {
  background: color-mix(in srgb, #7c3aed 8%, var(--csg-blue-pale, #eff6ff));
}

/* Shared move / add control — same size and grid slot in yard rows */
.yard-slot-action {
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border-radius: 8px;
}

/* Move glyph — CSS shapes stay crisp at small sizes (SVG bars were aliasing) */
.yard-move-glyph {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5px;
  width: 11px;
  color: inherit;
  pointer-events: none;
}

.yard-move-glyph__arrow {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
}

.yard-move-glyph__arrow--up {
  border-bottom: 4px solid currentColor;
}

.yard-move-glyph__arrow--down {
  border-top: 4px solid currentColor;
}

.yard-move-glyph__bars {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5px;
  width: 100%;
}

.yard-move-glyph__bars span {
  display: block;
  width: 10px;
  height: 1.5px;
  background: currentColor;
  border-radius: 0;
}

.btn-add-spot {
  border: 2px dashed var(--border);
  background: var(--bg-subtle);
  cursor: pointer;
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  color: var(--text-muted);
  transition: all var(--transition);
}

.btn-add-spot:hover {
  background: var(--csg-blue-pale);
  border-color: var(--primary);
  border-style: solid;
  color: var(--primary);
}

/* =============================================================================
   Tables
   ============================================================================= */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--ui-panel-border);
  border-radius: var(--radius);
  background: var(--ui-panel-bg);
  box-shadow: var(--ui-panel-shadow);
}

.table-wrap:has(.yard-table) {
  overflow: visible;
}

table.yard-table,
table.yard-table tbody,
table.yard-table tr,
table.yard-table td {
  overflow: visible;
}

table.yard-table th {
  padding: 6px 10px;
}

table.data-table.yard-table td,
table.data-table.yard-table th {
  padding: 6px 10px;
}

table.data-table.yard-table td.yard-col-unit {
  min-width: 280px;
}

table.data-table.yard-table td {
  vertical-align: top;
}

table.data-table.yard-table td.spot-label {
  vertical-align: middle;
  text-align: center;
  padding-left: 8px;
  padding-right: 8px;
}

table.data-table.yard-table td.yard-col-unit,
table.data-table.yard-table td.yard-col-empty {
  padding-left: 10px;
}

.yard-row-group {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex-wrap: wrap;
}

.yard-row-group__label {
  font-weight: 700;
  letter-spacing: 0.01em;
}

.yard-row-group__meta {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

.yard-view-intro {
  margin: 0 0 12px;
  padding: 0 18px 0 20px;
  font-size: 13px;
}

.yard-row-group-header--unassigned .yard-row-group__label {
  color: var(--primary);
}

.spot-label--overflow {
  vertical-align: middle;
}

/* Reads like a spot code (A1, B2) — not a separate pill control */
.yard-spot-overflow-code {
  display: inline-block;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0.04em;
  color: var(--primary-dark);
  text-decoration: none;
  cursor: help;
  border-bottom: 1px dashed color-mix(in srgb, var(--primary) 45%, transparent);
}

[data-theme="dark"] .yard-spot-overflow-code {
  color: color-mix(in srgb, var(--primary) 82%, #fff);
  border-bottom-color: color-mix(in srgb, var(--primary) 55%, transparent);
}

.spot-label--overflow-drop {
  background: transparent !important;
}

.yard-spot-overflow-drop-mark {
  display: block;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  color: color-mix(in srgb, var(--text-muted) 88%, var(--primary));
  opacity: 0.65;
}

.yard-spot-overflow-drop-mark::before {
  content: "·";
}

.yard-unassigned-drop-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.yard-unassigned-drop-hint {
  font-size: 12px;
}

table.data-table.yard-table tbody tr.yard-table-spot-row--unassigned {
  background: color-mix(in srgb, var(--primary) 4%, var(--ui-panel-bg));
}

table.data-table.yard-table tbody tr.yard-unassigned-drop {
  background: color-mix(in srgb, var(--primary) 6%, var(--ui-panel-bg));
}

/* Yard check — alternate spot rows on desktop table only */
@media (min-width: 1025px) {
  table.data-table.yard-table tbody tr.yard-table-spot-row {
    background: var(--ui-panel-bg);
    transition: background 0.15s ease;
  }

  table.data-table.yard-table tbody tr.yard-table-spot-row--stripe {
    background: var(--ui-table-stripe);
  }

  table.data-table.yard-table tbody tr.yard-table-spot-row:hover {
    background: var(--ui-table-hover);
  }

  table.data-table.yard-table tbody tr.row-group-header {
    background: var(--ui-section-bg);
  }

  table.data-table.yard-table tbody tr.row-group-header:hover {
    background: var(--ui-section-bg);
  }

  table.data-table.yard-table .row-group-header td {
    padding: 10px 16px 10px 20px !important;
  }

  table.data-table.yard-table .row-group-header:not(:first-child) td {
    border-top: 2px solid var(--ui-panel-border) !important;
  }

  table.data-table.yard-table tbody tr.yard-table-spot-row:has(+ .row-group-header) td {
    border-bottom: 2px solid var(--ui-panel-border);
  }

  table.data-table.yard-table td.spot-label {
    width: 50px;
    min-width: 50px;
    max-width: 50px;
    padding-left: 6px;
    padding-right: 6px;
    background: color-mix(in srgb, var(--ui-table-header-bg) 88%, transparent);
  }

  table.data-table.yard-table td.spot-label--overflow:not(.spot-label--overflow-drop) {
    width: 50px;
    min-width: 50px;
    max-width: 50px;
  }

  table.data-table.yard-table tbody tr.yard-table-spot-row--stripe td.spot-label {
    background: color-mix(in srgb, var(--ui-table-stripe) 55%, var(--ui-table-header-bg));
  }

  table.data-table.yard-table td.yard-col-unit,
  table.data-table.yard-table td.yard-col-empty {
    padding-left: 14px;
  }
}

table.data-table {
  width: 100%;
  min-width: max-content;
  border-collapse: collapse;
}

table.data-table.yard-table {
  width: 100%;
  min-width: 0;
  table-layout: auto;
}

table.data-table th {
  background: var(--ui-table-header-bg);
  padding: 12px 16px;
  text-align: left;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ui-table-header-text);
  border-bottom: 1px solid var(--ui-panel-border);
  white-space: nowrap;
}

table.data-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--ui-table-cell-border);
  vertical-align: top;
  color: var(--text);
}

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

table.data-table tbody tr {
  background-color: var(--ui-panel-bg);
}

table.data-table tbody tr:nth-child(even) {
  background-color: var(--ui-table-stripe);
}

table.data-table tbody tr:hover {
  background-color: var(--ui-table-hover);
}

/* Cell inherits row band so stripes/hover span full horizontal scroll width */
table.data-table tbody tr td {
  background-color: inherit;
}

.table-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 10px 14px;
  border-top: 1px solid var(--ui-table-cell-border);
  background: var(--ui-panel-bg);
}

.table-pagination-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  min-width: 0;
}

.table-pagination-page-size {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.table-pagination-page-size__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}

.table-pagination-page-size__select {
  width: auto;
  min-width: 72px;
  height: 32px;
  padding: 4px 28px 4px 10px;
  font-size: 12px;
}

.table-pagination-summary {
  font-size: 12px;
  color: var(--text-muted);
}

.table-pagination-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.table-pagination-btn--active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.table-pagination-btn--active:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  color: #fff;
}

.table-pagination-ellipsis {
  color: var(--text-muted);
  padding: 0 2px;
  font-size: 12px;
  line-height: 1;
}

.trailer-detail-page .table-pagination {
  border-top-color: var(--trailer-detail-panel-border);
  background: var(--trailer-detail-panel-bg);
}

@media (max-width: 640px) {
  .table-pagination {
    flex-direction: column;
    align-items: stretch;
  }

  .table-pagination-meta {
    flex-direction: column;
    align-items: stretch;
  }

  .table-pagination-page-size {
    justify-content: space-between;
  }

  .table-pagination-controls {
    justify-content: center;
  }
}

.spot-label {
  font-weight: 700;
  color: var(--primary-dark);
  min-width: 50px;
  font-size: 13px;
}

.yard-drag-handle {
  border: 1px solid var(--border);
  background: linear-gradient(180deg, #fff 0%, var(--bg-subtle) 100%);
  color: var(--text-muted);
  cursor: grab;
  user-select: none;
  touch-action: none;
  align-self: center;
  vertical-align: middle;
  -webkit-user-drag: none;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.15s ease;
}


.yard-drag-handle:hover {
  background: var(--csg-blue-pale);
  border-color: rgba(0, 114, 188, 0.35);
  color: var(--primary);
  box-shadow: 0 2px 6px rgba(0, 114, 188, 0.12);
}

.yard-drag-handle:active,
tr.yard-dragging .yard-drag-handle {
  cursor: grabbing;
  background: var(--primary);
  border-color: var(--primary-dark);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 90, 148, 0.28);
  transform: scale(0.96);
}

tr.yard-dragging {
  opacity: 0.55;
}

tr.yard-drop-zone.yard-drop-over {
  background: var(--csg-blue-pale) !important;
  outline: 2px dashed var(--primary);
  outline-offset: -2px;
}

body.yard-touch-dragging {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

@media (max-width: 1024px), (hover: none), (any-pointer: coarse) {
  .yard-drag-handle {
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.08);
  }

  table.yard-table .trailer-cell {
    grid-template-columns: 32px minmax(0, 1fr);
    column-gap: 22px;
  }
}

[data-theme="dark"] .yard-drag-handle {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
  border-color: rgba(148, 163, 184, 0.28);
  color: #94A3B8;
  box-shadow: none;
}

[data-theme="dark"] .yard-drag-handle:hover {
  background: rgba(59, 130, 246, 0.16);
  border-color: rgba(96, 165, 250, 0.45);
  color: #BFDBFE;
}

[data-theme="dark"] .yard-drag-handle:active,
[data-theme="dark"] tr.yard-dragging .yard-drag-handle {
  background: var(--primary);
  border-color: #60A5FA;
  color: #fff;
}

.yard-drag-handle:focus {
  outline: none;
}

.yard-drag-handle:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

tr.yard-drop-zone.yard-drop-over .btn-add-spot {
  border-color: var(--primary);
  border-style: solid;
  background: #fff;
  color: var(--primary);
}

/* =============================================================================
   Status badges
   ============================================================================= */
.badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.badge-R, .badge-READY { background: #D1FAE5; color: #065F46; }
.badge-RoL, .badge-READY-ON-LEASE { background: #DBEAFE; color: #1E40AF; }
.badge-PoL, .badge-PENDING-LEASE { background: #E0E7FF; color: #4338CA; }
.badge-OoS, .badge-OUT-OF-SERVICE { background: #FEE2E2; color: #991B1B; }
.badge-PARTS, .badge-PT { background: #FEF3C7; color: #92400E; }
.badge-FoL, .badge-FIX-ON-LEASE { background: #FFEDD5; color: #9A3412; }
.badge-SELL, .badge-SL { background: #EDE9FE; color: #5B21B6; }
.badge-SCRAP, .badge-ST { background: #F3F4F6; color: #374151; }
.badge-Empty, .badge-EMPTY, .badge-EMP { background: #F3F4F6; color: #6B7280; }
.badge-Loaded, .badge-LOADED, .badge-LD { background: #D1FAE5; color: #047857; }
.badge-Unknown, .badge-UNKNOWN { background: #FEF3C7; color: #92400E; }
.badge-offyard { background: #F3F4F6; color: #6B7280; }
.badge-gate-scheduled { background: #FEF3C7; color: #92400E; }
.badge-gate-cancelled { background: #FEE2E2; color: #991B1B; }
.badge-NA { background: #E5E7EB; color: #4B5563; }

.badge-WO-Open { background: #DBEAFE; color: #1E40AF; }
.badge-WO-InProgress { background: #FEF3C7; color: #92400E; }
.badge-WO-OnHold { background: #EDE9FE; color: #5B21B6; }
.badge-WO-Complete { background: #D1FAE5; color: #065F46; }
.badge-WO-Cancelled { background: #F3F4F6; color: #6B7280; }
.badge-WO-priority-Low { background: #F3F4F6; color: #6B7280; }
.badge-WO-priority-Normal { background: #E0F2FE; color: #0369A1; }
.badge-WO-priority-High { background: #FFEDD5; color: #9A3412; }
.badge-WO-priority-Urgent { background: #FEE2E2; color: #991B1B; }

.badge-tire-New,
.badge-brake-New { background: #D1FAE5; color: #065F46; }
.badge-tire-Good,
.badge-brake-Good { background: #DCFCE7; color: #166534; }
.badge-tire-Worn,
.badge-brake-Worn { background: #FEF3C7; color: #92400E; }
.badge-tire-NeedsReplacement,
.badge-brake-NeedsReplacement { background: #FEE2E2; color: #991B1B; }
.badge-tire-Unknown,
.badge-brake-Unknown { background: #F3F4F6; color: #6B7280; }

.badge-unit-type {
  background: #E0E7FF;
  color: #3730A3;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.badge-unit-type--container {
  background: #F3E8FF;
  color: #6B21A8;
}

[data-theme="dark"] .badge-R,
[data-theme="dark"] .badge-READY,
[data-theme="dark"] .badge-Loaded,
[data-theme="dark"] .badge-LOADED,
[data-theme="dark"] .badge-LD,
[data-theme="dark"] .badge-WO-Complete,
[data-theme="dark"] .badge-tire-New,
[data-theme="dark"] .badge-tire-Good,
[data-theme="dark"] .badge-brake-New,
[data-theme="dark"] .badge-brake-Good {
  background: var(--trailer-record-pill-success-bg);
  color: var(--trailer-record-pill-success-text);
}

[data-theme="dark"] .badge-unit-type {
  background: color-mix(in srgb, #6366F1 18%, transparent);
  color: #C7D2FE;
}
[data-theme="dark"] .badge-unit-type--container {
  background: color-mix(in srgb, #A855F7 18%, transparent);
  color: #E9D5FF;
}

[data-theme="dark"] .badge-RoL,
[data-theme="dark"] .badge-READY-ON-LEASE,
[data-theme="dark"] .badge-PoL,
[data-theme="dark"] .badge-PENDING-LEASE,
[data-theme="dark"] .badge-WO-Open,
[data-theme="dark"] .badge-WO-priority-Normal {
  background: var(--trailer-record-pill-info-bg);
  color: var(--trailer-record-pill-info-text);
}

[data-theme="dark"] .badge-PARTS,
[data-theme="dark"] .badge-PT,
[data-theme="dark"] .badge-Unknown,
[data-theme="dark"] .badge-UNKNOWN,
[data-theme="dark"] .badge-FoL,
[data-theme="dark"] .badge-FIX-ON-LEASE,
[data-theme="dark"] .badge-WO-InProgress,
[data-theme="dark"] .badge-WO-priority-High,
[data-theme="dark"] .badge-tire-Worn,
[data-theme="dark"] .badge-brake-Worn {
  background: var(--trailer-record-pill-warning-bg);
  color: var(--trailer-record-pill-warning-text);
}

[data-theme="dark"] .badge-OoS,
[data-theme="dark"] .badge-OUT-OF-SERVICE,
[data-theme="dark"] .badge-WO-priority-Urgent,
[data-theme="dark"] .badge-tire-NeedsReplacement,
[data-theme="dark"] .badge-brake-NeedsReplacement {
  background: var(--trailer-record-pill-danger-bg);
  color: var(--trailer-record-pill-danger-text);
}

[data-theme="dark"] .badge-SELL,
[data-theme="dark"] .badge-SL,
[data-theme="dark"] .badge-WO-OnHold {
  background: var(--trailer-record-pill-purple-bg);
  color: var(--trailer-record-pill-purple-text);
}

[data-theme="dark"] .badge-SCRAP,
[data-theme="dark"] .badge-ST,
[data-theme="dark"] .badge-Empty,
[data-theme="dark"] .badge-EMPTY,
[data-theme="dark"] .badge-EMP,
[data-theme="dark"] .badge-offyard,
[data-theme="dark"] .badge-NA,
[data-theme="dark"] .badge-WO-Cancelled,
[data-theme="dark"] .badge-WO-priority-Low,
[data-theme="dark"] .badge-tire-Unknown,
[data-theme="dark"] .badge-brake-Unknown {
  background: var(--trailer-record-pill-neutral-bg);
  color: var(--trailer-record-pill-neutral-text);
}

.btn-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--primary);
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  font-size: inherit;
}

.btn-link:hover { color: var(--primary-dark); }

/* =============================================================================
   Module stat summary cards — inventory, billing, work orders
   ============================================================================= */
.module-stats-grid {
  gap: 12px;
}

.module-stats-grid--3 {
  grid-template-columns: repeat(3, 1fr) !important;
}

.module-stats-grid--4 {
  grid-template-columns: repeat(4, 1fr) !important;
}

.module-stats-grid .site-card {
  padding: 16px 14px;
  text-align: center;
}

.module-stats-grid .site-card h3 {
  font-size: 28px;
  font-weight: 800;
  margin-bottom: 6px;
  line-height: 1;
  letter-spacing: -0.02em;
}

.module-stats-grid .site-card .meta {
  justify-content: center;
  font-size: 12px;
  line-height: 1.35;
  text-wrap: balance;
}

.module-stats-grid .site-card .meta::before {
  display: none;
}

.wo-detail-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.work-order-detail-page .section-title:has(+ .wo-detail-panel--summary) {
  margin-top: 20px;
}

.work-order-detail-page .wo-detail-panel-body {
  padding: 14px;
  border-top: 1px solid var(--trailer-detail-panel-border);
}

.work-order-detail-page .trailer-detail-panel--unit .wo-detail-timeline {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  line-height: 1.4;
}

.work-order-detail-page .wo-detail-trailer-ref {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: var(--trailer-detail-location-bg);
  border: 1px solid var(--trailer-detail-location-border);
  color: var(--trailer-detail-location-text);
}

.work-order-detail-page .wo-detail-grid {
  gap: 14px;
}

.work-order-detail-page .spec-item--multiline {
  background: var(--trailer-detail-notes-filled-bg, #EFF6FF);
  border-color: var(--trailer-detail-notes-filled-border, var(--csg-blue-muted));
}

.work-order-detail-page .spec-item--multiline .label {
  color: var(--primary-dark);
}

.work-order-detail-page .wo-detail-value--multiline {
  white-space: pre-wrap;
  line-height: 1.55;
  font-weight: 500;
  color: var(--text);
}

.work-order-detail-page .section-title:has(+ .wo-history-panel) {
  margin-bottom: 0;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  border-top: 1px solid var(--trailer-detail-panel-border);
  border-right: 1px solid var(--trailer-detail-panel-border);
}

.work-order-detail-page .section-title + .wo-history-panel {
  margin-top: 0;
  background: var(--trailer-detail-panel-bg);
  border: 1px solid var(--trailer-detail-panel-border);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow-md);
  padding: 16px 18px 18px;
}

.work-order-detail-page .wo-history-list {
  max-height: none;
  gap: 10px;
}

.work-order-detail-page .wo-history-item {
  padding: 14px 16px;
  background: var(--trailer-detail-card-bg);
  border-color: var(--trailer-detail-card-border);
  border-left-width: 4px;
  border-left-color: var(--primary);
}

.work-order-detail-page .wo-history-action {
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: -0.01em;
}

.work-order-detail-page .wo-history-time {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
}

.work-order-detail-page .wo-history-user {
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-secondary);
}

.work-order-detail-page .wo-history-user strong {
  color: var(--trailer-detail-location-text);
  font-weight: 600;
}

.work-order-detail-page .wo-history-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}

.work-order-detail-page .wo-history-status-arrow {
  color: var(--primary);
  font-weight: 700;
}

.work-order-detail-page .wo-history-notes {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--primary) 6%, var(--trailer-detail-card-bg));
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--trailer-detail-card-border));
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
}

.work-order-detail-page .wo-history-empty {
  margin: 0;
  color: var(--text-secondary);
  font-size: 13px;
  font-style: italic;
}

.wo-detail-value {
  font-weight: 600;
  color: var(--text);
  font-size: 15px;
}

.wo-detail-description {
  white-space: pre-wrap;
  font-weight: 500;
  line-height: 1.5;
}

.wo-history-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 280px;
  overflow-y: auto;
}

.wo-history-item {
  padding: 12px 14px;
  background: var(--ui-card-bg);
  border: 1px solid var(--ui-card-border);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--primary);
}

.wo-history-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

.wo-history-notes {
  margin-top: 6px;
  color: var(--text-secondary);
  white-space: pre-wrap;
}

[data-theme="dark"] .work-order-detail-page .spec-item--multiline {
  background: rgba(0, 145, 234, 0.08);
  border-color: rgba(0, 145, 234, 0.22);
}

[data-theme="dark"] .work-order-detail-page .wo-history-notes {
  background: rgba(0, 145, 234, 0.1);
  border-color: rgba(0, 145, 234, 0.2);
  color: #E2E8F0;
}

[data-theme="dark"] .work-order-detail-page .section-title + .wo-history-panel,
[data-theme="dark"] .work-order-detail-page .wo-detail-panel--summary {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(148, 163, 184, 0.08);
}

.wo-cell-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wo-cell-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  border: none;
  background: transparent;
  padding: 4px 6px;
  margin: -4px -6px;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: inherit;
  width: calc(100% + 12px);
}

.wo-cell-item:hover {
  background: var(--ui-table-hover);
}

.wo-cell-item:hover .wo-cell-number {
  text-decoration: underline;
}

.wo-cell-number {
  font-weight: 700;
  color: var(--primary-dark);
}

.wo-cell-title {
  color: var(--text-secondary);
}

/* Yard check — compact work order stack (matches row pills, not panel cards) */
table.data-table.yard-table td.yard-col-wo {
  overflow: visible;
  padding-bottom: 8px;
  vertical-align: top;
}

.yard-wo-stack {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  padding: 1px 0;
}

.yard-wo-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  width: 100%;
  margin: 0;
  padding: 5px 8px 5px 9px;
  border: none;
  border-left: 3px solid color-mix(in srgb, var(--primary) 70%, transparent);
  border-radius: 0 8px 8px 0;
  background: color-mix(in srgb, var(--ui-table-hover) 55%, transparent);
  color: var(--text);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  position: relative;
  z-index: 0;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.yard-wo-item__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
  min-width: 0;
  width: 100%;
}

.yard-wo-item__status {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 14%, var(--ui-panel-bg));
  color: var(--primary-dark);
}

.yard-wo-item__number {
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
  line-height: 1.2;
}

.yard-wo-item__title {
  font-size: 11px;
  line-height: 1.3;
  color: var(--text-muted);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.yard-wo-item--Open {
  border-left-color: #3B82F6;
}
.yard-wo-item--Open .yard-wo-item__status {
  background: #DBEAFE;
  color: #1E40AF;
}

.yard-wo-item--InProgress {
  border-left-color: #F59E0B;
}
.yard-wo-item--InProgress .yard-wo-item__status {
  background: #FEF3C7;
  color: #92400E;
}

.yard-wo-item--OnHold {
  border-left-color: #8B5CF6;
}
.yard-wo-item--OnHold .yard-wo-item__status {
  background: #EDE9FE;
  color: #5B21B6;
}

.yard-wo-item:hover,
.yard-wo-item:focus-visible {
  outline: none;
  background: color-mix(in srgb, var(--primary) 10%, var(--ui-table-hover));
  z-index: 1;
}

.yard-wo-item:hover .yard-wo-item__number,
.yard-wo-item:focus-visible .yard-wo-item__number {
  text-decoration: underline;
}

@media (min-width: 1025px) {
  table.data-table.yard-table tbody tr.yard-table-spot-row:hover .yard-wo-item,
  table.data-table.yard-table tbody tr.yard-table-spot-row--stripe:hover .yard-wo-item {
    background: color-mix(in srgb, var(--ui-table-hover) 55%, transparent);
  }

  table.data-table.yard-table tbody tr.yard-table-spot-row:hover .yard-wo-item:hover,
  table.data-table.yard-table tbody tr.yard-table-spot-row--stripe:hover .yard-wo-item:hover,
  table.data-table.yard-table tbody tr.yard-table-spot-row:hover .yard-wo-item:focus-visible,
  table.data-table.yard-table tbody tr.yard-table-spot-row--stripe:hover .yard-wo-item:focus-visible {
    background: color-mix(in srgb, var(--primary) 12%, var(--ui-table-hover));
  }
}

[data-theme="dark"] .yard-wo-item {
  background: color-mix(in srgb, #1e293b 45%, transparent);
  border-left-color: color-mix(in srgb, #38bdf8 75%, transparent);
}

[data-theme="dark"] .yard-wo-item__number {
  color: #93C5FD;
}

[data-theme="dark"] .yard-wo-item__title {
  color: #94A3B8;
}

[data-theme="dark"] .yard-wo-item--Open {
  border-left-color: #60A5FA;
}
[data-theme="dark"] .yard-wo-item--Open .yard-wo-item__status {
  background: color-mix(in srgb, #3B82F6 22%, #0f172a);
  color: #BFDBFE;
}

[data-theme="dark"] .yard-wo-item--InProgress {
  border-left-color: #FBBF24;
}
[data-theme="dark"] .yard-wo-item--InProgress .yard-wo-item__status {
  background: color-mix(in srgb, #F59E0B 22%, #0f172a);
  color: #FDE68A;
}

[data-theme="dark"] .yard-wo-item--OnHold {
  border-left-color: #A78BFA;
}
[data-theme="dark"] .yard-wo-item--OnHold .yard-wo-item__status {
  background: color-mix(in srgb, #8B5CF6 22%, #0f172a);
  color: #DDD6FE;
}

[data-theme="dark"] .yard-wo-item:hover,
[data-theme="dark"] .yard-wo-item:focus-visible {
  background: color-mix(in srgb, #334155 70%, var(--primary) 30%);
}

[data-theme="dark"] .yard-wo-item:hover .yard-wo-item__number,
[data-theme="dark"] .yard-wo-item:focus-visible .yard-wo-item__number {
  color: #E0F2FE;
}

.storage-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
}

.storage-cell-entered {
  color: var(--text-muted);
  font-size: 11px;
}

.days-badge.days-warning {
  color: #92400E;
  font-weight: 700;
}

.days-badge.days-critical {
  color: #991B1B;
  font-weight: 700;
}

.trailer-cell {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  column-gap: 24px;
  row-gap: 3px;
  align-items: start;
  overflow: visible;
  line-height: 1.25;
  min-width: 0;
  max-width: 100%;
}

.trailer-cell--empty {
  align-items: center;
}

.trailer-cell-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.yard-trailer-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  max-width: 100%;
}

.yard-trailer-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--ui-muted-readable);
}

.yard-trailer-fact--dot {
  color: var(--text-secondary);
}

.yard-trailer-fact--tire-detail,
.yard-trailer-fact--tire-positions,
.yard-trailer-fact--brake-detail,
.yard-trailer-fact--brake-positions {
  color: var(--text-secondary);
}

.yard-trailer-notes {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.yard-trailer-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px;
  align-items: baseline;
  font-size: 11px;
  line-height: 1.45;
  color: var(--ui-muted-readable);
}

.yard-trailer-note-label {
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}

.yard-trailer-note-text {
  min-width: 0;
  word-break: break-word;
}

.trailer-cell-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  min-width: 0;
  max-width: 100%;
}

.trailer-cell .yard-slot-action {
  justify-self: start;
}

/* Yard Check — light desktop polish (table layout only) */
@media (min-width: 1025px) {
  table.data-table.yard-table td {
    padding: 8px 12px;
    vertical-align: middle;
  }

  table.data-table.yard-table tbody tr.yard-drop-zone td {
    padding-top: 6px;
    padding-bottom: 6px;
  }

  table.data-table.yard-table .trailer-cell {
    align-items: center;
    grid-template-columns: 32px minmax(0, 1fr);
    column-gap: 24px;
  }

  table.data-table.yard-table .trailer-cell-body {
    gap: 4px;
  }

  table.data-table.yard-table .yard-trailer-details {
    gap: 3px;
  }

  table.data-table.yard-table .yard-trailer-facts {
    gap: 2px 10px;
  }

  table.data-table.yard-table .yard-trailer-notes {
    gap: 2px;
  }

  table.data-table.yard-table .yard-trailer-note {
    gap: 5px;
  }

  table.data-table.yard-table .yard-trailer-note-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  table.data-table.yard-table td.yard-col-wo {
    max-width: 220px;
  }

  table.data-table.yard-table td.yard-col-storage {
    white-space: nowrap;
  }

  table.data-table.yard-table .storage-cell-entered {
    font-size: 10px;
  }
}

.trailer-cell-meta {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  font-size: 11px;
  color: var(--ui-muted-readable);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.trailer-damage-chip {
  flex: 0 1 auto;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  color: #991B1B;
  background: #FEE2E2;
  border: 1px solid #FECACA;
  padding: 1px 7px;
  border-radius: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.trailer-damage-chip--repair {
  color: #92400E;
  background: #FEF3C7;
  border-color: #FDE68A;
}

@media (max-width: 1024px), (hover: none) {
  .trailer-cell-meta {
    white-space: normal;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-overflow: unset;
  }

  .trailer-damage-chip {
    white-space: normal;
    border-radius: var(--radius-sm);
    text-align: left;
  }
}

.trailer-meta-sep {
  margin: 0 5px;
  opacity: 0.45;
  user-select: none;
}

.trailer-meta-label {
  font-weight: 600;
  color: var(--ui-text-secondary, var(--ui-muted-readable));
}

.trailer-summary { color: var(--ui-muted-readable); font-size: 11px; }

.dot-info {
  font-size: 10px;
  color: var(--ui-accent-chip-text);
  background: var(--ui-accent-chip-bg);
  border: 1px solid var(--ui-accent-chip-border);
  padding: 1px 6px;
  border-radius: 20px;
  font-weight: 600;
  white-space: nowrap;
  vertical-align: middle;
}

.trailer-col-dot,
.trailer-col-b-service {
  white-space: nowrap;
}

#trailers-table {
  min-width: 1660px;
}

/* =============================================================================
   Trailers module panel — blended styling
   ============================================================================= */
.trailers-panel {
  background: var(--trailer-detail-panel-bg);
  border: 1px solid var(--trailer-detail-panel-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.trailers-panel .portal-insights-strip,
.work-orders-panel .portal-insights-strip {
  margin: 0;
  padding: 14px;
  border-bottom: 1px solid var(--trailer-detail-panel-border);
  background: var(--trailer-detail-panel-bg);
}

.trailers-panel .portal-insights-strip .portal-chart-panel,
.work-orders-panel .portal-insights-strip .portal-chart-panel {
  background: var(--ui-inset-bg);
  border-color: var(--border);
  box-shadow: none;
}

.trailers-panel-toolbar {
  margin: 0;
  border: none;
  border-bottom: 1px solid var(--trailer-detail-panel-border);
  border-radius: 0;
  box-shadow: none;
  background: var(--trailer-detail-panel-bg);
}

.trailers-panel-table {
  margin: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

.trailers-panel-table .table-scroll {
  background: transparent;
}

.trailers-panel-table .trailers-table th {
  background: var(--trailer-detail-table-header-bg);
  color: var(--trailer-detail-table-header-text);
  border-bottom-color: var(--trailer-detail-panel-border);
  vertical-align: middle;
}

.trailers-panel-table .trailers-table td {
  vertical-align: middle;
  border-bottom-color: var(--trailer-detail-card-border);
}

.trailers-panel-table .trailers-table tbody tr:nth-child(even):not(.trailers-row--off-yard) {
  background: var(--trailer-detail-table-stripe);
}

.trailers-panel-table .trailers-table tbody tr:hover {
  background: var(--trailer-detail-table-hover);
}

.trailers-table .trailer-col-unit,
.trailers-table .trailer-unit-cell {
  width: 88px;
  min-width: 88px;
  white-space: nowrap;
}

.trailers-table .trailer-col-status,
.trailers-table .trailer-status-cell {
  min-width: 128px;
}

.trailer-status-inline {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
}

.trailer-status-inline .badge,
.trailers-panel-table .trailer-status-cell .yard-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border: none;
}

.trailer-site-cell {
  font-weight: 500;
}

.trailer-spot-cell {
  font-weight: 600;
  letter-spacing: 0.02em;
}

.trailer-date-cell {
  white-space: nowrap;
  font-size: 12px;
  color: var(--ui-muted-readable);
}

.trailers-table td.action-links {
  width: 132px;
  min-width: 132px;
  text-align: center;
}

.trailers-table td.action-links .action-links {
  justify-content: center;
  width: 100%;
}

.trailers-row--off-yard {
  background: color-mix(in srgb, var(--billing-off-yard-bg) 45%, transparent);
}

.trailers-row--off-yard:hover,
.trailers-row--off-yard:hover td {
  background: color-mix(in srgb, var(--billing-off-yard-hover-bg) 55%, transparent);
}

.trailers-panel-table .trailer-status-inline .badge-R,
.trailers-panel-table .trailer-status-inline .badge-READY {
  background: var(--trailer-record-pill-success-bg);
  color: var(--trailer-record-pill-success-text);
}

.trailers-panel-table .trailer-status-inline .badge-RoL,
.trailers-panel-table .trailer-status-inline .badge-READY-ON-LEASE,
.trailers-panel-table .trailer-status-inline .badge-PoL,
.trailers-panel-table .trailer-status-inline .badge-PENDING-LEASE,
.trailers-panel-table .trailer-status-inline .badge-Loaded,
.trailers-panel-table .trailer-status-inline .badge-LOADED,
.trailers-panel-table .trailer-status-inline .badge-LD {
  background: var(--trailer-record-pill-info-bg);
  color: var(--trailer-record-pill-info-text);
}

.trailers-panel-table .trailer-status-inline .badge-PARTS,
.trailers-panel-table .trailer-status-inline .badge-PT,
.trailers-panel-table .trailer-status-inline .badge-Unknown,
.trailers-panel-table .trailer-status-inline .badge-UNKNOWN,
.trailers-panel-table .trailer-status-inline .badge-FoL,
.trailers-panel-table .trailer-status-inline .badge-FIX-ON-LEASE,
.trailers-panel-table .trailer-status-inline .badge-Empty,
.trailers-panel-table .trailer-status-inline .badge-EMPTY,
.trailers-panel-table .trailer-status-inline .badge-EMP {
  background: var(--trailer-record-pill-neutral-bg);
  color: var(--trailer-record-pill-neutral-text);
}

.trailers-panel-table .trailer-status-inline .badge-OoS,
.trailers-panel-table .trailer-status-inline .badge-OUT-OF-SERVICE,
.trailers-panel-table .trailer-status-inline .badge-SELL,
.trailers-panel-table .trailer-status-inline .badge-SL {
  background: var(--trailer-record-pill-warning-bg);
  color: var(--trailer-record-pill-warning-text);
}

[data-theme="dark"] .trailers-panel {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(148, 163, 184, 0.08);
}

.trailer-col-text {
  max-width: 0;
}

.trailer-col-damage {
  width: 16%;
  min-width: 180px;
}

.trailer-col-maint {
  width: 12%;
  min-width: 140px;
}

.trailer-col-notes {
  width: 18%;
  min-width: 200px;
}

.trailers-panel-table .trailers-table td.trailer-col-text {
  vertical-align: top;
  padding-top: 10px;
  padding-bottom: 10px;
}

.trailer-list-text {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  line-height: 1.35;
  color: var(--trailers-page-muted-text, var(--ui-muted-readable));
}

.trailer-col-damage .trailer-list-text,
.trailer-col-notes .trailer-list-text {
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.trailer-tire-cell .inv-tire-pos-note.touch-hint-trigger,
.trailer-brake-cell .inv-tire-pos-note.touch-hint-trigger {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.trailer-col-text .touch-hint--expand,
.trailer-tire-cell .touch-hint--expand,
.trailer-brake-cell .touch-hint--expand {
  display: block;
  width: 100%;
  max-width: 100%;
}

.trailer-dot-cell {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  background: var(--trailers-page-dot-info-bg, var(--ui-accent-chip-bg));
  color: var(--trailers-page-dot-info-text, var(--ui-accent-chip-text));
  border: 1px solid var(--trailers-page-dot-info-border, var(--ui-accent-chip-border));
}

.trailer-dot-cell--overdue {
  background: #FEE4E2;
  color: #B42318;
  border-color: #FDA29B;
}

.trailer-dot-cell--due30 {
  background: #FEF0C7;
  color: #B54708;
  border-color: #FEC84B;
}

.trailer-dot-cell--due90 {
  background: #E0F2FE;
  color: #0369A1;
  border-color: #7DD3FC;
}

.trailer-dot-cell--ok {
  background: #ECFDF3;
  color: #027A48;
  border-color: #ABEFC6;
}

[data-theme="dark"] .trailer-dot-cell--overdue {
  background: rgba(240, 68, 56, 0.16);
  color: #FDA29B;
  border-color: rgba(240, 68, 56, 0.4);
}

[data-theme="dark"] .trailer-dot-cell--due30 {
  background: rgba(245, 158, 11, 0.16);
  color: #FCD34D;
  border-color: rgba(245, 158, 11, 0.4);
}

[data-theme="dark"] .trailer-dot-cell--due90 {
  background: rgba(56, 189, 248, 0.14);
  color: #7DD3FC;
  border-color: rgba(56, 189, 248, 0.35);
}

[data-theme="dark"] .trailer-dot-cell--ok {
  background: rgba(16, 185, 129, 0.14);
  color: #6EE7B7;
  border-color: rgba(16, 185, 129, 0.35);
}

.trailer-b-service-cell {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  background: var(--trailers-page-dot-info-bg, var(--ui-accent-chip-bg));
  color: var(--trailers-page-dot-info-text, var(--ui-accent-chip-text));
  border: 1px solid var(--trailers-page-dot-info-border, var(--ui-accent-chip-border));
}

.trailer-b-service-cell--overdue {
  background: #FEE4E2;
  color: #B42318;
  border-color: #FDA29B;
}

.trailer-b-service-cell--dueSoon {
  background: #FEF0C7;
  color: #B54708;
  border-color: #FEC84B;
}

.trailer-b-service-cell--ok {
  background: #ECFDF3;
  color: #027A48;
  border-color: #ABEFC6;
}

[data-theme="dark"] .trailer-b-service-cell--overdue {
  background: rgba(240, 68, 56, 0.16);
  color: #FDA29B;
  border-color: rgba(240, 68, 56, 0.4);
}

[data-theme="dark"] .trailer-b-service-cell--dueSoon {
  background: rgba(245, 158, 11, 0.16);
  color: #FCD34D;
  border-color: rgba(245, 158, 11, 0.4);
}

[data-theme="dark"] .trailer-b-service-cell--ok {
  background: rgba(16, 185, 129, 0.14);
  color: #6EE7B7;
  border-color: rgba(16, 185, 129, 0.35);
}

/* =============================================================================
   Info box
   ============================================================================= */
.info-box {
  background: var(--ui-panel-bg);
  border: 1px solid var(--ui-accent-chip-border);
  border-left: 4px solid var(--primary);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 16px;
  box-shadow: var(--ui-panel-shadow);
}

.info-box h4 {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--primary);
  display: flex;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.info-box .info-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 13px;
  color: var(--text-secondary);
}

.info-box .info-row:last-child { margin-bottom: 0; }

/* =============================================================================
   Yard Check toolbar
   ============================================================================= */
.yard-view-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--ui-panel-border);
  border-radius: var(--radius-lg);
  background: var(--ui-panel-bg);
  box-shadow: var(--ui-panel-shadow);
}

.yard-view-panel::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--primary) 0%, var(--csg-blue-light) 100%);
  opacity: 0.85;
  z-index: 1;
  pointer-events: none;
}

.yard-view-panel .yard-check-bar {
  background: var(--ui-panel-bg);
  border-bottom: 1px solid var(--ui-table-cell-border);
  padding-bottom: 14px;
}

.yard-view-panel > .table-wrap,
.yard-view-panel .yard-table-wrap {
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

.yard-view-panel .yard-table thead th {
  background: var(--ui-table-header-bg);
  border-top: none;
}

.yard-check-bar {
  display: grid;
  grid-template-columns: minmax(200px, 280px) 1fr auto;
  align-items: center;
  gap: 16px 24px;
  padding: 16px 18px 16px 20px;
  background: linear-gradient(180deg, var(--ui-panel-bg) 0%, var(--dashboard-surface-gradient-end, var(--ui-panel-bg)) 100%);
  border: none;
  border-radius: 0;
  box-shadow: none;
  position: relative;
}

.yard-check-bar__filters {
  min-width: 0;
}

.yard-check-field {
  display: flex;
  align-items: center;
  gap: 12px;
}

.yard-check-field__label {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
  white-space: nowrap;
}

.yard-check-field__control {
  position: relative;
  flex: 1;
  min-width: 0;
}

.yard-check-field__select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  padding: 10px 38px 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  box-shadow: var(--shadow-sm);
}

.yard-check-field__select:hover {
  border-color: var(--csg-blue-muted);
  background: var(--bg);
}

.yard-check-field__select:focus,
.yard-check-field__select:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0, 114, 188, 0.14);
}

.yard-check-field__chevron {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  pointer-events: none;
}

.yard-check-field__chevron svg {
  width: 16px;
  height: 16px;
}

.yard-check-bar__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px 12px;
  min-width: 0;
}

.yard-check-meta__heading {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ui-filter-label);
  white-space: nowrap;
}

.yard-check-meta__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--ui-inset-bg);
  border: 1px solid var(--border-light);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
}

.yard-check-meta__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  color: var(--primary);
  flex-shrink: 0;
}

.yard-check-meta__icon svg {
  width: 14px;
  height: 14px;
}

.yard-check-bar__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
  gap: 8px;
}

.yard-check-export-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.yard-check-bar--compact {
  grid-template-columns: minmax(200px, 1fr) auto;
}

.yard-check-export-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* =============================================================================
   Yard Check — Edit & Storage Records toolbars
   ============================================================================= */
.yard-tab-intro {
  margin-bottom: 16px;
}

.yard-tab-intro-link {
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
  white-space: nowrap;
}

.yard-tab-intro-link:hover,
.yard-tab-intro-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.yard-time-machine-panel {
  margin-top: 0;
}

.yard-time-machine-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 14px;
  border-bottom: 1px solid var(--trailer-detail-panel-border);
  background: var(--trailer-detail-panel-bg);
}

.yard-tm-stat-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  min-height: 0;
  padding: 14px 16px 12px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--ui-inset-bg);
  box-shadow: none;
  position: relative;
  overflow: hidden;
  text-align: left;
}

.yard-tm-stat-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  opacity: 0.95;
}

.yard-tm-stat-card--events::before {
  background: linear-gradient(180deg, var(--primary) 0%, var(--csg-blue-light) 100%);
}

.yard-tm-stat-card--filtered::before {
  background: linear-gradient(180deg, #059669 0%, #34d399 100%);
}

.yard-tm-stat-card--latest::before {
  background: linear-gradient(180deg, #7c3aed 0%, #a78bfa 100%);
}

.yard-tm-stat-card__icon {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.yard-tm-stat-card__icon svg {
  width: 15px;
  height: 15px;
}

.yard-tm-stat-card--events .yard-tm-stat-card__icon {
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  color: var(--primary);
}

.yard-tm-stat-card--filtered .yard-tm-stat-card__icon {
  background: color-mix(in srgb, #059669 14%, transparent);
  color: #059669;
}

.yard-tm-stat-card--latest .yard-tm-stat-card__icon {
  background: color-mix(in srgb, #7c3aed 14%, transparent);
  color: #7c3aed;
}

.yard-tm-stat-card--storage-total::before {
  background: linear-gradient(180deg, var(--primary) 0%, var(--csg-blue-light) 100%);
}

.yard-tm-stat-card--storage-total .yard-tm-stat-card__icon {
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  color: var(--primary);
}

.yard-tm-stat-card--storage-avg::before {
  background: linear-gradient(180deg, #059669 0%, #34d399 100%);
}

.yard-tm-stat-card--storage-avg .yard-tm-stat-card__icon {
  background: color-mix(in srgb, #059669 14%, transparent);
  color: #059669;
}

.yard-tm-stat-card--storage-over30::before {
  background: linear-gradient(180deg, #d97706 0%, #fbbf24 100%);
}

.yard-tm-stat-card--storage-over30 .yard-tm-stat-card__icon {
  background: color-mix(in srgb, #d97706 14%, transparent);
  color: #d97706;
}

.yard-tm-stat-card--wo-active::before {
  background: linear-gradient(180deg, var(--primary) 0%, var(--csg-blue-light) 100%);
}

.yard-tm-stat-card--wo-active .yard-tm-stat-card__icon {
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  color: var(--primary);
}

.yard-tm-stat-card--wo-open::before {
  background: linear-gradient(180deg, #0284c7 0%, #38bdf8 100%);
}

.yard-tm-stat-card--wo-open .yard-tm-stat-card__icon {
  background: color-mix(in srgb, #0284c7 14%, transparent);
  color: #0284c7;
}

.yard-tm-stat-card--wo-progress::before {
  background: linear-gradient(180deg, #c2410c 0%, #fb923c 100%);
}

.yard-tm-stat-card--wo-progress .yard-tm-stat-card__icon {
  background: color-mix(in srgb, #c2410c 14%, transparent);
  color: #c2410c;
}

.yard-tm-stat-card--wo-complete::before {
  background: linear-gradient(180deg, #059669 0%, #34d399 100%);
}

.yard-tm-stat-card--wo-complete .yard-tm-stat-card__icon {
  background: color-mix(in srgb, #059669 14%, transparent);
  color: #059669;
}

.yard-tm-stat-card--edit-total::before {
  background: linear-gradient(180deg, var(--primary) 0%, var(--csg-blue-light) 100%);
}

.yard-tm-stat-card--edit-total .yard-tm-stat-card__icon {
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  color: var(--primary);
}

.yard-tm-stat-card--edit-rows::before {
  background: linear-gradient(180deg, #7c3aed 0%, #a78bfa 100%);
}

.yard-tm-stat-card--edit-rows .yard-tm-stat-card__icon {
  background: color-mix(in srgb, #7c3aed 14%, transparent);
  color: #7c3aed;
}

.yard-tm-stat-card--edit-empty::before {
  background: linear-gradient(180deg, #059669 0%, #34d399 100%);
}

.yard-tm-stat-card--edit-empty .yard-tm-stat-card__icon {
  background: color-mix(in srgb, #059669 14%, transparent);
  color: #059669;
}

.yard-tm-stat-card--inv-total::before {
  background: linear-gradient(180deg, var(--primary) 0%, var(--csg-blue-light) 100%);
}

.yard-tm-stat-card--inv-total .yard-tm-stat-card__icon {
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  color: var(--primary);
}

.yard-tm-stat-card--inv-available::before {
  background: linear-gradient(180deg, #059669 0%, #34d399 100%);
}

.yard-tm-stat-card--inv-available .yard-tm-stat-card__icon {
  background: color-mix(in srgb, #059669 14%, transparent);
  color: #059669;
}

.yard-tm-stat-card--inv-reserved::before {
  background: linear-gradient(180deg, #4338ca 0%, #818cf8 100%);
}

.yard-tm-stat-card--inv-reserved .yard-tm-stat-card__icon {
  background: color-mix(in srgb, #4338ca 14%, transparent);
  color: #4338ca;
}

.yard-tm-stat-card--inv-repair::before {
  background: linear-gradient(180deg, #c2410c 0%, #fb923c 100%);
}

.yard-tm-stat-card--inv-repair .yard-tm-stat-card__icon {
  background: color-mix(in srgb, #c2410c 14%, transparent);
  color: #c2410c;
}

.yard-tm-stat-card--inv-oos::before {
  background: linear-gradient(180deg, #dc2626 0%, #f87171 100%);
}

.yard-tm-stat-card--inv-oos .yard-tm-stat-card__icon {
  background: color-mix(in srgb, #dc2626 14%, transparent);
  color: #dc2626;
}

.yard-tm-stat-card--inv-sell::before {
  background: linear-gradient(180deg, #d97706 0%, #fbbf24 100%);
}

.yard-tm-stat-card--inv-sell .yard-tm-stat-card__icon {
  background: color-mix(in srgb, #d97706 14%, transparent);
  color: #d97706;
}

.yard-tm-stat-card--inv-parts::before {
  background: linear-gradient(180deg, #6b7280 0%, #9ca3af 100%);
}

.yard-tm-stat-card--inv-parts .yard-tm-stat-card__icon {
  background: color-mix(in srgb, #6b7280 14%, transparent);
  color: #6b7280;
}

.yard-inventory-stats {
  display: grid;
  grid-template-columns: minmax(148px, 188px) minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}

.yard-inventory-stats__buckets {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.yard-inventory-stats > .yard-tm-stat-card--inv-total {
  min-height: 100%;
}

.yard-panel-stats--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.yard-panel-stats--4 .yard-tm-stat-card {
  padding: 12px 12px 10px 14px;
}

.yard-panel-stats--4 .yard-tm-stat-card__label {
  font-size: 10px;
  padding-right: 30px;
}

.yard-panel-stats--4 .yard-tm-stat-card__hint {
  font-size: 9px;
}

@media (max-width: 960px) {
  .yard-inventory-stats {
    grid-template-columns: 1fr;
  }

  .yard-inventory-stats__buckets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .yard-inventory-stats__buckets {
    grid-template-columns: 1fr;
  }
}

.yard-tm-stat-card__label {
  font-family: var(--terminal-mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.03em;
  text-transform: none;
  color: color-mix(in srgb, var(--text-muted) 90%, var(--terminal-phosphor) 10%);
  padding-right: 36px;
}

.yard-tm-stat-card__value {
  font-family: var(--terminal-mono);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0.02em;
  color: var(--text);
}

.yard-tm-stat-card__value--datetime {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding-right: 36px;
}

.yard-tm-stat-card__date {
  font-family: var(--terminal-mono);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0.02em;
}

.yard-tm-stat-card__time {
  font-family: var(--terminal-mono);
  font-size: 11px;
  font-weight: 400;
  color: color-mix(in srgb, var(--text-secondary) 88%, var(--terminal-phosphor) 12%);
  letter-spacing: 0.03em;
}

.yard-tm-stat-card__hint {
  font-family: var(--terminal-mono);
  font-size: 10px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--text-secondary) 86%, var(--terminal-phosphor) 14%);
}

.yard-time-machine-toolbar {
  margin-bottom: 0;
}

.yard-time-machine-toolbar .billing-filter-bar,
.yard-time-machine-toolbar .module-filters-panel {
  width: 100%;
}

.yard-time-machine-toolbar .module-filters-panel {
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 14px 16px 16px;
  background: transparent;
}

.yard-time-machine-card {
  margin-top: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.yard-time-machine-table-wrap {
  margin-top: 0;
}

.yard-time-machine-toolbar .module-filter-grid .billing-filter-field--date .form-control {
  min-width: 0;
  width: 100%;
  max-width: 100%;
}

.yard-time-machine-toolbar input[type="date"].form-control {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.yard-tm-timeline-view.hidden,
.yard-tm-group-view.hidden {
  display: none !important;
}

.yard-tm-group-view {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.yard-tm-groups-empty {
  padding: 24px 16px;
  text-align: center;
}

.yard-tm-row-group {
  border-bottom: 1px solid var(--ui-table-cell-border);
}

.yard-tm-row-group:last-child {
  border-bottom: none;
}

.yard-tm-row-group__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: var(--ui-inset-bg);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
}

.yard-tm-row-group__title {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text);
}

.yard-tm-row-group__count {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}

.yard-tm-row-group__table-wrap {
  margin: 0;
  border: none;
  box-shadow: none;
  border-radius: 0;
}

.yard-tm-row-group__table thead th {
  font-size: 11px;
  padding-top: 10px;
  padding-bottom: 10px;
}

@media (max-width: 900px) {
  .yard-time-machine-stats,
  .yard-panel-stats--4,
  .gate-list-panel-stats,
  .support-panel-stats,
  .billing-panel-stats,
  .work-orders-panel-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .yard-time-machine-stats > .yard-tm-stat-card--latest:nth-child(3):last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 520px) {
  .yard-time-machine-stats,
  .yard-panel-stats--4,
  .gate-list-panel-stats,
  .support-panel-stats,
  .billing-panel-stats,
  .work-orders-panel-stats {
    grid-template-columns: 1fr;
  }

  .yard-time-machine-stats > .yard-tm-stat-card--latest {
    grid-column: auto;
  }

  .yard-tm-stat-card__label {
    padding-right: 32px;
  }

  .yard-panel-stats--4 .yard-tm-stat-card__label {
    font-size: 10px;
    padding-right: 30px;
  }
}

.yard-tab-toolbar {
  margin-bottom: 16px;
}

.yard-tab-toolbar__panel {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px 20px;
  padding: 16px 18px 16px 20px;
  background: linear-gradient(180deg, var(--ui-panel-bg) 0%, var(--dashboard-surface-gradient-end, var(--ui-panel-bg)) 100%);
  border: 1px solid var(--ui-panel-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--ui-panel-shadow);
  position: relative;
  overflow: hidden;
}

.yard-tab-toolbar__panel::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--primary) 0%, var(--csg-blue-light) 100%);
  opacity: 0.85;
}

.yard-tab-toolbar__filters {
  flex: 1;
  min-width: min(100%, 320px);
  margin: 0;
  background: var(--ui-inset-bg);
}

.yard-tab-toolbar__filters .module-toolbar-head {
  margin-bottom: 12px;
}

.yard-tab-toolbar__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  align-self: flex-start;
  padding-top: 2px;
}

.yard-tab-toolbar--edit .yard-tab-toolbar__panel {
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
}

.yard-tab-toolbar__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 16px;
}

.yard-tab-toolbar__head-inner {
  flex: 1;
  min-width: 200px;
  margin-bottom: 0;
}

.yard-tab-toolbar__head-inner .module-filter-summary {
  flex: none;
  width: 100%;
}

.yard-tab-toolbar__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 2px;
}

.yard-tab-toolbar__empty {
  font-size: 13px;
}

/* =============================================================================
   Work Orders & Storage Records tabs — compact single-panel toolbar
   ============================================================================= */
.yard-tab-toolbar--workorders .yard-tab-toolbar__panel,
.yard-tab-toolbar--storage .yard-tab-toolbar__panel {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 14px 16px 14px 18px;
}

.yard-tab-toolbar__head--wo {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
}

.yard-tab-toolbar__title-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 8px;
}

.yard-tab-toolbar__title-line .module-toolbar-title {
  flex-shrink: 0;
}

.yard-tab-toolbar__title-line .module-filter-summary {
  flex: 1;
  min-width: min(100%, 180px);
}

.yard-tab-toolbar__actions-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  min-height: 32px;
  width: 100%;
}

.yard-tab-toolbar__actions-left {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.yard-tab-toolbar__actions-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.yard-tab-toolbar__filter-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.yard-tab-toolbar--workorders .module-filter-search,
.yard-tab-toolbar--storage .module-filter-search {
  margin-bottom: 0;
}

.yard-tab-toolbar--workorders .module-filter-search .form-control,
.yard-tab-toolbar--storage .module-filter-search .form-control {
  height: 38px;
}

.yard-tab-toolbar--workorders .billing-filter-field .form-control,
.yard-tab-toolbar--storage .billing-filter-field .form-control {
  width: 100%;
  min-width: 0;
  height: 38px;
}

.yard-tab-wo-filter-grid,
.yard-tab-storage-filter-grid {
  gap: 10px;
}

@media (min-width: 901px) {
  .yard-tab-toolbar--workorders .yard-tab-toolbar__filter-body,
  .yard-tab-toolbar--storage .yard-tab-toolbar__filter-body {
    flex-direction: row;
    align-items: flex-end;
    gap: 12px;
  }

  .yard-tab-toolbar--workorders .module-filter-search,
  .yard-tab-toolbar--storage .module-filter-search {
    flex: 1.4;
    min-width: 200px;
  }

  .yard-tab-wo-filter-grid {
    flex: 2.6;
    min-width: 0;
  }

  .yard-tab-storage-filter-grid {
    flex: 2;
    min-width: 0;
  }
}

.last-updated-panel {
  float: right;
  width: 280px;
  margin-left: 20px;
  margin-bottom: 16px;
}

/* =============================================================================
   Site cards
   ============================================================================= */
.sites-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.site-card {
  background: var(--ui-panel-bg);
  border: 1px solid var(--ui-panel-border);
  border-radius: var(--radius-lg);
  padding: 24px;
  transition: all var(--transition);
  box-shadow: var(--ui-panel-shadow);
  position: relative;
  overflow: hidden;
}

.site-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--csg-blue), var(--csg-blue-light));
  opacity: 0;
  transition: opacity var(--transition);
}

.site-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.site-card:hover::before { opacity: 1; }

.site-card h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--text);
  letter-spacing: -0.01em;
}

.site-card .meta {
  color: var(--text-secondary);
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.site-card .meta::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
}

.site-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.site-card-actions .btn {
  flex: 1 1 120px;
  justify-content: center;
  text-decoration: none;
  min-height: 36px;
}

.site-card-actions .btn-primary,
.site-card-actions .btn-primary:hover,
.site-card-actions .btn-primary:focus-visible {
  color: #fff;
}

.site-card-actions .btn-primary:hover {
  font-weight: 700;
}

.site-card-actions .delete-site-btn {
  border-color: #B91C1C;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.22);
}

.site-card-actions .delete-site-btn:hover:not(:disabled),
.site-card-actions .delete-site-btn:focus-visible:not(:disabled) {
  color: #fff;
  background: #B91C1C;
  border-color: #991B1B;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(220, 38, 38, 0.35);
  font-weight: 700;
}

.site-card-actions .delete-site-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.sites-list-toolbar {
  align-items: flex-end;
  gap: 16px;
}

/* =============================================================================
   Dashboard
   ============================================================================= */
.dashboard-page {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dashboard-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 20px;
  flex-wrap: wrap;
  margin-bottom: 2px;
}

.dashboard-page-intro {
  flex: 1 1 280px;
  min-width: 0;
}

.dashboard-page-intro .page-title {
  margin-bottom: 6px;
}

.dashboard-page-intro .text-muted {
  margin: 0;
  max-width: 520px;
}

.dashboard-cmd-bar {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--ui-panel-border);
  border-radius: var(--radius-sm);
  background: var(--ui-inset-bg);
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.05);
  flex-shrink: 0;
}

.dashboard-cmd {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border: 1px solid transparent;
  border-radius: calc(var(--radius-sm) - 2px);
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--terminal-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  appearance: none;
  margin: 0;
  transition:
    color var(--transition),
    background var(--transition),
    border-color var(--transition),
    box-shadow var(--transition);
}

.dashboard-cmd:hover,
.dashboard-cmd:focus-visible {
  color: var(--text);
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  border-color: color-mix(in srgb, var(--primary) 16%, transparent);
  outline: none;
}

.dashboard-cmd:focus-visible {
  box-shadow: 0 0 0 2px var(--ui-focus-ring);
}

.dashboard-cmd__prompt {
  color: var(--terminal-phosphor);
  opacity: 0.62;
  font-weight: 700;
}

.dashboard-cmd__count {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 1px 5px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--terminal-phosphor) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--terminal-phosphor) 14%, transparent);
}

[data-theme="dark"] .dashboard-cmd-bar {
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.22);
}

[data-theme="dark"] .dashboard-cmd:hover,
[data-theme="dark"] .dashboard-cmd:focus-visible {
  background: rgba(0, 145, 234, 0.12);
  border-color: rgba(0, 145, 234, 0.22);
}

@media (max-width: 720px) {
  .dashboard-page {
    gap: 8px;
  }

  .dashboard-page-head {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-bottom: 0;
  }

  .dashboard-page-intro {
    flex: 0 0 auto;
  }

  .app-shell--staff-portal .dashboard-page-intro .page-title,
  .app-shell--customer-portal .dashboard-page-intro .page-title {
    margin-bottom: 4px;
    padding-bottom: 6px;
  }

  .dashboard-cmd-bar {
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .dashboard-cmd-bar::-webkit-scrollbar {
    display: none;
  }
}

.dashboard-panel {
  background: var(--trailer-detail-panel-bg);
  border: 1px solid var(--trailer-detail-panel-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.dashboard-panel-stats {
  margin: 0;
  padding: 14px;
  border-bottom: 1px solid var(--trailer-detail-panel-border);
  background: var(--trailer-detail-panel-bg);
}

.dashboard-panel-stats .dashboard-stat-card {
  background: var(--ui-inset-bg);
  border: 1px solid var(--border);
  box-shadow: none;
}

.dashboard-panel-stats .dashboard-stat-card h3 {
  color: var(--dashboard-stat-value-color);
}

.dashboard-panel .portal-insights-strip {
  margin: 0;
  padding: 14px;
  border-bottom: 1px solid var(--trailer-detail-panel-border);
  background: var(--trailer-detail-panel-bg);
}

.dashboard-panel .portal-insights-strip .portal-chart-panel {
  background: var(--ui-inset-bg);
  border-color: var(--border);
  box-shadow: none;
}

.dashboard-panel-toolbar {
  margin: 0;
  padding: 0;
  border: none;
  border-bottom: 1px solid var(--trailer-detail-panel-border);
  border-radius: 0;
  box-shadow: none;
  background: var(--trailer-detail-panel-bg);
  min-width: 0;
  max-width: 100%;
}

.dashboard-panel-toolbar .sites-list-picker {
  padding: 12px 14px;
}

.dashboard-panel-sites {
  padding: 12px 14px 14px;
  background: var(--trailer-detail-panel-bg);
}

.dashboard-panel-sites .dashboard-section-head {
  margin-bottom: 10px;
}

[data-theme="dark"] .dashboard-panel {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(148, 163, 184, 0.08);
}

.dashboard-toolbar {
  margin-bottom: 0;
  padding: 16px 18px;
  background: linear-gradient(180deg, var(--ui-panel-bg) 0%, var(--dashboard-surface-gradient-end) 100%);
  border: 1px solid var(--ui-panel-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--ui-panel-shadow);
  min-width: 0;
  max-width: 100%;
}

/* Standalone dashboard-toolbar styles must not bleed into unified panel interiors */
.dashboard-panel .dashboard-panel-toolbar {
  margin: 0;
  padding: 0;
  border: none;
  border-bottom: 1px solid var(--trailer-detail-panel-border);
  border-radius: 0;
  box-shadow: none;
  background: var(--trailer-detail-panel-bg);
}

.dashboard-panel .dashboard-panel-toolbar--jump {
  padding: 14px 14px 12px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--primary) 5%, var(--trailer-detail-panel-bg)) 0%,
    var(--trailer-detail-panel-bg) 100%
  );
}

@media (max-width: 1024px) {
  .dashboard-page {
    min-width: 0;
    max-width: 100%;
  }

  .dashboard-toolbar {
    padding: 14px;
  }

  .dashboard-jump-picker,
  .sites-list-picker {
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }

  .dashboard-toolbar-row {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .dashboard-select-wrap {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .dashboard-jump-select,
  .dashboard-select-wrap .custom-select-trigger {
    width: 100%;
    max-width: 100%;
  }

  .dashboard-select-wrap .custom-select-menu {
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .dashboard-select-wrap .custom-select-option {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

.dashboard-jump-picker {
  min-width: 0;
  gap: 10px;
}

.dashboard-jump-picker__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  cursor: default;
}

.dashboard-jump-picker__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 8px;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, var(--ui-panel-bg));
  border: 1px solid color-mix(in srgb, var(--primary) 24%, transparent);
}

.dashboard-jump-picker__icon svg {
  display: block;
}

.dashboard-jump-picker__label-text {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.dashboard-jump-control {
  padding: 5px;
  border-radius: var(--radius);
  border: 1px solid var(--ui-panel-border);
  background: var(--ui-inset-bg);
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.05);
}

.dashboard-jump-control__row {
  gap: 6px;
  align-items: center;
}

.dashboard-toolbar-row {
  display: flex;
  align-items: stretch;
  gap: 10px;
}

.dashboard-toolbar-row .dashboard-select-wrap {
  flex: 1;
  min-width: 0;
}

.dashboard-jump-control__row .dashboard-select-wrap--jump {
  flex: 1 1 auto;
  align-self: center;
  height: 42px;
  max-height: 42px;
}

.dashboard-add-site-btn {
  --cmd-accent: #6BA3D6;
  --cmd-accent-soft: color-mix(in srgb, #6BA3D6 36%, var(--ui-panel-border));
  flex-shrink: 0;
  width: 38px;
  min-height: 38px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--cmd-accent-soft);
  border-radius: var(--radius-sm);
  background: var(--ui-panel-bg);
  color: var(--text);
  cursor: pointer;
  box-shadow: none;
  transition:
    color 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.dashboard-add-site-btn:hover,
.dashboard-add-site-btn:focus-visible {
  background: color-mix(in srgb, var(--cmd-accent) 7%, var(--ui-panel-bg));
  border-color: var(--cmd-accent);
  color: var(--text);
  transform: translateY(-1px);
  box-shadow: 0 1px 6px color-mix(in srgb, var(--cmd-accent) 12%, transparent);
}

.dashboard-select-wrap {
  position: relative;
}

.dashboard-select-wrap::after {
  content: '▾';
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1;
}

.dashboard-select-wrap:has(.custom-select)::after,
.dashboard-select-wrap:has(.custom-select)::before {
  display: none;
}

.dashboard-select-wrap--jump::before {
  content: '';
  position: absolute;
  right: 8px;
  top: 50%;
  width: 28px;
  height: 28px;
  transform: translateY(-50%);
  border-radius: 6px;
  background: color-mix(in srgb, var(--primary) 8%, var(--ui-panel-bg));
  border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent);
  pointer-events: none;
}

.dashboard-select-wrap--jump::after {
  content: '▾';
  right: 8px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  box-shadow: none;
  transform: translateY(-50%) rotate(90deg);
  font-size: 15px;
  line-height: 1;
  color: var(--primary);
  transition: transform 0.18s ease;
}

.dashboard-select-wrap--jump.dashboard-select-wrap--jump-active::after {
  transform: translateY(-50%) rotate(0deg);
}

.dashboard-jump-select,
.dashboard-select-wrap--jump .custom-select-trigger.dashboard-jump-select {
  appearance: none;
  -webkit-appearance: none;
  padding: 0 44px 0 14px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.25;
  color: var(--text);
  background: var(--ui-panel-bg);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  height: 42px;
  min-height: 42px;
  max-height: 42px;
  box-sizing: border-box;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}

.dashboard-jump-select:hover,
.dashboard-select-wrap--jump .custom-select-trigger.dashboard-jump-select:hover {
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border-light));
  background: color-mix(in srgb, var(--primary) 4%, var(--ui-panel-bg));
}

/* Jump select: glow only while the menu is open (wrapper gets --jump-active from JS) */
.dashboard-select-wrap--jump:not(.dashboard-select-wrap--jump-active) .custom-select-trigger.dashboard-jump-select.form-control,
.dashboard-select-wrap--jump:not(.dashboard-select-wrap--jump-active) .custom-select-trigger.dashboard-jump-select.form-control:focus,
.dashboard-select-wrap--jump:not(.dashboard-select-wrap--jump-active) .custom-select-trigger.dashboard-jump-select.form-control:focus-visible {
  border-color: var(--border-light);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  outline: none;
}

.dashboard-select-wrap--jump.dashboard-select-wrap--jump-active .custom-select-trigger.dashboard-jump-select.form-control {
  border-color: var(--primary);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--primary) 24%, transparent),
    0 0 14px color-mix(in srgb, var(--primary) 12%, transparent);
  outline: none;
}

.dashboard-select-wrap--jump .custom-select {
  height: 42px;
  max-height: 42px;
}

.dashboard-select-wrap--jump .custom-select-trigger.dashboard-jump-select {
  position: relative;
  padding-right: 42px;
}

.dashboard-select-wrap--jump .custom-select-chevron {
  position: absolute;
  right: 7px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: color-mix(in srgb, var(--primary) 8%, var(--ui-panel-bg));
  border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent);
  opacity: 1;
  pointer-events: none;
}

.dashboard-select-wrap--jump .custom-select-chevron__glyph {
  display: block;
  font-size: 15px;
  line-height: 1;
  color: var(--primary);
  transform: rotate(90deg);
  transition: transform 0.18s ease;
}

.dashboard-select-wrap--jump.dashboard-select-wrap--jump-active .custom-select-chevron__glyph,
.dashboard-select-wrap--jump .custom-select.is-open .custom-select-chevron__glyph {
  transform: rotate(0deg);
}

.dashboard-jump-picker .custom-select-menu {
  padding: 6px;
  border-radius: var(--radius);
  border-color: color-mix(in srgb, var(--primary) 22%, var(--ui-panel-border));
  box-shadow: var(--shadow-md);
  max-height: min(320px, 52vh);
}

.dashboard-jump-picker .custom-select-option {
  border-radius: var(--radius-sm);
  margin-bottom: 2px;
  white-space: normal;
}

.dashboard-jump-picker .custom-select-option:last-child {
  margin-bottom: 0;
}

.dashboard-jump-picker .custom-select-option[data-value=""] {
  color: var(--text-muted);
  font-weight: 500;
  font-style: italic;
}

.dashboard-jump-picker .custom-select-option--rich {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.dashboard-jump-picker .custom-select-option__label {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 600;
}

.dashboard-jump-picker .custom-select-option__meta {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  color: var(--dashboard-site-count-active-label);
  background: color-mix(in srgb, var(--dashboard-site-count-active-num) 14%, var(--ui-panel-bg));
  border: 1px solid color-mix(in srgb, var(--dashboard-site-count-active-num) 28%, transparent);
}

.dashboard-jump-picker .custom-select-option.is-selected {
  background: color-mix(in srgb, var(--primary) 12%, var(--ui-panel-bg));
  color: var(--text);
}

.dashboard-jump-picker .custom-select-value--placeholder {
  color: var(--text-muted);
  font-weight: 500;
}

.dashboard-jump-picker .custom-select-value--rich {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.dashboard-jump-picker .custom-select-value__main {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-jump-picker .custom-select-value__meta {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--dashboard-site-count-active-label);
}

.dashboard-jump-add-btn {
  width: auto;
  min-width: 36px;
  min-height: 38px;
  padding: 0 10px 0 8px;
  gap: 4px;
  border-radius: var(--radius-sm);
  --cmd-accent: var(--primary);
  --cmd-accent-soft: color-mix(in srgb, var(--primary) 45%, var(--ui-panel-border));
  border-color: color-mix(in srgb, var(--primary) 55%, var(--ui-panel-border));
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--primary) 22%, var(--ui-panel-bg)) 0%,
    color-mix(in srgb, var(--primary) 10%, var(--ui-panel-bg)) 100%
  );
  color: var(--primary);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.06),
    inset 0 1px 0 color-mix(in srgb, #fff 18%, transparent);
}

.dashboard-jump-add-btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--primary) 18%, transparent);
}

.dashboard-jump-add-btn__icon svg {
  display: block;
  width: 14px;
  height: 14px;
}

.dashboard-jump-add-btn__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
}

.dashboard-jump-add-btn:hover,
.dashboard-jump-add-btn:focus-visible {
  color: var(--primary-dark, var(--primary));
  border-color: var(--primary);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--primary) 30%, var(--ui-panel-bg)) 0%,
    color-mix(in srgb, var(--primary) 16%, var(--ui-panel-bg)) 100%
  );
  box-shadow:
    0 4px 14px color-mix(in srgb, var(--primary) 18%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 22%, transparent);
  transform: translateY(-1px);
}

.dashboard-jump-add-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px color-mix(in srgb, var(--primary) 12%, transparent);
}

@media (max-width: 480px) {
  .dashboard-jump-add-btn {
    width: 38px;
    min-width: 38px;
    padding: 0;
    justify-content: center;
  }

  .dashboard-jump-add-btn__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

[data-theme="dark"] .dashboard-jump-add-btn {
  color: #7dd3fc;
  border-color: color-mix(in srgb, var(--primary) 50%, rgba(148, 163, 184, 0.35));
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--primary) 26%, var(--ui-panel-bg)) 0%,
    color-mix(in srgb, var(--primary) 12%, var(--ui-panel-bg)) 100%
  );
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .dashboard-jump-add-btn__icon {
  background: rgba(56, 189, 248, 0.16);
}

[data-theme="dark"] .dashboard-jump-add-btn:hover,
[data-theme="dark"] .dashboard-jump-add-btn:focus-visible {
  color: #bae6fd;
  box-shadow:
    0 4px 16px rgba(56, 189, 248, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.dashboard-jump-hint {
  margin: 0;
  padding-left: 36px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-muted);
}

.dashboard-panel-toolbar--jump:has(.custom-select.is-open),
.dashboard-jump-picker:has(.custom-select.is-open) {
  position: relative;
  z-index: 60;
}

[data-theme="dark"] .dashboard-panel .dashboard-panel-toolbar--jump {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--primary) 8%, var(--trailer-detail-panel-bg)) 0%,
    var(--trailer-detail-panel-bg) 100%
  );
}

[data-theme="dark"] .dashboard-jump-control {
  background: rgba(0, 0, 0, 0.22);
  border-color: rgba(148, 163, 184, 0.16);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.28);
}

[data-theme="dark"] .dashboard-jump-select,
[data-theme="dark"] .dashboard-select-wrap--jump .custom-select-trigger.dashboard-jump-select {
  background: var(--ui-panel-bg);
  border-color: rgba(148, 163, 184, 0.22);
  box-shadow: none;
}

[data-theme="dark"] .dashboard-jump-picker .custom-select-menu {
  border-color: rgba(56, 189, 248, 0.24);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

.dashboard-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 0 2px;
}

.dashboard-section-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.dashboard-section-meta {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

.sites-list-picker {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  flex: 1;
}

.sites-list-picker label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.dashboard-sites-grid {
  gap: 14px;
  align-items: start;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 640px) {
  .dashboard-sites-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .dashboard-sites-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .dashboard-sites-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.dashboard-sites-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 40px 20px;
  text-align: center;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
}

.dashboard-sites-empty-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 300;
  color: var(--primary);
  background: var(--csg-blue-pale);
  border: 1px solid var(--csg-blue-muted);
  margin-bottom: 8px;
}

.dashboard-sites-empty h3 {
  margin: 0;
  font-size: 18px;
  color: var(--text);
}

.dashboard-site-card {
  padding: 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--ui-panel-shadow);
  display: flex;
  flex-direction: column;
  gap: 0;
  background: linear-gradient(180deg, var(--ui-panel-bg) 0%, var(--dashboard-surface-gradient-end) 100%);
  border-color: var(--ui-panel-border);
  transform: none;
  height: auto;
  min-height: 0;
  overflow: visible;
}

.dashboard-site-card::before {
  display: none;
}

.dashboard-site-card::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  background: linear-gradient(180deg, var(--primary) 0%, var(--csg-blue-light) 100%);
  opacity: 0.35;
  transition: opacity var(--transition);
}

.dashboard-site-card:hover {
  transform: translateY(-2px);
  border-color: var(--csg-blue-muted);
  box-shadow: var(--shadow-md);
}

.dashboard-site-card:hover::after {
  opacity: 1;
}

.dashboard-site-card-body {
  flex: 0 0 auto;
  padding: 14px 14px 12px;
}

.dashboard-site-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.dashboard-site-card-heading {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  min-width: 0;
  flex: 1;
}

.dashboard-site-card-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.dashboard-site-card-title-row h3 {
  flex: 1 1 auto;
  min-width: 0;
}

.site-address-row {
  grid-template-columns: 1.4fr 0.7fr 0.9fr;
}

@media (max-width: 640px) {
  .site-address-row {
    grid-template-columns: 1fr;
  }
}

.dashboard-site-card h3 {
  font-size: 15px;
  font-weight: 700;
  margin: 0;
  line-height: 1.3;
  color: var(--text);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.dashboard-site-card-address {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-secondary);
  white-space: pre-line;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dashboard-site-count {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  padding: 4px 9px;
  min-width: 0;
  border: 1px solid var(--ui-panel-border);
  border-radius: 999px;
  background: var(--ui-inset-bg);
  box-shadow: none;
  white-space: nowrap;
}

.dashboard-site-count-num {
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: var(--text-secondary);
}

.dashboard-site-count-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--text-muted);
}

.dashboard-site-count--active {
  background: color-mix(in srgb, var(--dashboard-site-count-active-num) 14%, var(--ui-inset-bg));
  border-color: color-mix(in srgb, var(--dashboard-site-count-active-num) 34%, var(--ui-panel-border));
}

.dashboard-site-count--active .dashboard-site-count-num {
  color: var(--dashboard-site-count-active-num);
}

.dashboard-site-count--active .dashboard-site-count-label {
  color: var(--dashboard-site-count-active-label);
}

.dashboard-site-delete-btn {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition);
  box-shadow: var(--shadow-sm);
}

.dashboard-site-delete-btn:not(:disabled):not(.dashboard-site-delete-blocked-trigger):hover,
.dashboard-site-delete-btn:not(:disabled):not(.dashboard-site-delete-blocked-trigger):focus-visible {
  color: #fff;
  background: #B91C1C;
  border-color: #991B1B;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(220, 38, 38, 0.35);
}

.dashboard-site-delete-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.dashboard-site-delete-btn--locked {
  opacity: 0.45;
  box-shadow: none;
  cursor: pointer;
}

.dashboard-site-delete-blocked-trigger:hover,
.dashboard-site-delete-blocked-trigger:focus-visible {
  opacity: 1;
  color: var(--primary);
  border-color: var(--primary);
  background: rgba(0, 114, 188, 0.08);
  outline: none;
}

.dashboard-site-blocked-note {
  display: none;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 12px 14px;
  border-top: 1px solid rgba(0, 114, 188, 0.22);
  border-bottom: 1px solid rgba(0, 114, 188, 0.22);
  background: color-mix(in srgb, var(--primary) 10%, var(--ui-panel-bg));
}

.dashboard-site-card.is-blocked-note-open .dashboard-site-blocked-note {
  display: flex;
  animation: dashboard-blocked-note-in 0.16s ease;
}

.dashboard-site-card.is-blocked-note-open .dashboard-site-delete-blocked-trigger {
  opacity: 1;
  color: var(--primary);
  border-color: var(--primary);
  background: rgba(0, 114, 188, 0.08);
}

@keyframes dashboard-blocked-note-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.dashboard-site-blocked-note__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  flex-shrink: 0;
  color: var(--primary);
}

.dashboard-site-blocked-note__icon svg {
  width: 18px;
  height: 18px;
}

.dashboard-site-blocked-note__text {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--text);
}

.dashboard-site-card-actions {
  margin-top: 0;
  padding: 10px 12px 12px;
  border-top: 1px solid var(--border-light);
  background: var(--dashboard-card-actions-bg);
}

/* Accent command buttons — dashboard site cards & gate hub (shared) */
.dashboard-accent-cmd-bar {
  width: 100%;
  gap: 5px;
  padding: 4px;
  border: 1px solid var(--ui-panel-border);
  border-radius: var(--radius-sm);
  background: var(--ui-inset-bg);
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
}

.dashboard-accent-cmd-bar .dashboard-cmd {
  flex: 1 1 0;
  justify-content: center;
  align-items: center;
  min-height: 34px;
  min-width: 0;
  padding: 7px 10px;
  gap: 7px;
  color: var(--text);
  font-size: 12px;
  border-radius: calc(var(--radius-sm) - 3px);
}

.dashboard-accent-cmd-bar .dashboard-cmd__text {
  font-weight: 600;
  letter-spacing: 0.02em;
}

.dashboard-cmd--yard,
.gate-btn-checkin {
  --cmd-accent: #6BA3D6;
  --cmd-accent-soft: color-mix(in srgb, #6BA3D6 36%, var(--ui-panel-border));
}

.dashboard-cmd--edit,
.gate-btn-checkout {
  --cmd-accent: #DDB56A;
  --cmd-accent-soft: color-mix(in srgb, #DDB56A 36%, var(--ui-panel-border));
}

.dashboard-cmd--neutral {
  --cmd-accent: var(--primary);
  --cmd-accent-soft: color-mix(in srgb, var(--primary) 36%, var(--ui-panel-border));
}

.dashboard-cmd--yard,
.dashboard-cmd--edit,
.dashboard-cmd--neutral,
.gate-btn-checkin,
.gate-btn-checkout {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--text);
  background: var(--ui-panel-bg);
  border: 1px solid var(--cmd-accent-soft);
  box-shadow: none;
  transition:
    color 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.dashboard-cmd--yard::after,
.dashboard-cmd--edit::after,
.dashboard-cmd--neutral::after,
.gate-btn-checkin::after,
.gate-btn-checkout::after {
  content: '';
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 0;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--cmd-accent);
  opacity: 0.72;
  transition:
    opacity 0.18s ease,
    left 0.18s ease,
    right 0.18s ease;
  pointer-events: none;
}

.dashboard-cmd__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--cmd-accent);
}

.dashboard-cmd__icon svg {
  width: 14px;
  height: 14px;
}

.dashboard-cmd--yard .dashboard-cmd__prompt,
.dashboard-cmd--edit .dashboard-cmd__prompt,
.dashboard-cmd--neutral .dashboard-cmd__prompt,
.gate-btn-checkin::before,
.gate-btn-checkout::before {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  flex-shrink: 0;
  background: none;
  color: var(--cmd-accent);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  opacity: 0.9;
}

.gate-btn-checkin::before,
.gate-btn-checkout::before {
  content: '>';
}

.dashboard-cmd--yard:hover,
.dashboard-cmd--yard:focus-visible,
.dashboard-cmd--edit:hover,
.dashboard-cmd--edit:focus-visible,
.dashboard-cmd--neutral:hover,
.dashboard-cmd--neutral:focus-visible,
.gate-btn-checkin:hover,
.gate-btn-checkin:focus-visible,
.gate-btn-checkout:hover,
.gate-btn-checkout:focus-visible {
  color: var(--text);
  background: color-mix(in srgb, var(--cmd-accent) 7%, var(--ui-panel-bg));
  border-color: var(--cmd-accent);
  box-shadow: 0 1px 6px color-mix(in srgb, var(--cmd-accent) 12%, transparent);
  transform: translateY(-1px);
  outline: none;
}

.dashboard-cmd--yard:hover::after,
.dashboard-cmd--yard:focus-visible::after,
.dashboard-cmd--edit:hover::after,
.dashboard-cmd--edit:focus-visible::after,
.dashboard-cmd--neutral:hover::after,
.dashboard-cmd--neutral:focus-visible::after,
.gate-btn-checkin:hover::after,
.gate-btn-checkin:focus-visible::after,
.gate-btn-checkout:hover::after,
.gate-btn-checkout:focus-visible::after {
  opacity: 1;
  left: 8%;
  right: 8%;
}

.dashboard-cmd--yard:active,
.dashboard-cmd--edit:active,
.dashboard-cmd--neutral:active,
.gate-btn-checkin:active,
.gate-btn-checkout:active {
  transform: translateY(0);
  box-shadow: none;
}

.dashboard-cmd--yard:focus-visible,
.dashboard-cmd--edit:focus-visible,
.dashboard-cmd--neutral:focus-visible,
.gate-btn-checkin:focus-visible,
.gate-btn-checkout:focus-visible {
  box-shadow:
    0 1px 6px color-mix(in srgb, var(--cmd-accent) 12%, transparent),
    0 0 0 2px color-mix(in srgb, var(--cmd-accent) 28%, transparent);
}

.dashboard-accent-cmd-bar .dashboard-cmd--yard:hover,
.dashboard-accent-cmd-bar .dashboard-cmd--yard:focus-visible,
.dashboard-accent-cmd-bar .dashboard-cmd--edit:hover,
.dashboard-accent-cmd-bar .dashboard-cmd--edit:focus-visible,
.dashboard-accent-cmd-bar .dashboard-cmd--neutral:hover,
.dashboard-accent-cmd-bar .dashboard-cmd--neutral:focus-visible {
  background: color-mix(in srgb, var(--cmd-accent) 7%, var(--ui-panel-bg));
  border-color: var(--cmd-accent);
}

.dashboard-accent-cmd-bar--toolbar {
  width: auto;
  max-width: 100%;
  flex: 0 1 auto;
  flex-wrap: wrap;
}

/* Toolbar bars size to label content — avoid equal flex splits that clip long text */
.dashboard-accent-cmd-bar--toolbar .dashboard-cmd {
  flex: 0 1 auto;
  min-width: max-content;
  overflow: visible;
}

.dashboard-accent-cmd-bar--toolbar .dashboard-cmd__text {
  flex-shrink: 0;
}

.dashboard-accent-cmd--compact {
  min-height: 30px;
  padding: 6px 10px;
  font-size: 11px;
}

.dashboard-accent-cmd--compact .dashboard-cmd__prompt,
.dashboard-accent-cmd--compact .dashboard-cmd__icon {
  width: 14px;
  height: 14px;
  font-size: 9px;
}

.dashboard-accent-cmd--compact .dashboard-cmd__icon svg {
  width: 12px;
  height: 12px;
}

[data-theme="dark"] .dashboard-accent-cmd-bar {
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.18);
}

[data-theme="dark"] .dashboard-cmd--yard,
[data-theme="dark"] .dashboard-cmd--edit,
[data-theme="dark"] .dashboard-cmd--neutral,
[data-theme="dark"] .gate-btn-checkin,
[data-theme="dark"] .gate-btn-checkout {
  background: color-mix(in srgb, var(--ui-panel-bg) 88%, var(--cmd-accent) 12%);
  border-color: color-mix(in srgb, var(--cmd-accent) 46%, var(--ui-panel-border));
}

[data-theme="dark"] .dashboard-cmd--yard:hover,
[data-theme="dark"] .dashboard-cmd--yard:focus-visible,
[data-theme="dark"] .dashboard-cmd--edit:hover,
[data-theme="dark"] .dashboard-cmd--edit:focus-visible,
[data-theme="dark"] .dashboard-cmd--neutral:hover,
[data-theme="dark"] .dashboard-cmd--neutral:focus-visible,
[data-theme="dark"] .gate-btn-checkin:hover,
[data-theme="dark"] .gate-btn-checkin:focus-visible,
[data-theme="dark"] .gate-btn-checkout:hover,
[data-theme="dark"] .gate-btn-checkout:focus-visible {
  background: color-mix(in srgb, var(--cmd-accent) 14%, var(--ui-panel-bg));
}

@media (max-width: 420px) {
  .dashboard-accent-cmd-bar {
    flex-direction: column;
    gap: 4px;
  }

  .dashboard-accent-cmd-bar .dashboard-cmd {
    width: 100%;
  }
}

/* Accent outline — standard .btn-primary / .btn-secondary in app UI & modals */
.app-shell--staff-portal .btn-primary:not(.btn-danger),
.app-shell--customer-portal .btn-primary:not(.btn-danger),
.modal-overlay .btn-primary:not(.btn-danger) {
  --cmd-accent: #6BA3D6;
  --cmd-accent-soft: color-mix(in srgb, #6BA3D6 36%, var(--ui-panel-border));
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--text);
  background: var(--ui-panel-bg);
  border: 1px solid var(--cmd-accent-soft);
  box-shadow: none;
  font-family: var(--terminal-mono);
  letter-spacing: 0.02em;
  transition:
    color 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.app-shell--staff-portal .btn-secondary,
.app-shell--customer-portal .btn-secondary,
.modal-overlay .btn-secondary {
  --cmd-accent: var(--primary);
  --cmd-accent-soft: color-mix(in srgb, var(--primary) 28%, var(--ui-panel-border));
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--text);
  background: var(--ui-panel-bg);
  border: 1px solid var(--cmd-accent-soft);
  box-shadow: none;
  font-family: var(--terminal-mono);
  letter-spacing: 0.02em;
  transition:
    color 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.app-shell--staff-portal .btn-primary:not(.btn-danger)::after,
.app-shell--customer-portal .btn-primary:not(.btn-danger)::after,
.modal-overlay .btn-primary:not(.btn-danger)::after,
.app-shell--staff-portal .btn-secondary::after,
.app-shell--customer-portal .btn-secondary::after,
.modal-overlay .btn-secondary::after {
  content: '';
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 0;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--cmd-accent);
  opacity: 0.72;
  pointer-events: none;
  transition:
    opacity 0.18s ease,
    left 0.18s ease,
    right 0.18s ease;
}

.app-shell--staff-portal .btn-primary:not(.btn-danger):hover,
.app-shell--staff-portal .btn-primary:not(.btn-danger):focus-visible,
.app-shell--customer-portal .btn-primary:not(.btn-danger):hover,
.app-shell--customer-portal .btn-primary:not(.btn-danger):focus-visible,
.modal-overlay .btn-primary:not(.btn-danger):hover,
.modal-overlay .btn-primary:not(.btn-danger):focus-visible,
.app-shell--staff-portal .btn-secondary:hover,
.app-shell--staff-portal .btn-secondary:focus-visible,
.app-shell--customer-portal .btn-secondary:hover,
.app-shell--customer-portal .btn-secondary:focus-visible,
.modal-overlay .btn-secondary:hover,
.modal-overlay .btn-secondary:focus-visible {
  color: var(--text);
  background: color-mix(in srgb, var(--cmd-accent) 7%, var(--ui-panel-bg));
  border-color: var(--cmd-accent);
  box-shadow: 0 1px 6px color-mix(in srgb, var(--cmd-accent) 12%, transparent);
  transform: translateY(-1px);
}

.app-shell--staff-portal .btn-primary:not(.btn-danger):hover::after,
.app-shell--staff-portal .btn-primary:not(.btn-danger):focus-visible::after,
.app-shell--customer-portal .btn-primary:not(.btn-danger):hover::after,
.app-shell--customer-portal .btn-primary:not(.btn-danger):focus-visible::after,
.modal-overlay .btn-primary:not(.btn-danger):hover::after,
.modal-overlay .btn-primary:not(.btn-danger):focus-visible::after,
.app-shell--staff-portal .btn-secondary:hover::after,
.app-shell--staff-portal .btn-secondary:focus-visible::after,
.app-shell--customer-portal .btn-secondary:hover::after,
.app-shell--customer-portal .btn-secondary:focus-visible::after,
.modal-overlay .btn-secondary:hover::after,
.modal-overlay .btn-secondary:focus-visible::after {
  opacity: 1;
  left: 8%;
  right: 8%;
}

.app-shell--staff-portal .btn-primary:not(.btn-danger):active,
.app-shell--customer-portal .btn-primary:not(.btn-danger):active,
.modal-overlay .btn-primary:not(.btn-danger):active,
.app-shell--staff-portal .btn-secondary:active,
.app-shell--customer-portal .btn-secondary:active,
.modal-overlay .btn-secondary:active {
  transform: translateY(0);
  box-shadow: none;
}

.app-shell--staff-portal .btn-primary:not(.btn-danger):focus-visible,
.app-shell--customer-portal .btn-primary:not(.btn-danger):focus-visible,
.modal-overlay .btn-primary:not(.btn-danger):focus-visible,
.app-shell--staff-portal .btn-secondary:focus-visible,
.app-shell--customer-portal .btn-secondary:focus-visible,
.modal-overlay .btn-secondary:focus-visible {
  outline: none;
  box-shadow:
    0 1px 6px color-mix(in srgb, var(--cmd-accent) 12%, transparent),
    0 0 0 2px color-mix(in srgb, var(--cmd-accent) 28%, transparent);
}

.app-shell--staff-portal .btn-primary:not(.btn-danger),
.modal-overlay .btn-primary:not(.btn-danger) {
  --cmd-accent: var(--portal-staff-accent);
  --cmd-accent-soft: color-mix(in srgb, var(--portal-staff-accent) 36%, var(--ui-panel-border));
}

.app-shell--customer-portal .btn-primary:not(.btn-danger) {
  --cmd-accent: var(--portal-customer-accent);
  --cmd-accent-soft: color-mix(in srgb, var(--portal-customer-accent) 36%, var(--ui-panel-border));
}

[data-theme="dark"] .app-shell--staff-portal .btn-primary:not(.btn-danger),
[data-theme="dark"] .app-shell--customer-portal .btn-primary:not(.btn-danger),
[data-theme="dark"] .modal-overlay .btn-primary:not(.btn-danger),
[data-theme="dark"] .app-shell--staff-portal .btn-secondary,
[data-theme="dark"] .app-shell--customer-portal .btn-secondary,
[data-theme="dark"] .modal-overlay .btn-secondary {
  background: color-mix(in srgb, var(--ui-panel-bg) 88%, var(--cmd-accent) 12%);
  border-color: color-mix(in srgb, var(--cmd-accent) 46%, var(--ui-panel-border));
}

[data-theme="dark"] .app-shell--staff-portal .btn-primary:not(.btn-danger):hover,
[data-theme="dark"] .app-shell--staff-portal .btn-primary:not(.btn-danger):focus-visible,
[data-theme="dark"] .app-shell--customer-portal .btn-primary:not(.btn-danger):hover,
[data-theme="dark"] .app-shell--customer-portal .btn-primary:not(.btn-danger):focus-visible,
[data-theme="dark"] .modal-overlay .btn-primary:not(.btn-danger):hover,
[data-theme="dark"] .modal-overlay .btn-primary:not(.btn-danger):focus-visible,
[data-theme="dark"] .app-shell--staff-portal .btn-secondary:hover,
[data-theme="dark"] .app-shell--staff-portal .btn-secondary:focus-visible,
[data-theme="dark"] .app-shell--customer-portal .btn-secondary:hover,
[data-theme="dark"] .app-shell--customer-portal .btn-secondary:focus-visible,
[data-theme="dark"] .modal-overlay .btn-secondary:hover,
[data-theme="dark"] .modal-overlay .btn-secondary:focus-visible {
  background: color-mix(in srgb, var(--cmd-accent) 14%, var(--ui-panel-bg));
}

.help-desk-actions,
.brand-config-actions,
.modal-footer,
.form-actions-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.trailer-detail-panel-toolbar .btn-primary,
.trailer-detail-panel-toolbar .btn-secondary,
.trailer-detail-panel-toolbar .dashboard-cmd,
.action-links .btn-primary,
.action-links .btn-secondary,
.action-links .dashboard-cmd {
  min-height: 30px;
}

.action-links .dashboard-accent-cmd--compact {
  min-height: 28px;
  padding: 5px 8px;
  font-size: 11px;
}

.trailer-detail-table.work-orders-table td.action-links,
.trailer-detail-table.customer-records-table td.action-links {
  min-width: max(148px, 100%);
  white-space: nowrap;
}

@media (max-width: 720px) {
  .dashboard-panel-stats.module-stats-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .dashboard-panel-stats .dashboard-stat-card {
    padding: 12px 8px;
  }

  .dashboard-panel-stats .dashboard-stat-card h3 {
    font-size: 22px;
  }
}

/* =============================================================================
   Row chips in edit tab
   ============================================================================= */
.row-chip {
  display: inline-flex;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 13px;
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

/* =============================================================================
   Trailer detail
   ============================================================================= */
.detail-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
  background: var(--surface);
  padding: 20px 24px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.detail-header-main {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
}

.detail-header-identity {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.detail-header-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.detail-header-meta .badge {
  padding: 4px 10px;
  font-size: 10px;
}

.detail-header-location {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--primary-dark);
  background: var(--csg-blue-pale);
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--csg-blue-muted);
  line-height: 1.2;
}

.detail-header-location__icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.9;
}

.detail-header-location--offyard {
  color: var(--text-muted);
  background: var(--bg-subtle);
  border-color: var(--border);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 10px;
  padding: 4px 10px;
}

.detail-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
  flex: 0 0 auto;
}

.detail-header-actions--icons {
  gap: 0;
}

.detail-header-actions-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: var(--radius);
  background: var(--ui-inset-bg, var(--bg-subtle));
  border: 1px solid var(--border-light, var(--border));
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
}

.detail-header-actions .btn {
  white-space: nowrap;
}

.detail-header .location {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--primary-dark);
  background: var(--csg-blue-pale);
  padding: 6px 12px;
  border-radius: 20px;
  border: 1px solid var(--csg-blue-muted);
}

.detail-header .detail-unit-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.section-title {
  background: var(--ui-section-bg);
  padding: 10px 16px;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 24px 0 14px;
  border-left: 5px solid var(--primary);
  border-right: none;
  border-top: none;
  border-bottom: none;
  border-radius: var(--radius-sm);
  color: var(--ui-section-text);
}

.specs-panel {
  background: var(--surface);
  padding: 20px 24px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.spec-condition-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border-light);
}

@media (max-width: 720px) {
  .spec-condition-summary {
    grid-template-columns: 1fr;
  }
}

.spec-condition-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
}

.spec-condition-card--active {
  background: #FFFBFB;
  border-color: #FECACA;
}

.spec-condition-label {
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
}

.spec-condition-value {
  display: flex;
  align-items: center;
  min-height: 28px;
}

.condition-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}

.condition-pill--good { background: #D1FAE5; color: #065F46; }
.condition-pill--fair { background: #FEF3C7; color: #92400E; }
.condition-pill--reconditioned { background: #DBEAFE; color: #1E40AF; }
.condition-pill--storage { background: #E5E7EB; color: #374151; }
.condition-pill--repair { background: #FFEDD5; color: #9A3412; }
.condition-pill--damaged { background: #FEE2E2; color: #991B1B; }
.condition-pill--dot-hold { background: #FEE2E2; color: #7F1D1D; }
.condition-pill--inspection { background: #E0E7FF; color: #4338CA; }
.condition-pill--unknown { background: #F3F4F6; color: #6B7280; }

.spec-condition-desc {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-secondary);
}

.spec-condition-detail {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text);
  word-break: break-word;
}

.spec-condition-card--active .spec-condition-detail {
  color: #991B1B;
}

.spec-condition-empty {
  font-size: 14px;
  color: var(--text-muted);
  font-style: italic;
}

.specs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

.spec-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
}

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

.spec-item .label {
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--primary);
}

.spec-item .value {
  color: var(--text);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.4;
  word-break: break-word;
}

.spec-item .value.is-empty {
  color: var(--text-muted);
  font-weight: 400;
  font-style: italic;
  font-size: 14px;
}

.spec-value--good { color: #047857; }
.spec-value--fair { color: #B45309; }
.spec-value--reconditioned { color: #1D4ED8; }
.spec-value--storage { color: #4B5563; }
.spec-value--repair {
  color: #C2410C;
  font-weight: 700;
}
.spec-value--damaged {
  color: #991B1B;
  font-weight: 700;
}
.spec-value--dot-hold {
  color: #7F1D1D;
  font-weight: 700;
}
.spec-value--inspection { color: #4338CA; }
.spec-value--unknown { color: var(--text-secondary); }

.spec-hint {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--text-secondary);
}

.condition-guide {
  margin: 0 0 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
}

.condition-guide > summary {
  cursor: pointer;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
  list-style: none;
}

.condition-guide > summary::-webkit-details-marker { display: none; }

.condition-guide-list {
  margin: 0;
  padding: 0 14px 12px;
}

.condition-guide-item {
  padding: 8px 0;
  border-top: 1px solid var(--border-light);
}

.condition-guide-item:first-child { border-top: none; }

.condition-guide-item dt {
  font-weight: 700;
  font-size: 13px;
  color: var(--text);
  margin-bottom: 2px;
}

.condition-guide-item dd {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-secondary);
}

.condition-details-help {
  display: block;
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.45;
}

/* Beats .form-group small { margin-top: 4px } on Edit/Add Trailer and Yard Check modals */
.form-group .condition-details-help {
  margin-top: 12px;
}

.condition-details-help.hidden {
  display: none;
}

.gate-section-body .condition-guide {
  margin-top: 12px;
}

.gate-condition-details {
  margin-top: 12px;
}

.gate-condition-details .gate-field {
  margin: 0;
}

.gate-field-control .condition-details-help {
  margin-top: 0;
  display: block;
  line-height: 1.45;
}

.notes-box {
  border: 1px solid var(--border);
  padding: 16px 18px;
  background: var(--surface);
  min-height: 60px;
  white-space: pre-wrap;
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.5;
}

.notes-box--filled {
  color: var(--text);
  font-weight: 500;
  background: var(--bg-subtle);
  border-color: var(--csg-blue-muted);
  border-left: 4px solid var(--primary);
}

/* =============================================================================
   Trailer detail page — higher contrast panels and sections
   ============================================================================= */
.trailer-detail-page .detail-header {
  position: relative;
  overflow: hidden;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 20px;
  background: var(--trailer-detail-header-bg);
  border-color: var(--trailer-detail-header-border);
  box-shadow: var(--shadow-md);
}

.trailer-detail-page .detail-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--primary) 0%,
    color-mix(in srgb, var(--primary) 45%, transparent) 100%
  );
}

.trailer-detail-page .detail-header-location {
  background: var(--trailer-detail-location-bg);
  border-color: var(--trailer-detail-location-border);
  color: var(--trailer-detail-location-text);
}

.trailer-detail-page .detail-header-location--offyard {
  background: var(--trailer-detail-card-bg);
  border-color: var(--trailer-detail-card-border);
  color: var(--text-muted);
}

.trailer-detail-page .detail-header-actions-group {
  background: color-mix(in srgb, var(--trailer-detail-header-bg) 90%, var(--primary) 10%);
  border-color: var(--trailer-detail-header-border);
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06);
}

.trailer-detail-page .detail-header .location {
  background: var(--trailer-detail-location-bg);
  border-color: var(--trailer-detail-location-border);
  color: var(--trailer-detail-location-text);
}

.trailer-detail-page .detail-header .detail-unit-title {
  color: var(--text);
}

.trailer-detail-page .section-title {
  background: var(--trailer-detail-section-bg);
  color: var(--trailer-detail-section-text);
  border-left: 5px solid var(--primary);
  border-right: none;
  border-top: none;
  border-bottom: none;
  margin: 28px 0 0;
}

.trailer-detail-page .detail-header + .section-title {
  margin-top: 28px;
}

@media (max-width: 1024px) {
  .trailer-detail-page .detail-header {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 16px 18px;
    margin-bottom: 18px;
  }

  .trailer-detail-page .detail-header-main {
    width: 100%;
  }

  .trailer-detail-page .detail-header-identity {
    width: 100%;
  }

  .trailer-detail-page .detail-header .detail-unit-title {
    font-size: 1.35rem;
  }

  .trailer-detail-page .detail-header-actions {
    width: 100%;
    margin-left: 0;
    justify-content: flex-end;
  }

  .trailer-detail-page .detail-header-actions-group {
    width: 100%;
    justify-content: flex-end;
  }
}

@media (max-width: 640px) {
  .trailer-detail-page .detail-header {
    gap: 12px;
    padding: 14px 16px;
    margin-bottom: 16px;
  }

  .trailer-detail-page .detail-header-meta {
    gap: 5px;
  }

  .trailer-detail-page .detail-header .detail-unit-title {
    font-size: 1.25rem;
  }

  .trailer-detail-page .detail-header-actions-group {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}

/* =============================================================================
   Unit notes — title + notes box as one block
   ============================================================================= */
.trailer-detail-page .section-title:has(+ .notes-box) {
  margin-bottom: 0;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  border-top: 1px solid var(--trailer-detail-panel-border);
  border-right: 1px solid var(--trailer-detail-panel-border);
}

.trailer-detail-page .section-title + .notes-box {
  margin-top: 0;
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  min-height: 48px;
  padding: 12px 16px;
  background: var(--trailer-detail-panel-bg);
  border-color: var(--trailer-detail-panel-border);
  box-shadow: var(--shadow-md);
  font-size: 14px;
  line-height: 1.55;
}

.trailer-detail-page .section-title + .notes-box.notes-box--filled {
  background: var(--trailer-detail-notes-filled-bg);
  border-color: var(--trailer-detail-notes-filled-border);
  color: var(--text);
  font-weight: 500;
  border-left: 4px solid var(--primary);
}

/* =============================================================================
   Record sections — title + toolbar + table as one block
   ============================================================================= */
.trailer-detail-page .section-title:has(+ .toolbar) {
  margin-bottom: 0;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  border-top: 1px solid var(--trailer-detail-panel-border);
  border-right: 1px solid var(--trailer-detail-panel-border);
}

.trailer-detail-page .section-title + .toolbar {
  margin: 0;
  border-radius: 0;
  border-top: none;
  padding: 8px 14px;
  gap: 8px;
}

.trailer-detail-page .section-title + .toolbar + .table-wrap:has(.table-scroll) {
  margin-top: 0;
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  overflow: hidden;
}

.trailer-detail-page .section-title + .toolbar + .table-wrap:not(:has(.table-scroll)) {
  margin-top: 0;
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
}

.trailer-detail-page .section-title + .table-wrap:has(.table-scroll) {
  margin-top: 0;
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  overflow: hidden;
}

.trailer-detail-page .section-title + .table-wrap:not(:has(.table-scroll)) {
  margin-top: 0;
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
}

.trailer-detail-page .table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}

/* =============================================================================
   History — title + table (no toolbar)
   ============================================================================= */
.trailer-detail-page .section-title:has(+ .table-wrap) {
  margin-bottom: 0;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  border-top: 1px solid var(--trailer-detail-panel-border);
  border-right: 1px solid var(--trailer-detail-panel-border);
}

.trailer-detail-page .toolbar .text-muted {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  flex: 1 1 12rem;
  min-width: 0;
}

.trailer-detail-page .trailer-detail-panel--specs {
  padding: 14px;
}

.trailer-detail-page .trailer-detail-panel--specs .spec-condition-summary {
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--trailer-detail-panel-border);
}

.trailer-detail-page .trailer-detail-panel--specs .spec-condition-card,
.trailer-detail-page .trailer-detail-panel--specs .spec-item {
  background: var(--trailer-record-inset-bg);
  border: 1px solid var(--trailer-record-inset-border);
  border-radius: var(--radius-sm);
}

.trailer-detail-page .trailer-detail-panel--specs .spec-condition-card--active {
  background: color-mix(in srgb, var(--trailer-record-pill-danger-bg) 55%, var(--trailer-record-inset-bg));
  border-color: color-mix(in srgb, var(--trailer-record-pill-danger-bg) 80%, var(--trailer-record-inset-border));
}

.trailer-detail-page .trailer-detail-panel--specs .spec-condition-card--active .spec-condition-detail {
  color: var(--trailer-record-pill-danger-text);
}

.trailer-detail-page .trailer-detail-panel--specs .spec-condition-label,
.trailer-detail-page .trailer-detail-panel--specs .spec-item .label {
  color: var(--trailer-detail-label-color);
}

.trailer-detail-page .trailer-detail-panel--specs .spec-item .value {
  color: var(--text);
  font-weight: 600;
  font-size: 14px;
}

.trailer-detail-page .trailer-detail-panel--specs .spec-condition-desc {
  color: var(--text-muted);
}

.trailer-detail-page .trailer-detail-panel--specs .specs-grid {
  gap: 10px;
}

.trailer-detail-page .trailer-detail-panel--specs .spec-service-due-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
}

@media (max-width: 720px) {
  .trailer-detail-page .trailer-detail-panel--specs .spec-service-due-row {
    grid-template-columns: 1fr;
  }
}

.trailer-detail-page .trailer-detail-panel--specs .spec-service-due-row .spec-service-due-card {
  height: 100%;
  min-height: 100%;
}

.trailer-detail-page .trailer-detail-panel--specs .spec-maintenance-notes-card {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  background: var(--trailer-record-inset-bg);
  border: 1px solid var(--trailer-record-inset-border);
  border-radius: var(--radius-sm);
}

.trailer-detail-page .trailer-detail-panel--specs .spec-maintenance-notes-card__body {
  padding: 14px 16px;
  min-height: 72px;
  background: color-mix(in srgb, var(--trailer-record-inset-bg) 88%, var(--bg-subtle));
  border: 1px solid var(--trailer-record-inset-border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--text);
  word-break: break-word;
  white-space: pre-wrap;
}

.trailer-detail-page .trailer-detail-panel--specs .spec-maintenance-notes-card__body--filled {
  background: var(--trailer-detail-notes-filled-bg, var(--trailer-record-inset-bg));
  border-color: var(--trailer-detail-notes-filled-border, var(--trailer-record-inset-border));
  border-left: 3px solid var(--primary);
}

.trailer-detail-page .trailer-detail-panel--specs .spec-service-due-card {
  gap: 8px;
  padding: 14px 16px;
}

.trailer-detail-page .trailer-detail-panel--specs .spec-service-due-card__main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-height: 28px;
}

.trailer-detail-page .trailer-detail-panel--specs .spec-service-due-card__status {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
}

.trailer-detail-page .trailer-detail-panel--specs .spec-service-due-card__value {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
}

.trailer-detail-page .trailer-detail-panel--specs .spec-service-due-card__hint {
  margin: 0;
}

.trailer-detail-page .trailer-detail-panel--specs .spec-service-due-card--neutral {
  background: var(--trailer-record-inset-bg);
  border-color: var(--trailer-record-inset-border);
}

.trailer-detail-page .trailer-detail-panel--specs .spec-service-due-card--ok {
  background: color-mix(in srgb, var(--trailer-record-pill-success-bg) 55%, var(--trailer-record-inset-bg));
  border-color: color-mix(in srgb, var(--trailer-record-pill-success-bg) 85%, var(--trailer-record-inset-border));
}

.trailer-detail-page .trailer-detail-panel--specs .spec-service-due-card--ok .spec-service-due-card__value {
  color: var(--trailer-record-pill-success-text);
}

.trailer-detail-page .trailer-detail-panel--specs .spec-service-due-card--dueSoon {
  background: color-mix(in srgb, var(--trailer-record-pill-warning-bg) 55%, var(--trailer-record-inset-bg));
  border-color: color-mix(in srgb, var(--trailer-record-pill-warning-bg) 85%, var(--trailer-record-inset-border));
}

.trailer-detail-page .trailer-detail-panel--specs .spec-service-due-card--dueSoon .spec-service-due-card__status,
.trailer-detail-page .trailer-detail-panel--specs .spec-service-due-card--dueSoon .spec-service-due-card__value {
  color: var(--trailer-record-pill-warning-text);
}

.trailer-detail-page .trailer-detail-panel--specs .spec-service-due-card--due90 {
  background: color-mix(in srgb, var(--trailer-record-pill-info-bg) 55%, var(--trailer-record-inset-bg));
  border-color: color-mix(in srgb, var(--trailer-record-pill-info-bg) 85%, var(--trailer-record-inset-border));
}

.trailer-detail-page .trailer-detail-panel--specs .spec-service-due-card--due90 .spec-service-due-card__status,
.trailer-detail-page .trailer-detail-panel--specs .spec-service-due-card--due90 .spec-service-due-card__value {
  color: var(--trailer-record-pill-info-text);
}

.trailer-detail-page .trailer-detail-panel--specs .spec-service-due-card--overdue {
  background: color-mix(in srgb, var(--trailer-record-pill-danger-bg) 55%, var(--trailer-record-inset-bg));
  border-color: color-mix(in srgb, var(--trailer-record-pill-danger-bg) 80%, var(--trailer-record-inset-border));
}

.trailer-detail-page .trailer-detail-panel--specs .spec-service-due-card--overdue .spec-service-due-card__status,
.trailer-detail-page .trailer-detail-panel--specs .spec-service-due-card--overdue .spec-service-due-card__value {
  color: var(--trailer-record-pill-danger-text);
}

.trailer-detail-page .trailer-detail-panel--specs .condition-pill {
  padding: 3px 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border: none;
}

.trailer-detail-page .trailer-detail-panel--specs .condition-pill--good {
  background: var(--trailer-record-pill-success-bg);
  color: var(--trailer-record-pill-success-text);
}

.trailer-detail-page .trailer-detail-panel--specs .condition-pill--fair {
  background: var(--trailer-record-pill-warning-bg);
  color: var(--trailer-record-pill-warning-text);
}

.trailer-detail-page .trailer-detail-panel--specs .condition-pill--reconditioned {
  background: var(--trailer-record-pill-info-bg);
  color: var(--trailer-record-pill-info-text);
}

.trailer-detail-page .trailer-detail-panel--specs .condition-pill--storage {
  background: var(--trailer-record-pill-neutral-bg);
  color: var(--trailer-record-pill-neutral-text);
}

.trailer-detail-page .trailer-detail-panel--specs .condition-pill--repair {
  background: color-mix(in srgb, var(--trailer-record-pill-warning-bg) 70%, var(--trailer-record-pill-danger-bg));
  color: var(--trailer-record-pill-danger-text);
}

.trailer-detail-page .trailer-detail-panel--specs .condition-pill--damaged {
  background: var(--trailer-record-pill-danger-bg);
  color: var(--trailer-record-pill-danger-text);
}

.trailer-detail-page .trailer-detail-panel--specs .condition-pill--dot-hold {
  background: var(--trailer-record-pill-danger-bg);
  color: var(--trailer-record-pill-danger-text);
}

.trailer-detail-page .trailer-detail-panel--specs .condition-pill--inspection {
  background: var(--trailer-record-pill-purple-bg);
  color: var(--trailer-record-pill-purple-text);
}

.trailer-detail-page .trailer-detail-panel--specs .condition-pill--unknown {
  background: var(--trailer-record-pill-neutral-bg);
  color: var(--trailer-record-pill-neutral-text);
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: 11px;
}

.trailer-field-history-value {
  white-space: pre-wrap;
  word-break: break-word;
}

.trailer-field-history-condition {
  font-size: 12px;
  margin-top: 2px;
}

.trailer-field-history-table td {
  vertical-align: top;
}

.dot-next-readonly {
  display: flex;
  align-items: center;
  min-height: 38px;
  background: var(--trailer-record-inset-bg);
  border-color: var(--trailer-record-inset-border);
  color: var(--text);
  font-weight: 600;
}

.trailer-detail-page .notes-box {
  background: var(--trailer-detail-panel-bg);
  border-color: var(--trailer-detail-panel-border);
  box-shadow: var(--shadow-md);
}

.trailer-detail-page .notes-box--filled {
  background: var(--trailer-detail-notes-filled-bg);
  border-color: var(--trailer-detail-notes-filled-border);
  border-left: 4px solid var(--primary);
  color: var(--text);
  font-weight: 500;
}

.trailer-detail-page .table-wrap {
  border-color: var(--trailer-detail-panel-border);
  background: var(--trailer-detail-panel-bg);
  box-shadow: var(--shadow-md);
}

.trailer-detail-page .data-table th {
  background: var(--trailer-detail-table-header-bg);
  color: var(--trailer-detail-table-header-text);
  border-bottom-color: var(--trailer-detail-panel-border);
}

.trailer-detail-page .data-table td {
  border-bottom-color: var(--trailer-detail-card-border);
  color: var(--text);
}

.trailer-detail-page .data-table tbody tr:nth-child(even):not(.customer-record-current--off-yard) {
  background: var(--trailer-detail-table-stripe);
}

.trailer-detail-page .data-table tbody tr:hover {
  background: var(--trailer-detail-table-hover);
}

.trailer-detail-page .trailer-detail-panel-table .data-table th,
.trailer-detail-page .trailer-detail-panel-table .data-table td {
  vertical-align: middle;
}

.trailer-detail-page .toolbar {
  background: var(--trailer-detail-panel-bg);
  border: 1px solid var(--trailer-detail-panel-border);
  border-radius: var(--radius);
  padding: 12px 16px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 0;
}

.trailer-detail-page .page-back-btn {
  margin-bottom: 12px;
}

[data-theme="dark"] .trailer-detail-page .spec-value--good { color: #6EE7B7; }
[data-theme="dark"] .trailer-detail-page .spec-value--fair { color: #FCD34D; }
[data-theme="dark"] .trailer-detail-page .spec-value--reconditioned { color: #93C5FD; }
[data-theme="dark"] .trailer-detail-page .spec-value--storage { color: #CBD5E1; }
[data-theme="dark"] .trailer-detail-page .spec-value--repair { color: #FDBA74; }
[data-theme="dark"] .trailer-detail-page .spec-value--damaged { color: #FCA5A5; }
[data-theme="dark"] .trailer-detail-page .spec-value--dot-hold { color: #FCA5A5; }
[data-theme="dark"] .trailer-detail-page .spec-value--inspection { color: #C4B5FD; }

[data-theme="dark"] .trailer-detail-page .detail-header,
[data-theme="dark"] .trailer-detail-page .trailer-detail-panel,
[data-theme="dark"] .trailer-detail-page .customer-records-panel,
[data-theme="dark"] .trailer-detail-page .table-wrap,
[data-theme="dark"] .trailer-detail-page .toolbar,
[data-theme="dark"] .trailer-detail-page .notes-box {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(148, 163, 184, 0.08);
}

[data-theme="dark"] .trailer-detail-page .detail-header-actions-group {
  background: rgba(0, 0, 0, 0.22);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.28);
}

[data-theme="dark"] .trailer-detail-page .spec-item .value.is-empty,
[data-theme="dark"] .trailer-detail-page .spec-condition-empty,
[data-theme="dark"] .trailer-detail-page .text-muted {
  color: #CBD5E1;
}

[data-theme="dark"] .trailer-detail-page .spec-condition-desc {
  color: #E2E8F0;
}

[data-theme="dark"] .trailer-detail-page .data-table td {
  border-bottom-color: #475569;
}

[data-theme="dark"] .page-back-btn {
  background: var(--ui-panel-bg);
  border-color: var(--ui-toolbar-border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .page-back-btn:hover,
[data-theme="dark"] .page-back-btn:focus-visible {
  background: rgba(56, 189, 248, 0.08);
  border-color: rgba(56, 189, 248, 0.45);
  color: #38BDF8;
}

[data-theme="dark"] .main-content .spec-value--good { color: #6EE7B7; }
[data-theme="dark"] .main-content .spec-value--fair { color: #FCD34D; }
[data-theme="dark"] .main-content .spec-value--reconditioned { color: #93C5FD; }
[data-theme="dark"] .main-content .spec-value--storage { color: #CBD5E1; }
[data-theme="dark"] .main-content .spec-value--repair { color: #FDBA74; }
[data-theme="dark"] .main-content .spec-value--damaged { color: #FCA5A5; }
[data-theme="dark"] .main-content .spec-value--dot-hold { color: #FCA5A5; }
[data-theme="dark"] .main-content .spec-value--inspection { color: #C4B5FD; }
[data-theme="dark"] .main-content .spec-value--unknown { color: #CBD5E1; }

[data-theme="dark"] .condition-pill--good {
  background: var(--trailer-record-pill-success-bg);
  color: var(--trailer-record-pill-success-text);
}

[data-theme="dark"] .condition-pill--fair {
  background: var(--trailer-record-pill-warning-bg);
  color: var(--trailer-record-pill-warning-text);
}

[data-theme="dark"] .condition-pill--reconditioned {
  background: var(--trailer-record-pill-info-bg);
  color: var(--trailer-record-pill-info-text);
}

[data-theme="dark"] .condition-pill--storage {
  background: var(--trailer-record-pill-neutral-bg);
  color: var(--trailer-record-pill-neutral-text);
}

[data-theme="dark"] .condition-pill--repair {
  background: color-mix(in srgb, var(--trailer-record-pill-warning-bg) 70%, var(--trailer-record-pill-danger-bg));
  color: var(--trailer-record-pill-danger-text);
}

[data-theme="dark"] .condition-pill--damaged,
[data-theme="dark"] .condition-pill--dot-hold {
  background: var(--trailer-record-pill-danger-bg);
  color: var(--trailer-record-pill-danger-text);
}

[data-theme="dark"] .condition-pill--inspection {
  background: var(--trailer-record-pill-purple-bg);
  color: var(--trailer-record-pill-purple-text);
}

[data-theme="dark"] .condition-pill--unknown {
  background: var(--trailer-record-pill-neutral-bg);
  color: var(--trailer-record-pill-neutral-text);
}

/* =============================================================================
   Modal
   ============================================================================= */
.modal-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 20px;
  background: transparent;
  pointer-events: none;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 20, 25, 0.6);
  z-index: 0;
  pointer-events: auto;
}

.modal-overlay > .modal {
  position: relative;
  z-index: 1;
  pointer-events: auto;
}

.modal {
  background: var(--ui-panel-bg);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--ui-panel-border);
  pointer-events: auto;
  color: var(--text);
}

.modal.modal--wide {
  max-width: 760px;
}

.modal.modal--add-trailer {
  max-width: 900px;
}

.modal.modal--add-trailer .tire-section,
.modal.modal--add-trailer .photos-section-wrap {
  margin-top: 4px;
}

.modal.modal--add-trailer .tire-position-picker {
  padding: 18px;
}

.modal.modal--add-trailer .tire-position-side__list {
  gap: 12px;
}

.modal.modal--add-trailer .tire-position-item {
  gap: 8px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--ui-panel-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--ui-table-header-bg);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.modal-header h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}

.modal-body {
  padding: 24px;
  color: var(--text);
}

.modal-body :is(p, li, label, span, div, strong, em) {
  color: inherit;
}

.modal-body strong {
  color: var(--text);
  font-weight: 700;
}

.modal-body .text-muted {
  color: var(--ui-muted-readable, var(--text-muted));
}

.modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--ui-panel-border);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  background: var(--ui-card-bg);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.modal-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--text-muted);
  line-height: 1;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  transition: all var(--transition);
  pointer-events: auto;
  position: relative;
  z-index: 2;
}
.modal-close:hover { background: var(--border); color: var(--text); }

/* =============================================================================
   Alerts
   ============================================================================= */
.alert {
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
  font-size: 13px;
  font-weight: 500;
}

.alert-error { background: #FEF2F2; color: #991B1B; border: 1px solid #FECACA; }
.alert-success { background: #F0FDF4; color: #166534; border: 1px solid #BBF7D0; }
.alert-info { background: var(--csg-blue-pale); color: var(--primary-dark); border: 1px solid var(--csg-blue-muted); }

/* =============================================================================
   Panels
   ============================================================================= */
.panel {
  border: 1px solid var(--ui-panel-border);
  border-radius: var(--radius-lg);
  margin-bottom: 20px;
  background: var(--ui-panel-bg);
  box-shadow: var(--ui-panel-shadow);
  overflow: hidden;
}

.panel-header {
  background: var(--ui-table-header-bg);
  padding: 14px 20px;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ui-table-header-text);
  border-bottom: 1px solid var(--ui-panel-border);
}

.panel-body { padding: 20px; }

/* =============================================================================
   Support → Email Configuration
   SMTP client panel and shared email config actions.
   ============================================================================= */
.email-config-panel {
  max-width: 720px;
}

.email-config-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.brand-config-panel {
  max-width: 720px;
}

.brand-config-intro {
  margin: 0 0 24px;
  max-width: 56ch;
}

.brand-config-section {
  margin-bottom: 28px;
}

.brand-config-section__title {
  margin: 0 0 14px;
  font-size: 1rem;
  font-weight: 600;
}

.brand-config-section__desc {
  margin: -6px 0 14px;
  max-width: 56ch;
}

.brand-config-logo-picker .brand-config-preview-wrap {
  width: 120px;
  height: 120px;
}

.brand-config-preview-host {
  width: 100%;
  max-width: 320px;
}

.brand-config-classic-preview {
  width: 100%;
}

.brand-config-classic-preview__card {
  background: var(--surface-elevated, #fff);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  padding: 28px 32px 24px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}

.brand-config-classic-preview__card .login-classic-logo-wrap {
  width: 100%;
}

.brand-config-preview {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: var(--radius-md, 8px);
  background: var(--surface-elevated, #fff);
}

.brand-config-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

/* =============================================================================
   Support → Email Configuration → Email Schedules
   Multi-schedule list (per report type), schedule editor modal, and filter grid.
   Row striping uses .billing-row--stripe (JS) instead of nth-child when filters hide rows.
   ============================================================================= */
.email-schedule-module-panel {
  max-width: none;
}

.email-schedule-module-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.email-schedule-module-head .btn,
.email-schedule-module-head .dashboard-cmd {
  flex-shrink: 0;
}

.email-schedule-module-title {
  margin: 0 0 8px;
  font-size: 1.15rem;
}

.email-schedule-list-wrap {
  overflow-x: auto;
}

.email-schedule-list td {
  vertical-align: top;
}

.email-schedule-filter-summary {
  min-width: 180px;
  max-width: 280px;
  white-space: normal;
  font-size: 12px;
  color: var(--text-muted);
}

.email-schedule-row--disabled td {
  opacity: 0.72;
}

.email-schedule-empty {
  padding: 28px 16px;
}

.email-schedule-filter-title {
  margin: 0 0 4px;
  font-size: 0.95rem;
}

.email-schedule-filter-intro {
  margin: 0 0 12px;
}

.email-schedule-filter-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.email-schedule-filter-span {
  grid-column: 1 / -1;
}

.email-schedule-modal .billing-customer-picker {
  margin-top: 8px;
}

@media (max-width: 720px) {
  .email-schedule-module-head {
    flex-direction: column;
  }

  .email-schedule-filter-grid {
    grid-template-columns: 1fr;
  }
}

.email-schedule-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.add-site-modal {
  max-width: 640px;
}

.add-site-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 20px 0;
}

.add-site-layout-title {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.add-site-layout-list {
  margin: 12px 0 16px;
}

.add-site-layout-empty {
  margin: 0;
  padding: 12px 14px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
}

.add-site-layout-table-wrap {
  box-shadow: none;
}

.add-site-layout-table th:last-child,
.add-site-layout-table td:last-child {
  width: 96px;
  text-align: right;
}

.add-site-layout-remove {
  text-align: right;
  white-space: nowrap;
}

.add-site-layout-tool {
  padding: 14px;
  border: 1px solid var(--ui-panel-border);
  border-radius: var(--radius-sm);
  background: var(--ui-card-bg);
  margin-bottom: 12px;
}

.add-site-layout-tool:last-child {
  margin-bottom: 0;
}

.add-site-layout-tool-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

.add-site-layout-tool-fields {
  align-items: flex-end;
}

.add-site-layout-tool-action {
  min-width: 96px;
}

.add-site-layout-tool-action .btn {
  width: 100%;
}

.add-site-layout-preview {
  margin: 8px 0 0;
  font-size: 12px;
}

/* =============================================================================
   Billing module
   Panel layout, filter bar, duration display, table striping, off-yard row tint.
   ============================================================================= */
.billing-page-intro {
  margin: 0 0 16px;
  max-width: 52rem;
  line-height: 1.45;
}

.billing-panel {
  background: var(--trailer-detail-panel-bg);
  border: 1px solid var(--trailer-detail-panel-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.billing-panel-stats {
  margin: 0;
  padding: 14px;
  border-bottom: 1px solid var(--trailer-detail-panel-border);
  background: var(--trailer-detail-panel-bg);
}

.billing-panel-stats .billing-stat-card {
  background: var(--ui-inset-bg);
  border: 1px solid var(--border);
  box-shadow: none;
}

.billing-panel-toolbar {
  margin: 0;
  border: none;
  border-bottom: 1px solid var(--trailer-detail-panel-border);
  border-radius: 0;
  box-shadow: none;
  background: var(--trailer-detail-panel-bg);
}

.billing-panel-table {
  margin: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

.billing-panel-table .table-scroll {
  background: transparent;
}

.billing-table {
  width: 100%;
  min-width: max-content;
}

.billing-panel-table .billing-table th {
  background: var(--trailer-detail-table-header-bg);
  color: var(--trailer-detail-table-header-text);
  border-bottom-color: var(--trailer-detail-panel-border);
  vertical-align: middle;
}

.billing-panel-table .billing-table td {
  vertical-align: middle;
  border-bottom-color: var(--trailer-detail-card-border);
}

/* =============================================================================
   Billing table row backgrounds — class-based stripes; off-yard uses subtle tint
   ============================================================================= */
/* =============================================================================
   Neutralize global data-table striping; billing uses .billing-row--stripe from JS
   ============================================================================= */
.billing-panel-table table.data-table tbody tr:nth-child(even) {
  background: transparent;
}

.billing-panel-table .billing-table tbody tr.billing-row--stripe:not(.billing-row--off-yard) {
  background: var(--trailer-detail-table-stripe);
}

.billing-panel-table .billing-table tbody tr:hover:not(.billing-row--off-yard) {
  background: var(--trailer-detail-table-hover);
}

.billing-yard-cell {
  min-width: 96px;
  white-space: nowrap;
}

.billing-panel-table .billing-yard-cell .yard-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border: none;
}

.billing-customer-cell {
  font-size: 14px;
}

.billing-site-cell {
  font-weight: 500;
}

.billing-spot-cell {
  font-weight: 600;
  letter-spacing: 0.02em;
}

.billing-status-cell {
  white-space: nowrap;
}

.billing-status-cell .badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border: none;
}

.billing-table td.action-links {
  width: 98px;
  min-width: 98px;
  text-align: center;
  vertical-align: middle;
}

.billing-table td.action-links .action-links {
  justify-content: center;
  width: 100%;
}

.billing-duration-cell {
  min-width: 148px;
}

.billing-duration {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
}

.billing-duration__primary {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text);
}

.billing-duration__primary--warning {
  color: var(--warning);
}

.billing-duration__primary--critical {
  color: var(--danger);
}

.billing-duration__meta {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--ui-muted-readable);
}

.billing-duration__meta--warning {
  color: var(--warning);
}

.billing-duration__meta--critical {
  color: var(--danger);
}

.billing-date-cell {
  white-space: nowrap;
  font-size: 12px;
  color: var(--ui-muted-readable);
}

.billing-panel-table .billing-table tbody tr.billing-row--off-yard {
  background: color-mix(in srgb, var(--billing-off-yard-bg) 45%, transparent);
}

.billing-panel-table .billing-table tbody tr.billing-row--off-yard:hover,
.billing-panel-table .billing-table tbody tr.billing-row--off-yard:hover td {
  background: color-mix(in srgb, var(--billing-off-yard-hover-bg) 55%, transparent);
}

.billing-panel-table .billing-status-cell .badge-R,
.billing-panel-table .billing-status-cell .badge-READY,
.billing-panel-table .billing-status-cell .badge-Loaded,
.billing-panel-table .billing-status-cell .badge-LOADED,
.billing-panel-table .billing-status-cell .badge-LD {
  background: var(--trailer-record-pill-success-bg);
  color: var(--trailer-record-pill-success-text);
}

.billing-panel-table .billing-status-cell .badge-RoL,
.billing-panel-table .billing-status-cell .badge-READY-ON-LEASE,
.billing-panel-table .billing-status-cell .badge-PoL,
.billing-panel-table .billing-status-cell .badge-PENDING-LEASE {
  background: var(--trailer-record-pill-info-bg);
  color: var(--trailer-record-pill-info-text);
}

.billing-panel-table .billing-status-cell .badge-PARTS,
.billing-panel-table .billing-status-cell .badge-PT,
.billing-panel-table .billing-status-cell .badge-Unknown,
.billing-panel-table .billing-status-cell .badge-UNKNOWN,
.billing-panel-table .billing-status-cell .badge-FoL,
.billing-panel-table .billing-status-cell .badge-FIX-ON-LEASE,
.billing-panel-table .billing-status-cell .badge-Empty,
.billing-panel-table .billing-status-cell .badge-EMPTY,
.billing-panel-table .billing-status-cell .badge-EMP {
  background: var(--trailer-record-pill-neutral-bg);
  color: var(--trailer-record-pill-neutral-text);
}

.billing-panel-table .billing-status-cell .badge-OoS,
.billing-panel-table .billing-status-cell .badge-OUT-OF-SERVICE,
.billing-panel-table .billing-status-cell .badge-SELL,
.billing-panel-table .billing-status-cell .badge-SL {
  background: var(--trailer-record-pill-warning-bg);
  color: var(--trailer-record-pill-warning-text);
}

.billing-panel-table .billing-status-cell .badge-SCRAP,
.billing-panel-table .billing-status-cell .badge-ST,
.billing-panel-table .billing-status-cell .badge-offyard,
.billing-panel-table .billing-status-cell .badge-NA {
  background: var(--trailer-record-pill-danger-bg);
  color: var(--trailer-record-pill-danger-text);
}

[data-theme="dark"] .billing-panel {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(148, 163, 184, 0.08);
}

.billing-panel.site-storage-panel .module-actions,
.work-orders-panel.site-work-orders-panel .module-actions {
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px 10px;
  padding-top: 2px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.billing-panel.site-storage-panel .module-actions::-webkit-scrollbar,
.work-orders-panel.site-work-orders-panel .module-actions::-webkit-scrollbar {
  display: none;
}

.billing-panel.site-storage-panel .module-actions-export,
.work-orders-panel.site-work-orders-panel .module-actions-export {
  display: inline-flex;
  flex: 0 1 auto;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.billing-panel.site-storage-panel .module-actions-export .export-dropdown,
.work-orders-panel.site-work-orders-panel .module-actions-export .export-dropdown {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: auto;
}

.billing-panel.site-storage-panel .module-actions-export .export-dropdown-trigger,
.work-orders-panel.site-work-orders-panel .module-actions-export .export-dropdown-trigger {
  flex: 0 0 auto;
  width: auto;
}

.billing-panel.site-storage-panel .module-actions-export .btn-sm,
.work-orders-panel.site-work-orders-panel .module-actions-export .btn-sm {
  flex: 0 0 auto;
  white-space: nowrap;
}

.billing-panel.site-storage-panel .module-actions-secondary,
.work-orders-panel.site-work-orders-panel .module-actions-secondary {
  flex: 0 0 auto;
  margin-left: auto;
}

/* =============================================================================
   Work Orders module panel
   ============================================================================= */
.work-orders-panel {
  background: var(--trailer-detail-panel-bg);
  border: 1px solid var(--trailer-detail-panel-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.work-orders-panel-stats {
  margin: 0;
  padding: 14px;
  border-bottom: 1px solid var(--trailer-detail-panel-border);
  background: var(--trailer-detail-panel-bg);
}

.work-orders-panel-stats .work-orders-stat-card {
  background: var(--ui-inset-bg);
  border: 1px solid var(--border);
  box-shadow: none;
}

.work-orders-panel-toolbar {
  margin: 0;
  border: none;
  border-bottom: 1px solid var(--trailer-detail-panel-border);
  border-radius: 0;
  box-shadow: none;
  background: var(--trailer-detail-panel-bg);
}

.work-orders-panel-table {
  margin: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

.work-orders-panel-table .table-scroll {
  background: transparent;
}

.work-orders-table {
  width: 100%;
  min-width: max-content;
}

.work-orders-panel-table .work-orders-table th {
  background: var(--trailer-detail-table-header-bg);
  color: var(--trailer-detail-table-header-text);
  border-bottom-color: var(--trailer-detail-panel-border);
  vertical-align: middle;
}

.work-orders-panel-table .work-orders-table td {
  vertical-align: middle;
  border-bottom-color: var(--trailer-detail-card-border);
}

.work-orders-panel-table .work-orders-table tbody tr:nth-child(even) {
  background: var(--trailer-detail-table-stripe);
}

.work-orders-panel-table .work-orders-table tbody tr:hover {
  background: var(--trailer-detail-table-hover);
}

.work-orders-table .wo-col-number,
.work-orders-table .wo-number-cell {
  width: 124px;
  min-width: 124px;
  max-width: 124px;
}

.work-orders-table .wo-col-unit,
.work-orders-table .wo-unit-cell {
  width: 96px;
  min-width: 96px;
}

.work-orders-table .wo-col-status,
.work-orders-table .wo-status-cell,
.work-orders-table .wo-col-priority,
.work-orders-table .wo-priority-cell {
  width: 112px;
  min-width: 112px;
}

.work-orders-table .wo-col-site,
.work-orders-table .wo-site-cell {
  min-width: 120px;
}

.work-orders-table .wo-col-spot,
.work-orders-table .wo-spot-cell {
  min-width: 72px;
}

.wo-number-text {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}

button.wo-number-text.table-unit-trigger {
  font-size: 13px;
}

.table-unit-trigger {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  line-height: inherit;
}

.table-unit-trigger:hover {
  color: color-mix(in srgb, var(--primary) 78%, var(--text));
}

.table-unit-trigger:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 2px;
}

.wo-status-cell .badge,
.wo-priority-cell .badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border: none;
}

.wo-site-cell {
  font-weight: 500;
}

.wo-spot-cell {
  font-weight: 600;
  letter-spacing: 0.02em;
}

.wo-title-cell {
  font-size: 14px;
  font-weight: 500;
  min-width: 140px;
}

.wo-date-cell {
  white-space: nowrap;
  font-size: 12px;
  color: var(--ui-muted-readable);
}

.work-orders-table td.action-links {
  width: 132px;
  min-width: 132px;
  text-align: center;
  vertical-align: middle;
}

.work-orders-table td.action-links .action-links {
  justify-content: center;
  width: 100%;
}

.work-orders-panel-table .wo-status-cell .badge-WO-Open,
.work-orders-panel-table .wo-priority-cell .badge-WO-priority-Normal {
  background: var(--trailer-record-pill-info-bg);
  color: var(--trailer-record-pill-info-text);
}

.work-orders-panel-table .wo-status-cell .badge-WO-InProgress,
.work-orders-panel-table .wo-priority-cell .badge-WO-priority-High {
  background: var(--trailer-record-pill-warning-bg);
  color: var(--trailer-record-pill-warning-text);
}

.work-orders-panel-table .wo-status-cell .badge-WO-OnHold {
  background: var(--trailer-record-pill-purple-bg);
  color: var(--trailer-record-pill-purple-text);
}

.work-orders-panel-table .wo-status-cell .badge-WO-Complete {
  background: var(--trailer-record-pill-success-bg);
  color: var(--trailer-record-pill-success-text);
}

.work-orders-panel-table .wo-status-cell .badge-WO-Cancelled,
.work-orders-panel-table .wo-priority-cell .badge-WO-priority-Low {
  background: var(--trailer-record-pill-neutral-bg);
  color: var(--trailer-record-pill-neutral-text);
}

.work-orders-panel-table .wo-priority-cell .badge-WO-priority-Urgent {
  background: var(--trailer-record-pill-danger-bg);
  color: var(--trailer-record-pill-danger-text);
}

[data-theme="dark"] .work-orders-panel {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(148, 163, 184, 0.08);
}

.yard-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

.yard-status-badge--on {
  background: #D1FAE5;
  color: #065F46;
}

.yard-status-badge--off {
  background: #FEF3C7;
  color: #92400E;
}

[data-theme="dark"] .yard-status-badge--on {
  background: rgba(16, 185, 129, 0.18);
  color: #6EE7B7;
}

[data-theme="dark"] .yard-status-badge--off {
  background: rgba(245, 158, 11, 0.16);
  color: #FCD34D;
}

/* =============================================================================
   Module toolbar — inventory, billing, trailers, work orders
   ============================================================================= */
.module-toolbar,
.inventory-toolbar {
  padding: 12px 14px;
}

.module-filter-bar,
.inventory-filter-bar {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

.module-filters-panel,
.inventory-filters-panel {
  background: var(--ui-inset-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.module-toolbar-head,
.inventory-toolbar-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  min-height: 22px;
}

.module-toolbar-title,
.inventory-toolbar-title {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.module-filter-summary,
.inventory-filter-summary {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-size: 12px;
  line-height: 1.35;
}

.module-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-left: auto;
}

.module-toolbar-head .module-clear-filters {
  margin-left: 0;
  flex-shrink: 0;
}

.module-clear-filters,
.inventory-clear-filters {
  margin-left: auto;
  padding: 0;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.module-filters,
.inventory-filters {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  width: 100%;
}

.module-filter-row,
.inventory-filter-row {
  display: grid;
  gap: 8px;
  align-items: end;
  width: 100%;
}

.module-filter-row--primary,
.inventory-filter-row--primary,
.module-filter-row--search-3 {
  grid-template-columns: minmax(240px, 1.6fr) repeat(2, minmax(0, 1fr));
}

.module-filter-row--search-4 {
  grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(0, 1fr));
}

.module-filter-row--search-5 {
  grid-template-columns: minmax(200px, 1.25fr) repeat(4, minmax(0, 1fr));
}

.module-filter-row--search-2 {
  grid-template-columns: minmax(220px, 1.6fr) minmax(0, 1fr);
}

.module-filter-row--secondary,
.inventory-filter-row--secondary,
.module-filter-row--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.module-filter-row--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.module-filter-row--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.module-filter-row--5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.module-toolbar .billing-filter-field,
.inventory-toolbar .billing-filter-field {
  width: 100%;
}

.module-toolbar .billing-filter-field .form-control,
.inventory-toolbar .billing-filter-field .form-control {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: 36px;
  padding: 6px 10px;
  font-size: 13px;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.module-toolbar .billing-filter-field--date .form-control,
.module-toolbar .billing-filter-field:has(> input[type="date"].form-control) .form-control,
.module-toolbar input[type="date"].form-control,
.inventory-toolbar input[type="date"].form-control {
  display: block;
  -webkit-min-logical-width: 0;
  min-inline-size: 0;
}

.module-toolbar .billing-filter-field--search .form-control,
.inventory-toolbar .billing-filter-field--search .form-control {
  padding-left: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16.65' y1='16.65' x2='21' y2='21'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 10px center;
}

.module-toolbar .billing-filter-field label,
.inventory-toolbar .billing-filter-field label {
  font-size: 10px;
  letter-spacing: 0.06em;
  margin-bottom: 1px;
}

.module-toolbar .billing-filter-field.is-filter-active .form-control,
.inventory-toolbar .billing-filter-field.is-filter-active .form-control {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 35%, transparent);
}

.module-toolbar .billing-customer-picker,
.module-filters-panel .billing-customer-picker {
  margin-top: 8px;
}

.module-actions,
.inventory-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 12px;
  padding-top: 2px;
}

.module-actions-primary,
.module-actions-secondary,
.inventory-actions-primary,
.inventory-actions-secondary {
  flex-shrink: 0;
}

.module-actions-secondary--group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.module-actions-secondary--icons {
  gap: 6px;
}

.module-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
}

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

.module-action-btn--primary {
  --cmd-accent: #6BA3D6;
  border: 1px solid color-mix(in srgb, var(--cmd-accent) 44%, var(--ui-panel-border));
  background: var(--ui-panel-bg);
  color: var(--text);
  box-shadow: none;
}

.module-action-btn--primary:hover,
.module-action-btn--primary:focus-visible {
  background: color-mix(in srgb, var(--cmd-accent) 10%, var(--ui-panel-bg));
  border-color: var(--cmd-accent);
  color: var(--text);
  box-shadow: 0 1px 6px color-mix(in srgb, var(--cmd-accent) 12%, transparent);
}

.module-action-btn--primary:active {
  box-shadow: none;
}

.module-action-btn--secondary {
  --cmd-accent: var(--primary);
  border: 1px solid color-mix(in srgb, var(--cmd-accent) 32%, var(--ui-panel-border));
  background: var(--ui-panel-bg);
  color: var(--text-secondary);
  box-shadow: none;
}

.module-action-btn--secondary:hover,
.module-action-btn--secondary:focus-visible {
  background: color-mix(in srgb, var(--cmd-accent) 8%, var(--ui-panel-bg));
  border-color: var(--cmd-accent);
  color: var(--text);
  box-shadow: 0 1px 6px color-mix(in srgb, var(--cmd-accent) 10%, transparent);
}

.module-action-btn--secondary:active {
  box-shadow: none;
}

.module-action-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--primary) 55%, transparent);
  outline-offset: 2px;
}

:is(
  .module-actions-secondary--labeled.detail-header-actions-group,
  .gate-toolbar-actions__icons.detail-header-actions-group
) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

:is(
  .module-actions-secondary--labeled.detail-header-actions-group,
  .gate-toolbar-actions__icons.detail-header-actions-group
) .table-action-btn {
  width: 38px;
  height: 38px;
  min-width: 38px;
  min-height: 38px;
  border-radius: var(--radius-sm);
}

:is(
  .module-actions-secondary--labeled.detail-header-actions-group,
  .gate-toolbar-actions__icons.detail-header-actions-group
) .table-action-btn svg {
  width: 18px;
  height: 18px;
}

:is(
  .module-actions-secondary--labeled.detail-header-actions-group,
  .gate-toolbar-actions__icons.detail-header-actions-group
) .table-action-btn--labeled {
  width: auto;
  min-width: 38px;
  min-height: 38px;
  padding: 0 11px 0 9px;
  gap: 6px;
  border-width: 1.5px;
}

:is(
  .module-actions-secondary--labeled.detail-header-actions-group,
  .gate-toolbar-actions__icons.detail-header-actions-group
) .table-action-btn__text {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}

:is(
  .module-actions-secondary--labeled.detail-header-actions-group,
  .gate-toolbar-actions__icons.detail-header-actions-group
) .table-action-btn--primary.table-action-btn--labeled,
:is(
  .module-actions-secondary--labeled.detail-header-actions-group,
  .gate-toolbar-actions__icons.detail-header-actions-group
) .table-action-btn--secondary.table-action-btn--labeled {
  background: color-mix(in srgb, var(--cmd-accent) 12%, var(--ui-panel-bg));
}

[data-theme="dark"] .module-action-btn--primary,
[data-theme="dark"] .module-action-btn--secondary {
  background: color-mix(in srgb, var(--ui-panel-bg) 88%, var(--cmd-accent) 12%);
  border-color: color-mix(in srgb, var(--cmd-accent) 46%, var(--ui-panel-border));
}

[data-theme="dark"] .module-action-btn--primary {
  color: var(--text);
}

[data-theme="dark"] .module-action-btn--primary:hover,
[data-theme="dark"] .module-action-btn--primary:focus-visible,
[data-theme="dark"] .module-action-btn--secondary:hover,
[data-theme="dark"] .module-action-btn--secondary:focus-visible {
  background: color-mix(in srgb, var(--cmd-accent) 22%, var(--ui-panel-bg));
  border-color: var(--cmd-accent);
  color: var(--text);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--cmd-accent) 38%, transparent),
    0 2px 10px color-mix(in srgb, var(--cmd-accent) 22%, transparent);
}

[data-theme="dark"] .module-action-btn--primary:active,
[data-theme="dark"] .module-action-btn--secondary:active {
  box-shadow: none;
}

.module-actions-export,
.inventory-actions-export {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-width: 0;
}

.module-toolbar .export-dropdown-trigger,
.inventory-toolbar .export-dropdown-trigger {
  min-width: 108px;
  justify-content: center;
}

/* Export sits in overflow-x toolbars — hover lift clips against the row edge */
.app-shell--staff-portal :is(.module-actions, .inventory-actions) .export-dropdown-trigger:hover,
.app-shell--staff-portal :is(.module-actions, .inventory-actions) .export-dropdown-trigger:focus-visible,
.app-shell--customer-portal :is(.module-actions, .inventory-actions) .export-dropdown-trigger:hover,
.app-shell--customer-portal :is(.module-actions, .inventory-actions) .export-dropdown-trigger:focus-visible,
.app-shell--staff-portal :is(.module-actions, .inventory-actions) .export-dropdown-trigger:active,
.app-shell--customer-portal :is(.module-actions, .inventory-actions) .export-dropdown-trigger:active {
  transform: none;
}

.module-toolbar .btn-sm,
.inventory-toolbar .btn-sm {
  height: 32px;
  padding: 0 10px;
  font-size: 12px;
}

@media (min-width: 901px) {
  .module-actions,
  .inventory-actions {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
  }

  .module-actions--no-primary,
  .inventory-actions--no-primary {
    grid-template-columns: 1fr auto;
  }

  .module-actions--no-primary .module-actions-export,
  .inventory-actions--no-primary .module-actions-export {
    justify-content: flex-start;
  }

  .module-actions-export,
  .inventory-actions-export {
    justify-content: center;
  }
}

@media (min-width: 901px) and (max-width: 1280px) {
  .module-filter-row--primary,
  .inventory-filter-row--primary,
  .module-filter-row--search-3,
  .module-filter-row--search-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .module-filter-row--primary .billing-filter-field--search,
  .inventory-filter-row--primary .billing-filter-field--search,
  .module-filter-row--search-3 .billing-filter-field--search,
  .module-filter-row--search-4 .billing-filter-field--search {
    grid-column: 1 / -1;
  }

  .module-filter-row--secondary,
  .inventory-filter-row--secondary,
  .module-filter-row--4,
  .module-filter-row--5 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.module-toolbar .billing-filter-field--customer .form-control,
.inventory-toolbar .billing-filter-field--customer .form-control {
  max-width: none;
}

/* =============================================================================
   Modern module filter panel — inventory, billing, trailers, work orders
   ============================================================================= */
.module-toolbar .module-filters-panel {
  padding: 14px 16px 16px;
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 4%, transparent);
}

/* Unified module panels — square, edge-to-edge interior bands; rounded exterior shell only */
:is(
  .dashboard-panel,
  .gate-list-panel,
  .trailers-panel,
  .work-orders-panel,
  .inventory-panel,
  .billing-panel,
  .support-list-card
) :is(
  .dashboard-panel-toolbar,
  .trailers-panel-toolbar,
  .work-orders-panel-toolbar,
  .inventory-panel-toolbar,
  .billing-panel-toolbar,
  .gate-list-panel-toolbar,
  .support-panel-toolbar
).module-toolbar,
:is(
  .dashboard-panel,
  .gate-list-panel,
  .trailers-panel,
  .work-orders-panel,
  .inventory-panel,
  .billing-panel,
  .support-list-card
) :is(
  .inventory-panel-toolbar
).inventory-toolbar {
  padding: 0;
  margin-bottom: 0;
}

:is(
  .dashboard-panel,
  .gate-list-panel,
  .trailers-panel,
  .work-orders-panel,
  .inventory-panel,
  .billing-panel,
  .support-list-card
) :is(
  .module-filters-panel,
  .inventory-filters-panel
) {
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-top: none;
  border-bottom: none;
  box-shadow: none;
}

:is(
  .dashboard-panel,
  .gate-list-panel,
  .trailers-panel,
  .work-orders-panel,
  .inventory-panel,
  .billing-panel,
  .support-list-card
) :is(
  .module-toolbar,
  .inventory-toolbar
) :is(
  .module-filters-panel,
  .inventory-filters-panel
) {
  border-radius: 0;
  border: none;
  box-shadow: none;
  padding: 12px 14px;
}

:is(
  .dashboard-panel,
  .gate-list-panel,
  .trailers-panel,
  .work-orders-panel,
  .inventory-panel,
  .billing-panel,
  .support-list-card
) > :is(
  .dashboard-panel-stats,
  .gate-list-panel-stats,
  .support-panel-stats,
  .work-orders-panel-stats,
  .billing-panel-stats,
  .inv-stats-panel,
  .portal-insights-strip,
  .dashboard-panel-toolbar,
  .trailers-panel-toolbar,
  .work-orders-panel-toolbar,
  .inventory-panel-toolbar,
  .billing-panel-toolbar,
  .gate-list-panel-toolbar,
  .support-panel-toolbar,
  .support-list-card-head,
  .trailers-panel-table,
  .work-orders-panel-table,
  .inventory-panel-report,
  .billing-panel-table,
  .gate-panel-table,
  .support-panel-table,
  .dashboard-panel-sites,
  .table-wrap
) {
  border-radius: 0;
}

:is(
  .dashboard-panel,
  .gate-list-panel,
  .trailers-panel,
  .work-orders-panel,
  .inventory-panel,
  .billing-panel,
  .support-list-card
) :is(
  .module-filter-bar,
  .inventory-filter-bar
) > :is(
  .module-actions,
  .inventory-actions
) {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 10px 12px;
  padding: 2px 14px 12px;
}

:is(
  .dashboard-panel,
  .gate-list-panel,
  .trailers-panel,
  .work-orders-panel,
  .inventory-panel,
  .billing-panel,
  .support-list-card
) :is(
  .module-filter-bar,
  .inventory-filter-bar
) > :is(
  .module-actions,
  .inventory-actions
) :is(
  .module-actions-export,
  .inventory-actions-export
) {
  flex: 0 1 auto;
  min-width: 0;
  justify-content: flex-start;
}

:is(
  .dashboard-panel,
  .gate-list-panel,
  .trailers-panel,
  .work-orders-panel,
  .inventory-panel,
  .billing-panel,
  .support-list-card
) :is(
  .module-filter-bar,
  .inventory-filter-bar
) > :is(
  .module-actions,
  .inventory-actions
) :is(
  .module-actions-secondary,
  .inventory-actions-secondary
) {
  flex: 0 0 auto;
  margin-left: auto;
}

:is(
  .dashboard-panel,
  .gate-list-panel,
  .trailers-panel,
  .work-orders-panel,
  .inventory-panel,
  .billing-panel,
  .support-list-card
) .module-actions-secondary--group.module-actions-secondary--icons {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  width: auto;
  max-width: none;
}

@media (max-width: 900px) {
  :is(
    .dashboard-panel,
    .gate-list-panel,
    .trailers-panel,
    .work-orders-panel,
    .inventory-panel,
    .billing-panel,
    .support-list-card
  ) :is(
    .module-filter-bar,
    .inventory-filter-bar
  ) > :is(
    .module-actions,
    .inventory-actions
  ) {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 8px 10px;
  }

  :is(
    .dashboard-panel,
    .gate-list-panel,
    .trailers-panel,
    .work-orders-panel,
    .inventory-panel,
    .billing-panel,
    .support-list-card
  ) :is(
    .module-filter-bar,
    .inventory-filter-bar
  ) > :is(
    .module-actions,
    .inventory-actions
  ) :is(
    .module-actions-secondary,
    .inventory-actions-secondary
  ) {
    margin-left: auto;
    align-self: auto;
  }

  /* Yard site tabs: export + icons must stay on one row */
  .work-orders-panel.site-work-orders-panel :is(.module-filter-bar, .billing-filter-bar) > .module-actions,
  .billing-panel.site-storage-panel :is(.module-filter-bar, .billing-filter-bar) > .module-actions {
    flex-wrap: nowrap;
    padding-top: 2px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .work-orders-panel.site-work-orders-panel :is(.module-filter-bar, .billing-filter-bar) > .module-actions::-webkit-scrollbar,
  .billing-panel.site-storage-panel :is(.module-filter-bar, .billing-filter-bar) > .module-actions::-webkit-scrollbar {
    display: none;
  }

  .work-orders-panel.site-work-orders-panel :is(.module-filter-bar, .billing-filter-bar) > .module-actions > .module-actions-export,
  .billing-panel.site-storage-panel :is(.module-filter-bar, .billing-filter-bar) > .module-actions > .module-actions-export {
    display: inline-flex;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }

  .work-orders-panel.site-work-orders-panel :is(.module-filter-bar, .billing-filter-bar) > .module-actions > .module-actions-secondary,
  .billing-panel.site-storage-panel :is(.module-filter-bar, .billing-filter-bar) > .module-actions > .module-actions-secondary {
    flex: 0 0 auto;
    margin-left: auto;
  }
}

/* Yard site tabs: same single-row toolbar at all breakpoints */
.work-orders-panel.site-work-orders-panel :is(.module-filter-bar, .billing-filter-bar) > .module-actions,
.billing-panel.site-storage-panel :is(.module-filter-bar, .billing-filter-bar) > .module-actions {
  flex-wrap: nowrap;
  padding-top: 2px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.work-orders-panel.site-work-orders-panel :is(.module-filter-bar, .billing-filter-bar) > .module-actions::-webkit-scrollbar,
.billing-panel.site-storage-panel :is(.module-filter-bar, .billing-filter-bar) > .module-actions::-webkit-scrollbar {
  display: none;
}

.work-orders-panel.site-work-orders-panel :is(.module-filter-bar, .billing-filter-bar) > .module-actions > .module-actions-export,
.billing-panel.site-storage-panel :is(.module-filter-bar, .billing-filter-bar) > .module-actions > .module-actions-export {
  display: inline-flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.work-orders-panel.site-work-orders-panel :is(.module-filter-bar, .billing-filter-bar) > .module-actions > .module-actions-secondary,
.billing-panel.site-storage-panel :is(.module-filter-bar, .billing-filter-bar) > .module-actions > .module-actions-secondary {
  flex: 0 0 auto;
  margin-left: auto;
}

.module-toolbar .module-filters-panel .module-toolbar-head {
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
}

.module-filter-search {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.module-filter-search label {
  font-size: 11px;
  font-weight: 600;
  color: var(--ui-filter-label);
  letter-spacing: 0.02em;
  text-transform: none;
}

.module-filter-search .form-control {
  width: 100%;
  height: 40px;
  padding: 8px 12px 8px 36px;
  font-size: 14px;
  border-radius: var(--radius-sm);
  background-color: var(--surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16.65' y1='16.65' x2='21' y2='21'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 12px center;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.module-filter-search .form-control:focus {
  background-color: var(--surface);
}

.module-filter-search.is-filter-active .form-control {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 35%, transparent);
}

.module-filter-divider {
  height: 1px;
  margin: 0 0 12px;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--border) 90%, transparent) 12%,
    color-mix(in srgb, var(--border) 90%, transparent) 88%,
    transparent
  );
}

.module-filter-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 12px;
  align-items: end;
}

.module-filter-grid + .module-filter-grid,
.module-filter-grid + .billing-customer-picker,
.module-filter-divider + .billing-customer-picker {
  margin-top: 10px;
}

.module-filter-grid .billing-filter-field label {
  font-size: 11px;
  font-weight: 600;
  color: var(--ui-filter-label);
  letter-spacing: 0.02em;
  text-transform: none;
  margin-bottom: 2px;
}

.module-filter-grid .billing-filter-field .form-control {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  height: 38px;
  font-size: 13px;
  border-radius: var(--radius-sm);
  background-color: var(--surface);
}

.module-filter-grid > .billing-filter-field {
  min-width: 0;
  max-width: 100%;
}

.module-filter-grid .billing-filter-field--date,
.module-filter-grid .billing-filter-field:has(> input[type="date"].form-control) {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.module-filter-grid .billing-filter-field--date .form-control,
.module-filter-grid .billing-filter-field:has(> input[type="date"].form-control) .form-control {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: 38px;
  padding: 6px 10px;
  box-sizing: border-box;
  -webkit-min-logical-width: 0;
  min-inline-size: 0;
}

.module-filter-grid .billing-filter-field.is-filter-active .form-control {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 35%, transparent);
}

.module-filter-grid .billing-filter-field--year-range .form-control {
  min-width: 0;
}

.module-filter-grid .billing-filter-field--date .form-control,
.module-toolbar input[type="date"].form-control {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

@media (min-width: 901px) {
  .module-filter-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .module-filter-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .module-filter-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .module-filter-grid--6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (min-width: 901px) and (max-width: 1280px) {
  .module-filter-grid--4,
  .module-filter-grid--6 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* =============================================================================
   Inventory
   ============================================================================= */
.inventory-panel {
  background: var(--trailer-detail-panel-bg);
  border: 1px solid var(--trailer-detail-panel-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.inventory-panel .inv-stats-panel {
  margin: 0;
  padding: 14px;
  border-bottom: 1px solid var(--trailer-detail-panel-border);
  background: var(--trailer-detail-panel-bg);
}

.inventory-panel .inv-stat-card {
  background: var(--ui-inset-bg);
  border: 1px solid var(--border);
  border-top-width: 3px;
  box-shadow: none;
}

.inventory-panel .inv-stat-card--total {
  border-top-width: 1px;
  border-color: color-mix(in srgb, var(--primary) 28%, var(--border));
  background: color-mix(in srgb, var(--primary) 8%, var(--ui-inset-bg));
}

.inventory-panel .inv-stat-card--total .inv-stat-card__value {
  color: var(--primary-dark, var(--primary));
}

.inventory-panel .inv-stat-card--available {
  border-top-color: #059669;
  background: color-mix(in srgb, #059669 10%, var(--ui-inset-bg));
}

.inventory-panel .inv-stat-card--reserved {
  border-top-color: #4338ca;
  background: color-mix(in srgb, #4338ca 10%, var(--ui-inset-bg));
}

.inventory-panel .inv-stat-card--repair {
  border-top-color: #c2410c;
  background: color-mix(in srgb, #c2410c 10%, var(--ui-inset-bg));
}

.inventory-panel .inv-stat-card--oos {
  border-top-color: #dc2626;
  background: color-mix(in srgb, #dc2626 10%, var(--ui-inset-bg));
}

.inventory-panel .inv-stat-card--sell {
  border-top-color: #d97706;
  background: color-mix(in srgb, #d97706 10%, var(--ui-inset-bg));
}

.inventory-panel .inv-stat-card--parts {
  border-top-color: #6b7280;
  background: color-mix(in srgb, #6b7280 10%, var(--ui-inset-bg));
}

.inventory-panel-toolbar {
  margin: 0;
  border: none;
  border-bottom: 1px solid var(--trailer-detail-panel-border);
  border-radius: 0;
  box-shadow: none;
  background: var(--trailer-detail-panel-bg);
}

.inventory-panel-report {
  padding: 14px;
  background: var(--trailer-detail-panel-bg);
}

.inventory-panel-report .inventory-site-section:last-child {
  margin-bottom: 0;
}

[data-theme="dark"] .inventory-panel {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(148, 163, 184, 0.08);
}

.inventory-site-section {
  margin-bottom: 28px;
}

.inventory-site-section:last-child {
  margin-bottom: 0;
}

.inventory-site-header {
  background: var(--inventory-site-header-bg);
  color: var(--text);
  font-weight: 700;
  font-size: 15px;
  padding: 10px 16px;
  border: 1px solid var(--inventory-site-header-border);
  border-radius: var(--radius) var(--radius) 0 0;
}

.inventory-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  padding: 16px;
  background: var(--inventory-cards-grid-bg);
  border: 1px solid var(--inventory-cards-grid-border);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
}

.inventory-type-card {
  background: var(--ui-panel-bg);
  border: 1px solid var(--inventory-type-card-border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-shadow: var(--shadow-sm);
}

.inventory-type-card-title {
  padding: 12px 14px 10px;
  font-weight: 600;
  font-size: 14px;
  text-align: center;
  border-bottom: 1px solid var(--ui-panel-border);
  color: var(--text);
}

.inventory-type-card-body {
  flex: 0 1 auto;
  padding: 12px;
  min-height: 0;
}

.inv-stats-panel {
  display: grid;
  grid-template-columns: minmax(148px, 188px) minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}

.inv-stats-panel__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.inv-stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 88px;
  padding: 14px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--ui-panel-border);
  background: var(--ui-panel-bg);
  box-shadow: var(--shadow-sm);
  text-align: center;
}

.inv-stat-card__value {
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text);
}

.inv-stat-card__label {
  font-size: 12px;
  line-height: 1.25;
  color: var(--ui-muted-readable);
  font-weight: 600;
}

.inv-stat-card--total {
  min-height: 100%;
  border-color: color-mix(in srgb, var(--primary) 28%, var(--ui-panel-border));
  background: color-mix(in srgb, var(--primary) 8%, var(--ui-panel-bg));
}

.inv-stat-card--total .inv-stat-card__value {
  font-size: 36px;
  color: var(--primary-dark, var(--primary));
}

.inv-stat-card--available { border-top: 3px solid #059669; }
.inv-stat-card--reserved { border-top: 3px solid #4338ca; }
.inv-stat-card--repair { border-top: 3px solid #c2410c; }
.inv-stat-card--oos { border-top: 3px solid #dc2626; }
.inv-stat-card--sell { border-top: 3px solid #d97706; }
.inv-stat-card--parts { border-top: 3px solid #6b7280; }

.inv-bucket-chip-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.inv-bucket-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 36px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--ui-panel-border);
  background: var(--ui-inset-bg);
}

.inv-bucket-chip__label {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ui-muted-readable);
}

.inv-bucket-chip__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  background: var(--inventory-status-count-bg);
}

.inv-bucket-chip--available { background: color-mix(in srgb, #059669 10%, var(--ui-inset-bg)); }
.inv-bucket-chip--reserved { background: color-mix(in srgb, #4338ca 10%, var(--ui-inset-bg)); }
.inv-bucket-chip--repair { background: color-mix(in srgb, #c2410c 10%, var(--ui-inset-bg)); }
.inv-bucket-chip--oos { background: color-mix(in srgb, #dc2626 10%, var(--ui-inset-bg)); }
.inv-bucket-chip--sell { background: color-mix(in srgb, #d97706 10%, var(--ui-inset-bg)); }
.inv-bucket-chip--parts { background: color-mix(in srgb, #6b7280 10%, var(--ui-inset-bg)); }

[data-theme="dark"] .inv-bucket-chip__label {
  color: var(--text-secondary);
}

[data-theme="dark"] .inv-bucket-chip--available .inv-bucket-chip__label {
  color: var(--inventory-status-available-text);
}

[data-theme="dark"] .inv-bucket-chip--reserved .inv-bucket-chip__label {
  color: #a5b4fc;
}

[data-theme="dark"] .inv-bucket-chip--repair .inv-bucket-chip__label {
  color: #fdba74;
}

[data-theme="dark"] .inv-bucket-chip--oos .inv-bucket-chip__label {
  color: var(--inventory-status-oos-text);
}

[data-theme="dark"] .inv-bucket-chip--sell .inv-bucket-chip__label {
  color: var(--inventory-status-sell-text);
}

[data-theme="dark"] .inv-bucket-chip--parts .inv-bucket-chip__label {
  color: var(--ui-muted-readable);
}

@media (max-width: 960px) {
  .inv-stats-panel {
    grid-template-columns: 1fr;
  }

  .inv-stats-panel__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .inv-stats-panel__grid,
  .inv-bucket-chip-grid {
    grid-template-columns: 1fr;
  }
}

.inventory-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  min-height: 44px;
}

.inventory-status-row--available {
  background: var(--inventory-status-available-bg);
}

.inventory-status-row--oos {
  background: var(--inventory-status-oos-bg);
}

.inventory-status-row--sell {
  background: var(--inventory-status-sell-bg);
}

.inventory-status-label {
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.02em;
}

.inventory-status-row--available .inventory-status-label {
  color: var(--inventory-status-available-text);
}

.inventory-status-row--oos .inventory-status-label {
  color: var(--inventory-status-oos-text);
}

.inventory-status-row--sell .inventory-status-label {
  color: var(--inventory-status-sell-text);
}

.inventory-status-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--inventory-status-count-bg);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
}

.inventory-units-toggle {
  margin: auto 0 0;
  padding: 8px 12px;
  font-size: 12px;
  text-align: center;
  border-top: 1px solid var(--border);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  width: 100%;
  flex: 0 0 auto;
  position: relative;
  z-index: 2;
  cursor: pointer;
}

.inventory-units-modal {
  max-width: min(1480px, 98vw);
  width: 98vw;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.inventory-units-modal .modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.inventory-units-modal .modal-header h3 {
  margin: 0;
}

.inventory-units-modal-subtitle {
  margin: 4px 0 0;
  font-size: 13px;
}

.inventory-units-modal-body {
  overflow: auto;
  padding: 0;
  flex: 1;
  min-height: 0;
  background: var(--trailer-detail-panel-bg);
}

.inventory-units-modal-body .table-wrap {
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  overflow: visible;
}

.inventory-units-modal-body .data-table tbody td {
  overflow: visible;
  position: relative;
}

.inventory-units-panel-table .inventory-unit-table th {
  background: var(--trailer-detail-table-header-bg);
  color: var(--trailer-detail-table-header-text);
  border-bottom-color: var(--trailer-detail-panel-border);
  vertical-align: middle;
}

.inventory-units-panel-table .inventory-unit-table td {
  vertical-align: middle;
  border-bottom-color: var(--trailer-detail-card-border);
}

.inventory-units-panel-table .inventory-unit-table tbody tr:nth-child(even):not(.inventory-unit-row--oos):not(.inventory-unit-row--sell):not(.inventory-unit-row--reserved):not(.inventory-unit-row--repair):not(.inventory-unit-row--parts) {
  background: var(--trailer-detail-table-stripe);
}

.inventory-units-panel-table .inventory-unit-table tbody tr:hover {
  background: var(--trailer-detail-table-hover);
}

.inventory-units-modal .modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.inventory-units-modal-count {
  font-size: 13px;
}

.inventory-units-modal .inventory-unit-table {
  font-size: 12px;
  white-space: nowrap;
}

.inventory-units-modal .inv-col-issues {
  max-width: 360px;
  white-space: normal;
  min-width: 200px;
}

.inventory-units-modal .inv-col-refrigeration,
.inventory-units-modal .inv-col-standby {
  white-space: normal;
  min-width: 140px;
  max-width: 220px;
  line-height: 1.35;
}

.inventory-card-detail {
  border-top: 1px solid var(--border);
  background: var(--bg-subtle);
}

.inventory-card-detail.hidden {
  display: none;
}

.inventory-card-detail .table-wrap {
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.inventory-unit-table {
  margin: 0;
  font-size: 13px;
}

.inventory-unit-table-wrap {
  overflow-x: auto;
}

.inventory-unit-row--oos {
  background: color-mix(in srgb, var(--inventory-unit-row-oos-bg) 45%, transparent);
}

.inventory-unit-row--oos:hover,
.inventory-unit-row--oos:hover td {
  background: color-mix(in srgb, var(--inventory-unit-row-oos-hover-bg) 55%, transparent);
}

.inventory-unit-row--sell {
  background: color-mix(in srgb, var(--inventory-unit-row-sell-bg) 45%, transparent);
}

.inventory-unit-row--sell:hover,
.inventory-unit-row--sell:hover td {
  background: color-mix(in srgb, var(--inventory-unit-row-sell-hover-bg) 55%, transparent);
}

.inv-col-site {
  font-weight: 500;
}

.inv-col-spot {
  font-weight: 600;
  letter-spacing: 0.02em;
}

.inventory-units-panel-table .inv-col-status .badge,
.inventory-units-panel-table .inv-col-load .badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border: none;
}

.inventory-units-panel-table .inv-col-status .badge-R,
.inventory-units-panel-table .inv-col-status .badge-READY,
.inventory-units-panel-table .inv-col-load .badge-Loaded,
.inventory-units-panel-table .inv-col-load .badge-LOADED,
.inventory-units-panel-table .inv-col-load .badge-LD {
  background: var(--trailer-record-pill-success-bg);
  color: var(--trailer-record-pill-success-text);
}

.inventory-units-panel-table .inv-col-status .badge-RoL,
.inventory-units-panel-table .inv-col-status .badge-READY-ON-LEASE,
.inventory-units-panel-table .inv-col-status .badge-PoL,
.inventory-units-panel-table .inv-col-status .badge-PENDING-LEASE {
  background: var(--trailer-record-pill-info-bg);
  color: var(--trailer-record-pill-info-text);
}

.inventory-units-panel-table .inv-col-status .badge-PARTS,
.inventory-units-panel-table .inv-col-status .badge-PT,
.inventory-units-panel-table .inv-col-status .badge-Unknown,
.inventory-units-panel-table .inv-col-status .badge-UNKNOWN,
.inventory-units-panel-table .inv-col-status .badge-FoL,
.inventory-units-panel-table .inv-col-status .badge-FIX-ON-LEASE,
.inventory-units-panel-table .inv-col-load .badge-Empty,
.inventory-units-panel-table .inv-col-load .badge-EMPTY,
.inventory-units-panel-table .inv-col-load .badge-EMP {
  background: var(--trailer-record-pill-neutral-bg);
  color: var(--trailer-record-pill-neutral-text);
}

.inventory-units-panel-table .inv-col-status .badge-OoS,
.inventory-units-panel-table .inv-col-status .badge-OUT-OF-SERVICE,
.inventory-units-panel-table .inv-col-status .badge-SELL,
.inventory-units-panel-table .inv-col-status .badge-SL {
  background: var(--trailer-record-pill-warning-bg);
  color: var(--trailer-record-pill-warning-text);
}

.inventory-units-panel-table .inv-col-status .badge-SCRAP,
.inventory-units-panel-table .inv-col-status .badge-ST {
  background: var(--trailer-record-pill-danger-bg);
  color: var(--trailer-record-pill-danger-text);
}

[data-theme="dark"] .inventory-units-panel-table .inv-col-status .badge,
[data-theme="dark"] .inventory-units-panel-table .inv-col-load .badge {
  border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}

.inv-suitability {
  display: inline-block;
  padding: 4px 11px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.inv-sales-fit {
  display: inline-block;
  max-width: 100%;
  vertical-align: top;
}

.touch-hint-inline-head {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  max-width: 100%;
}

.inv-suitability-info,
.touch-hint-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(148, 163, 184, 0.16);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  cursor: help;
  flex-shrink: 0;
  vertical-align: middle;
}

.inv-suitability-info:hover,
.touch-hint-info-btn:hover {
  background: rgba(148, 163, 184, 0.28);
  color: var(--text);
}

.inv-suitability-info .touch-hint-icon,
.touch-hint-info-btn .touch-hint-icon {
  display: inline;
  margin: 0;
  font-size: 11px;
  opacity: 1;
}

/* =============================================================================
   Touch-friendly hints — hover on desktop, tap on mobile/tablet
   ============================================================================= */
.touch-hint {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 100%;
  vertical-align: top;
}

.touch-hint--inline {
  display: inline-block;
  position: relative;
  vertical-align: top;
  max-width: 100%;
}

.touch-hint-trigger {
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: inherit;
  cursor: help;
}

span.touch-hint-trigger:not(.touch-hint-info-btn):not(.inv-suitability-info) {
  display: inline-block;
  max-width: 100%;
}

.touch-hint-icon {
  display: none;
  margin-left: 4px;
  font-size: 10px;
  font-weight: 700;
  opacity: 0.8;
  vertical-align: middle;
}

.touch-hint-panel {
  display: none;
}

.touch-hint-panel--portaled {
  display: block;
  padding: 10px 12px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--text);
  white-space: normal;
  pointer-events: none;
}

.touch-hint-trigger--disabled-action,
.dashboard-site-delete-btn-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  cursor: help;
}

.dashboard-site-delete-btn-wrap .dashboard-site-delete-btn {
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) and (not (any-pointer: coarse)) {
  .touch-hint:not(.touch-hint--inline):not(.touch-hint--fixed):hover .touch-hint-panel,
  .touch-hint:not(.touch-hint--inline):not(.touch-hint--fixed):focus-within .touch-hint-panel {
    display: block;
    position: absolute;
    z-index: 120;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 180px;
    max-width: min(320px, 80vw);
    padding: 10px 12px;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.45;
    color: var(--text);
    white-space: normal;
    pointer-events: none;
  }

  /* Fixed hints use JS viewport positioning on document.body (see touch-hint.js) */
  .touch-hint--inline .touch-hint-panel,
  .touch-hint--fixed .touch-hint-panel {
    display: none;
    padding: 10px 12px;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.45;
    color: var(--text);
    white-space: normal;
    pointer-events: none;
  }

  .touch-hint-panel--portaled {
    display: block;
  }

  .touch-hint--inline.is-showing .touch-hint-panel:not(.touch-hint-panel--portaled),
  .touch-hint--fixed.is-showing .touch-hint-panel:not(.touch-hint-panel--portaled) {
    display: block;
  }

  .touch-hint--expand:hover .touch-hint-panel,
  .touch-hint--expand:focus-within .touch-hint-panel {
    bottom: auto;
    top: calc(100% + 8px);
  }
}

@media (max-width: 1024px), (hover: none), (any-pointer: coarse) {
  .touch-hint-icon {
    display: inline;
  }

  .inv-suitability-info .touch-hint-icon,
  .touch-hint-info-btn .touch-hint-icon {
    display: inline;
  }

  .touch-hint-trigger {
    cursor: pointer;
  }

  td .touch-hint--inline,
  .data-table .touch-hint--inline,
  .inv-col-fit .touch-hint--inline {
    display: block;
    width: 100%;
    max-width: 100%;
  }

  .touch-hint--inline .touch-hint-panel {
    display: none;
    position: static;
    float: none;
    transform: none;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    z-index: auto;
    pointer-events: auto;
  }

  .touch-hint.is-open .touch-hint-panel {
    display: block;
    position: static;
    margin-top: 6px;
    padding: 8px 10px;
    background: var(--ui-inset-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.45;
    color: var(--text-secondary);
    white-space: normal;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    box-shadow: var(--shadow-sm);
    word-break: break-word;
  }

  .touch-hint--inline.is-open .touch-hint-inline-head {
    display: inline-flex;
  }

  .inventory-units-modal .inventory-unit-table tbody td:has(.touch-hint.is-open) {
    white-space: normal;
    vertical-align: top;
  }

  .inventory-units-modal .inventory-unit-table .touch-hint-panel {
    white-space: normal;
  }

  .touch-hint--expand.is-open .touch-hint-trigger.trailer-cell-meta,
  .touch-hint--expand.is-open .touch-hint-trigger.trailer-list-text,
  .touch-hint--expand.is-open .touch-hint-trigger.inv-tire-pos-note,
  .touch-hint--expand.is-open .touch-hint-trigger.yard-trailer-note-text,
  .touch-hint--expand.is-open .touch-hint-trigger.yard-trailer-fact--tire-positions,
  .touch-hint--expand.is-open .touch-hint-trigger.yard-trailer-fact--brake-positions {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
    white-space: normal;
    text-overflow: unset;
    word-break: break-word;
  }

  .touch-hint--expand.is-open .touch-hint-panel {
    display: none;
  }

  td .touch-hint:not(.touch-hint--inline),
  .inv-col-fit .touch-hint:not(.touch-hint--inline) {
    width: 100%;
  }

  .trailers-panel-table tbody td:has(.touch-hint.is-open),
  table.data-table.yard-table tbody td:has(.touch-hint.is-open) {
    white-space: normal;
    vertical-align: top;
  }
}

@media (min-width: 1025px) {
  table.data-table.yard-table .yard-trailer-fact--tire-positions.touch-hint-trigger,
  table.data-table.yard-table .yard-trailer-fact--brake-positions.touch-hint-trigger {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
  }
}

.inv-suitability-road {
  background: #d1fae5;
  color: #065f46;
}

.inv-suitability-storage {
  background: #fef3c7;
  color: #92400e;
}

.inv-suitability-repair {
  background: #ffedd5;
  color: #9a3412;
}

.inv-suitability-component-pending {
  background: #ede9fe;
  color: #5b21b6;
}

.inv-suitability-caution {
  background: #fee2e2;
  color: #991b1b;
}

.inv-suitability-oos {
  background: #fecaca;
  color: #7f1d1d;
}

.inv-suitability-unknown {
  background: #f3f4f6;
  color: #4b5563;
}

.inv-suitability-sell {
  background: #fef3c7;
  color: #92400e;
}

.inv-suitability-sell-road {
  background: #dbeafe;
  color: #1e40af;
}

.inv-suitability-sell-light {
  background: #ffedd5;
  color: #9a3412;
}

.inv-suitability-sell-as-is {
  background: #fee2e2;
  color: #991b1b;
}

.inv-suitability-sell-pending {
  background: #ede9fe;
  color: #5b21b6;
}

.inv-suitability-retail-ready {
  background: #d1fae5;
  color: #065f46;
}

.inv-suitability-lease-fleet {
  background: #dbeafe;
  color: #1e40af;
}

.inv-suitability-stale {
  background: #fef3c7;
  color: #92400e;
}

.inv-suitability-reserved {
  background: #e0e7ff;
  color: #4338ca;
}

.inv-suitability-lease-repair {
  background: #ffedd5;
  color: #9a3412;
}

.inv-suitability-repair-pipeline {
  background: #fed7aa;
  color: #9a3412;
}

.inv-suitability-parts {
  background: #f3f4f6;
  color: #374151;
}

.inv-suitability-parts-scrap {
  background: #e5e7eb;
  color: #1f2937;
}

.inv-suitability-reconditioned {
  background: #dbeafe;
  color: #1e40af;
}

.inv-suitability-storage-grade {
  background: #e5e7eb;
  color: #374151;
}

.inv-suitability-inspection {
  background: #e0e7ff;
  color: #4338ca;
}

.inv-suitability-dot-hold {
  background: #fecaca;
  color: #7f1d1d;
}

[data-theme="dark"] .inv-suitability-road,
[data-theme="dark"] .inv-suitability-retail-ready {
  background: var(--trailer-record-pill-success-bg);
  color: var(--trailer-record-pill-success-text);
}

[data-theme="dark"] .inv-suitability-lease-fleet,
[data-theme="dark"] .inv-suitability-sell-road,
[data-theme="dark"] .inv-suitability-reconditioned,
[data-theme="dark"] .inv-suitability-reserved,
[data-theme="dark"] .inv-suitability-inspection {
  background: var(--trailer-record-pill-info-bg);
  color: var(--trailer-record-pill-info-text);
}

[data-theme="dark"] .inv-suitability-storage,
[data-theme="dark"] .inv-suitability-stale,
[data-theme="dark"] .inv-suitability-sell,
[data-theme="dark"] .inv-suitability-sell-light,
[data-theme="dark"] .inv-suitability-repair,
[data-theme="dark"] .inv-suitability-lease-repair,
[data-theme="dark"] .inv-suitability-repair-pipeline {
  background: var(--trailer-record-pill-warning-bg);
  color: var(--trailer-record-pill-warning-text);
}

[data-theme="dark"] .inv-suitability-oos,
[data-theme="dark"] .inv-suitability-caution,
[data-theme="dark"] .inv-suitability-sell-as-is,
[data-theme="dark"] .inv-suitability-dot-hold,
[data-theme="dark"] .inv-suitability-parts-scrap {
  background: var(--trailer-record-pill-danger-bg);
  color: var(--trailer-record-pill-danger-text);
}

[data-theme="dark"] .inv-suitability-sell-pending,
[data-theme="dark"] .inv-suitability-component-pending {
  background: var(--trailer-record-pill-purple-bg);
  color: var(--trailer-record-pill-purple-text);
}

[data-theme="dark"] .inv-suitability-unknown,
[data-theme="dark"] .inv-suitability-parts,
[data-theme="dark"] .inv-suitability-storage-grade {
  background: var(--trailer-record-pill-neutral-bg);
  color: var(--trailer-record-pill-neutral-text);
}

.inventory-unit-row--reserved {
  background: color-mix(in srgb, #4338ca 4%, transparent);
}

.inventory-unit-row--repair {
  background: color-mix(in srgb, #9a3412 4%, transparent);
}

.inventory-unit-row--parts {
  background: color-mix(in srgb, #374151 4%, transparent);
}

/* Inventory filter dropdowns — mobile custom select (sales-fit style readability) */
@media (max-width: 1024px) {
  .module-filters-panel .custom-select:has(.inv-filter-select) .custom-select-menu {
    padding: 6px;
    background: var(--ui-panel-bg);
    border-color: var(--ui-panel-border);
    box-shadow: var(--ui-panel-shadow);
  }

  .module-filters-panel .custom-select:has(.inv-filter-select) .custom-select-trigger {
    color: var(--text);
    background-color: var(--ui-inset-bg);
    border: 1px solid var(--ui-inset-border);
    min-height: 44px;
  }

  .module-filters-panel .custom-select:has(.inv-filter-select) .custom-select-option {
    color: var(--text);
    border-radius: 6px;
    margin: 2px 0;
    font-weight: 600;
  }

  .module-filters-panel .custom-select:has(.inv-filter-select) .custom-select-option:hover,
  .module-filters-panel .custom-select:has(.inv-filter-select) .custom-select-option:focus-visible {
    background: color-mix(in srgb, var(--primary) 8%, var(--ui-table-hover));
    color: var(--text);
  }

  .module-filters-panel .custom-select:has(.inv-filter-select) .custom-select-option.is-selected {
    background: color-mix(in srgb, var(--primary) 16%, var(--ui-panel-bg));
    color: var(--primary-dark);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 35%, transparent);
  }

  .module-filters-panel .custom-select:has(.inv-filter-select--tires) .custom-select-option[data-filter-tone="new"],
  .module-filters-panel .custom-select:has(.inv-filter-select--tires) .custom-select-option[data-filter-tone="good"] {
    background: color-mix(in srgb, #10B981 12%, var(--ui-panel-bg));
    color: #065F46;
  }

  .module-filters-panel .custom-select:has(.inv-filter-select--tires) .custom-select-option[data-filter-tone="worn"] {
    background: color-mix(in srgb, #F59E0B 14%, var(--ui-panel-bg));
    color: #92400E;
  }

  .module-filters-panel .custom-select:has(.inv-filter-select--tires) .custom-select-option[data-filter-tone="replace"] {
    background: color-mix(in srgb, #EF4444 12%, var(--ui-panel-bg));
    color: #991B1B;
  }

  .module-filters-panel .custom-select:has(.inv-filter-select--tires) .custom-select-option[data-filter-tone="unknown"] {
    background: color-mix(in srgb, var(--text-muted) 10%, var(--ui-panel-bg));
    color: var(--text-secondary);
  }

  .module-filters-panel .custom-select:has(.inv-filter-select--tires) .custom-select-option.is-selected[data-filter-tone="new"],
  .module-filters-panel .custom-select:has(.inv-filter-select--tires) .custom-select-option.is-selected[data-filter-tone="good"] {
    background: #D1FAE5;
    color: #065F46;
    box-shadow: inset 0 0 0 1px #6EE7B7;
  }

  .module-filters-panel .custom-select:has(.inv-filter-select--tires) .custom-select-option.is-selected[data-filter-tone="worn"] {
    background: #FEF3C7;
    color: #92400E;
    box-shadow: inset 0 0 0 1px #FCD34D;
  }

  .module-filters-panel .custom-select:has(.inv-filter-select--tires) .custom-select-option.is-selected[data-filter-tone="replace"] {
    background: #FEE2E2;
    color: #991B1B;
    box-shadow: inset 0 0 0 1px #FCA5A5;
  }

  .module-filters-panel .custom-select:has(.inv-filter-select--tires) .custom-select-option.is-selected[data-filter-tone="unknown"] {
    background: #F3F4F6;
    color: #4B5563;
    box-shadow: inset 0 0 0 1px #D1D5DB;
  }
}

.inv-filter-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.inv-filter-pill--tire-new,
.inv-filter-pill--tire-good {
  background: #d1fae5;
  color: #065f46;
}

.inv-filter-pill--tire-worn {
  background: #fef3c7;
  color: #92400e;
}

.inv-filter-pill--tire-replace {
  background: #fee2e2;
  color: #991b1b;
}

.inv-filter-pill--tire-unknown {
  background: #f3f4f6;
  color: #4b5563;
}

[data-theme="dark"] .module-filters-panel .custom-select:has(.inv-filter-select) .custom-select-trigger {
  color: var(--text);
  background-color: rgba(15, 23, 42, 0.55);
  border-color: var(--ui-panel-border);
}

[data-theme="dark"] .module-filters-panel .custom-select:has(.inv-filter-select) .custom-select-menu {
  background: var(--ui-panel-bg);
  border-color: var(--ui-panel-border);
}

[data-theme="dark"] .module-filters-panel .custom-select:has(.inv-filter-select) .custom-select-option {
  color: var(--text);
}

[data-theme="dark"] .module-filters-panel .custom-select:has(.inv-filter-select) .custom-select-option.is-selected {
  background: rgba(56, 189, 248, 0.18);
  color: #E0F2FE;
  box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.45);
}

[data-theme="dark"] .module-filters-panel .custom-select:has(.inv-filter-select--tires) .custom-select-option[data-filter-tone="new"],
[data-theme="dark"] .module-filters-panel .custom-select:has(.inv-filter-select--tires) .custom-select-option[data-filter-tone="good"] {
  background: rgba(16, 185, 129, 0.16);
  color: #6EE7B7;
}

[data-theme="dark"] .module-filters-panel .custom-select:has(.inv-filter-select--tires) .custom-select-option[data-filter-tone="worn"] {
  background: rgba(245, 158, 11, 0.16);
  color: #FCD34D;
}

[data-theme="dark"] .module-filters-panel .custom-select:has(.inv-filter-select--tires) .custom-select-option[data-filter-tone="replace"] {
  background: rgba(239, 68, 68, 0.16);
  color: #FCA5A5;
}

[data-theme="dark"] .module-filters-panel .custom-select:has(.inv-filter-select--tires) .custom-select-option[data-filter-tone="unknown"] {
  background: rgba(148, 163, 184, 0.12);
  color: #CBD5E1;
}

[data-theme="dark"] .module-filters-panel .custom-select:has(.inv-filter-select--tires) .custom-select-option.is-selected[data-filter-tone="new"],
[data-theme="dark"] .module-filters-panel .custom-select:has(.inv-filter-select--tires) .custom-select-option.is-selected[data-filter-tone="good"] {
  background: rgba(16, 185, 129, 0.28);
  color: #A7F3D0;
  box-shadow: inset 0 0 0 1px rgba(110, 231, 183, 0.55);
}

[data-theme="dark"] .module-filters-panel .custom-select:has(.inv-filter-select--tires) .custom-select-option.is-selected[data-filter-tone="worn"] {
  background: rgba(245, 158, 11, 0.24);
  color: #FDE68A;
  box-shadow: inset 0 0 0 1px rgba(252, 211, 77, 0.55);
}

[data-theme="dark"] .module-filters-panel .custom-select:has(.inv-filter-select--tires) .custom-select-option.is-selected[data-filter-tone="replace"] {
  background: rgba(239, 68, 68, 0.24);
  color: #FECACA;
  box-shadow: inset 0 0 0 1px rgba(252, 165, 165, 0.55);
}

[data-theme="dark"] .module-filters-panel .custom-select:has(.inv-filter-select--tires) .custom-select-option.is-selected[data-filter-tone="unknown"] {
  background: rgba(148, 163, 184, 0.2);
  color: #E2E8F0;
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.45);
}

[data-theme="dark"] .inv-filter-pill--tire-new,
[data-theme="dark"] .inv-filter-pill--tire-good {
  background: rgba(16, 185, 129, 0.22);
  color: #6EE7B7;
}

[data-theme="dark"] .inv-filter-pill--tire-worn {
  background: rgba(245, 158, 11, 0.22);
  color: #FCD34D;
}

[data-theme="dark"] .inv-filter-pill--tire-replace {
  background: rgba(239, 68, 68, 0.22);
  color: #FCA5A5;
}

[data-theme="dark"] .inv-filter-pill--tire-unknown {
  background: rgba(148, 163, 184, 0.18);
  color: #CBD5E1;
}

.inv-col-issues {
  min-width: 180px;
  max-width: 280px;
}

.inv-issue-line {
  font-size: 12px;
  line-height: 1.45;
  margin-bottom: 4px;
}

.inv-issue-line:last-child {
  margin-bottom: 0;
}

.inv-issue-line--oos {
  color: #991b1b;
}

.inv-issue-line--wo {
  color: #9a3412;
}

.inv-issue-label {
  display: inline-block;
  min-width: 28px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: inherit;
  opacity: 0.85;
}

.inv-tire-pos-note,
.trailer-tire-cell .inv-tire-pos-note,
.trailer-brake-cell .inv-tire-pos-note {
  font-size: 0.78rem;
  line-height: 1.25;
  margin-top: 0.2rem;
}

.trailer-tire-cell,
.trailer-brake-cell {
  min-width: 8.5rem;
  vertical-align: top;
}

.inv-col-fit {
  white-space: nowrap;
}

.inv-unit-customer {
  font-size: 11px;
  margin-top: 2px;
}

.trailer-detail-page .section-title:has(+ .trailer-detail-panel--unit) {
  margin-top: 20px;
}

.trailer-detail-page .trailer-detail-panel--unit .trailer-detail-unit-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  padding: 14px;
  border-bottom: 1px solid var(--trailer-detail-panel-border);
}

.trailer-detail-page .trailer-detail-unit-head__main {
  flex: 1 1 280px;
  min-width: 0;
}

.trailer-detail-page .trailer-detail-unit-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.trailer-detail-page .trailer-detail-panel--unit .trailer-detail-unit-meta .badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border: none;
}

.trailer-detail-page .trailer-detail-panel--unit .trailer-detail-location-text {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text);
}

.trailer-detail-page .trailer-detail-panel--unit .detail-header-actions {
  margin-left: auto;
}

.trailer-detail-page .trailer-detail-panel--unit .detail-header-actions-group {
  background: transparent;
  border: none;
  box-shadow: none;
  gap: 8px;
  padding: 4px 2px;
}

.trailer-detail-page .trailer-detail-panel--unit .detail-header-actions-group .table-action-btn {
  width: 38px;
  height: 38px;
  min-width: 38px;
  min-height: 38px;
  border-radius: var(--radius-sm);
}

.trailer-detail-page .trailer-detail-panel--unit .detail-header-actions-group .table-action-btn svg {
  width: 18px;
  height: 18px;
}

.trailer-detail-page .trailer-detail-panel--unit .detail-header-actions-group .table-action-btn--labeled {
  width: auto;
  min-width: 38px;
  min-height: 38px;
  padding: 0 11px 0 9px;
  gap: 6px;
  border-width: 1.5px;
}

.trailer-detail-page .trailer-detail-panel--unit .detail-header-actions-group .table-action-btn__text {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}

.trailer-detail-page .trailer-detail-panel--unit .detail-header-actions-group .table-action-btn--checkout.table-action-btn--labeled {
  background: color-mix(in srgb, var(--cmd-accent) 14%, var(--ui-panel-bg));
}

.trailer-detail-page .trailer-detail-panel--unit .detail-header-actions-group .table-action-btn--department.table-action-btn--labeled {
  background: color-mix(in srgb, var(--cmd-accent) 16%, var(--ui-panel-bg));
}

.trailer-detail-page .trailer-detail-panel--unit .detail-header-actions-group .table-action-btn--transfer-now.table-action-btn--labeled,
.trailer-detail-page .trailer-detail-panel--unit .detail-header-actions-group .table-action-btn--schedule.table-action-btn--labeled,
.trailer-detail-page .trailer-detail-panel--unit .detail-header-actions-group .table-action-btn--primary.table-action-btn--labeled,
.trailer-detail-page .trailer-detail-panel--unit .detail-header-actions-group .table-action-btn--danger.table-action-btn--labeled {
  background: color-mix(in srgb, var(--cmd-accent) 12%, var(--ui-panel-bg));
}

.trailer-detail-page .trailer-detail-unit-notes {
  padding: 14px;
}

.trailer-detail-page .trailer-detail-unit-notes__label {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--trailer-detail-label-color);
}

.trailer-detail-page .trailer-detail-unit-notes__body {
  padding: 12px 14px;
  background: var(--trailer-record-inset-bg);
  border: 1px solid var(--trailer-record-inset-border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
  word-break: break-word;
  white-space: pre-wrap;
}

.trailer-detail-page .trailer-detail-unit-notes--filled .trailer-detail-unit-notes__body {
  background: var(--trailer-detail-notes-filled-bg);
  border-color: var(--trailer-detail-notes-filled-border);
  border-left: 3px solid var(--primary);
}

.trailer-detail-page .trailer-detail-unit-notes__empty {
  color: var(--text-muted);
  font-style: italic;
  font-size: 13px;
}

@media (max-width: 1024px) {
  .trailer-detail-page .trailer-detail-panel--unit .trailer-detail-unit-head {
    align-items: flex-start;
    gap: 10px 12px;
    padding: 14px;
  }

  .trailer-detail-page .trailer-detail-unit-head__main {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* Full-width toolbar row so labeled actions can wrap instead of clipping */
  .trailer-detail-page .trailer-detail-panel--unit .detail-header-actions {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
    margin-left: 0;
    justify-content: flex-start;
  }

  .trailer-detail-page .trailer-detail-panel--unit .detail-header-actions-group {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
    justify-content: flex-start;
    gap: 8px;
  }
}

@media (max-width: 768px) {
  /* One row: equal-width icon cells (labels in title / aria-label) */
  .trailer-detail-page .trailer-detail-panel--unit .detail-header-actions-group {
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 5px;
    padding: 2px 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .trailer-detail-page .trailer-detail-panel--unit .detail-header-actions-group::-webkit-scrollbar {
    display: none;
  }

  .trailer-detail-page .trailer-detail-panel--unit .detail-header-actions-group .table-action-btn {
    flex: 1 1 0;
    flex-shrink: 1;
    min-width: 0;
    width: auto;
    height: 40px;
    min-height: 40px;
  }

  .trailer-detail-page .trailer-detail-panel--unit .detail-header-actions-group .table-action-btn--labeled {
    padding: 0;
    gap: 0;
    justify-content: center;
  }

  .trailer-detail-page .trailer-detail-panel--unit .detail-header-actions-group .table-action-btn--labeled .table-action-btn__text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

@media (max-width: 640px) {
  .trailer-detail-page .trailer-detail-panel--unit .trailer-detail-unit-head {
    gap: 10px;
    padding: 12px;
  }

  .trailer-detail-page .trailer-detail-unit-meta {
    gap: 5px;
  }

  .trailer-detail-page .trailer-detail-unit-notes {
    padding: 12px;
  }
}

[data-theme="dark"] .trailer-detail-page .trailer-detail-panel--unit .detail-header-actions-group {
  background: rgba(0, 0, 0, 0.22);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.28);
}

/* =============================================================================
   Tire positions — section intro, picker, snapshot grid, per-tire tread inputs
   ============================================================================= */
.tire-section-intro {
  margin: 0 0 14px;
  padding: 12px 14px 12px 16px;
  border: 1px solid var(--ui-panel-border);
  border-left: 3px solid var(--accent, #2563eb);
  border-radius: var(--radius-sm);
  background: var(--ui-panel-bg);
}

.tire-section-intro--existing {
  border-color: rgba(59, 130, 246, 0.35);
  background: rgba(59, 130, 246, 0.06);
}

.tire-section-intro--existing .tire-section-intro__lead {
  color: var(--text-primary, inherit);
}

.tire-section-intro--compact {
  margin-bottom: 10px;
  padding: 10px 12px 10px 14px;
}

.tire-section-intro__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.tire-section-intro__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tire-position-picker__title {
  font-weight: 700;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tire-section-intro__lead {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--text);
}

.tire-section-intro__steps {
  margin: 0;
  padding-left: 1.15rem;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.tire-section-intro__steps li + li {
  margin-top: 4px;
}

.tire-section-intro__steps strong {
  color: var(--text);
  font-weight: 600;
}

.tire-position-picker {
  margin-bottom: 20px;
  padding: 16px;
  border: 1px solid var(--ui-panel-border);
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
}

.tire-position-picker__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.tire-position-picker__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tire-position-picker__help {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 14px;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--text-secondary) 6%, transparent);
}

.tire-position-picker__help-label {
  flex-shrink: 0;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: var(--ui-panel-bg);
  border: 1px solid var(--ui-panel-border);
}

.tire-position-picker__help strong {
  color: var(--text);
  font-weight: 600;
}

.tire-position-bulk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 10px 12px;
  border: 1px dashed var(--ui-panel-border);
  border-radius: var(--radius-sm);
  background: var(--ui-panel-bg);
}

.tire-position-bulk__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-right: 4px;
}

.tire-position-bulk .form-control {
  min-width: 130px;
  flex: 1 1 130px;
}

.tire-position-item__details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
  padding: 4px 0 2px 28px;
}

.tire-position-item__details.hidden {
  display: none;
}

.tire-position-item__field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.tire-position-item__field--tread {
  grid-column: 1 / -1;
  max-width: 200px;
}

.tire-position-item__field-label {
  display: inline-flex;
  align-items: flex-end;
  gap: 5px;
  min-height: 1.25em;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  line-height: 1.25;
}

.tire-position-item__field .form-control {
  width: 100%;
  min-width: 0;
}

.tire-position-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.tire-position-side__title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.tire-position-side__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tire-position-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
}

.tire-position-item__select {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}

.tire-position-item__select input {
  margin-top: 3px;
  flex-shrink: 0;
}

.tire-position-item__label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.tire-position-item__code-row {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.tire-position-item__label strong {
  font-size: 13px;
  color: var(--primary-dark);
}

.tire-position-item__name {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.3;
}

.tire-position-item__tread.hidden {
  display: none;
}

.tire-position-item__tread .form-control {
  max-width: 160px;
}

.tire-position-state-wrap {
  padding: 0 16px 16px;
}

.trailer-detail-panel--tire .tire-snapshot-panel {
  padding: 22px 18px 20px;
  border-bottom: 1px solid var(--trailer-detail-panel-border);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--primary) 5%, transparent) 0%, transparent 100%),
    var(--trailer-detail-panel-bg);
}

.trailer-detail-panel--tire .tire-position-state-wrap__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ui-label-accent, var(--primary));
}

.trailer-detail-panel--tire .tire-position-state-wrap__title::before {
  content: '';
  width: 3px;
  height: 14px;
  border-radius: 999px;
  background: var(--primary);
  flex-shrink: 0;
}

.tire-position-state-wrap__title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.tire-position-state-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.tire-position-state-side {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--ui-panel-border);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--ui-panel-bg) 88%, var(--bg-subtle));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.tire-position-state-side__title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.tire-position-state-side__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.tire-position-state-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 72px;
  padding: 10px 10px 10px 12px;
  border: 1px solid var(--ui-panel-border);
  border-radius: var(--radius-sm);
  background: var(--ui-panel-bg);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  overflow: hidden;
}

.tire-position-state-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--border);
}

.tire-position-state-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.tire-position-state-card__code {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--primary-dark);
}

.tire-position-state-card__status {
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  padding: 3px 7px;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}

.tire-position-state-card__type {
  align-self: flex-start;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid transparent;
  letter-spacing: 0.02em;
}

.tire-position-state-card__type--virgin {
  color: #1d4ed8;
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(59, 130, 246, 0.28);
}

.tire-position-state-card__type--recapped {
  color: #92400e;
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.28);
}

.tire-position-state-card__tread {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding-top: 6px;
  border-top: 1px solid color-mix(in srgb, var(--ui-panel-border) 70%, transparent);
}

.tire-position-state-card__tread-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.tire-position-state-card__tread-value {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.tire-position-state-card--good::before,
.tire-position-state-card--new::before {
  background: var(--success);
}

.tire-position-state-card--good .tire-position-state-card__status,
.tire-position-state-card--new .tire-position-state-card__status {
  color: var(--success-dark);
  background: color-mix(in srgb, var(--success) 14%, transparent);
  border-color: color-mix(in srgb, var(--success) 35%, transparent);
}

.tire-position-state-card--worn::before {
  background: var(--warning);
}

.tire-position-state-card--worn .tire-position-state-card__status {
  color: #B45309;
  background: color-mix(in srgb, var(--warning) 16%, transparent);
  border-color: color-mix(in srgb, var(--warning) 38%, transparent);
}

.tire-position-state-card--replace::before {
  background: var(--danger);
}

.tire-position-state-card--replace .tire-position-state-card__status {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  border-color: color-mix(in srgb, var(--danger) 35%, transparent);
}

.tire-position-state-card--unknown::before,
.tire-position-state-card--empty::before {
  background: var(--text-muted);
}

.tire-position-state-card--unknown .tire-position-state-card__status,
.tire-position-state-card--empty .tire-position-state-card__status {
  color: var(--text-muted);
  background: color-mix(in srgb, var(--text-muted) 12%, transparent);
  border-color: color-mix(in srgb, var(--text-muted) 28%, transparent);
}

.trailer-detail-panel--tire .tire-records-table-wrap {
  padding-top: 4px;
}

.trailer-detail-panel--tire .tire-records-table thead th {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: color-mix(in srgb, var(--ui-table-header-bg) 82%, transparent);
}

.trailer-detail-panel--tire .tire-records-table tbody tr {
  transition: background-color var(--transition);
}

.trailer-detail-panel--tire .tire-records-table tbody tr:hover {
  background: color-mix(in srgb, var(--primary) 4%, var(--ui-table-hover));
}

.trailer-detail-panel--tire .tire-records-table .trailer-record-text-cell {
  font-size: 13px;
}

.trailer-detail-panel--tire .tire-records-table .trailer-detail-date-cell {
  font-weight: 600;
}

[data-theme="dark"] .tire-position-state-side {
  background: color-mix(in srgb, var(--ui-panel-bg) 92%, #0f172a);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

[data-theme="dark"] .tire-position-state-card {
  background: rgba(15, 23, 42, 0.45);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
}

[data-theme="dark"] .tire-position-state-card--good .tire-position-state-card__status,
[data-theme="dark"] .tire-position-state-card--new .tire-position-state-card__status {
  color: #6EE7B7;
}

[data-theme="dark"] .tire-position-state-card--worn .tire-position-state-card__status {
  color: #FCD34D;
}

[data-theme="dark"] .tire-position-state-card--replace .tire-position-state-card__status {
  color: #FCA5A5;
}

[data-theme="dark"] .tire-position-state-card__type--virgin {
  color: #93c5fd;
  background: rgba(59, 130, 246, 0.18);
  border-color: rgba(147, 197, 253, 0.28);
}

[data-theme="dark"] .tire-position-state-card__type--recapped {
  color: #fcd34d;
  background: rgba(245, 158, 11, 0.16);
  border-color: rgba(252, 211, 77, 0.28);
}

[data-theme="dark"] .trailer-detail-panel--tire .tire-snapshot-panel {
  background:
    linear-gradient(180deg, rgba(0, 145, 234, 0.08) 0%, transparent 100%),
    var(--trailer-detail-panel-bg);
}

.tire-position-state-card__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
  font-size: 11px;
  color: var(--text);
}

@media (max-width: 720px) {
  .tire-position-grid,
  .tire-position-state-grid {
    grid-template-columns: 1fr;
  }

  .tire-position-state-side__grid {
    grid-template-columns: 1fr;
  }

  .tire-position-item__details {
    grid-template-columns: 1fr;
    padding-left: 0;
  }

  .tire-position-item__field--tread {
    max-width: none;
  }
}

/* =============================================================================
   Trailer detail record panels — DOT, Tire, Customer, Work Orders, History
   ============================================================================= */
.trailer-detail-page .section-title:has(+ .trailer-detail-panel),
.trailer-detail-page .section-title:has(+ .customer-records-panel) {
  margin-bottom: 0;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  border-top: 1px solid var(--trailer-detail-panel-border);
  border-right: 1px solid var(--trailer-detail-panel-border);
}

.trailer-detail-page .trailer-detail-panel,
.trailer-detail-page .customer-records-panel {
  background: var(--trailer-detail-panel-bg);
  border: 1px solid var(--trailer-detail-panel-border);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.trailer-detail-page .trailer-detail-panel .toolbar,
.trailer-detail-page .trailer-detail-panel .trailer-detail-panel-toolbar,
.trailer-detail-page .customer-records-panel .toolbar {
  margin: 0;
  border: none;
  border-bottom: 1px solid var(--trailer-detail-panel-border);
  border-radius: 0;
  box-shadow: none;
  background: var(--trailer-detail-panel-bg);
}

.trailer-detail-panel-toolbar,
.customer-records-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 16px;
}

.trailer-detail-panel-toolbar__copy,
.customer-records-toolbar__copy {
  flex: 1 1 280px;
  min-width: 0;
}

.trailer-detail-panel-toolbar__title,
.customer-records-toolbar__title {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.trailer-detail-panel-toolbar__hint,
.customer-records-toolbar__hint {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  max-width: 42rem;
  color: var(--ui-muted-readable);
}

.trailer-detail-panel-toolbar .btn,
.customer-records-toolbar .btn {
  flex-shrink: 0;
  align-self: center;
}

.trailer-detail-page .trailer-detail-panel .table-wrap,
.trailer-detail-page .customer-records-panel .table-wrap {
  margin: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

.trailer-detail-page .trailer-detail-panel .table-scroll,
.trailer-detail-page .customer-records-panel .table-scroll {
  background: transparent;
}

.trailer-detail-page .trailer-detail-table {
  width: 100%;
  min-width: max-content;
}

.trailer-detail-date-cell {
  white-space: nowrap;
  font-size: 12px;
  color: var(--text-secondary);
}

.trailer-detail-page .trailer-detail-panel-table .empty-state {
  padding: 24px 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

/* =============================================================================
   Trailer detail record panels — blended inline badges and plain cells
   ============================================================================= */
.trailer-detail-inline-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.trailer-record-pill,
.trailer-detail-page .trailer-detail-panel .badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  border: none;
}

.trailer-record-pill--success { background: var(--trailer-record-pill-success-bg); color: var(--trailer-record-pill-success-text); }
.trailer-record-pill--info { background: var(--trailer-record-pill-info-bg); color: var(--trailer-record-pill-info-text); }
.trailer-record-pill--warning { background: var(--trailer-record-pill-warning-bg); color: var(--trailer-record-pill-warning-text); }
.trailer-record-pill--danger { background: var(--trailer-record-pill-danger-bg); color: var(--trailer-record-pill-danger-text); }
.trailer-record-pill--purple { background: var(--trailer-record-pill-purple-bg); color: var(--trailer-record-pill-purple-text); }
.trailer-record-pill--neutral { background: var(--trailer-record-pill-neutral-bg); color: var(--trailer-record-pill-neutral-text); text-transform: none; letter-spacing: 0.01em; font-size: 11px; }

.trailer-record-pill-meta {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--ui-muted-readable);
}

.trailer-record-pill-column,
.trailer-record-context-cell {
  min-width: 120px;
  vertical-align: middle;
  white-space: nowrap;
}

.trailer-detail-table.dot-records-table th,
.trailer-detail-table.dot-records-table td,
.trailer-detail-table.b-service-records-table th,
.trailer-detail-table.b-service-records-table td {
  text-align: center;
  vertical-align: middle;
}

.trailer-detail-table.dot-records-table td.action-links,
.trailer-detail-table.b-service-records-table td.action-links {
  text-align: center;
}

.trailer-detail-table.dot-records-table .trailer-record-text-cell,
.trailer-detail-table.b-service-records-table .trailer-record-text-cell {
  text-align: center;
}

.trailer-detail-table .trailer-record-due-column {
  text-align: center;
  min-width: 140px;
}

.trailer-detail-table .trailer-record-due-column .trailer-detail-inline-stack {
  align-items: center;
  margin-inline: auto;
  width: fit-content;
  max-width: 100%;
}

.trailer-detail-table .trailer-record-due-column .trailer-record-pill-meta {
  text-align: center;
}

.trailer-detail-table .trailer-record-due-column .trailer-b-service-cell,
.trailer-detail-table .trailer-record-due-column .trailer-detail-date-cell {
  margin-inline: auto;
}

.trailer-record-name-cell strong,
.trailer-record-text-cell {
  font-size: 14px;
  color: var(--text);
}

.trailer-record-name-cell strong {
  font-weight: 700;
}

.trailer-detail-wo-number {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
}

.trailer-record-context-cell {
  min-width: 180px;
  max-width: 260px;
  white-space: normal;
}

.trailer-history-context {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.trailer-history-location {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text);
}

.trailer-history-badges {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.trailer-detail-page .trailer-detail-panel .badge-R,
.trailer-detail-page .trailer-detail-panel .badge-READY,
.trailer-detail-page .trailer-detail-panel .badge-Loaded,
.trailer-detail-page .trailer-detail-panel .badge-LOADED,
.trailer-detail-page .trailer-detail-panel .badge-LD,
.trailer-detail-page .trailer-detail-panel .badge-WO-Complete,
.trailer-detail-page .trailer-detail-panel .badge-tire-New,
.trailer-detail-page .trailer-detail-panel .badge-tire-Good,
.trailer-detail-page .trailer-detail-panel .badge-brake-New,
.trailer-detail-page .trailer-detail-panel .badge-brake-Good {
  background: var(--trailer-record-pill-success-bg);
  color: var(--trailer-record-pill-success-text);
}

.trailer-detail-page .trailer-detail-panel .badge-RoL,
.trailer-detail-page .trailer-detail-panel .badge-READY-ON-LEASE,
.trailer-detail-page .trailer-detail-panel .badge-PoL,
.trailer-detail-page .trailer-detail-panel .badge-PENDING-LEASE,
.trailer-detail-page .trailer-detail-panel .badge-WO-Open,
.trailer-detail-page .trailer-detail-panel .badge-WO-priority-Normal {
  background: var(--trailer-record-pill-info-bg);
  color: var(--trailer-record-pill-info-text);
}

.trailer-detail-page .trailer-detail-panel .badge-PARTS,
.trailer-detail-page .trailer-detail-panel .badge-PT,
.trailer-detail-page .trailer-detail-panel .badge-Unknown,
.trailer-detail-page .trailer-detail-panel .badge-UNKNOWN,
.trailer-detail-page .trailer-detail-panel .badge-FoL,
.trailer-detail-page .trailer-detail-panel .badge-FIX-ON-LEASE,
.trailer-detail-page .trailer-detail-panel .badge-WO-InProgress,
.trailer-detail-page .trailer-detail-panel .badge-WO-priority-High,
.trailer-detail-page .trailer-detail-panel .badge-tire-Worn,
.trailer-detail-page .trailer-detail-panel .badge-brake-Worn {
  background: var(--trailer-record-pill-warning-bg);
  color: var(--trailer-record-pill-warning-text);
}

.trailer-detail-page .trailer-detail-panel .badge-OoS,
.trailer-detail-page .trailer-detail-panel .badge-OUT-OF-SERVICE,
.trailer-detail-page .trailer-detail-panel .badge-WO-priority-Urgent,
.trailer-detail-page .trailer-detail-panel .badge-tire-NeedsReplacement,
.trailer-detail-page .trailer-detail-panel .badge-brake-NeedsReplacement {
  background: var(--trailer-record-pill-danger-bg);
  color: var(--trailer-record-pill-danger-text);
}

.trailer-detail-page .trailer-detail-panel .badge-SELL,
.trailer-detail-page .trailer-detail-panel .badge-SL,
.trailer-detail-page .trailer-detail-panel .badge-WO-OnHold {
  background: var(--trailer-record-pill-purple-bg);
  color: var(--trailer-record-pill-purple-text);
}

.trailer-detail-page .trailer-detail-panel .badge-SCRAP,
.trailer-detail-page .trailer-detail-panel .badge-ST,
.trailer-detail-page .trailer-detail-panel .badge-Empty,
.trailer-detail-page .trailer-detail-panel .badge-EMPTY,
.trailer-detail-page .trailer-detail-panel .badge-EMP,
.trailer-detail-page .trailer-detail-panel .badge-offyard,
.trailer-detail-page .trailer-detail-panel .badge-NA,
.trailer-detail-page .trailer-detail-panel .badge-WO-Cancelled,
.trailer-detail-page .trailer-detail-panel .badge-WO-priority-Low,
.trailer-detail-page .trailer-detail-panel .badge-tire-Unknown,
.trailer-detail-page .trailer-detail-panel .badge-brake-Unknown {
  background: var(--trailer-record-pill-neutral-bg);
  color: var(--trailer-record-pill-neutral-text);
}

/* =============================================================================
   Customer Records — panel-specific
   ============================================================================= */

.customer-assignment-banner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 12px 14px;
  border-bottom: 1px solid var(--trailer-detail-panel-border);
  background: var(--customer-assignment-banner-bg);
}

.customer-assignment-banner--on-yard {
  border-left: 4px solid var(--customer-assignment-banner-on-accent);
  background: var(--customer-assignment-banner-on-bg);
}

.customer-assignment-banner--off-yard {
  border-left: 4px solid var(--customer-assignment-banner-off-accent);
  background: var(--customer-assignment-banner-off-bg);
}

.customer-assignment-banner__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}

.customer-assignment-banner__head strong {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.customer-assignment-banner__meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ui-muted-readable);
}

.customer-assignment-banner__meta-line {
  display: block;
}

.customer-assignment-banner__meta-line--sub {
  font-size: 11px;
  color: var(--text-muted);
}

.customer-yard-cell {
  min-width: 168px;
  max-width: 220px;
  vertical-align: middle;
}

.customer-date-cell {
  white-space: nowrap;
  font-size: 12px;
  color: var(--text);
}

.customer-name-cell strong {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.customer-duration-cell {
  min-width: 132px;
  vertical-align: middle;
}

.customer-duration-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.customer-duration__primary {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text);
}

.customer-duration__meta {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--ui-muted-readable);
}

.trailer-detail-page #customer-records-table .customer-yard-stack-wrap,
.trailer-detail-page .customer-records-table .customer-yard-stack-wrap {
  width: 100%;
}

.trailer-detail-page .customer-yard-snapshot--current .customer-yard-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.trailer-detail-page #customer-records-table .customer-yard-timeline-item .customer-yard-row--badge,
.trailer-detail-page .customer-records-table .customer-yard-timeline-item .customer-yard-row--badge {
  display: flex;
  justify-content: flex-start;
}

.trailer-detail-page #customer-records-table .customer-yard-timeline,
.trailer-detail-page .customer-records-table .customer-yard-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.trailer-detail-page #customer-records-table .customer-yard-timeline-item,
.trailer-detail-page .customer-records-table .customer-yard-timeline-item {
  padding: 0 0 6px;
}

.trailer-detail-page #customer-records-table .customer-yard-timeline-item:last-child,
.trailer-detail-page .customer-records-table .customer-yard-timeline-item:last-child {
  padding-bottom: 0;
}

.trailer-detail-page #customer-records-table .customer-yard-timeline-item + .customer-yard-timeline-item,
.trailer-detail-page .customer-records-table .customer-yard-timeline-item + .customer-yard-timeline-item {
  border-top: 1px solid var(--customer-yard-timeline-divider);
  padding-top: 6px;
}

.trailer-detail-page .customer-yard-cell .customer-yard-stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
  width: 100%;
  margin: 0;
  padding: 0;
}

.trailer-detail-page #customer-records-table .customer-yard-row {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  text-align: left;
}

.trailer-detail-page #customer-records-table .customer-yard-row .yard-status-badge,
.trailer-detail-page #customer-records-table .customer-yard-row .customer-yard-detail {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 0;
  padding: 0;
  text-align: left;
}

.trailer-detail-page #customer-records-table .customer-yard-row--badge .yard-status-badge {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  padding: 3px 8px;
  box-sizing: border-box;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  border: none;
}

.trailer-detail-page #customer-records-table .customer-yard-row .customer-yard-detail,
.trailer-detail-page .customer-records-table .customer-yard-row .customer-yard-detail {
  font-size: 12px;
  line-height: 1.4;
  color: var(--ui-muted-readable);
}

.trailer-detail-page #customer-records-table .yard-status-badge--on,
.trailer-detail-page .customer-records-table .yard-status-badge--on,
.customer-assignment-banner .yard-status-badge--on {
  background: var(--customer-yard-badge-on-bg);
  color: var(--customer-yard-badge-on-text);
}

.trailer-detail-page #customer-records-table .yard-status-badge--off,
.trailer-detail-page .customer-records-table .yard-status-badge--off,
.customer-assignment-banner .yard-status-badge--off {
  background: var(--customer-yard-badge-off-bg);
  color: var(--customer-yard-badge-off-text);
}

.customer-record-status {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.customer-record-status--current {
  background: var(--customer-record-status-current-bg);
  color: var(--customer-record-status-current-text);
}

.customer-record-status--off-yard {
  background: var(--customer-record-status-off-bg);
  color: var(--customer-record-status-off-text);
}

.customer-duration {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.trailer-detail-page #customer-records-table tbody tr.customer-record-current,
.trailer-detail-page .customer-records-table tbody tr.customer-record-current {
  color: var(--customer-record-current-text);
}

.trailer-detail-page #customer-records-table tbody tr.customer-record-current--on-yard,
.trailer-detail-page .customer-records-table tbody tr.customer-record-current--on-yard {
  background: color-mix(in srgb, var(--customer-record-current-on-bg) 45%, transparent);
}

.trailer-detail-page #customer-records-table tbody tr.customer-record-current--on-yard:hover,
.trailer-detail-page #customer-records-table tbody tr.customer-record-current--on-yard:hover td,
.trailer-detail-page .customer-records-table tbody tr.customer-record-current--on-yard:hover,
.trailer-detail-page .customer-records-table tbody tr.customer-record-current--on-yard:hover td {
  background: color-mix(in srgb, var(--customer-record-current-on-hover) 55%, transparent);
}

.trailer-detail-page #customer-records-table tbody tr.customer-record-current--off-yard,
.trailer-detail-page .customer-records-table tbody tr.customer-record-current--off-yard {
  background: color-mix(in srgb, var(--customer-record-current-off-bg) 45%, transparent);
}

.trailer-detail-page #customer-records-table tbody tr.customer-record-current--off-yard:hover,
.trailer-detail-page #customer-records-table tbody tr.customer-record-current--off-yard:hover td,
.trailer-detail-page .customer-records-table tbody tr.customer-record-current--off-yard:hover,
.trailer-detail-page .customer-records-table tbody tr.customer-record-current--off-yard:hover td {
  background: color-mix(in srgb, var(--customer-record-current-off-hover) 55%, transparent);
}

.trailer-detail-page #customer-records-table tbody tr.customer-record-current td,
.trailer-detail-page .customer-records-table tbody tr.customer-record-current td {
  background: transparent;
  color: var(--customer-record-current-text);
  border-bottom-color: var(--trailer-detail-card-border);
}

.trailer-detail-page #customer-records-table tbody tr.customer-record-current td .text-muted,
.trailer-detail-page .customer-records-table tbody tr.customer-record-current td .text-muted {
  color: var(--customer-record-current-muted);
}

.trailer-detail-page #customer-records-table,
.trailer-detail-page .customer-records-table {
  width: 100%;
  min-width: max-content;
  border-collapse: separate;
  border-spacing: 0;
}

.trailer-detail-page #customer-records-table tbody tr:last-child.customer-record-current td:first-child {
  border-bottom-left-radius: var(--radius);
}

.trailer-detail-page #customer-records-table tbody tr:last-child.customer-record-current td:last-child {
  border-bottom-right-radius: var(--radius);
}

.customer-yard-snapshot__label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.customer-yard-detail {
  font-size: 12px;
  line-height: 1.45;
}

.inv-schedule-days {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 6px;
}

.inv-day-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  background: var(--surface);
}

.inv-day-chip input {
  margin: 0;
}

@media (max-width: 900px) {
  .module-stats-grid--3,
  .module-stats-grid--4 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px;
  }

  .module-stats-grid .site-card {
    padding: 12px 10px;
  }

  .module-stats-grid .site-card h3 {
    font-size: 24px;
    margin-bottom: 4px;
  }

  .module-stats-grid .site-card .meta {
    font-size: 11px;
    line-height: 1.3;
  }

  .inventory-cards-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .module-stats-grid .site-card h3 {
    font-size: 22px;
  }
}

/* =============================================================================
   Utility
   ============================================================================= */
.hidden { display: none !important; }
.text-muted { color: var(--ui-muted-readable); }
.text-right { text-align: right; }
.mb-16 { margin-bottom: 16px; }
.mt-16 { margin-top: 16px; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.clearfix::after { content: ""; display: table; clear: both; }

.empty-state {
  text-align: center;
  padding: 48px;
  color: var(--ui-muted-readable);
}

.action-links {
  display: inline-flex;
  gap: 6px;
  flex-wrap: nowrap;
  align-items: center;
  vertical-align: middle;
}

td.action-links,
th.action-links {
  display: table-cell;
}

table.data-table th.col-actions,
table.data-table td.col-actions {
  width: 98px;
  min-width: 98px;
  max-width: 98px;
  white-space: nowrap;
  vertical-align: middle;
  text-align: left;
}

.table-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
}

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

.table-action-btn--primary {
  --cmd-accent: #6BA3D6;
  border: 1px solid color-mix(in srgb, var(--cmd-accent) 44%, var(--ui-panel-border));
  background: var(--ui-panel-bg);
  color: var(--text);
  box-shadow: none;
}

.table-action-btn--primary:hover,
.table-action-btn--primary:focus-visible {
  background: color-mix(in srgb, var(--cmd-accent) 10%, var(--ui-panel-bg));
  border-color: var(--cmd-accent);
  color: var(--text);
  transform: translateY(-1px);
  box-shadow: 0 1px 6px color-mix(in srgb, var(--cmd-accent) 12%, transparent);
}

.table-action-btn--primary:active {
  transform: translateY(0);
  box-shadow: none;
}

.table-action-btn--secondary {
  --cmd-accent: var(--primary);
  border: 1px solid color-mix(in srgb, var(--cmd-accent) 32%, var(--ui-panel-border));
  background: var(--ui-panel-bg);
  color: var(--text-secondary);
  box-shadow: none;
}

.table-action-btn--secondary:hover,
.table-action-btn--secondary:focus-visible {
  background: color-mix(in srgb, var(--cmd-accent) 8%, var(--ui-panel-bg));
  border-color: var(--cmd-accent);
  color: var(--text);
  transform: translateY(-1px);
  box-shadow: 0 1px 6px color-mix(in srgb, var(--cmd-accent) 10%, transparent);
}

.table-action-btn--secondary:active {
  transform: translateY(0);
  box-shadow: none;
}

.table-action-btn--danger {
  --cmd-accent: #b42318;
  border: 1px solid color-mix(in srgb, var(--cmd-accent) 40%, var(--ui-panel-border));
  background: var(--ui-panel-bg);
  color: var(--cmd-accent);
  box-shadow: none;
}

.table-action-btn--danger:hover,
.table-action-btn--danger:focus-visible {
  background: color-mix(in srgb, var(--cmd-accent) 8%, var(--ui-panel-bg));
  border-color: var(--cmd-accent);
  color: var(--cmd-accent);
  transform: translateY(-1px);
  box-shadow: 0 1px 6px color-mix(in srgb, var(--cmd-accent) 12%, transparent);
}

.table-action-btn--danger:active {
  transform: translateY(0);
  box-shadow: none;
}

.table-action-btn--checkout {
  --cmd-accent: #DDB56A;
  border: 1px solid color-mix(in srgb, var(--cmd-accent) 44%, var(--ui-panel-border));
  background: var(--ui-panel-bg);
  color: var(--cmd-accent);
  box-shadow: none;
}

.table-action-btn--checkout:hover,
.table-action-btn--checkout:focus-visible {
  background: color-mix(in srgb, var(--cmd-accent) 10%, var(--ui-panel-bg));
  border-color: var(--cmd-accent);
  color: var(--cmd-accent);
  transform: translateY(-1px);
  box-shadow: 0 1px 6px color-mix(in srgb, var(--cmd-accent) 12%, transparent);
}

.table-action-btn--checkout:active {
  transform: translateY(0);
  box-shadow: none;
}

.table-action-btn--department {
  --cmd-accent: #6366f1;
  border: 1px solid color-mix(in srgb, var(--cmd-accent) 44%, var(--ui-panel-border));
  background: color-mix(in srgb, var(--cmd-accent) 10%, var(--ui-panel-bg));
  color: var(--cmd-accent);
  box-shadow: none;
}

.table-action-btn--department:hover,
.table-action-btn--department:focus-visible {
  background: color-mix(in srgb, var(--cmd-accent) 10%, var(--ui-panel-bg));
  border-color: var(--cmd-accent);
  color: var(--cmd-accent);
  transform: translateY(-1px);
  box-shadow: 0 1px 6px color-mix(in srgb, var(--cmd-accent) 12%, transparent);
}

.table-action-btn--department:active {
  transform: translateY(0);
  box-shadow: none;
}

.table-action-btn--transfer-now {
  --cmd-accent: #0d9488;
  border: 1px solid color-mix(in srgb, var(--cmd-accent) 44%, var(--ui-panel-border));
  background: color-mix(in srgb, var(--cmd-accent) 8%, var(--ui-panel-bg));
  color: var(--cmd-accent);
  box-shadow: none;
}

.table-action-btn--transfer-now:hover,
.table-action-btn--transfer-now:focus-visible {
  background: color-mix(in srgb, var(--cmd-accent) 14%, var(--ui-panel-bg));
  border-color: var(--cmd-accent);
  color: var(--cmd-accent);
  transform: translateY(-1px);
  box-shadow: 0 1px 6px color-mix(in srgb, var(--cmd-accent) 16%, transparent);
}

.table-action-btn--schedule {
  --cmd-accent: #7c3aed;
  border: 1px solid color-mix(in srgb, var(--cmd-accent) 40%, var(--ui-panel-border));
  background: var(--ui-panel-bg);
  color: var(--cmd-accent);
  box-shadow: none;
}

.table-action-btn--schedule:hover,
.table-action-btn--schedule:focus-visible {
  background: color-mix(in srgb, var(--cmd-accent) 10%, var(--ui-panel-bg));
  border-color: var(--cmd-accent);
  color: var(--cmd-accent);
  transform: translateY(-1px);
  box-shadow: 0 1px 6px color-mix(in srgb, var(--cmd-accent) 14%, transparent);
}

.table-action-btn--transfer-now:active,
.table-action-btn--schedule:active {
  transform: translateY(0);
  box-shadow: none;
}

.table-action-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--primary) 55%, transparent);
  outline-offset: 2px;
}

[data-theme="dark"] .table-action-btn--primary,
[data-theme="dark"] .table-action-btn--secondary,
[data-theme="dark"] .table-action-btn--danger,
[data-theme="dark"] .table-action-btn--checkout,
[data-theme="dark"] .table-action-btn--department,
[data-theme="dark"] .table-action-btn--transfer-now,
[data-theme="dark"] .table-action-btn--schedule {
  background: var(--ui-panel-bg);
  border-color: color-mix(in srgb, var(--cmd-accent) 46%, var(--ui-panel-border));
}

[data-theme="dark"] .table-action-btn--primary {
  color: var(--text);
}

.support-panel-intro {
  margin-bottom: 12px;
}

.support-panel-intro .module-toolbar-title {
  margin: 0 0 4px;
}

.support-panel-intro .module-filter-summary {
  margin: 0;
}

.support-list-card {
  border: 1px solid var(--trailer-detail-panel-border);
  border-radius: var(--radius);
  background: var(--trailer-detail-panel-bg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.support-list-card > .table-wrap,
.support-list-card > .support-panel-table {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: var(--ui-panel-bg);
}

.support-list-card > .table-wrap > table.data-table,
.support-list-card > .support-panel-table > table.data-table {
  width: 100%;
  min-width: 100%;
  table-layout: auto;
}

.support-list-card > .table-wrap > table.customers-table,
.support-list-card > .table-wrap > table.vendors-table {
  table-layout: auto;
  width: max-content;
  min-width: 100%;
}

.support-list-card > .table-wrap > table.data-table tbody tr td,
.support-list-card > .support-panel-table > table.data-table tbody tr td {
  background-color: var(--ui-panel-bg);
}

.support-list-card > .table-wrap > table.data-table tbody tr:nth-child(even) td,
.support-list-card > .support-panel-table > table.data-table tbody tr:nth-child(even) td {
  background-color: var(--ui-table-stripe);
}

.support-list-card > .table-wrap > table.data-table tbody tr:hover td,
.support-list-card > .support-panel-table > table.data-table tbody tr:hover td {
  background-color: var(--ui-table-hover);
}

/* Invisible filler column absorbs leftover width so row bands reach the table edge */
.support-list-card .data-table th.col-fill,
.support-list-card .data-table td.col-fill {
  width: auto;
  min-width: 0;
  padding: 0;
  border-left: none;
  border-right: none;
  border-top: none;
  border-bottom: 1px solid var(--ui-table-cell-border);
  background-color: inherit;
}

.support-list-card .data-table thead th.col-fill {
  background: var(--ui-table-header-bg);
  border-bottom: 1px solid var(--ui-panel-border);
}

.support-list-card .data-table tbody tr:last-child td.col-fill {
  border-bottom: none;
}

.support-list-card .data-table th.col-actions,
.support-list-card .data-table td.col-actions {
  width: 110px;
  min-width: 110px;
  max-width: 110px;
}

.trailer-type-options-table .trailer-type-reefer-col {
  width: 280px;
  min-width: 260px;
}

.trailer-type-reefer-cell {
  vertical-align: middle;
}

.trailer-type-tracking-toggles {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.trailer-type-tracking-toggles--spec {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
  flex-wrap: wrap;
  max-width: 220px;
}

.trailer-type-reefer-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
}

.trailer-type-reefer-toggle input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #8b7dff;
}

.trailer-type-reefer-toggle--disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.trailer-type-reefer-toggle--disabled input {
  cursor: not-allowed;
}

.app-shell--staff-portal .support-list-card > .table-wrap > table.data-table tbody tr:hover td,
.app-shell--staff-portal .support-list-card > .support-panel-table > table.data-table tbody tr:hover td,
.app-shell--customer-portal .support-list-card > .table-wrap > table.data-table tbody tr:hover td,
.app-shell--customer-portal .support-list-card > .support-panel-table > table.data-table tbody tr:hover td {
  background-color: var(--terminal-row-hover);
}

.support-list-card .support-panel-stats {
  margin: 0;
  padding: 14px;
  border-bottom: 1px solid var(--trailer-detail-panel-border);
  background: var(--trailer-detail-panel-bg);
}

.support-list-card .support-panel-stats .yard-tm-stat-card {
  background: var(--ui-inset-bg);
  border: 1px solid var(--border);
  box-shadow: none;
}

.support-list-card .support-panel-stats .yard-tm-stat-card__value {
  color: var(--dashboard-stat-value-color);
}

.support-list-card .support-panel-toolbar {
  margin: 0;
  padding: 0;
  border: none;
  border-bottom: 1px solid var(--trailer-detail-panel-border);
  border-radius: 0;
  box-shadow: none;
  background: var(--trailer-detail-panel-bg);
}

.support-list-card .support-panel-toolbar .module-toolbar-head {
  margin-bottom: 8px;
}

.support-list-card .support-panel-toolbar .module-filter-bar {
  gap: 0;
}

.support-list-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--trailer-detail-panel-border);
  background: var(--trailer-detail-panel-bg);
}

.support-list-card-head-text {
  flex: 1 1 0;
  min-width: 0;
}

.support-list-card-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.support-list-card-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}

.support-list-card-count {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary);
  border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent);
}

.support-list-card-summary {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.5;
  max-width: 100%;
  padding-right: 16px;
}

.support-list-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
  padding-top: 1px;
}

.customer-import-preview {
  margin: 0;
  padding: 10px 14px 10px 28px;
  max-height: 220px;
  overflow: auto;
  border: 1px solid var(--ui-panel-border);
  border-radius: var(--radius-sm);
  background: var(--ui-inset-bg);
}

.customer-import-preview li {
  margin: 0 0 4px;
  font-size: 13px;
  line-height: 1.35;
}

.support-section-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  padding: 16px 18px 16px 20px;
  background: linear-gradient(180deg, var(--ui-panel-bg) 0%, var(--dashboard-surface-gradient-end, var(--ui-panel-bg)) 100%);
  border: 1px solid var(--ui-panel-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--ui-panel-shadow);
  position: relative;
  overflow: visible;
}

.support-section-toolbar:has(.custom-select.is-open) {
  z-index: 200;
}

.support-section-toolbar::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--primary) 0%, var(--csg-blue-light) 100%);
  opacity: 0.85;
}

.support-section-toolbar--email-config {
  margin-bottom: 20px;
}

.support-section-toolbar__pickers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
  width: 100%;
}

.support-section-picker-wrap {
  display: contents;
}

.support-section-picker-wrap.hidden {
  display: none;
}

.support-section-picker {
  flex: 1 1 260px;
  min-width: min(280px, 100%);
}

@media (min-width: 1025px) {
  .support-section-toolbar .support-section-picker.dashboard-jump-picker {
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }

  .support-section-toolbar .support-section-picker.dashboard-jump-picker > label {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--text-secondary);
    white-space: nowrap;
    text-transform: none;
  }

  .support-section-toolbar .support-section-picker .dashboard-toolbar-row {
    flex: 1;
    min-width: 0;
  }
}

@media (max-width: 1024px) {
  .support-section-toolbar__pickers {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .support-section-toolbar .support-section-picker {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
  }

  .support-section-toolbar .support-section-picker.dashboard-jump-picker {
    min-width: 0;
  }

  .support-section-toolbar .support-section-picker .dashboard-toolbar-row,
  .support-section-toolbar .support-section-picker .dashboard-select-wrap {
    width: 100%;
  }

  .support-section-toolbar .support-section-picker .dashboard-jump-select {
    width: 100%;
  }

  .support-section-toolbar .dashboard-select-wrap .custom-select {
    width: 100%;
    max-width: 100%;
  }
}

.email-schedule-intro {
  max-width: 72ch;
}

.support-add-btn {
  white-space: nowrap;
}

[data-theme="dark"] .support-section-toolbar {
  background: linear-gradient(180deg, var(--ui-panel-bg) 0%, rgba(15, 23, 42, 0.65) 100%);
  border-color: var(--ui-panel-border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .yard-view-panel {
  background: var(--ui-panel-bg);
  border-color: var(--ui-panel-border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .yard-check-bar {
  background: linear-gradient(180deg, var(--ui-panel-bg) 0%, rgba(15, 23, 42, 0.65) 100%);
}

[data-theme="dark"] .yard-view-panel .yard-check-bar {
  background: var(--ui-panel-bg);
}

[data-theme="dark"] .yard-tab-toolbar__panel {
  background: linear-gradient(180deg, var(--ui-panel-bg) 0%, rgba(15, 23, 42, 0.65) 100%);
  border-color: var(--ui-panel-border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .row-chip {
  background: rgba(15, 23, 42, 0.55);
  border-color: var(--ui-panel-border);
  color: #CBD5E1;
}

[data-theme="dark"] .yard-check-field__select {
  background: rgba(15, 23, 42, 0.55);
  border-color: var(--ui-panel-border);
}

[data-theme="dark"] .yard-check-field__select:hover {
  border-color: rgba(56, 189, 248, 0.35);
  background: rgba(15, 23, 42, 0.75);
}

[data-theme="dark"] .yard-check-field__select:focus,
[data-theme="dark"] .yard-check-field__select:focus-visible {
  border-color: rgba(56, 189, 248, 0.55);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.16);
}

[data-theme="dark"] .yard-check-meta__chip {
  background: rgba(15, 23, 42, 0.55);
  border-color: var(--ui-panel-border);
  color: #CBD5E1;
}

[data-theme="dark"] .yard-check-meta__icon {
  color: #38BDF8;
}

[data-theme="dark"] .days-badge.days-warning {
  color: #FCD34D;
}

[data-theme="dark"] .days-badge.days-critical {
  color: #FCA5A5;
}

@media (min-width: 1025px) {
  [data-theme="dark"] table.data-table.yard-table td.spot-label {
    background: color-mix(in srgb, var(--ui-table-header-bg) 92%, transparent);
  }

  [data-theme="dark"] table.data-table.yard-table tbody tr.yard-table-spot-row--stripe td.spot-label {
    background: color-mix(in srgb, var(--ui-table-stripe) 65%, var(--ui-table-header-bg));
  }
}

.table-wrap-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--ui-table-cell-border);
  background: var(--ui-table-header-bg);
}

.table-wrap-toolbar-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

@media (max-width: 640px) {
  .support-section-toolbar {
    padding: 14px 14px 14px 16px;
  }

  .support-list-card-head {
    flex-direction: column;
    align-items: stretch;
    padding: 10px 12px;
    gap: 10px;
  }

  .support-list-card-actions {
    padding-top: 0;
  }

  .support-list-card-title {
    font-size: 14px;
  }

  .support-list-card-summary {
    display: none;
  }

  .dashboard-accent-cmd-bar--toolbar {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .dashboard-accent-cmd-bar--toolbar .dashboard-cmd {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    overflow: visible;
  }

  .user-roles-panel__header {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .user-roles-panel__header > .dashboard-accent-cmd-bar--toolbar {
    align-self: stretch;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
  }

  .support-list-card .data-table th,
  .support-list-card .data-table td {
    padding: 8px 10px;
    font-size: 12px;
  }

  .support-list-card .data-table th {
    font-size: 10px;
  }

  #users-panel .data-table .col-display-name,
  #users-panel .data-table .col-email,
  #users-panel .data-table .col-created {
    display: none;
  }

  #users-panel .data-table td.user-avatar-cell {
    width: 44px;
    padding-right: 6px;
  }

  #users-panel .data-table .col-role {
    white-space: nowrap;
  }

  #users-panel .data-table .user-mobile-meta {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    line-height: 1.3;
  }

  #resources-panel .data-table .col-added {
    display: none;
  }
}

.support-panel-toolbar {
  margin-bottom: 16px;
}

.support-panel-head .module-toolbar-head {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.support-panel-toolbar-head {
  flex-wrap: wrap;
}

.support-panel-toolbar-head .module-filter-summary {
  flex-basis: 100%;
  margin-top: 2px;
}

.resource-list-actions-view {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.resource-list-actions-edit {
  display: none;
  gap: 6px;
  align-items: center;
}

.resource-list-row--editing .resource-list-actions-view {
  display: none;
}

.resource-list-row--editing .resource-list-actions-edit {
  display: inline-flex;
}

.resource-list-name-display {
  display: inline-block;
  min-height: 1.5em;
  padding: 6px 0;
}

.resource-list-name-input {
  display: none;
  max-width: 320px;
}

.resource-list-row--editing .resource-list-name-display {
  display: none;
}

.resource-list-row--editing .resource-list-name-input {
  display: block;
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--ui-border-strong, #c5cdd8);
  border-radius: 6px;
  background: var(--ui-panel-bg, #fff);
  color: var(--ui-text, #1a2332);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn-icon:hover {
  background: var(--ui-hover-bg, #eef2f7);
  border-color: var(--ui-border-strong, #98a5b8);
}

.btn-icon:focus-visible {
  outline: 2px solid var(--ui-focus, #2563eb);
  outline-offset: 2px;
}

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

.btn-icon--danger {
  color: #b42318;
}

.btn-icon--danger:hover {
  background: #fef3f2;
  border-color: #fecdca;
}

[data-theme="dark"] .btn-icon {
  background: var(--ui-panel-bg);
  border-color: var(--ui-border-strong);
  color: var(--ui-text);
}

[data-theme="dark"] .btn-icon:hover {
  background: var(--ui-hover-bg);
}

[data-theme="dark"] .btn-icon--danger {
  color: #f97066;
}

[data-theme="dark"] .btn-icon--danger:hover {
  background: rgba(240, 68, 56, 0.12);
  border-color: rgba(240, 68, 56, 0.35);
}

.row-group-header td {
  background: var(--ui-section-bg);
  font-weight: 700;
  font-size: 13px;
  color: var(--ui-section-text);
  padding: 10px 16px !important;
  border-bottom: 1px solid var(--ui-panel-border) !important;
}

/* =============================================================================
   Yard Check — Edit tab spot table
   ============================================================================= */
.yard-tab-toolbar__actions--icons {
  display: flex;
  align-items: center;
  gap: 6px;
}

.yard-spot-edit-wrap {
  margin-top: 0;
}

.yard-spot-edit-panel {
  margin-top: 0;
}

.yard-spot-edit-toolbar .module-filters-panel {
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 14px 16px 16px;
  background: transparent;
}

.yard-spot-edit-table thead th {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.yard-spot-edit-table tbody tr.yard-spot-edit-row td {
  padding: 10px 16px;
  vertical-align: middle;
}

.yard-spot-edit-table .row-group-header td {
  padding: 9px 16px !important;
}

.yard-spot-edit__group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.yard-spot-edit__group-copy {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex-wrap: wrap;
}

.yard-spot-edit__row-blocked {
  font-size: 12px;
  font-weight: 600;
  color: var(--warning);
}

.yard-spot-edit__group-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.yard-spot-edit__group-label {
  font-weight: 700;
  letter-spacing: 0.01em;
}

.yard-spot-edit__group-meta {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

.yard-spot-edit__code {
  width: 96px;
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
  white-space: nowrap;
}

.yard-spot-edit__num {
  width: 120px;
}

.yard-spot-edit__input {
  width: 80px;
  max-width: 100%;
  height: 34px;
  padding: 6px 10px;
  font-size: 14px;
  font-weight: 600;
}

.yard-spot-edit__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.yard-spot-edit__occupied {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--ui-inset-bg);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.yard-spot-edit__empty {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, #059669 28%, var(--border));
  background: color-mix(in srgb, #059669 10%, var(--ui-inset-bg));
  color: #059669;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.yard-spot-edit-row--dirty {
  background: color-mix(in srgb, var(--primary) 7%, transparent);
}

.yard-spot-edit-row--dirty .yard-spot-edit__input {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 24%, transparent);
}

@media (max-width: 640px) {
  .yard-spot-edit-table .row-group-header td {
    flex-wrap: wrap;
  }

  .yard-spot-edit__input {
    width: 100%;
  }
}

/* =============================================================================
   Gate Module
   ============================================================================= */
.gate-hub {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  padding: 20px 0 40px;
}

.gate-hub-subtitle {
  margin-bottom: 36px;
}

.gate-hub-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px;
  justify-content: center;
}

.gate-hub-card {
  background: var(--ui-panel-bg);
  border: 1px solid var(--ui-panel-border);
  border-radius: var(--radius-lg);
  padding: 32px 28px 28px;
  box-shadow: var(--ui-panel-shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform var(--transition), box-shadow var(--transition);
}

.gate-hub-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.gate-card-image {
  width: 88px;
  height: 88px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--gate-card-icon-accent, var(--primary)) 12%, var(--ui-inset-bg)) 0%,
    var(--ui-inset-bg) 100%
  );
  border: 1px solid color-mix(in srgb, var(--gate-card-icon-accent, var(--primary)) 24%, var(--border));
  box-shadow: var(--shadow-sm);
  color: var(--gate-card-icon-accent, var(--primary));
  position: relative;
  overflow: hidden;
}

.gate-card-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--gate-card-icon-accent, var(--primary)) 14%, transparent), transparent 58%);
  pointer-events: none;
}

.gate-card-image--trailer {
  --gate-card-icon-accent: var(--primary);
}

.gate-card-image--visitor {
  --gate-card-icon-accent: #7c3aed;
}

.gate-card-image__icon {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
}

.gate-card-image__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.gate-card-icon-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.gate-card-title {
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 24px;
  letter-spacing: -0.01em;
}

.gate-card-actions {
  width: 100%;
  max-width: 320px;
  margin-top: 6px;
}

.gate-card-footer {
  width: 100%;
  max-width: 320px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.gate-card-footer--split {
  display: flex;
  gap: 10px;
}

.gate-card-footer--split .gate-card-log-btn {
  flex: 1;
  min-width: 0;
}

@media (max-width: 540px) {
  .gate-card-footer--split {
    flex-direction: column;
  }
}

.gate-card-log-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 11px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.gate-card-log-btn:hover,
.gate-card-log-btn:focus-visible {
  background: rgba(0, 114, 188, 0.06);
  border-color: var(--primary);
  color: var(--primary);
  box-shadow: 0 4px 12px rgba(0, 114, 188, 0.12);
  transform: translateY(-1px);
  text-decoration: none;
  outline: none;
}

.gate-card-log-btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: var(--primary);
  flex-shrink: 0;
}

.gate-card-log-btn__icon svg {
  width: 18px;
  height: 18px;
}

.gate-card-log-btn__label {
  letter-spacing: 0.01em;
}

.gate-log-page {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.gate-back-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.gate-back-nav > .page-back-btn {
  flex-shrink: 0;
  width: auto;
  margin-bottom: 0;
  min-height: 38px;
  box-sizing: border-box;
}

.gate-back-nav .gate-cmd-bar {
  flex-shrink: 0;
  margin: 0;
  align-self: center;
  min-height: 38px;
  box-sizing: border-box;
  align-items: center;
}

.gate-log-page-head {
  flex: 0 0 auto;
  min-width: 0;
}

.gate-log-page-head .page-title {
  margin-bottom: 6px;
}

.gate-log-page-head .text-muted {
  max-width: 560px;
  margin: 0;
  line-height: 1.5;
}

.gate-list-panel {
  background: var(--trailer-detail-panel-bg);
  border: 1px solid var(--trailer-detail-panel-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.gate-list-panel-stats {
  margin: 0;
  padding: 14px;
  border-bottom: 1px solid var(--trailer-detail-panel-border);
  background: var(--trailer-detail-panel-bg);
}

.gate-list-panel-stats .gate-stat-card {
  background: var(--ui-inset-bg);
  border: 1px solid var(--border);
  box-shadow: none;
}

.gate-list-panel-stats .gate-stat-card h3 {
  color: var(--dashboard-stat-value-color);
}

.gate-list-panel-toolbar {
  margin: 0;
  padding: 0;
  border: none;
  border-bottom: 1px solid var(--trailer-detail-panel-border);
  border-radius: 0;
  box-shadow: none;
  background: var(--trailer-detail-panel-bg);
}

.gate-list-panel-toolbar .module-toolbar-head {
  margin-bottom: 8px;
}

.gate-list-panel-toolbar .module-filter-bar {
  gap: 0;
}

.gate-toolbar-head {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}

.gate-toolbar-head__copy {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 220px;
  min-width: 0;
}

.gate-toolbar-head__copy .module-toolbar-title {
  flex-shrink: 0;
}

.gate-toolbar-head__copy .module-filter-summary {
  flex: 1;
  min-width: 0;
}

.gate-toolbar-head__actions {
  flex-shrink: 0;
}

.gate-toolbar-head .module-clear-filters {
  margin-left: auto;
  flex-shrink: 0;
}

.gate-toolbar-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.gate-toolbar-actions__export .export-dropdown-trigger {
  min-width: 96px;
  height: 32px;
  padding: 0 10px;
  font-size: 12px;
}

.gate-toolbar-actions__icons {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

@media (max-width: 720px) {
  .gate-toolbar-head__copy {
    flex: 1 1 100%;
  }

  .gate-toolbar-head__actions {
    order: 3;
  }

  .gate-toolbar-head .module-clear-filters {
    order: 4;
    margin-left: 0;
  }
}

@media (max-width: 720px) {
  .gate-list-panel-stats .yard-tm-stat-card {
    padding: 12px 10px 10px 14px;
  }

  .gate-list-panel-stats .yard-tm-stat-card__value {
    font-size: 16px;
  }
}

.gate-panel-table {
  margin: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  position: relative;
}

.gate-panel-table .table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  background: transparent;
}

.gate-table-scroll-hint {
  display: none;
  margin: 0;
  padding: 10px 14px;
  font-size: 12px;
  line-height: 1.4;
  border-bottom: 1px solid var(--trailer-detail-panel-border);
  background: color-mix(in srgb, var(--primary) 5%, var(--trailer-detail-panel-bg));
}

@media (max-width: 1024px) {
  .gate-panel-table .gate-table-scroll-hint {
    display: block;
  }

  .gate-panel-table::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 24px;
    pointer-events: none;
    background: linear-gradient(to right, transparent, var(--trailer-detail-panel-bg));
    z-index: 1;
  }
}

#gate-appt-table {
  min-width: 1180px;
}

.gate-schedule-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
}

.gate-schedule-grid__wide {
  grid-column: 1 / -1;
}

.service-status-table__status {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.service-status-preview {
  display: flex;
  align-items: center;
  min-height: 32px;
}

.form-control-color {
  padding: 2px;
  height: 38px;
  min-width: 72px;
}

.gate-appt-table th,
.gate-appt-table td,
.gate-log-table th,
.gate-log-table td {
  padding: 10px 12px;
  font-size: 13px;
  vertical-align: middle;
  border-bottom-color: var(--trailer-detail-card-border);
}

.gate-appt-table th,
.gate-log-table th {
  background: var(--trailer-detail-table-header-bg);
  color: var(--trailer-detail-table-header-text);
  border-bottom-color: var(--trailer-detail-panel-border);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.gate-appt-table tbody tr:nth-child(even),
.gate-log-table tbody tr:nth-child(even) {
  background: var(--trailer-detail-table-stripe);
}

.gate-appt-table tbody tr:hover,
.gate-log-table tbody tr:hover {
  background: var(--trailer-detail-table-hover);
}

.gate-appt-col-number { min-width: 152px; }
.gate-appt-col-unit { min-width: 88px; white-space: nowrap; }
.gate-appt-col-location { min-width: 148px; }
.gate-appt-col-customer { min-width: 120px; }
.gate-appt-col-move { min-width: 96px; white-space: nowrap; }
.gate-appt-col-svc { min-width: 128px; white-space: nowrap; }
.gate-appt-col-date { min-width: 132px; }
.gate-appt-col-status { min-width: 108px; }

.gate-appt-spot {
  font-weight: 600;
  letter-spacing: 0.02em;
}

.gate-appt-date {
  display: block;
  white-space: nowrap;
  font-size: 12px;
}

.gate-appt-meta {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  color: var(--ui-muted-readable);
  white-space: nowrap;
}

.gate-appt-number-link {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 4px 9px;
  border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--border));
  border-radius: 6px;
  background: color-mix(in srgb, var(--primary) 8%, var(--ui-inset-bg));
  color: var(--primary-dark, var(--primary));
  font: inherit;
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  letter-spacing: 0.02em;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
}

.gate-appt-number-link:hover,
.gate-appt-number-link:focus-visible {
  background: color-mix(in srgb, var(--primary) 14%, var(--ui-inset-bg));
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 18%, transparent);
}

#trailer-log-table {
  min-width: 980px;
}

.gate-log-col-unit { min-width: 88px; white-space: nowrap; }
.gate-log-col-location { min-width: 140px; }
.gate-log-col-customer { min-width: 120px; }
.gate-log-col-svc { min-width: 128px; white-space: nowrap; }
.gate-log-col-date { min-width: 132px; white-space: nowrap; font-size: 12px; }
.gate-log-col-duration { min-width: 88px; white-space: nowrap; }
.gate-log-col-source { min-width: 96px; white-space: nowrap; }
.gate-log-col-status { min-width: 108px; }

.gate-appt-table .badge,
.gate-log-table .badge {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  padding: 3px 8px;
  white-space: nowrap;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border: none;
}

.gate-appt-table .col-actions,
.gate-log-table .col-actions {
  width: 72px;
  min-width: 72px;
  text-align: center;
}

.gate-appt-table .col-actions {
  width: 108px;
  min-width: 108px;
}

.gate-appt-table .col-actions .action-links,
.gate-log-table .col-actions .action-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.gate-appt-table .empty-state,
.gate-log-table .empty-state {
  padding: 28px 16px;
  text-align: center;
  color: var(--ui-muted-readable);
}

.gate-btn-checkin,
.gate-btn-checkout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 7px 12px;
  min-height: 34px;
  font-family: var(--terminal-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-transform: none;
  text-decoration: none;
  border-radius: calc(var(--radius-sm) - 3px);
  transition:
    color 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.page-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 10px;
  margin-bottom: 16px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.page-back-btn:hover,
.page-back-btn:focus-visible {
  background: var(--bg);
  border-color: var(--primary);
  color: var(--primary);
  box-shadow: 0 4px 12px rgba(0, 114, 188, 0.12);
  transform: translateY(-1px);
  text-decoration: none;
  outline: none;
}

.page-back-btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--primary);
}

.page-back-btn__icon-svg {
  width: 18px;
  height: 18px;
}

.page-back-btn__label {
  white-space: nowrap;
}

.page-back-btn--block {
  width: 100%;
  justify-content: center;
  margin-top: 10px;
  margin-bottom: 0;
  padding-top: 11px;
  padding-bottom: 11px;
}

.login-footer .page-back-btn {
  margin-bottom: 0;
}

.yard-assign-header .page-back-btn {
  margin-bottom: 0;
  flex-shrink: 0;
}

.gate-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.gate-page-header .page-title {
  margin-bottom: 6px;
}

.gate-page-header .text-muted {
  margin: 0;
  line-height: 1.5;
}

.gate-page-header-actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 4px;
}

/* Gate check-in — aligned with yard-assign / site panels */
.gate-checkin-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 24px;
  max-width: 960px;
  overflow: visible;
}

.gate-checkin-panel--lookup {
  max-width: 720px;
}

.gate-checkin-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.gate-checkin-lookup-row {
  grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
  align-items: end;
}

.gate-checkout-page-head {
  margin-bottom: 18px;
}

.gate-checkout-page-head .text-muted {
  margin: 6px 0 0;
}

.gate-checkout-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  max-width: 820px;
}

.gate-checkout-option {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 18px 18px 16px;
  border: 1px solid var(--ui-panel-border, var(--border));
  border-radius: var(--radius-lg);
  background: var(--ui-panel-bg, var(--surface));
  box-shadow: var(--ui-panel-shadow, var(--shadow));
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.gate-checkout-option:hover,
.gate-checkout-option:focus-visible {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--primary) 42%, var(--border));
  box-shadow: var(--shadow-lg);
}

.gate-checkout-option--gate {
  --gate-checkout-accent: var(--primary);
}

.gate-checkout-option--department {
  --gate-checkout-accent: #7c6cff;
}

.gate-checkout-option__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  color: var(--gate-checkout-accent, var(--primary));
  background: color-mix(in srgb, var(--gate-checkout-accent, var(--primary)) 12%, var(--ui-inset-bg, var(--bg-secondary)));
  border: 1px solid color-mix(in srgb, var(--gate-checkout-accent, var(--primary)) 24%, var(--border));
}

.gate-checkout-option__icon svg {
  width: 22px;
  height: 22px;
  display: block;
}

.gate-checkout-option__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.gate-checkout-option__title {
  font-weight: 600;
  font-size: 1rem;
  color: var(--text);
}

.gate-checkout-option__desc {
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--text-muted);
}

.gate-checkout-option__cta {
  font-family: var(--font-mono, monospace);
  font-size: 1.125rem;
  color: var(--gate-checkout-accent, var(--primary));
  opacity: 0.85;
}

.gate-checkout-type-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px 14px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--ui-inset-bg, var(--bg-secondary)) 55%, transparent);
}

.gate-checkout-type-bar__main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.gate-checkout-type-bar__badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border));
}

.gate-checkout-type-bar__badge--department {
  color: #8b7dff;
  background: color-mix(in srgb, #8b7dff 14%, transparent);
  border-color: color-mix(in srgb, #8b7dff 30%, var(--border));
}

.gate-checkout-type-bar__desc {
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--text-muted);
}

.gate-checkout-type-bar__change {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 7px 12px;
  border: 1px solid var(--ui-panel-border, var(--border));
  border-radius: var(--radius);
  background: var(--ui-panel-bg, var(--surface));
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.06));
  color: var(--text-secondary);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.gate-checkout-type-bar__change svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

.gate-checkout-type-bar__change:hover,
.gate-checkout-type-bar__change:focus-visible {
  color: var(--text);
  border-color: color-mix(in srgb, var(--primary) 42%, var(--border));
  background: color-mix(in srgb, var(--primary) 7%, var(--ui-panel-bg, var(--surface)));
  transform: translateX(-1px);
}

.gate-checkout-panel {
  padding: 0;
  overflow: visible;
}

.gate-checkout-panel .gate-checkin-form {
  gap: 14px;
  padding: 16px 20px 18px;
}

.gate-checkout-panel .gate-checkin-actions {
  padding-top: 12px;
  margin-top: 2px;
}

#out-lookup-result:empty {
  display: none;
}

#out-lookup-result .alert {
  margin: 0;
}

.gate-dept-checkout-modal {
  max-width: 520px;
}

.gate-dept-checkout-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.gate-dept-checkout-fields {
  grid-template-columns: minmax(0, 1fr) minmax(180px, 220px);
  align-items: end;
}

.gate-log-dept-detail {
  margin-top: 4px;
  font-size: 0.8125rem;
  line-height: 1.35;
}

.dept-checkout-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  color: #8b7dff;
  background: color-mix(in srgb, #8b7dff 14%, transparent);
  border: 1px solid color-mix(in srgb, #8b7dff 30%, var(--border));
  white-space: nowrap;
}

.dept-checkout-register {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.dept-checkout-register__meta,
.dept-checkout-register__site {
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--text-muted);
}

.trailers-row--dept-checkout .trailer-site-cell .dept-checkout-register__site {
  color: #a99cff;
  font-weight: 600;
}

.trailer-dept-checkout-banner {
  margin: 0 0 14px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, #8b7dff 28%, var(--border));
  border-radius: var(--radius);
  background: color-mix(in srgb, #8b7dff 8%, var(--ui-inset-bg, var(--bg-secondary)));
}

.trailer-dept-checkout-banner__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.trailer-dept-checkout-banner__purpose {
  margin: 0 0 6px;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--text);
}

.trailer-dept-checkout-banner__label {
  display: inline-block;
  margin-right: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.trailer-dept-checkout-banner__meta {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--text-muted);
}

.trailer-detail-unit-meta .dept-checkout-badge {
  margin-right: 6px;
}

.gate-checkin-lookup-result:empty {
  display: none;
}

.gate-checkin-lookup-result .alert {
  margin: 0;
}

.gate-checkin-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.gate-checkin-block {
  display: flex;
  flex-direction: column;
}

.gate-checkin-block .section-title {
  margin: 0 0 0;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  border-right: 1px solid var(--trailer-detail-panel-border, var(--border));
  border-top: 1px solid var(--trailer-detail-panel-border, var(--border));
}

.gate-checkin-block .gate-checkin-section {
  margin-top: 0;
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  padding: 20px 22px;
  overflow: visible;
}

.gate-checkin-block:has(.custom-select.is-open) {
  position: relative;
  z-index: 4;
}

.gate-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.gate-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.gate-section:has(.custom-select.is-open) {
  overflow: visible;
  z-index: 5;
}

.gate-section-header {
  padding: 10px 18px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #fff;
  text-align: center;
}

.gate-section--vehicle .gate-section-header { background: #1a8a8a; }
.gate-section--load .gate-section-header { background: #2d8a4e; }
.gate-section--custom .gate-section-header { background: #6b4c9a; }
.gate-section--location .gate-section-header { background: #c8860a; }

.gate-location-field--overflow.form-control:disabled,
.gate-location-field--overflow.form-control[disabled] {
  opacity: 1;
  color: var(--text-muted);
  background: var(--ui-section-bg);
  cursor: not-allowed;
}
.gate-section--driver .gate-section-header { background: #c96b52; }

.gate-section-body {
  padding: 16px 18px 18px;
}

/* Gate check-in fields — standard top-label form controls */
.gate-checkin-section .gate-grid {
  gap: 16px;
}

.gate-checkin-section .gate-grid-3 {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.gate-checkin-section .gate-field {
  flex-direction: column;
  align-items: stretch;
  border: none;
  border-radius: 0;
  background: transparent;
  min-height: unset;
  overflow: visible;
}

.gate-checkin-section .gate-field-label {
  min-width: unset;
  max-width: none;
  width: auto;
  padding: 0 0 6px;
  border: none;
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.gate-checkin-section .gate-field-control {
  display: block;
  width: 100%;
}

.gate-checkin-section .gate-field-control .gate-input,
.gate-checkin-section .gate-field-control .form-control,
.gate-checkin-section .gate-field-control .custom-select-trigger {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--ui-inset-bg, var(--bg-subtle));
  box-shadow: none;
}

.gate-checkin-section .gate-field-control .gate-input:focus,
.gate-checkin-section .gate-field-control .form-control:focus,
.gate-checkin-section .gate-field-control .custom-select-trigger:focus,
.gate-checkin-section .gate-field-control .custom-select-trigger:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 22%, transparent);
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
}

.gate-checkin-section .gate-field--stacked {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
  overflow: visible;
}

.gate-checkin-section .gate-field--stacked > .gate-field-label {
  padding: 10px 14px;
  margin: 0;
  border-bottom: 1px solid var(--border-light);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary);
}

.gate-checkin-section .gate-field-control--stacked {
  padding: 14px 16px 16px;
}

.gate-checkin-section .condition-guide {
  margin-top: 4px;
}

.gate-checkin-section .gate-condition-details {
  margin-top: 10px;
}

.gate-checkin-section .gate-condition-details .gate-field {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
  padding: 12px 14px 14px;
}

.gate-checkin-section .gate-condition-details .gate-field-label {
  padding: 0 0 8px;
}

.gate-checkin-section .gate-condition-details .gate-field-control .condition-details-help {
  display: block;
  margin-top: 12px;
  line-height: 1.45;
}

.gate-checkin-section .modal-trailer-photos,
.gate-checkin-section .trailer-photos-panel--embedded,
.gate-checkin-section .photo-attachment-section {
  width: 100%;
}

.gate-grid {
  display: grid;
  gap: 12px;
}

.gate-grid-3 {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.gate-field {
  display: flex;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface);
  min-height: 40px;
}

.gate-field--wide {
  grid-column: 1 / -1;
}

.gate-field--stacked {
  flex-direction: column;
  align-items: stretch;
  overflow: visible;
}

.gate-field--stacked .gate-field-label {
  max-width: none;
  width: 100%;
  border-right: none;
  border-bottom: 1px solid var(--border);
}

.gate-field-control--stacked {
  flex-direction: column;
  align-items: stretch;
  padding: 12px 14px;
  gap: 12px;
  overflow: visible;
}

.gate-field-control--stacked .tire-section-intro,
.gate-field-control--stacked .photo-section-intro,
.gate-field-control--stacked .photo-section-body,
.gate-field-control--stacked .trailer-photos-panel--embedded {
  width: 100%;
}

.gate-field-control--stacked .photos-section .photo-section-shell {
  width: 100%;
}

.gate-tire-date-row {
  width: 100%;
  max-width: 360px;
}

.gate-tire-date-row .gate-field {
  width: 100%;
}

.gate-section--custom .gate-section-body {
  overflow: visible;
}

.gate-field-control--stacked .gate-field {
  min-height: 40px;
}

.gate-field-control--stacked .gate-field-label {
  min-width: 118px;
  max-width: 118px;
}

.gate-field-control--stacked .tire-position-picker {
  width: 100%;
}

.gate-field-control--stacked .tire-position-picker .form-control {
  background: var(--ui-inset-bg);
  border: 1px solid var(--ui-inset-border);
  border-radius: var(--radius-sm);
}

.gate-field-label {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 130px;
  max-width: 130px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-subtle);
  border-right: 1px solid var(--border);
  flex-shrink: 0;
}

.gate-required {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--danger);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
}

.gate-required.is-hidden {
  display: none;
}

.gate-field-control {
  flex: 1;
  display: flex;
  align-items: center;
  min-width: 0;
}

.gate-field-control .gate-input,
.gate-field-control .form-control {
  border: none;
  border-radius: 0;
  box-shadow: none;
  height: 100%;
  min-height: 38px;
  background: transparent;
}

.gate-field-control .gate-input:focus,
.gate-field-control .form-control:focus {
  box-shadow: inset 0 0 0 2px rgba(0, 114, 188, 0.2);
}

[data-theme="dark"] .gate-field-control select.gate-input,
[data-theme="dark"] .gate-field-control select.form-control,
[data-theme="dark"] .gate-field-control .custom-select-trigger {
  color: var(--text);
  background-color: rgba(15, 23, 42, 0.55);
  color-scheme: dark;
}

[data-theme="dark"] .gate-field-control select.gate-input option,
[data-theme="dark"] .gate-field-control select.form-control option {
  background-color: var(--ui-panel-bg);
  color: var(--text);
}

[data-theme="dark"] .gate-field-control select.gate-input:hover,
[data-theme="dark"] .gate-field-control select.form-control:hover,
[data-theme="dark"] .gate-field-control .custom-select-trigger:hover {
  background-color: rgba(15, 23, 42, 0.75);
}

[data-theme="dark"] .gate-field-control select.gate-input:focus,
[data-theme="dark"] .gate-field-control select.form-control:focus,
[data-theme="dark"] .gate-field-control .custom-select-trigger:focus,
[data-theme="dark"] .gate-field-control .custom-select-trigger:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(56, 189, 248, 0.35);
}

[data-theme="dark"] .gate-field-control input.gate-input,
[data-theme="dark"] .gate-field-control input.form-control {
  color: var(--text);
  background-color: transparent;
}

[data-theme="dark"] .gate-field-control input.gate-input[type="date"] {
  color-scheme: dark;
}

[data-theme="dark"] .gate-field .custom-select-menu {
  background: var(--ui-panel-bg);
  border-color: var(--ui-panel-border);
  box-shadow: var(--ui-panel-shadow);
}

[data-theme="dark"] .gate-field-control--stacked .tire-position-picker .form-control {
  background: rgba(15, 23, 42, 0.55);
  border-color: var(--ui-panel-border);
  color: var(--text);
}

[data-theme="dark"] .tire-section-intro {
  background: rgba(15, 23, 42, 0.45);
  border-color: var(--ui-panel-border);
  border-left-color: #60a5fa;
}

[data-theme="dark"] .tire-position-picker__help {
  background: rgba(15, 23, 42, 0.35);
}

[data-theme="dark"] .tire-position-picker__help-label {
  background: rgba(30, 41, 59, 0.8);
  border-color: var(--ui-panel-border);
  color: var(--text-secondary);
}

.gate-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 8px 0 24px;
}

.gate-actions .btn-checkin {
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid color-mix(in srgb, #6BA3D6 52%, var(--ui-panel-border));
  box-shadow: none;
}

.gate-actions .btn-checkin:hover,
.gate-actions .btn-checkin:focus-visible {
  color: var(--text);
  background: transparent;
  border-color: #6BA3D6;
  box-shadow: none;
}

.gate-lookup-panel {
  max-width: 560px;
  overflow: visible;
}

.gate-lookup-panel .panel-body {
  overflow: visible;
}

@media (max-width: 640px) {
  .gate-checkin-panel {
    padding: 18px 16px;
  }

  .gate-checkin-lookup-row {
    grid-template-columns: 1fr;
  }

  .gate-checkin-section .gate-grid-3 {
    grid-template-columns: 1fr;
  }

  .gate-checkout-split {
    grid-template-columns: 1fr;
  }

  .gate-checkout-type-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .gate-checkout-type-bar__change {
    align-self: flex-start;
  }

  .gate-checkin-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .gate-checkin-actions .btn {
    width: 100%;
  }

  .gate-page-header-actions {
    width: 100%;
  }

  .gate-page-header-actions .btn {
    width: 100%;
  }
}

.gate-unit-suggest-wrap {
  position: relative;
  z-index: 40;
}

.gate-unit-suggestions-panel {
  position: absolute;
  z-index: 41;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  background: var(--ui-panel-bg, var(--surface, #fff));
  border: 1px solid var(--ui-panel-border, var(--border, #d1d5db));
  border-radius: 8px;
  box-shadow: var(--ui-panel-shadow, 0 8px 24px rgba(15, 23, 42, 0.12));
}

.gate-unit-suggestions {
  max-height: 220px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: auto;
  scrollbar-color: #64748b #e2e8f0;
}

.gate-unit-suggestions.is-scrollable {
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

.gate-unit-suggestions::-webkit-scrollbar {
  width: 10px;
}

.gate-unit-suggestions::-webkit-scrollbar-track {
  background: #f1f5f9;
}

.gate-unit-suggestions::-webkit-scrollbar-thumb {
  background: #94a3b8;
  border-radius: 999px;
  border: 2px solid #f1f5f9;
}

.gate-unit-suggestions-scroll {
  display: block;
  width: 100%;
  border: none;
  background: #f8fafc;
  color: #475569;
  font-size: 12px;
  line-height: 1;
  padding: 6px 0;
  cursor: pointer;
}

.gate-unit-suggestions-scroll:hover:not(:disabled) {
  background: #eff6ff;
  color: #1d4ed8;
}

.gate-unit-suggestions-scroll:disabled {
  opacity: 0.35;
  cursor: default;
}

.gate-unit-suggestions-scroll-up {
  border-bottom: 1px solid var(--border-light, #e5e7eb);
}

.gate-unit-suggestions-scroll-down {
  border-top: 1px solid var(--border-light, #e5e7eb);
}

.gate-unit-suggestion {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-bottom: 1px solid var(--ui-table-cell-border, var(--border-light, #e5e7eb));
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: var(--text);
}

.gate-unit-suggestion:last-child {
  border-bottom: none;
}

.gate-unit-suggestion:hover,
.gate-unit-suggestion.is-active {
  background: var(--ui-table-hover, #eff6ff);
}

.gate-unit-suggestion-unit {
  font-weight: 600;
  color: var(--text);
}

.gate-unit-suggestion-meta {
  font-size: 12px;
  color: var(--ui-muted-readable, var(--text-muted));
}

.gate-search-modal {
  max-width: 420px;
}

.gate-search-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: center;
}

.gate-search-body .modal-header h3,
.gate-search-modal .modal-header h3 {
  width: 100%;
  text-align: center;
  font-weight: 500;
  color: var(--text-secondary);
}

.gate-search-modal .modal-header {
  justify-content: center;
  position: relative;
  background: var(--surface);
}

.gate-search-modal .modal-close {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
}

/* =============================================================================
   Responsive
   ============================================================================= */
.yard-assign-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 24px;
  max-width: 900px;
  overflow: visible;
}

.yard-assign-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.yard-assign-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.yard-assign-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

@media (max-width: 900px) {
  .last-updated-panel { float: none; width: 100%; margin-left: 0; }
  .app-header {
    flex-wrap: wrap;
    height: auto;
    min-height: var(--header-height);
    padding: 10px 12px;
    gap: 0 12px;
    align-items: center;
  }

  .brand {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
  }

  .brand-app {
    display: none;
  }

  .brand-name {
    font-size: 12px;
  }

  .nav-user {
    flex: 0 0 auto;
    margin-left: auto;
    padding-left: 10px;
    border-left: 1px solid var(--nav-divider);
    gap: 8px;
    box-shadow: none;
  }

  .user-greeting {
    display: none;
  }

  .nav-logout-btn {
    width: 36px;
    padding: 0;
  }

  .nav-logout-btn__label {
    display: none;
  }

  .app-nav-shell {
    flex: 1 1 100%;
    order: 3;
    margin-top: 10px;
    margin-left: 0;
    padding: 10px 0 2px;
    border-top: 1px solid var(--nav-divider);
    border-left: none;
  }

  .app-nav-scroll-btn {
    display: none !important;
  }

  .app-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 6px;
  }

  .app-nav::-webkit-scrollbar {
    display: none;
  }

  .app-nav .nav-item,
  .app-nav button.nav-link {
    flex-shrink: 0;
    padding: 7px 12px;
    font-size: 12px;
  }

  .main-content { padding: 16px; }

  .main-content {
    overflow-x: hidden;
  }

  .toolbar,
  .toolbar-left,
  .toolbar-right,
  .form-group,
  .billing-filter-bar,
  .billing-filters,
  .billing-filter-field,
  .panel-body,
  .modal-body {
    min-width: 0;
    max-width: 100%;
  }

  .toolbar-left {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .billing-filters {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .billing-filter-field {
    width: 100%;
  }

  .billing-filter-field .form-control,
  .billing-filter-field input.form-control,
  .billing-filter-field input[type="date"],
  .billing-filter-field--customer .form-control,
  .billing-filter-field--year-range .form-control,
  .module-filter-grid input.form-control,
  .module-filter-grid input[type="date"],
  .toolbar select.form-control,
  .toolbar input.form-control,
  .toolbar .form-control,
  .form-group select.form-control,
  .form-group input.form-control,
  .form-row select.form-control,
  .form-row input.form-control,
  .modal-body select.form-control,
  .modal-body input.form-control {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  .billing-filter-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .billing-filter-bar .export-group {
    margin-left: 0;
    width: 100%;
  }

  .module-filter-row,
  .inventory-filter-row {
    grid-template-columns: 1fr;
  }

  .module-filter-row--primary .billing-filter-field--search,
  .inventory-filter-row--primary .billing-filter-field--search,
  .module-filter-row--search-3 .billing-filter-field--search,
  .module-filter-row--search-4 .billing-filter-field--search {
    grid-column: auto;
  }

  .inventory-filter-grid,
  .module-filter-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .module-filters-panel,
  .inventory-filters-panel,
  .module-filter-grid,
  .inventory-filter-grid {
    box-sizing: border-box;
    max-width: 100%;
    overflow-x: clip;
  }

  .module-filter-grid > .billing-filter-field,
  .inventory-filter-grid > .billing-filter-field,
  .module-filter-grid .billing-filter-field--date,
  .module-filter-grid .billing-filter-field:has(> input[type="date"].form-control) {
    grid-column: 1 / -1;
    width: 100%;
    max-width: 100%;
  }

  .module-filters-panel input[type="date"].form-control,
  .module-filter-grid input[type="date"].form-control,
  .inventory-filter-grid input[type="date"].form-control {
    display: block;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box;
    -webkit-min-logical-width: 0;
    min-inline-size: 0;
  }

  .yard-time-machine-toolbar,
  .yard-time-machine-toolbar .billing-filter-bar,
  .yard-time-machine-toolbar .module-filters-panel {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .yard-time-machine-toolbar .module-filter-grid {
    width: 100%;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
  }

  .yard-time-machine-toolbar .module-filter-grid > .billing-filter-field {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .yard-time-machine-toolbar .billing-filter-field--date,
  .yard-time-machine-toolbar .billing-filter-field--date .form-control,
  .yard-time-machine-toolbar input[type="date"].form-control {
    display: block;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  .billing-panel-toolbar,
  .work-orders-panel-toolbar,
  .yard-tab-toolbar .module-filters-panel,
  .module-toolbar .module-filters-panel {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .billing-panel-toolbar .module-filter-grid,
  .work-orders-panel-toolbar .module-filter-grid,
  .yard-tab-toolbar .module-filter-grid {
    width: 100%;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
  }

  .billing-panel-toolbar input[type="date"].form-control,
  .work-orders-panel-toolbar input[type="date"].form-control,
  .yard-tab-toolbar input[type="date"].form-control,
  .module-toolbar input[type="date"].form-control {
    display: block;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  .sop-library-card .sop-library-filter-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .sop-library-card .sop-library-filter-row .billing-filter-field--search {
    grid-column: auto;
  }

  .module-toolbar .module-filters-panel {
    padding: 12px;
  }

  .module-filter-search .form-control {
    height: 44px;
  }

  .module-actions,
  .inventory-actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 8px 10px;
  }

  .module-actions-export,
  .inventory-actions-export {
    flex: 0 0 auto;
    justify-content: flex-start;
  }

  .module-actions-export .export-dropdown,
  .inventory-actions-export .export-dropdown {
    width: auto;
  }

  .module-actions-export .export-dropdown-trigger,
  .inventory-actions-export .export-dropdown-trigger {
    width: auto;
    min-width: 96px;
  }

  .module-actions-secondary--group.module-actions-secondary--icons,
  .module-actions-secondary--group.module-actions-secondary--labeled,
  .inventory-actions-secondary--group.module-actions-secondary--icons,
  .inventory-actions-secondary--group.module-actions-secondary--labeled {
    width: auto;
    flex: 0 0 auto;
    margin-left: auto;
  }

  .module-actions-secondary--icons .module-action-btn,
  .inventory-actions-secondary--icons .module-action-btn {
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
  }

  :is(
    .module-actions-secondary--labeled.detail-header-actions-group,
    .gate-toolbar-actions__icons.detail-header-actions-group
  ) {
    width: auto;
    flex: 0 0 auto;
    margin-left: auto;
  }

  .gate-toolbar-actions,
  .support-toolbar-actions {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    width: auto;
    max-width: 100%;
  }

  .gate-toolbar-actions__export,
  .support-toolbar-actions .gate-toolbar-actions__export {
    flex: 0 0 auto;
  }

  .gate-toolbar-actions__export .export-dropdown,
  .gate-toolbar-actions__export .export-dropdown-trigger {
    width: auto;
  }

  .module-toolbar-head,
  .inventory-toolbar-head {
    flex-wrap: wrap;
  }

  .module-clear-filters,
  .inventory-clear-filters {
    margin-left: 0;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .gate-unit-suggestions-panel {
    max-width: calc(100vw - 32px);
    left: 0;
    right: 0;
  }

  .misc-features-dropdown {
    max-width: 100%;
  }
}

@media (max-width: 640px) {
  .page-title {
    font-size: 22px;
    margin-bottom: 4px;
  }

  .page-back-btn {
    font-size: 12px;
    padding: 7px 12px 7px 8px;
    margin-bottom: 10px;
  }

  .tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-bottom: 14px;
    padding: 0 4px;
  }

  .tabs::-webkit-scrollbar {
    display: none;
  }

  .tab {
    flex-shrink: 0;
    padding: 10px 12px;
    font-size: 12px;
  }

  .main-content { padding: 12px; }

  /* Yard Check — card layout on phones */
  .yard-check-bar {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 14px 14px 14px 16px;
  }

  .yard-check-field {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }

  .yard-check-bar__meta {
    justify-content: flex-start;
    padding-top: 4px;
    border-top: 1px solid var(--border-light);
  }

  .yard-check-bar__actions {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: stretch;
    justify-content: stretch;
  }

  .yard-check-bar__actions #assign-unassigned-btn {
    min-width: 0;
    justify-content: center;
    white-space: normal;
    text-align: center;
    line-height: 1.25;
    padding-left: 10px;
    padding-right: 10px;
  }

  .yard-check-export-btn {
    width: auto;
    max-width: 100%;
    flex-shrink: 0;
    justify-content: center;
    padding-left: 10px;
    padding-right: 12px;
    gap: 6px;
  }

  .yard-check-export-btn__label {
    display: none;
  }

  .yard-check-export-btn::after {
    content: 'CSV';
    font-size: 12px;
    font-weight: 600;
  }

  .yard-tab-toolbar__panel {
    flex-direction: column;
    gap: 12px;
    padding: 14px 14px 14px 16px;
  }

  .yard-tab-toolbar__actions {
    width: 100%;
    padding-top: 0;
  }

  .yard-tab-toolbar__actions .btn {
    flex: 1;
    justify-content: center;
  }

  .yard-tab-toolbar__head {
    flex-direction: column;
    gap: 10px;
  }

  .yard-tab-toolbar__head .yard-tab-toolbar__actions {
    width: 100%;
  }

  .yard-tab-toolbar__title-line {
    flex-direction: column;
    align-items: stretch;
  }

  .yard-tab-toolbar__actions-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 8px 10px;
    width: 100%;
  }

  .yard-tab-toolbar__actions-left {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    width: auto;
    flex: 0 1 auto;
    min-width: 0;
  }

  .yard-tab-toolbar__actions-left .export-dropdown,
  .yard-tab-toolbar__actions-left .btn {
    flex: 0 0 auto;
    width: auto;
  }

  .yard-tab-toolbar__actions-left .export-dropdown-trigger {
    width: auto;
    min-width: 96px;
    justify-content: center;
  }

  .yard-tab-toolbar__actions-right {
    width: auto;
    flex: 0 0 auto;
    margin-left: auto;
    justify-content: flex-end;
  }

  .yard-tab-toolbar--workorders .yard-tab-toolbar__filter-body,
  .yard-tab-toolbar--storage .yard-tab-toolbar__filter-body {
    flex-direction: column;
  }

  .yard-view-panel .yard-table-wrap {
    overflow: visible;
    padding: 0 10px 10px;
  }

  .yard-view-panel .yard-table thead {
    display: none;
  }

  .yard-view-panel .yard-check-bar {
    border-bottom: none;
    padding-bottom: 12px;
  }

  .yard-view-panel .yard-view-intro {
    padding-left: 16px;
    padding-right: 14px;
  }

  table.yard-table tbody tr.row-group-header {
    display: block;
    margin-top: 12px;
    border: none;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    background: transparent;
  }

  table.yard-table tbody tr.row-group-header:first-child {
    margin-top: 0;
  }

  table.yard-table tbody tr.row-group-header td {
    display: block;
    width: 100%;
    padding: 8px 12px !important;
    border: 1px solid var(--ui-panel-border) !important;
    border-radius: var(--radius-sm);
    background: var(--ui-section-bg);
  }

  table.yard-table {
    display: block;
  }

  table.yard-table thead {
    display: none;
  }

  table.yard-table tbody {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  table.yard-table tbody tr {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    border: 1px solid var(--ui-panel-border);
    border-radius: var(--radius);
    background: var(--ui-panel-bg);
    box-shadow: var(--ui-panel-shadow);
    overflow: hidden;
  }

  table.yard-table tbody tr:nth-child(even) {
    background: var(--ui-panel-bg);
  }

  table.yard-table tbody tr:hover {
    background: var(--ui-panel-bg);
  }

  table.data-table.yard-table td.spot-label,
  table.data-table.yard-table tbody tr:nth-child(even) td.spot-label {
    background: var(--ui-table-header-bg);
  }

  table.yard-table tbody tr td {
    display: block;
    padding: 10px 12px;
    border-bottom: 1px solid var(--ui-table-cell-border);
  }

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

  table.yard-table tbody tr td.spot-label {
    grid-column: 1;
    grid-row: 1;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 9px 10px;
    background: var(--ui-table-header-bg);
    border-bottom: 1px solid var(--ui-panel-border);
    font-size: 14px;
    text-align: center;
  }

  table.yard-table tbody tr td.yard-col-storage {
    grid-column: 2;
    grid-row: 1;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    min-width: 0;
    padding: 9px 12px 9px 8px;
    background: var(--ui-table-header-bg);
    border-bottom: 1px solid var(--ui-panel-border);
    text-align: right;
  }

  table.yard-table tbody tr td.yard-col-storage::before {
    display: none;
  }

  table.yard-table tbody tr td.yard-col-storage .storage-cell {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 1px;
    line-height: 1.2;
    min-width: 0;
  }

  table.yard-table tbody tr td.yard-col-storage .days-badge {
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
  }

  table.yard-table tbody tr td.yard-col-storage .storage-cell-entered {
    font-size: 10px;
    color: var(--text-muted);
    white-space: nowrap;
  }

  table.yard-table tbody tr td.yard-col-unit {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  table.yard-table tbody tr td.yard-col-wo {
    grid-column: 1 / -1;
    grid-row: 3;
    overflow: visible;
    padding-bottom: 12px;
  }

  table.yard-table tbody tr:has(.yard-wo-item:hover),
  table.yard-table tbody tr:has(.yard-wo-item:focus-visible) {
    overflow: visible;
    z-index: 2;
  }

  table.yard-table tbody tr td.yard-col-wo:has(.text-muted:only-child) {
    display: none;
  }

  table.yard-table tbody tr td.yard-col-wo::before {
    content: attr(data-label);
    display: block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ui-table-header-text);
    margin-bottom: 4px;
  }

  table.yard-table tbody tr.yard-drop-zone {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }

  table.yard-table tbody tr.yard-drop-zone td.spot-label {
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100%;
  }

  table.yard-table tbody tr.yard-drop-zone td.yard-col-empty {
    grid-column: 1 / -1;
    grid-row: 2;
    text-align: left;
    padding: 12px;
  }

  table.yard-table tbody tr.yard-drop-zone td.yard-col-storage {
    display: none;
  }

  .yard-table .yard-trailer-details,
  .yard-table .trailer-cell-meta {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
    white-space: normal;
  }

  .yard-table .yard-trailer-note-text {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    word-break: break-word;
  }

  .yard-table .yard-trailer-facts {
    gap: 4px 8px;
  }

  .yard-table .yard-trailer-fact--tire-positions,
  .yard-table .yard-trailer-fact--brake-positions {
    flex: 1 1 100%;
  }

  .yard-table .trailer-damage-chip {
    white-space: normal;
    max-width: 100%;
  }

  .yard-table .trailer-cell-main {
    gap: 5px;
    align-items: flex-start;
  }

  .yard-table .yard-wo-item {
    width: 100%;
    padding: 6px 10px 6px 11px;
  }

  .yard-table .yard-wo-item__title {
    white-space: normal;
    word-break: break-word;
  }

  .yard-table .btn-trailer-unit {
    padding: 6px 12px;
    font-size: 13px;
  }

  table.yard-table tbody tr td.yard-col-unit {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  table.yard-table tbody tr td.yard-col-wo {
    padding-top: 10px;
    padding-bottom: 12px;
  }
}
.activity-stats-grid {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.activity-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
}

.activity-badge-yard { background: #dbeafe; color: #1e40af; }
.activity-badge-trailer { background: #dcfce7; color: #166534; }
.activity-badge-wo { background: #fef3c7; color: #92400e; }
.activity-badge-auth { background: #ede9fe; color: #5b21b6; }
.activity-badge-ref { background: #fce7f3; color: #9d174d; }
.activity-badge-other { background: #f3f4f6; color: #374151; }

.activity-ts {
  white-space: nowrap;
  font-size: 0.875rem;
}

.activity-ts-short {
  display: none;
}

.activity-details {
  max-width: 480px;
  word-break: break-word;
}

@media (max-width: 720px) {
  .support-list-card .support-panel-stats .yard-tm-stat-card {
    padding: 12px 10px 10px 14px;
  }

  .support-list-card .support-panel-stats .yard-tm-stat-card__value {
    font-size: 16px;
  }
}

@media (max-width: 640px) {
  #activity-panel .support-list-card-head .support-list-card-summary {
    display: none;
  }

  #activity-panel .support-panel-table {
    overflow-x: visible;
  }

  #activity-panel #activity-log-table thead {
    display: none;
  }

  #activity-panel #activity-log-table tbody tr.activity-log-empty {
    display: block;
  }

  #activity-panel #activity-log-table tbody tr.activity-log-empty td {
    display: block;
    padding: 24px 12px;
  }

  #activity-panel #activity-log-table tbody tr:not(.activity-log-empty) {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "time user"
      "action action"
      "details details";
    gap: 4px 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--ui-table-cell-border);
  }

  #activity-panel #activity-log-table tbody tr:not(.activity-log-empty) td {
    display: block;
    padding: 0;
    border: none;
  }

  #activity-panel .col-activity-ts {
    grid-area: time;
  }

  #activity-panel .col-activity-user {
    grid-area: user;
    text-align: right;
  }

  #activity-panel .col-activity-action {
    grid-area: action;
  }

  #activity-panel .col-activity-details {
    grid-area: details;
  }

  #activity-panel .activity-ts-full {
    display: none;
  }

  #activity-panel .activity-ts-short {
    display: inline;
    font-size: 11px;
    white-space: nowrap;
    color: var(--text-secondary);
  }

  #activity-panel .col-activity-user strong {
    font-size: 12px;
    font-weight: 600;
  }

  #activity-panel .activity-badge {
    font-size: 10px;
    padding: 2px 7px;
  }

  #activity-panel .activity-details {
    max-width: none;
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-secondary);
  }

  .yard-time-machine-card > .table-wrap {
    overflow-x: visible;
  }

  .yard-time-machine-table thead {
    display: none;
  }

  .yard-time-machine-table tbody tr.yard-tm-empty {
    display: block;
  }

  .yard-time-machine-table tbody tr.yard-tm-empty td {
    display: block;
    padding: 24px 12px;
  }

  .yard-time-machine-table tbody tr:not(.yard-tm-empty) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "time"
      "user"
      "action"
      "details";
    gap: 4px 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--ui-table-cell-border);
  }

  .yard-time-machine-table tbody tr:not(.yard-tm-empty) td {
    display: block;
    padding: 0;
    border: none;
  }

  .yard-time-machine-table .col-activity-ts {
    grid-area: time;
  }

  .yard-time-machine-table .col-activity-user {
    grid-area: user;
    text-align: left;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .yard-time-machine-table .col-activity-action {
    grid-area: action;
  }

  .yard-time-machine-table .col-activity-details {
    grid-area: details;
  }

  .yard-time-machine-table .activity-ts-full {
    display: none;
  }

  .yard-time-machine-table .activity-ts-short {
    display: inline;
    font-size: 11px;
    white-space: nowrap;
    color: var(--text-secondary);
  }

  .yard-time-machine-table .col-activity-user strong {
    font-size: 12px;
    font-weight: 600;
  }

  .yard-time-machine-table .activity-badge {
    font-size: 10px;
    padding: 2px 7px;
  }

  .yard-time-machine-table .activity-details {
    max-width: none;
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-secondary);
  }
}

/* =============================================================================
   Theme toggle
   ============================================================================= */
.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition);
  font-family: inherit;
}

.theme-toggle-btn--nav {
  border: 1px solid var(--nav-border);
  background: rgba(255, 255, 255, 0.06);
  color: var(--nav-text);
}

.theme-toggle-btn--nav:hover,
.theme-toggle-btn--nav:focus-visible {
  background: var(--nav-bg-hover);
  color: #fff;
  border-color: var(--nav-divider);
}

.theme-toggle-btn--login {
  position: absolute;
  top: max(24px, env(safe-area-inset-top));
  right: max(24px, env(safe-area-inset-right));
  z-index: 20;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  box-shadow: var(--shadow-sm);
}

.theme-toggle-btn--login:hover,
.theme-toggle-btn--login:focus-visible {
  color: var(--text);
  border-color: var(--text-muted);
  background: var(--bg-subtle);
}

[data-theme="dark"] .form-control:focus {
  box-shadow: 0 0 0 3px var(--ui-focus-ring);
}

[data-theme="dark"] .modal-backdrop {
  background: rgba(0, 0, 0, 0.72);
}

[data-theme="dark"] .activity-badge-yard { background: rgba(59, 130, 246, 0.22); color: #BFDBFE; }
[data-theme="dark"] .activity-badge-trailer { background: rgba(16, 185, 129, 0.18); color: #6EE7B7; }
[data-theme="dark"] .activity-badge-wo { background: rgba(245, 158, 11, 0.18); color: #FCD34D; }
[data-theme="dark"] .activity-badge-auth { background: rgba(139, 92, 246, 0.18); color: #C4B5FD; }
[data-theme="dark"] .activity-badge-ref { background: rgba(236, 72, 153, 0.16); color: #F9A8D4; }
[data-theme="dark"] .activity-badge-other { background: rgba(148, 163, 184, 0.16); color: #E2E8F0; }

[data-theme="dark"] .misc-features-dropdown {
  background: var(--ui-inset-bg);
  border-color: var(--ui-inset-border);
}

[data-theme="dark"] .billing-customer-chip:has(input:checked) {
  background: rgba(0, 145, 234, 0.2);
  border-color: #38BDF8;
}

[data-theme="dark"] .dashboard-sites-empty {
  background: var(--ui-panel-bg);
  border-color: var(--ui-panel-border);
}

[data-theme="dark"] .dashboard-site-blocked-note {
  background: color-mix(in srgb, #38bdf8 12%, var(--ui-panel-bg));
  border-top-color: rgba(56, 189, 248, 0.28);
  border-bottom-color: rgba(56, 189, 248, 0.28);
}

[data-theme="dark"] .dashboard-site-blocked-note__icon {
  color: #38BDF8;
}

[data-theme="dark"] .dashboard-site-blocked-note__text {
  color: #E2E8F0;
}

[data-theme="dark"] .dashboard-site-card.is-blocked-note-open .dashboard-site-delete-blocked-trigger,
[data-theme="dark"] .dashboard-site-delete-blocked-trigger:hover,
[data-theme="dark"] .dashboard-site-delete-blocked-trigger:focus-visible {
  color: #38BDF8;
  border-color: rgba(56, 189, 248, 0.45);
  background: rgba(56, 189, 248, 0.1);
}

[data-theme="dark"] .gate-hub-card,
[data-theme="dark"] .site-card,
[data-theme="dark"] .panel,
[data-theme="dark"] .modal,
[data-theme="dark"] .login-card,
[data-theme="dark"] .tabs,
[data-theme="dark"] .table-wrap,
[data-theme="dark"] .main-content .toolbar {
  border-color: var(--ui-panel-border);
}

[data-theme="dark"] .gate-card-footer {
  border-top-color: var(--ui-panel-border);
}

[data-theme="dark"] .gate-list-panel {
  background: var(--trailer-detail-panel-bg);
  border-color: var(--trailer-detail-panel-border);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28);
}

[data-theme="dark"] .gate-table-scroll-hint {
  background: color-mix(in srgb, var(--primary) 8%, var(--trailer-detail-panel-bg));
  border-bottom-color: var(--trailer-detail-panel-border);
  color: var(--text-secondary);
}

[data-theme="dark"] .gate-panel-table::after {
  background: linear-gradient(to right, transparent, var(--trailer-detail-panel-bg));
}

[data-theme="dark"] .gate-appt-number-link {
  background: color-mix(in srgb, var(--primary) 12%, rgba(15, 23, 42, 0.65));
  border-color: color-mix(in srgb, var(--primary) 35%, var(--ui-panel-border));
  color: #7dd3fc;
}

[data-theme="dark"] .gate-appt-number-link:hover,
[data-theme="dark"] .gate-appt-number-link:focus-visible {
  background: color-mix(in srgb, var(--primary) 18%, rgba(15, 23, 42, 0.75));
  border-color: color-mix(in srgb, var(--primary) 50%, var(--ui-panel-border));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 22%, transparent);
}

[data-theme="dark"] .gate-card-image--trailer {
  --gate-card-icon-accent: var(--csg-blue-light);
}

[data-theme="dark"] .gate-card-image--visitor {
  --gate-card-icon-accent: #a78bfa;
}

[data-theme="dark"] .gate-card-log-btn {
  background: rgba(15, 23, 42, 0.45);
  border-color: var(--ui-panel-border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] .gate-card-log-btn:hover,
[data-theme="dark"] .gate-card-log-btn:focus-visible {
  background: rgba(56, 189, 248, 0.1);
  border-color: rgba(56, 189, 248, 0.45);
  color: #38BDF8;
  box-shadow: 0 4px 14px rgba(56, 189, 248, 0.15);
}

[data-theme="dark"] .trailer-detail-page .detail-header,
[data-theme="dark"] .trailer-detail-page .trailer-detail-panel,
[data-theme="dark"] .trailer-detail-page .customer-records-panel,
[data-theme="dark"] .trailer-detail-page .notes-box {
  box-shadow: var(--ui-panel-shadow);
}

[data-theme="dark"] .alert-error {
  background: rgba(239, 68, 68, 0.14);
  color: #FCA5A5;
  border-color: rgba(239, 68, 68, 0.35);
}

[data-theme="dark"] .alert-success {
  background: rgba(16, 185, 129, 0.14);
  color: #6EE7B7;
  border-color: rgba(16, 185, 129, 0.35);
}

[data-theme="dark"] .alert-info {
  background: rgba(0, 114, 188, 0.16);
  color: #93C5FD;
  border-color: rgba(0, 114, 188, 0.35);
}

[data-theme="dark"] .row-group-header td {
  background: rgba(15, 23, 42, 0.55);
  border-bottom-color: var(--ui-panel-border) !important;
}

[data-theme="dark"] .yard-spot-edit__occupied {
  background: rgba(15, 23, 42, 0.55);
  border-color: var(--ui-panel-border);
  color: #94A3B8;
}

[data-theme="dark"] .yard-spot-edit__empty {
  color: #34d399;
  border-color: rgba(52, 211, 153, 0.28);
  background: rgba(52, 211, 153, 0.1);
}

[data-theme="dark"] .export-dropdown-item:hover,
[data-theme="dark"] .export-dropdown-item:focus-visible,
[data-theme="dark"] .yard-trailer-menu-item:hover,
[data-theme="dark"] .yard-trailer-menu-item:focus-visible {
  background: color-mix(in srgb, var(--primary) 14%, transparent);
}

[data-theme="dark"] .yard-trailer-menu-item--danger:hover {
  background: rgba(239, 68, 68, 0.14);
}

[data-theme="dark"] .trailer-damage-chip {
  color: #FCA5A5;
  background: rgba(239, 68, 68, 0.18);
  border-color: rgba(239, 68, 68, 0.35);
}

[data-theme="dark"] .trailer-damage-chip--repair {
  color: #FCD34D;
  background: rgba(245, 158, 11, 0.18);
  border-color: rgba(245, 158, 11, 0.35);
}

[data-theme="dark"] .gate-unit-suggestions-panel {
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] .gate-unit-suggestions {
  scrollbar-color: #64748b #1e293b;
}

[data-theme="dark"] .gate-unit-suggestions::-webkit-scrollbar-track {
  background: #1e293b;
}

[data-theme="dark"] .gate-unit-suggestions::-webkit-scrollbar-thumb {
  background: #64748b;
  border-color: #1e293b;
}

[data-theme="dark"] .gate-unit-suggestions-scroll {
  background: #1e293b;
  color: var(--text-secondary);
}

[data-theme="dark"] .gate-unit-suggestions-scroll:hover:not(:disabled) {
  background: rgba(0, 145, 234, 0.16);
  color: var(--csg-blue-light);
}

[data-theme="dark"] .gate-unit-suggestions-scroll-up {
  border-bottom-color: var(--ui-panel-border);
}

[data-theme="dark"] .gate-unit-suggestions-scroll-down {
  border-top-color: var(--ui-panel-border);
}

[data-theme="dark"] .gate-unit-suggestion-unit {
  color: var(--text);
}

[data-theme="dark"] .gate-unit-suggestion-meta {
  color: var(--text-secondary);
}

[data-theme="dark"] .gate-unit-suggestion:hover,
[data-theme="dark"] .gate-unit-suggestion.is-active {
  background: var(--ui-table-hover);
}

[data-theme="dark"] .gate-unit-suggestion:hover .gate-unit-suggestion-unit,
[data-theme="dark"] .gate-unit-suggestion.is-active .gate-unit-suggestion-unit {
  color: #fff;
}

[data-theme="dark"] .tab.active {
  color: var(--csg-blue-light);
}

[data-theme="dark"] .tab:hover:not(:disabled) {
  background: rgba(0, 145, 234, 0.16);
}

/* =============================================================================
   Photo attachments — trailers & work orders
   ============================================================================= */
.photo-section-shell {
  border: 1px solid var(--ui-panel-border);
  border-left: 3px solid var(--accent, #2563eb);
  border-radius: var(--radius-sm);
  background: var(--ui-panel-bg);
  overflow: hidden;
}

.photo-section-shell .photo-section-intro {
  margin: 0;
  padding: 12px 14px 12px 16px;
  border: none;
  border-radius: 0;
  background: transparent;
  border-bottom: 1px solid var(--ui-panel-border);
}

.photo-section-shell .photo-section-intro.tire-section-intro--compact {
  margin-bottom: 0;
  padding: 10px 12px 10px 14px;
}

.photo-section-intro .tire-section-intro__lead {
  margin-bottom: 0;
}

.photo-section-intro .tire-section-intro__lead + .tire-section-intro__lead {
  margin-top: 8px;
}

.photo-section-body {
  padding: 16px;
  border: 1px solid var(--ui-panel-border);
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
}

.photo-section-body--unified {
  border: none;
  border-radius: 0;
  background: var(--bg-subtle);
}

.photo-section-body--inline {
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}

.photos-section-wrap {
  margin-top: 4px;
  margin-bottom: 20px;
}

.photos-section .photo-section-body .photo-category-switch {
  margin-top: 0;
}

.photos-section .photo-upload-controls {
  margin-top: 0;
}

.photo-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.photo-form-section {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.photo-upload-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.photo-upload-controls--compact {
  margin-bottom: 10px;
}

.photo-upload-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  border-radius: var(--radius);
  background: var(--ui-inset-bg, var(--bg-subtle));
  border: 1px solid var(--border-light, var(--border));
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
}

.form-group label.photo-upload-btn,
label.photo-upload-btn.table-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;
  margin: 0;
  padding: 0;
  font-weight: normal;
  font-size: inherit;
  line-height: 1;
  vertical-align: middle;
}

.photo-upload-btn {
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.photo-upload-btn--camera-unavailable {
  opacity: 0.42;
  cursor: not-allowed;
  filter: grayscale(0.4);
  box-shadow: none;
}

.photo-upload-btn--camera-unavailable .photo-upload-input {
  pointer-events: none;
  cursor: not-allowed;
}

.photo-upload-btn--camera-unavailable.table-action-btn--primary:hover,
.photo-upload-btn--camera-unavailable.table-action-btn--primary:focus-visible {
  background: var(--ui-panel-bg);
  border-color: color-mix(in srgb, var(--primary) 32%, var(--ui-panel-border));
  transform: none;
  box-shadow: none;
}

.photo-upload-btn svg {
  display: block;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  pointer-events: none;
}

.photo-upload-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
  font-size: 16px;
  -webkit-tap-highlight-color: transparent;
}

.photo-upload-hint {
  font-size: 12px;
}

[data-theme="dark"] .photo-upload-actions {
  background: rgba(0, 0, 0, 0.22);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.28);
}

.photo-gallery-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 10px;
}

.photo-gallery-toolbar__select-actions {
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.photo-gallery-toolbar__select-actions:not([hidden]) {
  display: inline-flex;
}

.photo-gallery-toolbar__select-actions[hidden] {
  display: none !important;
}

.photo-gallery-toolbar [data-action="photo-select-toggle"][hidden] {
  display: none !important;
}

.photo-gallery-section--select-mode .photo-gallery-item__delete {
  display: none;
}

.photo-gallery-section--select-mode .photo-gallery-item__select {
  display: flex;
}

.photo-gallery-item__select {
  display: none;
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
  cursor: pointer;
}

.photo-gallery-item__select-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.photo-gallery-item__select-mark {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 2px solid rgba(255, 255, 255, 0.92);
  background: rgba(15, 23, 42, 0.45);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  display: grid;
  place-items: center;
}

.photo-gallery-item__select-input:checked + .photo-gallery-item__select-mark {
  background: var(--primary);
  border-color: var(--primary);
}

.photo-gallery-item__select-input:checked + .photo-gallery-item__select-mark::after {
  content: '';
  width: 5px;
  height: 9px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg) translate(-1px, -1px);
}

.photo-gallery-item.is-selected {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

.photo-gallery-section--select-mode .photo-gallery-item__thumb {
  cursor: pointer;
}

.photo-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}

.photo-gallery--empty {
  display: block;
}

.photo-gallery-empty {
  color: var(--text-muted);
  font-size: 13px;
  padding: 8px 0;
}

.photo-gallery-item {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.photo-gallery-item__thumb {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 0;
  padding: 0;
  background: var(--bg-muted, #f3f4f6);
  cursor: zoom-in;
}

.photo-gallery-item__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.photo-gallery-item__img--error {
  object-fit: contain;
  padding: 12px;
  opacity: 0.5;
}

.photo-gallery-item__info {
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 44px;
}

.photo-gallery-item__caption {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}

.photo-gallery-item__meta {
  font-size: 11px;
  color: var(--text-muted);
}

.photo-gallery-item__source {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--warning);
}

.photo-gallery-item__delete {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 999px;
  background: rgba(15, 20, 25, 0.72);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.photo-gallery-item__delete:hover {
  background: rgba(220, 38, 38, 0.92);
}

/* -------------------------------------------------------------------------- */
/* SOP library — Support → How To                                           */
/* -------------------------------------------------------------------------- */

.sop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  width: 100%;
  align-items: stretch;
}

.sop-grid .sop-card {
  height: 100%;
}

.sop-grid-empty {
  grid-column: 1 / -1;
  color: var(--text-muted);
  font-size: 14px;
  padding: 24px 8px;
  text-align: center;
}

.sop-library-card > .sop-library-toolbar {
  padding: 0;
  margin-bottom: 0;
  width: 100%;
  display: block;
}

.sop-library-card .sop-library-filters-panel {
  width: 100%;
  box-sizing: border-box;
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-top: none;
}

.sop-library-grid-wrap {
  padding: 16px;
}

.sop-library-card .sop-library-filter-row {
  align-items: end;
  grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
}

.sop-library-card .billing-filter-field .form-control {
  width: 100%;
  min-width: 0;
}

@media (min-width: 901px) and (max-width: 1280px) {
  .sop-library-card .sop-library-filter-row {
    grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  }

  .sop-library-card .sop-library-filter-row .billing-filter-field--search {
    grid-column: auto;
  }
}

.sop-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  min-width: 0;
  isolation: isolate;
}

.sop-card__preview {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  padding: 0;
  border: 0;
  background: var(--bg-muted, #f3f4f6);
  overflow: hidden;
  text-align: left;
  touch-action: manipulation;
}

.sop-card__preview--click-open {
  cursor: pointer;
}

.sop-card__preview--click-open:hover,
.sop-card__preview--click-open:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

.sop-card__preview--scrollable {
  cursor: default;
}

.sop-card__preview-inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  background: #fff;
}

.sop-card__preview-loading {
  margin: auto;
  color: var(--text-muted);
  font-size: 13px;
}

.sop-card__category {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(15, 23, 42, 0.72);
  pointer-events: none;
}

.sop-card__img,
.sop-card__iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #fff;
}

.sop-card__img {
  object-fit: cover;
}

.sop-card__iframe {
  pointer-events: auto;
}

.sop-card__text {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 12px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  pointer-events: auto;
  touch-action: pan-y;
  font-size: 11px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text-secondary);
  background: var(--ui-inset-bg);
}

.sop-card__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 16px;
  text-align: center;
}

.sop-card__placeholder-ext {
  display: grid;
  place-items: center;
  min-width: 56px;
  min-height: 56px;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #fff;
  background: color-mix(in srgb, var(--primary) 78%, #334155);
}

.sop-card__placeholder--pdf .sop-card__placeholder-ext {
  background: #dc2626;
}

.sop-card__placeholder--word .sop-card__placeholder-ext {
  background: #2563eb;
}

.sop-card__placeholder--excel .sop-card__placeholder-ext {
  background: #059669;
}

.sop-card__placeholder--error .sop-card__placeholder-ext {
  background: #64748b;
}

.sop-card__placeholder-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.sop-card__placeholder-hint {
  font-size: 11px;
  color: var(--text-muted);
}

.sop-card__body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 8px;
  padding: 12px 14px 14px;
  min-width: 0;
  background: var(--surface);
}

.sop-card__title {
  margin: 0;
  flex: 0 0 auto;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  min-height: calc(15px * 1.3 * 2);
}

.sop-card__description {
  margin: 0;
  flex: 0 0 auto;
  min-height: calc(12px * 1.45 * 2);
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sop-card__description--empty {
  margin: 0;
  pointer-events: none;
  display: block;
}

.sop-card__footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
  flex-shrink: 0;
}

.sop-card__meta {
  flex: 0 0 auto;
  min-height: calc(11px * 1.45 * 2);
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-muted);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.sop-card__actions.action-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 0;
  position: relative;
  z-index: 3;
  width: 100%;
  min-width: 0;
}

.sop-card__actions .table-action-btn {
  touch-action: manipulation;
}

@media (max-width: 1024px), (hover: none), (pointer: coarse) {
  .sop-card__actions .table-action-btn {
    width: 44px;
    height: 44px;
  }

  .sop-card__actions .table-action-btn svg {
    width: 18px;
    height: 18px;
  }

  .sop-card__preview--scrollable .sop-card__iframe {
    pointer-events: none;
  }
}

[data-theme="dark"] .sop-card__preview {
  background: rgba(15, 23, 42, 0.55);
}

[data-theme="dark"] .sop-card__iframe {
  background: #fff;
}

.sop-card--pinned {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 18%, transparent);
}

.sop-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.sop-card__preview > .sop-badge--pinned {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  background: var(--primary);
  color: #fff;
}

.sop-card__badges {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 6px;
  flex: 0 0 auto;
  min-height: 22px;
}

.sop-card__badges:empty {
  min-height: 0;
}

.sop-badge--overdue {
  background: #fee2e2;
  color: #b91c1c;
}

.sop-badge--due-soon {
  background: #fef3c7;
  color: #92400e;
}

.sop-badge--review {
  background: color-mix(in srgb, var(--text) 8%, var(--ui-inset-bg));
  color: var(--text-muted);
}

.sop-badge--version {
  background: #e0e7ff;
  color: #3730a3;
}

.sop-card__title-btn {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  min-height: calc(15px * 1.3 * 2);
  width: 100%;
}

.sop-card__title-btn:hover,
.sop-card__title-btn:focus-visible {
  color: var(--primary);
  outline: none;
}

.sop-card__pdf-thumb {
  object-fit: cover;
  object-position: top center;
  background: #fff;
}

.sop-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  min-width: 44px;
  padding: 0 10px;
}

.sop-action-btn__label {
  display: none;
  font-size: 12px;
  font-weight: 600;
}

.sop-grid-empty--hero {
  padding: 48px 24px;
  border: 1px dashed color-mix(in srgb, var(--border) 80%, var(--primary) 20%);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--text) 3%, var(--ui-inset-bg));
  color: var(--text-muted);
}

.sop-grid-empty--hero p {
  margin: 0 0 8px;
  color: var(--text-muted);
}

.sop-grid-empty--hero p:first-child {
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
}

.sop-grid-empty--hero p:last-of-type {
  margin-bottom: 0;
}

.sop-grid-empty--hero .btn {
  margin-top: 16px;
}

.sop-scope-details {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--ui-inset-bg);
  color: var(--text);
}

.sop-scope-details summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--text);
  list-style-position: outside;
}

.sop-scope-details summary::marker {
  color: var(--text-muted);
}

.sop-scope-details .form-group label {
  color: var(--text);
}

.sop-scope-details .text-muted {
  color: var(--text-muted);
}

.sop-scope-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.sop-scope-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-secondary, var(--text));
}

.sop-review-field {
  max-width: 240px;
}

.sop-pin-option {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--border-light, var(--border));
  border-radius: var(--radius);
  background: var(--ui-inset-bg);
  cursor: pointer;
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease;
}

.sop-pin-option:hover {
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
  background: color-mix(in srgb, var(--primary) 4%, var(--ui-inset-bg));
}

.sop-pin-option:has(.sop-pin-option__input:checked) {
  border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
  background: color-mix(in srgb, var(--primary) 10%, var(--ui-inset-bg));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 18%, transparent);
}

.sop-pin-option:has(.sop-pin-option__input:focus-visible) {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
}

.sop-pin-option__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sop-pin-option__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, var(--ui-panel-bg));
  border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent);
}

.sop-pin-option__icon svg {
  width: 18px;
  height: 18px;
}

.sop-pin-option:has(.sop-pin-option__input:checked) .sop-pin-option__icon {
  background: color-mix(in srgb, var(--primary) 22%, var(--ui-panel-bg));
  border-color: color-mix(in srgb, var(--primary) 45%, transparent);
}

.sop-pin-option__copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.sop-pin-option__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}

.sop-pin-option__hint {
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-muted);
}

[data-theme="dark"] .sop-pin-option {
  background: rgba(0, 0, 0, 0.2);
  border-color: rgba(148, 163, 184, 0.18);
}

[data-theme="dark"] .sop-pin-option:has(.sop-pin-option__input:checked) {
  background: color-mix(in srgb, var(--primary) 14%, rgba(0, 0, 0, 0.25));
  border-color: rgba(56, 189, 248, 0.45);
}

[data-theme="dark"] .sop-grid-empty--hero {
  background: color-mix(in srgb, var(--primary) 6%, var(--ui-inset-bg));
  border-color: color-mix(in srgb, var(--border) 70%, var(--primary) 30%);
}

[data-theme="dark"] .sop-scope-details {
  background: color-mix(in srgb, var(--text) 4%, var(--ui-inset-bg));
  border-color: var(--border);
}

[data-theme="dark"] .sop-badge--review {
  background: color-mix(in srgb, var(--text) 12%, var(--surface));
  color: var(--text-muted);
}

.sop-version-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sop-version-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 13px;
}

.sop-viewer-overlay {
  padding: 12px;
}

.sop-viewer-modal {
  width: min(1180px, calc(100vw - 24px));
  max-width: none;
  height: min(92vh, 960px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sop-viewer-topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--ui-panel-border);
  background: var(--ui-table-header-bg);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.sop-viewer-topbar__info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sop-viewer-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sop-viewer-filename {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sop-viewer-topbar__controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.sop-viewer-topbar__controls[hidden] {
  display: none;
}

.sop-viewer-topbar__actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.sop-viewer-action-group {
  display: flex;
  align-items: center;
  gap: 2px;
}

.sop-viewer-action-divider {
  width: 1px;
  height: 22px;
  background: var(--border);
  margin: 0 4px;
  flex-shrink: 0;
}

.sop-viewer-page-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--ui-inset-bg);
}

.sop-viewer-page-indicator {
  min-width: 72px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sop-viewer-modal--fullscreen {
  width: calc(100vw - 16px);
  height: calc(100vh - 16px);
  max-height: none;
}

.sop-viewer-overlay:has(.sop-viewer-modal--fullscreen) {
  padding: 8px;
}

.sop-viewer-zoom {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--ui-inset-bg);
}

.sop-viewer-zoom-label {
  min-width: 44px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.sop-viewer-page-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}

.sop-viewer-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.sop-viewer-icon-btn svg {
  width: 18px;
  height: 18px;
}

.sop-viewer-icon-btn:hover,
.sop-viewer-icon-btn:focus-visible {
  background: var(--ui-inset-bg);
  color: var(--text);
  border-color: var(--border);
}

.sop-viewer-icon-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

.sop-viewer-icon-btn[hidden] {
  display: none;
}

.sop-viewer-text-btn {
  height: 34px;
  padding: 0 10px;
  border: none;
  border-left: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.sop-viewer-text-btn:hover,
.sop-viewer-text-btn:focus-visible {
  color: var(--text);
  background: color-mix(in srgb, var(--text) 4%, transparent);
}

.sop-viewer-close {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  padding: 0;
}

.sop-viewer-body {
  flex: 1;
  min-height: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  background: color-mix(in srgb, var(--text) 6%, var(--surface));
}

.sop-viewer-stage {
  flex: 1;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.sop-viewer-stage--image,
.sop-viewer-stage--text {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px;
}

.sop-viewer-pages {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 24px;
  min-height: 100%;
  box-sizing: border-box;
}

.sop-viewer-page {
  position: relative;
  flex-shrink: 0;
}

.sop-viewer-page-canvas {
  display: block;
  max-width: 100%;
  height: auto;
  background: #fff;
  border-radius: 2px;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.08),
    0 8px 24px rgba(15, 23, 42, 0.12);
}

.sop-viewer-page-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.72);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  pointer-events: none;
}

.sop-viewer-loading,
.sop-viewer-fallback,
.sop-viewer-error {
  margin: auto;
  padding: 24px;
  text-align: center;
}

.sop-viewer-loading--inline {
  margin: 0;
  padding: 48px 24px;
  width: 100%;
  color: var(--text-muted);
}

.sop-viewer-img {
  max-width: 100%;
  max-height: calc(92vh - 120px);
  object-fit: contain;
  background: #fff;
  border-radius: 2px;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.08),
    0 8px 24px rgba(15, 23, 42, 0.12);
}

.sop-viewer-text {
  width: min(900px, 100%);
  max-height: calc(92vh - 120px);
  margin: 0;
  padding: 20px 24px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 13px;
  line-height: 1.55;
  background: var(--ui-panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}

@media (max-width: 768px) {
  .sop-viewer-topbar {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "info actions"
      "controls controls";
    gap: 10px 12px;
  }

  .sop-viewer-topbar__info { grid-area: info; }
  .sop-viewer-topbar__actions { grid-area: actions; }
  .sop-viewer-topbar__controls {
    grid-area: controls;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .sop-viewer-pages {
    padding: 16px;
    gap: 16px;
  }
}

/* =============================================================================
   Support → API Connections
   ============================================================================= */
.integrations-panel > #integrations-hero-wrap,
.integrations-panel > .integrations-toolbar {
  border-bottom: 1px solid var(--border);
}

.integrations-panel .module-toolbar-actions .btn {
  white-space: nowrap;
}

.integrations-hero {
  padding: 18px 20px 16px;
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--primary) 12%, transparent), transparent 42%),
    linear-gradient(180deg, color-mix(in srgb, var(--text) 3%, var(--surface)), var(--surface));
}

.integrations-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) auto;
  gap: 20px 28px;
  align-items: center;
}

.integrations-hero__eyebrow {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
}

.integrations-hero__headline {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
}

.integrations-hero__text {
  margin: 0;
  max-width: 62ch;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted);
}

.integrations-hero__metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-self: start;
}

.integrations-hero-stats {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.integrations-stat-card {
  width: 100%;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.integrations-stat-card:hover,
.integrations-stat-card:focus-visible {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
  outline: none;
}

.integrations-stat-card.is-active {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 18%, transparent);
}

.integrations-stat-card .yard-tm-stat-card__icon {
  top: 11px;
  right: 11px;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}

.integrations-stat-card .yard-tm-stat-card__icon svg {
  width: 18px;
  height: 18px;
}

.integrations-stat-card.yard-tm-stat-card--filtered .yard-tm-stat-card__icon {
  background: color-mix(in srgb, #059669 16%, transparent);
  color: #059669;
  border-color: color-mix(in srgb, #059669 24%, transparent);
}

.integrations-stat-card.yard-tm-stat-card--latest .yard-tm-stat-card__icon {
  background: color-mix(in srgb, #7c3aed 16%, transparent);
  color: #a78bfa;
  border-color: color-mix(in srgb, #7c3aed 24%, transparent);
}

.integrations-stat-card.yard-tm-stat-card--events .yard-tm-stat-card__icon {
  background: color-mix(in srgb, var(--primary) 16%, transparent);
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 24%, transparent);
}

.integrations-hero__vendors {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
}

.integrations-hero__vendor-btn {
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 10px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.integrations-hero__vendor-btn:hover,
.integrations-hero__vendor-btn:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 18%, transparent);
  outline: none;
}

.integrations-hero__vendor-btn:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 35%, transparent);
}

.integration-logo {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.integration-logo.integration-card__logo {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--integration-color) 8%, #fff);
  border: 1px solid color-mix(in srgb, var(--integration-color) 16%, var(--border));
}

.integration-logo:not(.integration-logo--fallback) {
  background: transparent;
  border-color: transparent;
}

.integration-logo--chip {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--integration-color) 8%, #fff);
  border: 1px solid color-mix(in srgb, var(--integration-color) 18%, var(--border));
}

.integration-logo__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
  display: block;
}

.integration-logo--lockup .integration-logo__img {
  position: static;
  width: 34px;
  height: 34px;
  max-width: 34px;
  max-height: 34px;
  object-fit: contain;
}

.integration-logo__caption {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: 100%;
  min-width: 0;
  text-align: center;
  line-height: 1.05;
}

.integration-logo__caption-line {
  display: block;
  max-width: 100%;
  font-size: 6px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #1f2937;
  white-space: normal;
  overflow: hidden;
  line-height: 1.08;
}

.integration-logo__caption-line--strong {
  font-size: 7px;
  font-weight: 800;
  color: #111827;
  margin-top: 1px;
}

.integration-logo__fallback {
  display: none;
  position: relative;
  z-index: 1;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--integration-color);
}

.integration-logo--fallback .integration-logo__img {
  display: none;
}

.integration-logo--fallback .integration-logo__fallback {
  display: inline-flex;
}

.integration-logo--fallback .integration-logo__caption {
  display: none;
}

.integration-logo--chip .integration-logo__fallback {
  font-size: 11px;
}

[data-theme="dark"] .integration-logo.integration-card__logo.integration-logo--fallback,
[data-theme="dark"] .integration-logo--chip.integration-logo--fallback {
  background: color-mix(in srgb, var(--integration-color) 10%, #1e293b);
}

[data-theme="dark"] .integration-logo--lockup.integration-card__logo {
  background: #f8fafc;
  border-color: #cbd5e1;
}

[data-theme="dark"] .integration-logo__caption-line {
  color: #374151;
}

[data-theme="dark"] .integration-logo__caption-line--strong {
  color: #111827;
}

.integrations-vendor-chip {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--integration-color);
  background: color-mix(in srgb, var(--integration-color) 14%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--integration-color) 24%, var(--border));
}

.integrations-panel > .integrations-toolbar {
  padding: 0;
  margin-bottom: 0;
  width: 100%;
  display: block;
}

.integrations-panel .integrations-filters-panel {
  width: 100%;
  box-sizing: border-box;
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-top: none;
}

.integrations-panel .integrations-filter-row {
  grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
}

.integrations-grid-wrap {
  padding: 16px;
}

.integrations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.integrations-grid-empty {
  grid-column: 1 / -1;
  padding: 40px 16px;
  text-align: center;
  color: var(--text-muted);
}

.integration-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  min-height: 100%;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.integration-card:hover {
  border-color: color-mix(in srgb, var(--primary) 22%, var(--border));
  box-shadow: var(--shadow-sm);
}

.integration-card--connected {
  border-left: 3px solid #16a34a;
}

.integration-card--highlight {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 16%, transparent);
  animation: integrationCardPulse 1.6s ease;
}

@keyframes integrationCardPulse {
  0%, 100% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 16%, transparent); }
  50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 10%, transparent); }
}

.integration-card__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.integration-card__brand {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}

.integration-card__intro {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.integration-card__name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35em 0.5em;
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
}

.integration-card__name-sep {
  font-weight: 400;
  color: var(--text-muted);
}

.integration-card__name-label {
  font-weight: 600;
  color: var(--text-secondary);
}

.integration-card__vendor {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-muted);
}

.integration-card__intro .integration-card__test {
  margin-top: 2px;
}

.integration-card__description {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.integration-card__account {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}

.integration-card__test {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
}

.integration-card__test--ok {
  color: #166534;
}

.integration-card__test--fail {
  color: #b91c1c;
}

.integration-card__test--pending {
  color: #92400e;
}

.integration-card__test--neutral {
  color: var(--text-muted);
}

[data-theme="dark"] .integration-card__test--ok {
  color: #86efac;
}

[data-theme="dark"] .integration-card__test--fail {
  color: #fca5a5;
}

[data-theme="dark"] .integration-card__test--pending {
  color: #fcd34d;
}

.integration-card__auth-type {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.integration-card__capabilities {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.integration-card__capabilities li {
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--ui-inset-bg);
  border: 1px solid var(--border);
}

.integration-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 4px;
}

.integration-card__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.integration-status,
.integration-availability {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

.integration-status--connected {
  color: #166534;
  background: #dcfce7;
}

.integration-status--disconnected {
  color: var(--text-muted);
  background: var(--ui-inset-bg);
}

.integration-status--planned,
.integration-availability--planned {
  color: #92400e;
  background: #fef3c7;
}

.integration-availability--beta {
  color: #1d4ed8;
  background: #dbeafe;
}

.integration-availability--available {
  color: #166534;
  background: #dcfce7;
}

.integration-config-modal__vendor {
  margin: 4px 0 0;
  font-size: 12px;
}

.integration-config-modal__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.integration-config-modal__footer-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.integration-config-connected-row .checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.integration-config-oauth {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--ui-inset-bg);
  box-shadow: var(--shadow-sm);
}

.integration-config-oauth__intro {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}

.integration-config-oauth__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.integration-config-oauth__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.integration-config-oauth__uri-field {
  display: flex;
  align-items: stretch;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  overflow: hidden;
}

.integration-config-oauth__uri-field code {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.45;
  word-break: break-all;
  background: transparent;
  color: var(--text);
}

.integration-config-oauth__copy.btn-icon {
  flex-shrink: 0;
  width: 42px;
  min-height: 42px;
  align-self: stretch;
  border-radius: 0;
  border: none;
  /* inset shadow keeps divider color stable — btn-icon:hover border-color must not override */
  box-shadow: inset 1px 0 0 var(--border);
  background: color-mix(in srgb, var(--ui-inset-bg) 70%, var(--surface));
  transition: background 0.15s ease;
}

.integration-config-oauth__copy.btn-icon:hover,
.integration-config-oauth__copy.btn-icon:focus-visible,
[data-theme="dark"] .integration-config-oauth__copy.btn-icon:hover,
[data-theme="dark"] .integration-config-oauth__copy.btn-icon:focus-visible {
  border: none;
  box-shadow: inset 1px 0 0 var(--border);
  /* ui-table-hover is defined per theme — visible tint in light and dark */
  background: var(--ui-table-hover);
  color: var(--text);
}

.integration-config-oauth__copy svg {
  width: 17px;
  height: 17px;
}

.integration-config-oauth__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.integration-config-oauth__portal {
  white-space: nowrap;
}

.integration-config-oauth__actions .btn-primary {
  margin-left: auto;
  white-space: nowrap;
}

/* readonly guard until focus — prevents Chrome login autofill on credential fields */
.integration-config-modal input[data-credential-field][readonly] {
  background-color: var(--input-bg, var(--ui-panel-bg));
  cursor: text;
  opacity: 1;
}

@media (max-width: 768px) {
  .integrations-hero__grid {
    grid-template-columns: 1fr;
  }

  .integrations-hero__metrics {
    grid-template-columns: 1fr;
  }

  .integrations-panel .integrations-filter-row,
  .module-filter-row--search-5 {
    grid-template-columns: 1fr;
  }

  .integrations-setup-wizard {
    flex-direction: column;
  }

  .integrations-panel .module-toolbar-head {
    flex-wrap: wrap;
  }

  .integrations-panel .module-toolbar-actions {
    width: 100%;
    margin-left: 0;
    justify-content: flex-end;
  }

  .integration-card__footer {
    flex-direction: column;
    align-items: stretch;
  }

  .integration-card__actions {
    justify-content: stretch;
  }

  .integration-card__actions .btn {
    flex: 1;
  }

  .integration-config-modal__footer-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .integration-config-oauth__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .integration-config-oauth__actions .btn-primary {
    margin-left: 0;
    width: 100%;
  }

  .integration-config-oauth__portal {
    width: 100%;
    text-align: center;
  }
}

.developer-access {
  margin: 0;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.developer-access__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 20px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}

.developer-access__toggle:hover,
.developer-access__toggle:focus-visible {
  background: color-mix(in srgb, var(--primary) 6%, var(--surface));
  outline: none;
}

.developer-access__toggle-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.developer-access__chevron {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--ui-inset-bg);
  position: relative;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.developer-access__chevron::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  margin-top: -1px;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: translate(-50%, -50%) rotate(-45deg);
  transition: transform 0.2s ease;
}

.developer-access.is-open .developer-access__chevron::before {
  margin-top: 0;
  transform: translate(-50%, -50%) rotate(45deg);
}

.developer-access.is-open .developer-access__chevron {
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
  background: color-mix(in srgb, var(--primary) 10%, var(--ui-inset-bg));
}

.developer-access__toggle-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.developer-access__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}

.developer-access__subtitle {
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-muted);
}

.developer-access__badge {
  flex-shrink: 0;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--border));
}

.developer-access__body {
  padding: 0 20px 18px;
  animation: developerPanelIn 0.18s ease;
}

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

.developer-access__intro {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  margin-bottom: 14px;
  padding: 14px 16px;
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border));
  background: color-mix(in srgb, var(--primary) 5%, var(--ui-inset-bg));
}

.developer-access__intro-copy {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.developer-panel-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.developer-panel-actions--center {
  justify-content: center;
  padding-top: 4px;
}

.developer-access__intro-actions {
  padding-top: 2px;
  border-top: 1px solid color-mix(in srgb, var(--primary) 14%, var(--border));
}

.developer-access__panel {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--ui-inset-bg);
}

.developer-access__panel + .developer-auth-hint,
.developer-auth-hint + .developer-access__panel {
  margin-top: 12px;
}

.developer-access__panel-title {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.developer-endpoints {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.developer-endpoint {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.developer-endpoint__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.developer-endpoint--stacked {
  grid-template-columns: 108px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
}

.developer-endpoint--stacked .developer-endpoint__hint {
  grid-column: 2 / -1;
}

.developer-endpoint__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.developer-endpoint__value {
  min-width: 0;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 12px;
  word-break: break-all;
}

.developer-auth-hint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--ui-inset-bg);
  font-size: 12px;
  color: var(--text-muted);
}

.developer-auth-hint__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.developer-auth-hint code {
  padding: 3px 7px;
  border-radius: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 11px;
}

.developer-auth-hint__or {
  font-size: 11px;
  color: var(--text-muted);
}

.developer-keys__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.developer-keys__head .developer-access__panel-title {
  margin: 0;
}

.developer-keys-empty {
  margin: 0;
  padding: 16px 14px;
  text-align: left;
  font-size: 13px;
  color: var(--text-muted);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.developer-keys-empty__lead {
  margin: 0 0 10px;
  font-weight: 600;
  color: var(--text-secondary);
}

.developer-keys-empty__steps {
  margin: 0 0 12px;
  padding-left: 18px;
  line-height: 1.55;
}

.developer-keys-empty__steps li + li {
  margin-top: 4px;
}

.developer-keys-empty .developer-panel-actions .btn {
  min-width: 168px;
}

.developer-quickstart {
  margin-top: 12px;
}

.developer-quickstart__code {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.developer-quickstart__code .btn {
  flex-shrink: 0;
  align-self: center;
}

.developer-quickstart__code pre {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 11px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-all;
}

.developer-key-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.developer-key-row + .developer-key-row {
  margin-top: 8px;
}

.developer-key-row__badge {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border));
}

.developer-key-row__main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.developer-key-row__main strong {
  font-size: 13px;
  color: var(--text);
}

.developer-key-row__meta,
.developer-key-row__notes {
  font-size: 12px;
  color: var(--text-muted);
}

.developer-key-row__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.developer-key-reveal-modal code {
  word-break: break-all;
}

/* ── API Connections enhancements ── */

.integrations-setup-wizard {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin: 0;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--primary) 6%, var(--surface));
}

.integrations-setup-wizard__copy p {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.45;
}

.integrations-setup-wizard__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.integrations-category-header {
  grid-column: 1 / -1;
  padding: 8px 2px 4px;
  border-bottom: 1px solid var(--border);
}

.integrations-category-header h4 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.integration-card__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  padding-left: 0;
}

.integration-card__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  color: var(--text-muted);
}

.integration-card__status::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background: currentColor;
}

.integration-card__status--connected {
  color: #15803d;
}

.integration-card__status--disconnected {
  color: var(--text-muted);
}

.integration-card__status--attention {
  color: #b45309;
}

.integration-card__status--attention::before {
  background: #f59e0b;
}

.integration-card__status--beta {
  color: #1d4ed8;
}

.integration-card__status--beta::before {
  background: #3b82f6;
}

.integration-card__status--planned {
  color: var(--text-muted);
}

[data-theme="dark"] .integration-card__status--connected {
  color: #86efac;
}

[data-theme="dark"] .integration-card__status--attention {
  color: #fcd34d;
}

[data-theme="dark"] .integration-card__status--beta {
  color: #93c5fd;
}

.integration-card--attention {
  border-color: color-mix(in srgb, #f59e0b 40%, var(--border));
}

.integration-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: 0 0 8px;
}

.integration-card__meta-item {
  font-size: 11px;
  color: var(--text-muted);
}

.integration-card__meta-item--ok {
  color: #166534;
}

.integration-card__meta-item--warn {
  color: #92400e;
}

.integration-card__meta-item--fail,
.integration-card__meta-env {
  font-weight: 600;
  text-transform: capitalize;
}

.integration-card__stale-hint {
  margin: 0 0 8px;
  font-size: 11px;
  color: #92400e;
}

.integration-card__cap-more {
  font-style: italic;
  color: var(--text-muted);
}

.integration-auth-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.integration-auth-pill--oauth {
  color: #1d4ed8;
  background: #dbeafe;
  border: 1px solid #93c5fd;
}

.integration-auth-pill--api {
  color: #92400e;
  background: #fef3c7;
  border: 1px solid #fcd34d;
}

.integration-auth-pill--webhook {
  color: #6b21a8;
  background: #f3e8ff;
  border: 1px solid #d8b4fe;
}

.integration-card--oauth-return {
  animation: integrationOAuthReturn 2.2s ease;
}

@keyframes integrationOAuthReturn {
  0%, 100% { box-shadow: var(--shadow-sm); }
  20%, 60% { box-shadow: 0 0 0 3px color-mix(in srgb, #22c55e 35%, transparent); }
}

.integration-card--skeleton {
  pointer-events: none;
}

.integration-skeleton {
  border-radius: 8px;
  background: linear-gradient(90deg, var(--ui-inset-bg) 25%, color-mix(in srgb, var(--border) 60%, var(--ui-inset-bg)) 50%, var(--ui-inset-bg) 75%);
  background-size: 200% 100%;
  animation: integrationSkeleton 1.2s ease-in-out infinite;
}

.integration-skeleton--logo {
  width: 44px;
  height: 44px;
  border-radius: 10px;
}

.integration-skeleton--title {
  height: 14px;
  width: 70%;
}

.integration-skeleton--subtitle {
  height: 10px;
  width: 50%;
  margin-top: 6px;
}

.integration-skeleton--line {
  height: 10px;
  width: 100%;
  margin-top: 10px;
}

.integration-skeleton--short {
  width: 65%;
}

.integration-skeleton-block {
  flex: 1;
}

@keyframes integrationSkeleton {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.integrations-grid-empty--welcome {
  text-align: center;
  padding: 28px 16px;
}

.integrations-grid-empty__actions {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}

.integration-config-modal__header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: start;
}

.integration-config-modal__logo {
  width: 44px;
  height: 44px;
}

.integration-oauth-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
}

.integration-oauth-step {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 11px;
  color: var(--text-muted);
}

.integration-oauth-step--done {
  color: #166534;
  border-color: #86efac;
  background: #f0fdf4;
}

.integration-oauth-step--current {
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
}

.integration-oauth-step__num {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  background: var(--ui-inset-bg);
}

.form-group--secret .integration-field-wrap {
  position: relative;
}

.form-group--secret .integration-secret-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: var(--primary);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.form-group--secret .form-control {
  padding-right: 52px;
}

.developer-key-row__title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.developer-key-status {
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
}

.developer-key-status--expired {
  color: #991b1b;
  background: #fee2e2;
}

.developer-key-status--expiring {
  color: #92400e;
  background: #fef3c7;
}

.developer-key-status--stale {
  color: var(--text-muted);
  background: var(--ui-inset-bg);
  border: 1px solid var(--border);
}

.developer-key-row--expired {
  opacity: 0.72;
}

.developer-webhook-events {
  margin-top: 12px;
}

.developer-webhook-events__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.developer-webhook-events__list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  font-size: 12px;
}

.developer-webhook-events__list code {
  grid-row: span 2;
  align-self: start;
  font-family: var(--terminal-mono);
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--ui-inset-bg);
  color: var(--text-secondary);
}

.developer-webhook-events__list li > span {
  color: var(--text);
  font-weight: 600;
  line-height: 1.35;
}

.developer-webhook-events__list small {
  grid-column: 2;
  color: var(--ui-muted-readable);
  line-height: 1.45;
}

.developer-webhook-tester {
  margin-top: 12px;
}

.developer-webhook-tester__signature-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
}

.developer-webhook-tester__signature-field {
  margin: 0;
}

.developer-webhook-tester__signature-row .btn {
  min-height: 38px;
  white-space: nowrap;
}

.developer-webhook-tester__result {
  margin: 10px 0 0;
}

.developer-webhook-tester__result--ok {
  color: #166534 !important;
}

.developer-webhook-tester__result--fail {
  color: #991b1b !important;
}

.developer-endpoint__value {
  word-break: break-all;
}

@media (max-width: 768px) {
  .developer-panel-actions {
    width: 100%;
  }

  .developer-access__intro-actions .btn,
  .developer-panel-actions--center .btn {
    flex: 1 1 140px;
  }

  .developer-endpoint,
  .developer-endpoint--stacked {
    grid-template-columns: 1fr;
  }

  .developer-endpoint__actions {
    justify-content: flex-start;
  }

  .developer-endpoint--stacked .developer-endpoint__hint {
    grid-column: 1;
  }

  .developer-webhook-tester__signature-row {
    grid-template-columns: 1fr;
  }

  .developer-webhook-tester__signature-row .btn {
    width: 100%;
  }

  .developer-keys__head {
    flex-direction: column;
    align-items: stretch;
  }

  .developer-keys__head .btn {
    width: 100%;
  }

  .developer-key-row {
    grid-template-columns: 1fr;
  }

  .developer-key-row__actions {
    width: 100%;
    justify-content: stretch;
  }

  .developer-key-row__actions .btn {
    flex: 1;
  }
}

.page-top-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 16px;
}

.page-top-nav__start {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.page-top-nav__end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.page-top-nav__main {
  flex: 1;
  min-width: 0;
}

.page-top-nav--header {
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  margin-bottom: 20px;
}

.page-top-nav--header .page-top-nav__start {
  margin-left: 0;
  justify-content: flex-start;
}

.page-top-nav--header .page-top-nav__main {
  width: 100%;
  text-align: center;
}

.page-top-nav .page-back-btn,
.page-top-nav__start .page-back-btn {
  margin-bottom: 0;
}

.page-top-nav .gate-back-nav {
  margin-bottom: 0;
}

.trailer-detail-page .page-top-nav .page-back-btn {
  margin-bottom: 0;
}

.sop-context-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 12px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
}

.sop-context-link--inline {
  margin: 0;
  padding: 8px 14px 8px 10px;
  min-height: 38px;
  box-sizing: border-box;
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.sop-context-link:hover,
.sop-context-link:focus-visible {
  border-color: var(--primary);
  color: var(--primary);
  text-decoration: none;
}

.sop-context-link--inline:hover,
.sop-context-link--inline:focus-visible {
  background: var(--bg);
  box-shadow: 0 4px 12px rgba(0, 114, 188, 0.12);
  transform: translateY(-1px);
  outline: none;
}

.page-top-nav--header .page-title {
  margin-bottom: 6px;
}

.page-top-nav--header .gate-hub-subtitle {
  margin: 0;
}

@media (max-width: 640px) {
  .sop-card__actions.action-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .sop-card__actions .sop-action-btn {
    width: 100%;
    min-width: 0;
    height: 40px;
    padding: 0 8px;
    justify-content: center;
  }

  .sop-action-btn__label {
    display: inline;
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (max-width: 1024px), (hover: none), (pointer: coarse) {
  .sop-card__actions .table-action-btn:not(.sop-action-btn) {
    width: 44px;
    height: 44px;
  }

  .sop-card__actions .sop-action-btn {
    min-height: 44px;
  }

  .sop-action-btn__label {
    display: none;
  }
}

.photo-import-section {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.photo-import-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.photo-import-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 12px;
  margin-bottom: 8px;
}

.photo-import-item {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  cursor: pointer;
  min-width: 0;
  transition: outline-color 0.15s ease, box-shadow 0.15s ease;
}

.photo-import-item:hover {
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}

.photo-import-item.is-selected,
.photo-import-item:has(.photo-import-check:checked) {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

.photo-import-check {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.photo-import-item__select-mark {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 6px;
  border: 2px solid rgba(255, 255, 255, 0.92);
  background: rgba(15, 23, 42, 0.45);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  display: grid;
  place-items: center;
  cursor: pointer;
  touch-action: manipulation;
}

.photo-import-item__select-mark:hover {
  background: rgba(15, 23, 42, 0.62);
}

.photo-import-item__select-mark:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.photo-import-item:has(.photo-import-check:checked) .photo-import-item__select-mark {
  background: var(--primary);
  border-color: var(--primary);
}

.photo-import-item:has(.photo-import-check:checked) .photo-import-item__select-mark::after {
  content: '';
  width: 5px;
  height: 9px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg) translate(-1px, -1px);
}

.photo-import-item__thumb {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bg-muted, #eef2f7);
  border: 0;
  padding: 0;
  cursor: zoom-in;
  touch-action: manipulation;
}

.photo-import-item__thumb:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

.photo-import-item__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.photo-import-item__missing {
  font-size: 12px;
  color: var(--text-muted);
}

.photo-import-item__label {
  display: block;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.photo-import-empty {
  font-size: 13px;
  margin: 0;
}

.photo-lightbox-overlay {
  z-index: 10050;
}

.photo-lightbox {
  width: min(960px, 96vw);
  max-width: min(960px, 96vw);
  overflow: hidden;
}

.photo-lightbox__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.photo-lightbox__head-main {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

.photo-lightbox__head-main h3 {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.photo-lightbox__counter {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

.photo-lightbox__body {
  position: relative;
  padding: 0;
  background: #0f1419;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: min(72vh, 680px);
  flex-shrink: 0;
  overflow: hidden;
}

.photo-lightbox__img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

.photo-lightbox__img.is-loading {
  opacity: 0.35;
}

.photo-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(15, 20, 25, 0.72);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.photo-lightbox__nav:hover,
.photo-lightbox__nav:focus-visible {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.32);
}

.photo-lightbox__nav--prev {
  left: 12px;
}

.photo-lightbox__nav--next {
  right: 12px;
}

.photo-lightbox__close {
  touch-action: manipulation;
}

.photo-lightbox__swipe-hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  margin: 0;
  text-align: center;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.72);
  pointer-events: none;
  user-select: none;
}

.photo-lightbox__body,
.photo-lightbox__img,
.photo-lightbox__nav,
.photo-gallery-item__thumb {
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

@media (max-width: 900px), (pointer: coarse) {
  .form-group label.photo-upload-btn,
  label.photo-upload-btn.table-action-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }

  .photo-upload-btn svg {
    width: 20px;
    height: 20px;
  }

  .photo-upload-actions {
    gap: 8px;
    padding: 6px;
  }

  .photo-gallery-item__delete {
    width: 32px;
    height: 32px;
    top: 8px;
    right: 8px;
  }

  .photo-lightbox {
    width: 100vw;
    max-width: 100vw;
    margin: 0;
    border-radius: 0;
  }

  .photo-lightbox-overlay {
    padding: 0;
  }

  .photo-lightbox__body {
    height: min(78dvh, 820px);
  }

  .photo-lightbox__nav {
    width: 48px;
    height: 48px;
    font-size: 28px;
  }

  .photo-lightbox__nav--prev {
    left: 8px;
  }

  .photo-lightbox__nav--next {
    right: 8px;
  }

  .photo-lightbox__close {
    min-width: 44px;
    min-height: 44px;
    font-size: 28px;
    line-height: 1;
  }
}

.trailer-detail-panel--photos {
  padding: 16px;
}

.trailer-detail-panel--photos-combined {
  padding-top: 14px;
}

.trailer-photos-panel--embedded {
  width: 100%;
}

.trailer-photos-panel--embedded .trailer-photos-panel__label {
  margin-bottom: 8px;
}

.trailer-photos-panel-wrap {
  margin-bottom: 0;
}

.trailer-photos-panel--embedded .photo-category-switch {
  margin-bottom: 10px;
}

.photo-category-switch {
  display: flex;
  align-items: flex-end;
  gap: 0;
  margin: 0 0 14px;
  padding: 0 2px;
  border-bottom: 1px solid var(--ui-panel-border);
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.photo-category-switch::-webkit-scrollbar {
  display: none;
}

.photo-category-switch__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 10px 16px 11px;
  border: none;
  border-radius: 0;
  background: transparent;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--text-secondary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  white-space: nowrap;
  font-family: inherit;
}

.photo-category-switch__btn:hover:not(.is-active) {
  color: var(--text);
  background: color-mix(in srgb, var(--primary) 6%, transparent);
}

.photo-category-switch__btn:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--primary) 35%, transparent);
}

.photo-category-switch__btn.is-active {
  color: var(--primary);
  font-weight: 600;
  border-bottom-color: var(--primary);
  background: transparent;
  box-shadow: none;
}

.photo-category-switch__btn--damage.is-active {
  color: #D97706;
  border-bottom-color: #D97706;
}

.photo-category-switch__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  background: var(--ui-inset-bg);
  color: var(--text-muted);
  border: 1px solid var(--border-light);
}

.photo-category-switch__btn.is-active .photo-category-switch__count {
  background: color-mix(in srgb, var(--primary) 10%, var(--ui-inset-bg));
  border-color: color-mix(in srgb, var(--primary) 22%, var(--border-light));
  color: var(--primary);
}

.photo-category-switch__btn--damage.is-active .photo-category-switch__count {
  background: color-mix(in srgb, #D97706 12%, var(--ui-inset-bg));
  border-color: color-mix(in srgb, #D97706 28%, var(--border-light));
  color: #D97706;
}

.photo-category-panels {
  margin-top: 0;
}

.photo-category-panel {
  display: none;
}

.photo-category-panel.is-active {
  display: block;
}

[data-theme="dark"] .photo-category-switch {
  border-bottom-color: var(--ui-panel-border);
}

[data-theme="dark"] .photo-category-switch__btn:hover:not(.is-active) {
  background: rgba(0, 114, 188, 0.1);
}

[data-theme="dark"] .photo-category-switch__btn.is-active {
  color: #38BDF8;
  border-bottom-color: #38BDF8;
}

[data-theme="dark"] .photo-category-switch__btn--damage.is-active {
  color: #FBBF24;
  border-bottom-color: #FBBF24;
}

[data-theme="dark"] .photo-category-switch__count {
  background: rgba(15, 23, 42, 0.55);
  border-color: var(--ui-panel-border);
  color: #94A3B8;
}

[data-theme="dark"] .photo-category-switch__btn.is-active .photo-category-switch__count {
  background: rgba(56, 189, 248, 0.12);
  border-color: rgba(56, 189, 248, 0.28);
  color: #38BDF8;
}

[data-theme="dark"] .photo-category-switch__btn--damage.is-active .photo-category-switch__count {
  background: rgba(251, 191, 36, 0.12);
  border-color: rgba(251, 191, 36, 0.28);
  color: #FBBF24;
}

.trailer-detail-panel--damage-photos {
  border-left: 3px solid var(--warning);
}

.modal-trailer-photos,
.modal-damage-photos {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
}

.modal-trailer-photos .form-section-label,
.modal-damage-photos .form-section-label {
  margin-bottom: 4px;
}

.modal-trailer-photos--damage {
  border-left: 3px solid var(--warning);
  padding-left: 12px;
}

[data-theme="dark"] .photo-gallery-item__thumb {
  background: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .photo-import-item__thumb {
  background: rgba(255, 255, 255, 0.06);
}

/* Work order print sheet */
.wo-print-only {
  display: none;
}

.wo-print-sheet-header {
  display: none;
}

@media print {
  @page {
    size: letter;
    margin: 0.55in 0.6in 0.7in;
  }

  body.printing-work-order {
    background: #fff !important;
    color: #111 !important;
    font-family: "Segoe UI", Arial, sans-serif;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  body.printing-work-order .app-header,
  body.printing-work-order .app-shell::after {
    display: none !important;
  }

  body.printing-work-order #app,
  body.printing-work-order .app-shell,
  body.printing-work-order .main-content {
    display: block !important;
    visibility: visible !important;
    position: static !important;
    overflow: visible !important;
    background: #fff !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    min-height: 0 !important;
    isolation: auto !important;
  }

  body.printing-work-order .wo-print-source {
    position: static !important;
    width: 100% !important;
    padding: 0 0 0.85in !important;
    margin: 0 !important;
    background: #fff !important;
    color: #111 !important;
    font-size: 12px;
    line-height: 1.45;
    visibility: visible !important;
    break-inside: auto;
  }

  body.printing-work-order .wo-print-only {
    display: block !important;
    visibility: visible !important;
  }

  body.printing-work-order .wo-print-sheet {
    display: block !important;
    margin-bottom: 22px;
  }

  body.printing-work-order .wo-print-sheet-header {
    display: flex !important;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 2px solid #1a1a1a;
  }

  body.printing-work-order .wo-print-sheet-header__brand {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  body.printing-work-order .wo-print-logo {
    width: 44px;
    height: 44px;
    object-fit: contain;
  }

  body.printing-work-order .wo-print-sheet-header__app {
    font-size: 15px;
    font-weight: 700;
    color: #111;
    letter-spacing: -0.01em;
  }

  body.printing-work-order .wo-print-sheet-header__company {
    margin-top: 2px;
    font-size: 10px;
    color: #555;
    line-height: 1.35;
    max-width: 260px;
  }

  body.printing-work-order .wo-print-sheet-header__meta {
    text-align: right;
    flex-shrink: 0;
  }

  body.printing-work-order .wo-print-sheet-header__doc {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #666;
  }

  body.printing-work-order .wo-print-sheet-header__title {
    margin-top: 2px;
    font-size: 22px;
    font-weight: 700;
    color: #111;
    letter-spacing: -0.02em;
    line-height: 1.25;
    overflow: visible;
  }

  body.printing-work-order .wo-print-sheet-header__date {
    margin-top: 6px;
    font-size: 10px;
    color: #666;
  }

  body.printing-work-order .wo-print-summary {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid #c8c8c8;
    border-radius: 4px;
    overflow: hidden;
    visibility: visible !important;
  }

  body.printing-work-order .wo-print-summary__cell {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 8px 10px;
    border-right: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
    background: #fff;
    min-height: 46px;
  }

  body.printing-work-order .wo-print-summary__cell:nth-child(4n) {
    border-right: none;
  }

  body.printing-work-order .wo-print-summary__cell:nth-last-child(-n + 4) {
    border-bottom: none;
  }

  body.printing-work-order .wo-print-summary__label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #666;
  }

  body.printing-work-order .wo-print-summary__value {
    font-size: 11px;
    font-weight: 600;
    color: #111;
    line-height: 1.35;
    word-break: break-word;
  }

  body.printing-work-order .wo-print-sheet-footer {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 8px 0.6in;
    border-top: 1px solid #ccc;
    font-size: 9px;
    color: #777;
    background: #fff;
  }

  body.printing-work-order .wo-print-source .page-back-btn,
  body.printing-work-order .wo-print-source .wo-detail-panel--summary .trailer-detail-unit-head,
  body.printing-work-order .wo-print-source .detail-header-actions,
  body.printing-work-order .wo-print-source .photo-import-section,
  body.printing-work-order .wo-print-source .photo-upload-controls,
  body.printing-work-order .wo-print-source .photo-gallery-toolbar,
  body.printing-work-order .wo-print-source .photo-gallery-item__delete,
  body.printing-work-order .wo-print-source .photo-gallery-item__select,
  body.printing-work-order .wo-print-source .photo-section-intro {
    display: none !important;
  }

  body.printing-work-order .wo-print-source .section-title,
  body.printing-work-order .wo-print-source .specs-panel,
  body.printing-work-order .wo-print-source .wo-detail-panel-body,
  body.printing-work-order .wo-print-source .specs-grid,
  body.printing-work-order .wo-print-source .spec-item,
  body.printing-work-order .wo-print-source .wo-history-panel,
  body.printing-work-order .wo-print-source .wo-history-list,
  body.printing-work-order .wo-print-source .wo-history-item,
  body.printing-work-order .wo-print-source .trailer-detail-panel--photos,
  body.printing-work-order .wo-print-source .photo-gallery,
  body.printing-work-order .wo-print-source .photo-gallery-item {
    visibility: visible !important;
  }

  body.printing-work-order .wo-print-source .section-title {
    margin: 20px 0 10px !important;
    padding: 0 0 5px !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid #333 !important;
    border-radius: 0 !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: #333 !important;
    break-after: avoid;
  }

  body.printing-work-order .wo-print-source .specs-panel,
  body.printing-work-order .wo-print-source .wo-detail-panel--summary,
  body.printing-work-order .wo-print-source .wo-detail-panel-body,
  body.printing-work-order .wo-print-source .wo-history-panel,
  body.printing-work-order .wo-print-source .trailer-detail-panel--photos {
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  body.printing-work-order .wo-print-source .work-order-detail-page .section-title + .wo-history-panel {
    border: none !important;
    padding: 0 !important;
  }

  body.printing-work-order .wo-print-source .specs-grid {
    display: block !important;
    border: 1px solid #c8c8c8;
    border-radius: 4px;
    overflow: hidden;
  }

  body.printing-work-order .wo-print-source .spec-item {
    display: grid;
    grid-template-columns: 132px 1fr;
    gap: 0;
    padding: 0;
    margin: 0;
    border: none;
    border-bottom: 1px solid #e8e8e8;
    border-radius: 0;
    background: #fff !important;
    break-inside: avoid;
  }

  body.printing-work-order .wo-print-source .spec-item:last-child {
    border-bottom: none;
  }

  body.printing-work-order .wo-print-source .spec-item .label {
    padding: 8px 10px;
    background: #f3f3f3 !important;
    border-right: 1px solid #e8e8e8;
    color: #555 !important;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  body.printing-work-order .wo-print-source .spec-item .value {
    padding: 8px 10px;
    font-size: 11px;
    font-weight: 500;
    color: #111 !important;
    line-height: 1.45;
  }

  body.printing-work-order .wo-print-source .spec-item .value.is-empty {
    color: #888 !important;
    font-style: italic;
    font-weight: 400;
  }

  body.printing-work-order .wo-print-source .spec-item--multiline {
    background: #fff !important;
    border-color: #e8e8e8 !important;
  }

  body.printing-work-order .wo-print-source .wo-detail-value--multiline {
    white-space: pre-wrap;
  }

  body.printing-work-order .wo-print-source .wo-history-list {
    gap: 8px;
  }

  body.printing-work-order .wo-print-source .wo-history-item {
    break-inside: avoid;
    padding: 10px 12px;
    margin: 0;
    background: #fff !important;
    border: 1px solid #d8d8d8;
    border-left: 3px solid #333;
    border-radius: 0;
    box-shadow: none;
  }

  body.printing-work-order .wo-print-source .wo-history-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
  }

  body.printing-work-order .wo-print-source .wo-history-action {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #111 !important;
  }

  body.printing-work-order .wo-print-source .wo-history-time {
    font-size: 10px;
    color: #666 !important;
  }

  body.printing-work-order .wo-print-source .wo-history-user {
    margin-top: 2px;
    font-size: 10px;
    color: #666 !important;
  }

  body.printing-work-order .wo-print-source .wo-history-user strong {
    color: #333 !important;
    font-weight: 600;
  }

  body.printing-work-order .wo-print-source .wo-history-notes {
    margin-top: 6px;
    padding: 7px 9px;
    background: #f7f7f7 !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 3px;
    font-size: 10px;
    color: #333 !important;
    line-height: 1.45;
  }

  body.printing-work-order .wo-print-source .wo-history-status {
    margin-top: 6px;
  }

  body.printing-work-order .wo-print-source .badge {
    border: 1px solid #999 !important;
    background: #fff !important;
    color: #111 !important;
    box-shadow: none !important;
    font-size: 9px !important;
    padding: 2px 7px !important;
  }

  body.printing-work-order .wo-print-source .wo-history-empty {
    font-size: 11px;
    color: #666 !important;
  }

  body.printing-work-order .wo-print-source .photo-gallery {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
  }

  body.printing-work-order .wo-print-source .photo-gallery-item {
    break-inside: avoid;
    border: 1px solid #ccc;
    border-radius: 3px;
    box-shadow: none;
    overflow: hidden;
  }

  body.printing-work-order .wo-print-source .photo-gallery-item__thumb {
    border: none;
    padding: 0;
    background: #fff;
    cursor: default;
    pointer-events: none;
    border-radius: 0;
  }

  body.printing-work-order .wo-print-source .photo-gallery-item__img {
    width: 100%;
    height: 105px;
    object-fit: cover;
    display: block;
  }

  body.printing-work-order .wo-print-source .photo-gallery-item__info {
    display: flex !important;
    flex-direction: column;
    gap: 1px;
    padding: 5px 7px 6px;
    min-height: 0;
    background: #fafafa;
    border-top: 1px solid #e5e5e5;
  }

  body.printing-work-order .wo-print-source .photo-gallery-item__caption,
  body.printing-work-order .wo-print-source .photo-gallery-item__meta,
  body.printing-work-order .wo-print-source .photo-gallery-item__source {
    font-size: 8px;
    color: #666 !important;
    font-weight: 500;
  }

  body.printing-work-order .wo-print-source .photo-gallery-empty {
    font-size: 11px;
    color: #666;
    font-style: italic;
    margin: 0;
  }

  /* Dark UI theme — force readable print colors */
  html[data-theme="dark"] body.printing-work-order .wo-print-source,
  html[data-theme="dark"] body.printing-work-order .wo-print-source .spec-item,
  html[data-theme="dark"] body.printing-work-order .wo-print-source .wo-history-item,
  html[data-theme="dark"] body.printing-work-order .wo-print-source .trailer-detail-panel--photos {
    background: #fff !important;
    color: #111 !important;
    box-shadow: none !important;
  }

  html[data-theme="dark"] body.printing-work-order .wo-print-source .spec-item .label {
    background: #f3f3f3 !important;
    color: #555 !important;
  }

  html[data-theme="dark"] body.printing-work-order .wo-print-source .spec-item .value,
  html[data-theme="dark"] body.printing-work-order .wo-print-source .wo-detail-value--multiline,
  html[data-theme="dark"] body.printing-work-order .wo-print-source .wo-history-action {
    color: #111 !important;
  }
}

/* Customer portal */
.customer-portal-page .page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.customer-portal-page .page-header > .dashboard-cmd-bar {
  flex-shrink: 0;
  align-self: center;
}

@media (max-width: 720px) {
  .customer-portal-page .page-header > .dashboard-cmd-bar {
    align-self: stretch;
    width: 100%;
  }
}

.customer-portal-subtitle {
  margin: 6px 0 0;
  color: var(--text-secondary);
}

.customer-portal-page .page-header h1,
.customer-portal-page .page-header .page-title {
  color: var(--text);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.customer-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}

.customer-stat-card {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.customer-stat-card__value {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
}

.customer-stat-card__label {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.customer-stat-card__hint {
  margin-top: 4px;
  font-size: 12px;
  color: var(--ui-muted-readable);
}

/* Shared portal action buttons — solid accent CTAs in staff & customer shells */
.portal-quick-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.portal-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 18px;
  min-height: 42px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--portal-accent-dark, var(--portal-accent));
  background: var(--portal-accent);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--portal-accent) 32%, transparent);
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.15s ease;
}

.portal-action-btn:hover,
.portal-action-btn:focus-visible {
  background: var(--portal-accent-dark, color-mix(in srgb, var(--portal-accent) 88%, #000));
  border-color: var(--portal-accent-dark, color-mix(in srgb, var(--portal-accent) 88%, #000));
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--portal-accent) 40%, transparent);
  outline: none;
}

.portal-action-btn:active {
  transform: translateY(0);
}

.portal-action-btn--compact {
  min-height: 0;
  padding: 8px 14px;
  font-size: 13px;
  width: fit-content;
  margin-top: 10px;
}

.customer-search-input {
  min-width: min(280px, 100%);
}

.customer-support {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.customer-support__head {
  margin-bottom: 14px;
}

.customer-support__title {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
}

.customer-support__subtitle {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}

.customer-support__nav {
  margin-bottom: 16px;
}

/* Customer portal Support — teal accents (not staff blue) */
.app-shell--customer-portal .customer-support {
  --terminal-phosphor: rgba(13, 148, 136, 0.82);
  --terminal-phosphor-bright: rgba(45, 212, 191, 0.95);
  --terminal-phosphor-dim: rgba(15, 118, 110, 0.45);
  --terminal-border-mix: color-mix(in srgb, var(--border) 74%, var(--terminal-phosphor) 26%);
  --terminal-title-rule: color-mix(in srgb, var(--portal-customer-accent) 38%, transparent);
  --terminal-row-hover: color-mix(in srgb, var(--portal-customer-accent) 7%, var(--ui-table-hover));
}

.app-shell--customer-portal .customer-support .support-nav .support-nav__tab:hover:not(:disabled):not(.active) {
  background: color-mix(in srgb, var(--portal-customer-accent) 8%, transparent);
  border-color: color-mix(in srgb, var(--portal-customer-accent) 14%, transparent);
}

.app-shell--customer-portal .customer-support .support-nav .support-nav__tab.active {
  color: var(--portal-customer-accent);
  border-color: color-mix(in srgb, var(--portal-customer-accent) 24%, var(--ui-panel-border));
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.06),
    0 4px 12px color-mix(in srgb, var(--portal-customer-accent) 18%, transparent);
}

[data-theme="dark"] .app-shell--customer-portal .customer-support .support-nav .support-nav__tab:hover:not(:disabled):not(.active) {
  background: color-mix(in srgb, var(--portal-customer-accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--portal-customer-accent) 22%, transparent);
}

[data-theme="dark"] .app-shell--customer-portal .customer-support .support-nav .support-nav__tab.active {
  color: var(--portal-customer-accent);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.28),
    0 4px 14px color-mix(in srgb, var(--portal-customer-accent) 20%, transparent);
}

.app-shell--customer-portal .customer-support .support-list-card-count {
  background: color-mix(in srgb, var(--portal-customer-accent) 12%, transparent);
  color: var(--portal-customer-accent);
  border-color: color-mix(in srgb, var(--portal-customer-accent) 22%, transparent);
}

.app-shell--customer-portal .customer-support .support-list-card-head {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--portal-customer-accent) 14%, #f0fdfa) 0%,
    color-mix(in srgb, var(--portal-customer-accent) 6%, var(--ui-panel-bg)) 100%
  );
  border-bottom-color: color-mix(in srgb, var(--portal-customer-accent) 18%, var(--trailer-detail-panel-border));
}

[data-theme="dark"] .app-shell--customer-portal .customer-support .support-list-card-head {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--portal-customer-accent) 18%, var(--ui-panel-bg)) 0%,
    color-mix(in srgb, var(--portal-customer-accent) 8%, var(--ui-card-bg)) 100%
  );
  border-bottom-color: color-mix(in srgb, var(--portal-customer-accent) 24%, var(--trailer-detail-panel-border));
}

.app-shell--customer-portal .customer-support .module-filters-panel .form-control:focus,
.app-shell--customer-portal .customer-support .module-filters-panel .form-select:focus,
.app-shell--customer-portal .customer-support .help-desk-form .form-control:focus {
  border-color: color-mix(in srgb, var(--portal-customer-accent) 45%, var(--border));
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--portal-customer-accent) 14%, transparent),
    0 0 14px color-mix(in srgb, var(--portal-customer-accent) 12%, transparent);
}

.app-shell--customer-portal .customer-support .dashboard-cmd--yard,
.app-shell--customer-portal .customer-support .dashboard-cmd--neutral {
  --cmd-accent: var(--portal-customer-accent);
  --cmd-accent-soft: color-mix(in srgb, var(--portal-customer-accent) 36%, var(--ui-panel-border));
}

.app-shell--customer-portal .customer-support .sop-card__title-btn:hover,
.app-shell--customer-portal .customer-support .sop-card__title-btn:focus-visible {
  color: var(--portal-customer-accent);
}

.app-shell--customer-portal .customer-support .table-action-btn:hover,
.app-shell--customer-portal .customer-support .table-action-btn:focus-visible {
  border-color: color-mix(in srgb, var(--portal-customer-accent) 35%, var(--border));
  color: var(--portal-customer-accent);
}

.customer-portal-lead {
  margin: 6px 0 20px;
}

.customer-portal-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  padding: 16px 18px 18px;
}

.customer-portal-panel__stats {
  margin-bottom: 16px;
}

.customer-portal-panel__stats.customer-stat-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 900px) {
  .customer-portal-panel__stats.customer-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .customer-portal-panel__stats.customer-stat-grid {
    grid-template-columns: 1fr;
  }
}

.customer-portal-panel .portal-insights-strip {
  margin-bottom: 16px;
}

.customer-portal-panel .customer-stat-card {
  padding: 12px 14px;
}

.customer-portal-panel .customer-stat-card__value {
  font-size: 24px;
}

.customer-portal-panel .customer-stat-card__label {
  margin-top: 4px;
  font-size: 12px;
}

.customer-portal-panel .customer-stat-card__hint {
  margin-top: 2px;
  font-size: 11px;
}

.customer-portal-toolbar--actions-only {
  padding-top: 0;
  border-top: none;
  margin-bottom: 12px;
}

.customer-portal-toolbar--actions-only .portal-quick-links {
  gap: 8px;
}

.customer-overview-lists {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.customer-portal-panel .customer-info-card,
.customer-portal-panel .customer-side-panel {
  padding: 12px 14px;
}

.customer-portal-panel .customer-info-card__title,
.customer-portal-panel .customer-side-panel__title {
  margin-bottom: 8px;
  font-size: 13px;
}

.customer-portal-panel .customer-info-card__note {
  margin-top: 8px;
  font-size: 11px;
}

.customer-portal-panel .customer-activity-item {
  padding: 8px 10px;
}

.customer-portal-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.customer-portal-toolbar__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  flex: 1 1 320px;
  min-width: 0;
}

.customer-portal-toolbar__actions {
  flex: 0 0 auto;
}

.customer-list-header {
  margin-bottom: 20px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.customer-list-header__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.customer-list-header__title {
  flex: 1 1 auto;
  min-width: 0;
}

.customer-list-header__title h1 {
  margin: 0;
}

.customer-list-header__actions {
  flex: 0 0 auto;
}

.customer-list-header__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.customer-list-search {
  flex: 1 1 220px;
  min-width: 0;
  max-width: min(420px, 100%);
}

.customer-list-filter {
  flex: 0 0 auto;
  width: auto;
  min-width: 140px;
  max-width: 180px;
}

.customer-portal-page .module-action-btn--primary {
  --cmd-accent: var(--portal-customer-accent);
  border-color: color-mix(in srgb, var(--portal-customer-accent) 44%, var(--ui-panel-border));
  background: var(--ui-panel-bg);
  color: var(--text);
  box-shadow: none;
}

.customer-portal-page .module-action-btn--primary:hover,
.customer-portal-page .module-action-btn--primary:focus-visible {
  background: color-mix(in srgb, var(--portal-customer-accent) 10%, var(--ui-panel-bg));
  border-color: var(--portal-customer-accent);
  color: var(--text);
  box-shadow: 0 1px 6px color-mix(in srgb, var(--portal-customer-accent) 12%, transparent);
}

[data-theme="dark"] .customer-portal-page .module-action-btn--primary,
[data-theme="dark"] .customer-portal-page .module-action-btn--secondary {
  background: color-mix(in srgb, var(--ui-panel-bg) 88%, var(--portal-customer-accent) 12%);
  border-color: color-mix(in srgb, var(--portal-customer-accent) 46%, var(--ui-panel-border));
}

[data-theme="dark"] .customer-portal-page .module-action-btn--primary:hover,
[data-theme="dark"] .customer-portal-page .module-action-btn--primary:focus-visible,
[data-theme="dark"] .customer-portal-page .module-action-btn--secondary:hover,
[data-theme="dark"] .customer-portal-page .module-action-btn--secondary:focus-visible {
  background: color-mix(in srgb, var(--portal-customer-accent) 22%, var(--ui-panel-bg));
  border-color: var(--portal-customer-accent);
  color: var(--text);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--portal-customer-accent) 38%, transparent),
    0 2px 10px color-mix(in srgb, var(--portal-customer-accent) 22%, transparent);
}

@media (max-width: 640px) {
  .customer-list-header__top {
    align-items: flex-start;
  }

  .customer-list-header__toolbar .customer-list-search,
  .customer-list-header__toolbar .customer-list-filter,
  .customer-portal-toolbar__filters .customer-list-search,
  .customer-portal-toolbar__filters .customer-list-filter {
    flex: 1 1 100%;
    max-width: none;
  }

  .customer-portal-toolbar__actions {
    width: 100%;
  }

  .customer-portal-toolbar__actions .module-actions {
    width: 100%;
    justify-content: flex-end;
  }
}

.customer-fleet-damage {
  max-width: 220px;
}

.customer-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
  gap: 20px;
  margin-bottom: 24px;
}

.customer-overview-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.customer-charts-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.customer-charts-row--wide {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* Customer overview — unified panel shell (matches staff dashboard) */
.dashboard-panel-body.customer-overview-panel-body {
  padding: 14px;
  background: var(--trailer-detail-panel-bg);
}

.dashboard-panel-stats.customer-stat-grid {
  margin-bottom: 0;
}

.dashboard-panel-stats.customer-stat-grid .customer-stat-card {
  background: var(--ui-inset-bg);
  border-color: var(--border);
  box-shadow: none;
}

.dashboard-panel .customer-overview-grid {
  margin-bottom: 0;
  gap: 14px;
}

.dashboard-panel .customer-overview-main,
.dashboard-panel .customer-overview-side,
.dashboard-panel .customer-charts-row {
  gap: 14px;
}

.dashboard-panel .portal-chart-panel,
.dashboard-panel .customer-chart-panel,
.dashboard-panel .customer-info-card,
.dashboard-panel .customer-side-panel {
  background: var(--ui-inset-bg);
  border-color: var(--border);
  box-shadow: none;
}

/* Shared portal charts (staff + customer shells) */
.portal-insights-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.portal-insights-strip--compact {
  gap: 12px;
  margin-bottom: 16px;
}

.portal-chart-panel,
.customer-chart-panel {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.portal-chart-panel--compact {
  padding: 12px 14px;
}

.portal-chart-panel--compact .portal-chart-panel__title,
.portal-chart-panel--compact .customer-chart-panel__title {
  margin-bottom: 10px;
  font-size: 13px;
}

.portal-chart-panel__title,
.customer-chart-panel__title {
  margin: 0 0 14px;
  font-size: 14px;
  font-weight: 700;
}

.portal-chart-empty,
.customer-chart-empty {
  margin: 0;
  font-size: 13px;
}

.portal-bar-chart,
.customer-bar-chart {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.portal-bar-row,
.customer-bar-row {
  display: grid;
  grid-template-columns: minmax(0, 120px) 1fr auto;
  gap: 10px;
  align-items: center;
  font-size: 13px;
}

.portal-chart-panel--compact .portal-bar-row {
  grid-template-columns: minmax(0, 88px) 1fr auto;
  gap: 8px;
  font-size: 12px;
}

.portal-bar-row__label,
.customer-bar-row__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portal-bar-row__track,
.customer-bar-row__track {
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-muted) 12%, transparent);
  overflow: hidden;
}

.portal-chart-panel--compact .portal-bar-row__track {
  height: 6px;
}

.portal-bar-row__fill,
.customer-bar-row__fill {
  height: 100%;
  border-radius: inherit;
  background: var(--bar-color, var(--portal-accent, var(--primary)));
  transition: width 0.3s ease;
}

.portal-bar-row__value,
.customer-bar-row__value {
  font-weight: 700;
  min-width: 1.5em;
  text-align: right;
  color: var(--portal-chart-value-color, var(--text));
}

.portal-donut-wrap,
.customer-donut-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
}

.portal-donut-wrap--compact {
  gap: 12px;
}

.portal-donut,
.customer-donut {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
}

.portal-donut--compact {
  width: 84px;
  height: 84px;
}

.portal-donut__hole,
.customer-donut__hole {
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.portal-donut__value,
.customer-donut__value {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--portal-chart-value-color, var(--text));
}

.portal-donut--compact .portal-donut__value {
  font-size: 17px;
}

.portal-donut__caption,
.customer-donut__caption {
  font-size: 11px;
  color: var(--text-muted);
}

.portal-donut-legend,
.customer-donut-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  min-width: 140px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.portal-donut-legend li,
.customer-donut-legend li {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  gap: 8px;
  align-items: center;
  font-size: 13px;
}

.portal-donut-legend--compact li {
  font-size: 12px;
  gap: 6px;
}

.portal-donut-legend__swatch,
.customer-donut-legend__swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

.portal-donut-legend__label,
.customer-donut-legend__label {
  color: var(--text-secondary);
  font-weight: 500;
}

.portal-donut-legend__value,
.customer-donut-legend__value {
  font-weight: 700;
  color: var(--text);
}

.portal-metric-chips-panel .portal-metric-chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.portal-metric-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 76px;
  min-width: 0;
  padding: 12px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--portal-accent, var(--primary)) 18%, var(--border));
  background: color-mix(in srgb, var(--portal-accent, var(--primary)) 6%, var(--surface));
  text-align: center;
}

.portal-metric-chip__value {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--portal-chart-value-accent, var(--portal-accent-dark, var(--primary-dark)));
}

[data-theme="dark"] .portal-metric-chip__value {
  color: var(--portal-accent, var(--primary-light));
}

.portal-chart-panel--compact .portal-metric-chip__value {
  font-size: 18px;
}

.portal-chart-panel--compact .portal-metric-chip {
  min-height: 64px;
  padding: 8px 6px;
}

.portal-chart-panel--compact.portal-metric-chips-panel--grouped .portal-metric-chip-group--spaced {
  margin-top: 10px;
  padding-top: 10px;
}

.portal-metric-chip__label {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  max-width: 100%;
  color: var(--text-secondary);
}

.portal-metric-chip__hint {
  margin-top: 2px;
  font-size: 11px;
}

.portal-metric-chips-panel--grouped .portal-metric-chip-group--spaced {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.portal-metric-chip-group__label {
  display: block;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.customer-info-card,
.customer-side-panel {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.customer-info-card__title,
.customer-side-panel__title {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.customer-info-card__list {
  margin: 0;
  display: grid;
  gap: 8px;
}

.customer-info-card__list div {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 8px;
  font-size: 13px;
}

.customer-info-card__list dt {
  margin: 0;
  color: var(--text-muted);
  font-weight: 600;
}

.customer-info-card__list dd {
  margin: 0;
  color: var(--text);
  font-weight: 500;
}

.customer-info-card__note {
  margin: 12px 0 0;
  font-size: 12px;
}

.customer-overview-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.customer-activity-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.customer-activity-item {
  display: grid;
  gap: 2px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.customer-activity-item:hover {
  border-color: color-mix(in srgb, var(--portal-customer-accent) 40%, var(--border));
}

.customer-activity-item__primary {
  font-weight: 700;
  font-size: 13px;
}

.customer-activity-item__secondary {
  font-size: 12px;
  color: var(--text-muted);
}

.customer-activity-item__meta {
  margin-top: 4px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.customer-list-empty {
  margin: 0;
  font-size: 13px;
}

.customer-page-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.customer-fleet-layout,
.customer-wo-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
  gap: 20px;
  align-items: start;
}

.customer-fleet-layout__charts,
.customer-wo-layout__charts {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: calc(var(--header-height, 56px) + 16px);
}

.customer-fleet-row--off-yard {
  opacity: 0.85;
}

@media (max-width: 960px) {
  .customer-overview-grid,
  .customer-overview-lists,
  .customer-fleet-layout,
  .customer-wo-layout {
    grid-template-columns: 1fr;
  }

  .customer-fleet-layout__charts,
  .customer-wo-layout__charts {
    position: static;
  }
}

/* In-app portal shells — accent bar, nav, and content tokens match login */
.app-header--portal {
  position: sticky;
}

.app-header--portal::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--portal-header-accent, var(--portal-staff-accent));
  z-index: 1;
}

.portal-shell-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}

.portal-shell-badge--staff {
  color: var(--portal-staff-accent);
  background: color-mix(in srgb, var(--portal-staff-accent) 18%, transparent);
}

.portal-shell-badge--customer {
  color: var(--portal-customer-accent);
  background: color-mix(in srgb, var(--portal-customer-accent) 18%, transparent);
}

.app-header--staff-portal {
  --portal-header-accent: var(--portal-staff-accent);
  --nav-active-bg: var(--portal-staff-accent);
  --nav-active-shadow: 0 2px 10px color-mix(in srgb, var(--portal-staff-accent) 42%, transparent);
}

.app-header--customer-portal {
  --portal-header-accent: var(--portal-customer-accent);
  --nav-active-bg: var(--portal-customer-accent);
  --nav-active-shadow: 0 2px 10px color-mix(in srgb, var(--portal-customer-accent) 42%, transparent);
}

.app-header--customer-portal .brand-logo {
  display: none;
}

.app-shell--staff-portal,
.app-shell--customer-portal {
  position: relative;
  isolation: isolate;
  background: var(--bg);
  min-height: 100vh;
  min-height: 100dvh;
}

.app-shell--staff-portal {
  --portal-accent: var(--portal-staff-accent);
  --portal-accent-dark: var(--portal-staff-accent-dark);
}

html:not([data-theme="dark"]) .app-shell--staff-portal {
  --ui-section-bg: linear-gradient(90deg, #f8fafc 0%, #ffffff 100%);
  --ui-section-text: var(--text);
}

.app-shell--customer-portal {
  --portal-accent: var(--portal-customer-accent);
  --portal-accent-dark: var(--portal-customer-accent-dark);
  --primary: var(--portal-customer-accent);
  --primary-dark: var(--portal-customer-accent-dark);
  --primary-light: #14b8a6;
  --terminal-phosphor: rgba(13, 148, 136, 0.82);
  --terminal-phosphor-bright: rgba(45, 212, 191, 0.95);
  --terminal-phosphor-dim: rgba(15, 118, 110, 0.45);
  --terminal-border-mix: color-mix(in srgb, var(--border) 74%, var(--terminal-phosphor) 26%);
  --terminal-panel-glow: 0 0 32px rgba(13, 148, 136, 0.09), 0 0 52px rgba(45, 212, 191, 0.045);
  --terminal-title-rule: color-mix(in srgb, var(--portal-customer-accent) 38%, transparent);
  --terminal-row-hover: color-mix(in srgb, var(--portal-customer-accent) 7%, var(--ui-table-hover));
  --ui-table-header-bg: color-mix(in srgb, var(--portal-customer-accent) 10%, #f0fdfa);
  --trailer-detail-table-header-bg: color-mix(in srgb, var(--portal-customer-accent) 10%, #f0fdfa);
  --ui-table-hover: color-mix(in srgb, var(--portal-customer-accent) 7%, #ecfdf5);
  --ui-section-bg: linear-gradient(90deg, #f8fafc 0%, #ffffff 100%);
  --ui-section-text: var(--text);
  --ui-label-accent: #0f766e;
  --ui-accent-chip-bg: #ccfbf1;
  --ui-accent-chip-border: #5eead4;
  --ui-accent-chip-text: #134e4a;
  --ui-focus-ring: rgba(13, 148, 136, 0.15);
  --csg-blue-pale: #f0fdfa;
  --csg-blue-muted: #99f6e4;
  --shadow-blue: 0 4px 14px rgba(13, 148, 136, 0.25);
  --dashboard-stat-value-color: var(--portal-customer-accent-dark);
}

[data-theme="dark"] .app-shell--staff-portal,
[data-theme="dark"] .app-shell--customer-portal {
  --portal-chart-value-color: var(--text);
}

[data-theme="dark"] .app-shell--customer-portal {
  --ui-table-header-bg: color-mix(in srgb, var(--portal-customer-accent) 18%, var(--ui-panel-bg));
  --trailer-detail-table-header-bg: color-mix(in srgb, var(--portal-customer-accent) 18%, var(--ui-panel-bg));
  --ui-table-hover: color-mix(in srgb, var(--portal-customer-accent) 14%, var(--ui-panel-bg));
  --ui-section-bg: linear-gradient(90deg, rgba(13, 148, 136, 0.38) 0%, rgba(30, 41, 59, 0.98) 100%);
  --ui-section-text: #ccfbf1;
  --ui-label-accent: #2dd4bf;
  --ui-accent-chip-bg: rgba(13, 148, 136, 0.28);
  --ui-accent-chip-border: #2dd4bf;
  --ui-accent-chip-text: #ccfbf1;
  --ui-focus-ring: rgba(13, 148, 136, 0.28);
  --csg-blue-pale: rgba(13, 148, 136, 0.16);
  --csg-blue-muted: rgba(45, 212, 191, 0.28);
  --dashboard-stat-value-color: #2dd4bf;
}

/* Full-width header glow — radial fade softens left, right, and bottom edges */
.app-shell--staff-portal::after,
.app-shell--customer-portal::after {
  content: '';
  position: absolute;
  top: var(--header-height);
  left: 0;
  right: 0;
  height: min(240px, 32vh);
  pointer-events: none;
  z-index: 0;
}

.app-shell--staff-portal::after {
  background: radial-gradient(
    ellipse 90% 100% at 50% 0%,
    color-mix(in srgb, var(--portal-staff-accent) 4%, transparent) 0%,
    color-mix(in srgb, var(--portal-staff-accent) 1%, transparent) 42%,
    transparent 74%
  );
}

.app-shell--customer-portal::after {
  background: radial-gradient(
    ellipse 90% 100% at 50% 0%,
    color-mix(in srgb, var(--portal-customer-accent) 4.5%, transparent) 0%,
    color-mix(in srgb, var(--portal-customer-accent) 1.2%, transparent) 42%,
    transparent 74%
  );
}

.app-shell--staff-portal > *,
.app-shell--customer-portal > * {
  position: relative;
  z-index: 1;
}

.app-shell--staff-portal .main-content,
.app-shell--customer-portal .main-content {
  background: transparent;
}

.app-shell--customer-portal .customer-stat-card {
  color: var(--text);
  border-color: color-mix(in srgb, var(--portal-customer-accent) 18%, var(--border));
}

.app-shell--customer-portal .customer-stat-card__value {
  color: var(--portal-customer-accent);
}

.app-shell--customer-portal .customer-fleet-table .customer-portal-link,
.app-shell--customer-portal .customer-wo-table .customer-portal-link {
  color: #fff;
}

html[data-theme="light"] .app-shell--customer-portal .customer-fleet-table .customer-portal-link,
html[data-theme="light"] .app-shell--customer-portal .customer-wo-table .customer-portal-link {
  color: var(--text);
}

.app-shell--customer-portal .customer-fleet-table .customer-portal-link:hover,
.app-shell--customer-portal .customer-fleet-table .customer-portal-link:focus-visible,
.app-shell--customer-portal .customer-wo-table .customer-portal-link:hover,
.app-shell--customer-portal .customer-wo-table .customer-portal-link:focus-visible {
  color: color-mix(in srgb, #fff 82%, var(--portal-customer-accent));
}

html[data-theme="light"] .app-shell--customer-portal .customer-fleet-table .customer-portal-link:hover,
html[data-theme="light"] .app-shell--customer-portal .customer-fleet-table .customer-portal-link:focus-visible,
html[data-theme="light"] .app-shell--customer-portal .customer-wo-table .customer-portal-link:hover,
html[data-theme="light"] .app-shell--customer-portal .customer-wo-table .customer-portal-link:focus-visible {
  color: color-mix(in srgb, var(--portal-customer-accent) 78%, var(--text));
}

.app-shell--customer-portal .form-control:focus {
  border-color: color-mix(in srgb, var(--portal-customer-accent) 55%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--portal-customer-accent) 14%, transparent);
}

/* Customer portal — trailer & work order detail pages (teal accents; staff stays blue) */
.app-shell--customer-portal .trailer-detail-page,
.app-shell--customer-portal .work-order-detail-page {
  --primary: var(--portal-customer-accent);
  --primary-dark: var(--portal-customer-accent-dark);
  --primary-light: #14b8a6;
  --trailer-detail-section-bg: linear-gradient(90deg, #ecfdf5 0%, #F8FAFC 100%);
  --trailer-detail-section-text: #134E4A;
  --trailer-detail-label-color: var(--portal-customer-accent-dark);
  --trailer-detail-notes-filled-bg: #F0FDFA;
  --trailer-detail-notes-filled-border: #99F6E4;
  --trailer-detail-location-bg: #CCFBF1;
  --trailer-detail-location-border: #5EEAD4;
  --trailer-detail-location-text: #134E4A;
  --trailer-record-pill-info-bg: rgba(13, 148, 136, 0.12);
  --trailer-record-pill-info-text: #0F766E;
}

[data-theme="dark"] .app-shell--customer-portal .trailer-detail-page,
[data-theme="dark"] .app-shell--customer-portal .work-order-detail-page {
  --trailer-detail-section-bg: linear-gradient(90deg, rgba(13, 148, 136, 0.38) 0%, rgba(30, 41, 59, 0.98) 100%);
  --trailer-detail-section-text: #CCFBF1;
  --trailer-detail-label-color: #2DD4BF;
  --trailer-detail-notes-filled-bg: rgba(13, 148, 136, 0.12);
  --trailer-detail-notes-filled-border: rgba(45, 212, 191, 0.28);
  --trailer-detail-location-bg: rgba(13, 148, 136, 0.28);
  --trailer-detail-location-border: #2DD4BF;
  --trailer-detail-location-text: #CCFBF1;
}

.app-shell--customer-portal .badge-WO-Open,
.app-shell--customer-portal .badge-WO-priority-Normal,
.app-shell--customer-portal .badge-READY-ON-LEASE,
.app-shell--customer-portal .badge-RoL {
  background: rgba(13, 148, 136, 0.12);
  color: #0f766e;
}

[data-theme="dark"] .app-shell--customer-portal .badge-WO-Open,
[data-theme="dark"] .app-shell--customer-portal .badge-WO-priority-Normal,
[data-theme="dark"] .app-shell--customer-portal .badge-READY-ON-LEASE,
[data-theme="dark"] .app-shell--customer-portal .badge-RoL {
  background: rgba(13, 148, 136, 0.22);
  color: #5eead4;
}

.app-shell--customer-portal .trailer-detail-page .page-back-btn__icon,
.app-shell--customer-portal .work-order-detail-page .page-back-btn__icon {
  color: var(--portal-customer-accent);
}

.app-shell--customer-portal .trailer-detail-page .page-back-btn:hover,
.app-shell--customer-portal .trailer-detail-page .page-back-btn:focus-visible,
.app-shell--customer-portal .work-order-detail-page .page-back-btn:hover,
.app-shell--customer-portal .work-order-detail-page .page-back-btn:focus-visible {
  border-color: var(--portal-customer-accent);
  color: var(--portal-customer-accent);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--portal-customer-accent) 18%, transparent);
}

[data-theme="dark"] .app-shell--customer-portal .trailer-detail-page .page-back-btn:hover,
[data-theme="dark"] .app-shell--customer-portal .trailer-detail-page .page-back-btn:focus-visible,
[data-theme="dark"] .app-shell--customer-portal .work-order-detail-page .page-back-btn:hover,
[data-theme="dark"] .app-shell--customer-portal .work-order-detail-page .page-back-btn:focus-visible {
  background: rgba(13, 148, 136, 0.08);
  border-color: rgba(45, 212, 191, 0.45);
  color: #2DD4BF;
}

.app-shell--customer-portal .work-order-detail-page .detail-header-meta .badge-WO-Open,
.app-shell--customer-portal .work-order-detail-page .detail-header-meta .badge-WO-priority-Normal,
.app-shell--customer-portal .work-order-detail-page .wo-history-status .badge-WO-Open,
.app-shell--customer-portal .work-order-detail-page .wo-history-status .badge-WO-priority-Normal {
  background: rgba(13, 148, 136, 0.12);
  color: #0F766E;
}

[data-theme="dark"] .app-shell--customer-portal .work-order-detail-page .detail-header-meta .badge-WO-Open,
[data-theme="dark"] .app-shell--customer-portal .work-order-detail-page .detail-header-meta .badge-WO-priority-Normal,
[data-theme="dark"] .app-shell--customer-portal .work-order-detail-page .wo-history-status .badge-WO-Open,
[data-theme="dark"] .app-shell--customer-portal .work-order-detail-page .wo-history-status .badge-WO-priority-Normal {
  background: rgba(13, 148, 136, 0.22);
  color: #5EEAD4;
}

[data-theme="dark"] .app-shell--customer-portal .work-order-detail-page .spec-item--multiline {
  background: rgba(13, 148, 136, 0.08);
  border-color: rgba(45, 212, 191, 0.22);
}

[data-theme="dark"] .app-shell--customer-portal .work-order-detail-page .wo-history-notes {
  background: rgba(13, 148, 136, 0.1);
  border-color: rgba(45, 212, 191, 0.2);
}

.app-shell--staff-portal .page-header h1,
.app-shell--customer-portal .page-header h1 {
  color: var(--text);
  font-weight: 700;
}

.app-shell--staff-portal .module-stat-card__value,
.app-shell--staff-portal .stat-card-value {
  color: var(--portal-staff-accent);
}

.app-shell--staff-portal .dashboard-cmd--yard,
.app-shell--staff-portal .gate-btn-checkin,
.app-shell--staff-portal .dashboard-add-site-btn,
.app-shell--staff-portal .module-action-btn--primary,
.app-shell--staff-portal .table-action-btn--primary {
  --cmd-accent: var(--portal-staff-accent);
  --cmd-accent-soft: color-mix(in srgb, var(--portal-staff-accent) 36%, var(--ui-panel-border));
}

/* In-app terminal-lite accents — tie-in with login (staff + customer) */
.app-shell--staff-portal::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.18;
  background-image:
    linear-gradient(rgba(0, 145, 234, 0.024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 145, 234, 0.018) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse 88% 72% at 50% 42%, #000 18%, transparent 74%);
}

.app-shell--customer-portal::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.18;
  background-image:
    linear-gradient(rgba(13, 148, 136, 0.024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13, 148, 136, 0.018) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse 88% 72% at 50% 42%, #000 18%, transparent 74%);
}

.app-header--portal::before {
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--portal-header-accent) 82%, var(--terminal-phosphor-bright) 18%) 20%,
    var(--portal-header-accent) 50%,
    color-mix(in srgb, var(--portal-header-accent) 82%, var(--terminal-phosphor-bright) 18%) 80%,
    transparent 100%
  );
  box-shadow:
    0 0 20px var(--terminal-phosphor-dim),
    0 2px 14px color-mix(in srgb, var(--portal-header-accent) 28%, transparent);
}

.app-header--portal .brand-app::before {
  content: '# ';
  font-family: var(--terminal-mono);
  font-weight: 600;
  color: var(--terminal-phosphor);
  opacity: 0.55;
}

.app-header--portal .portal-shell-badge {
  font-family: var(--terminal-mono);
  letter-spacing: 0.07em;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 22%, transparent);
}

.app-shell--staff-portal .app-nav .nav-item:hover:not(.active):not(:disabled) {
  color: color-mix(in srgb, var(--nav-text) 88%, var(--terminal-phosphor-bright) 12%);
  text-shadow: 0 0 8px rgba(0, 145, 234, 0.22);
}

.app-shell--customer-portal .app-nav .nav-item:hover:not(.active):not(:disabled) {
  color: color-mix(in srgb, var(--nav-text) 88%, var(--terminal-phosphor-bright) 12%);
  text-shadow: 0 0 8px rgba(13, 148, 136, 0.22);
}

.app-shell--staff-portal::after {
  background:
    radial-gradient(
      ellipse 70% 80% at 12% 0%,
      rgba(0, 145, 234, 0.02) 0%,
      transparent 58%
    ),
    radial-gradient(
      ellipse 90% 100% at 50% 0%,
      color-mix(in srgb, var(--portal-staff-accent) 4%, transparent) 0%,
      color-mix(in srgb, var(--portal-staff-accent) 1%, transparent) 42%,
      transparent 74%
    );
}

.app-shell--customer-portal::after {
  background:
    radial-gradient(
      ellipse 70% 80% at 12% 0%,
      rgba(13, 148, 136, 0.02) 0%,
      transparent 58%
    ),
    radial-gradient(
      ellipse 90% 100% at 50% 0%,
      color-mix(in srgb, var(--portal-customer-accent) 4.5%, transparent) 0%,
      color-mix(in srgb, var(--portal-customer-accent) 1.2%, transparent) 42%,
      transparent 74%
    );
}

.app-header--portal {
  border-bottom: 1px solid color-mix(in srgb, var(--terminal-phosphor) 16%, var(--nav-border));
}

.app-shell--staff-portal .page-title {
  padding-bottom: 8px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--terminal-title-rule);
  text-shadow: 0 0 24px rgba(0, 145, 234, 0.1);
}

.app-shell--customer-portal .page-title {
  padding-bottom: 8px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--terminal-title-rule);
  text-shadow: 0 0 24px rgba(13, 148, 136, 0.1);
}

.app-shell--staff-portal .page-title + p.text-muted,
.app-shell--customer-portal .page-title + p.text-muted {
  font-size: 14px;
  line-height: 1.5;
}

.app-shell--staff-portal .page-title + p.text-muted::before,
.app-shell--customer-portal .page-title + p.text-muted::before {
  content: '// ';
  font-family: var(--terminal-mono);
  font-size: 0.92em;
  font-weight: 600;
  color: var(--terminal-phosphor);
  opacity: 0.42;
}

.app-shell--staff-portal .page-title::before,
.app-shell--customer-portal .page-title::before {
  content: '>';
  font-family: var(--terminal-mono);
  font-size: 0.52em;
  font-weight: 600;
  color: var(--terminal-phosphor);
  opacity: 0.72;
  margin-right: 0.35em;
  vertical-align: baseline;
  text-shadow: 0 0 12px var(--terminal-phosphor-dim);
}

.app-shell--staff-portal .dashboard-section-title,
.app-shell--customer-portal .dashboard-section-title {
  font-family: var(--terminal-mono);
  letter-spacing: 0.05em;
}

.app-shell--staff-portal .dashboard-section-title::before,
.app-shell--customer-portal .dashboard-section-title::before {
  content: '# ';
  font-weight: 600;
  color: var(--terminal-phosphor);
  opacity: 0.52;
}

.app-shell--staff-portal .section-title,
.app-shell--customer-portal .section-title {
  font-family: var(--terminal-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  border-left-width: 4px;
  border-left-color: color-mix(in srgb, var(--portal-accent) 62%, var(--terminal-phosphor) 38%);
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--terminal-phosphor) 12%, transparent) 0%,
    var(--ui-section-bg) 32%
  );
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--terminal-phosphor) 10%, transparent);
}

.app-shell--staff-portal .module-toolbar-title,
.app-shell--customer-portal .module-toolbar-title,
.app-shell--staff-portal .inventory-toolbar-title,
.app-shell--customer-portal .inventory-toolbar-title {
  font-family: var(--terminal-mono);
  letter-spacing: 0.03em;
}

.app-shell--staff-portal .module-toolbar-title::before,
.app-shell--customer-portal .module-toolbar-title::before,
.app-shell--staff-portal .inventory-toolbar-title::before,
.app-shell--customer-portal .inventory-toolbar-title::before {
  content: '>';
  font-weight: 600;
  color: var(--terminal-phosphor);
  opacity: 0.5;
  margin-right: 0.35em;
}

.app-shell--staff-portal .main-content .toolbar,
.app-shell--customer-portal .main-content .toolbar,
.app-shell--staff-portal .module-toolbar,
.app-shell--customer-portal .module-toolbar,
.app-shell--staff-portal .module-filters-panel,
.app-shell--customer-portal .module-filters-panel,
.app-shell--staff-portal .detail-header,
.app-shell--customer-portal .detail-header,
.app-shell--staff-portal .support-nav__shell,
.app-shell--customer-portal .support-nav__shell {
  border-color: var(--terminal-border-mix);
  box-shadow: var(--ui-panel-shadow), var(--terminal-panel-glow);
}

.app-shell--staff-portal .support-list-card,
.app-shell--customer-portal .support-list-card,
.app-shell--staff-portal .module-stat-card,
.app-shell--customer-portal .module-stat-card,
.app-shell--customer-portal .customer-stat-card,
.app-shell--staff-portal .dashboard-site-card,
.app-shell--customer-portal .dashboard-site-card,
.app-shell--staff-portal .yard-tm-stat-card,
.app-shell--customer-portal .yard-tm-stat-card {
  border-color: var(--terminal-border-mix);
  box-shadow: var(--ui-panel-shadow), var(--terminal-panel-glow);
}

.app-shell--staff-portal .support-list-card-head {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--terminal-phosphor) 8%, var(--ui-table-header-bg)) 0%,
    var(--ui-table-header-bg) 42%
  );
}

.app-shell--customer-portal .support-list-card-head {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--portal-customer-accent) 12%, #f0fdfa) 0%,
    color-mix(in srgb, var(--portal-customer-accent) 5%, var(--ui-panel-bg)) 100%
  );
  border-bottom-color: color-mix(in srgb, var(--portal-customer-accent) 14%, var(--trailer-detail-panel-border));
}

.app-shell--staff-portal .support-list-card-title::before,
.app-shell--customer-portal .support-list-card-title::before {
  content: '>';
  font-family: var(--terminal-mono);
  font-weight: 600;
  color: var(--terminal-phosphor);
  opacity: 0.48;
  margin-right: 0.35em;
}

.app-shell--staff-portal .yard-tm-stat-card__label,
.app-shell--customer-portal .yard-tm-stat-card__label {
  color: color-mix(in srgb, var(--text-muted) 82%, var(--terminal-phosphor) 18%);
}

.app-shell--staff-portal .yard-tm-stat-card__value,
.app-shell--customer-portal .yard-tm-stat-card__value,
.app-shell--staff-portal .yard-tm-stat-card__date,
.app-shell--customer-portal .yard-tm-stat-card__date {
  font-weight: 500;
  letter-spacing: 0.025em;
}

.app-shell--staff-portal .tabs,
.app-shell--customer-portal .tabs {
  border-color: var(--terminal-border-mix);
  box-shadow: var(--ui-panel-shadow), var(--terminal-panel-glow);
}

.app-shell--staff-portal .tab,
.app-shell--customer-portal .tab {
  font-family: var(--terminal-mono);
  letter-spacing: 0.02em;
}

.app-shell--staff-portal .tab.active,
.app-shell--customer-portal .tab.active {
  border-bottom-color: color-mix(in srgb, var(--portal-accent) 70%, var(--terminal-phosphor-bright) 30%);
  text-shadow: 0 0 10px var(--terminal-phosphor-dim);
}

.app-shell--staff-portal .page-back-btn,
.app-shell--customer-portal .page-back-btn {
  font-family: var(--terminal-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  border-color: var(--terminal-border-mix);
}

.app-shell--staff-portal .page-back-btn__label::before,
.app-shell--customer-portal .page-back-btn__label::before {
  content: '.. ';
  color: var(--terminal-phosphor);
  opacity: 0.45;
}

.app-shell--staff-portal .main-content .table thead th,
.app-shell--customer-portal .main-content .table thead th {
  font-family: var(--terminal-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.app-shell--staff-portal .form-control:focus,
.app-shell--staff-portal .form-select:focus {
  border-color: color-mix(in srgb, var(--portal-accent) 45%, var(--terminal-phosphor) 55%);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--terminal-phosphor) 14%, transparent),
    0 0 14px rgba(0, 145, 234, 0.12);
}

.app-shell--customer-portal .form-control:focus,
.app-shell--customer-portal .form-select:focus {
  border-color: color-mix(in srgb, var(--portal-customer-accent) 55%, var(--border));
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--portal-customer-accent) 14%, transparent),
    0 0 14px rgba(13, 148, 136, 0.12);
}

/* Dashboard jump picker — portal focus styles must not linger after the menu closes */
.app-shell--staff-portal .dashboard-jump-picker .custom-select:not(.is-open) > .custom-select-trigger.form-control:focus,
.app-shell--staff-portal .dashboard-jump-picker .custom-select:not(.is-open) > .custom-select-trigger.form-control:focus-visible,
.app-shell--customer-portal .dashboard-jump-picker .custom-select:not(.is-open) > .custom-select-trigger.form-control:focus,
.app-shell--customer-portal .dashboard-jump-picker .custom-select:not(.is-open) > .custom-select-trigger.form-control:focus-visible,
.app-shell--staff-portal .dashboard-jump-picker select.dashboard-jump-select.form-control:focus,
.app-shell--staff-portal .dashboard-jump-picker select.dashboard-jump-select.form-control:focus-visible,
.app-shell--customer-portal .dashboard-jump-picker select.dashboard-jump-select.form-control:focus,
.app-shell--customer-portal .dashboard-jump-picker select.dashboard-jump-select.form-control:focus-visible {
  border-color: var(--border-light);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.app-shell--staff-portal .dashboard-jump-picker .dashboard-select-wrap--jump-active .custom-select-trigger.form-control,
.app-shell--customer-portal .dashboard-jump-picker .dashboard-select-wrap--jump-active .custom-select-trigger.form-control {
  border-color: color-mix(in srgb, var(--portal-accent, var(--primary)) 45%, var(--terminal-phosphor, var(--primary)) 55%);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--terminal-phosphor, var(--primary)) 18%, transparent),
    0 0 16px rgba(0, 145, 234, 0.18);
}

[data-theme="dark"] .app-shell--staff-portal .dashboard-jump-picker .dashboard-select-wrap--jump:not(.dashboard-select-wrap--jump-active) .custom-select-trigger.form-control:focus,
[data-theme="dark"] .app-shell--staff-portal .dashboard-jump-picker .dashboard-select-wrap--jump:not(.dashboard-select-wrap--jump-active) .custom-select-trigger.form-control:focus-visible {
  border-color: rgba(148, 163, 184, 0.22);
  box-shadow: none;
}

[data-theme="dark"] .app-shell--staff-portal .dashboard-jump-picker .dashboard-select-wrap--jump-active .custom-select-trigger.form-control {
  border-color: rgba(56, 189, 248, 0.75);
  box-shadow:
    0 0 0 3px rgba(56, 189, 248, 0.28),
    0 0 18px rgba(56, 189, 248, 0.16);
}

.app-shell--staff-portal .modal-header,
.app-shell--customer-portal .modal-header {
  border-bottom-color: var(--terminal-border-mix);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--terminal-phosphor) 6%, var(--surface)) 0%,
    var(--surface) 100%
  );
}

.app-shell--staff-portal .modal-header h3::before,
.app-shell--customer-portal .modal-header h3::before {
  content: '>';
  font-family: var(--terminal-mono);
  font-weight: 600;
  color: var(--terminal-phosphor);
  opacity: 0.45;
  margin-right: 0.35em;
}

.app-shell--staff-portal .page-loading-text,
.app-shell--customer-portal .page-loading-text {
  font-family: var(--terminal-mono);
  letter-spacing: 0.03em;
}

.app-shell--staff-portal .page-loading-text::before,
.app-shell--customer-portal .page-loading-text::before {
  content: '> ';
  color: var(--terminal-phosphor);
  opacity: 0.55;
}

.app-shell--staff-portal .app-nav .nav-item,
.app-shell--customer-portal .app-nav .nav-item {
  font-family: var(--terminal-mono);
  letter-spacing: 0.02em;
}

.app-shell--staff-portal .app-nav-scroll-btn,
.app-shell--customer-portal .app-nav-scroll-btn {
  font-family: var(--terminal-mono);
  border-color: var(--terminal-border-mix);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--terminal-phosphor) 8%, transparent);
}

.app-shell--staff-portal .app-nav-scroll-btn:hover,
.app-shell--staff-portal .app-nav-scroll-btn:focus-visible,
.app-shell--customer-portal .app-nav-scroll-btn:hover,
.app-shell--customer-portal .app-nav-scroll-btn:focus-visible {
  color: color-mix(in srgb, var(--nav-text) 92%, var(--terminal-phosphor-bright) 8%);
  border-color: color-mix(in srgb, var(--terminal-phosphor) 28%, var(--nav-border) 72%);
  box-shadow: 0 0 10px var(--terminal-phosphor-dim);
}

.app-shell--staff-portal .app-nav .nav-item.active,
.app-shell--customer-portal .app-nav .nav-item.active {
  text-shadow: 0 0 14px var(--terminal-phosphor-dim);
  box-shadow:
    var(--nav-active-shadow),
    inset 0 0 0 1px color-mix(in srgb, var(--terminal-phosphor-bright) 24%, transparent);
}

.app-shell--staff-portal .trailers-panel,
.app-shell--customer-portal .trailers-panel,
.app-shell--staff-portal .work-orders-panel,
.app-shell--customer-portal .work-orders-panel,
.app-shell--staff-portal .inventory-panel,
.app-shell--customer-portal .inventory-panel,
.app-shell--staff-portal .dashboard-panel,
.app-shell--customer-portal .dashboard-panel,
.app-shell--staff-portal .gate-list-panel,
.app-shell--customer-portal .gate-list-panel {
  border-color: var(--terminal-border-mix);
  box-shadow: var(--shadow-md), var(--terminal-panel-glow);
}

.app-shell--staff-portal .dashboard-cmd-bar,
.app-shell--customer-portal .dashboard-cmd-bar,
.app-shell--staff-portal .gate-cmd-bar,
.app-shell--customer-portal .gate-cmd-bar {
  border-color: var(--terminal-border-mix);
  box-shadow: var(--ui-panel-shadow), var(--terminal-panel-glow);
}

.app-shell--staff-portal .dashboard-cmd:hover,
.app-shell--staff-portal .dashboard-cmd:focus-visible,
.app-shell--staff-portal .gate-cmd:hover,
.app-shell--staff-portal .gate-cmd:focus-visible {
  color: color-mix(in srgb, var(--text) 92%, var(--terminal-phosphor-bright) 8%);
  background: color-mix(in srgb, var(--terminal-phosphor) 10%, transparent);
  border-color: color-mix(in srgb, var(--terminal-phosphor) 22%, transparent);
  text-shadow: 0 0 10px var(--terminal-phosphor-dim);
}

.app-shell--customer-portal .dashboard-cmd__prompt,
.app-shell--customer-portal .gate-cmd__prompt {
  color: var(--portal-customer-accent);
  opacity: 0.88;
}

.app-shell--customer-portal .dashboard-cmd__count,
.app-shell--customer-portal .gate-cmd__count {
  background: color-mix(in srgb, var(--portal-customer-accent) 8%, transparent);
  border-color: color-mix(in srgb, var(--portal-customer-accent) 18%, transparent);
  color: color-mix(in srgb, var(--text-muted) 70%, var(--portal-customer-accent) 30%);
}

.app-shell--customer-portal .dashboard-cmd:hover,
.app-shell--customer-portal .dashboard-cmd:focus-visible,
.app-shell--customer-portal .gate-cmd:hover,
.app-shell--customer-portal .gate-cmd:focus-visible {
  color: color-mix(in srgb, var(--text) 88%, var(--portal-customer-accent) 12%);
  background: color-mix(in srgb, var(--portal-customer-accent) 10%, transparent);
  border-color: color-mix(in srgb, var(--portal-customer-accent) 24%, transparent);
  text-shadow: 0 0 10px color-mix(in srgb, var(--portal-customer-accent) 28%, transparent);
}

[data-theme="dark"] .app-shell--customer-portal .dashboard-cmd:hover,
[data-theme="dark"] .app-shell--customer-portal .dashboard-cmd:focus-visible,
[data-theme="dark"] .app-shell--customer-portal .gate-cmd:hover,
[data-theme="dark"] .app-shell--customer-portal .gate-cmd:focus-visible {
  background: color-mix(in srgb, var(--portal-customer-accent) 14%, transparent);
  border-color: color-mix(in srgb, var(--portal-customer-accent) 28%, transparent);
}

.app-shell--staff-portal .portal-chart-panel__title,
.app-shell--customer-portal .portal-chart-panel__title {
  font-family: var(--terminal-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.app-shell--staff-portal .portal-chart-panel__title::before,
.app-shell--customer-portal .portal-chart-panel__title::before {
  content: '# ';
  color: var(--terminal-phosphor);
  opacity: 0.48;
}

.app-shell--staff-portal .inventory-site-header,
.app-shell--customer-portal .inventory-site-header {
  font-family: var(--terminal-mono);
  letter-spacing: 0.04em;
  border-left: 3px solid color-mix(in srgb, var(--portal-accent) 52%, var(--terminal-phosphor) 48%);
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--terminal-phosphor) 11%, var(--inventory-site-header-bg)) 0%,
    var(--inventory-site-header-bg) 40%
  );
}

.app-shell--staff-portal .support-nav .support-nav__tab,
.app-shell--customer-portal .support-nav .support-nav__tab {
  font-family: var(--terminal-mono);
  letter-spacing: 0.03em;
}

.app-shell--staff-portal .support-nav .support-nav__tab.active,
.app-shell--customer-portal .support-nav .support-nav__tab.active {
  text-shadow: 0 0 10px var(--terminal-phosphor-dim);
}

.app-shell--staff-portal .support-nav__flyout-item,
.app-shell--customer-portal .support-nav__flyout-item {
  font-family: var(--terminal-mono);
  letter-spacing: 0.02em;
}

.app-shell--staff-portal .main-content .table thead th,
.app-shell--staff-portal .main-content .data-table thead th {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--terminal-phosphor) 9%, var(--ui-table-header-bg)) 0%,
    var(--ui-table-header-bg) 100%
  );
}

.app-shell--customer-portal .main-content .table thead th,
.app-shell--customer-portal .main-content .data-table thead th,
.app-shell--customer-portal .work-orders-panel-table .work-orders-table th,
.app-shell--customer-portal .customer-fleet-table thead th,
.app-shell--customer-portal .customer-wo-table thead th,
.app-shell--customer-portal .customer-trailer-quote-requests-table thead th {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--portal-customer-accent) 14%, #f0fdfa) 0%,
    color-mix(in srgb, var(--portal-customer-accent) 6%, var(--ui-panel-bg)) 100%
  );
  border-bottom-color: color-mix(in srgb, var(--portal-customer-accent) 16%, var(--ui-table-cell-border));
}

[data-theme="dark"] .app-shell--customer-portal .main-content .table thead th,
[data-theme="dark"] .app-shell--customer-portal .main-content .data-table thead th,
[data-theme="dark"] .app-shell--customer-portal .work-orders-panel-table .work-orders-table th,
[data-theme="dark"] .app-shell--customer-portal .customer-fleet-table thead th,
[data-theme="dark"] .app-shell--customer-portal .customer-wo-table thead th,
[data-theme="dark"] .app-shell--customer-portal .customer-trailer-quote-requests-table thead th {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--portal-customer-accent) 16%, var(--ui-panel-bg)) 0%,
    color-mix(in srgb, var(--portal-customer-accent) 7%, var(--ui-card-bg)) 100%
  );
  border-bottom-color: color-mix(in srgb, var(--portal-customer-accent) 20%, var(--ui-table-cell-border));
}

.app-shell--staff-portal .support-list-card .data-table tbody tr:hover,
.app-shell--customer-portal .support-list-card .data-table tbody tr:hover,
.app-shell--customer-portal .customer-portal-panel .data-table tbody tr:hover {
  background: var(--terminal-row-hover);
}

.app-shell--staff-portal .module-filter-summary,
.app-shell--customer-portal .module-filter-summary {
  font-family: var(--terminal-mono);
  font-size: 11px;
  letter-spacing: 0.03em;
  color: color-mix(in srgb, var(--text-muted) 88%, var(--terminal-phosphor) 12%);
}

[data-theme="dark"] .app-shell--staff-portal::before {
  opacity: 0.34;
  background-image:
    linear-gradient(rgba(0, 145, 234, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 145, 234, 0.045) 1px, transparent 1px);
}

[data-theme="dark"] .app-shell--customer-portal::before {
  opacity: 0.34;
  background-image:
    linear-gradient(rgba(13, 148, 136, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13, 148, 136, 0.045) 1px, transparent 1px);
}

[data-theme="dark"] .app-shell--staff-portal .page-title::before,
[data-theme="dark"] .app-shell--customer-portal .page-title::before,
[data-theme="dark"] .app-shell--staff-portal .dashboard-section-title::before,
[data-theme="dark"] .app-shell--customer-portal .dashboard-section-title::before,
[data-theme="dark"] .app-shell--staff-portal .module-toolbar-title::before,
[data-theme="dark"] .app-shell--customer-portal .module-toolbar-title::before,
[data-theme="dark"] .app-shell--staff-portal .inventory-toolbar-title::before,
[data-theme="dark"] .app-shell--customer-portal .inventory-toolbar-title::before,
[data-theme="dark"] .app-shell--staff-portal .support-list-card-title::before,
[data-theme="dark"] .app-shell--customer-portal .support-list-card-title::before,
[data-theme="dark"] .app-shell--staff-portal .modal-header h3::before,
[data-theme="dark"] .app-shell--customer-portal .modal-header h3::before {
  opacity: 0.68;
}

[data-theme="dark"] .app-shell--staff-portal .main-content .toolbar,
[data-theme="dark"] .app-shell--staff-portal .module-toolbar,
[data-theme="dark"] .app-shell--staff-portal .module-filters-panel,
[data-theme="dark"] .app-shell--staff-portal .detail-header,
[data-theme="dark"] .app-shell--staff-portal .support-nav__shell,
[data-theme="dark"] .app-shell--staff-portal .support-list-card,
[data-theme="dark"] .app-shell--staff-portal .module-stat-card,
[data-theme="dark"] .app-shell--staff-portal .yard-tm-stat-card,
[data-theme="dark"] .app-shell--staff-portal .dashboard-site-card,
[data-theme="dark"] .app-shell--staff-portal .tabs,
[data-theme="dark"] .app-shell--staff-portal .trailers-panel,
[data-theme="dark"] .app-shell--staff-portal .work-orders-panel,
[data-theme="dark"] .app-shell--staff-portal .inventory-panel,
[data-theme="dark"] .app-shell--staff-portal .dashboard-panel,
[data-theme="dark"] .app-shell--staff-portal .gate-list-panel {
  box-shadow: var(--ui-panel-shadow), 0 0 36px rgba(0, 145, 234, 0.11);
}

[data-theme="dark"] .app-shell--customer-portal .main-content .toolbar,
[data-theme="dark"] .app-shell--customer-portal .module-toolbar,
[data-theme="dark"] .app-shell--customer-portal .module-filters-panel,
[data-theme="dark"] .app-shell--customer-portal .detail-header,
[data-theme="dark"] .app-shell--customer-portal .support-nav__shell,
[data-theme="dark"] .app-shell--customer-portal .support-list-card,
[data-theme="dark"] .app-shell--customer-portal .module-stat-card,
[data-theme="dark"] .app-shell--customer-portal .customer-stat-card,
[data-theme="dark"] .app-shell--customer-portal .yard-tm-stat-card,
[data-theme="dark"] .app-shell--customer-portal .dashboard-site-card,
[data-theme="dark"] .app-shell--customer-portal .tabs,
[data-theme="dark"] .app-shell--customer-portal .trailers-panel,
[data-theme="dark"] .app-shell--customer-portal .work-orders-panel,
[data-theme="dark"] .app-shell--customer-portal .inventory-panel,
[data-theme="dark"] .app-shell--customer-portal .dashboard-panel,
[data-theme="dark"] .app-shell--customer-portal .gate-list-panel,
[data-theme="dark"] .app-shell--customer-portal .customer-portal-panel {
  box-shadow: var(--ui-panel-shadow), 0 0 36px rgba(13, 148, 136, 0.11);
}

[data-theme="dark"] .app-shell--staff-portal .page-title + p.text-muted::before,
[data-theme="dark"] .app-shell--customer-portal .page-title + p.text-muted::before,
[data-theme="dark"] .app-shell--staff-portal .portal-chart-panel__title::before,
[data-theme="dark"] .app-shell--customer-portal .portal-chart-panel__title::before {
  opacity: 0.58;
}

/* Light mode — softer portal backdrop and readable terminal-lite text */
html:not([data-theme="dark"]) .app-shell--staff-portal,
html:not([data-theme="dark"]) .app-shell--customer-portal {
  --terminal-phosphor: var(--portal-accent);
  --terminal-phosphor-bright: var(--portal-accent);
  --terminal-phosphor-dim: color-mix(in srgb, var(--portal-accent) 22%, transparent);
  --terminal-green: var(--terminal-green-muted);
  --terminal-panel-glow: none;
  --terminal-border-mix: var(--ui-panel-border);
  --terminal-title-rule: color-mix(in srgb, var(--border) 94%, var(--portal-accent) 6%);
  --terminal-row-hover: var(--ui-table-hover);
  --ui-muted-readable: #374151;
  --text-muted: #4b5563;
  --inventory-status-available-text: #1a7a3a;
  --ui-section-text: var(--text);
  --ui-label-accent: var(--text-secondary);
  --trailer-detail-label-color: var(--text-secondary);
  --trailer-detail-section-text: var(--text);
  --ui-filter-label: var(--text-secondary);
  --portal-chart-value-color: var(--text);
  --portal-chart-value-accent: var(--portal-accent-dark, var(--primary-dark));
  --portal-help-text-color: var(--text-secondary);
  --portal-help-heading-color: var(--text);
  --dashboard-stat-value-color: var(--portal-chart-value-accent);
  --dashboard-site-count-active-num: #047857;
  --dashboard-site-count-active-label: #059669;
}

html:not([data-theme="dark"]) .app-shell--customer-portal .customer-support {
  --terminal-phosphor: var(--portal-customer-accent);
  --terminal-phosphor-bright: var(--portal-customer-accent);
  --terminal-phosphor-dim: color-mix(in srgb, var(--portal-customer-accent) 22%, transparent);
  --terminal-title-rule: color-mix(in srgb, var(--border) 94%, var(--portal-customer-accent) 6%);
}

html:not([data-theme="dark"]) .app-shell--staff-portal::before,
html:not([data-theme="dark"]) .app-shell--customer-portal::before {
  opacity: 0.12;
  background-image:
    linear-gradient(rgba(0, 145, 234, 0.016) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 145, 234, 0.012) 1px, transparent 1px);
}

html:not([data-theme="dark"]) .app-shell--customer-portal::before {
  background-image:
    linear-gradient(rgba(13, 148, 136, 0.016) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13, 148, 136, 0.012) 1px, transparent 1px);
}

html:not([data-theme="dark"]) .app-shell--staff-portal::after,
html:not([data-theme="dark"]) .app-shell--customer-portal::after {
  height: min(132px, 18vh);
  opacity: 0.38;
}

html:not([data-theme="dark"]) .app-shell--staff-portal::after {
  background:
    radial-gradient(
      ellipse 70% 80% at 12% 0%,
      rgba(0, 145, 234, 0.012) 0%,
      transparent 58%
    ),
    radial-gradient(
      ellipse 90% 100% at 50% 0%,
      color-mix(in srgb, var(--portal-staff-accent) 2.5%, transparent) 0%,
      color-mix(in srgb, var(--portal-staff-accent) 0.6%, transparent) 42%,
      transparent 74%
    );
}

html:not([data-theme="dark"]) .app-shell--customer-portal::after {
  background:
    radial-gradient(
      ellipse 70% 80% at 12% 0%,
      rgba(13, 148, 136, 0.012) 0%,
      transparent 58%
    ),
    radial-gradient(
      ellipse 90% 100% at 50% 0%,
      color-mix(in srgb, var(--portal-customer-accent) 2.8%, transparent) 0%,
      color-mix(in srgb, var(--portal-customer-accent) 0.7%, transparent) 42%,
      transparent 74%
    );
}

html:not([data-theme="dark"]) .app-shell--staff-portal .page-title,
html:not([data-theme="dark"]) .app-shell--customer-portal .page-title {
  color: var(--text);
  text-shadow: none;
}

html:not([data-theme="dark"]) .app-shell--staff-portal .page-title::before,
html:not([data-theme="dark"]) .app-shell--customer-portal .page-title::before {
  color: var(--portal-accent);
  opacity: 0.82;
  text-shadow: none;
}

html:not([data-theme="dark"]) .app-shell--staff-portal .page-title + p.text-muted,
html:not([data-theme="dark"]) .app-shell--customer-portal .page-title + p.text-muted {
  color: var(--text-secondary);
  font-weight: 500;
}

html:not([data-theme="dark"]) .app-shell--staff-portal .page-title + p.text-muted::before,
html:not([data-theme="dark"]) .app-shell--customer-portal .page-title + p.text-muted::before {
  color: var(--portal-accent);
  opacity: 0.72;
}

html:not([data-theme="dark"]) .app-shell--staff-portal .portal-chart-panel__title,
html:not([data-theme="dark"]) .app-shell--customer-portal .portal-chart-panel__title,
html:not([data-theme="dark"]) .app-shell--staff-portal .customer-chart-panel__title,
html:not([data-theme="dark"]) .app-shell--customer-portal .customer-chart-panel__title {
  color: var(--text-secondary);
  font-weight: 700;
}

html:not([data-theme="dark"]) .app-shell--staff-portal .portal-chart-panel__title::before,
html:not([data-theme="dark"]) .app-shell--customer-portal .portal-chart-panel__title::before {
  color: var(--portal-accent);
  opacity: 0.68;
}

html:not([data-theme="dark"]) .app-shell--staff-portal .yard-tm-stat-card__label,
html:not([data-theme="dark"]) .app-shell--customer-portal .yard-tm-stat-card__label {
  color: var(--text-secondary);
  font-weight: 600;
}

html:not([data-theme="dark"]) .app-shell--staff-portal .yard-tm-stat-card__time,
html:not([data-theme="dark"]) .app-shell--customer-portal .yard-tm-stat-card__time,
html:not([data-theme="dark"]) .app-shell--staff-portal .yard-tm-stat-card__hint,
html:not([data-theme="dark"]) .app-shell--customer-portal .yard-tm-stat-card__hint {
  color: var(--ui-muted-readable);
}

html:not([data-theme="dark"]) .app-shell--staff-portal .module-filter-summary,
html:not([data-theme="dark"]) .app-shell--customer-portal .module-filter-summary {
  color: var(--ui-muted-readable);
}

html:not([data-theme="dark"]) .app-shell--staff-portal .dashboard-section-title,
html:not([data-theme="dark"]) .app-shell--customer-portal .dashboard-section-title {
  color: var(--text);
}

html:not([data-theme="dark"]) .app-shell--staff-portal .dashboard-section-title::before,
html:not([data-theme="dark"]) .app-shell--customer-portal .dashboard-section-title::before {
  color: var(--portal-accent);
  opacity: 0.72;
}

html:not([data-theme="dark"]) .app-shell--staff-portal .dashboard-cmd,
html:not([data-theme="dark"]) .app-shell--customer-portal .dashboard-cmd,
html:not([data-theme="dark"]) .app-shell--staff-portal .gate-cmd,
html:not([data-theme="dark"]) .app-shell--customer-portal .gate-cmd {
  color: var(--text-secondary);
  font-weight: 600;
}

html:not([data-theme="dark"]) .app-shell--staff-portal .dashboard-cmd__prompt,
html:not([data-theme="dark"]) .app-shell--customer-portal .dashboard-cmd__prompt,
html:not([data-theme="dark"]) .app-shell--staff-portal .gate-cmd__prompt,
html:not([data-theme="dark"]) .app-shell--customer-portal .gate-cmd__prompt {
  color: var(--portal-accent);
  opacity: 0.88;
}

html:not([data-theme="dark"]) .app-shell--staff-portal .dashboard-accent-cmd-bar .dashboard-cmd,
html:not([data-theme="dark"]) .app-shell--customer-portal .dashboard-accent-cmd-bar .dashboard-cmd {
  color: var(--text);
  font-weight: 700;
}

html:not([data-theme="dark"]) .app-shell--staff-portal .dashboard-accent-cmd-bar .dashboard-cmd__text,
html:not([data-theme="dark"]) .app-shell--customer-portal .dashboard-accent-cmd-bar .dashboard-cmd__text {
  color: var(--text);
}

html:not([data-theme="dark"]) .app-shell--staff-portal .portal-bar-row__label,
html:not([data-theme="dark"]) .app-shell--customer-portal .portal-bar-row__label,
html:not([data-theme="dark"]) .app-shell--staff-portal .customer-bar-row__label,
html:not([data-theme="dark"]) .app-shell--customer-portal .customer-bar-row__label {
  color: var(--text-secondary);
  font-weight: 500;
}

html:not([data-theme="dark"]) .app-shell--staff-portal .portal-donut-legend li,
html:not([data-theme="dark"]) .app-shell--customer-portal .portal-donut-legend li,
html:not([data-theme="dark"]) .app-shell--staff-portal .customer-donut-legend li,
html:not([data-theme="dark"]) .app-shell--customer-portal .customer-donut-legend li {
  color: var(--text-secondary);
}

html:not([data-theme="dark"]) .app-shell--staff-portal .portal-donut__caption,
html:not([data-theme="dark"]) .app-shell--customer-portal .portal-donut__caption,
html:not([data-theme="dark"]) .app-shell--staff-portal .customer-donut__caption,
html:not([data-theme="dark"]) .app-shell--customer-portal .customer-donut__caption {
  color: var(--ui-muted-readable);
  font-weight: 500;
}

html:not([data-theme="dark"]) .app-shell--staff-portal .section-title,
html:not([data-theme="dark"]) .app-shell--customer-portal .section-title {
  color: var(--text);
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--portal-accent) 5%, var(--ui-panel-bg)) 0%,
    var(--ui-panel-bg) 36%
  );
  box-shadow: none;
}

html:not([data-theme="dark"]) .app-shell--staff-portal .main-content .toolbar,
html:not([data-theme="dark"]) .app-shell--customer-portal .main-content .toolbar,
html:not([data-theme="dark"]) .app-shell--staff-portal .module-toolbar,
html:not([data-theme="dark"]) .app-shell--customer-portal .module-toolbar,
html:not([data-theme="dark"]) .app-shell--staff-portal .module-filters-panel,
html:not([data-theme="dark"]) .app-shell--customer-portal .module-filters-panel,
html:not([data-theme="dark"]) .app-shell--staff-portal .detail-header,
html:not([data-theme="dark"]) .app-shell--customer-portal .detail-header,
html:not([data-theme="dark"]) .app-shell--staff-portal .support-nav__shell,
html:not([data-theme="dark"]) .app-shell--customer-portal .support-nav__shell,
html:not([data-theme="dark"]) .app-shell--staff-portal .support-list-card,
html:not([data-theme="dark"]) .app-shell--customer-portal .support-list-card,
html:not([data-theme="dark"]) .app-shell--staff-portal .module-stat-card,
html:not([data-theme="dark"]) .app-shell--customer-portal .module-stat-card,
html:not([data-theme="dark"]) .app-shell--customer-portal .customer-stat-card,
html:not([data-theme="dark"]) .app-shell--staff-portal .dashboard-site-card,
html:not([data-theme="dark"]) .app-shell--customer-portal .dashboard-site-card,
html:not([data-theme="dark"]) .app-shell--staff-portal .yard-tm-stat-card,
html:not([data-theme="dark"]) .app-shell--customer-portal .yard-tm-stat-card,
html:not([data-theme="dark"]) .app-shell--staff-portal .tabs,
html:not([data-theme="dark"]) .app-shell--customer-portal .tabs,
html:not([data-theme="dark"]) .app-shell--staff-portal .trailers-panel,
html:not([data-theme="dark"]) .app-shell--customer-portal .trailers-panel,
html:not([data-theme="dark"]) .app-shell--staff-portal .work-orders-panel,
html:not([data-theme="dark"]) .app-shell--customer-portal .work-orders-panel,
html:not([data-theme="dark"]) .app-shell--staff-portal .inventory-panel,
html:not([data-theme="dark"]) .app-shell--customer-portal .inventory-panel,
html:not([data-theme="dark"]) .app-shell--staff-portal .dashboard-panel,
html:not([data-theme="dark"]) .app-shell--customer-portal .dashboard-panel,
html:not([data-theme="dark"]) .app-shell--staff-portal .gate-list-panel,
html:not([data-theme="dark"]) .app-shell--customer-portal .gate-list-panel,
html:not([data-theme="dark"]) .app-shell--customer-portal .customer-portal-panel {
  box-shadow: var(--ui-panel-shadow);
}

html:not([data-theme="dark"]) .app-shell--staff-portal .dashboard-cmd-bar,
html:not([data-theme="dark"]) .app-shell--customer-portal .dashboard-cmd-bar,
html:not([data-theme="dark"]) .app-shell--staff-portal .gate-cmd-bar,
html:not([data-theme="dark"]) .app-shell--customer-portal .gate-cmd-bar {
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.05);
}

html:not([data-theme="dark"]) .app-shell--staff-portal .dashboard-cmd:hover,
html:not([data-theme="dark"]) .app-shell--staff-portal .dashboard-cmd:focus-visible,
html:not([data-theme="dark"]) .app-shell--staff-portal .gate-cmd:hover,
html:not([data-theme="dark"]) .app-shell--staff-portal .gate-cmd:focus-visible {
  color: var(--text);
  text-shadow: none;
}

html:not([data-theme="dark"]) .app-shell--customer-portal .dashboard-cmd:hover,
html:not([data-theme="dark"]) .app-shell--customer-portal .dashboard-cmd:focus-visible,
html:not([data-theme="dark"]) .app-shell--customer-portal .gate-cmd:hover,
html:not([data-theme="dark"]) .app-shell--customer-portal .gate-cmd:focus-visible {
  color: var(--text);
  text-shadow: none;
}

html:not([data-theme="dark"]) .app-shell--staff-portal .module-toolbar-title,
html:not([data-theme="dark"]) .app-shell--customer-portal .module-toolbar-title,
html:not([data-theme="dark"]) .app-shell--staff-portal .inventory-toolbar-title,
html:not([data-theme="dark"]) .app-shell--customer-portal .inventory-toolbar-title {
  color: var(--text);
}

html:not([data-theme="dark"]) .app-shell--staff-portal .module-toolbar-title::before,
html:not([data-theme="dark"]) .app-shell--customer-portal .module-toolbar-title::before,
html:not([data-theme="dark"]) .app-shell--staff-portal .inventory-toolbar-title::before,
html:not([data-theme="dark"]) .app-shell--customer-portal .inventory-toolbar-title::before {
  color: var(--portal-accent);
  opacity: 0.72;
}

html:not([data-theme="dark"]) .app-shell--staff-portal .tab:not(.active),
html:not([data-theme="dark"]) .app-shell--customer-portal .tab:not(.active) {
  color: var(--text-secondary);
}

html:not([data-theme="dark"]) .app-shell--staff-portal .main-content .table thead th,
html:not([data-theme="dark"]) .app-shell--customer-portal .main-content .table thead th {
  background: var(--ui-table-header-bg);
}

html:not([data-theme="dark"]) .app-shell--customer-portal .main-content .table thead th,
html:not([data-theme="dark"]) .app-shell--customer-portal .main-content .data-table thead th,
html:not([data-theme="dark"]) .app-shell--customer-portal .work-orders-panel-table .work-orders-table th,
html:not([data-theme="dark"]) .app-shell--customer-portal .customer-fleet-table thead th,
html:not([data-theme="dark"]) .app-shell--customer-portal .customer-wo-table thead th,
html:not([data-theme="dark"]) .app-shell--customer-portal .customer-trailer-quote-requests-table thead th {
  background: var(--ui-table-header-bg);
  border-bottom-color: var(--ui-table-cell-border);
}

/* Customer portal — light mode text contrast (labels, charts, sidebar) */
html:not([data-theme="dark"]) .app-shell--customer-portal {
  --ui-label-accent: var(--text-secondary);
}

html:not([data-theme="dark"]) .app-shell--customer-portal .customer-stat-card__label {
  color: var(--text);
  font-weight: 600;
}

html:not([data-theme="dark"]) .app-shell--customer-portal .customer-stat-card__hint,
html:not([data-theme="dark"]) .app-shell--customer-portal .customer-info-card__note,
html:not([data-theme="dark"]) .app-shell--customer-portal .customer-list-empty {
  color: var(--ui-muted-readable);
  font-weight: 500;
}

html:not([data-theme="dark"]) .app-shell--customer-portal .customer-info-card__title,
html:not([data-theme="dark"]) .app-shell--customer-portal .customer-side-panel__title {
  color: var(--text);
  font-weight: 700;
}

html:not([data-theme="dark"]) .app-shell--customer-portal .customer-info-card__list dt {
  color: var(--text-secondary);
  font-weight: 600;
}

html:not([data-theme="dark"]) .app-shell--customer-portal .customer-info-card__list dd {
  color: var(--text);
  font-weight: 500;
}

html:not([data-theme="dark"]) .app-shell--customer-portal .portal-chart-panel__title,
html:not([data-theme="dark"]) .app-shell--customer-portal .customer-chart-panel__title {
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

html:not([data-theme="dark"]) .app-shell--customer-portal .portal-chart-panel__title::before,
html:not([data-theme="dark"]) .app-shell--customer-portal .customer-chart-panel__title::before {
  color: var(--portal-customer-accent);
  opacity: 0.82;
}

html:not([data-theme="dark"]) .app-shell--customer-portal .portal-bar-row__label,
html:not([data-theme="dark"]) .app-shell--customer-portal .customer-bar-row__label {
  color: var(--text);
  font-weight: 500;
}

html:not([data-theme="dark"]) .app-shell--customer-portal .portal-bar-row__value,
html:not([data-theme="dark"]) .app-shell--customer-portal .customer-bar-row__value {
  color: var(--text);
}

html:not([data-theme="dark"]) .app-shell--customer-portal .portal-donut-legend__label,
html:not([data-theme="dark"]) .app-shell--customer-portal .customer-donut-legend__label {
  color: var(--text);
  font-weight: 500;
}

html:not([data-theme="dark"]) .app-shell--customer-portal .portal-donut-legend__value,
html:not([data-theme="dark"]) .app-shell--customer-portal .customer-donut-legend__value {
  color: var(--text);
}

html:not([data-theme="dark"]) .app-shell--customer-portal .portal-donut__caption,
html:not([data-theme="dark"]) .app-shell--customer-portal .customer-donut__caption {
  color: var(--text-secondary);
  font-weight: 600;
}

html:not([data-theme="dark"]) .app-shell--customer-portal .portal-metric-chip-group__label {
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
}

html:not([data-theme="dark"]) .app-shell--customer-portal .portal-metric-chip__label {
  color: var(--text-secondary);
  font-weight: 600;
}

html:not([data-theme="dark"]) .app-shell--customer-portal .portal-metric-chip__hint {
  color: var(--ui-muted-readable);
}

html:not([data-theme="dark"]) .app-shell--customer-portal .customer-activity-item__primary {
  color: var(--text);
}

html:not([data-theme="dark"]) .app-shell--customer-portal .customer-activity-item__secondary,
html:not([data-theme="dark"]) .app-shell--customer-portal .customer-activity-item__meta .text-muted {
  color: var(--ui-muted-readable);
}

html:not([data-theme="dark"]) .app-shell--customer-portal .dashboard-cmd__count {
  color: var(--ui-muted-readable);
  background: var(--ui-inset-bg);
  border-color: var(--ui-panel-border);
}

html:not([data-theme="dark"]) .app-shell--customer-portal .badge-WO-Open,
html:not([data-theme="dark"]) .app-shell--customer-portal .badge-WO-priority-Normal,
html:not([data-theme="dark"]) .app-shell--customer-portal .badge-READY-ON-LEASE,
html:not([data-theme="dark"]) .app-shell--customer-portal .badge-RoL {
  background: #ccfbf1;
  color: #115e59;
}

html:not([data-theme="dark"]) .app-shell--customer-portal .text-muted {
  color: var(--ui-muted-readable);
}

html:not([data-theme="dark"]) .app-shell--customer-portal .customer-portal-lead,
html:not([data-theme="dark"]) .app-shell--customer-portal .page-title + p.text-muted {
  color: var(--text-secondary);
  font-weight: 500;
}

html:not([data-theme="dark"]) .app-shell--customer-portal .portal-chart-empty,
html:not([data-theme="dark"]) .app-shell--customer-portal .customer-chart-empty {
  color: var(--ui-muted-readable);
}

html:not([data-theme="dark"]) .app-shell--staff-portal .main-content .table tbody td,
html:not([data-theme="dark"]) .app-shell--staff-portal .main-content .data-table tbody td,
html:not([data-theme="dark"]) .app-shell--customer-portal .main-content .table tbody td,
html:not([data-theme="dark"]) .app-shell--customer-portal .main-content .data-table tbody td {
  color: var(--text);
}

html:not([data-theme="dark"]) .app-shell--staff-portal .main-content .table tbody td .text-muted,
html:not([data-theme="dark"]) .app-shell--staff-portal .main-content .data-table tbody td .text-muted,
html:not([data-theme="dark"]) .app-shell--customer-portal .main-content .table tbody td .text-muted,
html:not([data-theme="dark"]) .app-shell--customer-portal .main-content .data-table tbody td .text-muted {
  color: var(--ui-muted-readable);
}

/* Light mode — trailer & work order detail tables (both portals) */
html:not([data-theme="dark"]) .app-shell--staff-portal .trailer-detail-page .data-table td,
html:not([data-theme="dark"]) .app-shell--customer-portal .trailer-detail-page .data-table td,
html:not([data-theme="dark"]) .app-shell--staff-portal .work-order-detail-page .data-table td,
html:not([data-theme="dark"]) .app-shell--customer-portal .work-order-detail-page .data-table td {
  color: var(--text);
}

html:not([data-theme="dark"]) .app-shell--staff-portal .trailer-detail-page .customer-date-cell,
html:not([data-theme="dark"]) .app-shell--customer-portal .trailer-detail-page .customer-date-cell,
html:not([data-theme="dark"]) .app-shell--staff-portal .trailer-detail-page .customer-name-cell strong,
html:not([data-theme="dark"]) .app-shell--customer-portal .trailer-detail-page .customer-name-cell strong,
html:not([data-theme="dark"]) .app-shell--staff-portal .trailer-detail-page .trailer-record-text-cell,
html:not([data-theme="dark"]) .app-shell--customer-portal .trailer-detail-page .trailer-record-text-cell,
html:not([data-theme="dark"]) .app-shell--staff-portal .trailer-detail-page .trailer-record-name-cell strong,
html:not([data-theme="dark"]) .app-shell--customer-portal .trailer-detail-page .trailer-record-name-cell strong {
  color: var(--text);
  font-weight: 700;
}

html:not([data-theme="dark"]) .app-shell--staff-portal .trailer-detail-page .trailer-detail-date-cell,
html:not([data-theme="dark"]) .app-shell--customer-portal .trailer-detail-page .trailer-detail-date-cell {
  color: var(--text-secondary);
}

html:not([data-theme="dark"]) .app-shell--staff-portal .trailer-detail-page #customer-records-table tbody tr.customer-record-current,
html:not([data-theme="dark"]) .app-shell--staff-portal .trailer-detail-page .customer-records-table tbody tr.customer-record-current,
html:not([data-theme="dark"]) .app-shell--customer-portal .trailer-detail-page #customer-records-table tbody tr.customer-record-current,
html:not([data-theme="dark"]) .app-shell--customer-portal .trailer-detail-page .customer-records-table tbody tr.customer-record-current,
html:not([data-theme="dark"]) .app-shell--staff-portal .trailer-detail-page #customer-records-table tbody tr.customer-record-current td,
html:not([data-theme="dark"]) .app-shell--staff-portal .trailer-detail-page .customer-records-table tbody tr.customer-record-current td,
html:not([data-theme="dark"]) .app-shell--customer-portal .trailer-detail-page #customer-records-table tbody tr.customer-record-current td,
html:not([data-theme="dark"]) .app-shell--customer-portal .trailer-detail-page .customer-records-table tbody tr.customer-record-current td {
  color: var(--text);
}

html:not([data-theme="dark"]) .app-shell--staff-portal .trailer-detail-page .section-title,
html:not([data-theme="dark"]) .app-shell--customer-portal .trailer-detail-page .section-title {
  color: var(--text);
  font-family: inherit;
}

html:not([data-theme="dark"]) .app-shell--staff-portal .trailer-detail-page .customer-records-toolbar__title,
html:not([data-theme="dark"]) .app-shell--customer-portal .trailer-detail-page .customer-records-toolbar__title,
html:not([data-theme="dark"]) .app-shell--staff-portal .trailer-detail-page .trailer-detail-panel-toolbar__title,
html:not([data-theme="dark"]) .app-shell--customer-portal .trailer-detail-page .trailer-detail-panel-toolbar__title {
  color: var(--text);
}

html:not([data-theme="dark"]) .app-shell--staff-portal .trailer-detail-page .customer-records-toolbar__hint,
html:not([data-theme="dark"]) .app-shell--customer-portal .trailer-detail-page .customer-records-toolbar__hint,
html:not([data-theme="dark"]) .app-shell--staff-portal .trailer-detail-page .trailer-detail-panel-toolbar__hint,
html:not([data-theme="dark"]) .app-shell--customer-portal .trailer-detail-page .trailer-detail-panel-toolbar__hint {
  color: var(--ui-muted-readable);
}

html:not([data-theme="dark"]) .app-shell--staff-portal .trailer-detail-page .data-table th,
html:not([data-theme="dark"]) .app-shell--customer-portal .trailer-detail-page .data-table th,
html:not([data-theme="dark"]) .app-shell--staff-portal .work-order-detail-page .data-table th,
html:not([data-theme="dark"]) .app-shell--customer-portal .work-order-detail-page .data-table th {
  color: var(--text-secondary);
  font-family: inherit;
}

/* Light mode — portal typography sweep (both shells) */
html:not([data-theme="dark"]) .app-shell--staff-portal .main-content :is(h1, h2, h3, h4),
html:not([data-theme="dark"]) .app-shell--customer-portal .main-content :is(h1, h2, h3, h4) {
  color: var(--text);
}

html:not([data-theme="dark"]) .app-shell--staff-portal .page-header :is(h1, h2, h3),
html:not([data-theme="dark"]) .app-shell--customer-portal .page-header :is(h1, h2, h3),
html:not([data-theme="dark"]) .app-shell--customer-portal .customer-portal-page .page-header :is(h1, h2, h3) {
  color: var(--text);
}

html:not([data-theme="dark"]) .app-shell--staff-portal .text-muted,
html:not([data-theme="dark"]) .app-shell--customer-portal .text-muted,
html:not([data-theme="dark"]) .app-shell--customer-portal .customer-portal-subtitle,
html:not([data-theme="dark"]) .app-shell--customer-portal .wo-contact-section__intro,
html:not([data-theme="dark"]) .app-shell--customer-portal .customer-trailer-quote-callout__intro {
  color: var(--ui-muted-readable);
}

html:not([data-theme="dark"]) .app-shell--staff-portal .yard-tm-stat-card__label,
html:not([data-theme="dark"]) .app-shell--customer-portal .yard-tm-stat-card__label,
html:not([data-theme="dark"]) .app-shell--staff-portal .customer-stat-card__label,
html:not([data-theme="dark"]) .app-shell--customer-portal .customer-stat-card__label {
  color: var(--text);
  font-weight: 600;
}

html:not([data-theme="dark"]) .app-shell--staff-portal .yard-tm-stat-card__time,
html:not([data-theme="dark"]) .app-shell--customer-portal .yard-tm-stat-card__time,
html:not([data-theme="dark"]) .app-shell--staff-portal .yard-tm-stat-card__hint,
html:not([data-theme="dark"]) .app-shell--customer-portal .yard-tm-stat-card__hint,
html:not([data-theme="dark"]) .app-shell--staff-portal .customer-stat-card__hint,
html:not([data-theme="dark"]) .app-shell--customer-portal .customer-stat-card__hint {
  color: var(--ui-muted-readable);
}

html:not([data-theme="dark"]) .app-shell--staff-portal .portal-chart-panel__title,
html:not([data-theme="dark"]) .app-shell--customer-portal .portal-chart-panel__title,
html:not([data-theme="dark"]) .app-shell--staff-portal .customer-chart-panel__title,
html:not([data-theme="dark"]) .app-shell--customer-portal .customer-chart-panel__title {
  color: var(--text);
  font-family: inherit;
  font-weight: 700;
}

html:not([data-theme="dark"]) .app-shell--staff-portal .support-list-card-title,
html:not([data-theme="dark"]) .app-shell--customer-portal .support-list-card-title,
html:not([data-theme="dark"]) .app-shell--staff-portal .module-toolbar-title,
html:not([data-theme="dark"]) .app-shell--customer-portal .module-toolbar-title,
html:not([data-theme="dark"]) .app-shell--staff-portal .inventory-toolbar-title,
html:not([data-theme="dark"]) .app-shell--customer-portal .inventory-toolbar-title,
html:not([data-theme="dark"]) .app-shell--customer-portal .customer-form-section__title,
html:not([data-theme="dark"]) .app-shell--customer-portal .customer-trailer-quote-callout__title,
html:not([data-theme="dark"]) .app-shell--customer-portal .customer-info-card__title,
html:not([data-theme="dark"]) .app-shell--customer-portal .customer-side-panel__title,
html:not([data-theme="dark"]) .app-shell--customer-portal .customer-support__title {
  color: var(--text);
}

html:not([data-theme="dark"]) .app-shell--staff-portal .portal-bar-row__label,
html:not([data-theme="dark"]) .app-shell--customer-portal .portal-bar-row__label,
html:not([data-theme="dark"]) .app-shell--staff-portal .customer-bar-row__label,
html:not([data-theme="dark"]) .app-shell--customer-portal .customer-bar-row__label,
html:not([data-theme="dark"]) .app-shell--staff-portal .portal-donut-legend__label,
html:not([data-theme="dark"]) .app-shell--customer-portal .portal-donut-legend__label,
html:not([data-theme="dark"]) .app-shell--staff-portal .customer-donut-legend__label,
html:not([data-theme="dark"]) .app-shell--customer-portal .customer-donut-legend__label,
html:not([data-theme="dark"]) .app-shell--staff-portal .portal-metric-chip__label,
html:not([data-theme="dark"]) .app-shell--customer-portal .portal-metric-chip__label {
  color: var(--text-secondary);
  font-weight: 600;
}

html:not([data-theme="dark"]) .app-shell--staff-portal .portal-metric-chip-group__label,
html:not([data-theme="dark"]) .app-shell--customer-portal .portal-metric-chip-group__label {
  color: var(--text);
  font-weight: 700;
}

html:not([data-theme="dark"]) .app-shell--staff-portal .portal-donut__value,
html:not([data-theme="dark"]) .app-shell--customer-portal .portal-donut__value,
html:not([data-theme="dark"]) .app-shell--staff-portal .customer-donut__value,
html:not([data-theme="dark"]) .app-shell--customer-portal .customer-donut__value,
html:not([data-theme="dark"]) .app-shell--staff-portal .portal-bar-row__value,
html:not([data-theme="dark"]) .app-shell--customer-portal .portal-bar-row__value,
html:not([data-theme="dark"]) .app-shell--staff-portal .customer-bar-row__value,
html:not([data-theme="dark"]) .app-shell--customer-portal .customer-bar-row__value,
html:not([data-theme="dark"]) .app-shell--staff-portal .portal-metric-chip__value,
html:not([data-theme="dark"]) .app-shell--customer-portal .portal-metric-chip__value,
html:not([data-theme="dark"]) .app-shell--staff-portal .portal-donut-legend__value,
html:not([data-theme="dark"]) .app-shell--customer-portal .portal-donut-legend__value,
html:not([data-theme="dark"]) .app-shell--staff-portal .customer-donut-legend__value,
html:not([data-theme="dark"]) .app-shell--customer-portal .customer-donut-legend__value {
  color: var(--portal-chart-value-color, var(--text));
}

html:not([data-theme="dark"]) .app-shell--staff-portal .module-stat-card__value,
html:not([data-theme="dark"]) .app-shell--staff-portal .stat-card-value {
  color: var(--portal-staff-accent-dark, var(--primary-dark));
}

html:not([data-theme="dark"]) .app-shell--customer-portal .customer-stat-card__value {
  color: var(--portal-customer-accent-dark, var(--text));
}

html:not([data-theme="dark"]) .app-shell--staff-portal .yard-tm-stat-card__value,
html:not([data-theme="dark"]) .app-shell--customer-portal .yard-tm-stat-card__value,
html:not([data-theme="dark"]) .app-shell--staff-portal .inv-stat-card__value,
html:not([data-theme="dark"]) .app-shell--customer-portal .inv-stat-card__value {
  color: var(--text);
}

html:not([data-theme="dark"]) .app-shell--staff-portal .dashboard-panel-stats .dashboard-stat-card h3,
html:not([data-theme="dark"]) .app-shell--customer-portal .dashboard-panel-stats .dashboard-stat-card h3,
html:not([data-theme="dark"]) .app-shell--staff-portal .support-list-card .support-panel-stats .yard-tm-stat-card__value,
html:not([data-theme="dark"]) .app-shell--customer-portal .support-list-card .support-panel-stats .yard-tm-stat-card__value,
html:not([data-theme="dark"]) .app-shell--staff-portal .gate-list-panel-stats .gate-stat-card h3,
html:not([data-theme="dark"]) .app-shell--customer-portal .gate-list-panel-stats .gate-stat-card h3 {
  color: var(--portal-chart-value-accent, var(--primary-dark));
}

html:not([data-theme="dark"]) .app-shell--staff-portal .form-group label,
html:not([data-theme="dark"]) .app-shell--customer-portal .form-group label {
  color: var(--text);
}

html:not([data-theme="dark"]) .app-shell--staff-portal .form-control,
html:not([data-theme="dark"]) .app-shell--customer-portal .form-control,
html:not([data-theme="dark"]) .app-shell--staff-portal .form-select,
html:not([data-theme="dark"]) .app-shell--customer-portal .form-select {
  color: var(--text);
}

html:not([data-theme="dark"]) .app-shell--staff-portal .form-control::placeholder,
html:not([data-theme="dark"]) .app-shell--customer-portal .form-control::placeholder {
  color: #6b7280;
  opacity: 1;
}

html:not([data-theme="dark"]) .app-shell--staff-portal .profile-readonly-field,
html:not([data-theme="dark"]) .app-shell--customer-portal .profile-readonly-field {
  color: var(--text-secondary);
}

html:not([data-theme="dark"]) .app-shell--customer-portal .profile-readonly-field.wo-contact-readonly--missing {
  color: var(--ui-muted-readable);
}

html:not([data-theme="dark"]) .app-shell--staff-portal .module-filter-summary,
html:not([data-theme="dark"]) .app-shell--customer-portal .module-filter-summary {
  color: var(--text-secondary);
}

html:not([data-theme="dark"]) .app-shell--staff-portal .tab:not(.active),
html:not([data-theme="dark"]) .app-shell--customer-portal .tab:not(.active) {
  color: var(--text-secondary);
  font-weight: 600;
}

html:not([data-theme="dark"]) .app-shell--staff-portal .tab.active,
html:not([data-theme="dark"]) .app-shell--customer-portal .tab.active {
  color: var(--text);
  text-shadow: none;
}

html:not([data-theme="dark"]) .app-shell--staff-portal .dashboard-cmd:hover,
html:not([data-theme="dark"]) .app-shell--staff-portal .dashboard-cmd:focus-visible,
html:not([data-theme="dark"]) .app-shell--staff-portal .gate-cmd:hover,
html:not([data-theme="dark"]) .app-shell--staff-portal .gate-cmd:focus-visible,
html:not([data-theme="dark"]) .app-shell--customer-portal .dashboard-cmd:hover,
html:not([data-theme="dark"]) .app-shell--customer-portal .dashboard-cmd:focus-visible,
html:not([data-theme="dark"]) .app-shell--customer-portal .gate-cmd:hover,
html:not([data-theme="dark"]) .app-shell--customer-portal .gate-cmd:focus-visible {
  color: var(--text);
  text-shadow: none;
}

/* Light mode — developer, integrations, and support panel readability */
html:not([data-theme="dark"]) .app-shell--staff-portal .developer-access__panel-title,
html:not([data-theme="dark"]) .app-shell--customer-portal .developer-access__panel-title {
  color: var(--text);
  font-family: inherit;
}

html:not([data-theme="dark"]) .app-shell--staff-portal .developer-endpoint__label,
html:not([data-theme="dark"]) .app-shell--customer-portal .developer-endpoint__label,
html:not([data-theme="dark"]) .app-shell--staff-portal .developer-auth-hint__label,
html:not([data-theme="dark"]) .app-shell--customer-portal .developer-auth-hint__label {
  color: var(--text-secondary);
}

html:not([data-theme="dark"]) .app-shell--staff-portal .developer-access__subtitle,
html:not([data-theme="dark"]) .app-shell--customer-portal .developer-access__subtitle,
html:not([data-theme="dark"]) .app-shell--staff-portal .developer-auth-hint,
html:not([data-theme="dark"]) .app-shell--customer-portal .developer-auth-hint,
html:not([data-theme="dark"]) .app-shell--staff-portal .developer-keys-empty,
html:not([data-theme="dark"]) .app-shell--customer-portal .developer-keys-empty,
html:not([data-theme="dark"]) .app-shell--staff-portal .developer-key-row__meta,
html:not([data-theme="dark"]) .app-shell--customer-portal .developer-key-row__meta,
html:not([data-theme="dark"]) .app-shell--staff-portal .developer-key-row__notes,
html:not([data-theme="dark"]) .app-shell--customer-portal .developer-key-row__notes {
  color: var(--ui-muted-readable);
}

html:not([data-theme="dark"]) .app-shell--staff-portal .developer-webhook-events__list code,
html:not([data-theme="dark"]) .app-shell--customer-portal .developer-webhook-events__list code {
  color: var(--text-secondary);
  font-weight: 600;
  border-color: var(--border);
  background: var(--ui-inset-bg);
}

html:not([data-theme="dark"]) .app-shell--staff-portal .developer-webhook-events__list li > span,
html:not([data-theme="dark"]) .app-shell--customer-portal .developer-webhook-events__list li > span {
  color: var(--text);
  font-weight: 600;
}

html:not([data-theme="dark"]) .app-shell--staff-portal .developer-webhook-events__list small,
html:not([data-theme="dark"]) .app-shell--customer-portal .developer-webhook-events__list small {
  color: var(--ui-muted-readable);
}

html:not([data-theme="dark"]) .app-shell--staff-portal .integrations-hero__eyebrow,
html:not([data-theme="dark"]) .app-shell--customer-portal .integrations-hero__eyebrow {
  color: var(--text-secondary);
}

html:not([data-theme="dark"]) .app-shell--staff-portal .integrations-hero__text,
html:not([data-theme="dark"]) .app-shell--customer-portal .integrations-hero__text,
html:not([data-theme="dark"]) .app-shell--staff-portal .integrations-setup-wizard__copy p,
html:not([data-theme="dark"]) .app-shell--customer-portal .integrations-setup-wizard__copy p {
  color: var(--ui-muted-readable);
}

html:not([data-theme="dark"]) .app-shell--staff-portal .email-config-sender-note,
html:not([data-theme="dark"]) .app-shell--customer-portal .email-config-sender-note,
html:not([data-theme="dark"]) .app-shell--staff-portal .brand-config-intro,
html:not([data-theme="dark"]) .app-shell--customer-portal .brand-config-intro,
html:not([data-theme="dark"]) .app-shell--staff-portal .brand-config-section__desc,
html:not([data-theme="dark"]) .app-shell--customer-portal .brand-config-section__desc,
html:not([data-theme="dark"]) .app-shell--staff-portal .developer-keys-empty__lead,
html:not([data-theme="dark"]) .app-shell--customer-portal .developer-keys-empty__lead {
  color: var(--ui-muted-readable);
}

html:not([data-theme="dark"]) .app-shell--staff-portal .email-config-sender-note > strong,
html:not([data-theme="dark"]) .app-shell--customer-portal .email-config-sender-note > strong,
html:not([data-theme="dark"]) .app-shell--staff-portal .email-config-sender-note li strong,
html:not([data-theme="dark"]) .app-shell--customer-portal .email-config-sender-note li strong,
html:not([data-theme="dark"]) .app-shell--staff-portal .email-config-section-title,
html:not([data-theme="dark"]) .app-shell--customer-portal .email-config-section-title,
html:not([data-theme="dark"]) .app-shell--staff-portal .brand-config-section__title,
html:not([data-theme="dark"]) .app-shell--customer-portal .brand-config-section__title {
  color: var(--text);
}

html:not([data-theme="dark"]) .app-shell--staff-portal .info-box .info-row,
html:not([data-theme="dark"]) .app-shell--customer-portal .info-box .info-row {
  color: var(--ui-muted-readable);
}

html:not([data-theme="dark"]) .app-shell--staff-portal .integration-card__name-label,
html:not([data-theme="dark"]) .app-shell--customer-portal .integration-card__name-label,
html:not([data-theme="dark"]) .app-shell--staff-portal .integration-card__account,
html:not([data-theme="dark"]) .app-shell--customer-portal .integration-card__account {
  color: var(--text-secondary);
}

html:not([data-theme="dark"]) .app-shell--staff-portal .integration-card__vendor,
html:not([data-theme="dark"]) .app-shell--customer-portal .integration-card__vendor,
html:not([data-theme="dark"]) .app-shell--staff-portal .integration-card__auth-type,
html:not([data-theme="dark"]) .app-shell--customer-portal .integration-card__auth-type,
html:not([data-theme="dark"]) .app-shell--staff-portal .integration-card__capabilities li,
html:not([data-theme="dark"]) .app-shell--customer-portal .integration-card__capabilities li,
html:not([data-theme="dark"]) .app-shell--staff-portal .integration-card__meta-item,
html:not([data-theme="dark"]) .app-shell--customer-portal .integration-card__meta-item {
  color: var(--ui-muted-readable);
}

html:not([data-theme="dark"]) .app-shell--staff-portal .support-list-card-summary,
html:not([data-theme="dark"]) .app-shell--customer-portal .support-list-card-summary {
  color: var(--ui-muted-readable);
}

html:not([data-theme="dark"]) .app-shell--staff-portal .support-list-card-count,
html:not([data-theme="dark"]) .app-shell--customer-portal .support-list-card-count {
  color: var(--text-secondary);
  background: var(--ui-inset-bg);
  border-color: var(--border);
}

html:not([data-theme="dark"]) .app-shell--staff-portal .section-title,
html:not([data-theme="dark"]) .app-shell--customer-portal .section-title,
html:not([data-theme="dark"]) .app-shell--staff-portal .dashboard-section-title,
html:not([data-theme="dark"]) .app-shell--customer-portal .dashboard-section-title {
  font-family: inherit;
}

html:not([data-theme="dark"]) .app-shell--staff-portal .yard-tm-stat-card__label,
html:not([data-theme="dark"]) .app-shell--customer-portal .yard-tm-stat-card__label,
html:not([data-theme="dark"]) .app-shell--staff-portal .module-filter-summary,
html:not([data-theme="dark"]) .app-shell--customer-portal .module-filter-summary {
  font-family: inherit;
}

html:not([data-theme="dark"]) .app-shell--staff-portal .main-content code,
html:not([data-theme="dark"]) .app-shell--customer-portal .main-content code {
  color: var(--text-secondary);
}

html:not([data-theme="dark"]) .app-shell--staff-portal .main-content pre,
html:not([data-theme="dark"]) .app-shell--customer-portal .main-content pre {
  color: var(--text);
}

html:not([data-theme="dark"]) .app-shell--staff-portal .info-box h4,
html:not([data-theme="dark"]) .app-shell--customer-portal .info-box h4 {
  color: var(--text-secondary);
}

html:not([data-theme="dark"]) .app-shell--staff-portal .support-list-card-title::before,
html:not([data-theme="dark"]) .app-shell--customer-portal .support-list-card-title::before,
html:not([data-theme="dark"]) .app-shell--staff-portal .module-toolbar-title::before,
html:not([data-theme="dark"]) .app-shell--customer-portal .module-toolbar-title::before,
html:not([data-theme="dark"]) .app-shell--staff-portal .inventory-toolbar-title::before,
html:not([data-theme="dark"]) .app-shell--customer-portal .inventory-toolbar-title::before {
  opacity: 0.82;
}

html:not([data-theme="dark"]) .app-shell--staff-portal .portal-chart-panel__title::before,
html:not([data-theme="dark"]) .app-shell--customer-portal .portal-chart-panel__title::before,
html:not([data-theme="dark"]) .app-shell--staff-portal .customer-chart-panel__title::before,
html:not([data-theme="dark"]) .app-shell--customer-portal .customer-chart-panel__title::before {
  opacity: 0.82;
}

html:not([data-theme="dark"]) .app-shell--staff-portal .tab.active,
html:not([data-theme="dark"]) .app-shell--customer-portal .tab.active {
  text-shadow: none;
}

html:not([data-theme="dark"]) .app-shell--staff-portal .spec-item .label,
html:not([data-theme="dark"]) .app-shell--customer-portal .spec-item .label,
html:not([data-theme="dark"]) .app-shell--staff-portal .spec-label,
html:not([data-theme="dark"]) .app-shell--customer-portal .spec-label {
  color: var(--text-secondary);
}

html:not([data-theme="dark"]) .app-shell--staff-portal .spec-item .value,
html:not([data-theme="dark"]) .app-shell--customer-portal .spec-item .value,
html:not([data-theme="dark"]) .app-shell--staff-portal .spec-value,
html:not([data-theme="dark"]) .app-shell--customer-portal .spec-value {
  color: var(--text);
}

html:not([data-theme="dark"]) .app-shell--customer-portal .customer-support__subtitle,
html:not([data-theme="dark"]) .app-shell--customer-portal .customer-support .support-list-card-count {
  color: var(--text-secondary);
}

html:not([data-theme="dark"]) .app-shell--customer-portal .customer-support .support-list-card-count {
  background: var(--ui-inset-bg);
  border-color: var(--border);
}

/* Light mode — never use mint/phosphor greens as readable text on white or pale panels */
html:not([data-theme="dark"]) :is(
  .modal,
  .modal-body,
  .support-list-card,
  .gate-list-panel,
  .trailers-panel,
  .work-orders-panel,
  .inventory-panel,
  .dashboard-panel,
  .customer-portal-panel,
  .info-box,
  .alert
) :where(p, li, span, strong, em, label, h4, h5, h6):not(.badge):not([class*="badge"]) {
  text-shadow: none;
}

html:not([data-theme="dark"]) .alert-success {
  color: #166534;
}

html:not([data-theme="dark"]) :is(
  .spec-value--good,
  .yard-spot-edit__empty,
  .integration-card__test--ok,
  .integration-card__status--connected,
  .integration-card__meta-item--ok,
  .integration-oauth-step--done
) {
  color: #166534;
}

html:not([data-theme="dark"]) :is(
  .yard-status-badge--on,
  .notification-stat-chip--clear,
  .activity-badge-trailer,
  .trailer-dot-cell--ok
) {
  color: #065f46;
}

/* Customer company profiles (Support → Resources → Customers) */
.customer-profile-modal {
  max-width: 760px;
}

.customer-profile-modal__body {
  max-height: min(72vh, 720px);
  overflow-y: auto;
}

.customer-form-section {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.customer-form-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.customer-form-section__title {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.form-grid {
  display: grid;
  gap: 12px 14px;
}

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

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

.customer-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.customer-status-badge--active {
  background: color-mix(in srgb, var(--success, #198754) 16%, transparent);
  color: var(--success, #198754);
}

.customer-status-badge--inactive {
  background: color-mix(in srgb, var(--text-muted) 16%, transparent);
  color: var(--text-muted);
}

.customer-list-row--inactive {
  opacity: 0.72;
}

.customer-portal-feature-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: color-mix(in srgb, var(--portal-customer-accent, #2563eb) 14%, transparent);
  color: var(--portal-customer-accent, #2563eb);
  vertical-align: middle;
}

.email-config-section-divider {
  height: 1px;
  margin: 24px 0 20px;
  background: color-mix(in srgb, var(--border-color, #e2e8f0) 80%, transparent);
}

.email-config-section-title {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--portal-help-heading-color, var(--text));
}

.email-config-section-intro {
  margin: 0 0 16px;
}

.email-config-sender-note {
  margin: 0 0 18px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--primary) 6%, var(--surface));
  font-size: 13px;
  line-height: 1.55;
  color: var(--portal-help-text-color, var(--text-secondary));
}

.email-config-sender-note > strong {
  display: block;
  margin-bottom: 2px;
  color: var(--portal-help-heading-color, var(--text));
  font-weight: 700;
}

.email-config-sender-note ul {
  margin: 8px 0 0;
  padding-left: 20px;
  color: inherit;
}

.email-config-sender-note li {
  color: inherit;
}

.email-config-sender-note li strong {
  color: var(--portal-help-heading-color, var(--text));
  font-weight: 600;
}

.email-config-sender-note li + li {
  margin-top: 6px;
}

.email-config-sender-note__hint {
  margin: 10px 0 0;
  font-size: 12px;
}

.wo-account-section {
  margin-top: 4px;
}

.wo-contact-section {
  margin-top: 4px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.wo-contact-section__intro {
  margin: 0 0 12px;
}

.wo-contact-readonly {
  min-height: 38px;
  display: flex;
  align-items: center;
}

.wo-contact-readonly--missing {
  color: var(--text-muted);
  font-style: italic;
}

/* Resources tables — min-widths prevent header overlap; col-fill absorbs extra slack */
.support-list-card .customers-table col.col-fill-col,
.support-list-card .vendors-table col.col-fill-col {
  width: 100%;
}

.support-list-card .customers-table th:not(.col-fill):not(.col-actions),
.support-list-card .vendors-table th:not(.col-fill):not(.col-actions) {
  white-space: normal;
  line-height: 1.35;
  vertical-align: bottom;
}

.customers-table th.col-name,
.customers-table td.customer-list-name {
  min-width: 150px;
}

.customers-table th.col-company,
.customers-table td.customer-list-company {
  min-width: 240px;
}

.vendors-table th.col-id,
.vendors-table td.customer-list-name {
  min-width: 92px;
}

.vendors-table th.col-name,
.vendors-table td.customer-list-company {
  min-width: 240px;
}

.customers-table th.col-contact,
.customers-table td.customer-list-contact,
.vendors-table th.col-contact,
.vendors-table td.customer-list-contact {
  min-width: 155px;
}

.customers-table th.col-location,
.customers-table td.customer-list-location,
.vendors-table th.col-location,
.vendors-table td.customer-list-location {
  min-width: 120px;
}

.customers-table th.col-manager,
.customers-table td.customer-list-manager,
.vendors-table th.col-manager,
.vendors-table td.customer-list-manager {
  min-width: 175px;
}

.customers-table th.col-status,
.customers-table td.customer-list-status,
.vendors-table th.col-status,
.vendors-table td.customer-list-status {
  min-width: 240px;
}

.support-list-card .customers-table tbody td,
.support-list-card .vendors-table tbody td {
  vertical-align: middle;
}

.customers-table th.col-added,
.customers-table td.col-added,
.vendors-table th.col-added,
.vendors-table td.col-added {
  min-width: 100px;
}

.customers-table td.customer-list-name,
.customers-table td.customer-list-company,
.vendors-table td.customer-list-name,
.vendors-table td.customer-list-company {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.customers-table .customer-list-status-badges {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 5px;
  align-items: center;
  max-width: 100%;
}

.customers-table .customer-list-status .customer-status-badge,
.customers-table .customer-list-status .customer-portal-feature-badge {
  flex-shrink: 0;
  margin-left: 0;
  white-space: nowrap;
}

.customers-table .customer-list-status .customer-portal-feature-badge {
  padding: 2px 7px;
  font-size: 10px;
  letter-spacing: 0.02em;
}

.customers-table .customer-list-status .customer-status-badge {
  padding: 2px 9px;
  font-size: 11px;
}

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

  .customers-table .col-added,
  .customers-table .customer-list-manager {
    display: none;
  }
}

.customer-portal-permission-option {
  display: block;
  margin-top: 12px;
}

.customer-portal-features-readonly {
  margin: 0 0 8px;
  display: grid;
  gap: 8px;
}

.customer-portal-features-readonly__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: baseline;
}

.customer-portal-features-readonly__row dt {
  margin: 0;
  font-weight: 500;
}

.customer-portal-features-readonly__row dd {
  margin: 0;
  color: var(--text-muted, #64748b);
}

.customer-trailer-quotes-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
  gap: 24px;
  align-items: start;
}

.customer-trailer-quotes-main {
  background: var(--surface, #fff);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
}

.customer-trailer-quote-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.customer-trailer-quote-lines {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.customer-trailer-quote-lines-footer {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.customer-trailer-quote-line {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--portal-customer-accent, #0d9488) 5%, var(--surface, #fff));
}

.app-shell--customer-portal .customer-trailer-quote-line .form-group label {
  color: var(--text);
}

[data-theme="dark"] .app-shell--customer-portal .customer-trailer-quote-line {
  background: color-mix(in srgb, var(--portal-customer-accent) 12%, var(--ui-panel-bg, var(--surface)));
  border-color: color-mix(in srgb, var(--border) 78%, var(--portal-customer-accent) 22%);
}

[data-theme="dark"] .app-shell--customer-portal .customer-trailer-quote-line .form-group label {
  color: var(--ui-section-text, var(--text));
}

[data-theme="dark"] .app-shell--customer-portal .customer-trailer-quote-line__label {
  color: var(--ui-label-accent, var(--text-muted));
}

[data-theme="dark"] .app-shell--customer-portal .customer-trailer-quote-type-hint {
  color: var(--text-muted);
}

.customer-trailer-quote-line__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.customer-trailer-quote-line__label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-muted, #64748b);
}

.customer-trailer-quote-type-hint {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.45;
}

.customer-trailer-quote-requests-link {
  flex-shrink: 0;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.customer-trailer-quote-requests-link__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  background: color-mix(in srgb, var(--portal-customer-accent, #0d9488) 18%, transparent);
  color: var(--text);
}

.customer-trailer-quote-requests-page .page-back-btn {
  margin-bottom: 12px;
}

.customer-trailer-quote-requests-panel {
  max-width: none;
}

.customer-trailer-quote-request-stats {
  margin-bottom: 18px;
}

.customer-trailer-quote-requests-list-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 16px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.customer-trailer-quote-requests-list-title {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}

.customer-trailer-quote-requests-list-summary {
  margin: 0;
  font-size: 13px;
  max-width: 52ch;
}

.customer-trailer-quote-requests-list-count {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: color-mix(in srgb, var(--portal-customer-accent) 14%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--portal-customer-accent) 22%, var(--border));
  color: var(--text);
}

.customer-trailer-quote-requests-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 4px 4px;
}

.customer-trailer-quote-requests-empty__title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}

.customer-trailer-quote-requests-table .col-tq-number {
  white-space: nowrap;
}

.customer-trailer-quote-form-panel {
  padding: 18px 20px 20px;
}

.customer-trailer-quote-form-panel .customer-form-section:first-child {
  padding-top: 0;
}

@media (max-width: 720px) {
  .customer-trailer-quote-requests-link {
    align-self: stretch;
    justify-content: center;
  }
}

.customer-trailer-quote-success {
  margin-bottom: 16px;
}

.trailer-quotes-module-root {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.trailer-quotes-staff-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.trailer-quotes-staff-layout.has-detail {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 400px);
}

.trailer-quotes-staff-detail {
  position: sticky;
  top: 12px;
}

.trailer-quote-staff-toolbar {
  margin-bottom: 16px;
}

.trailer-quote-staff-filter {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 160px;
}

.trailer-quote-staff-filter__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted, #64748b);
}

.trailer-quote-staff-table tr.is-selected {
  background: color-mix(in srgb, var(--accent, #2563eb) 10%, transparent);
}

.trailer-quote-row--unassigned td {
  background: color-mix(in srgb, var(--accent, #2563eb) 4%, var(--ui-panel-bg));
}

.trailer-quote-assigned-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: color-mix(in srgb, var(--text-muted) 12%, var(--ui-panel-bg));
  border: 1px solid var(--ui-panel-border);
  color: var(--text);
}

.trailer-quote-assigned-tag--you {
  background: color-mix(in srgb, var(--accent, #2563eb) 16%, var(--ui-panel-bg));
  border-color: color-mix(in srgb, var(--accent, #2563eb) 28%, var(--ui-panel-border));
}

.trailer-quote-assigned-tag--open {
  color: var(--text-muted);
  font-weight: 500;
  border-style: dashed;
}

.trailer-quote-staff-table .col-tq-actions {
  width: 1%;
  white-space: nowrap;
}

.trailer-quote-row-actions {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.trailer-quote-row-actions .table-action-btn {
  flex-shrink: 0;
}

.trailer-quote-claim-btn {
  min-height: 32px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: none;
}

.trailer-quote-take-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  margin: 20px 0 16px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--ui-panel-border);
  background: color-mix(in srgb, var(--accent, #2563eb) 6%, var(--ui-panel-bg));
}

.trailer-quote-take-banner--owned {
  background: color-mix(in srgb, var(--accent, #2563eb) 10%, var(--ui-panel-bg));
}

.trailer-quote-take-banner--taken {
  background: color-mix(in srgb, var(--text-muted) 8%, var(--ui-panel-bg));
}

.trailer-quote-take-banner__copy strong {
  display: block;
  margin-bottom: 4px;
}

.trailer-quote-detail-panel {
  margin-top: 0;
}

@media (max-width: 960px) {
  .trailer-quotes-staff-layout.has-detail {
    grid-template-columns: minmax(0, 1fr);
  }

  .trailer-quotes-staff-detail {
    position: static;
  }
}

.trailer-quote-detail-panel-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--trailer-detail-panel-border, var(--ui-panel-border));
  background: var(--ui-table-header-bg);
}

.trailer-quote-detail-panel-head .trailer-quote-detail-header {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
}

.trailer-quote-detail-dismiss {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: -4px -4px 0 0;
  padding: 0;
  border: 1px solid var(--ui-panel-border);
  border-radius: var(--radius-sm);
  background: var(--ui-panel-bg);
  color: var(--text-muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.trailer-quote-detail-dismiss:hover,
.trailer-quote-detail-dismiss:focus-visible {
  background: var(--border);
  color: var(--text);
  border-color: color-mix(in srgb, var(--text-muted) 35%, var(--ui-panel-border));
}

.trailer-quote-detail-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.trailer-quote-detail-header__copy {
  min-width: 0;
  flex: 1 1 160px;
}

.trailer-quote-detail-status {
  flex-shrink: 0;
  align-self: flex-start;
}

.trailer-quote-detail-title {
  margin: 0 0 4px;
  font-size: 18px;
}

.trailer-quote-detail-sub {
  margin: 0;
}

.trailer-quote-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px 20px;
  margin: 0 0 16px;
}

.trailer-quote-detail-row dt {
  margin: 0 0 2px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted, #64748b);
}

.trailer-quote-detail-row dd {
  margin: 0;
  font-size: 14px;
}

.trailer-quote-detail-section {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.trailer-quote-detail-section h4 {
  margin: 0 0 8px;
  font-size: 14px;
}

.trailer-quote-detail-lines {
  margin: 0 0 4px;
  padding-left: 1.25rem;
  line-height: 1.55;
}

.trailer-quote-detail-notes {
  margin: 0;
  white-space: pre-wrap;
  line-height: 1.55;
}

.trailer-quote-detail-manage {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.photo-gallery-item--read-only .photo-gallery-item__thumb {
  margin-left: 0;
}

.customer-trailer-quote-callout {
  background: color-mix(in srgb, var(--portal-customer-accent, #2563eb) 8%, var(--surface, #fff));
  border: 1px solid color-mix(in srgb, var(--portal-customer-accent, #2563eb) 24%, var(--border));
  border-radius: 12px;
  padding: 20px;
}

.customer-trailer-quote-callout__title {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}

.customer-trailer-quote-callout__intro {
  margin: 0;
  line-height: 1.5;
}

.customer-trailer-quote-callout__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}

.customer-trailer-quote-callout__action {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.15s ease;
}

.customer-trailer-quote-callout__action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  flex-shrink: 0;
}

.customer-trailer-quote-callout__action-icon svg {
  width: 18px;
  height: 18px;
}

.customer-trailer-quote-callout__action-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}

.customer-trailer-quote-callout__action-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.85;
}

.customer-trailer-quote-callout__action-value {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  word-break: break-word;
}

.customer-trailer-quote-callout__action--primary {
  background: var(--portal-customer-accent, #0d9488);
  border: 1px solid var(--portal-customer-accent-dark, #0f766e);
  color: #fff;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--portal-customer-accent, #0d9488) 28%, transparent);
}

.customer-trailer-quote-callout__action--primary .customer-trailer-quote-callout__action-icon {
  background: color-mix(in srgb, #fff 18%, transparent);
  color: #fff;
}

.customer-trailer-quote-callout__action--primary .customer-trailer-quote-callout__action-label,
.customer-trailer-quote-callout__action--primary .customer-trailer-quote-callout__action-value {
  color: #fff;
}

.customer-trailer-quote-callout__action--primary:hover,
.customer-trailer-quote-callout__action--primary:focus-visible {
  background: var(--portal-customer-accent-dark, #0f766e);
  border-color: #0b635c;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--portal-customer-accent, #0d9488) 36%, transparent);
  outline: none;
}

.customer-trailer-quote-callout__action--primary:hover .customer-trailer-quote-callout__action-icon,
.customer-trailer-quote-callout__action--primary:focus-visible .customer-trailer-quote-callout__action-icon,
.customer-trailer-quote-callout__action--primary:hover .customer-trailer-quote-callout__action-label,
.customer-trailer-quote-callout__action--primary:focus-visible .customer-trailer-quote-callout__action-label,
.customer-trailer-quote-callout__action--primary:hover .customer-trailer-quote-callout__action-value,
.customer-trailer-quote-callout__action--primary:focus-visible .customer-trailer-quote-callout__action-value {
  color: #fff;
}

.customer-trailer-quote-callout__action--primary:hover .customer-trailer-quote-callout__action-icon,
.customer-trailer-quote-callout__action--primary:focus-visible .customer-trailer-quote-callout__action-icon {
  background: color-mix(in srgb, #fff 24%, transparent);
}

.customer-trailer-quote-callout__action--secondary {
  background: var(--surface, #fff);
  border: 1px solid color-mix(in srgb, var(--portal-customer-accent, #2563eb) 30%, var(--border));
  color: var(--text);
}

.customer-trailer-quote-callout__action--secondary .customer-trailer-quote-callout__action-icon {
  background: color-mix(in srgb, var(--portal-customer-accent, #2563eb) 12%, transparent);
  color: var(--portal-customer-accent, #2563eb);
}

.customer-trailer-quote-callout__action--secondary .customer-trailer-quote-callout__action-value {
  color: var(--portal-customer-accent, #2563eb);
}

.customer-trailer-quote-callout__action--secondary:hover,
.customer-trailer-quote-callout__action--secondary:focus-visible {
  background: color-mix(in srgb, var(--portal-customer-accent, #0d9488) 8%, var(--surface, #fff));
  border-color: var(--portal-customer-accent, #0d9488);
  color: var(--text);
  transform: translateY(-1px);
  outline: none;
}

.customer-trailer-quote-callout__action--secondary:hover .customer-trailer-quote-callout__action-value,
.customer-trailer-quote-callout__action--secondary:focus-visible .customer-trailer-quote-callout__action-value {
  color: var(--portal-customer-accent, #0d9488);
}

@media (max-width: 900px) {
  .customer-trailer-quotes-layout {
    grid-template-columns: 1fr;
  }
}

.customer-portal-locked-panel {
  max-width: 640px;
  margin-top: 8px;
  padding: 24px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--portal-customer-accent, #2563eb) 22%, var(--border));
  background: color-mix(in srgb, var(--portal-customer-accent, #2563eb) 6%, var(--surface, #fff));
}

.customer-portal-locked-panel__title {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}

.customer-portal-locked-panel p {
  margin: 0 0 10px;
  line-height: 1.55;
}

.support-nav__tab--locked:not(.active) {
  opacity: 0.72;
}

.support-nav__tab--locked.active {
  opacity: 0.88;
}

.customer-portal-disabled-action-hint .module-action-btn--disabled,
.customer-portal-disabled-action-hint .table-action-btn--disabled,
.customer-portal-disabled-action-hint .portal-action-btn--disabled,
.customer-portal-disabled-action-hint .dashboard-cmd--disabled,
.portal-action-btn--disabled,
.module-action-btn--disabled,
.table-action-btn--disabled,
.dashboard-cmd--disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
  pointer-events: none;
}

.customer-portal-disabled-action-hint .portal-action-btn--disabled:hover,
.customer-portal-disabled-action-hint .module-action-btn--disabled:hover,
.customer-portal-disabled-action-hint .table-action-btn--disabled:hover {
  transform: none;
  box-shadow: none;
}

.customer-portal-toolbar__actions .module-actions-secondary--group.customer-portal-icon-actions__row {
  width: auto;
}

.customer-portal-toolbar__actions .module-actions {
  align-items: center;
}

.customer-portal-toolbar__actions .customer-portal-icon-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
  margin-left: auto;
  position: relative;
}

.customer-portal-icon-actions__row {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
}

.customer-portal-icon-actions__message {
  display: none;
  margin-top: 8px;
  padding: 8px 10px;
  background: var(--ui-inset-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--text-secondary);
  white-space: normal;
  max-width: min(320px, calc(100vw - 32px));
  text-align: left;
  box-shadow: var(--shadow-sm);
}

.customer-portal-icon-actions:has(.customer-portal-disabled-action-hint--toolbar.is-open) .customer-portal-icon-actions__message,
.customer-portal-icon-actions:has(.customer-portal-disabled-action-hint--toolbar:focus-within) .customer-portal-icon-actions__message {
  display: block;
}

@media (hover: hover) and (pointer: fine) and (not (any-pointer: coarse)) {
  .customer-portal-toolbar__actions .customer-portal-icon-actions {
    display: block;
    width: auto;
  }

  .customer-portal-icon-actions__message {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    margin-top: 0;
    z-index: 120;
    width: min(320px, calc(100vw - 32px));
    pointer-events: none;
  }

  .customer-portal-icon-actions:has(.customer-portal-disabled-action-hint--toolbar:hover) .customer-portal-icon-actions__message {
    display: block;
  }
}

@media (max-width: 1024px), (hover: none), (any-pointer: coarse) {
  .customer-portal-toolbar__actions .customer-portal-icon-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }

  .customer-portal-icon-actions__message {
    position: static;
    width: auto;
    max-width: min(320px, calc(100vw - 32px));
    pointer-events: auto;
  }
}

.customer-portal-disabled-action-hint--toolbar {
  display: inline-flex;
  flex: 0 0 auto;
  width: auto;
  max-width: none;
}