/* ============================================================
   Best Decision Business Tools — Unified Design System
   Merged from timekeeper + receipt-capture + new modules
   ============================================================ */

:root {
    --ui-font-reading: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --ui-font-data: 'DM Mono', 'Courier New', monospace;
    --blue: #2563eb;
    --blue-dark: #1d4ed8;
    --blue-tint: #eff6ff;
    --green: #16a34a;
    --green-dark: #15803d;
    --red: #dc2626;
    --red-dark: #b91c1c;
    --orange: #ea580c;
    --purple: #7c3aed;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --radius: 12px;
    --sidebar-width: 264px;
    --sidebar-rail-width: 56px;
    /* Left offset of the submenu block; the tree-line rides its left edge.
       Measured from .sidebar-group's content box, which already starts 10px in,
       so the on-screen x of the line is this value + 10. Swap this one value to
       move every submenu -- nothing else needs editing:
         0px = flush with the sidebar edge   (line at 10px)
         8px = aligned to the icon column    (line at 18px, current)
        20px = submenu labels clear the group-head text (line at 30px) */
    --sidebar-submenu-indent: 8px;
    --sidebar-transition: 0.25s ease;
    --sidebar-bg: #111827;
    --sidebar-bg-hover: #1f2937;
    --sidebar-bg-active: #1f2937;
    --sidebar-text: #d1d5db;
    --sidebar-text-hover: #ffffff;
    --sidebar-text-muted: #9ca3af;
    --sidebar-border: #374151;

    /* ── BDB Brand Design System ──── */
    --brand-indigo: #2E2A6A;
    --brand-orange: #FB5B11;
    --brand-orange-hover: #e04f0e;
    --brand-green: #1C7F36;
    --brand-cloud: #F8F9FA;
    --brand-text: #2D3748;
    --brand-card-bg: rgba(46,42,106,0.03);
    --brand-card-border: rgba(46,42,106,0.15);
    --brand-shadow: 0 4px 16px rgba(46,42,106,0.06);
    --brand-radius: 16px;

    /* ── Sidebar refresh: brand + accent tokens ──── */
    --brand-navy: #1E1A4F;
    --brand-indigo-deep: #161336;
    --brand-indigo-soft: #A5B0FF;
    --brand-orange-soft: #FF8A4C;
    --brand-green-bright: #37C96B;
    --sidebar-surface: rgba(255,255,255,0.06);
    --sidebar-surface-strong: rgba(255,255,255,0.12);
    --sidebar-stroke-soft: rgba(255,255,255,0.08);
    --sidebar-stroke-strong: rgba(255,255,255,0.14);
    --sidebar-menu-accent: #2563eb;
    --sidebar-menu-accent-end: #1d4ed8;
    --sidebar-menu-accent-ink: #f8fafc;
    --sidebar-menu-accent-ink-soft: rgba(248, 250, 252, 0.82);
    --sidebar-menu-accent-overlay: rgba(255, 255, 255, 0.16);
    --sidebar-menu-accent-overlay-strong: rgba(255, 255, 255, 0.24);
    --sidebar-menu-accent-border: rgba(255, 255, 255, 0.22);
    --sidebar-menu-accent-shadow: rgba(37, 99, 235, 0.28);

    /* ── Surface / text / border tokens (dark-mode aware) ──── */
    --surface: #ffffff;
    --surface-elevated: #ffffff;
    --surface-sunken: var(--gray-50);
    --surface-overlay: rgba(0, 0, 0, 0.5);
    --text: var(--gray-900);
    --text-muted: var(--gray-600);
    --text-subtle: var(--gray-500);
    --border: var(--gray-200);
    --border-strong: var(--gray-300);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);

    /* Status-card tints (formerly hardcoded in templates) */
    --surface-success-tint: #f0fdf4;
    --surface-warning-tint: #fffbeb;
    --surface-info-tint:    #eff6ff;
    --surface-error-tint:   #fef2f2;
    --surface-purple-tint:  #faf5ff;
    --surface-yellow-tint:  #fefce8;
    --surface-orange-tint:  #fff7ed;

    /* Status text colors used on tinted backgrounds (light defaults) */
    --text-success: #166534;
    --text-warning: #b45309;
    --text-info:    #1d4ed8;
    --text-error:   #b91c1c;
    --text-purple:  #6d28d9;
}

