/* StoryKeeper V2 design system.
   Palette sampled from golsm.com, not guessed: #F32735 primary red, near-black sections, #333333
   body, #69727D muted, Open Sans. Numbers are IBM Plex Mono so money and dates line up in columns.

   Red is both the brand AND the action colour here, which forces two deliberate separations:
     · critical/overdue shifts to a deep maroon (--red-700 #8B1A22) so an alert badge never reads
       as brand chrome sitting next to a red "New" button;
     · charts and progress bars use a neutral graphite (--data), because a red bar chart reads as
       "everything is bad".

   The v1 token NAMES are kept on purpose. Retinting them re-skins all 69 pages at once with no
   markup changes, so the app stays at full parity while it is restyled. The names are historical
   (--slate-*, --primary) — read them as neutral-scale and accent. */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700;800&family=IBM+Plex+Mono:wght@400;500&display=swap');

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

:root {
    /* Accent = LSM red. Used for links, primary buttons and the active nav item. */
    --primary: #F32735;
    --primary-dark: #C81E2A;
    --primary-light: #FDE9EB;
    /* Neutral scale (named --slate-* from v1; these are the v2 greys). */
    --slate-50: #F7F7F8;
    --slate-100: #F3F3F3;
    --slate-200: #E2E4E7;
    --slate-300: #D3D6DA;
    --slate-400: #9CA3AB;
    --slate-500: #69727D;
    --slate-600: #5A646E;
    --slate-700: #333333;
    --slate-800: #242424;
    --slate-900: #1A1A1A;
    --emerald-50: #DCFCE7;
    --emerald-600: #16A34A;
    --emerald-700: #15803D;
    --amber-50: #FEF3C7;
    --amber-600: #D97706;
    --amber-700: #B45309;
    /* Critical = deep maroon, NOT the brand red. See the note at the top of this file. */
    --red-50: #F6DFE1;
    --red-600: #C0202B;
    --red-700: #8B1A22;
    --purple-50: #EDE9FE;
    --purple-700: #6D28D9;
    --surface: #FFFFFF;
    --tint-blue: #DBEAFE;
    --tint-green: #BBF7D0;
    --tint-amber: #FDE68A;
    --tint-red: #F3C9CD;
    --blue-50: #DBEAFE;
    --blue-700: #1D4ED8;
    /* Charts, progress and sparklines — deliberately not the accent. */
    --data: #3F4A54;
    --data-soft: #DDE1E5;
    /* The sidebar is near-black to match how golsm.com pairs red with black. */
    --side: #151515;
    --radius: 10px;
    --font-ui: 'Open Sans', system-ui, -apple-system, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

body { font-family: var(--font-ui); background: var(--slate-50); color: var(--slate-900); -webkit-font-smoothing: antialiased; }

/* Layout */
.app-layout { display: flex; height: 100vh; overflow: hidden; }
.sidebar { width: 240px; background: var(--side); color: white; display: flex; flex-direction: column; flex-shrink: 0; }
.sidebar-header { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px 20px 12px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.sidebar-header span { font-size: 18px; font-weight: 700; letter-spacing: -0.5px; }
.sidebar-product { font-size: 13px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: #94A3B8; }
.sidebar-nav { flex: 1; padding: 12px 0; overflow-y: auto; }
.sidebar-divider { margin: 8px 12px; border-top: 1px solid rgba(255,255,255,0.1); }

.nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 16px; margin: 2px 8px; border-radius: 8px; color: #CBD5E1; text-decoration: none; font-size: 14px; transition: all 0.15s; cursor: pointer; }
.nav-item:hover { background: rgba(255,255,255,0.08); color: white; }
.nav-item.active { background: var(--primary); color: white; font-weight: 500; }
.nav-icon { width: 20px; text-align: center; flex-shrink: 0; }

.main-content { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.top-bar { height: 60px; background: var(--surface); border-bottom: 1px solid var(--slate-200); display: flex; align-items: center; gap: 16px; padding: 0 24px; flex-shrink: 0; }
/* Breadcrumb: where you are. The search and the user block are pushed right by this taking the
   leading space, so the bar reads location-first instead of search-first. */
.crumbs { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--slate-600); min-width: 0; }
.crumb { color: var(--slate-600); text-decoration: none; white-space: nowrap; }
.crumb:hover { color: var(--primary); }
.crumb.current { color: var(--slate-900); font-weight: 600; }
.crumb-sep { color: var(--slate-400); }
.top-bar .top-bar-search { margin-left: auto; background: var(--slate-100); border: 1px solid var(--slate-200); border-radius: 8px; padding: 0 12px; height: 36px; }
.top-bar .top-bar-search input { width: 300px; background: transparent; }
@media (max-width: 1100px) { .top-bar .top-bar-search input { width: 180px; } }
.top-bar-search { display: flex; align-items: center; gap: 8px; color: var(--slate-400); }
.top-bar-search input { border: none; outline: none; font-size: 14px; color: var(--slate-700); background: transparent; width: 300px; }
.top-bar-user { display: flex; align-items: center; gap: 12px; }
.user-avatar { width: 36px; height: 36px; background: var(--primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 14px; font-weight: 600; }
.user-info { text-align: right; }
.user-name { font-size: 14px; font-weight: 500; color: var(--slate-700); }
.user-role { font-size: 12px; color: var(--slate-500); }

.page-content { flex: 1; overflow-y: auto; padding: 24px; }

/* Cards */
/* Flat: 1px borders, no shadow. Shadows are reserved for things that float (drawers, menus). */
.card { background: var(--surface); border-radius: var(--radius); border: 1px solid var(--slate-200); }
.card-body { padding: 24px; }

/* KPI Cards */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px; }
.kpi-card { padding: 20px; }
.kpi-label { font-size: 13px; color: var(--slate-600); font-weight: 500; }
.kpi-value { font-size: 28px; font-weight: 700; color: var(--slate-900); margin-top: 4px; }
.kpi-change { display: inline-block; font-size: 12px; font-weight: 500; padding: 2px 8px; border-radius: 12px; margin-top: 8px; }
.kpi-change.positive { background: var(--emerald-50); color: var(--emerald-700); }
.kpi-change.negative { background: var(--red-50); color: var(--red-700); }
.kpi-change.neutral { background: var(--slate-100); color: var(--slate-600); }

/* Page Header */
.page-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 24px; }
.page-title { font-size: 24px; font-weight: 700; color: var(--slate-900); }
.page-subtitle { font-size: 14px; color: var(--slate-600); margin-top: 4px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 8px; font-size: 14px; font-weight: 500; border: none; cursor: pointer; transition: all 0.15s; text-decoration: none; }
.btn-primary { background: var(--primary); color: white; }
.btn-primary:hover { background: var(--primary-dark); }
.btn-secondary { background: var(--surface); color: var(--slate-700); border: 1px solid var(--slate-300); }
.btn-secondary:hover { background: var(--slate-50); }
.btn-danger { background: var(--red-600); color: white; }
.btn-ghost { background: transparent; color: var(--slate-600); }
.btn-ghost:hover { background: var(--slate-100); }
.btn-sm { padding: 6px 12px; font-size: 12px; }

/* Badges */
.badge { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 12px; font-size: 12px; font-weight: 500; border: 1px solid; }
.badge-paid, .badge-active, .badge-completed { background: var(--emerald-50); color: var(--emerald-700); border-color: var(--tint-green); }
.badge-unpaid, .badge-pending { background: var(--amber-50); color: var(--amber-700); border-color: var(--tint-amber); }
.badge-overdue, .badge-cancelled { background: var(--red-50); color: var(--red-700); border-color: var(--tint-red); }
.badge-confirmed { background: var(--blue-50); color: var(--blue-700); border-color: var(--tint-blue); }
.badge-inprogress { background: var(--purple-50); color: var(--purple-700); border-color: #DDD6FE; }
.badge-inactive { background: var(--slate-100); color: var(--slate-700); border-color: var(--slate-300); }

/* Data Table */
.data-table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.data-table th { text-align: left; padding: 12px 16px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--slate-600); border-bottom: 1px solid var(--slate-300); }
.data-table td { padding: 12px 16px; border-bottom: 1px solid var(--slate-200); color: var(--slate-900); }
.data-table tr.clickable { cursor: pointer; transition: background 0.1s; }
.data-table tr.clickable:hover { background: var(--blue-50); }
.cell-primary { font-weight: 600; color: var(--slate-900); }
.cell-secondary { font-size: 12px; color: var(--slate-600); }
.cell-link { color: var(--primary); font-weight: 600; }
.cell-amount { font-weight: 600; }

/* Search */
.search-bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; margin-bottom: 16px; }
.search-bar input { border: none; outline: none; font-size: 14px; color: var(--slate-900); background: transparent; flex: 1; }

/* Forms */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.form-group { margin-bottom: 16px; }
.form-label { display: block; font-size: 13px; font-weight: 500; color: var(--slate-800); margin-bottom: 6px; }
.form-label .required { color: var(--red-600); margin-left: 2px; }
.form-control { width: 100%; padding: 8px 12px; font-size: 14px; border: 1px solid var(--slate-300); border-radius: 8px; outline: none; transition: all 0.15s; background: white; }
.form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(59,130,246,0.15); }
select.form-control { appearance: auto; }
textarea.form-control { resize: vertical; min-height: 80px; }
.form-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 24px; }

/* Section headers */
.section-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--slate-600); margin-bottom: 12px; }
.section-heading { font-size: 18px; font-weight: 600; color: var(--slate-900); margin-bottom: 16px; }

/* Detail page */
.detail-header { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.detail-header .back-btn { padding: 8px; color: var(--slate-400); cursor: pointer; border-radius: 8px; transition: all 0.15s; }
.detail-header .back-btn:hover { color: var(--slate-600); background: var(--slate-100); }
.detail-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; }
.detail-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--slate-100); font-size: 14px; }
.detail-row-label { color: var(--slate-600); }
.detail-row-value { color: var(--slate-900); font-weight: 500; }

/* Invoice detail */
.invoice-items-table { width: 100%; font-size: 14px; border-collapse: collapse; margin: 16px 0; }
.invoice-items-table th { text-align: left; padding: 12px 8px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--slate-600); border-bottom: 1px solid var(--slate-200); }
.invoice-items-table td { padding: 12px 8px; border-bottom: 1px solid var(--slate-100); }
.invoice-totals { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; margin-top: 16px; }
.invoice-total-row { display: flex; justify-content: space-between; width: 240px; font-size: 14px; }
.invoice-total-row.grand { font-size: 16px; font-weight: 700; border-top: 1px solid var(--slate-200); padding-top: 8px; }

/* Activity feed */
.activity-item { display: flex; gap: 12px; padding: 8px 0; }
.activity-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--primary); margin-top: 7px; flex-shrink: 0; }
.activity-message { font-size: 14px; color: var(--slate-900); }
.activity-time { font-size: 12px; color: var(--slate-500); margin-top: 2px; }