/* ---- Color scheme overrides (applied via body class on employee-facing pages) ---- */
body.scheme-black  { --blue: #374151; --blue-dark: #1f2937; --blue-tint: #f9fafb; --sidebar-bg: #111827; --sidebar-bg-hover: #1f2937; --sidebar-bg-active: #1f2937; --sidebar-border: #374151; }
body.scheme-green  { --blue: #1C7F36; --blue-dark: #166B2B; --blue-tint: #f0f9f3; --sidebar-bg: #0d3d1a; --sidebar-bg-hover: #124d22; --sidebar-bg-active: #124d22; --sidebar-border: #1a6930; }
body.scheme-indigo { --blue: #2E2A6A; --blue-dark: #252155; --blue-tint: #f0eff8; --sidebar-bg: #141230; --sidebar-bg-hover: #1e1b45; --sidebar-bg-active: #1e1b45; --sidebar-border: #3a3570; }
body.scheme-orange { --blue: #FB5B11; --blue-dark: #D54D0E; --blue-tint: #fff5ed; --sidebar-bg: #4a1a05; --sidebar-bg-hover: #7a2c08; --sidebar-bg-active: #7a2c08; --sidebar-border: #9a3810; }
body.scheme-pink   { --blue: #ec4899; --blue-dark: #db2777; --blue-tint: #fdf2f8; --sidebar-bg: #500724; --sidebar-bg-hover: #831843; --sidebar-bg-active: #831843; --sidebar-border: #9d174d; }
body.scheme-purple { --blue: #7c3aed; --blue-dark: #6d28d9; --blue-tint: #f5f3ff; --sidebar-bg: #1e1b4b; --sidebar-bg-hover: #312e81; --sidebar-bg-active: #312e81; --sidebar-border: #3730a3; }
body.scheme-red    { --blue: #dc2626; --blue-dark: #b91c1c; --blue-tint: #fef2f2; --sidebar-bg: #450a0a; --sidebar-bg-hover: #7f1d1d; --sidebar-bg-active: #7f1d1d; --sidebar-border: #991b1b; }
body.scheme-teal   { --blue: #0d9488; --blue-dark: #0f766e; --blue-tint: #f0fdfa; --sidebar-bg: #134e4a; --sidebar-bg-hover: #115e59; --sidebar-bg-active: #115e59; --sidebar-border: #0f766e; }
body.scheme-custom1,
body.scheme-custom2 {
    --blue: var(--custom-hex);
    --blue-dark: var(--custom-hex); --blue-dark: color-mix(in srgb, var(--custom-hex), black 20%);
    --blue-tint: #f8f8fa; --blue-tint: color-mix(in srgb, var(--custom-hex) 8%, white);
    --sidebar-bg: #1a1a2e; --sidebar-bg: color-mix(in srgb, var(--custom-hex), black 70%);
    --sidebar-bg-hover: #2a2a3e; --sidebar-bg-hover: color-mix(in srgb, var(--custom-hex), black 60%);
    --sidebar-bg-active: #2a2a3e; --sidebar-bg-active: color-mix(in srgb, var(--custom-hex), black 60%);
    --sidebar-border: #3a3a4e; --sidebar-border: color-mix(in srgb, var(--custom-hex), black 40%);
}

/* ---- Dark mode (per-user preference, layered on any scheme) ---- */
body.dark {
    --surface:          #0f172a;
    --surface-elevated: #1e293b;
    --surface-sunken:   #020617;
    --surface-overlay:  rgba(0, 0, 0, 0.7);
    --text:             #f1f5f9;
    --text-muted:       #94a3b8;
    --text-subtle:      #64748b;
    --border:           #334155;
    --border-strong:    #475569;
    --shadow-sm:        0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md:        0 4px 6px rgba(0, 0, 0, 0.5);

    /* Invert the lightest grays so existing rules using --gray-50/100/200 as
       surfaces (zebra rows, hover bg, table heads) flip cleanly. Mid+dark
       grays stay as-is; they're typically used for text and stay readable. */
    --gray-50:  #1e293b;
    --gray-100: #334155;
    --gray-200: #475569;

    /* The scheme-X "tint" used for zebra rows and accents — flip to a dark
       translucent of the brand color so it still reads as a tint of the accent. */
    --blue-tint: rgba(255, 255, 255, 0.04);

    /* Lighten the dark brand variant so text using it (headings, labels, values)
       stays readable on dark surfaces. Mixes the current scheme's --blue with
       white so it works across all schemes. 55% white because dark brand hues
       (indigo #2E2A6A, black) need that much to clear 4.5:1 on --surface-elevated;
       35% left them at ~3.3:1. Button hovers that use --blue-dark as a
       BACKGROUND are compensated by the body.dark hover group below. */
    --blue-dark: color-mix(in srgb, var(--blue), white 55%);

    --surface-success-tint: rgba(34, 197, 94, 0.15);
    --surface-warning-tint: rgba(245, 158, 11, 0.15);
    --surface-info-tint:    rgba(59, 130, 246, 0.18);
    --surface-error-tint:   rgba(239, 68, 68, 0.18);
    --surface-purple-tint:  rgba(168, 85, 247, 0.18);
    --surface-yellow-tint:  rgba(234, 179, 8, 0.18);
    --surface-orange-tint:  rgba(251, 146, 60, 0.18);

    /* Status text colors lighten in dark mode for readability on dark surfaces */
    --green:        #4ade80;
    --green-dark:   #22c55e;
    --red:          #f87171;
    --red-dark:     #ef4444;
    --orange:       #fb923c;
    --purple:       #a78bfa;

    /* Brand vars used as text/borders need to flip too */
    --brand-text:        var(--text);
    --brand-indigo:      #a5b4fc;
    --brand-card-bg:     rgba(255, 255, 255, 0.04);
    --brand-card-border: rgba(255, 255, 255, 0.08);
    --brand-cloud:       var(--surface-elevated);

    /* Status colors used as TEXT on tinted backgrounds (dashboard stat cards etc).
       In light mode these are darkened brand variants (#b45309, #166534, #1d4ed8);
       in dark mode they become lighter for contrast. */
    --text-success: #4ade80;
    --text-warning: #fbbf24;
    --text-info:    #60a5fa;
    --text-error:   #fca5a5;
    --text-purple:  #c4b5fd;
}

/* Browsers with relative color syntax (Chrome 119+/Safari 16.4+/FF 128+):
   floor the LIGHTNESS so accent text clears ~7:1 on dark surfaces for every
   scheme equally, keeping the brand hue; capped chroma stops saturated
   schemes from vibrating on dark. MUST live in @supports: custom properties
   accept any token stream at parse time, so an unguarded later declaration
   would win the cascade even in browsers that can't resolve it, killing the
   color-mix fallback at var() substitution time. */
@supports (color: oklch(from red l c h)) {
    body.dark {
        --blue-dark: oklch(from var(--blue) max(l, 0.78) min(c, 0.13) h);
    }
}

/* Solid accent buttons (white labels) hover on --blue-dark, which dark mode
   now lightens heavily for TEXT contrast — as a hover BACKGROUND that would
   wash out the white label. Darken instead; deepening reads naturally on a
   dark UI. Keep this list in sync with `background: var(--blue-dark)` hovers. */
body.dark .btn-blue:hover,
body.dark .btn-change-job:hover,
body.dark .btn-capture:hover,
body.dark .week-nav .btn-today:hover,
body.dark .copy-creds-btn:hover,
body.dark .jh-upload-bar label:hover,
body.dark .settings-body input[type="file"]::file-selector-button:hover,
body.dark .btn-next:hover {
    background: color-mix(in srgb, var(--blue), black 18%);
}

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

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--surface-sunken);
    color: var(--text);
    line-height: 1.5;
    min-height: 100vh;
}

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
/* Dark mode: the base link color is raw --blue, which is NOT lightened in dark
   mode (only --blue-dark is). So unstyled text links (customer names, invoice
   numbers, template names, guide quick-links, etc.) render dark-on-dark. Flip
   plain links to the lightened brand variant. Scoped to a:not([class]) so it
   never recolors .btn-* link-buttons (which set their own text color). */
body.dark a:not([class]) { color: var(--blue-dark); }

h2 { font-size: 22px; margin-bottom: 16px; }

/* ============================================================
   Buttons
   ============================================================ */

.btn {
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    color: #fff;
    transition: background 0.2s;
    text-decoration: none;
    display: inline-block;
    line-height: 1.4;
}
.btn:hover { text-decoration: none; }
/* Account > Backups: "Back up now" is a live action (blue) and reads as unavailable
   when it is disabled; scoped to its form so no other button changes. */
.backup-now-form .btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-sm { padding: 6px 14px; font-size: 13px; }
.btn-blue { background: var(--blue); }
.btn-blue:hover { background: var(--blue-dark); }
/* Outline toggle (e.g. inactive segmented buttons): readable on white. */
.btn-toggle { background: var(--blue-tint); color: var(--blue-dark); border: 1px solid var(--blue-dark); }
.btn-toggle:hover { background: var(--surface-elevated); }
.btn-green { background: var(--green); }
.btn-green:hover { background: var(--green-dark); }
.btn-red { background: var(--red); }
.btn-red:hover { background: var(--red-dark); }
.btn-orange { background: var(--orange); color: #fff; }
.btn-orange:hover { background: #c2410c; }
.btn-purple { background: var(--purple); color: #fff; }

/* ============================================================
   Badges
   ============================================================ */

.badge {
    display: inline-block;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.badge-active { background: #dcfce7; color: #166534; }
.badge-inactive { background: #fee2e2; color: #991b1b; }
.badge-processing { background: #fff7ed; color: #9a3412; }
.badge-review { background: #fff7ed; color: #9a3412; }
.badge-complete, .badge-completed { background: #dcfce7; color: #166534; }
.badge-error { background: #fee2e2; color: #991b1b; }
.badge-transcribing { background: #dbeafe; color: #1d4ed8; }
.badge-needs_review { background: #fef3c7; color: #92400e; }
.badge-mobile { background: #dbeafe; color: #1e40af; }
.badge-manual { background: #fef3c7; color: #92400e; }
.badge-dashboard { background: #f3e8ff; color: #7e22ce; }
.badge-system { background: #e5e7eb; color: #374151; }
.badge-gps-refused { background: #fde8e8; color: #991b1b; }

/* Semantic badge color utilities */
.badge-blue         { background: #dbeafe; color: #1d4ed8; }
.badge-indigo       { background: #e0e7ff; color: #3730a3; }
.badge-green        { background: #dcfce7; color: #15803d; }
.badge-yellow       { background: #fef3c7; color: #92400e; }
.badge-yellow-alt   { background: #fef9c3; color: #854d0e; }
.badge-red          { background: #fee2e2; color: #991b1b; }
.badge-gray         { background: #f3f4f6; color: #6b7280; }
.badge-gray-dark    { background: #f3f4f6; color: #374151; }
.badge-purple       { background: #f3e8ff; color: #7e22ce; }
.badge-purple-solid { background: #7c3aed; color: #fff; }
.badge-blue-solid   { background: #2563eb; color: #fff; }

/* Dark-mode: map the light-pastel status badges onto flipping tint + status-text
   tokens so they stop reading as bright light islands on dark admin tables.
   (Solid badges above keep white-on-color and need no override.) */
body.dark .badge-active,
body.dark .badge-complete,
body.dark .badge-completed,
body.dark .badge-green { background: var(--surface-success-tint); color: var(--text-success); }
body.dark .badge-inactive,
body.dark .badge-error,
body.dark .badge-red,
body.dark .badge-gps-refused { background: var(--surface-error-tint); color: var(--text-error); }
body.dark .badge-processing,
body.dark .badge-review { background: var(--surface-orange-tint); color: var(--text-warning); }
body.dark .badge-needs_review,
body.dark .badge-manual,
body.dark .badge-yellow,
body.dark .badge-yellow-alt { background: var(--surface-warning-tint); color: var(--text-warning); }
body.dark .badge-transcribing,
body.dark .badge-mobile,
body.dark .badge-blue,
body.dark .badge-indigo { background: var(--surface-info-tint); color: var(--text-info); }
body.dark .badge-purple,
body.dark .badge-dashboard { background: var(--surface-purple-tint); color: var(--text-purple); }
body.dark .badge-system,
body.dark .badge-gray,
body.dark .badge-gray-dark { background: var(--gray-100); color: var(--text-muted); }

/* BDB Support access pills — mixed-case content (e.g. "Until 4/30 5:00 PM"),
   so they don't reuse `.badge` (which uppercases via letter-spacing). */
.bdb-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    border: 1px solid;
    font-size: 12px;
    font-weight: 600;
}
.bdb-pill-permanent { background: var(--blue-tint); color: var(--blue-dark); border-color: var(--blue); }
.bdb-pill-active    { background: #e7f7ec; color: #1e7a3a; border-color: var(--green); }
.bdb-pill-receipts  { background: var(--blue-tint); color: var(--blue-dark); border-color: var(--blue); font-weight: 500; }
.bdb-pill-none      { background: var(--gray-50); color: var(--gray-400); border-color: var(--gray-200); font-weight: 500; }

/* ============================================================
   Admin Layout
   ============================================================ */

.admin-layout {
    max-width: 100%;
    margin-left: var(--sidebar-width);
    padding: 20px 40px;
    transition: margin-left var(--sidebar-transition);
}

img.admin-company-banner {
    float: right;
    max-height: 64px;
    max-width: 180px;
    object-fit: contain;
    border-radius: 12px;
    margin: 0 0 16px 20px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(46, 42, 106, 0.1);
    box-shadow: 0 12px 28px rgba(46, 42, 106, 0.08);
    position: relative;
    z-index: 5;
}

/* ---- Navigation (see sidebar section at bottom) ---- */

/* ---- Flash messages ---- */

.flash {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 14px;
    font-weight: 500;
}
.flash-success { background: var(--surface-success-tint); color: var(--text-success); border: 1px solid #bbf7d0; }
.flash-error { background: var(--surface-error-tint); color: var(--text-error); border: 1px solid #fecaca; }
.flash-info { background: var(--surface-info-tint); color: var(--text-info); border: 1px solid #bfdbfe; }

/* ---- Stat Cards ---- */

.stat-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
.stat-card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--brand-card-border);
    border-radius: var(--brand-radius);
    padding: 20px;
    text-align: center;
    box-shadow: var(--brand-shadow);
    transition: box-shadow 0.3s, transform 0.3s;
    will-change: transform;
    cursor: default;
}
.stat-card:hover {
    /* Lift the hovered card above its sibling grid-items so its help-tip
       popup isn't painted under the neighboring card. will-change/transform
       make each card its own stacking context, trapping the tip's z-index;
       raising the card (like .gauge-wrap does) frees it. */
    z-index: 100;
    box-shadow: 0 8px 24px rgba(46,42,106,0.14);
    transform: translateY(-3px);
}
a.stat-card-link, a.stat-card.stat-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}
a.stat-card-link:hover {
    box-shadow: 0 10px 28px rgba(46,42,106,0.18);
    transform: translateY(-3px);
    filter: brightness(1.02);
}

/* Action-menu dropdowns (Quick SMS, Email modal, etc.) */
.action-menu { position: relative; display: inline-block; }
.action-menu > summary { list-style: none; cursor: pointer; display: inline-block; }
.action-menu > summary::-webkit-details-marker { display: none; }
.action-pop {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 20;
    background: var(--surface, #fff);
    border: 1px solid var(--blue);
    border-radius: 8px;
    padding: 12px;
    min-width: 320px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}
/* Right-aligned variant for popovers anchored to the end of their container,
   e.g. the SMS quick menu in the dashboard's per-row action cell. */
.action-pop.action-pop-right { left: auto; right: 0; }

/* Collapsible <details> dashboard sections — summary styled like an h3 with
   a leading triangle indicator that flips when expanded. */
.appointments-collapse > .appointments-summary {
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.appointments-collapse > .appointments-summary::-webkit-details-marker { display: none; }
.appointments-collapse > .appointments-summary::before {
    content: "▶ ";
    color: var(--blue-dark);
    font-size: 13px;
    display: inline-block;
    margin-right: 4px;
    transition: transform 0.15s;
}
.appointments-collapse[open] > .appointments-summary::before {
    content: "▼ ";
}
.sms-menu { min-width: 360px; max-width: 460px; }
.sms-template-link {
    display: block;
    padding: 8px 10px;
    margin-bottom: 4px;
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    text-decoration: none;
    color: inherit;
    transition: background 0.1s, border-color 0.1s;
}
.sms-template-link:hover {
    background: var(--blue-tint);
    border-color: var(--blue);
}
.sms-template-label {
    font-weight: 600;
    font-size: 13px;
    color: var(--blue-dark);
}
.sms-template-preview {
    font-size: 11px;
    color: var(--text-subtle);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.stat-card .stat-value {
    font-family: var(--ui-font-data);
    font-size: 28px;
    font-weight: 700;
    color: var(--brand-text);
}
.stat-card .stat-label {
    font-family: var(--ui-font-reading);
    font-size: 13px;
    color: var(--text-subtle);
    margin-top: 4px;
    position: relative;
    padding: 0 20px;
}
.stat-card .stat-label .help-tip {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 0;
}
.stat-card.stat-alert {
    border-color: var(--orange);
    background: var(--surface-orange-tint);
}
.stat-card.stat-alert .stat-value { color: var(--orange); }
.stat-card.stat-blue {
    border-color: var(--blue);
    background: var(--surface-info-tint);
}
.stat-card.stat-green {
    border-color: var(--green);
    background: var(--surface-success-tint);
}
.stat-card.stat-red {
    border-color: var(--red);
    background: var(--surface-error-tint);
}

/* KPI grid — 5 columns */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}
@media (max-width: 768px) {
    .kpi-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Detail Header ---- */

.detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.detail-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ---- Company Cards (BDB Dashboard) ---- */

.company-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
.company-card {
    display: block;
    background: var(--surface);
    border: 1px solid var(--brand-card-border);
    border-radius: var(--brand-radius);
    padding: 24px;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--brand-shadow);
    transition: border-color 0.3s, box-shadow 0.3s;
}
.company-card:hover {
    border-color: rgba(46,42,106,0.35);
    box-shadow: 0 6px 20px rgba(46,42,106,0.1);
    text-decoration: none;
}
.company-card-inactive {
    opacity: 0.6;
    border-color: var(--gray-200);
}
.company-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}
.company-card-header h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    margin: 0;
    flex: 1;
}
.company-card-logo {
    max-width: 40px;
    max-height: 32px;
    border-radius: 4px;
}
.company-card-stats {
    display: flex;
    gap: 16px;
}
.company-card-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}
.company-card-stat-value {
    font-family: var(--ui-font-data);
    font-size: 20px;
    font-weight: 700;
    color: var(--brand-text);
}
.company-card-stat-active {
    color: var(--green);
}
.company-card-stat-label {
    font-family: var(--ui-font-reading);
    font-size: 12px;
    color: var(--text-subtle);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.company-card-form {
    margin: 0;
}
.company-card-button {
    width: 100%;
    text-align: left;
    cursor: pointer;
    font: inherit;
}
.company-card-button:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 3px;
}

/* ---- Tables ---- */

.table-wrap { overflow-x: auto; position: relative; scrollbar-gutter: stable; }
.table-wrap::-webkit-scrollbar { height: 10px; }
.table-wrap::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 5px; min-width: 40px; }
.table-wrap::-webkit-scrollbar-thumb:hover { background: var(--gray-500); }
.table-wrap::-webkit-scrollbar-track { background: var(--gray-100); border-radius: 5px; }
.table-responsive { overflow-x: auto; }

table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
    font-size: 13px;
}
thead th {
    background: var(--gray-50);
    padding: 10px 12px;
    text-align: left;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
    border-bottom: 2px solid var(--blue);
}
tbody td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--gray-100);
    white-space: nowrap;
}
/* Alternate-row shading is owned by ui-foundation.css (--ui-row-stripe). */
tbody tr:hover:not(:where(.sortable-ghost, .sortable-ghost > tr)) { background: var(--ui-row-hover, var(--gray-100)); --ui-row-fill: var(--ui-row-hover, var(--gray-100)); }
tbody tr.row-flagged { background: var(--surface-yellow-tint); }
tbody tr.row-flagged:hover { background: var(--surface-warning-tint); }

/* Allow these columns to wrap/shrink on smaller screens */
td.td-wrap, th.th-wrap {
    white-space: normal;
    word-break: break-word;
}
/* Clipped cell — inner div limits visible lines and hides overflow */
td .td-clip {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
/* Truncate with ellipsis — shows full text on hover via title attr */
td.td-truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 0;   /* forces ellipsis inside table-layout:fixed cells */
}

/* ---- Meta Cards ---- */

.meta-card {
    background: var(--surface);
    border: 1px solid var(--blue);
    border-radius: var(--radius);
    padding: 16px 24px;
    margin-bottom: 16px;
}
.meta-card ul, .meta-card ol { padding-left: 28px; margin-bottom: 8px; }
.meta-card li { margin-bottom: 4px; font-size: 14px; line-height: 1.6; }
.meta-card ul ul { margin-top: 4px; margin-bottom: 4px; }
.meta-card .form-row {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap;
}
.meta-card .form-group {
    flex: 1;
    min-width: 140px;
}
.meta-card .form-group label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-subtle);
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.meta-card .form-group input {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--blue);
    border-radius: 6px;
    font-size: 14px;
    background: var(--gray-50);
}

/* ---- Forms ---- */

.form-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.form-group label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
}
.form-group input,
.form-group select,
.form-group textarea {
    padding: 8px 12px;
    font-size: 14px;
    border: 1px solid var(--blue);
    border-radius: 6px;
    background: var(--gray-50);
    color: var(--text);
    width: 100%;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.form-row {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap;
}

/* ---- Filter bar ---- */

.filter-bar {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: flex-end;
    margin-bottom: 20px;
    padding: 16px;
    background: var(--gray-50);
    border: 1px solid var(--blue);
    border-radius: var(--radius);
}
.filter-bar .form-group { min-width: 140px; flex: 1; }

/* ---- Token selector ---- */

.token-selector {
    margin-bottom: 20px;
    display: flex;
    gap: 12px;
    align-items: center;
}
.token-selector label { font-weight: 600; font-size: 14px; white-space: nowrap; }
.token-selector select {
    padding: 8px 12px;
    font-size: 14px;
    border: 1px solid var(--blue);
    border-radius: 6px;
    min-width: 200px;
    background: var(--gray-50);
}

/* Token URL display */
.token-url {
    font-family: monospace;
    font-size: 13px;
    color: var(--text-subtle);
    word-break: break-all;
}

/* ---- Settings Grid ---- */
.settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
}

/* ---- Entry detail layout ---- */

.entry-detail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
}
.entry-detail .detail-map {
    min-height: 350px;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--gray-200);
    position: relative;
    z-index: 0;
    isolation: isolate;
}
.entry-detail .detail-info { }

.detail-field {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--gray-100);
    font-size: 14px;
}
.detail-field .label { color: var(--text-subtle); font-weight: 500; }
.detail-field .value { font-weight: 600; text-align: right; }

.distance-ok { color: var(--green); }
.distance-flag { color: var(--red); font-weight: 700; }

/* ============================================================
   Login Page
   ============================================================ */

.login-container {
    max-width: 400px;
    margin: 80px auto;
    padding: 32px;
    background: var(--surface);
    border-radius: var(--radius);
    border: 1px solid var(--gray-200);
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
}
.login-container h1 {
    text-align: center;
    margin-bottom: 24px;
    color: var(--text);
    font-size: 24px;
}
.login-container .form-group { margin-bottom: 16px; }
.login-container .btn { width: 100%; text-align: center; }

/* ============================================================
   Client / Timekeeper Page
   ============================================================ */

.timekeeper-container {
    max-width: 500px;
    margin: 0 auto;
    padding: 20px 24px;
}

.timekeeper-header {
    text-align: center;
    padding: 20px 0 16px;
    border-bottom: 1px solid var(--gray-200);
    margin-bottom: 20px;
    position: relative;
}
.timekeeper-header .header-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}
.timekeeper-header h1 {
    font-size: 24px;
    color: var(--text);
}
.timekeeper-header .company-logo {
    max-width: 120px;
    max-height: 60px;
}
.timekeeper-header .help-link,
.capture-header .help-link {
    position: absolute;
    bottom: 16px;
    right: 0;
    font-size: 13px;
    color: var(--blue-dark);
    padding: 3px 10px;
    border: 1px solid var(--blue);
    border-radius: 6px;
    text-decoration: none;
}

.tk-section {
    margin-bottom: 20px;
}
.tk-section label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.tk-select {
    width: 100%;
    padding: 12px;
    font-size: 16px;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    background: var(--surface);
    appearance: auto;
}

/* Clock buttons */
.btn-clock {
    width: 100%;
    padding: 20px;
    font-size: 22px;
    font-weight: 700;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    color: #fff;
    transition: background 0.2s, transform 0.1s;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.btn-clock:active { transform: scale(0.98); }
.btn-clock-in { background: var(--green); }
.btn-clock-in:hover { background: var(--green-dark); }
.btn-clock-out { background: var(--red); }
.btn-clock-out:hover { background: var(--red-dark); }
.btn-change-job { background: var(--blue); }
.btn-change-job:hover { background: var(--blue-dark); }
.btn-cancel { background: var(--gray-400); }
.btn-cancel:hover { background: var(--gray-500); }
.btn-clock:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.gps-status {
    text-align: center;
    font-size: 12px;
    color: var(--text-subtle);
    margin-top: 8px;
}
.gps-status.gps-ok { color: var(--green); }
.gps-status.gps-error { color: var(--red); }

.active-info {
    text-align: center;
    font-size: 14px;
    color: var(--text-muted);
    margin-top: 8px;
    padding: 12px;
    background: var(--surface-warning-tint);
    border-radius: 8px;
}

.status-box {
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    text-align: center;
}
.status-clocked-in {
    background: var(--surface-success-tint);
    color: var(--text-success);
    border: 1px solid #bbf7d0;
}
.status-clocked-out {
    background: var(--gray-100);
    color: var(--text-muted);
}

/* Today's entries */
.today-entry {
    padding: 12px;
    background: var(--surface);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    margin-bottom: 8px;
    font-size: 13px;
}
.today-entry .entry-job { font-weight: 600; color: var(--text); }
.today-entry .entry-times { color: var(--text-muted); margin-top: 4px; }
.today-entry .entry-hours { font-weight: 700; color: var(--blue-dark); }

/* Result messages */
.result-success {
    padding: 16px;
    background: var(--surface-success-tint);
    color: var(--text-success);
    border-radius: 8px;
    text-align: center;
    font-weight: 600;
}
.result-error {
    padding: 16px;
    background: var(--surface-error-tint);
    color: var(--text-error);
    border-radius: 8px;
    text-align: center;
    font-weight: 600;
}

/* ============================================================
   Receipt Capture App (Mobile)
   ============================================================ */

.capture-app,
.capture-container {
    max-width: 500px;
    margin: 0 auto;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
}

.company-logo {
    max-height: 80px;
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
}

.capture-header {
    text-align: center;
    padding: 12px 0;
    border-bottom: 2px solid var(--gray-200);
    margin-bottom: 16px;
    position: relative;
}

.header-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.header-text {
    text-align: left;
}

.capture-header h1 {
    font-size: 18px;
    color: var(--text-subtle);
    font-weight: 600;
    margin-top: 2px;
}

.capture-header .company-name {
    font-size: 24px;
    color: var(--blue);
    font-weight: 700;
}

.step-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.step { display: none; width: 100%; }
.step.active { display: flex; flex-direction: column; align-items: center; gap: 20px; }

/* Big action buttons */
.btn-capture, .btn-record, .btn-submit {
    width: 100%;
    max-width: 320px;
    padding: 24px 32px;
    font-size: 20px;
    font-weight: 700;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    color: #fff;
    transition: background 0.2s, transform 0.1s;
    -webkit-tap-highlight-color: transparent;
}

.btn-capture:active, .btn-record:active, .btn-submit:active {
    transform: scale(0.97);
}

.btn-capture { background: var(--blue); }
.btn-capture:hover { background: var(--blue-dark); }

.btn-record { background: var(--red); }
.btn-record:hover { background: var(--red-dark); }
.btn-record.recording { background: var(--gray-700); animation: pulse 1.5s infinite; }

.btn-submit { background: var(--green); }
.btn-submit:hover { background: var(--green-dark); }

.btn-secondary {
    background: var(--gray-200);
    color: var(--text-muted);
    padding: 14px 24px;
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    width: 100%;
    max-width: 320px;
}

/* Image preview */
.preview-container {
    width: 100%;
    max-width: 320px;
    border-radius: var(--radius);
    overflow: hidden;
    border: 2px solid var(--gray-200);
}
.preview-container img {
    width: 100%;
    display: block;
}

/* Voice prompt */
.voice-prompt {
    background: var(--gray-100);
    border-radius: var(--radius);
    padding: 20px;
    width: 100%;
    max-width: 320px;
    font-size: 15px;
    color: var(--text-muted);
    line-height: 1.6;
    text-align: center;
}
.voice-prompt strong {
    display: block;
    margin-bottom: 8px;
    font-size: 16px;
    color: var(--text);
}

/* Recording indicator */
.recording-indicator {
    display: none;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    color: var(--red);
}
.recording-indicator.active { display: flex; }

.recording-dot {
    width: 12px;
    height: 12px;
    background: var(--red);
    border-radius: 50%;
    animation: pulse 1s infinite;
}

/* Success screen */
.success-icon {
    width: 80px;
    height: 80px;
    background: var(--green);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 40px;
}

.success-text {
    font-size: 22px;
    font-weight: 700;
    color: var(--green-dark);
}

/* Progress / spinner */
.spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--gray-200);
    border-top-color: var(--blue);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.processing-text {
    font-size: 16px;
    color: var(--text-subtle);
    text-align: center;
}

/* Hidden utility */
.hidden { display: none !important; }

/* ---- Dropdown step (receipt capture job/category selection) ---- */

.dropdown-step {
    width: 100%;
    max-width: 320px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.dropdown-step .form-group {
    margin-bottom: 0;
}
.dropdown-step label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.dropdown-step select {
    width: 100%;
    padding: 12px;
    font-size: 16px;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    background: var(--surface);
    appearance: auto;
}
.dropdown-step .btn-capture:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ============================================================
   Receipt Detail (Admin)
   ============================================================ */

.receipt-detail {
    display: flex;
    gap: 0;
}
.receipt-detail > .rd-preview {
    flex: 0 0 55%;
    min-width: 250px;
    overflow: auto;
    padding-right: 12px;
}
.receipt-detail > .rd-divider {
    flex: 0 0 6px;
    background: var(--gray-200);
    cursor: col-resize;
    border-radius: 3px;
    transition: background 0.15s;
}
.receipt-detail > .rd-divider:hover,
.receipt-detail > .rd-divider.dragging {
    background: var(--blue);
}
.receipt-detail > .receipt-info {
    flex: 1 1 0;
    min-width: 250px;
    padding-left: 12px;
    overflow: auto;
}
.receipt-detail img {
    width: 100%;
    border-radius: var(--radius);
    border: 1px solid var(--gray-200);
}
.receipt-info h3 { margin-bottom: 8px; }
.receipt-info .transcription {
    background: var(--gray-100);
    padding: 16px;
    border-radius: var(--radius);
    margin: 12px 0;
    line-height: 1.6;
}
.receipt-info .download-links {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ---- Processed checkbox (receipt browse) ---- */

.td-checkbox {
    text-align: center;
    width: 40px;
}
.processed-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--green);
}
tbody tr.row-processed {
    background: var(--surface-success-tint) !important;
}
tbody tr.row-processed:hover {
    background: var(--surface-success-tint) !important;
}
tbody tr.row-processed td {
    color: var(--text-subtle);
}
.processed-toggle {
    margin: 12px 0;
    padding: 10px 14px;
    background: var(--gray-100);
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.processed-toggle label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
}

/* ---- Browse nav (receipt browse) ---- */

.browse-nav {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.browse-nav a {
    padding: 8px 16px;
    background: var(--gray-100);
    border-radius: 8px;
    text-decoration: none;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 14px;
}
.browse-nav a:hover, .browse-nav a.active {
    background: var(--blue);
    color: #fff;
}

/* ---- Breadcrumbs ---- */

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    margin-bottom: 16px;
    color: var(--text-subtle);
}
.breadcrumb a {
    color: var(--blue-dark);
    text-decoration: none;
    font-weight: 600;
}
.breadcrumb a:hover {
    text-decoration: underline;
}
.breadcrumb-sep {
    color: var(--gray-300);
    font-weight: 400;
}

/* ---- Sortable table columns ---- */

table.sortable thead th {
    cursor: pointer;
    user-select: none;
}
table.sortable thead th:hover {
    background: var(--gray-200);
}
table.sortable thead th[data-no-sort],
table.sortable thead th:empty {
    cursor: default;
}
table.sortable thead th[data-no-sort]:hover,
table.sortable thead th:empty:hover {
    background: var(--gray-100);
}

/* ---- Inline sort order input ---- */

input.sort-input {
    width: 60px;
    padding: 2px 6px;
    font-size: 14px;
    text-align: center;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    transition: border-color 0.15s;
    -moz-appearance: textfield;
}
input.sort-input::-webkit-outer-spin-button,
input.sort-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
input.sort-input:hover,
input.sort-input:focus {
    border-color: var(--gray-300);
    background: var(--surface);
    outline: none;
}

/* ---- Resizable table columns ---- */

table.resizable th {
    position: relative;
    overflow: hidden;
}
table.resizable th .resize-handle {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    cursor: col-resize;
    background: transparent;
}
table.resizable th .resize-handle:hover,
table.resizable th .resize-handle.active {
    background: var(--blue);
    opacity: 0.4;
}

/* ============================================================
   Company Home Screen
   ============================================================ */

.home-container {
    max-width: 500px;
    margin: 0 auto;
    padding: 16px 24px;
    display: flex;
    flex-direction: column;
}

.home-header {
    text-align: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--gray-200);
    margin-bottom: 16px;
}
.home-header .header-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}
.home-header .company-logo {
    max-width: 140px;
    max-height: 70px;
}
.home-header h1 {
    font-size: 26px;
    color: var(--text);
    margin-bottom: 4px;
}
.home-header p {
    font-size: 14px;
    color: var(--text-subtle);
}

.back-to-home {
    display: inline-block;
    font-size: 15px;
    font-weight: 600;
    color: var(--blue-dark);
    margin-top: 8px;
}

.home-tools {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.home-tool-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 18px 12px;
    background: var(--surface);
    border: 2px solid var(--blue);
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--text);
    font-size: 15px;
    font-weight: 700;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.1s;
    -webkit-tap-highlight-color: transparent;
    text-align: center;
    min-height: 90px;
}
.home-tool-btn:hover {
    border-color: var(--blue);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.1);
    text-decoration: none;
}
.home-tool-btn:active {
    transform: scale(0.97);
}
.home-tool-btn .tool-icon {
    font-size: 32px;
    line-height: 1;
}
.home-tool-btn .tool-label {
    font-size: 14px;
    color: var(--text-muted);
}

/* ============================================================
   Scheduler
   ============================================================ */

.scheduler-container {
    margin-bottom: 24px;
}

.week-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 24px;
    padding: 12px;
    background: var(--surface);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
}
.week-nav button {
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.2s;
}
.week-nav button:hover {
    background: var(--gray-100);
}
.week-nav .week-label {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    min-width: 200px;
    text-align: center;
}
.week-nav .btn-today {
    background: var(--blue);
    color: #fff;
    border-color: var(--blue);
}
.week-nav .btn-today:hover {
    background: var(--blue-dark);
}

.schedule-grid {
    overflow-x: auto;
    background: var(--surface);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
}
.schedule-grid table {
    min-width: 800px;
    font-size: 13px;
}
.schedule-grid thead th {
    text-align: center;
    min-width: 120px;
    font-size: 12px;
}
.schedule-grid thead th.col-employee {
    text-align: left;
    min-width: 140px;
}

.schedule-cell {
    vertical-align: top;
    padding: 6px 8px;
    min-height: 60px;
    position: relative;
    cursor: pointer;
    border-right: 1px solid var(--gray-100);
}
.schedule-cell:hover {
    background: var(--surface-info-tint);
}
.schedule-cell.today {
    background: var(--surface-info-tint);
}

.schedule-entry {
    padding: 4px 8px;
    margin-bottom: 4px;
    border-radius: 4px;
    font-size: 11px;
    line-height: 1.3;
    cursor: pointer;
    transition: opacity 0.2s;
}
.schedule-entry:hover {
    opacity: 0.8;
}
.schedule-entry .entry-time {
    font-weight: 700;
}
.schedule-entry .entry-job {
    font-size: 10px;
    opacity: 0.9;
}

.shift-badge,
.status-badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.shift-badge-full_day { background: #dbeafe; color: #1e40af; }
.shift-badge-morning { background: #fef3c7; color: #92400e; }
.shift-badge-afternoon { background: #fce7f3; color: #9d174d; }
.shift-badge-custom { background: #e5e7eb; color: #374151; }
.status-badge-clocked_in { background: #dcfce7; color: #166534; }
.status-badge-completed  { background: #dbeafe; color: #1e40af; }
.status-badge-late       { background: #fee2e2; color: #991b1b; }
.status-badge-upcoming   { background: #e5e7eb; color: #374151; }
body.dark .shift-badge-full_day,
body.dark .status-badge-completed { background: var(--surface-info-tint); color: var(--text-info); }
body.dark .shift-badge-morning { background: var(--surface-warning-tint); color: var(--text-warning); }
body.dark .shift-badge-afternoon { background: var(--surface-purple-tint); color: var(--text-purple); }
body.dark .shift-badge-custom,
body.dark .status-badge-upcoming { background: var(--gray-100); color: var(--text-muted); }
body.dark .status-badge-clocked_in { background: var(--surface-success-tint); color: var(--text-success); }
body.dark .status-badge-late { background: var(--surface-error-tint); color: var(--text-error); }

/* ---- Schedule modal ---- */

.schedule-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}
.schedule-modal-overlay.active {
    display: flex;
}
.schedule-modal {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 24px;
    width: 100%;
    max-width: 440px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}
.schedule-modal h3 {
    font-size: 18px;
    margin-bottom: 16px;
    color: var(--text);
}
.schedule-modal .form-group {
    margin-bottom: 12px;
}
.schedule-modal .modal-actions {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    justify-content: flex-end;
}

.quick-select-btns {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.quick-select-btns button {
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
}
.quick-select-btns button:hover {
    background: var(--gray-100);
}
.quick-select-btns button.active {
    background: var(--blue);
    color: #fff;
    border-color: var(--blue);
}

.custom-time-inputs {
    display: flex;
    gap: 12px;
}
.custom-time-inputs .form-group {
    flex: 1;
}

/* ============================================================
   Job Photos
   ============================================================ */

.photo-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.photo-card {
    background: var(--surface);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    overflow: hidden;
    transition: box-shadow 0.2s;
}
.photo-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.photo-thumb {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}
.photo-card-body {
    padding: 10px 12px;
}
.photo-card-body .photo-caption {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.photo-card-body .photo-date {
    font-size: 11px;
    color: var(--text-subtle);
}
.photo-card-body .photo-actions {
    margin-top: 8px;
    display: flex;
    gap: 8px;
}

/* ---- Job photo capture (client page) ---- */

.job-photo-capture {
    max-width: 500px;
    margin: 0 auto;
    padding: 20px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.job-photo-capture .capture-header {
    margin-bottom: 20px;
}
.job-photo-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    flex: 1;
}
.job-photo-form .form-group {
    width: 100%;
    max-width: 320px;
}
.job-photo-form select,
.job-photo-form input,
.job-photo-form textarea {
    width: 100%;
    padding: 12px;
    font-size: 16px;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    background: var(--surface);
}

/* ============================================================
   Copy Credentials Button
   ============================================================ */

.copy-creds-btn {
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    color: #fff;
    background: var(--blue);
    transition: background 0.2s;
    display: inline-block;
    line-height: 1.4;
}
.copy-creds-btn:hover {
    background: var(--blue-dark);
}

/* ============================================================
   Help Page
   ============================================================ */

.help-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px 28px;
}
.help-container h1 {
    font-size: 22px;
    margin-bottom: 20px;
    color: var(--text);
}
.help-container h2 {
    font-size: 17px;
    margin: 24px 0 8px;
    color: var(--text);
}
.help-container p, .help-container li {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.7;
}
.help-container ul, .help-container ol { padding-left: 28px; margin-bottom: 12px; }

/* ============================================================
   Error Pages
   ============================================================ */

.error-container {
    max-width: 500px;
    margin: 100px auto;
    text-align: center;
    padding: 40px;
}
.error-box {
    background: var(--surface);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 40px;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
}
.error-container h1 {
    font-size: 48px;
    color: var(--gray-300);
    margin-bottom: 12px;
}
.error-container p {
    font-size: 16px;
    color: var(--text-subtle);
}

/* ============================================================
   Guide / Documentation
   ============================================================ */

.guide-container {
    max-width: 800px;
}
.guide-container h3 {
    font-size: 16px;
    color: var(--blue-dark);
    margin: 24px 0 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--gray-200);
}
.guide-container p {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 12px;
    line-height: 1.7;
}
.guide-container ul {
    padding-left: 24px;
    margin-bottom: 16px;
}
.guide-container li {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: 4px;
}
.guide-container code {
    background: var(--gray-100);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 13px;
}

/* ---- Dashboard Sections ---- */

.dash-section {
    margin-top: 24px;
    background: var(--surface);
    border: 1px solid var(--brand-card-border);
    border-radius: var(--brand-radius);
    padding: 24px;
    box-shadow: var(--brand-shadow);
    font-family: var(--ui-font-reading);
    transition: border-color 0.3s, box-shadow 0.3s;
}
.dash-section:hover {
    border-color: rgba(46,42,106,0.35);
    box-shadow: 0 6px 20px rgba(46,42,106,0.1);
}
.dash-section-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--brand-indigo);
    margin: 0 0 16px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--brand-card-border);
}
.dash-empty {
    color: var(--gray-400);
    font-size: 14px;
    font-style: italic;
    padding: 8px 0;
}

/* ============================================================
   Footer
   ============================================================ */

.bdb-footer {
    text-align: center;
    padding: 10px 16px 8px;
    margin-top: 12px;
    border-top: 1px solid var(--gray-200);
    opacity: 0.7;
}
.doc-ref-badge {
    text-align: center;
    font-size: 11px;
    color: var(--gray-400);
    margin: 24px 16px 0;
}
.doc-ref-badge span { margin-right: 4px; }
.doc-ref-badge code {
    cursor: pointer;
    padding: 2px 8px;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 4px;
    color: var(--text-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    user-select: all;
}
.doc-ref-badge code:hover { background: var(--gray-100); color: var(--blue-dark); }
.admin-layout ~ .doc-ref-badge { margin-left: calc(var(--sidebar-width) + 16px); }
.admin-layout ~ .bdb-footer {
    margin-left: var(--sidebar-width);
    transition: margin-left var(--sidebar-transition);
}
.bdb-footer img {
    max-height: 50px;
    max-width: min(260px, 100%);
    object-fit: contain;
    height: auto;
}
body.dark .bdb-footer img {
    filter: brightness(0) invert(1);
}
.bdb-footer .bdb-support {
    display: block;
    font-size: 13px;
    color: var(--text-subtle);
    margin-top: 6px;
}
.bdb-footer .bdb-support a {
    overflow-wrap: anywhere;
    color: var(--text-subtle);
    text-decoration: none;
}
.bdb-footer .bdb-support a:hover {
    color: var(--blue-dark);
}

/* Admin pages: larger logo */
.admin-layout ~ .bdb-footer img {
    max-height: 150px;
    max-width: min(500px, 100%);
}

/* ============================================================
   Batch Photo Upload (Job Photos)
   ============================================================ */

.batch-photo-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--surface);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 8px;
    transition: border-color 0.2s, background 0.2s;
}
.batch-photo-card .batch-thumb {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
}
.batch-photo-card .batch-card-body {
    flex: 1;
    min-width: 0;
}
.batch-photo-card .batch-card-body input {
    width: 100%;
    padding: 6px 8px;
    font-size: 14px;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
}
.batch-photo-card .batch-status {
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.batch-photo-card .batch-remove {
    background: none;
    border: none;
    color: var(--gray-400);
    font-size: 20px;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
}
.batch-photo-card .batch-remove:hover {
    color: var(--red);
}

.batch-photo-card.uploading {
    border-color: var(--blue);
    background: var(--surface-info-tint);
}
.batch-photo-card.uploading .batch-status {
    color: var(--blue);
}

.batch-photo-card.done {
    border-color: var(--green);
    background: var(--surface-success-tint);
}
.batch-photo-card.done .batch-status {
    color: var(--green);
}

.batch-photo-card.error {
    border-color: var(--red);
    background: var(--surface-error-tint);
}
.batch-photo-card.error .batch-status {
    color: var(--red);
}

.batch-progress {
    width: 100%;
    height: 6px;
    background: var(--gray-200);
    border-radius: 3px;
    overflow: hidden;
    margin: 12px 0;
    display: none;
}
.batch-progress .batch-progress-bar {
    height: 100%;
    background: var(--blue);
    border-radius: 3px;
    transition: width 0.3s;
    width: 0%;
}

/* ============================================================
   Animations
   ============================================================ */

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

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Brief attention flash for a field a link sent the user to (e.g. the CFO
   "Update" link pointing at Cash on Hand). Amber ring fades out. */
@keyframes field-flash {
    0%   { box-shadow: 0 0 0 0 rgba(234, 88, 12, 0.55); background-color: #fff7ed; }
    100% { box-shadow: 0 0 0 8px rgba(234, 88, 12, 0); background-color: transparent; }
}
.field-flash {
    animation: field-flash 1.8s ease-out 1;
    border-color: var(--orange) !important;
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 768px) {
    .admin-layout { padding: 12px 16px; }
    .stat-cards { grid-template-columns: repeat(2, 1fr); }
    .detail-header { flex-direction: column; }
    .filter-bar { flex-direction: column; }
    .entry-detail { grid-template-columns: 1fr; }
    .settings-grid { grid-template-columns: 1fr; }
    .form-row { flex-direction: column; }
    .token-selector { flex-direction: column; align-items: stretch; }
    .company-cards { grid-template-columns: 1fr; }
    .schedule-modal { margin: 16px; max-width: calc(100% - 32px); }
    .photo-gallery { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

@media (max-width: 640px) {
    .receipt-detail { flex-direction: column; }
    .receipt-detail > .rd-preview { flex: none; width: 100%; min-width: 0; padding-right: 0; }
    .receipt-detail > .rd-divider { display: none; }
    .receipt-detail > .receipt-info { flex: none; width: 100%; min-width: 0; padding-left: 0; }
    .home-tools { gap: 10px; }
    .home-tool-btn { padding: 14px 10px; min-height: 80px; }
    .week-nav { flex-wrap: wrap; gap: 8px; }
    .custom-time-inputs { flex-direction: column; }
    /* Keep the iOS focus-zoom floor without capping shared text sizing. */
    input, select, textarea { font-size: max(16px, var(--ui-text-size, 16px)) !important; }
}

/* ── Library Grid ───────────────────────────────────── */
.library-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
    margin-top: 16px;
}
.library-card {
    background: var(--surface);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}
.library-card img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}
.library-card-info {
    padding: 8px;
    font-size: 12px;
}
.library-search {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

/* ── Finance: Stat sub-text ──────────────────────── */
.stat-card .stat-sub {
    font-size: 11px;
    color: var(--gray-400);
    margin-top: 2px;
}

/* ── Finance: Semi-circle Gauge ──────────────────── */
.gauge-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 140px;
    position: relative;
    padding: 12px 8px;
    border-radius: var(--brand-radius);
    transition: box-shadow 0.3s, transform 0.3s;
    will-change: transform;
    cursor: default;
}
.gauge-wrap:hover {
    z-index: 100;
    box-shadow: 0 6px 20px rgba(46,42,106,0.12);
    transform: translateY(-2px);
}
.gauge {
    position: relative;
    width: 140px;
    height: 70px;
    overflow: hidden;
}
.gauge-bg {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: conic-gradient(
        from 270deg,
        #dc2626 0deg 60deg,
        #f59e0b 60deg 120deg,
        #16a34a 120deg 180deg,
        transparent 180deg 360deg
    );
}
.gauge-needle {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 2px;
    height: 60px;
    background: var(--text);
    transform-origin: bottom center;
    transform: translateX(-50%) rotate(calc(var(--gauge-angle, 90deg) - 90deg));
    border-radius: 2px 2px 0 0;
    z-index: 2;
}
.gauge-cover {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 50px;
    background: var(--surface);
    border-radius: 50px 50px 0 0;
    z-index: 1;
}
.gauge-value {
    font-family: var(--ui-font-data);
    font-size: 22px;
    font-weight: 700;
    margin-top: 4px;
    position: relative;
    z-index: 10;
}
.gauge-label {
    font-family: var(--ui-font-reading);
    font-size: 12px;
    color: var(--text-subtle);
    text-transform: uppercase;
    margin-top: 2px;
    text-align: center;
    position: relative;
    padding-right: 20px;
    z-index: 10;
}
.gauge-label .help-tip {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 0;
}
.gauge-sub {
    position: relative;
    z-index: 10;
}

/* ── Finance: Mini progress bar for completion % ─── */
.progress-bar-mini { width: 100%; height: 6px; background: var(--gray-200); border-radius: 3px; overflow: hidden; margin-bottom: 2px; }
.progress-bar-fill { height: 100%; border-radius: 3px; background: var(--blue); transition: width 0.3s; }

/* ── Finance: Target inputs ─────────────────────── */
.target-input {
    width: 100%;
    padding: 6px 10px;
    font-size: 15px;
    font-weight: 600;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
}
.target-input:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* ── Finance: Health dots ────────────────────────── */
.health-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
}
.health-green { background: #16a34a; }
.health-yellow { background: #f59e0b; }
.health-red { background: #dc2626; }

/* ── Estimate Detail: Larger form elements ───────── */
.est-label {
    display: block;
    color: var(--brand-text);
    font-size: 13px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}
.est-input {
    width: 100%;
    font-size: 20px;
    padding: 12px 14px;
    margin-top: 4px;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    background: var(--surface-yellow-tint);
    color: var(--text);
}
.est-value {
    font-size: 20px;
    font-weight: 600;
    padding: 12px 0;
    color: var(--text);
}

/* ── Financials: Card wrapper for each item ──────── */
.fin-card {
    background: var(--surface);
    border: 1px solid var(--blue);
    border-radius: 8px;
    padding: 12px 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.fin-label {
    display: block;
    color: var(--text-muted);
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 6px;
}
.fin-card .est-input {
    border-color: var(--gray-300);
    background: var(--surface-yellow-tint);
}

/* ── Estimate Detail: Computed financial readouts ── */
.fin-computed {
    font-family: var(--ui-font-data);
    padding: 12px 12px;
    background: #1e293b;
    border: 2px solid #334155;
    color: #fff;
    border-radius: 6px;
    font-weight: 700;
    font-size: 20px;
    text-align: center;
    letter-spacing: 0.3px;
}

/* ── Financials: Collapsible section header ──────── */
.fin-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}
.fin-section-header .fin-chevron {
    font-size: 10px;
    color: var(--gray-400);
    transition: transform 0.2s;
    margin-left: 8px;
}
.fin-section-header.collapsed .fin-chevron {
    transform: rotate(-90deg);
}
.fin-section-body.collapsed {
    display: none;
}

/* ── Financials: Summary strip ───────────────────── */
.fin-summary-strip {
    display: flex;
    background: var(--surface-info-tint);
    border: 1px solid var(--blue);
    border-radius: 8px;
    margin-bottom: 16px;
    overflow: hidden;
}
.fin-summary-item {
    flex: 1;
    text-align: center;
    padding: 10px 12px;
    border-right: 1px solid var(--blue);
}
.fin-summary-item:last-child {
    border-right: none;
}
.fin-summary-item .fin-summary-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-subtle);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 2px;
}
.fin-summary-item .fin-summary-value {
    font-family: var(--ui-font-data);
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
}

/* ── Financials: Tab bar ─────────────────────────── */
.fin-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--blue);
    margin-bottom: 16px;
}
.fin-tabs button {
    padding: 8px 16px;
    border: 1px solid var(--blue);
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    background: var(--blue-tint);
    color: var(--blue);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: -2px;
    transition: background 0.15s, color 0.15s;
}
.fin-tabs button:hover {
    background: var(--blue);
    color: #fff;
}
.fin-tabs button.active {
    background: var(--blue);
    color: #fff;
    border-color: var(--blue);
    border-bottom: 2px solid var(--blue);
}
/* Dark mode: lighten inactive tab text so it stays readable on the dark surface.
   Active tab keeps brand-color bg + white text. */
body.dark .fin-tabs button:not(.active) {
    color: var(--blue-dark);
    background: var(--surface-elevated);
}
/* Dark mode: form-control text color — inputs default to black via the browser
   user-agent stylesheet, which is invisible on dark surfaces. Force text color
   to flow through the surface var so all inputs/selects/textareas stay readable. */
body.dark input,
body.dark select,
body.dark textarea {
    color: var(--text);
    -webkit-text-fill-color: var(--text);
}
body.dark input::placeholder,
body.dark textarea::placeholder {
    color: var(--text-subtle);
    -webkit-text-fill-color: var(--text-subtle);
    opacity: 1;
}
/* Autofilled fields in webkit get a jarring yellow bg that reads as "this field
   needs attention / is missing" even when filled. Normalize to a normal white
   field background in light mode (the body.dark rule below handles dark). */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text);
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset;
    box-shadow: 0 0 0 1000px #ffffff inset;
    caret-color: var(--text);
}
/* Autofilled fields in webkit get a yellow bg + system-color text. Override. */
body.dark input:-webkit-autofill,
body.dark input:-webkit-autofill:hover,
body.dark input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text);
    -webkit-box-shadow: 0 0 0 1000px var(--surface-elevated) inset;
    box-shadow: 0 0 0 1000px var(--surface-elevated) inset;
    caret-color: var(--text);
}
/* Beats UA stylesheets that set -moz-fieldtext or -webkit-text-fill-color on
   form controls — affects every typed input, not just est-input/target-input. */
body.dark .est-input,
body.dark .target-input,
body.dark input[type="number"],
body.dark input[type="text"],
body.dark input[type="email"],
body.dark input[type="password"],
body.dark input[type="search"],
body.dark input[type="date"],
body.dark input[type="datetime-local"],
body.dark input[type="time"],
body.dark input[type="tel"],
body.dark input[type="url"] {
    color: var(--text);
    -webkit-text-fill-color: var(--text);
}
/* Dark mode: text color above only fixes the foreground. An input that gets no
   background from a component rule (e.g. table-row inputs in admin/users that are
   styled inline with just a border, not wrapped in .form-group) keeps the browser
   default WHITE bg → forced-light text on white = unreadable. Force a dark surface
   on every typed control so readability never depends on a component opting in.
   Excludes checkbox/radio/range/color/file/button inputs, which paint themselves. */
body.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="reset"]),
body.dark select,
body.dark textarea {
    background-color: var(--surface-elevated);
}
/* Dark mode: the native file-input "Choose file" button is painted white by the
   browser UA (excluded from the rule above). Style it for dark surfaces so it
   doesn't render as a white block on every upload control. */
body.dark input[type="file"] { color: var(--text); }
body.dark input[type="file"]::file-selector-button,
body.dark input[type="file"]::-webkit-file-upload-button {
    background-color: var(--surface-elevated);
    color: var(--text);
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    padding: 4px 10px;
    cursor: pointer;
}
.fin-tab-content {
    display: none;
}
.fin-tab-content.active {
    display: block;
}
.fin-tab-content .fin-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
}

/* ── Financials: help-tip inside fin-label ────────── */
.fin-label .help-tip {
    vertical-align: middle;
    margin-left: 4px;
}

/* ============================================================
   BDB Brand — Estimate/Invoice Builder Modernization
   Fonts: Outfit (body/headings) + DM Mono (data/labels)
   ============================================================ */

/* ── Base font for estimate/invoice UI ───────────── */
.est-section,
.est-group,
.est-header-row {
    font-family: var(--ui-font-reading);
}

/* ── Section containers ─────────────────────────── */
.est-section {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--brand-card-border);
    border-radius: var(--brand-radius);
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: var(--brand-shadow);
    transition: border-color 0.3s, box-shadow 0.3s;
}
.est-section:hover {
    border-color: rgba(46,42,106,0.35);
    box-shadow: 0 6px 20px rgba(46,42,106,0.1);
}
.est-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 8px;
}
.est-section-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--brand-indigo);
    margin: 0;
}

/* ── Form layout ────────────────────────────────── */
.est-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}
@media (max-width: 768px) {
    .est-form-grid { grid-template-columns: 1fr; }
}
.est-form-group {
    display: flex;
    flex-direction: column;
}
.est-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

/* ── Token management table ─────────────────────── */
.th-brand {
    text-align: left;
    padding: 6px 10px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--brand-indigo);
    border-bottom: 2px solid var(--brand-card-border);
}
.td-brand {
    padding: 8px 10px;
    border-bottom: 1px solid var(--brand-card-border);
}
.logo-placeholder {
    background: var(--brand-cloud);
    border-radius: 8px;
    border: 1px solid var(--brand-card-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-text);
    opacity: 0.3;
}

/* ── Updated est-input with brand styling ────────── */
.est-input-brand {
    width: 100%;
    font-size: 16px;
    padding: 10px 14px;
    border: 1px solid var(--brand-card-border);
    border-radius: 10px;
    background: var(--brand-cloud);
    color: var(--brand-text);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.est-input-brand:focus {
    outline: none;
    border-color: var(--brand-indigo);
    box-shadow: 0 0 0 3px rgba(46,42,106,0.1);
}

/* ── Data display (DM Mono) ─────────────────────── */
.data-mono {
    font-family: var(--ui-font-data);
    font-weight: 500;
}
.data-value {
    font-family: var(--ui-font-data);
    font-weight: 500;
    font-size: 20px;
    color: var(--brand-text);
}
.data-label {
    font-family: var(--ui-font-data);
    font-weight: 500;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-subtle);
}
.data-timestamp {
    font-family: var(--ui-font-data);
    font-weight: 400;
    font-size: 14px;
    color: var(--text-subtle);
}

/* ── Brand CTA button (Orange) ──────────────────── */
.btn-cta {
    background: var(--brand-orange);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 12px 28px;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
    display: inline-block;
    text-decoration: none;
    line-height: 1.4;
}
.btn-cta:hover {
    background: var(--brand-orange-hover);
    box-shadow: 0 4px 16px rgba(251,91,17,0.3);
    transform: translateY(-1px);
    text-decoration: none;
}
.btn-cta.btn-sm {
    padding: 6px 16px;
    font-size: 13px;
}

/* ── Line item inputs ───────────────────────────── */
.li-input {
    width: 100%;
    padding: 8px 10px;
    font-size: 15px;
    border: 1px solid var(--brand-card-border);
    border-radius: 8px;
    background: var(--brand-cloud);
    color: var(--brand-text);
    transition: border-color 0.2s;
}
.li-input:focus {
    outline: none;
    border-color: var(--brand-indigo);
    box-shadow: 0 0 0 2px rgba(46,42,106,0.08);
}
.li-input-name {
    font-weight: 600;
}
.li-input-price {
    font-family: var(--ui-font-data);
    font-weight: 500;
    text-align: right;
}
.li-input-center {
    text-align: center;
}
.li-input-cost {
    font-family: var(--ui-font-data);
    font-weight: 500;
    text-align: right;
    background: var(--surface-orange-tint);
}
.li-input-readonly {
    font-family: var(--ui-font-data);
    font-weight: 500;
    text-align: right;
    background: var(--brand-card-bg);
    color: var(--text-muted);
    cursor: default;
}
.li-input-desc {
    font-size: 14px;
    color: var(--text-muted);
    background: var(--surface);
    resize: vertical;
    min-height: 34px;
    line-height: 1.5;
}

/* ── Line item badges ───────────────────────────── */
.li-badge {
    font-family: var(--ui-font-data);
    font-size: 11px;
    font-weight: 500;
    padding: 3px 8px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    display: inline-block;
}
.li-badge-ai {
    background: #dcfce7;
    color: #15803d;
}
.li-badge-unmatched {
    background: #fef3c7;
    color: #b45309;
    cursor: help;
}
body.dark .li-badge-ai { background: var(--surface-success-tint); color: var(--text-success); }
body.dark .li-badge-unmatched { background: var(--surface-warning-tint); color: var(--text-warning); }

/* ── Drag-and-drop card pattern (reusable) ──────── */
.drag-grip {
    width: 24px;
    text-align: center;
    cursor: grab;
    color: rgba(46,42,106,0.3);
    font-size: 18px;
    user-select: none;
    padding-top: 8px;
    transition: color 0.2s;
}
.drag-grip:hover {
    color: var(--brand-indigo);
}
.drag-grip:active {
    cursor: grabbing;
}

.drag-card {
    background: var(--surface);
    border: 1px solid var(--brand-card-border);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 8px;
    box-shadow: 0 1px 3px rgba(46,42,106,0.04);
    transition: box-shadow 0.25s, transform 0.25s, border-color 0.25s;
}
.drag-card:hover {
    border-color: rgba(46,42,106,0.25);
    box-shadow: 0 2px 8px rgba(46,42,106,0.08);
}

/* SortableJS states */
.drag-card.sortable-chosen,
tbody.li-group.sortable-chosen {
    box-shadow: 0 8px 24px rgba(46,42,106,0.15);
    transform: scale(1.01);
    border-color: var(--brand-indigo);
    z-index: 10;
}
.drag-card.sortable-ghost,
tbody.li-group.sortable-ghost {
    opacity: 0.4;
    background: var(--brand-card-bg);
}

/* ── Builders: spec sheets + estimate templates ─── */
/* Both builder pages are read side by side by the same operator, so the card
   chrome is one set of rules rather than two that drift apart. */
.spec-builder-hint,
.spec-builder-empty {
    color: var(--text-muted);
    font-size: 14px;
}
.spec-section-grip { display: inline-block; padding-top: 0; }
/* A section with no questions still has to be a drop target. */
.spec-fields,
.est-lines { min-height: 48px; }
.spec-field-head,
.est-line-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.spec-field-label,
.est-line-label { font-size: 15px; }
/* The base .badge carries no colors of its own. An outline off the flipping
   card-border token reads in both themes without a dark-mode override. */
.spec-field-type-chip {
    border: 1px solid var(--brand-card-border);
    color: var(--text-muted);
}
.spec-field-unit,
.est-line-meta { color: var(--text-muted); font-size: 13px; }
.spec-field-actions,
.est-line-actions { margin-left: auto; display: flex; gap: 6px; }
.spec-field-formula,
.spec-field-note {
    color: var(--text-muted);
    font-size: 13px;
    margin: 6px 0 0;
}
.spec-field-warning {
    background: var(--surface-warning-tint);
    color: var(--text-warning);
    border-radius: 8px;
    font-size: 13px;
    margin-top: 6px;
    padding: 6px 10px;
}
.spec-field-edit,
.est-line-edit {
    border-top: 1px solid var(--brand-card-border);
    margin-top: 12px;
    padding-top: 12px;
}
.spec-field-check,
.est-line-check { font-size: 14px; }
.spec-field-advanced { margin: 8px 0 12px; }
.spec-field-advanced summary {
    color: var(--text-muted);
    cursor: pointer;
    font-size: 13px;
}
.calc-arg-row .calc-const { margin-top: 6px; }
.calc-example {
    color: var(--text-muted);
    font-size: 14px;
    margin: 0 0 8px;
}

/* ── Slide-in Side Panel (reusable) ─────────────── */
.wo-panel-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.3);
    z-index: 1000; display: none;
}
.wo-panel-overlay.open { display: block; }
.wo-side-panel {
    position: fixed; top: 0; right: 0; bottom: 0; width: 500px; max-width: 92vw;
    background: var(--surface); box-shadow: -4px 0 24px rgba(0,0,0,0.15);
    z-index: 1001; transform: translateX(100%); transition: transform 0.25s ease;
    overflow-y: auto; display: flex; flex-direction: column;
}
.wo-side-panel.open { transform: translateX(0); }
.wo-panel-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 20px; border-bottom: 1px solid var(--gray-200); flex-shrink: 0;
}
.wo-panel-header h3 { margin: 0; font-size: 17px; }
.wo-panel-close {
    background: none; border: none; font-size: 22px;
    cursor: pointer; color: var(--text-subtle); padding: 4px;
}
.wo-panel-body { padding: 16px 20px; flex: 1; overflow-y: auto; }
.wo-panel-footer {
    padding: 12px 20px; border-top: 1px solid var(--gray-200);
    display: flex; gap: 8px; justify-content: flex-end; flex-shrink: 0;
}

/* ── Dispatch Board ─────────────────────────────── */
.dispatch-layout {
    display: flex;
    gap: 0;
    min-height: calc(100vh - 160px);
}

/* Queue sidebar */
.dispatch-queue {
    width: 240px;
    min-width: 240px;
    border-right: 2px solid var(--blue);
    background: var(--gray-50);
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}
.dispatch-queue__header {
    padding: 10px 12px;
    font-weight: 700;
    font-size: 14px;
    border-bottom: 1px solid var(--gray-200);
    background: var(--surface);
    position: sticky;
    top: 0;
    z-index: 2;
}
.dispatch-queue__list {
    padding: 8px;
    flex: 1;
    min-height: 60px;
}
.dispatch-queue__add {
    padding: 8px 12px;
    border-top: 1px solid var(--gray-200);
    background: var(--surface);
}

/* Day columns area */
.dispatch-grid {
    flex: 1;
    overflow-x: auto;
    overflow-y: auto;
}

/* Week row (used in multi-week views) */
.dispatch-week-row {
    display: flex;
    border-bottom: 1px solid var(--gray-200);
}
.dispatch-week-row--past {
    background: var(--gray-50);
    opacity: 0.75;
}
.dispatch-week-label {
    writing-mode: vertical-lr;
    text-orientation: mixed;
    transform: rotate(180deg);
    padding: 8px 4px;
    font-size: 11px;
    font-weight: 700;
    color: var(--gray-400);
    text-transform: uppercase;
    letter-spacing: 1px;
    border-right: 1px solid var(--gray-200);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
}
.dispatch-week-days {
    display: flex;
    flex: 1;
}

/* Individual day column */
.dispatch-day {
    flex: 1;
    min-width: 120px;
    border-right: 1px solid var(--gray-200);
    display: flex;
    flex-direction: column;
}
.dispatch-day:last-child {
    border-right: none;
}
.dispatch-day__header {
    padding: 6px 8px;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    border-bottom: 2px solid var(--blue);
    color: var(--text-muted);
    text-transform: uppercase;
    background: var(--surface);
    position: sticky;
    top: 0;
    z-index: 2;
}
.dispatch-day__header--today {
    background: var(--surface-info-tint);
    color: var(--blue-dark);
}
.dispatch-day__date {
    font-weight: 400;
    font-size: 11px;
    display: block;
    color: var(--text-subtle);
}
.dispatch-day__list {
    padding: 4px;
    flex: 1;
    min-height: 60px;
}

/* Dispatch cards */
.dispatch-card {
    background: var(--surface);
    border: 1px solid var(--blue);
    border-radius: 6px;
    padding: 6px 8px;
    margin-bottom: 4px;
    font-size: 13px;
    cursor: grab;
    display: flex;
    align-items: flex-start;
    gap: 4px;
    transition: box-shadow 0.2s, border-color 0.2s;
}
.dispatch-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.dispatch-card--queued {
    border-style: dashed;
    border-color: var(--gray-400);
    background: var(--gray-50);
}
.dispatch-card--scheduled {
    border-color: var(--blue);
}
.dispatch-card--compact {
    padding: 2px 6px;
    margin-bottom: 2px;
    font-size: 11px;
    border-radius: 4px;
    align-items: center;
    gap: 4px;
    min-height: 22px;
}

.dispatch-card .drag-grip {
    padding-top: 2px;
    font-size: 14px;
    min-width: 16px;
}

.dispatch-card__body {
    flex: 1;
    min-width: 0;
}
.dispatch-card__title {
    font-weight: 600;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.dispatch-card__title--compact {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dispatch-card__time {
    font-size: 11px;
    color: var(--text-subtle);
}
.dispatch-card__address {
    font-size: 11px;
    color: var(--gray-400);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dispatch-card__badge {
    display: inline-block;
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 8px;
    background: var(--blue-tint);
    color: var(--blue-dark);
    font-weight: 600;
    margin-top: 2px;
}

/* Color bar on card titles */
.dispatch-color-bar {
    display: inline-block;
    width: 4px;
    height: 14px;
    border-radius: 2px;
    flex-shrink: 0;
}
.dispatch-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Drop zone highlight */
.dispatch-drop-zone {
    background: rgba(59, 130, 246, 0.06) !important;
    outline: 2px dashed var(--blue);
    outline-offset: -2px;
}

/* Dragging state */
.dispatch-card.sortable-chosen {
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    transform: scale(1.02);
    border-color: var(--blue);
    z-index: 10;
    opacity: 1;
}
.dispatch-card.sortable-ghost {
    opacity: 0.3;
}
body.dnd-active .dispatch-day__list {
    min-height: 80px;
}

/* Dispatch toolbar */
.dispatch-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    flex-wrap: wrap;
    gap: 8px;
    border-bottom: 1px solid var(--gray-200);
    background: var(--surface);
}
.dispatch-toolbar__nav {
    display: flex;
    align-items: center;
    gap: 8px;
}
.dispatch-toolbar__nav strong {
    font-size: 14px;
    min-width: 180px;
    text-align: center;
}
.dispatch-toolbar__views {
    display: flex;
    align-items: center;
    gap: 4px;
}
.dispatch-view-btn {
    padding: 5px 12px;
    border: 1px solid var(--blue);
    border-radius: 4px;
    background: var(--surface);
    color: var(--blue-dark);
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
}
.dispatch-view-btn.active {
    background: var(--blue);
    color: #fff;
}
.dispatch-last-week-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
}
.dispatch-last-week-toggle input {
    width: 14px;
    height: 14px;
    cursor: pointer;
}

/* AI Route button */
.dispatch-ai-btn {
    padding: 5px 12px;
    border: 1px solid var(--purple, #8b5cf6);
    border-radius: 4px;
    background: var(--surface);
    color: var(--purple, #8b5cf6);
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
}
.dispatch-ai-btn:hover {
    background: var(--purple, #8b5cf6);
    color: #fff;
}

/* Employee picker modal (for Shift+drop) */
.dispatch-emp-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--surface);
    border: 2px solid var(--blue);
    border-radius: 8px;
    padding: 16px;
    z-index: 2000;
    box-shadow: 0 16px 48px rgba(0,0,0,0.2);
    min-width: 280px;
    max-width: 400px;
}
.dispatch-emp-modal__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.3);
    z-index: 1999;
}
.dispatch-emp-modal h4 {
    margin: 0 0 12px;
    font-size: 15px;
}
.dispatch-emp-modal__list {
    max-height: 200px;
    overflow-y: auto;
}
.dispatch-emp-modal__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 14px;
}
.dispatch-emp-modal__item input {
    width: 16px;
    height: 16px;
}
.dispatch-emp-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
}

/* AI feedback toast */
.dispatch-ai-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: var(--surface);
    border: 2px solid var(--purple, #8b5cf6);
    border-radius: 8px;
    padding: 14px 18px;
    z-index: 2000;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
    max-width: 360px;
    font-size: 14px;
}
.dispatch-ai-toast__title {
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--purple, #8b5cf6);
}
.dispatch-ai-toast__actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

/* Trash drop zone (visible during drag only) */
.dispatch-trash {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--red, #ef4444);
    color: #fff;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    z-index: 100;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    transition: transform 0.2s, background 0.2s;
}
body.dnd-active .dispatch-trash {
    display: flex;
}
.dispatch-trash.dispatch-drop-zone,
.dispatch-trash:has(.dispatch-drop-zone) {
    transform: scale(1.25);
    background: #dc2626;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .dispatch-layout {
        flex-direction: column;
    }
    .dispatch-queue {
        width: 100%;
        min-width: 100%;
        border-right: none;
        border-bottom: 2px solid var(--blue);
        max-height: 200px;
    }
    .dispatch-day {
        min-width: 100px;
    }
    .dispatch-toolbar {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ── Invoice-specific inputs ────────────────────── */
.inv-input {
    font-family: var(--ui-font-data);
    font-weight: 500;
    text-align: right;
    border: 1px solid var(--brand-card-border);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 15px;
    background: var(--brand-cloud);
    color: var(--brand-text);
    transition: border-color 0.2s;
}
.inv-input:focus {
    outline: none;
    border-color: var(--brand-indigo);
    box-shadow: 0 0 0 2px rgba(46,42,106,0.08);
}

/* ── Invoice summary stats ──────────────────────── */
.inv-summary-row {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.inv-summary-stat {
    display: flex;
    flex-direction: column;
}
.inv-summary-stat .data-label {
    margin-bottom: 4px;
}


/* ── Inner group card (Job Info, Customer Info, etc.) ── */
.est-group {
    background: var(--brand-card-bg);
    border: 1px solid var(--brand-card-border);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
}
.est-group-title {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--brand-indigo);
    margin: 0 0 12px;
}

/* ── Estimate header rows ───────────────────────── */
.est-header-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.est-doc-number {
    font-size: 28px;
    font-weight: 700;
    color: var(--brand-indigo);
    margin: 0;
    white-space: nowrap;
}
.est-doc-number input {
    font-family: var(--ui-font-data);
    font-weight: 700;
    font-size: 24px;
    width: 195px;
    padding: 4px 8px;
    text-align: right;
    border: 1px solid var(--brand-card-border);
    border-radius: 8px;
    background: var(--brand-cloud);
}
.est-header-meta {
    font-family: var(--ui-font-data);
    font-size: 14px;
    color: var(--text-subtle);
    font-weight: 500;
    white-space: nowrap;
}
.est-doc-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--surface-warning-tint);
    border: 1px solid #f59e0b;
    color: var(--text-warning);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.est-header-divider {
    font-size: 18px;
    color: rgba(46,42,106,0.2);
    margin: 0 2px;
}

/* ── Transcript area ────────────────────────────── */
.est-transcript {
    width: 100%;
    resize: vertical;
    font-size: 16px;
    line-height: 1.6;
    padding: 14px;
    background: var(--surface-yellow-tint);
    border: 1px solid var(--brand-card-border);
    border-radius: 10px;
    color: var(--brand-text);
}
.est-transcript:focus {
    outline: none;
    border-color: var(--brand-indigo);
    box-shadow: 0 0 0 3px rgba(46,42,106,0.08);
}

/* ── Subtotal / tax / total footer ──────────────── */
.est-totals {
    width: 360px;
    margin-left: auto;
    margin-top: 16px;
}
.est-totals-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 15px;
    color: var(--brand-text);
}
.est-totals-row .data-mono {
    font-size: 15px;
}
.est-totals-grand {
    font-size: 18px;
    font-weight: 700;
    border-top: 2px solid var(--brand-indigo);
    padding-top: 10px;
    margin-top: 4px;
}
.est-totals-grand .data-mono {
    font-size: 18px;
}

/* ── Estimate Builder live margin/markup boxes ───── */
/* Simple square version: two boxes always side-by-side, shrinking to fit the
   space left of the totals. No wrap / no media query — they never stack. */
.est-builder-margins {
    display: flex;
    gap: 10px;
    align-items: stretch;
}
.est-builder-margins > div {
    min-width: 120px;
}

/* ── Estimate sub-group dividers ─────────────────── */
.est-subgroup { padding-top: 16px; margin-top: 16px; border-top: 1px solid var(--gray-200); }
.est-subgroup:first-child { padding-top: 0; margin-top: 0; border-top: none; }

/* Two-value split card for Financials (e.g. Margin % / Markup %) */
.fin-card-split { display: flex; gap: 12px; }
.fin-card-split > div { flex: 1; min-width: 0; }

/* Resizable line-items table with horizontal scroll on narrow viewports */
.li-table-wrap { overflow-x: auto; margin-bottom: 12px; }
.li-table-resizable { table-layout: fixed; min-width: 100%; }
.li-table-resizable thead th { position: relative; }
.li-table-resizable .col-resize-handle {
    position: absolute;
    top: 0;
    right: -3px;
    width: 8px;
    height: 100%;
    cursor: col-resize;
    user-select: none;
    z-index: 2;
}
.li-table-resizable .col-resize-handle:hover,
.li-table-resizable .col-resize-handle.resizing {
    background: var(--blue);
    opacity: 0.35;
}

/* ── Tooltip ─────────────────────────────────────── */
.tooltip-wrap {
    position: relative;
    text-decoration: underline dotted;
    cursor: help;
}
.tooltip-text {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--gray-800);
    color: #fff;
    font-size: 13px;
    font-weight: 400;
    padding: 8px 12px;
    border-radius: 6px;
    white-space: nowrap;
    margin-bottom: 6px;
    z-index: 10;
}
.tooltip-wrap:hover .tooltip-text {
    display: block;
}

/* ── Help-tip: small "?" circle with wider tooltip ── */
.help-tip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--gray-200);
    color: var(--text-subtle);
    font-size: 11px;
    font-weight: 700;
    cursor: help;
    position: relative;
    vertical-align: middle;
    margin-left: 4px;
}
body.dark .help-tip { color: var(--text-muted); }
.help-tip .help-tip-text {
    display: none;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--gray-800);
    color: #fff;
    font-size: 12px;
    font-weight: 400;
    padding: 8px 12px;
    border-radius: 6px;
    white-space: normal;
    width: 220px;
    line-height: 1.5;
    z-index: 9999;
    text-align: left;
    pointer-events: none;
}
.help-tip:hover .help-tip-text { display: block; }

/* Allow help-tip popups inside table headers to escape overflow clipping */
.table-with-tips { overflow: visible; }
.table-with-tips thead th { position: relative; }

/* ---- Searchable select widget ---- */
.ss-container { position: relative; width: 100%; }
.ss-display {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid var(--blue);
    border-radius: 6px;
    background: var(--gray-50);
    cursor: pointer;
    font-size: 16px;
    color: var(--text-muted);
    min-height: 44px;
    box-sizing: border-box;
    user-select: none;
}
.ss-display.open { border-color: var(--blue); }
.ss-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-arrow { margin-left: 8px; font-size: 11px; color: var(--gray-400); transition: transform 0.2s; }
.ss-display.open .ss-arrow { transform: rotate(180deg); }
.ss-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0; right: 0;
    background: var(--surface);
    border: 1px solid var(--blue);
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    z-index: 200;
}
.ss-search {
    width: 100%;
    padding: 10px 12px;
    border: none;
    border-bottom: 1px solid var(--gray-200);
    font-size: 15px;
    outline: none;
    box-sizing: border-box;
    border-radius: 6px 6px 0 0;
}
.ss-options { max-height: 220px; overflow-y: auto; }
.ss-option {
    padding: 11px 14px;
    cursor: pointer;
    font-size: 15px;
    border-bottom: 1px solid var(--gray-100);
}
.ss-option:last-child { border-bottom: none; }
.ss-option:active { background: var(--surface-info-tint); }
.ss-option.hidden { display: none; }