/* Appointment list */
.appt-date-badge { width: 52px; padding: 4px 8px; background: var(--primary-light); border-radius: 8px; text-align: center; flex-shrink: 0; }
.appt-date-day { font-size: 18px; font-weight: 700; color: var(--primary); }
.appt-date-month { font-size: 10px; color: var(--primary); }

/* Placeholder */
.placeholder-page { display: flex; align-items: center; justify-content: center; min-height: 60vh; }
.placeholder-card { text-align: center; max-width: 400px; }
.placeholder-icon { font-size: 48px; margin-bottom: 16px; }
.placeholder-badge { display: inline-flex; padding: 6px 16px; background: var(--amber-50); color: var(--amber-700); border-radius: 12px; font-size: 12px; font-weight: 500; border: 1px solid #FDE68A; }

/* Utility */
.text-primary { color: var(--primary) !important; }
.text-red { color: var(--red-600) !important; }
.text-emerald { color: var(--emerald-600) !important; }
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.text-sm { font-size: 14px; }
.text-xs { font-size: 12px; }
/* Muted-text utilities, one shade darker than their names say: the pale greys failed the
   contrast check on the client's screens (2026-09-15). Names kept so pages need no edits. */
.text-slate-500 { color: var(--slate-600); }
.mt-2 { margin-top: 8px; }
.mt-4 { margin-top: 16px; }
.mb-4 { margin-bottom: 16px; }
.mb-6 { margin-bottom: 24px; }
.gap-4 { gap: 16px; }
.grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.clickable { cursor: pointer; }

/* Login Page */
.login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: linear-gradient(135deg, var(--slate-900) 0%, var(--slate-800) 100%); }
.login-card { background: var(--surface); border-radius: 16px; padding: 40px; width: 100%; max-width: 400px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); }
.login-header { text-align: center; margin-bottom: 32px; }
.login-logo { width: 56px; height: 56px; background: var(--primary); border-radius: 14px; display: flex; align-items: center; justify-content: center; color: white; font-size: 22px; font-weight: 700; margin: 0 auto 16px; }
.login-logo-mark { display: flex; justify-content: center; margin-bottom: 14px; }
.login-title { font-size: 24px; font-weight: 700; color: var(--slate-900); margin-bottom: 4px; }
.login-subtitle { font-size: 14px; color: var(--slate-500); }
.login-error { background: var(--red-50); color: var(--red-700); padding: 10px 14px; border-radius: 8px; font-size: 13px; margin-bottom: 16px; border: 1px solid #FECACA; }
.login-btn { width: 100%; justify-content: center; padding: 12px; font-size: 15px; margin-top: 8px; }
.login-hint { text-align: center; font-size: 12px; color: var(--slate-400); margin-top: 16px; }

/* Report Tabs */
.report-tab { padding: 10px 20px; font-size: 14px; font-weight: 500; border: none; background: transparent; color: var(--slate-600); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all 0.15s; }
.report-tab:hover { color: var(--slate-900); border-bottom-color: var(--slate-400); }
.report-tab.active { color: var(--primary); border-bottom-color: var(--primary); }

/* Search Dropdown */
.search-dropdown { position: absolute; top: 100%; left: 0; right: 0; background: white; border: 1px solid var(--slate-200); border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,0.12); z-index: 50; margin-top: 8px; max-height: 400px; overflow-y: auto; }
.search-result { display: flex; align-items: center; gap: 12px; padding: 10px 14px; cursor: pointer; transition: background 0.1s; }
.search-result:hover { background: var(--blue-50); }
.search-result-type { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--primary); background: var(--primary-light); padding: 2px 8px; border-radius: 4px; flex-shrink: 0; }
.search-result-text { font-size: 14px; font-weight: 500; color: var(--slate-900); }
.search-result-sub { font-size: 12px; color: var(--slate-600); margin-left: auto; }

/* Theme Toggle */
.theme-toggle { background: transparent; border: 1px solid var(--slate-200); border-radius: 8px; padding: 6px 10px; cursor: pointer; font-size: 16px; transition: all 0.15s; }
.theme-toggle:hover { background: var(--slate-100); }

/* Dark Mode */

/* Toast Notifications */
.toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 10px; font-size: 14px; font-weight: 500; min-width: 260px; max-width: 400px; box-shadow: 0 8px 24px rgba(0,0,0,0.15); pointer-events: all; animation: toast-in 0.25s ease; }
.toast-success { background: var(--emerald-700); color: white; }
.toast-error   { background: var(--red-600); color: white; }
.toast-warning { background: var(--amber-600); color: white; }
.toast-info    { background: var(--primary); color: white; }
.toast-icon { font-size: 16px; flex-shrink: 0; }
.toast-text { flex: 1; }
.toast-close { background: transparent; border: none; color: rgba(255,255,255,0.7); cursor: pointer; font-size: 14px; padding: 0 2px; line-height: 1; flex-shrink: 0; }
.toast-close:hover { color: white; }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* Loading Spinner */
.loading-spinner-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 0; gap: 12px; }
.loading-spinner { width: 36px; height: 36px; border: 3px solid var(--slate-200); border-top-color: var(--primary); border-radius: 50%; animation: spin 0.7s linear infinite; }
.loading-text { font-size: 14px; color: var(--slate-500); }
@keyframes spin { to { transform: rotate(360deg); } }

/* Pager */
.pager { display: flex; align-items: center; gap: 4px; padding: 16px 0 4px; flex-wrap: wrap; }
.pager-btn { min-width: 32px; height: 32px; padding: 0 8px; border: 1px solid var(--slate-200); border-radius: 6px; background: var(--surface); color: var(--text-primary); font-size: 13px; cursor: pointer; transition: all 0.15s; }
.pager-btn:hover:not(:disabled) { background: var(--slate-100); border-color: var(--slate-300); }
.pager-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); font-weight: 600; }
.pager-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.pager-ellipsis { padding: 0 4px; color: var(--slate-500); font-size: 13px; }
.pager-info { margin-left: 8px; font-size: 12px; color: var(--slate-600); }