/* Task checklist */
.task-checklist { list-style: none; padding: 0; margin: 0; }
.task-checklist li {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 0; border-bottom: 1px solid var(--gray-100);
    font-size: 15px; line-height: 1.4;
}
.task-checklist li:last-child { border-bottom: none; }
.task-checklist input[type="checkbox"] {
    width: 22px; height: 22px; min-width: 22px; cursor: pointer;
    accent-color: var(--green);
}
.task-done { text-decoration: line-through; color: var(--gray-400); }

/* Expandable job task cards */
.task-job-toggle {
    width: 100%; display: flex; align-items: center; gap: 10px;
    padding: 14px 16px; background: none; border: none; cursor: pointer;
    text-align: left; font-family: inherit;
}
.task-job-toggle:hover { background: var(--gray-50); }
.task-job-name { font-size: 16px; font-weight: 700; color: var(--text); flex: 1; }
.task-job-count { font-size: 13px; color: var(--text-subtle); white-space: nowrap; }
.task-job-chevron { font-size: 11px; color: var(--gray-400); transition: transform 0.15s; }
.task-job-body { border-top: 1px solid var(--gray-100); }
.task-checklist-incard { padding: 0 16px; }
.task-checklist-incard li:last-child { border-bottom: none; }
.task-section-header {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.6px; color: var(--blue-dark);
    padding: 12px 0 4px; border-bottom: none !important;
    display: block;
}
.task-completed-by { font-size: 11px; color: var(--gray-400); margin-left: auto; white-space: nowrap; }

.ss-no-results { padding: 12px 14px; color: var(--gray-400); font-size: 14px; font-style: italic; }

/* ---- Notification Bell ---- */
.notif-bell {
    position: relative;
    cursor: pointer;
    padding: 4px 8px;
    font-size: 18px;
    line-height: 1;
    border-radius: 6px;
    user-select: none;
}
.notif-bell:hover { background: rgba(255,255,255,0.2); }
.notif-badge {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--red);
    color: #fff;
    border-radius: 50%;
    min-width: 16px;
    height: 16px;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    padding: 0 3px;
    pointer-events: none;
}
.notif-dropdown {
    display: none;
    position: fixed;
    top: 56px;
    left: 8px;
    z-index: 500;
    background: var(--surface);
    border: 1px solid var(--blue);
    border-radius: 10px;
    width: 320px;
    max-height: 420px;
    overflow-y: auto;
    box-shadow: 0 4px 20px rgba(0,0,0,.15);
}
.notif-dropdown-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid var(--gray-200);
    font-weight: 600;
    font-size: 14px;
    position: sticky;
    top: 0;
    background: var(--surface);
}
.notif-mark-all {
    font-size: 12px;
    background: none;
    border: none;
    color: var(--blue-dark);
    cursor: pointer;
    padding: 0;
}
.notif-item {
    padding: 10px 14px;
    border-bottom: 1px solid var(--gray-100);
}
.notif-item:last-child { border-bottom: none; }
.notif-item-link {
    display: block;
    font-weight: 600;
    font-size: 14px;
    color: var(--blue-dark);
    text-decoration: none;
}
.notif-item-link:hover { text-decoration: underline; }
.notif-body {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 2px;
}
.notif-time {
    font-size: 11px;
    /* --text-muted, not --text-subtle: at 11px on the dark dropdown surface
       subtle is only ~3.7:1; muted holds ~7:1 in both modes. */
    color: var(--text-muted);
    margin-top: 4px;
}

/* ---- Leaflet map stacking context (keep below sidebar) ---- */
.admin-layout .leaflet-container,
#clockedin-map {
    position: relative;
    z-index: 0;
    isolation: isolate;
}
.admin-layout .leaflet-pane {
    z-index: 10 !important;
}
.admin-layout .leaflet-tile-pane {
    z-index: 10 !important;
}
.admin-layout .leaflet-overlay-pane {
    z-index: 20 !important;
}
.admin-layout .leaflet-shadow-pane {
    z-index: 30 !important;
}
.admin-layout .leaflet-marker-pane {
    z-index: 40 !important;
}
.admin-layout .leaflet-tooltip-pane {
    z-index: 50 !important;
}
.admin-layout .leaflet-popup-pane {
    z-index: 60 !important;
}
.admin-layout .leaflet-top,
.admin-layout .leaflet-bottom {
    z-index: 70 !important;
}

/* ============================================================
   Admin Sidebar Navigation
   ============================================================ */

/* ---- Sidebar shell: flat navigation ---- */
.admin-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    height: 100dvh;
    width: var(--sidebar-width);
    background: var(--sidebar-bg);
    border-right: 1px solid var(--sidebar-stroke-soft);
    z-index: 200;
    display: flex;
    flex-direction: column;
    transition: width var(--sidebar-transition);
    overflow: hidden;
    font-family: var(--ui-font-reading);
}

/* ---- Header (logo + bell + collapse control) ---- */
.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 10px;
    min-height: 56px;
    flex-shrink: 0;
    color: #fff;
    border-bottom: 1px solid var(--sidebar-stroke-soft);
}
.sidebar-brand-lockup,
.sidebar-topbar-brand {
    display: flex;
    align-items: center;
    min-width: 0;
    flex: 1;
}
.sidebar-wordmark {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    min-width: 0;
}
.sidebar-wordmark-mark {
    display: grid;
    place-items: center;
    width: 20px;
    height: 24px;
    flex-shrink: 0;
}
.sidebar-wordmark-icon {
    width: 19px;
    height: 19px;
    display: block;
    overflow: visible;
}
.sidebar-wordmark-icon .brand-bar { fill: var(--brand-green-bright); }
.sidebar-wordmark-icon .brand-line {
    fill: none;
    stroke: var(--brand-indigo-soft);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.sidebar-wordmark-icon .brand-tip { fill: var(--brand-orange-soft); }
.sidebar-wordmark-text {
    display: block;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: rgba(255, 255, 255, 0.94);
    font-size: var(--ui-text-label, 14px);
    font-weight: 600;
    line-height: 1.3;
}
.sidebar-header-actions {
    display: flex;
    align-items: center;
    gap: 0;
    margin-left: auto;
    flex-shrink: 0;
}
.sidebar-shell-icon { width: 16px; height: 16px; display: block; }
.sidebar-header .notif-bell,
.sidebar-topbar .notif-bell,
.sidebar-collapse-btn,
.sidebar-hamburger,
.sidebar-dark-toggle {
    -webkit-appearance: none;
    appearance: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: var(--sidebar-text);
    cursor: pointer;
    flex-shrink: 0;
    line-height: 1;
    transition: background 0.15s, color 0.15s;
}
.sidebar-header .notif-bell:hover,
.sidebar-topbar .notif-bell:hover,
.sidebar-collapse-btn:hover,
.sidebar-hamburger:hover,
.sidebar-dark-toggle:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--sidebar-text-hover);
}
.sidebar-collapse-icon { transition: transform 0.22s ease; }