/* Skeleton loader */
.skeleton { background: linear-gradient(90deg, var(--slate-200) 25%, var(--slate-100) 50%, var(--slate-200) 75%); background-size: 200% 100%; animation: skeleton-shimmer 1.2s ease-in-out infinite; border-radius: 4px; }
@keyframes skeleton-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

@media (max-width: 768px) {
    /* Pre-hydration fallback only: before ViewportService's JS check resolves, MainLayout still
       renders the desktop Sidebar, so it briefly collapses to icon-only rather than staying full
       width. Scoped to .sidebar specifically — the mobile drawer reuses .nav-item/.nav-icon for
       visual consistency and must keep its own labels regardless of viewport width. */
    .sidebar { width: 60px; }
    .sidebar .sidebar-header span, .sidebar .nav-item span { display: none; }
    .form-grid, .detail-grid, .grid-2col { grid-template-columns: 1fr !important; }
    .kpi-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Customer page: profile column + one timeline ("the story") */
.cust-layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 16px; align-items: start; }
.cust-side { position: sticky; top: 16px; min-width: 0; }
.cust-card { padding: 18px 20px; margin-bottom: 12px; }
.cust-card .dim { color: var(--slate-500); }
.cust-attention { border-color: #F59E0B; background: #FFFBEB; }
/* The one pinned note from the legacy system. Often turn-by-turn directions to a rural property,
   so it keeps the line breaks it was typed with rather than being reflowed into a paragraph. */
/* Unit picker on a work order — which equipment the job is working on (patch 28). */
.unit-pick { display: flex; flex-direction: column; gap: 6px; }
.unit-opt { display: flex; gap: 10px; align-items: flex-start; padding: 9px 12px; border: 1px solid var(--slate-200);
            border-radius: 8px; cursor: pointer; background: var(--surface); }
.unit-opt:hover { border-color: var(--primary); }
.unit-opt.on { border-color: var(--primary); background: var(--primary-light); }
.unit-opt input { margin-top: 3px; flex-shrink: 0; }
.unit-main { display: flex; flex-direction: column; min-width: 0; }
.unit-name { font-size: 14px; font-weight: 600; color: var(--slate-900); }
.unit-sub { font-size: 12.5px; color: var(--slate-500); }
[data-theme="dark"] .unit-opt.on { background: rgba(243,39,53,0.16); }

.cust-memo { border-left: 4px solid var(--primary); background: var(--slate-50); }
.cust-memo-body { white-space: pre-wrap; font-size: 13.5px; line-height: 1.5; color: var(--slate-700); }
.cust-fact { display: flex; gap: 10px; font-size: 13px; padding: 5px 0; }
.cust-fact .k { color: var(--slate-600); width: 88px; flex-shrink: 0; }
.cust-fact .v { color: var(--slate-900); font-weight: 500; min-width: 0; }
.cust-attn-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--slate-800); padding: 6px 0; border-bottom: 1px solid var(--slate-200); }
.cust-attn-row:last-child { border-bottom: none; }
.cust-attn-row.clickable { cursor: pointer; }
.cust-attn-row.clickable:hover .cell-link { text-decoration: underline; }
.cust-delete { font-size: 12px; margin-top: 4px; padding: 0 4px; }
.cust-delete a { color: var(--red-600); cursor: pointer; }
.cust-story { padding: 0 0 6px; min-width: 0; }
/* The kind chips stay pinned at the top of the scroll while the story scrolls under them. */
.cust-chips { position: sticky; top: 0; z-index: 5; background: var(--surface); display: flex; gap: 4px; flex-wrap: wrap; align-items: center; padding: 14px 24px 10px; border-bottom: 1px solid var(--slate-300); border-radius: 12px 12px 0 0; }
/* Masks the page's 24px top padding so scrolled rows don't peek out above the pinned chips. */
.cust-chips::before { content: ""; position: absolute; left: -1px; right: -1px; top: -25px; height: 25px; background: var(--slate-50); }
.cust-chips .report-tab { padding: 8px 12px; font-size: 13px; color: var(--slate-700); }
.cust-chips .report-tab.active { color: var(--primary-dark); }
.cust-n { margin-left: 6px; background: var(--slate-300); color: var(--slate-900); border-radius: 999px; padding: 0 7px; font-size: 11px; font-weight: 600; }
.cust-n.zero { background: var(--slate-100); color: var(--slate-500); font-weight: 500; }
.report-tab.active .cust-n { background: var(--primary); color: white; }
.cust-actions { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 12px; }
.cust-tl { position: relative; padding: 6px 24px 6px 46px; }
.cust-tl::before { content: ""; position: absolute; left: 30px; top: 14px; bottom: 14px; width: 2px; background: var(--slate-300); }
.cust-tl-item { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 10px 0 11px; border-bottom: 1px solid var(--slate-200); font-size: 13px; }
.cust-tl-item:last-child { border-bottom: none; }
.cust-tl-item.clickable { cursor: pointer; }
.cust-tl-item.clickable:hover { background: var(--blue-50); margin: 0 -12px; padding-left: 12px; padding-right: 12px; }
.cust-tl-item.clickable:hover .t { color: var(--primary-dark); }
.cust-tl-item::before { content: ""; position: absolute; left: -21px; top: 16px; width: 10px; height: 10px; border-radius: 50%; background: var(--slate-400); border: 2px solid white; box-shadow: 0 0 0 1px var(--slate-400); }
.cust-tl-item.clickable:hover::before { left: -33px; }
.cust-tl-item.hot::before { background: var(--amber-600); box-shadow: 0 0 0 1px var(--amber-600); }
.cust-tl-date { width: 84px; flex-shrink: 0; color: var(--slate-700); font-weight: 500; padding-top: 2px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cust-tl-kind { width: 96px; flex-shrink: 0; }
.cust-tl-body { flex: 1; min-width: 0; }
.cust-tl-body .t { color: var(--slate-900); font-weight: 600; }
.cust-tl-body .s { color: var(--slate-600); }
.cust-tl-amt { color: var(--slate-900); font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Type chips: one colour per kind so the story scans at a glance */
.cust-chip { display: inline-block; border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 600; background: var(--slate-700); color: white; white-space: nowrap; }
.cust-chip.wo { background: #1D4ED8; }
.cust-chip.quote { background: #6D28D9; }
.cust-chip.invoice { background: #047857; }
.cust-chip.appt { background: #0E7490; }
.cust-chip.concern { background: #B45309; }
.cust-chip.asset { background: var(--slate-700); }
.cust-chip.warranty { background: #0369A1; }
@media (max-width: 900px) { .cust-layout { grid-template-columns: 1fr !important; } .cust-side { position: static; } }

/* Record pages (asset, warranty, appointment, concern, …) share the customer-page frame. */
.cust-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 12px; }
.cust-kpi { background: var(--surface); border: 1px solid var(--slate-200); border-radius: 10px; padding: 12px 16px; }
.cust-kpi .l { font-size: 12px; color: var(--slate-600); }
.cust-kpi .v { font-size: 20px; font-weight: 700; color: var(--slate-900); }
.cust-kpi .v.warn { color: var(--amber-600); }
.cust-kpi .v.bad { color: var(--red-600); }
.cust-kpi.clickable { cursor: pointer; }
.cust-kpi.clickable:hover { border-color: var(--primary); }
.cust-sec { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; padding: 16px 24px 0; }
.cust-sec .section-title { margin: 0; }
.cust-strip { display: flex; gap: 6px; padding: 10px 24px 16px; overflow-x: auto; }
.cust-slot { flex: 1; min-width: 120px; border: 1px solid var(--slate-300); border-radius: 6px; padding: 6px 8px; background: white; font-size: 12px; color: var(--slate-800); cursor: pointer; }
.cust-slot:hover { border-color: var(--primary); }
.cust-slot.me { border-color: var(--primary); background: var(--blue-50); }
.cust-slot .h { font-weight: 600; color: var(--slate-900); }
.cust-stock { display: flex; gap: 10px; align-items: center; }
.cust-bar { flex: 1; height: 8px; background: var(--slate-200); border-radius: 999px; overflow: hidden; }
.cust-bar i { display: block; height: 100%; background: var(--emerald-600); }
.cust-bar i.low { background: var(--amber-600); }
.cust-bar i.out { background: var(--red-600); }
.cust-doc { width: 100%; height: 720px; border: 1px solid var(--slate-300); border-radius: 8px; background: var(--slate-200); display: block; }
.cust-bignum { font-size: 22px; font-weight: 700; color: var(--slate-900); line-height: 1.1; }
.cust-alert { display: flex; align-items: center; gap: 12px; background: var(--amber-50); border: 1px solid #F59E0B; color: var(--amber-700); border-radius: 10px; padding: 12px 16px; font-size: 13px; margin-bottom: 14px; }

.cust-pill { display: inline-block; border: 1px solid var(--slate-300); background: var(--surface); color: var(--slate-800); border-radius: 999px; padding: 1px 9px; font-size: 12px; margin: 2px 6px 0 0; white-space: nowrap; }

/* Department rows on the work-order types page: compact enough for the narrow column. */
.dept-row { display: flex; gap: 8px; align-items: center; font-size: 13px; padding: 7px 0; border-bottom: 1px solid var(--slate-200); }
.dept-row:last-child { border-bottom: none; }
.dept-code-input { max-width: 58px; padding: 4px 6px; text-align: center; text-transform: uppercase; }

/* Employee page */
.emp-rates { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.emp-rate { border: 1px solid var(--slate-200); border-radius: 8px; padding: 8px 10px; background: var(--slate-50); }
.emp-rate .l { font-size: 11px; color: var(--slate-600); text-transform: uppercase; letter-spacing: 0.04em; }
.emp-rate .v { font-size: 17px; font-weight: 700; color: var(--slate-900); line-height: 1.3; }
.emp-rate .s { font-size: 11px; color: var(--slate-500); }
.emp-rate.empty .v { color: var(--slate-400); font-weight: 500; }
.emp-more { margin-top: 10px; font-size: 13px; }
.emp-more summary { cursor: pointer; color: var(--slate-700); }
.emp-more table { width: 100%; margin-top: 6px; font-size: 13px; }
.emp-more td { padding: 3px 0; color: var(--slate-800); }
.emp-more td.v { text-align: right; font-weight: 600; white-space: nowrap; }
.emp-more td.s { color: var(--slate-500); font-size: 12px; text-align: right; white-space: nowrap; padding-left: 8px; }
.bar { height: 6px; background: var(--slate-200); border-radius: 3px; min-width: 60px; }
.bar > i { display: block; height: 100%; background: var(--primary); border-radius: 3px; }
.emp-two { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 12px; margin-bottom: 12px; }
@media (max-width: 1100px) { .emp-two { grid-template-columns: 1fr; } }

/* Month chart on the employee-year page */
.mchart { display: grid; grid-template-columns: repeat(12, 1fr); gap: 8px; align-items: end; height: 190px; padding: 24px 24px 0; }
.mchart .col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; cursor: pointer; border-radius: 6px; }
.mchart .col:hover { background: var(--slate-50); }
.mchart .col.active { background: #EFF6FF; }
.mchart .n { font-size: 12px; font-weight: 600; color: var(--slate-800); margin-bottom: 4px; }
.mchart .b { width: 60%; background: var(--primary); border-radius: 4px 4px 0 0; min-height: 2px; }
.mchart .col.zero .b { background: var(--slate-200); }
.mchart .m { font-size: 11px; color: var(--slate-600); margin-top: 6px; text-transform: uppercase; letter-spacing: 0.04em; }

/* Employment history: compact list in the side column, full dialog on open */
.hist-row { display: grid; grid-template-columns: 82px 1fr; gap: 8px; padding: 7px 0; border-top: 1px solid var(--slate-100); font-size: 13px; cursor: pointer; }
.hist-row:first-of-type { border-top: 0; }
.hist-row:hover { background: var(--slate-50); }
.hist-row .d { color: var(--slate-600); white-space: nowrap; font-size: 12px; padding-top: 2px; }
.hist-row .t { color: var(--slate-800); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hist-row .k { font-weight: 600; margin-right: 6px; }
.dlg-back { position: fixed; inset: 0; background: rgba(15,23,42,0.45); z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; }
.dlg { background: var(--surface); border-radius: 12px; width: min(1120px, 100%); max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,0.25); }
.dlg-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 22px; border-bottom: 1px solid var(--slate-200); }
.dlg-head h3 { margin: 0; font-size: 16px; }
.dlg-body { overflow: auto; padding: 0 22px 18px; }
.dlg-body .data-table { table-layout: fixed; width: 100%; }
.dlg-body .data-table td { overflow-wrap: anywhere; }
.dlg-body .badge { white-space: nowrap; overflow-wrap: normal; }
.dlg-body .data-table td.trunc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dlg-form { display: grid; grid-template-columns: 170px 160px minmax(0,1fr); gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--slate-200); }
.dlg-form .full { grid-column: 1 / -1; }
.dlg-form textarea { min-height: 84px; }
.dlg-actions { display: flex; gap: 8px; justify-content: flex-end; grid-column: 1 / -1; }


/* ===== Dark theme (2026-09-15) — a designed palette, not an inversion of the light one.
   Text steps get lighter as the slate number rises (so existing colour roles keep meaning),
   surfaces are fixed navy-greys, and the chip tints become translucent so status colours stay
   recognisable on dark. The sidebar is the same in both themes. ===== */
[data-theme="dark"] {
    /* Dark retints the same tokens; it never inverts the scale, so --slate-900 stays "most
       prominent text" in both themes and no rule needs to know which theme is active. */
    --slate-50: #1C1C1F; --slate-100: #242428; --slate-200: #33343A; --slate-300: #44454C; --slate-400: #6B7280;
    --slate-500: #8A9099; --slate-600: #A3AAB2; --slate-700: #D6D6D8; --slate-800: #E8E8EA; --slate-900: #F2F2F3;
    --surface: #1C1C1F;
    --primary: #FF4D5A; --primary-dark: #FF7480; --primary-light: rgba(243,39,53,0.20);
    --blue-50: rgba(59,130,246,0.16); --blue-700: #93C5FD;
    --emerald-50: rgba(16,185,129,0.16); --emerald-600: #34D399; --emerald-700: #6EE7B7;
    --amber-50: rgba(245,158,11,0.18); --amber-600: #FBBF24; --amber-700: #FCD34D;
    --red-50: rgba(192,32,43,0.20); --red-600: #FF6B72; --red-700: #FCA5A5;
    --purple-50: rgba(109,40,217,0.22); --purple-700: #C4B5FD;
    --data: #8A99A8; --data-soft: #2A2F35;
    --side: #0D0D0E;
    --tint-blue: rgba(59,130,246,0.22); --tint-green: rgba(16,185,129,0.2); --tint-amber: rgba(245,158,11,0.22); --tint-red: rgba(192,32,43,0.24);
}
[data-theme="dark"] body { background: #121214; color: var(--slate-900); }
[data-theme="dark"] .sidebar { background: var(--side); }
[data-theme="dark"] .btn-danger { background: #DC2626; color: white; }
[data-theme="dark"] .btn-secondary:hover { background: var(--slate-100); }
[data-theme="dark"] .form-control { background: #121214; color: var(--slate-900); border-color: var(--slate-300); }
[data-theme="dark"] .form-control::placeholder, [data-theme="dark"] .search-bar input::placeholder, [data-theme="dark"] .top-bar-search input::placeholder { color: var(--slate-400); }
[data-theme="dark"] .top-bar-search input, [data-theme="dark"] .search-bar input { color: var(--slate-900); }
[data-theme="dark"] .search-bar { background: var(--slate-50); }
[data-theme="dark"] .data-table tr.clickable:hover, [data-theme="dark"] .search-result:hover, [data-theme="dark"] .cust-tl-item.clickable:hover, [data-theme="dark"] .hist-row:hover, [data-theme="dark"] .mchart .col:hover { background: rgba(255,255,255,0.05); }
[data-theme="dark"] .mchart .col.active { background: rgba(59,130,246,0.2); }
[data-theme="dark"] .emp-rate { background: var(--slate-50); }
[data-theme="dark"] .cust-attention { background: rgba(245,158,11,0.12); border-color: #B45309; }
[data-theme="dark"] .cust-memo { background: rgba(255,255,255,0.03); }
[data-theme="dark"] .cust-memo-body { color: var(--slate-300); }
[data-theme="dark"] .cust-n { background: var(--slate-300); color: var(--slate-900); }
[data-theme="dark"] .cust-n.zero { background: var(--slate-200); color: var(--slate-500); }
[data-theme="dark"] .login-page { background: #0F1520; }
[data-theme="dark"] .dlg { box-shadow: 0 20px 60px rgba(0,0,0,0.6); }
[data-theme="dark"] .cust-chips::before { background: #0F1520; }

/* ===== Category tabs under the top bar (sidebar = categories, tabs = the pages in one) ===== */
.cat-tabs { background: var(--surface); border-bottom: 1px solid var(--slate-200); padding: 0 24px; display: flex; gap: 4px; align-items: center; overflow-x: auto; }
.cat-tab { padding: 12px 16px; font-size: 14px; font-weight: 500; color: var(--slate-600); border-bottom: 2px solid transparent; margin-bottom: -1px; text-decoration: none; white-space: nowrap; }
.cat-tab:hover { color: var(--slate-900); border-bottom-color: var(--slate-400); }
.cat-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.sidebar-group { font-size: 10.5px; letter-spacing: 1.4px; text-transform: uppercase; color: #64748B; padding: 14px 24px 4px; }

/* ===== Mobile shell (2026-09-16) — a genuinely different layout for phone-width viewports,
   not just a squeezed desktop one. MainLayout swaps Sidebar/TopBar for these based on
   ViewportService (JS matchMedia at 768px), so nothing here needs its own media query for
   *whether* it shows — only for how the shared page content below it reflows. ===== */
.app-layout.is-mobile { flex-direction: column; }
.mobile-top-bar { height: 52px; display: flex; align-items: center; gap: 4px; padding: 0 6px; background: var(--surface); border-bottom: 1px solid var(--slate-200); flex-shrink: 0; }
.mobile-icon-btn { background: transparent; border: none; font-size: 20px; padding: 8px 10px; cursor: pointer; color: var(--slate-700); line-height: 1; }
.mobile-page-title { flex: 1; font-size: 16px; font-weight: 600; color: var(--slate-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mobile-avatar { width: 30px; height: 30px; font-size: 12px; margin-right: 4px; cursor: pointer; flex-shrink: 0; }

.mobile-search-overlay { position: fixed; inset: 0; z-index: 300; background: var(--surface); display: flex; flex-direction: column; }
.mobile-search-bar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--slate-200); padding-top: max(10px, env(safe-area-inset-top, 0px)); }
.mobile-search-bar input { flex: 1; border: none; outline: none; font-size: 16px; background: transparent; color: var(--slate-900); min-width: 0; }
.mobile-search-results { flex: 1; overflow-y: auto; }
.mobile-search-results .search-result { flex-wrap: wrap; border-bottom: 1px solid var(--slate-100); }

.mobile-drawer-back { position: fixed; inset: 0; background: rgba(15,23,42,0.45); z-index: 250; }
.mobile-drawer { position: fixed; top: 0; bottom: 0; left: 0; width: min(82vw, 300px); background: #0F172A; color: white; z-index: 260; display: flex; flex-direction: column; transform: translateX(-100%); transition: transform 0.2s ease; padding-top: env(safe-area-inset-top, 0px); }
.mobile-drawer.open { transform: translateX(0); }
.mobile-drawer .sidebar-nav { flex: 1; }
.mobile-drawer-footer { border-top: 1px solid rgba(255,255,255,0.1); padding: 12px 8px; padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)); }
.mobile-drawer-footer .user-info { padding: 8px 12px 4px; }

.mobile-bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; height: 58px; padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--surface); border-top: 1px solid var(--slate-200); display: flex; z-index: 150; flex-shrink: 0; }
.mobile-bottom-nav a, .mobile-bottom-nav button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 10px; font-weight: 500; color: var(--slate-500); text-decoration: none; background: transparent; border: none; cursor: pointer; }
.mobile-bottom-nav .icon { font-size: 19px; line-height: 1; }
.mobile-bottom-nav a.active, .mobile-bottom-nav button.active { color: var(--primary); }

.page-content.mobile { padding: 14px; padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px) + 14px); }
.page-content.mobile .page-header { flex-direction: column; align-items: stretch; gap: 10px; }
.page-content.mobile .page-header > div:last-child { display: flex; flex-wrap: wrap; gap: 8px; }
.page-content.mobile .page-title { font-size: 19px; }

/* Content reflow for narrow viewports generally — applies whether reached via the mobile shell
   or just a narrow desktop window, since the underlying pages are unchanged either way. */
@media (max-width: 768px) {
    .card-body:has(> table.data-table), .card-body:has(> .data-table),
    .card:has(> table.data-table), .card:has(> .data-table) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    table.data-table:not(.mobile-cards) { min-width: 640px; }
    /* !important: several pages hardcode an inline grid-template-columns (e.g. the dashboard's
       4-up KPI row), which would otherwise beat this rule on specificity alone. */
    .cust-kpis, .kpi-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .invoice-totals { align-items: stretch; }
    .invoice-total-row { width: auto; }
    .dlg-back { padding: 0; align-items: flex-end; }
    .dlg { width: 100%; max-height: 92vh; border-radius: 16px 16px 0 0; }
    .dlg-form { grid-template-columns: 1fr; }
    /* A category/department <select> next to a search box: flexbox otherwise squeezes the
       select down to an unreadable sliver to give the search box its flex:1 growth. */
    .filter-row { flex-direction: column; }
    .filter-row select { max-width: none !important; }
    /* Record page header (back arrow + title + status badge/Edit button): without wrapping, the
       badge+button hold their width and squeeze the title into an unreadably narrow column. */
    .detail-header { flex-wrap: wrap; row-gap: 10px; }
    .detail-header > div:first-of-type { flex-basis: 100% !important; }
    /* The story timeline packs a fixed date column + kind badge + flexible body + amount onto
       one row — there isn't enough room for all four on a phone, and shrinking the body let its
       text run under the amount instead of wrapping. Stack each row's pieces instead. */
    .cust-tl-item { display: block !important; padding-right: 14px; }
    .cust-tl-item .cust-tl-date, .cust-tl-item .cust-tl-kind, .cust-tl-item .cust-tl-body, .cust-tl-item .cust-tl-amt {
        display: block; width: auto; margin: 2px 0;
    }
}

/* Priority lists get a true card layout instead of a scrolling table — customers, assets, work
   orders and campaigns are the screens staff actually reach for on a phone (2026-09-16). Any
   <td> without data-label just renders unlabeled rather than being hidden, so nothing gets lost
   on a table we haven't converted yet. */
@media (max-width: 640px) {
    .mobile-cards thead { display: none; }
    .mobile-cards, .mobile-cards tbody, .mobile-cards tr { display: block; width: 100%; min-width: 0; }
    .mobile-cards { min-width: 0 !important; }
    .mobile-cards tr { background: var(--surface); border: 1px solid var(--slate-200); border-radius: 10px; padding: 10px 14px; margin-bottom: 10px; }
    .mobile-cards tr.clickable:hover { background: var(--surface); }
    .mobile-cards td { display: block; border: none; padding: 5px 0; white-space: normal !important; }
    .mobile-cards td[data-label]::before { content: attr(data-label); display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--slate-500); margin-bottom: 2px; }
}

/* Multi-column sort */
.sort-level { display: inline-block; margin-left: 3px; min-width: 14px; height: 14px; line-height: 14px; text-align: center; border-radius: 7px; background: var(--primary); color: white; font-size: 9px; font-weight: 700; vertical-align: 1px; }
.sort-strip { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--slate-600); margin: 0 0 8px; }
.sort-strip .s { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--slate-300); background: var(--surface); border-radius: 999px; padding: 1px 8px; color: var(--slate-800); }
.sort-strip .s b { color: var(--primary); font-size: 10px; }
.sort-strip .s a { cursor: pointer; color: var(--slate-500); margin-left: 2px; }
.sort-strip .clear { cursor: pointer; color: var(--primary); margin-left: 4px; }

/* ── V2 Today ────────────────────────────────────────────────────────────────────────────────── */
.today-eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
                 color: var(--slate-500); margin-bottom: 2px; }

/* Vitals: ONE bordered band, not N cards. Reads as a single instrument panel; the internal rules
   are hairlines so the eye crosses them without stopping. */
.vitals { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
          background: var(--surface); border: 1px solid var(--slate-200); border-radius: var(--radius); overflow: hidden; }
.vital { padding: 14px 18px; border-right: 1px solid var(--slate-100); cursor: pointer; }
.vital:last-child { border-right: 0; }
.vital:hover { background: var(--slate-50); }
.vl { font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--slate-500); }
.vv { font-family: var(--font-mono); font-size: 26px; line-height: 1.15; margin-top: 4px; color: var(--slate-900); }
.vv.warn { color: var(--amber-700); }
.vv.crit { color: var(--red-700); }
.vm { font-size: 12.5px; color: var(--slate-600); margin-top: 2px; }
@media (max-width: 900px) { .vital { border-right: 0; border-bottom: 1px solid var(--slate-100); } }

/* The day grouped by crew. */
.crew-day { padding: 4px 0 10px; }
.crew-head { display: flex; align-items: baseline; gap: 8px; padding: 12px 24px 6px; }
.crew-name { font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--slate-700); }
.crew-count { font-size: 12px; color: var(--slate-500); font-family: var(--font-mono); }
.crew-job { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; gap: 12px; align-items: center;
            padding: 8px 24px; cursor: pointer; }
.crew-job:hover { background: var(--slate-50); }
.cj-time { font-family: var(--font-mono); font-size: 13px; color: var(--slate-600); white-space: nowrap; }
.cj-body { min-width: 0; }
.cj-customer { display: block; font-weight: 600; font-size: 14px; color: var(--slate-900);
               overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cj-what { display: block; font-size: 13px; color: var(--slate-600);
           overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Needs attention: severity lives in a 4px left edge, so the worst item is found without reading. */
.attn { display: flex; flex-direction: column; gap: 10px; }
.attn-item { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "n t" "n d";
             column-gap: 12px; align-items: center; padding: 12px 16px; background: var(--surface);
             border: 1px solid var(--slate-200); border-left-width: 4px; border-radius: var(--radius); cursor: pointer; }
.attn-item:hover { background: var(--slate-50); }
.attn-item.crit { border-left-color: var(--red-700); }
.attn-item.warn { border-left-color: var(--amber-600); }
.attn-item.good { border-left-color: var(--emerald-600); }
.attn-item .an { grid-area: n; font-family: var(--font-mono); font-size: 22px; line-height: 1; color: var(--slate-900); }
.attn-item .at { grid-area: t; font-size: 14px; font-weight: 600; color: var(--slate-900); }
.attn-item .ad { grid-area: d; font-size: 12.5px; color: var(--slate-600); }