/* ---- Scrollable groups and wrapping labels ---- */
.sidebar-nav {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}
.sidebar-nav::-webkit-scrollbar { width: 8px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); }
.sidebar-group { position: relative; padding: 0; }
.sidebar-group-head {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: max(44px, var(--ui-control-height, 44px));
    margin: 0;
    padding: 6px 16px;
    font-family: inherit;
    font-size: var(--ui-text-label, 14px);
    font-weight: 500;
    color: var(--sidebar-text);
    text-decoration: none;
    background: transparent;
    border: 0;
    border-radius: 0;
    cursor: pointer;
    text-align: left;
    line-height: 1.3;
    white-space: normal;
    transition: background 0.15s, color 0.15s;
}
.sidebar-group-head:hover,
body .admin-sidebar .sidebar-group-items a:hover,
body .sidebar-flyout a[href]:hover {
    background: rgba(255, 255, 255, 0.045);
    color: var(--sidebar-text-hover);
    text-decoration: none;
}
.sidebar-group-head.active,
body .admin-sidebar .sidebar-group-items a.active,
body .sidebar-flyout a[href].active {
    color: var(--sidebar-text-hover);
    font-weight: 600;
    background: transparent;
    box-shadow: inset 2px 0 var(--sidebar-menu-accent);
}
.sidebar-group:has(.sidebar-group-items:not([data-rail-only])) > .sidebar-group-head.active { box-shadow: none; }
.sidebar-icon {
    width: 20px;
    height: 20px;
    min-width: 20px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    color: inherit;
    --sidebar-icon-accent: var(--brand-green-bright);
}
.sidebar-group[data-group="insights"] .sidebar-icon,
.sidebar-group[data-group="scheduling"] .sidebar-icon,
.sidebar-group[data-group="meeting_notes"] .sidebar-icon,
.sidebar-group[data-group="messages"] .sidebar-icon,
.sidebar-group[data-group="admin"] .sidebar-icon,
.sidebar-group[data-group="guide"] .sidebar-icon {
    --sidebar-icon-accent: var(--brand-orange);
}
.sidebar-icon-svg { width: 20px; height: 20px; overflow: visible; }
.sidebar-icon-svg .stroke,
.sidebar-icon-svg .accent-stroke {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.85;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.sidebar-icon-svg .accent-stroke { stroke: var(--sidebar-icon-accent); }
.sidebar-icon-svg .accent-fill { fill: var(--sidebar-icon-accent); }
.sidebar-group-head:hover .sidebar-icon-svg .accent-stroke,
.sidebar-group-head.active .sidebar-icon-svg .accent-stroke { stroke: currentColor; }
.sidebar-group-head:hover .sidebar-icon-svg .accent-fill,
.sidebar-group-head.active .sidebar-icon-svg .accent-fill { fill: currentColor; }
.sidebar-label {
    display: flex;
    align-items: center;
    min-width: 0;
    flex: 1;
    white-space: normal;
    overflow-wrap: anywhere;
}
/* Keep legacy class hooks while rendering plain text. */
.sidebar-label-pill,
.sidebar-subitem-pill {
    display: inline;
    max-width: 100%;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: inherit;
    white-space: normal;
    overflow-wrap: anywhere;
}
.sidebar-group-head.active .sidebar-label-pill { font-weight: 600; }
.sidebar-chevron {
    margin-left: auto;
    display: grid;
    place-items: center;
    transition: transform 0.2s ease;
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.52);
}
.sidebar-chevron .sidebar-shell-icon { width: 14px; height: 14px; }
.sidebar-group-head:is(:hover, .active) .sidebar-chevron { color: var(--sidebar-text-hover); }
.sidebar-group.open > .sidebar-group-head .sidebar-chevron { transform: rotate(180deg); }
.sidebar-group-items { display: none; margin: 0; padding: 0 0 4px 36px; }
.sidebar-group.open > .sidebar-group-items { display: block; }
/* A group-head count repeats its destination link's count; show it only while closed. */
.sidebar-group.open > .sidebar-group-head .sidebar-head-count { display: none; }
/* Setup keeps its ordinary destination in expanded and touch navigation. */
.sidebar-group-items[data-rail-only] { display: none !important; }
body .admin-sidebar .sidebar-group-items a,
body .sidebar-flyout a[href] {
    display: flex;
    align-items: center;
    min-height: max(44px, var(--ui-control-height, 44px));
    padding: 6px 10px;
    font-size: var(--ui-text-small, 13px);
    font-weight: 500;
    color: var(--sidebar-text-muted);
    border: 0;
    border-radius: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.35;
    transition: background 0.15s, color 0.15s;
}
.sidebar-divider { height: 1px; background: var(--sidebar-stroke-soft); margin: 10px 16px; }

/* ---- Footer ---- */
.sidebar-footer {
    padding: 6px 16px;
    border-top: 1px solid var(--sidebar-stroke-soft);
    font-size: var(--ui-text-small, 13px);
    flex-shrink: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0 8px;
}
.sidebar-user-info {
    grid-column: 1 / -1;
    color: #fff;
    font-weight: 500;
    overflow-wrap: anywhere;
}
.sidebar-footer a {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 44px;
    color: var(--sidebar-text-muted);
    font-size: var(--ui-text-small, 13px);
    font-weight: 600;
    transition: color 0.15s;
}
.sidebar-footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.admin-sidebar .sidebar-footer .badge {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0 0 0 8px;
    color: var(--sidebar-text-muted);
    font-family: inherit;
    letter-spacing: 0;
}

/* Employee header dark-mode controls retain their native treatment. */
.bdb-dark-toggle {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--sidebar-text);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.bdb-dark-toggle:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}
.bdb-dark-toggle-icon-dark { display: none; }
body.dark .bdb-dark-toggle-icon { display: none; }
body.dark .bdb-dark-toggle-icon-dark { display: inline; }

/* Employee header variant — sits on a light surface, not the dark sidebar */
.bdb-dark-toggle.bdb-dark-toggle--surface {
    background: var(--surface-elevated);
    border: 1px solid var(--border);
    color: var(--text-muted);
}
.bdb-dark-toggle.bdb-dark-toggle--surface:hover {
    background: var(--surface-sunken);
    color: var(--text);
}

/* ---- Collapsed rail ---- */
body.sidebar-collapsed .admin-sidebar { width: var(--sidebar-rail-width); }
body.sidebar-collapsed .admin-layout,
body.sidebar-collapsed .admin-layout ~ .bdb-footer { margin-left: var(--sidebar-rail-width); }
body.sidebar-collapsed .sidebar-label,
body.sidebar-collapsed .sidebar-chevron,
body.sidebar-collapsed .sidebar-brand-lockup,
body.sidebar-collapsed .sidebar-header .notif-bell,
body.sidebar-collapsed .sidebar-user-info { display: none; }
body.sidebar-collapsed .sidebar-group { padding: 0 6px; }
body.sidebar-collapsed .sidebar-group-items { display: none !important; }
body.sidebar-collapsed .sidebar-group-head { justify-content: center; padding: 6px 0; }
body.sidebar-collapsed .sidebar-header { justify-content: center; padding: 6px; }
body.sidebar-collapsed .sidebar-header-actions { width: 100%; justify-content: center; margin-left: 0; }
body.sidebar-collapsed .sidebar-collapse-icon { transform: rotate(180deg); }
body.sidebar-collapsed .sidebar-footer { grid-template-columns: 1fr; justify-items: center; padding: 6px; }
body.sidebar-collapsed .sidebar-footer a { font-size: var(--ui-text-caption, 11px); }

/* Flyouts are positioned and clamped by the navigation controller. */
.sidebar-flyout {
    display: none;
    position: fixed;
    width: min(280px, calc(100vw - var(--sidebar-rail-width) - 16px));
    min-width: 0;
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px);
    background: var(--sidebar-bg);
    border: 1px solid var(--sidebar-border);
    border-radius: 0;
    z-index: 210;
    padding: 4px;
    white-space: normal;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    font-family: var(--ui-font-reading);
}
.sidebar-flyout-title {
    padding: 8px 10px;
    border-bottom: 1px solid var(--sidebar-stroke-soft);
    margin-bottom: 4px;
    font-weight: 600;
    font-size: var(--ui-text-small, 13px);
    color: var(--sidebar-text-muted);
    overflow-wrap: anywhere;
}
body .sidebar-flyout a[href] { color: var(--sidebar-text); }

/* ---- Resize handle ---- */
.sidebar-resize-handle {
    position: fixed;
    top: 0;
    bottom: 0;
    left: var(--sidebar-width);
    width: 6px;
    cursor: col-resize;
    z-index: 201;
    transition: background 0.15s, left var(--sidebar-transition);
}
.sidebar-resize-handle:hover,
.sidebar-resize-handle:active { background: var(--sidebar-menu-accent); }
body.sidebar-collapsed .sidebar-resize-handle { left: var(--sidebar-rail-width); width: 0; pointer-events: none; }
body.sidebar-resizing .admin-sidebar,
body.sidebar-resizing .admin-layout,
body.sidebar-resizing .admin-layout ~ .bdb-footer,
body.sidebar-resizing .sidebar-resize-handle { transition: none !important; }

/* ---- Mobile topbar and drawer ---- */
.sidebar-topbar {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 56px;
    background: var(--sidebar-bg);
    border-bottom: 1px solid var(--sidebar-stroke-soft);
    z-index: 190;
    padding: 0 12px;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-family: var(--ui-font-reading);
}
.sidebar-topbar-title {
    font-weight: 600;
    font-size: var(--ui-text-label, 14px);
    color: rgba(255, 255, 255, 0.95);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sidebar-hamburger { margin-right: 2px; }
.sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(6, 9, 24, 0.48); z-index: 195; }
.admin-sidebar :is(a, button):focus-visible,
.sidebar-topbar :is(a, button):focus-visible,
body .sidebar-flyout a[href]:focus-visible,
body .sidebar-resize-handle:focus-visible {
    outline: 2px solid var(--sidebar-text-hover);
    outline-offset: -3px;
    border-radius: 0;
}
.sidebar-resize-handle:focus-visible { background: var(--sidebar-bg); outline-offset: 0; }
@media (max-width: 768px) {
    .sidebar-topbar { display: flex; }
    .admin-sidebar {
        visibility: hidden;
        transform: translateX(-100%);
        width: min(320px, calc(100vw - 16px)) !important;
        transition: transform var(--sidebar-transition), visibility var(--sidebar-transition);
    }
    body.sidebar-mobile-open { overflow: hidden; }
    body.sidebar-mobile-open .admin-sidebar { visibility: visible; transform: translateX(0); }
    body.sidebar-mobile-open .sidebar-backdrop { display: block; }
    .admin-layout { margin-left: 0 !important; padding-top: 72px; }
    .bdb-footer { margin-left: 0 !important; }
    .sidebar-resize-handle { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .admin-sidebar, .admin-layout, .admin-layout ~ .bdb-footer,
    .sidebar-resize-handle, .sidebar-chevron, .sidebar-collapse-icon { transition: none; }
}
@media print {
    .admin-sidebar, .sidebar-topbar, .sidebar-backdrop, .sidebar-resize-handle, .sidebar-flyout { display: none !important; }
    .admin-layout { margin-left: 0 !important; }
    .bdb-footer { margin-left: 0 !important; }
}

/* ============================================================
   Employee Page — Permission Pills & Archive
   ============================================================ */
.perm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(120px, 100%), 1fr));
    gap: 8px;
    margin-top: 12px;
}
.perm-pill {
    display: flex;
    min-width: 0;
    min-height: var(--ui-control-height, 44px);
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: var(--ui-font-reading);
    font-size: var(--ui-text-small, 13px);
    text-align: center;
    overflow-wrap: anywhere;
    font-weight: 500;
    cursor: pointer;
    padding: 8px 4px;
    border: 1px solid var(--brand-card-border);
    border-radius: 8px;
    background: var(--brand-cloud);
    transition: border-color 0.15s, background 0.15s;
    color: var(--brand-text);
}
.perm-pill:hover {
    border-color: var(--brand-indigo);
}
.perm-pill--special {
    border-color: rgba(139, 92, 246, 0.3);
    background: var(--surface-purple-tint);
}
.perm-pill--warn {
    border-color: rgba(251, 91, 17, 0.3);
    background: var(--surface-orange-tint);
}
.perm-pill input[type="checkbox"] {
    flex: none;
    accent-color: var(--brand-indigo);
    width: 16px;
    height: 16px;
}
.emp-card {
    background: var(--surface);
    border: 1px solid var(--brand-card-border);
    border-radius: var(--brand-radius);
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: var(--brand-shadow);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.emp-card:hover {
    border-color: rgba(46,42,106,0.3);
    box-shadow: 0 6px 20px rgba(46,42,106,0.1);
}
.emp-card--archived {
    opacity: 0.7;
    border-style: dashed;
}
.emp-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}
.emp-card-name {
    font-family: var(--ui-font-reading);
    font-size: 18px;
    font-weight: 600;
    color: var(--brand-indigo);
    margin: 0;
}
.emp-card-meta {
    font-family: var(--ui-font-data);
    font-size: 13px;
    color: var(--text-subtle);
}
.emp-card-body {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    margin-top: 14px;
}
.emp-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.emp-field-label {
    font-family: var(--ui-font-reading);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #a0aec0;
}
.emp-field-value {
    font-family: var(--ui-font-reading);
    font-size: 14px;
    color: var(--brand-text);
    overflow-wrap: anywhere;
    word-break: break-word;
}
.emp-field-value--mono {
    font-family: var(--ui-font-data);
}
.emp-access-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--brand-card-border);
}
.emp-access-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--ui-font-reading);
    font-size: 12px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 20px;
    border: 1px solid var(--brand-card-border);
    background: var(--brand-cloud);
    cursor: pointer;
    transition: all 0.15s;
    color: var(--brand-text);
}
.emp-access-pill:hover {
    border-color: var(--brand-indigo);
}
.emp-access-pill input[type="checkbox"] {
    accent-color: var(--brand-indigo);
    width: 14px;
    height: 14px;
}
.emp-access-pill input[type="checkbox"]:checked + span {
    color: var(--brand-indigo);
    font-weight: 600;
}
.emp-card-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--brand-card-border);
}
.emp-cred-row {
    margin-top: 14px;
    padding: 14px;
    background: var(--brand-card-bg);
    border: 1px solid var(--brand-card-border);
    border-radius: 10px;
}
.emp-info-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px 16px;
    border-style: dashed;
    font-family: var(--ui-font-reading);
}
.emp-info-bar strong {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-subtle);
}
.emp-info-bar code {
    font-family: var(--ui-font-data);
    font-size: 13px;
}
.emp-divider {
    color: #cbd5e0;
    margin: 0 4px;
}
@media (max-width: 640px) {
    .emp-card-body {
        grid-template-columns: 1fr 1fr;
    }
    .emp-card-header {
        flex-direction: column;
    }
}

/* ── Filter Grid (equal-width columns) ─────────── */
.filter-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    align-items: end;
}
@media (max-width: 640px) {
    .filter-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Time Entry Detail — Map (standalone) ──────── */
.detail-map {
    min-height: 350px;
    border-radius: var(--radius);
    overflow: hidden;
}

/* ── Time Entry Detail — Hero Section ──────────── */
.entry-header {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.entry-header__title {
    font-family: var(--ui-font-reading);
    font-size: 22px;
    font-weight: 700;
    color: var(--brand-text);
    margin: 0;
}
.entry-header__sub {
    font-size: 14px;
    color: var(--text-muted);
}

.time-hero__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 20px;
}
.time-punch {
    background: var(--brand-card-bg);
    border: 1px solid var(--brand-card-border);
    border-radius: 12px;
    padding: 20px;
    border-left: 4px solid var(--gray-300);
}
.time-punch--in {
    border-left-color: var(--green);
}
.time-punch--out {
    border-left-color: var(--red);
}
.time-punch__header {
    font-family: var(--ui-font-data);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-subtle);
    margin-bottom: 4px;
}
.time-punch__time {
    font-family: var(--ui-font-data);
    font-size: 26px;
    font-weight: 500;
    color: var(--brand-text);
    line-height: 1.2;
    margin-bottom: 12px;
}
.time-punch__meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    color: var(--text-muted);
}
.time-punch__meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.time-punch__override {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--brand-card-border);
    font-size: 12px;
    color: var(--text-subtle);
}
.time-punch__override-label {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    font-size: 10px;
    margin-bottom: 2px;
}
.time-punch__override-time {
    font-family: var(--ui-font-data);
    font-size: 16px;
    font-weight: 500;
    color: var(--brand-orange);
}

/* ── TA34 / O11: which occurrence of the repeated hour a punch is ──
   Rendered only on the two transition nights a year. 13px and 12px, above the
   12px floor for labels — the people reading this are on phones in the field.
   Both the badge and the sentence are shown rather than hiding the sentence
   behind a tooltip: a tooltip is unreachable on a touch screen, which is where
   this is read. */
.punch-occurrence {
    margin: -6px 0 12px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.punch-occurrence__badge {
    align-self: flex-start;
    padding: 2px 7px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-info);
    background: var(--surface-info-tint);
    border: 1px solid #bfdbfe;
    border-radius: 3px;
}
.punch-occurrence__detail {
    font-size: 13px;
    line-height: 1.4;
    color: var(--text-muted);
}
.split-dst-note {
    margin: 0 0 12px;
    padding: 8px 10px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-info);
    background: var(--surface-info-tint);
    border: 1px solid #bfdbfe;
    border-radius: 4px;
}

/* ── "Edited" inline indicator next to clock labels ── */
.edited-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--blue-dark);
    background: var(--blue-tint);
    border: 1px solid var(--blue);
    border-radius: 3px;
    vertical-align: middle;
}

/* ── Previous Values & Audit History (collapsible) ── */
.previous-values > summary {
    color: var(--text-muted);
}
.previous-values__originals {
    margin: 10px 0 14px;
    padding: 10px 12px;
    background: var(--gray-50);
    border: 1px solid var(--brand-card-border);
    border-radius: 4px;
}
.previous-values__title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-subtle);
    margin-bottom: 6px;
}
.previous-values__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px;
}
.previous-values__row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 13px;
}
.previous-values__label {
    color: var(--text-subtle);
}
.previous-values__val {
    font-family: var(--ui-font-data);
    color: var(--brand-text);
}
.previous-values__audit {
    margin-top: 10px;
}

/* ── Total Hours Callout ─────────────────────── */
.time-hero__hours {
    text-align: center;
    padding: 16px 0 12px;
    border-top: 1px solid var(--brand-card-border);
    border-bottom: 1px solid var(--brand-card-border);
    margin-bottom: 4px;
}
.time-hero__hours-label {
    font-family: var(--ui-font-data);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-subtle);
    margin-bottom: 2px;
}
.time-hero__hours-value {
    font-family: var(--ui-font-data);
    font-size: 24px;
    font-weight: 500;
    color: var(--brand-text);
}

/* ── Inline Time Edit (details/summary) ──────── */
.time-hero__edit {
    margin-top: 16px;
}
.time-hero__edit > summary {
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: var(--brand-indigo);
    padding: 10px 0;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
    user-select: none;
}
.time-hero__edit > summary::-webkit-details-marker {
    display: none;
}
.time-hero__edit > summary::before {
    content: '\25B6';
    font-size: 10px;
    transition: transform 0.2s;
    display: inline-block;
}
.time-hero__edit[open] > summary::before {
    transform: rotate(90deg);
}
.time-hero__edit .override-hint {
    font-size: 12px;
    color: var(--text-subtle);
    margin-bottom: 12px;
}

/* ── Context Grid (Map + Details side by side) ── */
.detail-context-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
}

/* ── Admin Actions Panel ─────────────────────── */
.admin-actions-panel {
    background: var(--brand-card-bg);
    border: 1px solid var(--brand-card-border);
    border-radius: var(--brand-radius);
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: var(--brand-shadow);
}
.admin-actions-panel .dash-section-title {
    margin-top: 0;
}
.admin-actions__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}
.admin-actions__grid .est-group {
    margin-bottom: 0;
}

/* ── Time Entry Detail — Responsive ────────────── */
@media (max-width: 768px) {
    .time-hero__grid {
        grid-template-columns: 1fr;
    }
    .detail-context-grid {
        grid-template-columns: 1fr;
    }
    .admin-actions__grid {
        grid-template-columns: 1fr;
    }
    .time-punch__time {
        font-size: 22px;
    }
    .time-hero__hours-value {
        font-size: 20px;
    }
}

/* ── Split Shift / Add Unpaid Time ─────────────── */
.time-hero__edit--split > summary {
    color: var(--orange);
    border-color: rgba(234,88,12,0.25);
}
.time-hero__edit--split > summary:hover {
    background: rgba(234,88,12,0.06);
}
.time-hero__edit--split > summary::before {
    color: var(--orange);
}
.split-shift-window {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 14px;
}
.split-shift-label {
    font-family: var(--ui-font-data);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gray-400);
    margin-bottom: 4px;
}
.split-shift-times {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.split-time {
    font-family: var(--ui-font-data);
    font-size: 15px;
    font-weight: 500;
    color: var(--brand-text);
}
.split-time--in { color: var(--green-dark); }
.split-time--out { color: var(--red-dark); }
.split-arrow {
    color: var(--gray-400);
    font-size: 14px;
}
.split-hours {
    margin-left: auto;
    font-family: var(--ui-font-data);
    font-size: 14px;
    font-weight: 600;
    color: var(--brand-indigo);
    background: var(--blue-tint);
    border-radius: 6px;
    padding: 2px 8px;
}

/* Timeline bar */
.split-timeline {
    margin-bottom: 16px;
}
.split-tl-bar {
    display: flex;
    height: 14px;
    border-radius: 7px;
    overflow: hidden;
    background: var(--gray-200);
}
.split-tl-fill {
    transition: width 0.25s ease;
    min-width: 0;
}
.split-tl-fill--a {
    background: var(--green);
    border-radius: 7px 0 0 7px;
}
.split-tl-fill--break {
    background: repeating-linear-gradient(
        135deg,
        var(--orange) 0px, var(--orange) 3px,
        rgba(234,88,12,0.35) 3px, rgba(234,88,12,0.35) 6px
    );
}
.split-tl-fill--b {
    background: var(--blue);
    border-radius: 0 7px 7px 0;
}
.split-tl-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
}
.split-tl-label {
    font-family: var(--ui-font-data);
    font-size: 11px;
    color: var(--text-subtle);
}
.split-tl-label--mid {
    font-size: 11px;
    color: var(--orange);
    font-weight: 600;
}

/* Result preview */
.split-preview {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 14px;
}
.split-preview-title {
    font-family: var(--ui-font-data);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gray-400);
    margin-bottom: 8px;
}
.split-preview-entries {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.split-preview-entry {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 13px;
}
.split-preview-entry--a {
    background: rgba(22,163,74,0.08);
    border-left: 3px solid var(--green);
}
.split-preview-entry--b {
    background: rgba(37,99,235,0.08);
    border-left: 3px solid var(--blue);
}
.split-preview-label {
    font-family: var(--ui-font-data);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-subtle);
    min-width: 52px;
}
.split-preview-range {
    font-family: var(--ui-font-data);
    font-size: 13px;
    color: var(--brand-text);
}
.split-preview-hrs {
    margin-left: auto;
    font-family: var(--ui-font-data);
    font-size: 13px;
    font-weight: 600;
    color: var(--brand-indigo);
}
.split-preview-gap {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 13px;
    font-size: 12px;
    color: var(--orange);
    font-weight: 600;
}
.split-preview-gap-icon {
    font-size: 8px;
    opacity: 0.7;
}

@media (max-width: 768px) {
    .split-shift-times {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    .split-hours { margin-left: 0; }
    .split-preview-entry {
        flex-wrap: wrap;
    }
    .split-preview-hrs {
        margin-left: 0;
        width: 100%;
        text-align: right;
    }
}

/* ── Cash Flow Forecast ── */
.runway-banner {
    padding: 14px 20px;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
}
.runway-green {
    background: var(--surface-success-tint);
    color: var(--text-success);
    border: 1px solid #86efac;
}
.runway-yellow {
    background: var(--surface-yellow-tint);
    color: var(--text-warning);
    border: 1px solid #fde047;
}
.runway-red {
    background: var(--surface-error-tint);
    color: var(--text-error);
    border: 1px solid #fca5a5;
}
.runway-critical {
    background: #991b1b;
    color: #fff;
    border: 1px solid #7f1d1d;
}
.forecast-neg-row td {
    background: var(--surface-error-tint) !important;
}
.qbo-badge {
    display: inline-block;
    background: #dcfce7;
    color: #166534;
    font-size: 11px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 3px;
    vertical-align: middle;
}
/* Clickable variant: the CFO Cash-on-Hand badge doubles as a "re-sync from
   QuickBooks" button. Reset the UA button chrome so it reads as the pill. */
button.qbo-badge {
    border: none;
    cursor: pointer;
    font-family: inherit;
    line-height: 1.4;
    transition: background 0.15s ease, color 0.15s ease;
}
button.qbo-badge:hover { background: #bbf7d0; color: #14532d; }
body.dark .qbo-badge { background: var(--surface-success-tint); color: var(--text-success); }
body.dark button.qbo-badge:hover { background: var(--surface-success-tint); color: var(--text-success); }
button.qbo-badge:disabled { cursor: progress; }
button.qbo-badge.is-refreshing { opacity: 0.7; }
.qbo-refresh-icon { display: inline-block; font-weight: 700; }
button.qbo-badge.is-refreshing .qbo-refresh-icon {
    animation: spin 0.7s linear infinite;  /* shared @keyframes spin */
}

/* ============================================================
   Dashboard page — subtle background lift
   (scoped to body.admin-dashboard-page so other admin pages
   don't inherit this treatment)
   ============================================================ */

body.admin-dashboard-page {
    background:
        radial-gradient(circle at 0% 0%, rgba(55, 201, 107, 0.1), transparent 24%),
        radial-gradient(circle at 100% 0%, rgba(251, 91, 17, 0.1), transparent 22%),
        linear-gradient(180deg, var(--surface-sunken) 0%, var(--surface) 100%);
    background-attachment: fixed;
}
body.admin-dashboard-page.dark {
    background:
        radial-gradient(circle at 0% 0%, rgba(55, 201, 107, 0.08), transparent 24%),
        radial-gradient(circle at 100% 0%, rgba(251, 91, 17, 0.08), transparent 22%),
        linear-gradient(180deg, #020617 0%, #0f172a 100%);
    background-attachment: fixed;
}
body.admin-dashboard-page .admin-layout {
    position: relative;
    padding-top: 28px;
    padding-bottom: 44px;
}
body.admin-dashboard-page .admin-layout > h2:first-of-type {
    position: relative;
    display: inline-block;
    margin: 0 0 24px;
    padding-bottom: 12px;
    font-size: 28px;
    letter-spacing: -0.03em;
    color: var(--brand-indigo);
}
body.admin-dashboard-page .admin-layout > h2:first-of-type::before {
    content: none !important;
    display: none !important;
    background: none !important;
    box-shadow: none !important;
}
body.admin-dashboard-page .admin-layout > h2:first-of-type::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(46, 42, 106, 0.55), rgba(55, 201, 107, 0.28), transparent 78%);
}
body.admin-dashboard-page .stat-card {
    position: relative;
    overflow: hidden;
    background: var(--surface);
    border-color: var(--brand-card-border);
    box-shadow: 0 14px 32px rgba(46, 42, 106, 0.08);
}
body.admin-dashboard-page .stat-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.72), transparent 30%),
        radial-gradient(circle at top right, rgba(165, 176, 255, 0.12), transparent 30%);
    pointer-events: none;
}
body.admin-dashboard-page.dark .stat-card::before {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 30%),
        radial-gradient(circle at top right, rgba(165, 176, 255, 0.08), transparent 30%);
}
body.admin-dashboard-page .stat-card:hover {
    box-shadow: 0 18px 38px rgba(46, 42, 106, 0.14);
}
body.admin-dashboard-page .company-card {
    position: relative;
    overflow: hidden;
    background: var(--surface);
    border-color: var(--brand-card-border);
    box-shadow: 0 14px 32px rgba(46, 42, 106, 0.08);
}
body.admin-dashboard-page .company-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.7), transparent 26%),
        radial-gradient(circle at top right, rgba(251, 91, 17, 0.08), transparent 24%);
    pointer-events: none;
}
body.admin-dashboard-page.dark .company-card::before {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 26%),
        radial-gradient(circle at top right, rgba(251, 91, 17, 0.08), transparent 24%);
}
body.admin-dashboard-page .company-card:hover {
    border-color: rgba(46, 42, 106, 0.2);
    box-shadow: 0 18px 38px rgba(46, 42, 106, 0.12);
}
body.admin-dashboard-page .token-selector {
    margin-bottom: 26px;
    padding: 12px 14px;
    border-radius: 18px;
    background: var(--surface);
    border: 1px solid var(--brand-card-border);
    box-shadow: 0 14px 28px rgba(46, 42, 106, 0.08);
    backdrop-filter: blur(12px);
    width: fit-content;
    max-width: 100%;
    flex-wrap: wrap;
}
body.admin-dashboard-page .dash-section {
    position: relative;
    overflow: hidden;
    background: var(--surface);
    border-color: var(--brand-card-border);
    box-shadow: 0 16px 34px rgba(46, 42, 106, 0.08);
}
body.admin-dashboard-page .dash-section::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.68), transparent 22%),
        radial-gradient(circle at top right, rgba(251, 91, 17, 0.07), transparent 26%);
    pointer-events: none;
}
body.admin-dashboard-page .dash-section:hover {
    border-color: rgba(46, 42, 106, 0.18);
    box-shadow: 0 20px 42px rgba(46, 42, 106, 0.12);
}
/* Foreground stacking: keep real content above decorative ::before overlays */
body.admin-dashboard-page .dash-section-title,
body.admin-dashboard-page .table-wrap,
body.admin-dashboard-page #clockedin-map,
body.admin-dashboard-page .dash-empty,
body.admin-dashboard-page .company-card > *,
body.admin-dashboard-page .stat-card > * {
    position: relative;
    z-index: 1;
}

/* =====================================================================
   BDB tabs — generic tab component used by admin/estimate_detail.html
   and any future tabbed page. Folder-tab visual style matching
   the project's existing var(--blue) admin design system.
===================================================================== */
.bdb-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid var(--blue);
    position: sticky;
    top: 0;
    background: var(--surface, #fff);
    z-index: 5;
    margin-bottom: 16px;
    flex-wrap: wrap;
    padding-top: 4px;
}
.bdb-tab {
    padding: 10px 16px;
    border: 1px solid var(--blue);
    border-bottom: none;
    background: var(--blue-tint);
    color: var(--blue-dark);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    border-radius: 6px 6px 0 0;
    line-height: 1.2;
}
.bdb-tab:hover { background: var(--surface, #fff); }
.bdb-tab.active {
    background: var(--blue);
    color: #fff;
    border-color: var(--blue);
}
.bdb-section { display: none; }
.bdb-section.visible { display: block; }
.bdb-section.section-collapsed .section-body { display: none; }
.bdb-section .section-toggle {
    cursor: pointer;
    user-select: none;
}
.bdb-section.section-collapsed .section-toggle::before { content: "▶ "; color: var(--blue-dark); }
.bdb-section:not(.section-collapsed) .section-toggle::before { content: "▼ "; color: var(--blue-dark); }

.job-customer-info-details {
    padding: 0;
    overflow: hidden;
}
.job-customer-info-details > summary {
    list-style: none;
}
.job-customer-info-details > summary::-webkit-details-marker {
    display: none;
}
.job-customer-info-details__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 46px;
    padding: 12px 16px;
    cursor: pointer;
    color: var(--brand-indigo);
    background: var(--blue-tint);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    user-select: none;
}
.job-customer-info-details__summary::before {
    content: "▶";
    flex: 0 0 auto;
    color: var(--blue-dark);
    font-size: 13px;
}
.job-customer-info-details[open] .job-customer-info-details__summary::before {
    content: "▼";
}
.job-customer-info-details__summary > span:first-of-type {
    flex: 1 1 auto;
}
.job-customer-info-details__summary-meta {
    flex: 0 1 auto;
    color: var(--text-subtle);
    font-size: 12px;
    font-weight: 600;
    text-align: right;
    text-transform: none;
    letter-spacing: 0;
}
.job-customer-info-details__body {
    padding: 16px;
}

.sales-project-details {
    margin-top: 12px;
    border: 1px solid var(--blue);
    border-radius: 8px;
    background: var(--surface, #fff);
    overflow: hidden;
}
.sales-project-details > summary {
    list-style: none;
}
.sales-project-details > summary::-webkit-details-marker {
    display: none;
}
.sales-project-details__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;
    padding: 10px 14px;
    cursor: pointer;
    color: var(--blue-dark);
    background: var(--blue-tint);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    user-select: none;
}
.sales-project-details__summary::before {
    content: "▶";
    flex: 0 0 auto;
    color: var(--blue-dark);
    font-size: 13px;
}
.sales-project-details[open] .sales-project-details__summary::before {
    content: "▼";
}
.sales-project-details__summary > span:first-of-type {
    flex: 1 1 auto;
}
.sales-project-details__summary-meta {
    flex: 0 1 auto;
    color: var(--text-subtle);
    font-size: 12px;
    font-weight: 600;
    text-align: right;
}
.sales-project-details__body {
    padding: 14px;
    border-top: 1px solid rgba(46, 42, 106, 0.15);
}
.sales-project-details__body .est-form-grid {
    margin-top: 0;
}
@media (max-width: 720px) {
    .job-customer-info-details__summary,
    .sales-project-details__summary {
        align-items: flex-start;
        flex-wrap: wrap;
    }
    .job-customer-info-details__summary-meta,
    .sales-project-details__summary-meta {
        flex-basis: 100%;
        padding-left: 24px;
        text-align: left;
    }
}

/* Text action stays pinned above the scrolling menu. */
.sidebar-cta-wrap { flex-shrink: 0; padding: 4px 16px; border-bottom: 1px solid var(--sidebar-stroke-soft); }
.sidebar-cta {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    min-height: max(44px, var(--ui-control-height, 44px));
    padding: 6px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--brand-green-bright);
    font-size: var(--ui-text-label, 14px);
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
}
.sidebar-cta:hover { color: var(--sidebar-text-hover); text-decoration: underline; text-underline-offset: 4px; }
.sidebar-cta-plus { width: 20px; flex-shrink: 0; text-align: center; font-size: 20px; font-weight: 400; line-height: 1; }
.sidebar-cta-text { overflow-wrap: anywhere; min-width: 0; }
body.sidebar-collapsed .sidebar-cta-wrap { padding: 4px 6px; }
body.sidebar-collapsed .sidebar-cta { justify-content: center; gap: 0; }
body.sidebar-collapsed .sidebar-cta-text { display: none; }

/* =====================================================================
   QA: Unified "+ Add New" page (templates/admin/new.html)
   Three stacked sections — Customer, Project, Estimate — each with a
   "pick existing" dropdown + "Add New" collapsible.
===================================================================== */
.qa-page {
    max-width: 880px;
}
.qa-section {
    border: 1px solid var(--blue);
    border-radius: 10px;
    background: var(--surface);
    margin-bottom: 18px;
    overflow: hidden;
}
.qa-section[data-locked="1"] {
    background: var(--blue-tint);
}
.qa-section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--blue-tint);
    flex-wrap: wrap;
}
.qa-section[data-locked="1"] .qa-section-header {
    border-bottom: none;
}
.qa-section-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--blue);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
}
.qa-section-title {
    margin: 0;
    font-size: 17px;
    color: var(--blue-dark);
    font-weight: 600;
}
.qa-section-optional {
    font-size: 13px;
    color: var(--text-subtle);
    font-weight: 400;
}
.qa-locked-summary {
    font-size: 14px;
    color: var(--text-muted);
    flex: 1;
    min-width: 0;
    word-break: break-word;
}
.qa-locked-summary strong {
    color: var(--text);
}
.qa-change-btn {
    background: transparent;
    border: 1px solid var(--blue);
    color: var(--blue-dark);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
}
.qa-change-btn:hover {
    background: var(--blue-tint);
}
.qa-section-body {
    padding: 18px;
}
.qa-pick-row {
    margin-bottom: 12px;
}
.qa-pick {
    width: 100%;
    max-width: 480px;
    padding: 10px 12px;
    font-size: 14px;
    border: 1px solid var(--blue);
    border-radius: 6px;
    background: var(--gray-50);
}
.qa-help {
    font-size: 12px;
    color: var(--text-subtle);
    margin: 6px 0 0;
}
.qa-add-toggle {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 12px;
    text-align: center;
    background: var(--gray-100, #f3f4f6);
    color: var(--text-muted);
    border: 2px dashed var(--gray-400);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}
.qa-add-toggle:hover {
    background: var(--blue-tint);
    color: var(--blue-dark);
    border-color: var(--blue);
}
.qa-new {
    margin-top: 14px;
    padding: 14px;
    background: var(--blue-tint);
    border-radius: 8px;
}
.qa-new.collapsed,
.qa-more-fields.collapsed {
    display: none;
}
.qa-input {
    width: 100%;
    padding: 10px 12px;
    font-size: 14px;
    border: 1px solid var(--blue);
    border-radius: 6px;
    background: var(--surface);
    box-sizing: border-box;
    font-family: inherit;
}
.qa-input:focus {
    outline: none;
    border-color: var(--blue-dark);
    box-shadow: 0 0 0 2px var(--blue-tint);
}
.qa-more-toggle {
    margin-top: 10px;
    background: transparent;
    border: none;
    color: var(--blue-dark);
    font-size: 13px;
    cursor: pointer;
    padding: 4px 0;
    font-weight: 500;
}
.qa-more-toggle:hover {
    text-decoration: underline;
}
.qa-more-arrow {
    display: inline-block;
    font-size: 10px;
    width: 12px;
}
.qa-more-fields {
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px dashed var(--gray-300, #d1d5db);
}
.qa-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    flex-wrap: wrap;
}
.qa-actions .btn {
    padding: 12px 20px;
    font-size: 15px;
    font-weight: 600;
}
.qa-actions .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.qa-status {
    font-size: 13px;
    color: var(--text-subtle);
}
.qa-submit-armed {
    background: var(--orange, #ea580c) !important;
    border-color: var(--orange, #ea580c) !important;
    color: #fff !important;
    animation: qa-pulse 1.2s ease-in-out infinite;
}
@keyframes qa-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(234, 88, 12, 0.55); }
    50%      { box-shadow: 0 0 0 6px rgba(234, 88, 12, 0); }
}
.qa-geocode-status {
    display: block;
    font-size: 12px;
    margin-top: 4px;
    min-height: 14px;
    color: var(--text-subtle);
}
.qa-geocode-status[data-kind="ok"]   { color: var(--text-success); }
.qa-geocode-status[data-kind="warn"] { color: var(--text-warning); }

/* ---------------------------------------------------------------------------
   Phone estimate detail — sticky bottom action bar + popup share/export sheets
   --------------------------------------------------------------------------- */
.est-stickybar {
    position: sticky;
    bottom: 0;
    display: flex;
    gap: 8px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--surface, #fff);
    border-top: 2px solid var(--blue);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
    z-index: 50;
    margin: 16px -12px 0;
}
.est-stickybar-primary {
    flex: 2;
    padding: 14px 12px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 8px;
}
.est-stickybar-menu {
    flex: 1;
    padding: 14px 8px;
    font-size: 15px;
    font-weight: 600;
    background: var(--surface, #fff);
    color: var(--text, #1f2937);
    border: 2px solid var(--blue);
    border-radius: 8px;
    cursor: pointer;
}
.est-stickybar-menu:hover { background: var(--blue-tint); }

/* Popup sheets float above the sticky bar; on mobile they read like a bottom sheet. */
.est-sheet {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    background: var(--surface, #fff);
    border: 1px solid var(--blue);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    padding: 6px;
    z-index: 60;
    max-width: 520px;
    margin: 0 auto;
}
.est-sheet-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    color: var(--text, #1f2937);
    font-size: 15px;
}
.est-sheet-item + .est-sheet-item { border-top: 1px solid var(--gray-100); }
.est-sheet-item:hover { background: var(--blue-tint); }
.est-sheet-icon {
    font-size: 22px;
    line-height: 1;
    flex: 0 0 28px;
    text-align: center;
}
.est-sheet-title { font-weight: 600; font-size: 15px; }
.est-sheet-sub   { font-size: 12px; color: var(--text-subtle); margin-top: 1px; }

/* Toast — center-bottom, above the sticky bar */
.est-toast {
    position: fixed;
    left: 50%;
    bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    background: var(--gray-800, #1f2937);
    color: #fff;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 14px;
    z-index: 70;
    max-width: calc(100vw - 32px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* Reserve room at the bottom of the estimate page so the sticky bar doesn't cover content. */
.capture-container.has-stickybar { padding-bottom: 96px; }

/* ===== Onboarding diagnostic — start-here plan ===== */
.firstmove-card{background:#1E1A4F;color:#fff;border-radius:14px;padding:20px 22px;margin:14px 0;}
.firstmove-card .firstmove-k{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--orange);}
.firstmove-card h3{color:#fff;margin:6px 0 8px;}
.firstmove-card .move{font-size:15px;}
.firstmove-card .why{opacity:.8;font-size:14px;}
.firstmove-actions,.rec-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;}
.rec-card{background:var(--surface);color:var(--text);border:1px solid var(--blue);border-radius:12px;padding:16px 18px;margin:10px 0;}
.rec-card.is-done{opacity:.6;}
.rec-card.is-done .rec-title{text-decoration:line-through;}
.rec-top{display:flex;justify-content:space-between;gap:10px;align-items:baseline;}
.rec-check{display:flex;gap:8px;align-items:baseline;cursor:pointer;}
.rec-check .rec-title{display:inline;font-weight:600;margin:0;}
.rec-card .move{margin:8px 0 4px;}
.rec-card .see{color:var(--green-dark);font-size:14px;}
.diag-badge{font-size:var(--ui-text-small);letter-spacing:.04em;text-transform:uppercase;color:var(--ui-muted);white-space:nowrap;}
.section-label{font-size:13px;letter-spacing:.04em;color:var(--orange);text-transform:uppercase;margin:18px 0 6px;display:block;font-weight:600;}
.track-card{border-radius:12px;padding:16px 18px;margin:10px 0;color:#fff;}
.track-card h4{color:#fff;margin:4px 0 6px;}
.track-card p{font-size:14px;opacity:.92;margin-bottom:12px;}
.track-books{background:var(--green);}
body.dark .track-books{background:#15803d;}
.track-cfo{background:#2E2A6A;}
.track-flag{font-size:11px;letter-spacing:.05em;text-transform:uppercase;opacity:.95;margin-bottom:6px;}
.notnow{background:var(--blue-tint);border:1px dashed var(--blue);border-radius:10px;padding:12px 16px;margin:12px 0;font-size:14px;color:var(--text);}
.notnow ul{margin:6px 0 0 18px;}
@media(max-width:600px){.firstmove-actions .btn,.rec-actions .btn{flex:1 1 100%;}}


/* ===== Onboarding diagnostic — question form ===== */
.diag-wrap{margin:8px 0;}
.diag-intro{font-size:15px;color:var(--text-muted);margin-bottom:14px;}
.diag-q{border:1px solid var(--border);border-radius:12px;padding:14px 16px;margin:10px 0;background:var(--surface);}
.diag-q legend{font-size:12px;color:var(--text-subtle);padding:0 4px;}
.diag-qtext{font-weight:600;color:var(--text);font-size:15px;margin:2px 0 10px;}
.diag-ratings{display:flex;gap:8px;flex-wrap:wrap;}
.diag-rating{position:relative;}
.diag-rating input{position:absolute;opacity:0;width:0;height:0;}
.diag-rating span{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:1.5px solid var(--border-strong);border-radius:10px;font-size:16px;cursor:pointer;background:var(--surface);color:var(--text);}
.diag-rating input:checked + span{background:var(--orange);border-color:var(--orange);color:#fff;}
.diag-rating input:focus-visible + span{outline:2px solid var(--blue);outline-offset:2px;}
.diag-scale-ends{display:flex;justify-content:space-between;max-width:280px;font-size:12px;color:var(--text-subtle);margin-top:6px;}
.diag-teach{margin-top:10px;background:var(--surface-orange-tint);border:1px solid var(--orange);border-radius:8px;padding:10px 12px;font-size:14px;color:var(--text);}
.diag-group{font-size:14px;color:var(--orange);text-transform:uppercase;letter-spacing:.04em;margin:16px 0 4px;}
.diag-optset{display:flex;flex-direction:column;gap:8px;}
.diag-opt{position:relative;}
.diag-opt input{position:absolute;opacity:0;width:0;height:0;}
.diag-opt span{display:block;border:1.5px solid var(--border);border-radius:10px;padding:10px 14px;font-size:15px;cursor:pointer;background:var(--surface);color:var(--text);}
.diag-opt input:checked + span{border-color:var(--orange);background:var(--surface-orange-tint);font-weight:600;}

/* ===== Admin Guide search (templates/admin/guide.html) ===== */
#guide-search-box { margin: 0 0 16px 0; }
#guide-search-box .gs-field { position: relative; max-width: 480px; }
#guide-search { width: 100%; font-size: 15px; padding: 10px 36px 10px 12px; border: 1px solid var(--blue); border-radius: 6px; box-sizing: border-box; }
#guide-search-clear { display: none; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: none; background: none; cursor: pointer; font-size: 18px; line-height: 1; color: var(--gray-400); padding: 4px 8px; }
#guide-search-count { font-size: 13px; color: var(--gray-400); margin: 6px 0 0 0; min-height: 18px; }
/* Search-hit highlight — fixed warm amber with dark text; high contrast in light and dark mode. */
mark.guide-hit { background-color: #fde68a; color: #1f2937; border-radius: 2px; padding: 0 1px; }

/* ===== Compliance document vault (Task 3) ===== */
.vault-page { max-width: 1440px; margin: 0 auto; color: var(--text); }
.vault-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.vault-page-head h1 { margin: 0; color: var(--text); }
.vault-page-head > p { margin: 0; color: var(--text-subtle); font-size: 14px; }
.vault-kicker { margin: 0 0 4px; color: var(--green); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

#vault-explorer { display: grid; grid-template-columns: minmax(220px, 260px) minmax(0, 1fr); min-height: 520px; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 4px 16px rgba(46,42,106,.06); }
#vault-explorer .vx-tree { padding: 14px; overflow: auto; background: var(--surface-subtle, var(--surface)); border-right: 1px solid var(--border); }
#vault-explorer .vx-roots, #vault-explorer .vx-roots ul { margin: 0; padding-left: 16px; list-style: none; }
#vault-explorer .vx-roots { padding-left: 0; }
#vault-explorer .vx-folder { display: flex; align-items: center; gap: 5px; min-height: 36px; padding: 5px 7px; border-radius: 8px; color: var(--text); cursor: pointer; }
#vault-explorer .vx-folder:hover, #vault-explorer .vx-folder.sel { background: var(--blue-tint); }
#vault-explorer .vx-twist { width: 16px; flex: none; text-align: center; color: var(--text-subtle); }
#vault-explorer .vx-main { display: flex; min-width: 0; flex-direction: column; }
#vault-explorer .vx-breadcrumb { min-height: 24px; padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: 14px; }
#vault-explorer .vx-breadcrumb a, .vx-dl, .vx-act { color: var(--blue); }
#vault-explorer .vx-toolbar { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
#vault-explorer .vx-hint { flex: 1 1 100%; color: var(--text-subtle); font-size: 12px; }
#vault-explorer .vx-contents { min-height: 250px; padding: 12px 16px; overflow: auto; }
#vault-explorer .vx-upload-dropzone { display: block; width: calc(100% - 32px); margin: 12px 16px; padding: 24px; border: 2px dashed var(--gray-300); border-radius: 12px; background: transparent; color: var(--text); font: inherit; cursor: pointer; }
.vx-upload-dialog { display: flex; align-items: center; gap: 10px; padding: 12px 16px; flex-wrap: wrap; background: var(--surface); border-bottom: 1px solid var(--border); }
.vx-upload-dialog[hidden] { display: none; }
.vx-upload-dialog input:not([type="checkbox"]), .vx-upload-dialog select, #vault-explorer input[type="search"] { min-height: var(--ui-control-min-height, 44px); font-size: var(--ui-control-text-size, 14px) !important; color: var(--text); background: var(--surface); border-color: var(--border); }
.vx-upload-dialog input[type="file"] { max-width: 100%; }
.vx-uf { display: inline-flex; align-items: center; gap: 5px; color: var(--text); font-size: 12px; }
.vault-entity-panel .vx-uf { min-width: 0; max-width: 100%; flex-wrap: wrap; }
.vault-entity-panel .vx-uf input[type="file"] { min-width: 0; width: 100%; max-width: 100%; box-sizing: border-box; }
.vx-uf input[type="checkbox"] { width: 18px; height: 18px; }
#vault-explorer .vx-item, .vault-entity-panel .vx-item { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 8px 10px; border-radius: 8px; color: var(--text); font-size: 14px; }
#vault-explorer .vx-item:hover, .vault-entity-panel .vx-item:hover { background: var(--blue-tint); }
.vx-fname { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.vx-size, .vx-sep { color: var(--text-subtle); font-size: 12px; }
.vx-dl { margin-left: auto; }
.vx-item .vx-dl ~ .vx-dl { margin-left: 0; }
.vx-act, .vx-dl { font-size: 12px; white-space: nowrap; }
.vx-del { color: var(--red); }
.vx-empty { margin: 0; padding: 12px 2px; color: var(--text-subtle); }
#vault-explorer .vx-drop { outline: 2px dashed var(--blue); outline-offset: -4px; background: var(--blue-tint); }
.vx-toast { position: sticky; bottom: 0; margin: 8px 14px; padding: 9px 12px; z-index: 2; color: var(--text); background: var(--surface-elevated, var(--surface)); border: 1px solid var(--border); border-radius: 8px; }
.vx-toast.err { color: var(--red); border-color: var(--red); }
#vault-explorer .vx-versions { margin: 8px 14px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.vx-versions-head { margin-bottom: 6px; font-weight: 600; }
.vx-version-row { padding: 4px 0; color: var(--text); font-size: 14px; }
.vx-exp-chip { padding: 2px 7px; color: var(--text); background: var(--blue-tint); border-radius: 999px; font-size: 12px; white-space: nowrap; }
.vx-details { margin: 8px 14px; padding: 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.vx-details[hidden] { display: none; }
.vx-details-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.vx-details-head h2, .vx-link-editor h3 { margin: 0; color: var(--text); }
.vx-details-head h2 { font-size: 18px; }
.vx-link-editor h3 { margin-bottom: 10px; font-size: 15px; }
.vx-details-grid, .vx-link-form { display: grid; grid-template-columns: minmax(180px, 2fr) minmax(150px, 1fr) minmax(150px, 1fr); gap: 12px; align-items: end; margin-bottom: 12px; }
.vx-details label, .vx-link-form label { display: flex; flex-direction: column; gap: 5px; color: var(--text); font-size: 12px; font-weight: 700; }
.vx-details input, .vx-details select { min-height: var(--ui-control-min-height, 44px); box-sizing: border-box; font-size: var(--ui-control-text-size, 14px) !important; }
.vx-link-editor { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.vx-link-form { grid-template-columns: minmax(150px, 1fr) minmax(130px, 1fr) auto; }
.vx-link-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 42px; padding: 7px 0; border-top: 1px solid var(--border); font-size: 14px; }
.vx-link-row:first-child { border-top: 0; }

.vault-entity-panel { margin: 16px 0; padding: 16px; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 4px 16px rgba(46,42,106,.06); }
.vault-entity-panel .vx-entity-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.vault-entity-panel .vx-entity-list { display: flex; flex-direction: column; gap: 3px; }
body.dark #vault-explorer, body.dark .vault-entity-panel, body.dark .vx-upload-dialog { background: var(--surface); border-color: var(--border); }
.vault-settings-page { max-width: 1280px; margin: 0 auto; padding-bottom: 56px; color: var(--text); }
.vault-settings-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.vault-settings-head h1 { margin: 0; color: var(--text); }
.vault-settings-head p:not(.vault-kicker) { max-width: 760px; margin: 7px 0 0; color: var(--text-subtle); font-size: 14px; }
.vault-page-actions, .vault-template-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vault-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.vault-audit-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.vault-audit-table th, .vault-audit-table td { padding: 11px 12px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.vault-audit-table th { color: var(--text); background: var(--surface-subtle, var(--surface)); font-size: 12px; letter-spacing: .03em; text-transform: uppercase; }
.vault-audit-table tr:last-child td { border-bottom: 0; }
.vault-audit-subtle { display: block; margin-top: 2px; color: var(--text-subtle); font-size: 12px; }
.vault-empty-row { color: var(--text-subtle); text-align: center !important; }
.vault-template-form { padding: 20px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.vault-template-form label { display: block; margin-bottom: 7px; color: var(--text); font-size: 12px; font-weight: 700; }
.vault-template-form textarea { width: 100%; min-height: 420px; padding: 12px; box-sizing: border-box; resize: vertical; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 8px; font: 14px/1.55 ui-monospace, SFMono-Regular, Consolas, monospace; }
.vault-template-form textarea:focus { outline: 3px solid color-mix(in srgb, var(--blue) 24%, transparent); border-color: var(--blue); }
.vault-form-help { margin: 8px 0 16px; color: var(--text-subtle); font-size: 12px; }

@media (max-width: 720px) {
    .vault-page-head { align-items: flex-start; flex-direction: column; }
    .vault-settings-head { align-items: flex-start; flex-direction: column; }
    .vault-page-actions, .vault-template-actions, .vault-page-actions .btn, .vault-template-actions .btn { width: 100%; }
    #vault-explorer { grid-template-columns: 1fr; min-height: 0; }
    #vault-explorer .vx-tree { max-height: 220px; border-right: 0; border-bottom: 1px solid var(--border); }
    #vault-explorer .vx-toolbar, .vx-upload-dialog { align-items: stretch; }
    #vault-explorer .vx-toolbar .btn, .vx-upload-dialog .btn, .vault-entity-panel .vx-entity-head .btn, #vault-explorer input[type="search"] { min-height: var(--ui-control-min-height, 44px); }
    #vault-explorer input[type="search"] { width: 100%; margin-left: 0 !important; }
    .vx-details-grid, .vx-link-form { grid-template-columns: 1fr; }
    .vx-details .btn { min-height: var(--ui-control-min-height, 44px); }
    .vault-entity-panel .vx-entity-head { align-items: stretch; flex-direction: column; }
    #vault-explorer .vx-item, .vault-entity-panel .vx-item { align-items: flex-start; flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
    #vault-explorer *, .vault-entity-panel * { animation: none !important; scroll-behavior: auto !important; transition: none !important; }
}

/* ---- Chat search (Group 3 item C) ------------------------------------- */
/* 16px on the input is deliberate: iOS Safari zooms the page on focus for
   anything smaller, and this is a field-crew phone surface. */
.chat-search { padding: 8px 12px; }
.chat-search-label {
    display: block;
    font-size: 12px;
    margin-bottom: 4px;
    color: var(--text-muted, #555);
}
.chat-search-input {
    width: 100%;
    font-size: 16px;
    padding: 10px;
    border: 1px solid var(--blue);
    border-radius: 6px;
}
.chat-search-results {
    max-height: 60vh;
    overflow-y: auto;
    border-bottom: 2px solid var(--blue);
}
.chat-search-channel {
    font-size: 14px;
    font-weight: 600;
    padding: 8px 12px;
    background: var(--blue-tint);
}
.chat-search-hit {
    display: block;
    width: 100%;
    text-align: left;
    font-size: 14px;
    padding: 10px 12px;
    border: 0;
    border-bottom: 1px solid var(--blue-tint);
    background: none;
    cursor: pointer;
}
.chat-search-meta { font-size: 12px; opacity: 0.75; padding: 4px 12px; }
.chat-search-hit .chat-search-meta { padding: 4px 0 0; }
.chat-back-to-results {
    display: block;
    width: 100%;
    text-align: left;
    font-size: 14px;
    padding: 10px 12px;
    border: 0;
    background: var(--blue-tint);
    cursor: pointer;
}
.chat-jump-latest {
    position: fixed;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 14px;
    padding: 8px 16px;
    border: 0;
    border-radius: 999px;
    background: var(--blue);
    color: #fff;
    cursor: pointer;
    z-index: 5;
}
.message-row-highlight { background: var(--blue-tint); }