/* ============================================================
       CSS CUSTOM PROPERTIES
    ============================================================ */
    :root {
      /* Brand palette extracted from Hoosier Built logo:
         Deep charcoal/navy primary, bold crimson accent, silver-gray neutrals */
      --primary:        #1A1F2E;   /* deep near-black navy */
      --primary-light:  #252B3A;   /* slightly lighter for hover/border */
      --accent:         #DC2626;   /* crimson red (Phase 9) */
      --accent-hover:   #B91C1C;   /* darker on hover */
      --brand:          #DC2626;
      --bg:             #F0F2F5;
      --card:           #FFFFFF;
      /* Aliases for names the app was ALREADY using. An undefined custom property is
         invalid at computed-value time, so `background: var(--bg-card)` did not fall
         through to anything -- it resolved to the initial value, transparent. Panels
         meant to read as white cards on the grey page were showing the page through
         them, and a toggle's "off" state had no fill at all. Defined as var()
         references so they cannot drift from the tokens they mirror.
         Counted before adding: --bg-card 6 uses, --bg-secondary 4, --brand-soft 1,
         --surface 1 -- all `background:`, none of them defined anywhere. */
      --bg-card:        var(--card);
      --bg-secondary:   var(--bg);
      --surface:        var(--card);
      /* Soft brand tint, used once behind brand-coloured text. Computed, not eyeballed:
         #DC2626 on #FFF5F5 is 4.51:1, which just clears AA for small text. The usual
         choices fail -- #FEF2F2 is 4.41:1 and #FEE2E2 is 3.95:1. #DC2626 is dark
         enough that its ceiling even on pure white is only 4.83:1, so there is very
         little room here; darkening the tint any further drops below AA. */
      --brand-soft:     #FFF5F5;
      --border:         #E2E6EC;
      --text-primary:   #0D1117;
      --text-secondary: #4A5568;
      --text-muted:     #64748B;   /* darkened from #94A3B8 (2.6:1, failed AA) -> 4.9:1 passes AA */
      --sidebar-w:      240px;
      --header-h:       64px;
      --radius:         8px;
      --shadow:         0 1px 3px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.06);
      --shadow-md:      0 4px 6px -1px rgba(0,0,0,.10), 0 2px 4px -1px rgba(0,0,0,.06);

      /* Lead status tokens */
      --s-new:         #039855; --s-new-bg:         #ECFDF3;
      --s-contacted:   #B54708; --s-contacted-bg:   #FFFAEB;
      --s-appt:        #6941C6; --s-appt-bg:        #F9F5FF;
      --s-quoted:      #026AA2; --s-quoted-bg:      #F0F9FF;
      --s-sold:        #1D2939; --s-sold-bg:        #F2F4F7;
      --s-lost:        #B42318; --s-lost-bg:        #FEF3F2;
      /* Pipeline lanes read --s-<stage> by the stage KEY, so these must be named
         after the status values, not shortened. --s-appointment and --s-follow_up
         were missing entirely, which left those two lanes with no header color. */
      --s-appointment: #6941C6; --s-appointment-bg: #F9F5FF;
      --s-follow_up:   #B54708; --s-follow_up-bg:   #FFFAEB;
      --s-unqualified: #64748B; --s-unqualified-bg: #F1F5F9;

      /* Rep colors */
      --rep-paul:  #2563EB;

      /* ========================================================================
         PHASE 1-A CANONICAL TOKEN LAYER (added 2026-07-13)
         Purely ADDITIVE — nothing consumes these yet, so the app is pixel-identical.
         The Phase 1-B sweep migrates raw hex/px onto these. Values adopt what is
         ALREADY on screen so the look never changes (owner directive: UI stays).
         ======================================================================== */

      /* --- Spacing scale (the only allowed steps; kills 2996 raw px in 1-B) --- */
      --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
      --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;

      /* --- Type scale: Inter, exactly 6 sizes (14px min data / 16px min input) --- */
      --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      --fs-xs: 12px;   --lh-xs: 16px;   /* meta/caption only — never body/data */
      --fs-sm: 14px;   --lh-sm: 20px;   /* data minimum */
      --fs-base: 16px; --lh-base: 24px; /* body + input minimum (prevents iOS zoom) */
      --fs-md: 18px;   --lh-md: 26px;
      --fs-lg: 24px;   --lh-lg: 32px;
      --fs-xl: 30px;   --lh-xl: 38px;
      --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;

      /* --- Radii: 3 canonical (existing --radius:8px kept as-is for pixel parity) --- */
      --radius-sm: 6px;  --radius-md: 10px;  --radius-pill: 999px;

      /* --- Shadows: 3 elevations (--shadow, --shadow-md exist above; add lg) --- */
      --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.10), 0 4px 6px -2px rgba(0,0,0,.05);

      /* --- Motion: 2 durations + 1 easing --- */
      --dur-micro: 150ms;  --dur-panel: 250ms;  --ease-standard: cubic-bezier(.4, 0, .2, 1);

      /* --- Semantic aliases (map to colors ALREADY used, so no visual change) --- */
      --success: #039855; --success-bg: #ECFDF3;   /* == --s-new  */
      --warning: #B54708; --warning-bg: #FFFAEB;   /* == --s-contacted */
      --danger:  #DC2626; --danger-bg:  #FEF2F2;    /* == --accent */
      --info:    #026AA2; --info-bg:    #F0F9FF;     /* == --s-quoted */

      /* ------------------------------------------------------------------------
         WCAG AA (4.5:1 normal text) — key text/surface pairs, measured:
           text-primary   #0D1117 on card #FFFFFF ...... 18.7:1  PASS (AAA)
           text-secondary #4A5568 on card #FFFFFF ......  8.0:1  PASS (AAA)
           text-muted     #94A3B8 on card #FFFFFF ......  2.6:1  ⚠ FAIL  (see FLAG-1)
           white          #FFFFFF on danger #DC2626 ....  4.0:1  ⚠ <4.5 normal / OK for
                          bold button labels (AA large 3:1 PASS)          (see FLAG-2)
         FLAGS for owner (fixing = a VISIBLE change → not done unilaterally per UI-stays rule;
         logged in BLOCKED.md B7):
           FLAG-1: --text-muted fails AA as body text; darkening ~1 shade fixes it.
           FLAG-2: white-on-red buttons are 4.0:1 (fine bold, sub-AA for thin text).
         COLOR DRIFT (three live reds — pick one truth; = visible change → owner, B7):
           --accent #DC2626 (token)  vs  #B8152E (x18 hardcoded)  vs  #C41E3A (x18, calendar).
         PIPELINE VOCAB: lead stages (--s-*) and job statuses (--js-*) are two separate
         color vocabularies; spec wants one unified pipeline. Unifying recolors badges =
         visible → owner decision. Kept separate for now.
         ------------------------------------------------------------------------ */
    }

    /* ============================================================
       RESET & BASE
    ============================================================ */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    /* overscroll-behavior-y: none turns OFF the browser's pull-to-refresh.
       A rep quoting on an iPad scrolls a long form constantly; overscrolling at
       the top of it triggered a full page reload, and a reload mid-quote loses
       everything not yet saved. Nothing in this app wants a swipe-to-reload --
       the resume handler in index.html already refreshes stale data on its own,
       and it now declines to do so while a quote is open (Quote.hasUnsavedWork).
       `contain` is not enough here: it stops scroll CHAINING but still permits
       the refresh gesture. Applied to both elements because iOS Safari takes the
       value from whichever it treats as the viewport-defining element. */
    html {
      font-size: 16px;
      overscroll-behavior-y: none;
    }
    body {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      background: var(--bg);
      color: var(--text-primary);
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
      min-height: 100vh;
      overscroll-behavior-y: none;
    }
    /* ---- Window brand toggle (bottom of the quote, above the totals) ----
       Sized for a thumb on an iPad in someone's living room, not a mouse:
       44px tall is the minimum reliable touch target, and the two options sit
       side by side so the choice reads at a glance rather than as a dropdown
       that hides whichever one is not selected. */
    .q-brand-section { padding: 10px 0 2px; }
    .q-brand-head { display: flex; align-items: baseline; justify-content: space-between; padding: 0 0 6px; }
    .q-brand-title { font-size: 13px; font-weight: 600; color: var(--text-secondary); }
    .q-brand-hint  { font-size: 11.5px; font-weight: 400; color: var(--text-muted); }
    .q-brand-pills { display: flex; gap: 8px; }
    .q-brand-pill {
      flex: 1; min-height: 44px; padding: 0 14px;
      border: 1.5px solid var(--border); border-radius: 10px;
      background: var(--card); color: var(--text-secondary);
      font-family: inherit; font-size: 14px; font-weight: 600;
      transition: border-color .15s, background .15s, color .15s;
    }
    .q-brand-pill[aria-pressed="true"] {
      border-color: var(--accent);
      background: var(--brand-soft, rgba(139,16,32,.08));
      color: var(--accent);
    }

    button { cursor: pointer; border: none; outline: none; font-family: inherit; background: none; }
    input, select, textarea { font-family: inherit; outline: none; }
    a { text-decoration: none; color: inherit; }
    .hidden { display: none !important; }

    /* ============================================================
       LOADING SCREEN
    ============================================================ */
    #app-loading {
      position: fixed; inset: 0; z-index: 300;
      background: var(--primary);
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      gap: 20px;
    }
    #app-loading .logo-box {
      display: flex; align-items: center; justify-content: center;
    }
    #app-loading .logo-box img {
      /* 220px suited the old wide wordmark. The H&B monogram is SQUARE, so the same
         width would render a 220x220 block — sized to match the old logo's visual
         weight instead, which also keeps it sharp on a 2x iPad screen. */
      width: 128px; height: auto;
      filter: drop-shadow(0 2px 8px rgba(0,0,0,.5));
    }
    .spinner {
      width: 36px; height: 36px;
      border: 3px solid rgba(255,255,255,.2);
      border-top-color: white;
      border-radius: 50%;
      animation: spin .75s linear infinite;
    }
    #app-loading p { color: rgba(255,255,255,.6); font-size: 14px; }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* ============================================================
       LOGIN SCREEN
    ============================================================ */
    #login-screen {
      min-height: 100vh;
      display: flex; align-items: center; justify-content: center;
      background: linear-gradient(140deg, #1A1F2E 0%, #252B3A 100%);
      padding: 24px;
    }
    .login-card {
      background: white;
      border-radius: 16px;
      padding: 48px 40px;
      width: 100%; max-width: 420px;
      box-shadow: 0 24px 64px rgba(0,0,0,.35);
    }
    .login-brand {
      text-align: center;
      margin-bottom: 36px;
    }
    .login-brand p { font-size: 13px; color: var(--text-secondary); margin-top: 4px; }

    .form-group { margin-bottom: 18px; }
    .form-label {
      display: block; font-size: 13px; font-weight: 500;
      color: var(--text-primary); margin-bottom: 6px;
    }
    .form-input {
      width: 100%; height: 44px;
      padding: 0 14px;
      border: 1.5px solid var(--border);
      border-radius: var(--radius);
      font-size: 15px; color: var(--text-primary);
      transition: border-color .15s;
    }
    .form-input:focus { border-color: var(--accent); }
    .form-input::placeholder { color: var(--text-muted); }

    .btn-login {
      width: 100%; height: 48px;
      background: var(--accent); color: white;
      border-radius: var(--radius);
      font-size: 15px; font-weight: 600;
      transition: background .15s, transform .1s;
      margin-top: 8px;
    }
    .btn-login:hover  { background: var(--accent-hover); }
    .btn-login:active { transform: scale(.99); }
    .btn-login:disabled { opacity: .6; cursor: not-allowed; }

    .login-error {
      background: #FEF3F2; border: 1px solid #FECDCA;
      color: #B42318; border-radius: var(--radius);
      padding: 11px 14px; font-size: 13px;
      margin-top: 14px; display: none;
    }

    /* ============================================================
       APP SHELL
    ============================================================ */
    #app { display: flex; min-height: 100vh; }

    /* ---- SIDEBAR ---- */
    #sidebar {
      width: var(--sidebar-w);
      background: var(--primary);
      height: 100vh;
      height: -webkit-fill-available;
      height: 100svh;
      display: flex; flex-direction: column;
      position: fixed; top: 0; left: 0; z-index: 100;
      transition: transform .25s ease;
    }
    .sidebar-head {
      padding: 14px 16px;
      border-bottom: 1px solid rgba(255,255,255,.07);
    }
    .sidebar-brand {
      display: flex; align-items: center; justify-content: center;
    }
    .sidebar-brand-logo {
      /* Square monogram — see the loading-screen note above. */
      width: 72px; height: auto;
      display: block;
      filter: drop-shadow(0 1px 3px rgba(0,0,0,.4));
    }
    .sidebar-brand-icon { display: none; }
    .sidebar-brand-text { display: none; }

    /* min-height:0 lets this flex item shrink BELOW its content height, which is
       what makes the list actually scroll instead of pushing the pinned footer
       off the bottom. Without it a short viewport (phone landscape, iPad with a
       standalone-PWA status-bar inset) can hide the ADMIN group -- Settings,
       Activity Log, System Health, Email Log, Sign Out -- with no way to reach
       it. overscroll-behavior:contain stops the page body behind the drawer
       from scrolling once the list hits its end. */
    .sidebar-nav {
      flex: 1; min-height: 0;
      padding: 10px 8px;
      overflow-y: auto; -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
    }
    .nav-section {
      font-size: 10px; font-weight: 600;
      color: rgba(255,255,255,.3);
      text-transform: uppercase; letter-spacing: .08em;
      padding: 16px 8px 5px;
    }
    .nav-item {
      display: flex; align-items: center; gap: 10px;
      padding: 0 12px; height: 44px;
      border-radius: 8px;
      color: rgba(255,255,255,.6);
      font-size: 13.5px; font-weight: 500;
      cursor: pointer;
      transition: background .12s, color .12s;
      margin-bottom: 2px;
      user-select: none;
    }
    .nav-item:hover  { background: rgba(255,255,255,.06); color: white; }
    .nav-signout { color: rgba(255,255,255,.45); margin-top: 4px; }
    .nav-signout:hover { background: rgba(220,38,38,.15); color: #FCA5A5; }
    .nav-item.active {
      background: rgba(184,21,46,.22);
      color: white;
      border-left: 3px solid var(--accent);
      padding-left: calc(10px - 3px);
    }
    .nav-item.active .nav-icon { color: #FF8A8A; }
    .nav-icon { width: 18px; height: 18px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
    .nav-icon svg { width: 17px; height: 17px; }

    .sidebar-foot {
      padding: 10px 8px;
      padding-bottom: max(10px, env(safe-area-inset-bottom));
      border-top: 1px solid rgba(255,255,255,.07);
      flex-shrink: 0;
    }
    .user-row {
      display: flex; align-items: center; gap: 9px;
      padding: 8px 10px; border-radius: 8px;
    }
    .user-avatar {
      width: 32px; height: 32px; border-radius: 50%;
      background: var(--accent);
      display: flex; align-items: center; justify-content: center;
      color: white; font-size: 13px; font-weight: 700;
      flex-shrink: 0;
    }
    .user-meta { flex: 1; overflow: hidden; }
    .user-name  { font-size: 13px; font-weight: 600; color: white; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .user-role  { font-size: 11px; color: rgba(255,255,255,.45); }
    .logout-btn {
      width: 30px; height: 30px;
      display: flex; align-items: center; justify-content: center;
      border-radius: 6px; color: rgba(255,255,255,.45);
      transition: background .12s, color .12s;
      flex-shrink: 0;
    }
    .logout-btn:hover { background: rgba(255,255,255,.08); color: white; }

    /* ---- MAIN AREA ---- */
    #main-content {
      margin-left: var(--sidebar-w);
      flex: 1; min-height: 100vh;
      display: flex; flex-direction: column;
    }
    .top-bar {
      height: var(--header-h);
      background: white;
      border-bottom: 1px solid var(--border);
      box-shadow: 0 1px 0 var(--border), 0 2px 8px rgba(0,0,0,.04);
      display: flex; align-items: center;
      padding: 0 28px;
      position: sticky; top: 0; z-index: 50;
      gap: 12px;
    }
    .menu-toggle {
      display: none; width: 44px; height: 44px;
      align-items: center; justify-content: center;
      border-radius: var(--radius); color: var(--text-primary);
    }
    .page-title { font-size: 17px; font-weight: 700; }
    .header-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

    .view-wrap { flex: 1; padding: 24px; }
    .view { display: none; }
    .view.active { display: block; }

    /* ---- SIDEBAR OVERLAY (mobile) ---- */
    #sidebar-overlay {
      display: none; position: fixed; inset: 0;
      background: rgba(0,0,0,.5); z-index: 99;
      /* The backdrop's only job is tap-to-close (click still fires; touch-action
         only governs pan/zoom), so swallow pan gestures here -- otherwise
         dragging on the dimmed area scrolls the page behind the open drawer. */
      touch-action: none;
    }

    /* ============================================================
       SHARED COMPONENTS
    ============================================================ */

    /* Buttons */
    .btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 7px;
      height: 40px; padding: 0 16px;
      border-radius: var(--radius); font-size: 14px; font-weight: 600;
      transition: background .15s, border-color .15s;
      white-space: nowrap;
    }
    .btn-sm { height: 36px; padding: 0 12px; font-size: 13px; }
    .btn-accent { background: var(--accent); color: white; }
    .btn-accent:hover { background: var(--accent-hover); }
    .btn-outline { background: white; color: var(--text-primary); border: 1.5px solid var(--border); }
    .btn-outline:hover { border-color: var(--text-secondary); }
    .btn-ghost { background: transparent; color: var(--text-secondary); }
    .btn-ghost:hover { background: var(--bg); color: var(--text-primary); }
    .btn-danger { background: var(--danger); color: white; }
    .btn-danger:hover { filter: brightness(.92); }

    /* Styled confirm/alert dialog (js/dialog.js) — sits above every other modal */
    .dialog-overlay { z-index: 500; }
    .dialog-msg { font-size: 14px; line-height: 1.55; color: var(--text-primary); margin: 0; }
    .dialog-card .modal-head { border-bottom: none; padding-bottom: 4px; }
    .dialog-card .modal-body { padding-top: 8px; }

    /* Status pills */
    .status-pill {
      display: inline-flex; align-items: center;
      padding: 2px 10px; border-radius: 20px;
      font-size: 12px; font-weight: 600;
    }
    .status-new        { color: var(--s-new);       background: var(--s-new-bg); }
    .status-contacted  { color: var(--s-contacted);  background: var(--s-contacted-bg); }
    .status-appointment{ color: var(--s-appt);       background: var(--s-appt-bg); }
    .status-quoted     { color: var(--s-quoted);     background: var(--s-quoted-bg); }
    .status-sold       { color: var(--s-sold);       background: var(--s-sold-bg); }
    .status-lost       { color: var(--s-lost);       background: var(--s-lost-bg); }
    .status-follow_up  { color: #B54708;             background: #FFFAEB; }
.status-unqualified { color: var(--s-unqualified); background: var(--s-unqualified-bg); }
/* Item 2C. Both are "still alive but not moving", so they read warmer than
   Lost and cooler than Follow Up. */
.status-no_decision { color: #7C3AED; background: #F5F3FF; }
.status-unable_to_contact { color: #0E7490; background: #ECFEFF; }

    /* ── Email Log (admin) ───────────────────────────────────────────────── */
    .el-banner {
      display: flex; flex-wrap: wrap; gap: 4px;
      background: #FFFAEB; border: 1px solid #FEDF89; border-left: 4px solid #DC6803;
      color: #7A2E0E; border-radius: 8px;
      padding: 12px 16px; margin: 0 0 16px; font-size: 13px; line-height: 1.5;
    }
    .el-banner strong { color: #7A2E0E; }
    .el-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
    .el-table th {
      text-align: left; padding: 10px 12px;
      font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
      color: var(--text-muted); border-bottom: 2px solid var(--border);
      position: sticky; top: 0; background: var(--bg-card, #FFF); z-index: 1;
    }
    .el-table td { padding: 11px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
    .el-table tr:last-child td { border-bottom: none; }
    .el-pill {
      display: inline-block; padding: 3px 9px; border-radius: 999px;
      font-size: 11px; font-weight: 700; letter-spacing: .03em; white-space: nowrap;
    }
    .el-pill-ok   { color: #027A48; background: #ECFDF3; }
    .el-pill-fail { color: #B42318; background: #FEF3F2; cursor: help; }
    @media (max-width: 640px) {
      /* Customer name and sender are the first things to go on a phone — the
         address and the result are what someone is actually checking. */
      .el-table th:nth-child(3), .el-table td:nth-child(3),
      .el-table th:nth-child(5), .el-table td:nth-child(5) { display: none; }
    }

    /* Cards */
    .card {
      background: white;
      border: 1px solid var(--border);
      border-radius: 12px; padding: 22px;
      box-shadow: 0 1px 4px rgba(0,0,0,.05);
    }
    .card-title {
      font-size: 14px; font-weight: 700; margin-bottom: 16px;
      color: var(--text-primary); text-transform: uppercase;
      letter-spacing: .05em;
    }
    .card-header {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 16px;
    }
    .card-header .card-title { margin-bottom: 0; }

    /* Grid helpers */
    .stats-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
      gap: 14px;
      margin-bottom: 20px;
    }
    .stat-card {
      background: white; border: 1px solid var(--border);
      border-radius: 12px; padding: 18px 20px;
      box-shadow: 0 1px 4px rgba(0,0,0,.04);
      position: relative; overflow: hidden;
    }
    .stat-card::before {
      content: ''; position: absolute;
      top: 0; left: 0; width: 4px; height: 100%;
      background: var(--accent);
      border-radius: 2px 0 0 2px;
    }
    .stat-label { font-size: 11px; font-weight: 600; color: var(--text-secondary); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .06em; }
    .stat-value { font-size: 30px; font-weight: 800; color: var(--text-primary); line-height: 1; }
    .stat-sub   { font-size: 11px; color: var(--text-muted); margin-top: 6px; }
    .stat-card.accent-green::before { background: #10B981; }
    .stat-card.accent-blue::before  { background: #3B82F6; }
    .stat-card.accent-purple::before{ background: #8B5CF6; }
    .stat-card.accent-amber::before { background: #F59E0B; }

    /* Placeholder views */
    .placeholder-wrap {
      display: flex; align-items: center; justify-content: center;
      min-height: 60vh;
    }
    .placeholder-card {
      background: white; border: 1px solid var(--border); border-radius: 14px;
      padding: 56px 40px; text-align: center; max-width: 440px; width: 100%;
    }
    .placeholder-icon {
      width: 60px; height: 60px;
      background: var(--bg); border-radius: 12px;
      display: flex; align-items: center; justify-content: center;
      margin: 0 auto 18px;
    }
    .placeholder-card h2 { font-size: 19px; font-weight: 700; margin-bottom: 8px; }
    .placeholder-card p  { font-size: 14px; color: var(--text-secondary); line-height: 1.6; }
    .placeholder-badge {
      display: inline-block;
      margin-top: 16px; padding: 4px 12px;
      background: var(--bg); border-radius: 20px;
      font-size: 12px; font-weight: 600;
      color: var(--text-secondary);
    }

    /* Tab rows (Sequences, Settings, etc.) */
    .tab-row {
      display: flex; border-bottom: 2px solid var(--border);
      gap: 0; margin-bottom: 20px;
    }
    .tab-btn {
      padding: 9px 18px; font-size: 13px; font-weight: 500;
      color: var(--text-secondary); background: none; border: none;
      border-bottom: 2px solid transparent; margin-bottom: -2px;
      cursor: pointer; transition: color .15s, border-color .15s;
      white-space: nowrap;
    }
    .tab-btn:hover  { color: var(--text-primary); }
    .tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }

    /* Toast */
    #toast-container {
      position: fixed; bottom: 24px; right: 24px;
      z-index: 9999;
      display: flex; flex-direction: column; gap: 10px;
      pointer-events: none;
    }
    .toast {
      background: var(--primary); color: white;
      padding: 13px 18px; border-radius: var(--radius);
      font-size: 14px; font-weight: 500;
      box-shadow: var(--shadow-md);
      animation: toastIn .2s ease;
      max-width: 320px;
    }
    .toast.success { background: #039855; }
    .toast.error   { background: #B42318; }
    .toast.warning { background: #B54708; }
    .toast.info    { background: var(--info); }  /* was missing — info toasts rendered as default navy */
    @keyframes toastIn {
      from { transform: translateX(24px); opacity: 0; }
      to   { transform: translateX(0);   opacity: 1; }
    }

    /* Activity list */
    .activity-item {
      display: flex; align-items: center; gap: 12px;
      padding: 11px 0; border-bottom: 1px solid var(--border);
      font-size: 13.5px;
    }
    .activity-item:last-child { border-bottom: none; }
    .activity-dot {
      width: 7px; height: 7px; border-radius: 50%;
      background: var(--accent); flex-shrink: 0;
    }
    .activity-meta { margin-left: auto; font-size: 12px; color: var(--text-muted); white-space: nowrap; }

    /* ============================================================
       DASHBOARD
    ============================================================ */
    #view-dashboard .section-row {
      display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
    }
    @media (max-width: 900px) {
      #view-dashboard .section-row { grid-template-columns: 1fr; }
    }

    /* ============================================================
       RESPONSIVE
    ============================================================ */
    @media (max-width: 768px) {
      #sidebar { transform: translateX(-100%); overflow-y: auto; }
      #sidebar.open { transform: translateX(0); }
      #sidebar-overlay { display: block; opacity: 0; pointer-events: none; transition: opacity .25s; }
      #sidebar-overlay.visible { opacity: 1; pointer-events: auto; }
      #main-content { margin-left: 0; }
      .menu-toggle { display: flex; }
      .view-wrap { padding: 14px; }
      .stats-grid { grid-template-columns: 1fr 1fr; }
      #rpt-mid-grid { grid-template-columns: 1fr !important; }
    }

    @media (max-width: 480px) {
      .stats-grid { grid-template-columns: 1fr; }
      .login-card { padding: 36px 24px; }
      #rpt-mid-grid { grid-template-columns: 1fr !important; }
    }

    /* Desktop: wider view wrap */
    @media (min-width: 1280px) {
      .view-wrap { padding: 28px 32px; }
    }

    /* ---- NARROW-DESKTOP SIDEBAR RAIL (mouse/trackpad only, 769-1100px) ----
       This used to be the "tablet" rail, but a pinned 62px rail is NOT what the
       owner wants on an iPad -- see the touch block right below, which gives
       every touch tablet the iPhone hamburger + slide-over drawer instead.
       Gated on (hover: hover) and (pointer: fine) so it can only ever match a
       real mouse/trackpad window that happens to be narrow. */
    @media (min-width: 769px) and (max-width: 1100px) and (hover: hover) and (pointer: fine) {
      :root { --sidebar-w: 62px; }
      .sidebar-head { padding: 10px 8px; }
      .sidebar-brand { justify-content: center; }
      .sidebar-brand-logo { display: none; }
      .sidebar-brand-icon {
        display: flex; align-items: center; justify-content: center;
        width: 38px; height: 38px; border-radius: 10px;
        background: var(--accent); color: white;
        font-size: 13px; font-weight: 800; letter-spacing: -.02em;
      }
      .nav-section { display: none; }
      .nav-item { justify-content: center; padding: 0; font-size: 0; }
      .nav-item .nav-icon { width: 20px; height: 20px; }
      .sidebar-foot .user-meta, .sidebar-foot .logout-btn { display: none; }
      .sidebar-foot .user-row { padding: 8px; justify-content: center; }
      .view-wrap { padding: 16px; }
      .top-bar { padding: 0 16px; }
    }

    /* ---- TOUCH TABLETS BEHAVE EXACTLY LIKE THE PHONE (iPad, both rotations) ----
       Owner spec: the iPad must OPERATE like the iPhone. Sidebar starts closed,
       the three lines in the header open it as a slide-over drawer, the dimmed
       backdrop (or picking any nav item) closes it. Nothing is pinned, so the
       full screen width belongs to the content.

       Why pointer capability and not just a width: iPad landscape is 1024-1366
       CSS px, which is the same range as real laptops. A max-width big enough
       for an iPad Pro 12.9 would also collapse the sidebar on a 1280px desktop
       browser, and even max-width:1024px would fire when someone drags a
       desktop window narrow. (hover: none) and (pointer: coarse) is the honest
       signal -- a touchscreen with no mouse -- and it can NEVER match a desktop
       window no matter how narrow it gets. min-width:769px hands phones to the
       max-width:768px block above, which already works and must not regress.
       Covers iPad Mini 744x1133, iPad 10.9 820x1180, iPad Pro 11 834x1194 and
       iPad Pro 12.9 1024x1366 in BOTH orientations, plus landscape phones. */
    @media (min-width: 769px) and (hover: none) and (pointer: coarse) {
      /* A 240px phone drawer looks lost on a 1194px iPad, so the panel gets a
         comfortable fixed 320px. Labels, icons, nav-item heights and font sizes
         all stay at their full desktop scale -- only the shell BEHAVIOR is
         borrowed from mobile, never the phone metrics. */
      #sidebar {
        width: 320px;
        transform: translateX(-100%);
        overscroll-behavior: contain;
      }
      #sidebar.open { transform: translateX(0); }
      #sidebar-overlay { display: block; opacity: 0; pointer-events: none; transition: opacity .25s; }
      #sidebar-overlay.visible { opacity: 1; pointer-events: auto; }
      #main-content { margin-left: 0; }
      .menu-toggle { display: flex; }
    }

    /* ---- NOTCH / STANDALONE-PWA SAFE AREAS ----
       Installed to the home screen there is no browser chrome and the page lays
       out edge to edge (viewport-fit=cover in the <head>), so the sticky header
       and the sidebar head would start UNDERNEATH the iOS status bar and the
       three-lines button would be untappable. No display-mode gate on purpose:
       env() reports 0 in a normal browser tab and on desktop, so these are a
       no-op there, and older iOS versions do not honor (display-mode: standalone)
       reliably. Matches the existing max()/env() pattern used on the login card
       and the mobile bottom nav. */
    .top-bar {
      height: calc(var(--header-h) + env(safe-area-inset-top));
      padding-top: env(safe-area-inset-top);
    }
    /* Landscape iPhone/iPad puts the notch on a SIDE edge, so the menu button
       and the drawer's labels need the horizontal insets too. Scoped to touch so
       the narrow-desktop rail's own 16px top-bar padding above is untouched. */
    @media (hover: none) and (pointer: coarse) {
      .top-bar {
        padding-left: max(28px, env(safe-area-inset-left));
        padding-right: max(28px, env(safe-area-inset-right));
      }
      /* Top inset here too: the drawer is its own fixed-position 100svh column
         starting at y=0, independent of the header. .sidebar-foot already
         carries env(safe-area-inset-bottom), which keeps Sign Out / the user
         block clear of the home indicator. */
      .sidebar-head { padding-top: max(14px, env(safe-area-inset-top)); }
      #sidebar { padding-left: env(safe-area-inset-left); }
    }

    /* ============================================================
       HOMEOWNER PRESENTATION OVERLAY
    ============================================================ */
    #hw-present-overlay {
      position: fixed; inset: 0; z-index: 2000;
      background: #060A12;
      flex-direction: column;
      animation: hwFadeIn .3s ease;
      overflow: hidden;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    }
    @keyframes hwFadeIn { from { opacity: 0; } to { opacity: 1; } }

    .hw-pres-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 16px 28px;
      padding-top: max(16px, env(safe-area-inset-top));
      padding-left: max(28px, env(safe-area-inset-left));
      padding-right: max(28px, env(safe-area-inset-right));
      border-bottom: 1px solid rgba(255,255,255,.06);
      flex-shrink: 0;
    }
    .hw-pres-logo-bar { display: flex; align-items: center; gap: 10px; }
    .hw-pres-brand-name { font-size: 15px; font-weight: 700; color: white; letter-spacing: -.01em; }
    .hw-pres-dots { display: flex; gap: 8px; align-items: center; }
    .hw-pres-dot {
      width: 8px; height: 8px; border-radius: 50%;
      background: rgba(255,255,255,.2); transition: background .25s, transform .25s;
      cursor: pointer;
    }
    .hw-pres-dot.active { background: #B8152E; transform: scale(1.35); }
    .hw-pres-close {
      width: 38px; height: 38px; border-radius: 10px;
      background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1);
      color: rgba(255,255,255,.6); display: flex; align-items: center; justify-content: center;
      cursor: pointer; transition: background .15s, color .15s;
    }
    .hw-pres-close:hover { background: rgba(255,255,255,.13); color: white; }

    .hw-pres-body { flex: 1; overflow: hidden; position: relative; }
    .hw-slide {
      position: absolute; inset: 0;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      padding: 24px 40px; overflow-y: auto;
      opacity: 0; transition: opacity .35s ease, transform .35s ease;
      transform: translateY(18px); pointer-events: none;
    }
    .hw-slide.active { opacity: 1; transform: translateY(0); pointer-events: auto; }
    .hw-slide-inner { width: 100%; max-width: 920px; }

    /* Slide 1 — Hero */
    .hw-hero-eyebrow {
      font-size: 11px; font-weight: 700; letter-spacing: .16em;
      color: #B8152E; text-transform: uppercase; margin-bottom: 18px;
      display: flex; align-items: center; justify-content: center; gap: 10px;
    }
    .hw-hero-eyebrow::before,.hw-hero-eyebrow::after {
      content:''; flex:1; max-width:56px; height:1px; background:rgba(184,21,46,.4);
    }
    .hw-hero-name {
      font-size: clamp(36px,5.5vw,68px); font-weight: 900; color: white;
      letter-spacing: -.03em; line-height: 1.05; margin-bottom: 10px; text-align: center;
    }
    .hw-hero-sub {
      font-size: clamp(15px,2vw,21px); color: rgba(255,255,255,.45);
      font-weight: 400; margin-bottom: 32px; text-align: center;
    }
    .hw-hero-details {
      display: flex; align-items: center; justify-content: center;
      gap: 12px; flex-wrap: wrap;
    }
    .hw-hero-detail-pill {
      background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09);
      border-radius: 100px; padding: 8px 16px;
      font-size: 13px; color: rgba(255,255,255,.65);
      display: flex; align-items: center; gap: 7px;
    }

    /* Slide 2 — Products */
    .hw-section-label {
      font-size: 11px; font-weight: 700; letter-spacing: .14em;
      color: #B8152E; text-transform: uppercase; margin-bottom: 10px; text-align: center;
    }
    .hw-slide-headline {
      font-size: clamp(22px,3.5vw,40px); font-weight: 800; color: white;
      letter-spacing: -.025em; margin-bottom: 24px; text-align: center;
    }
    .hw-products-grid {
      display: grid; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); gap: 12px;
    }
    .hw-product-card {
      background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
      border-radius: 14px; padding: 16px 18px;
      display: flex; align-items: flex-start; gap: 12px;
    }
    .hw-product-icon {
      width: 40px; height: 40px; border-radius: 10px;
      background: rgba(184,21,46,.12); border: 1px solid rgba(184,21,46,.2);
      display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #E8667A;
    }
    .hw-product-name { font-size: 13px; font-weight: 700; color: white; margin-bottom: 3px; }
    .hw-product-meta { font-size: 12px; color: rgba(255,255,255,.42); line-height: 1.5; }

    /* Slide 3 — Benefits */
    .hw-benefits-grid {
      display: grid; grid-template-columns: repeat(auto-fill,minmax(196px,1fr)); gap: 10px;
    }
    .hw-benefit-card {
      background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07);
      border-radius: 14px; padding: 16px; transition: background .2s, border-color .2s;
    }
    .hw-benefit-card:hover { background: rgba(255,255,255,.06); border-color: rgba(184,21,46,.3); }
    .hw-benefit-icon { font-size: 24px; margin-bottom: 8px; display: block; }
    .hw-benefit-title { font-size: 13px; font-weight: 700; color: white; margin-bottom: 4px; }
    .hw-benefit-desc { font-size: 11.5px; color: rgba(255,255,255,.42); line-height: 1.5; }

    /* Slide 4 — Investment */
    .hw-invest-total {
      font-size: clamp(52px,8vw,88px); font-weight: 900; color: white;
      letter-spacing: -.04em; line-height: 1; margin: 16px 0 24px; text-align: center;
      text-shadow: 0 0 80px rgba(184,21,46,.25);
    }
    .hw-invest-row {
      display: flex; align-items: stretch; justify-content: center;
      gap: 16px; margin-bottom: 20px; flex-wrap: wrap;
    }
    .hw-invest-item {
      background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09);
      border-radius: 16px; padding: 20px 32px; text-align: center; min-width: 170px;
    }
    .hw-invest-item-label {
      font-size: 10px; color: rgba(255,255,255,.4);
      text-transform: uppercase; letter-spacing: .12em; margin-bottom: 6px;
    }
    .hw-invest-item-val { font-size: 30px; font-weight: 800; color: white; }
    .hw-invest-item.accent { border-color: rgba(184,21,46,.4); background: rgba(184,21,46,.08); }
    .hw-invest-item.accent .hw-invest-item-val { color: #FF7A8E; }
    .hw-invest-monthly {
      background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
      border-radius: 12px; padding: 14px 28px;
      display: inline-flex; align-items: center; gap: 8px;
      font-size: 14px; color: rgba(255,255,255,.55); margin-bottom: 24px;
    }
    .hw-invest-monthly strong { color: white; font-size: 20px; font-weight: 800; }
    .hw-invest-badges {
      display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap;
    }
    .hw-invest-badge {
      font-size: 12px; color: rgba(255,255,255,.45);
      display: flex; align-items: center; gap: 5px;
    }
    .hw-invest-badge::before { content:'✓'; color:#22C55E; font-weight:700; font-size:13px; }

    /* Presentation nav footer */
    .hw-pres-nav {
      display: flex; align-items: center; justify-content: space-between;
      padding: 14px 28px;
      padding-bottom: max(14px, env(safe-area-inset-bottom));
      padding-left: max(28px, env(safe-area-inset-left));
      padding-right: max(28px, env(safe-area-inset-right));
      border-top: 1px solid rgba(255,255,255,.06); flex-shrink: 0;
    }
    .hw-nav-btn {
      display: flex; align-items: center; gap: 7px; padding: 10px 22px;
      border-radius: 10px; font-size: 14px; font-weight: 600;
      border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06);
      color: rgba(255,255,255,.65); cursor: pointer; transition: all .15s;
      min-width: 120px; justify-content: center;
    }
    .hw-nav-btn:hover:not(:disabled) {
      background: rgba(255,255,255,.1); color: white; border-color: rgba(255,255,255,.2);
    }
    .hw-nav-btn:disabled { opacity: .22; cursor: default; }
    .hw-nav-btn.hw-primary { background: #B8152E; border-color: #B8152E; color: white; }
    .hw-nav-btn.hw-primary:hover:not(:disabled) { background: #C91C36; border-color: #C91C36; }
    .hw-slide-counter { font-size: 13px; color: rgba(255,255,255,.3); font-weight: 500; }

    /* ============================================================
       LEADS MODULE
    ============================================================ */

    /* Toolbar */
    .leads-toolbar {
      display: flex; align-items: center; gap: 10px;
      margin-bottom: 16px; flex-wrap: wrap;
    }
    .leads-search-wrap {
      position: relative; flex: 1; min-width: 200px;
    }
    .leads-search-icon {
      position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
      color: var(--text-muted); pointer-events: none;
      display: flex; align-items: center;
    }
    .leads-search {
      width: 100%; height: 40px; padding: 0 12px 0 36px;
      border: 1.5px solid var(--border); border-radius: var(--radius);
      font-size: 14px; background: white; color: var(--text-primary);
      transition: border-color .15s;
    }
    .leads-search:focus { border-color: var(--accent); outline: none; }
    .leads-search::placeholder { color: var(--text-muted); }
    .leads-select {
      height: 40px; padding: 0 30px 0 11px;
      border: 1.5px solid var(--border); border-radius: var(--radius);
      font-size: 14px; background: white; color: var(--text-primary);
      appearance: none; cursor: pointer;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2398A2B3' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
      background-repeat: no-repeat; background-position: right 9px center;
    }
    .leads-count { font-size: 13px; color: var(--text-muted); white-space: nowrap; }

    /* iOS Safari zooms the page in whenever a focused input's font-size is < 16px.
       Lift inputs to 16px on TOUCH devices only (rep iPads/phones) so tapping a
       field/search/select no longer jarringly zooms — the desktop/office look
       (14–15px inputs) is untouched because mouse devices don't match this query. */
    @media (hover: none) and (pointer: coarse) {
      /* !important so inline font-size:<16px on some fields (11 of them) is also
         lifted — 16px is the correct minimum for every input on touch anyway. */
      input, select, textarea,
      .form-input, .leads-search, .leads-select, .form-textarea { font-size: 16px !important; }
    }

    /* Table */
    .leads-table-wrap {
      background: white; border: 1px solid var(--border);
      border-radius: 12px; overflow: hidden;
      box-shadow: 0 1px 4px rgba(0,0,0,.04);
    }
    .leads-table-head {
      display: grid;
      grid-template-columns: 2fr 1.5fr 150px 90px 80px;
      padding: 10px 18px;
      font-size: 11px; font-weight: 700; text-transform: uppercase;
      letter-spacing: .06em; color: var(--text-muted);
      border-bottom: 1px solid var(--border);
      background: var(--bg);
    }
    .leads-table-head.admin { grid-template-columns: 2fr 1.5fr 150px 120px 90px 80px; }
    .lead-row {
      display: grid;
      grid-template-columns: 2fr 1.5fr 150px 90px 80px;
      padding: 14px 18px; align-items: center;
      border-bottom: 1px solid var(--border);
      cursor: pointer; transition: background .12s;
    }
    .lead-row.admin { grid-template-columns: 2fr 1.5fr 150px 120px 90px 80px; }
    .lead-row:last-child { border-bottom: none; }
    .lead-row:hover { background: #F7F8FB; }
    .col-name { display: flex; align-items: center; gap: 11px; min-width: 0; }
    .lead-avatar-sm {
      width: 36px; height: 36px; border-radius: 10px;
      background: var(--primary); color: white;
      display: flex; align-items: center; justify-content: center;
      font-size: 13px; font-weight: 700; flex-shrink: 0;
    }
    .lead-row-name { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .lead-row-sub  { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .col-contact   { min-width: 0; }
    .col-rep, .col-date { font-size: 13px; color: var(--text-secondary); }
    .col-arrow { display: flex; justify-content: flex-end; align-items: center; gap: 4px; color: var(--text-muted); }
    .row-action-btn {
      width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      color: var(--text-secondary); transition: all .12s;
    }
    .row-action-btn.call:hover { background: #ECFDF3; color: #039855; }
    .row-action-btn.map:hover  { background: #EFF8FF; color: #026AA2; }
    .stale-badge {
      display: inline-flex; align-items: center;
      font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
      color: #B54708; background: #FFF7ED; border: 1px solid #FED7AA;
      padding: 1px 7px; border-radius: 10px; margin-left: 4px; vertical-align: middle;
    }
    .leads-empty { padding: 48px 24px; text-align: center; color: var(--text-muted); font-size: 14px; }
    /* Texting consent - drawer badge + intake-form checkbox */
    .consent-badge {
      display: inline-flex; align-items: center;
      font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
      padding: 2px 8px; border-radius: 10px; white-space: nowrap;
    }
    .consent-badge.ok   { color: #027A48; background: #ECFDF3; border: 1px solid #A6F4C5; }
    .consent-badge.none { color: #B42318; background: #FEF3F2; border: 1px solid #FECDCA; }
    .consent-check {
      display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; padding: 10px 12px;
      border: 1px solid var(--border); border-radius: 8px; background: var(--bg-subtle, #FAFAFA);
      font-size: 12.5px; line-height: 1.45; color: var(--text-muted); cursor: pointer;
    }
    .consent-check input { margin-top: 2px; flex: 0 0 auto; width: 16px; height: 16px; }
    .consent-check strong { color: var(--text); }

    /* Drawer */
    .lead-drawer {
      position: fixed; inset: 0; z-index: 200;
      display: none; justify-content: flex-end;
    }
    .lead-drawer.open { display: flex; }
    .drawer-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.4); }

    /* ---- Customers household view (matches leads list + drawer) ---- */
    .leads-table-head.cust, .lead-row.cust { grid-template-columns: 2fr 1.5fr 80px 70px 120px 72px; }
    .cust-drawer-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
    .cust-drawer-name { font-size: 18px; font-weight: 700; color: var(--text-primary); }
    .cust-drawer-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
    .cust-drawer-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 20px; }
    .cust-drawer-stats > div { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 8px; text-align: center; }
    .cust-stat-num { font-size: 16px; font-weight: 700; color: var(--text-primary); }
    .cust-stat-lbl { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
    .cust-drawer-section { margin-bottom: 18px; }
    .cust-drawer-section-head { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-secondary); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
    .cust-count { background: var(--bg); border-radius: 999px; padding: 1px 8px; font-size: 11px; color: var(--text-muted); }
    .cust-note { padding: 7px 0; border-bottom: 1px solid var(--border); }
    .cust-note:last-child { border-bottom: none; }
    .cust-note-meta { font-size: 10.5px; font-weight: 700; letter-spacing: .03em;
                      text-transform: uppercase; color: var(--text-muted); margin-bottom: 2px; }
    .cust-note-text { font-size: 12px; line-height: 1.5; color: var(--text-secondary);
                      white-space: pre-wrap; overflow-wrap: anywhere; }
    .cust-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border); }
    .cust-item:last-child { border-bottom: none; }

    /* ---- Activity / audit log ---- */
    .audit-item { display: flex; align-items: flex-start; gap: 12px; padding: 11px 4px; border-bottom: 1px solid var(--border); }
    .audit-item:last-child { border-bottom: none; }
    .audit-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex-shrink: 0; background: var(--text-muted); }
    .audit-dot.audit-quote { background: var(--info); }
    .audit-dot.audit-job { background: var(--s-appt); }
    .audit-dot.audit-lead { background: var(--success); }
    .audit-dot.audit-user { background: var(--success); }
    .audit-dot.audit-settings { background: var(--success); }
    .audit-body { min-width: 0; }
    .audit-line { font-size: 14px; }
    .audit-action { font-weight: 600; color: var(--text-primary); }
    .audit-detail { color: var(--text-secondary); }
    .audit-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

    /* ---- Pipeline kanban board ---- */
    .pipeline-board { display: flex; gap: 12px; overflow-x: auto; padding: 4px 0 12px; align-items: flex-start; }
    .pipe-lane { flex: 0 0 240px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; display: flex; flex-direction: column; max-height: calc(100vh - 170px); }
    .pipe-lane-head { padding: 10px 12px; border-bottom: 1px solid var(--border); border-radius: 10px 10px 0 0; background: var(--card); }
    .pipe-lane-title { font-size: 13px; font-weight: 700; color: var(--text-primary); }
    .pipe-lane-meta { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
    .pipe-lane-count { font-size: 12px; color: var(--text-muted); background: var(--bg); border-radius: 999px; padding: 1px 8px; }
    .pipe-lane-total { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
    .pipe-lane-body { padding: 8px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; min-height: 90px; }
    .pipe-empty { text-align: center; color: var(--text-muted); font-size: 12px; padding: 12px 0; }
    .pipe-card { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 10px; cursor: grab; transition: box-shadow .15s, transform .15s; touch-action: none; -webkit-user-select: none; user-select: none; }
    .pipe-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
    .pipe-card.dragging { opacity: .35; }
    .pipe-drag-ghost { position: fixed; z-index: 9999; width: 216px; pointer-events: none; box-shadow: var(--shadow-lg); transform: rotate(2deg); opacity: .96; cursor: grabbing; }
    .pipe-lane.drop-target { outline: 2px dashed var(--accent); outline-offset: -2px; }
    .pipe-lane.drop-target .pipe-lane-body { background: var(--info-bg); border-radius: 0 0 10px 10px; }

    /* ---- Payments dashboard ---- */
    .pay-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
    .pay-tile { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; }
    .pay-tile-num { font-size: 22px; font-weight: 700; color: var(--text-primary); }
    .pay-tile-lbl { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
    .leads-table-head.pay, .lead-row.pay { grid-template-columns: 2fr 90px 110px 110px 110px 90px; }
    @media (max-width: 640px) {
      .pay-summary { grid-template-columns: 1fr; gap: 8px; }
      .leads-table-head.pay, .lead-row.pay { grid-template-columns: 1.4fr 100px 84px !important; }
      .leads-table-head.pay > :nth-child(2), .leads-table-head.pay > :nth-child(3), .leads-table-head.pay > :nth-child(4),
      .lead-row.pay > :nth-child(2), .lead-row.pay > :nth-child(3), .lead-row.pay > :nth-child(4) { display: none !important; }
    }
    .pipe-card-name { font-size: 13.5px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .pipe-card-sub { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .pipe-card-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; gap: 6px; }
    .pipe-card-val { font-size: 12.5px; font-weight: 700; color: var(--text-secondary); }
    .pipe-card-age { font-size: 11px; color: var(--text-muted); background: var(--bg); border-radius: 999px; padding: 1px 7px; white-space: nowrap; }
    .pipe-card-age.pipe-age-amber { color: var(--warning); background: var(--warning-bg); }
    .pipe-card-age.pipe-age-red { color: var(--danger); background: var(--danger-bg); }

    @media (max-width: 640px) {
      .leads-table-head.cust, .lead-row.cust { grid-template-columns: 1.4fr 90px 64px !important; }
      .leads-table-head.cust > :nth-child(2), .leads-table-head.cust > :nth-child(3), .leads-table-head.cust > :nth-child(4),
      .lead-row.cust > :nth-child(2), .lead-row.cust > :nth-child(3), .lead-row.cust > :nth-child(4) { display: none !important; }
      .cust-drawer-stats { grid-template-columns: repeat(2, 1fr); }
    }
    .drawer-panel {
      position: relative; z-index: 1;
      width: 100%; max-width: 480px;
      /* The drawer is fixed at inset:0 and sits ABOVE the app header, so it does
         not inherit the header's safe-area padding -- it covers it. Without these
         insets the 44px close X renders under the notch / Dynamic Island on an
         iPhone and iOS eats the tap. Pinch-zoom cannot work around it either: a
         fixed element is pinned to the viewport, so zooming moves the page and
         leaves the button where it was. env() is 0 with no notch, so nothing
         changes on desktop or a non-notched iPad. */
      padding-top: env(safe-area-inset-top);
      padding-bottom: env(safe-area-inset-bottom);
      /* 100vh on iOS is the LARGE viewport height -- measured as if the browser
         chrome were hidden -- so the foot of the panel hides under Safari's
         toolbar. dvh tracks the live height; the vh line stays as the fallback. */
      height: 100vh;
      height: 100dvh;
      background: white; display: flex; flex-direction: column;
      box-shadow: -4px 0 32px rgba(0,0,0,.15);
      animation: drawerSlide .22s ease;
    }
    @keyframes drawerSlide {
      from { transform: translateX(32px); opacity: 0; }
      to   { transform: translateX(0);    opacity: 1; }
    }
    .drawer-head {
      display: flex; align-items: center; gap: 8px;
      padding: 12px 14px; border-bottom: 1px solid var(--border);
      flex-shrink: 0;
    }
    .drawer-close {
      width: 36px; height: 36px;
      display: flex; align-items: center; justify-content: center;
      border-radius: 8px; color: var(--text-secondary);
      transition: background .12s; flex-shrink: 0;
    }
    .drawer-close:hover { background: var(--bg); }
    .drawer-head-actions { margin-left: auto; display: flex; gap: 8px; }
    .drawer-body { flex: 1; overflow-y: auto; padding: 20px; }

    .drawer-lead-name { font-size: 20px; font-weight: 700; margin-bottom: 2px; }
    .drawer-lead-meta { font-size: 13px; color: var(--text-secondary); margin-bottom: 20px; }
    .drawer-section { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
    .drawer-section:last-child { border-bottom: none; padding-bottom: 0; }
    .drawer-section-title {
      font-size: 10px; font-weight: 700; text-transform: uppercase;
      letter-spacing: .07em; color: var(--text-muted); margin-bottom: 10px;
    }
    .drawer-info-row {
      display: flex; align-items: flex-start; gap: 8px;
      font-size: 14px; color: var(--text-primary); margin-bottom: 7px;
    }
    .drawer-info-row svg { color: var(--text-muted); flex-shrink: 0; margin-top: 1px; }
    .drawer-link { color: var(--primary); }
    .drawer-link:hover { text-decoration: underline; }

    /* Status buttons */
    .status-btn-group { display: flex; flex-wrap: wrap; gap: 6px; }
    .status-btn {
      height: 32px; padding: 0 13px;
      border-radius: 20px; font-size: 12px; font-weight: 600;
      border: 1.5px solid var(--border);
      background: white; color: var(--text-secondary);
      cursor: pointer; transition: all .12s;
    }
    .status-btn:hover { border-color: var(--text-secondary); color: var(--text-primary); }
    .status-btn.active.status-btn-new         { background: var(--s-new-bg);         color: var(--s-new);        border-color: var(--s-new); }
    .status-btn.active.status-btn-contacted   { background: var(--s-contacted-bg);   color: var(--s-contacted);  border-color: var(--s-contacted); }
    .status-btn.active.status-btn-appointment { background: var(--s-appt-bg);        color: var(--s-appt);       border-color: var(--s-appt); }
    .status-btn.active.status-btn-quoted      { background: var(--s-quoted-bg);      color: var(--s-quoted);     border-color: var(--s-quoted); }
    .status-btn.active.status-btn-sold        { background: var(--s-sold-bg);        color: var(--s-sold);       border-color: var(--s-sold); }
    .status-btn.active.status-btn-lost        { background: var(--s-lost-bg);        color: var(--s-lost);       border-color: var(--s-lost); }
    .status-btn.active.status-btn-follow_up   { background: var(--s-follow_up-bg);   color: var(--s-follow_up);  border-color: var(--s-follow_up); }
    .status-btn.active.status-btn-unqualified { background: var(--s-unqualified-bg); color: var(--s-unqualified); border-color: var(--s-unqualified); }

    /* Job value */
    .job-value-wrap { display: flex; align-items: center; gap: 4px; }
    .dollar-sign { font-size: 16px; font-weight: 600; color: var(--text-secondary); }
    .job-value-input {
      width: 150px; height: 40px; padding: 0 12px;
      border: 1.5px solid var(--border); border-radius: var(--radius);
      font-size: 16px; font-weight: 600; color: var(--text-primary);
    }
    .job-value-input:focus { border-color: var(--accent); outline: none; }

    /* Notes */
    .notes-input-row { display: flex; gap: 8px; margin-bottom: 12px; align-items: flex-start; }
    .notes-textarea {
      flex: 1; padding: 9px 12px;
      border: 1.5px solid var(--border); border-radius: var(--radius);
      font-size: 14px; resize: none; min-height: 58px; line-height: 1.5;
      transition: border-color .15s;
    }
    .notes-textarea:focus { border-color: var(--accent); outline: none; }
    .notes-list { display: flex; flex-direction: column; gap: 8px; }
    .note-item { background: var(--bg); border-radius: var(--radius); padding: 11px 13px; }
    .note-header { display: flex; justify-content: space-between; margin-bottom: 4px; }
    .note-author { font-size: 12px; font-weight: 600; color: var(--primary); }
    .note-time   { font-size: 11px; color: var(--text-muted); }
    .note-text   { font-size: 13.5px; color: var(--text-primary); line-height: 1.5; white-space: pre-wrap; }

    /* Add/Edit Modal */
    .modal-overlay {
      position: fixed; inset: 0; z-index: 300;
      display: none; align-items: center; justify-content: center; padding: 24px;
    }
    .modal-overlay.open { display: flex; }
    .modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
    .modal-card {
      position: relative; z-index: 1;
      background: white; border-radius: 16px;
      width: 100%; max-width: 560px;
      max-height: 92vh; overflow: hidden;
      display: flex; flex-direction: column;
      box-shadow: 0 20px 60px rgba(0,0,0,.25);
      animation: modalPop .18s ease;
    }
    @keyframes modalPop {
      from { transform: scale(.96) translateY(8px); opacity: 0; }
      to   { transform: scale(1)   translateY(0);   opacity: 1; }
    }
    .modal-head {
      display: flex; align-items: center; justify-content: space-between;
      padding: 18px 22px; border-bottom: 1px solid var(--border); flex-shrink: 0;
    }
    .modal-head h2 { font-size: 17px; font-weight: 700; }
    .modal-x {
      width: 32px; height: 32px;
      display: flex; align-items: center; justify-content: center;
      border-radius: 6px; color: var(--text-secondary); font-size: 20px; line-height: 1;
      transition: background .12s;
    }
    .modal-x:hover { background: var(--bg); }
    .modal-body { padding: 20px 22px; overflow-y: auto; flex: 1; }
    .modal-foot {
      display: flex; justify-content: flex-end; gap: 10px;
      padding: 14px 22px; border-top: 1px solid var(--border); flex-shrink: 0;
    }
    .form-row   { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
    .form-row-3 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 12px; margin-bottom: 14px; }
    .form-row .form-group,
    .form-row-3 .form-group { margin-bottom: 0; }

    @media (max-width: 640px) {
      .form-row, .form-row-3 { grid-template-columns: 1fr; }
      .drawer-panel { max-width: 100%; }
      .leads-table-head .col-contact,
      .leads-table-head .col-rep,
      .lead-row .col-contact,
      .lead-row .col-rep { display: none; }
      .leads-table-head,
      .lead-row          { grid-template-columns: 1fr 130px 80px !important; }
    }

    /* ============================================================
       CALENDAR MODULE
    ============================================================ */
    .cal-toolbar {
      display: flex; align-items: center; gap: 10px;
      margin-bottom: 16px; flex-wrap: wrap;
    }
    .cal-nav { display: flex; gap: 4px; }
    .cal-nav-btn {
      height: 36px; padding: 0 12px;
      border: 1.5px solid var(--border); border-radius: var(--radius);
      background: white; color: var(--text-primary); font-size: 14px; font-weight: 600;
      cursor: pointer; transition: all .12s;
    }
    .cal-nav-btn:hover { border-color: var(--text-secondary); }
    .cal-title {
      font-size: 17px; font-weight: 700; color: var(--text-primary);
      min-width: 200px;
    }
    .cal-views { display: flex; gap: 4px; margin-left: auto; }
    .cal-view-btn {
      height: 36px; padding: 0 13px;
      border: 1.5px solid var(--border); border-radius: var(--radius);
      background: white; color: var(--text-secondary);
      font-size: 13px; font-weight: 600; cursor: pointer; transition: all .12s;
    }
    .cal-view-btn:hover  { border-color: var(--text-secondary); color: var(--text-primary); }
    .cal-view-btn.active { background: var(--primary); color: white; border-color: var(--primary); }

    #calendar-wrap {
      background: white; border: 1px solid var(--border);
      border-radius: 12px; padding: 16px;
    }

    /* FullCalendar overrides */
    .fc { font-family: 'Inter', sans-serif; }
    .fc .fc-col-header-cell-cushion {
      font-size: 11px; font-weight: 700; text-transform: uppercase;
      letter-spacing: .06em; color: var(--text-secondary); text-decoration: none;
      padding: 8px 4px;
    }
    .fc .fc-daygrid-day-number {
      font-size: 13px; font-weight: 500; text-decoration: none;
      color: var(--text-primary); padding: 4px 8px;
    }
    .fc .fc-day-today .fc-daygrid-day-number {
      background: var(--accent); color: white;
      border-radius: 50%; width: 28px; height: 28px;
      display: flex; align-items: center; justify-content: center;
      padding: 0; margin: 4px 8px;
    }
    .fc .fc-day-today { background: rgba(196,30,58,.03) !important; }
    .fc .fc-event { border-radius: 5px; font-size: 12px; font-weight: 500; border: none; cursor: pointer; }
    .fc .fc-daygrid-event { padding: 2px 6px; margin-bottom: 1px; }
    .fc .fc-timegrid-event .fc-event-main { padding: 3px 6px; }
    .fc .fc-event-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .fc .fc-timegrid-now-indicator-line { border-color: var(--accent); }
    .fc .fc-timegrid-now-indicator-arrow { border-top-color: var(--accent); border-bottom-color: var(--accent); }
    .fc .fc-scrollgrid { border-color: var(--border); }
    .fc td, .fc th { border-color: var(--border); }
    .fc .fc-list-day-cushion { background: var(--bg); }
    .fc .fc-list-event:hover td { background: #FAFAFE; cursor: pointer; }

    /* ---- Time off -------------------------------------------------------
       A rep's day off has to read as UNAVAILABLE at a glance, not as one more
       booking that happens to be reddish. Diagonal hatching over a muted red is
       the universal "nothing goes here" marking, and unlike colour on its own it
       still reads when the block is three pixels tall in a crowded month cell.
       Deliberately a normal, clickable event and not a FullCalendar background
       event: whoever took the time off has to be able to open it and change it.
       The class is applied from Cal.subscribe(). */
    .fc .fc-event.cal-timeoff {
      background-image: repeating-linear-gradient(45deg,
        rgba(255,255,255,.30) 0 5px, rgba(255,255,255,0) 5px 10px);
      border: 1px solid #991B1B;
    }
    .fc .fc-event.cal-timeoff .fc-event-title { font-weight: 600; }

    /* ── Crowded days: "+N more" chip and its popover ──────────────────────
       dayMaxEvents is 2, so anything beyond that collapses into a link that
       opens a popover listing the whole day.

       The popover MUST declare an opaque background. On the painting CRM it
       inherited a near-transparent colour and the day-cell events showed through
       it, so the text appeared stacked on itself and the owner reported it as
       unreadable. Note `.fc-day-today` above sets a translucent red background —
       that is exactly what would bleed through here. */
    .fc .fc-daygrid-more-link {
      display: block;
      margin: 2px 4px 0;
      padding: 3px 6px;
      min-height: 22px;
      border-radius: 5px;
      font-size: 11px;
      font-weight: 600;
      color: var(--accent);
      background: rgba(184,21,46,.07);
      cursor: pointer;
    }
    .fc .fc-daygrid-more-link:hover { background: rgba(184,21,46,.14); }

    .fc-popover.fc-more-popover {
      background: #FFFFFF !important;
      z-index: 10000 !important;
      border: 1px solid var(--border);
      border-radius: 10px;
      box-shadow: 0 12px 32px rgba(0,0,0,.18);
      max-width: 300px;
    }
    .fc-popover.fc-more-popover .fc-popover-header {
      background: var(--bg) !important;
      font-size: 12px; font-weight: 700;
      padding: 8px 10px;
      border-radius: 10px 10px 0 0;
    }
    .fc-popover.fc-more-popover .fc-popover-body {
      background: #FFFFFF !important;
      max-height: 320px;
      overflow-y: auto;
      padding: 8px;
    }
    /* Event names WRAP in the popover — the whole point is readability, and an
       ellipsis would hide the customer name you opened it to read. */
    .fc-popover.fc-more-popover .fc-event,
    .fc-popover.fc-more-popover .fc-daygrid-event {
      white-space: normal !important;
      margin-bottom: 4px;
    }
    .fc-popover.fc-more-popover .fc-event-title {
      white-space: normal !important;
      overflow: visible !important;
      text-overflow: clip !important;
    }
    /* Give day cells room so two events plus the "+N more" chip all fit. */
    .fc .fc-daygrid-day-frame { min-height: 92px; }

    /* ── Nav count badge (Jobs: unseen remote signatures) ─────────────────── */
    .nav-badge {
      display: inline-flex; align-items: center; justify-content: center;
      min-width: 18px; height: 18px; margin-left: auto;
      padding: 0 5px; border-radius: 999px;
      background: var(--accent); color: #FFF;
      font-size: 10.5px; font-weight: 800; line-height: 1;
    }
    /* ── "SIGNED" row badge, matching the existing stale-badge treatment ──── */
    .signed-badge {
      display: inline-block; margin-left: 6px;
      padding: 1px 6px; border-radius: 4px;
      background: #FEF3F2; color: var(--accent);
      font-size: 10px; font-weight: 800; letter-spacing: .03em;
      vertical-align: middle; white-space: nowrap;
    }
    .fc .fc-non-business { background: rgba(0,0,0,.02); }
    .fc .fc-highlight { background: rgba(196,30,58,.08); }

    /* Rep legend */
    .cal-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
    .cal-legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); }
    .cal-legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

    /* Appointment modal form specifics */
    .time-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .allday-row { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
    .allday-row input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
    .allday-row label { font-size: 14px; font-weight: 500; cursor: pointer; }

    /* ============================================================
       QUOTING MODULE
    ============================================================ */

    /* Stepper */
    .quote-stepper {
      display: flex; align-items: center;
      background: white; border: 1px solid var(--border);
      border-radius: 12px; padding: 4px; margin-bottom: 20px; gap: 2px;
    }
    .q-step {
      flex: 1; display: flex; align-items: center; justify-content: center;
      gap: 8px; height: 44px; border-radius: 8px;
      font-size: 13px; font-weight: 600; color: var(--text-muted);
      cursor: pointer; transition: all .15s; user-select: none;
    }
    .q-step:hover  { color: var(--text-primary); background: var(--bg); }
    .q-step.active { background: var(--primary); color: white; }
    .q-step.done   { color: var(--accent); }
    .q-step-num {
      width: 22px; height: 22px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 11px; font-weight: 700;
      background: var(--bg); color: var(--text-muted); flex-shrink: 0;
    }
    .q-step.active .q-step-num { background: rgba(255,255,255,.2); color: white; }
    .q-step.done   .q-step-num { background: rgba(196,30,58,.12);  color: var(--accent); }

    /* Pages */
    .q-page { display: none; }
    .q-page.active { display: block; animation: q-page-in .18s ease; }
    @keyframes q-page-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

    /* Card */
    .q-card {
      background: white; border: 1px solid var(--border);
      border-radius: 12px; padding: 24px; margin-bottom: 16px;
    }
    .q-card-title {
      font-size: 15px; font-weight: 700; margin-bottom: 18px;
      display: flex; align-items: center; gap: 8px;
    }

    /* Totals */
    .q-totals {
      margin-top: 16px; padding: 14px 16px;
      background: var(--bg); border-radius: 10px;
      display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
    }
    .q-total-row { display: flex; gap: 24px; align-items: center; }
    .q-total-label { font-size: 13px; color: var(--text-secondary); }
    .q-total-val   { font-size: 14px; font-weight: 600; min-width: 90px; text-align: right; }
    .q-total-val.grand { font-size: 22px; font-weight: 700; color: var(--primary); }

    /* Discount buttons */
    .discount-btns { display: flex; gap: 6px; }
    .disc-btn {
      height: 34px; padding: 0 12px;
      border-radius: 6px; font-size: 13px; font-weight: 600;
      border: 1.5px solid var(--border);
      background: white; color: var(--text-secondary); cursor: pointer; transition: all .12s;
    }
    .disc-btn:hover  { border-color: var(--accent); color: var(--accent); }
    .disc-btn.active { background: var(--accent); color: white; border-color: var(--accent); }

    /* Price modal slider */
    #pm-slider { -webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:4px;background:transparent;cursor:pointer;position:relative;z-index:2;outline:none;display:block;margin:0;padding:0; }
    #pm-slider::-webkit-slider-thumb { -webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:white;border:3px solid var(--pm-thumb-color,#1d4ed8);cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.2);transition:border-color .2s; }
    #pm-slider::-moz-range-thumb { width:24px;height:24px;border-radius:50%;background:white;border:3px solid var(--pm-thumb-color,#1d4ed8);cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.2); }

    /* Value prop */
    .value-prop-list { display: flex; flex-direction: column; gap: 10px; }
    .vp-item {
      display: flex; align-items: flex-start; gap: 12px;
      background: var(--bg); border-radius: 8px; padding: 12px 14px;
    }
    .vp-icon {
      width: 36px; height: 36px; border-radius: 8px;
      background: var(--accent); color: white;
      display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    .vp-text h4 { font-size: 14px; font-weight: 600; margin-bottom: 3px; }
    .vp-text p  { font-size: 12px; color: var(--text-secondary); line-height: 1.5; }

    /* Financing */
    .fin-plan-grid {
      display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
      gap: 10px; margin-bottom: 16px;
    }
    .fin-plan-card {
      border: 2px solid var(--border); border-radius: 10px;
      padding: 14px 16px; cursor: pointer; transition: all .15s;
      background: white; text-align: center;
    }
    .fin-plan-card:hover    { border-color: var(--accent); }
    .fin-plan-card.selected { border-color: var(--accent); background: rgba(196,30,58,.04); }
    .fin-plan-name { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
    .fin-plan-desc { font-size: 12px; color: var(--text-secondary); }
    .fin-monthly   { font-size: 22px; font-weight: 700; color: var(--accent); margin-top: 6px; }

    /* Signature */
    #sig-canvas, #rep-sig-canvas {
      border: 2px dashed var(--border); border-radius: 10px;
      cursor: crosshair; display: block; width: 100%; touch-action: none;
      background: white;
    }
    #sig-canvas.signed, #rep-sig-canvas.signed { border-color: var(--primary); border-style: solid; }

    /* Quote list */
    .quotes-table-wrap {
      background: white; border: 1px solid var(--border);
      border-radius: 12px; overflow: hidden;
    }
    /* The last track holds Copy, Delete and the chevron. It was 30px -- sized
       back when the chevron was the only thing in it -- and the actions are a
       flex row justified to the END, so a container narrower than its contents
       overflows off its START edge. That is why Copy rendered on top of the
       status pill rather than spilling harmlessly to the right. */
    .quote-row-head {
      display: grid;
      grid-template-columns: 1.5fr 120px 120px 110px 100px 150px;
      column-gap: 8px;
      padding: 9px 16px;
      font-size: 11px; font-weight: 600; text-transform: uppercase;
      letter-spacing: .05em; color: var(--text-muted);
      border-bottom: 1px solid var(--border); background: #FAFAFA;
    }
    .quote-row {
      display: grid;
      grid-template-columns: 1.5fr 120px 120px 110px 100px 150px;
      column-gap: 8px;
      padding: 12px 16px; align-items: center;
      border-bottom: 1px solid var(--border);
      cursor: pointer; transition: background .1s;
    }
    /* Grid items default to min-width:auto, so a long address refuses to shrink
       and shoves the columns to its right out of line. */
    .quote-row > * { min-width: 0; }
    .quote-row > * > div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .quote-actions {
      display: flex; align-items: center; gap: 8px; justify-content: flex-end;
    }
    /* Was an inert span. It is a control now, so it has to look like one -
       a version number you cannot click is just decoration. */
    .q-version-badge {
      font-size: 10px; font-weight: 600; color: var(--brand);
      background: var(--brand-soft); border: 1px solid transparent;
      padding: 1px 5px; border-radius: 4px; cursor: pointer;
      font-family: inherit; line-height: 1.5; white-space: nowrap;
    }
    .q-version-badge:hover { border-color: var(--brand); }
    .q-version-badge:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
    .quote-row:last-child { border-bottom: none; }
    .quote-row:hover { background: #FAFAFE; }
    .q-status-pill {
      display: inline-flex; align-items: center;
      padding: 2px 10px; border-radius: 20px;
      font-size: 12px; font-weight: 600;
    }
    .qs-draft    { background: #F2F4F7; color: var(--text-secondary); }
    .qs-sent     { background: #F0F9FF; color: #026AA2; }
    .qs-accepted { background: #ECFDF3; color: #039855; }
    .qs-declined { background: #FEF3F2; color: #B42318; }

    /* Nav footer */
    .q-nav-footer {
      display: flex; align-items: center; justify-content: space-between;
      background: white; border: 1px solid var(--border);
      border-radius: 12px; padding: 14px 20px; margin-top: 4px;
    }
    .q-page-indicator {
      font-size: 13px; color: var(--text-secondary); font-weight: 500;
      display: flex; flex-direction: column; line-height: 1.35; min-width: 0;
    }
    /* Autosave stamp. Shares the page indicator's slot instead of becoming a
       fifth child of the nav footer -- that bar is already a back button,
       running totals, the indicator and three buttons, and overflowing it is
       exactly how the quote-row actions ended up printing over the status
       pill. Quiet on purpose: it is reassurance a rep can glance at with a
       customer sitting next to them, not an announcement. */
    .q-draft-stamp {
      font-size: 11px; font-weight: 500; color: var(--s-won, #039855);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }

    /* The offer to resume an autosaved quote, above the quote list. Amber, not
       red: nothing has gone wrong that the rep needs to fix -- there is simply
       work here that was never saved to the server. */
    .q-draft-banner {
      display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
      background: #FFFAEB; border: 1px solid #FEDF89; border-radius: 10px;
      padding: 12px 16px; margin-bottom: 12px;
    }
    .q-draft-banner-text  { flex: 1 1 240px; min-width: 0; }
    .q-draft-banner-title { font-size: 14px; font-weight: 600; color: #93370D; }
    .q-draft-banner-sub   { font-size: 12px; color: #B54708; margin-top: 2px; }
    .q-draft-banner-acts  { display: flex; gap: 8px; flex-wrap: wrap; }

    @media (max-width: 900px) {
      .qi-col-loc, .qi-col-series { display: none; }
    }
    @media (max-width: 768px) {
      .qi-col-size, .qi-col-color { display: none; }
      .q-step .q-step-label { display: none; }
      /* Customer, total and status across the top; the buttons get their own
         line underneath. Squeezing all five into 430px is what produced the
         overlap on an iPhone, and 11px text wedged against a pill is not a tap
         target anybody hits on the first try. */
      .quote-row, .quote-row-head {
        grid-template-columns: 1fr 88px 92px;
        column-gap: 10px;
        row-gap: 10px;
      }
      .qcol-date, .qcol-rep { display: none; }
      /* Without this the header's empty actions cell wraps onto its own line and
         doubles the header's height. */
      .quote-row-head > :last-child { display: none; }
      .quote-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
      }
      /* Fingers, not cursors. */
      .quote-actions button {
        min-height: 34px; padding: 0 14px !important; font-size: 12px !important;
      }
      /* The whole row already opens the quote, so the chevron is decoration
         costing a tap target's worth of width. */
      .quote-actions svg { display: none; }
    }

    /* ============================================================
       JOBS MODULE
    ============================================================ */
    /* Status tokens */
    /* Wrapped in :root because these were declared at the top level of the
       stylesheet, outside any selector -- invalid, so every browser discarded
       them and var(--js-*) resolved to nothing. The .status-job-* rules below
       hardcode the same values, which is why nothing looked broken. */
    :root {
    --js-scheduled:     #6941C6; --js-scheduled-bg:  #F9F5FF;
    --js-measured:      #B54708; --js-measured-bg:   #FFFAEB;
    --js-ordered:       #026AA2; --js-ordered-bg:    #F0F9FF;
    --js-install:       #C41E3A; --js-install-bg:    rgba(196,30,58,.08);
    --js-complete:      #039855; --js-complete-bg:   #ECFDF3;
    --js-on-hold:       #475467; --js-on-hold-bg:    #F2F4F7;
    }

    .status-job-new       { color: #B54708; background: #FFF7ED; font-weight:700; }
    .status-job-scheduled { color: #6941C6; background: #F9F5FF; }
    .status-job-measured  { color: #B54708; background: #FFFAEB; }
    .status-job-ordered   { color: #026AA2; background: #F0F9FF; }
    .status-job-install   { color: #C41E3A; background: rgba(196,30,58,.1); }
    .status-job-complete  { color: #039855; background: #ECFDF3; }
    .status-job-on-hold   { color: #475467; background: #F2F4F7; }

    /* Jobs table — same grid pattern as leads */
    .jobs-table-wrap {
      background: white; border: 1px solid var(--border);
      border-radius: 12px; overflow: hidden;
    }
    .jobs-table-head {
      display: grid;
      grid-template-columns: 2fr 1.4fr 140px 110px 90px 80px;
      padding: 9px 16px;
      font-size: 11px; font-weight: 600; text-transform: uppercase;
      letter-spacing: .05em; color: var(--text-muted);
      border-bottom: 1px solid var(--border); background: #FAFAFA;
    }
    .jobs-table-head.admin     { grid-template-columns: 2fr 1.4fr 140px 110px 110px 90px 80px; }
    .jobs-table-head.installer { grid-template-columns: 2fr 1.4fr 140px 90px 80px; }
    .job-row {
      display: grid;
      grid-template-columns: 2fr 1.4fr 140px 110px 90px 80px;
      padding: 13px 16px; align-items: center;
      border-bottom: 1px solid var(--border);
      cursor: pointer; transition: background .1s;
    }
    .job-row.admin     { grid-template-columns: 2fr 1.4fr 140px 110px 110px 90px 80px; }
    .job-row.installer { grid-template-columns: 2fr 1.4fr 140px 90px 80px; }
    .job-row:last-child { border-bottom: none; }
    .job-row:hover { background: #FAFAFE; }
    .job-row-name { font-size: 14px; font-weight: 500; }
    .job-row-sub  { font-size: 12px; color: var(--text-muted); }
    .job-col-date { font-size: 13px; color: var(--text-secondary); }

    /* Status btn group for jobs */
    .job-status-btn {
      height: 30px; padding: 0 11px;
      border-radius: 20px; font-size: 11px; font-weight: 600;
      border: 1.5px solid var(--border);
      background: white; color: var(--text-secondary);
      cursor: pointer; transition: all .12s;
    }
    .job-status-btn:hover { border-color: var(--text-secondary); }
    .job-status-btn.active.jsb-new       { background: #FFF7ED; color: #B54708; border-color: #B54708; font-weight:700; }
    .job-status-btn.active.jsb-scheduled { background: #F9F5FF; color: #6941C6; border-color: #6941C6; }
    .job-status-btn.active.jsb-measured  { background: #FFFAEB; color: #B54708; border-color: #B54708; }
    .job-status-btn.active.jsb-ordered   { background: #F0F9FF; color: #026AA2; border-color: #026AA2; }
    .job-status-btn.active.jsb-install   { background: rgba(196,30,58,.08); color: #C41E3A; border-color: #C41E3A; }
    .job-status-btn.active.jsb-complete  { background: #ECFDF3; color: #039855; border-color: #039855; }
    .job-status-btn.active.jsb-on-hold   { background: #F2F4F7; color: #475467; border-color: #475467; }

    /* File tabs */
    .file-tabs {
      display: flex; gap: 4px; flex-wrap: wrap;
      margin-bottom: 12px;
    }
    .file-tab {
      height: 32px; padding: 0 13px;
      border-radius: 6px; font-size: 12px; font-weight: 600;
      border: 1.5px solid var(--border);
      background: white; color: var(--text-secondary);
      cursor: pointer; transition: all .12s;
    }
    .file-tab:hover   { border-color: var(--text-secondary); }
    .file-tab.active  { background: var(--primary); color: white; border-color: var(--primary); }

    /* File list item */
    .file-item {
      display: flex; align-items: center; gap: 10px;
      background: var(--bg); border-radius: 8px;
      padding: 10px 12px; margin-bottom: 8px;
    }
    .file-item-icon { color: var(--accent); flex-shrink: 0; }
    .file-item-name { font-size: 13px; font-weight: 500; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .file-item-del  {
      width: 26px; height: 26px; border-radius: 6px; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      color: var(--text-muted); transition: all .12s; cursor: pointer;
    }
    .file-item-del:hover { background: #FEF3F2; color: var(--s-lost); }

    /* Photo grid */
    .photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; margin-bottom: 10px; }
    .photo-thumb {
      aspect-ratio: 1; border-radius: 8px; overflow: hidden;
      border: 1px solid var(--border); cursor: pointer; position: relative;
    }
    .photo-thumb img { width: 100%; height: 100%; object-fit: cover; }
    .photo-thumb-del {
      position: absolute; top: 4px; right: 4px;
      width: 22px; height: 22px; border-radius: 4px;
      background: rgba(0,0,0,.5); color: white;
      display: flex; align-items: center; justify-content: center;
      font-size: 12px; opacity: 0; transition: opacity .15s;
    }
    .photo-thumb:hover .photo-thumb-del { opacity: 1; }

    /* Upload progress */
    .upload-progress {
      display: flex; flex-direction: column; gap: 4px; margin-top: 8px; margin-bottom: 4px;
    }
    .upload-bar { width: 100%; height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; }
    .upload-bar-fill { height: 100%; background: var(--accent); border-radius: 2px; transition: width .3s; }

    /* Install Calendar event content */
    .fc-event-inner { display: flex; flex-direction: column; gap: 1px; padding: 1px 2px; overflow: hidden; }
    .fc-event-title { font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .fc-event-crew  { font-size: 10px; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    /* Several jobs on one day must read as several jobs. Each chip gets its own
       separation and a little height rather than merging into a colour block. */
    #install-calendar-el .fc-daygrid-event {
      margin: 2px 3px; border-radius: 5px; border: none;
      box-shadow: 0 1px 2px rgba(0,0,0,.12);
    }

    /* Week view is the production manager planning screen: taller day columns
       and roomier chips, because a week is read job-by-job, not at a glance. */
    #install-calendar-el .fc-dayGridWeek-view .fc-daygrid-day-frame { min-height: 320px; }
    #install-calendar-el .fc-dayGridWeek-view .fc-event-inner       { padding: 4px 6px; }
    #install-calendar-el .fc-dayGridWeek-view .fc-event-title       { font-size: 12px; }
    #install-calendar-el .fc-dayGridWeek-view .fc-event-crew        { font-size: 11px; white-space: normal; }
    #install-calendar-el .fc-dayGridWeek-view .fc-daygrid-event     { margin: 3px 4px; }

    @media (max-width: 640px) {
      .jobs-table-head, .job-row { grid-template-columns: 1fr 120px 90px 80px !important; }
      .jobs-table-head .jcol-addr,
      .jobs-table-head .jcol-rep,
      .job-row .jcol-addr,
      .job-row .jcol-rep { display: none; }
    }

    /* ============================================================
       PHASE 5/6 — DASHBOARDS
    ============================================================ */
    .dash-header { margin-bottom: 22px; }
    .dash-greeting { font-size: 26px; font-weight: 800; color: var(--text-primary); letter-spacing: -.01em; }
    .dash-date { font-size: 14px; color: var(--text-muted); margin-top: 4px; }
    .dash-section-title {
      font-size: 13px; font-weight: 700; text-transform: uppercase;
      letter-spacing: .06em; color: var(--text-secondary);
      margin: 26px 0 14px;
    }
    .dash-today-grid {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 6px;
    }
    .dash-today-card { padding: 20px; }
    .dash-big { font-size: 34px; font-weight: 800; line-height: 1; color: var(--text-primary); }
    .dash-countdown { font-size: 30px; font-weight: 800; color: #2563EB; font-variant-numeric: tabular-nums; }
    .dash-today-list { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
    .dash-appt-row {
      display: flex; justify-content: space-between; align-items: center;
      font-size: 13.5px; padding: 8px 10px; background: var(--bg); border-radius: 8px;
    }
    .dash-appt-time { font-weight: 600; color: var(--text-secondary); }
    .empty-state-sm { font-size: 13px; color: var(--text-muted); margin-top: 8px; }

    .dash-badge { display: inline-block; padding: 3px 14px; border-radius: 20px; font-size: 24px; font-weight: 800; }
    .dash-badge-green { background: #ECFDF3; color: #16A34A; }
    .dash-badge-red   { background: #FEF2F2; color: #DC2626; }

    .dash-motivation {
      font-size: 14px; font-weight: 600; color: var(--text-muted);
      margin-top: 6px; display: flex; align-items: center; gap: 6px;
    }
    .dash-motivation.fire  { color: #D97706; }
    .dash-motivation.green { color: #16A34A; }

    /* Revenue / Commission hero stat cards */
    .stat-card.hero-revenue { background: linear-gradient(135deg, #eff6ff 0%, #ffffff 65%); }
    .stat-card.hero-revenue::before { background: #2563EB; width: 5px; }
    .stat-card.hero-revenue .stat-value { color: #1D4ED8; }
    .stat-card.hero-commission { background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 65%); }
    .stat-card.hero-commission::before { background: #16A34A; width: 5px; }
    .stat-card.hero-commission .stat-value { color: #15803D; }

    /* Today card glow when revenue > 0 */
    .dash-today-card.today-win {
      border: 1.5px solid #86EFAC !important;
      box-shadow: 0 0 22px rgba(22,163,74,.14) !important;
    }

    .dash-progress { height: 14px; background: var(--bg); border-radius: 20px; overflow: hidden; }
    .dash-progress-fill { height: 100%; border-radius: 20px; transition: width .7s cubic-bezier(.22,.61,.36,1); }

    .dash-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 4px; }
    .dash-win-feed { display: flex; flex-direction: column; gap: 10px; }
    .dash-win-card {
      display: flex; justify-content: space-between; align-items: center;
      padding: 14px 16px 14px 14px; background: var(--bg); border-radius: 10px;
      border-left: 4px solid #16A34A;
      animation: fadeInUp .4s ease both;
      transition: transform .15s ease, box-shadow .15s ease;
    }
    .dash-win-card:hover { transform: translateX(4px); box-shadow: 0 2px 14px rgba(22,163,74,.16); }
    @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(12px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .dash-streak-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
    .dash-streak-box { text-align: center; padding: 16px 8px; background: var(--bg); border-radius: 10px; transition: background .3s; }
    .dash-streak-box.on-fire { background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%); border: 1px solid #FCD34D; }

    /* Admin Today's Pulse */
    .admin-pulse-grid { display: flex; gap: 12px; flex-wrap: wrap; }
    .admin-pulse-item { flex: 1; min-width: 90px; text-align: center; padding: 14px 10px; background: var(--bg); border-radius: 10px; }
    .admin-pulse-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-bottom: 6px; }
    .admin-pulse-value { font-size: 26px; font-weight: 800; line-height: 1; }
    .admin-pulse-sub { font-size: 11px; color: var(--text-muted); margin-top: 4px; }

    .dash-period-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 18px; }
    .dash-period-btn {
      padding: 7px 14px; font-size: 13px; font-weight: 600; border-radius: 8px;
      background: white; border: 1.5px solid var(--border); color: var(--text-secondary);
      transition: all .15s;
    }
    .dash-period-btn:hover  { border-color: var(--text-secondary); }
    .dash-period-btn.active { background: var(--accent); border-color: var(--accent); color: white; }

    .dash-charts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .dash-charts-grid canvas { max-height: 220px; }

    /* Generic data table (dashboards/leaderboard) */
    .data-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
    .data-table thead th {
      position: sticky; top: 0; background: var(--bg);
      padding: 11px 16px; text-align: left; font-size: 11px; font-weight: 700;
      text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted);
      border-bottom: 1px solid var(--border);
    }
    .data-table tbody td { padding: 12px 16px; border-bottom: 1px solid var(--border); }
    .data-table tbody tr:last-child td { border-bottom: none; }
    .data-table tbody tr:not(.my-row):hover { background: #FAFBFC; }
    .data-table tbody tr.my-row { background: #EFF6FF; font-weight: 600; }

    @media (max-width: 1000px) {
      .dash-today-grid { grid-template-columns: repeat(2, 1fr); }
      .dash-today-grid > .dash-today-card:last-child { grid-column: span 2; }
      .dash-two-col { grid-template-columns: 1fr; }
      .dash-charts-grid { grid-template-columns: 1fr; }
    }
    @media (max-width: 640px) {
      .dash-today-grid { grid-template-columns: 1fr; }
      .dash-today-grid > .dash-today-card:last-child { grid-column: span 1; }
    }

    /* ============================================================
       PHASE 9 — UTILITIES (skeleton, empty-state)
    ============================================================ */
    .skeleton {
      background: linear-gradient(90deg, #EEF1F4 25%, #E2E6EC 37%, #EEF1F4 63%);
      background-size: 400% 100%;
      animation: skeletonShimmer 1.4s ease infinite;
    }
    @keyframes skeletonShimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
    .empty-state {
      padding: 40px 24px; text-align: center; color: var(--text-muted);
      font-size: 14px; background: var(--bg); border-radius: 12px;
    }

    /* ============================================================
       PHASE 9 — MOBILE BOTTOM NAV (< 768px)
    ============================================================ */
    #bottom-nav { display: none; }
    @media (max-width: 768px) {
      #bottom-nav {
        display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 120;
        background: white; border-top: 1px solid var(--border);
        padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
        justify-content: space-around;
        box-shadow: 0 -2px 8px rgba(0,0,0,.06);
      }
      #bottom-nav .bn-item {
        display: flex; flex-direction: column; align-items: center; gap: 2px;
        flex: 1; padding: 4px 0; font-size: 10px; font-weight: 600;
        color: var(--text-muted); background: none;
      }
      #bottom-nav .bn-item.active { color: var(--accent); }
      #bottom-nav .bn-item svg { width: 20px; height: 20px; }
      .view-wrap { padding-bottom: 78px !important; }
    }

    /* ============================================================
       PHASE 7 — QUOTE WIZARD ENHANCEMENTS
    ============================================================ */
    .q-value-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 22px; }
    .q-value-card { display: flex; gap: 12px; padding: 16px; background: var(--bg); border-radius: 12px; align-items: flex-start; }
    .q-value-icon { width: 40px; height: 40px; flex-shrink: 0; border-radius: 10px; background: #FEF2F2; color: #DC2626; display: flex; align-items: center; justify-content: center; }
    .q-value-card h4 { font-size: 14px; font-weight: 700; margin-bottom: 3px; }
    .q-value-card p { font-size: 12.5px; color: var(--text-secondary); line-height: 1.45; }

    /* CSS-only confetti */
    #q-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 9998; overflow: hidden; }
    #q-confetti .confetti-piece {
      position: absolute; top: -10px; width: 10px; height: 14px; opacity: .9;
      animation: confettiFall 2.6s linear forwards;
    }
    @keyframes confettiFall {
      0%   { transform: translateY(-10px) rotateZ(0deg); opacity: 1; }
      100% { transform: translateY(105vh) rotateZ(720deg); opacity: 0; }
    }

    /* ---- Item modal (centered dialog on desktop, bottom sheet on mobile) ---- */
    .sheet-overlay {
      position: fixed; inset: 0; z-index: 400;
      background: rgba(0,0,0,.5);
      display: none; align-items: center; justify-content: center; padding: 20px;
    }
    .sheet-overlay.open { display: flex; animation: sheetFade .2s ease; }
    @keyframes sheetFade { from { opacity: 0; } to { opacity: 1; } }
    .sheet-panel {
      width: 100%; max-width: 860px; max-height: 92vh;
      background: white; border-radius: 16px;
      display: flex; flex-direction: column;
      box-shadow: 0 20px 60px rgba(0,0,0,.25);
      animation: sheetUp .22s cubic-bezier(.32,.72,0,1);
    }
    @keyframes sheetUp { from { transform: scale(.97) translateY(10px); opacity:0; } to { transform: scale(1) translateY(0); opacity:1; } }
    .sheet-head {
      display: flex; align-items: center; justify-content: space-between;
      padding: 18px 24px; border-bottom: 1px solid var(--border); flex-shrink: 0;
    }
    .sheet-head h3 { font-size: 17px; font-weight: 700; }
    .sheet-body { flex: 1; overflow-y: auto; padding: 24px; }
    .sheet-foot { padding: 16px 24px; border-top: 1px solid var(--border); flex-shrink: 0; }

    /* Two-column body layout */
    .qd-body-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
    .qd-divider { border: none; border-top: 1px solid var(--border); margin: 4px 0 20px; }
    .qd-section-label {
      font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
      color: var(--text-muted); margin-bottom: 14px; padding-bottom: 6px;
      border-bottom: 1px solid var(--border);
    }

    /* Product type grid */
    .qd-product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; margin-bottom: 4px; }
    .qd-product-btn {
      height: 56px; border-radius: 10px; border: 2px solid var(--border);
      background: white; font-size: 13px; font-weight: 600; color: var(--text-primary);
      display: flex; align-items: center; justify-content: center; text-align: center;
      padding: 6px 10px; cursor: pointer; transition: all .12s;
    }
    .qd-product-btn:hover { border-color: var(--accent); }
    .qd-product-btn.active { border-color: var(--accent); background: rgba(220,38,38,.06); color: var(--accent); }

    /* Quantity stepper */
    .qd-stepper { display: flex; align-items: center; gap: 14px; }
    .qd-step-btn {
      width: 40px; height: 40px; border-radius: 10px; border: 1.5px solid var(--border);
      background: white; font-size: 20px; font-weight: 700; color: var(--text-primary);
      display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
    }
    .qd-step-btn:hover { border-color: var(--accent); color: var(--accent); }
    .qd-step-val {
      font-size: 20px; font-weight: 700; width: 48px; text-align: center;
      border: none; outline: none; background: transparent; padding: 0;
      -moz-appearance: textfield;
    }
    .qd-step-val::-webkit-outer-spin-button,
    .qd-step-val::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

    /* Color / Series pills */
    .qd-pill-row { display: flex; flex-wrap: wrap; gap: 8px; }
    .qd-pill {
      height: 36px; padding: 0 14px; border-radius: 20px; border: 1.5px solid var(--border);
      background: white; font-size: 13px; font-weight: 600; color: var(--text-secondary);
      cursor: pointer; transition: all .12s;
    }
    .qd-pill:hover { border-color: var(--accent); }
    .qd-pill.active { background: var(--accent); color: white; border-color: var(--accent); }

    /* FFTO / toggle rows */
    .qd-ffto-row { display: flex; align-items: center; justify-content: space-between; padding: 4px 0; }
    .qd-toggle-lg { width: 52px; height: 30px; position: relative; display: inline-block; cursor: pointer; flex-shrink: 0; }
    .qd-toggle-lg input { opacity: 0; width: 0; height: 0; }
    .qd-toggle-lg-slider { position: absolute; inset: 0; background: #ccc; border-radius: 30px; transition: .2s; }
    .qd-toggle-lg-slider:before {
      content: ""; position: absolute; width: 24px; height: 24px;
      left: 3px; bottom: 3px; background: white; border-radius: 50%; transition: .2s; box-shadow: 0 1px 3px rgba(0,0,0,.3);
    }
    .qd-toggle-lg input:checked + .qd-toggle-lg-slider { background: var(--accent); }
    .qd-toggle-lg input:checked + .qd-toggle-lg-slider:before { transform: translateX(22px); }

    .qd-field-group { margin-bottom: 18px; }
    .qd-field-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin-bottom: 8px; }
    .qd-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

    /* Mobile: revert to bottom sheet */
    @media (max-width: 640px) {
      .sheet-overlay { align-items: flex-end; padding: 0; }
      .sheet-panel { border-radius: 20px 20px 0 0; max-height: 92vh; box-shadow: 0 -8px 40px rgba(0,0,0,.2); }
      @keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
      .qd-body-grid { grid-template-columns: 1fr; }
    }

    .qd-live-total {
      display: flex; align-items: center; justify-content: space-between;
      background: var(--bg); border-radius: 12px; padding: 14px 16px; margin-bottom: 14px;
    }
    .qd-live-total-label { font-size: 13px; color: var(--text-secondary); font-weight: 600; }
    .qd-live-total-val { font-size: 22px; font-weight: 700; color: var(--primary); }

    /* Line item cards (replaces table) */
    .qi-cards { display: flex; flex-direction: column; gap: 12px; }
    .qi-card {
      display: flex; align-items: center; gap: 12px;
      background: var(--bg); border-radius: 12px; padding: 15px 16px;
    }
    .qi-card-main { flex: 1; min-width: 0; }
    .qi-card-title { font-size: 15px; font-weight: 700; color: var(--text-primary); }
    .qi-card-sub { font-size: 13px; color: var(--text-secondary); margin-top: 5px; line-height: 1.45; }
    .qi-card-total { font-size: 15px; font-weight: 700; color: var(--primary); white-space: nowrap; }
    .qi-card-actions { display: flex; gap: 4px; flex-shrink: 0; }
    .qi-card-btn {
      width: 32px; height: 32px; border-radius: 8px;
      display: flex; align-items: center; justify-content: center;
      color: var(--text-muted); transition: background .12s, color .12s; cursor: pointer;
    }
    .qi-card-btn:hover { background: white; color: var(--text-primary); }
    .qi-card-btn.qi-card-del:hover { background: #FEF3F2; color: var(--s-lost); }

    /* Nav footer becomes a fixed bottom bar; carries running totals on page 2 */
    #quote-builder-view { padding-bottom: 92px; }
    .q-nav-footer {
      position: fixed; left: var(--sidebar-w); right: 24px; bottom: 16px; z-index: 60;
      box-shadow: 0 4px 24px rgba(0,0,0,.12);
      transition: left .2s;
    }
    .q-navfoot-totals { display: flex; align-items: baseline; gap: 8px; }
    .q-navfoot-sub { font-size: 12px; color: var(--text-secondary); }
    .q-navfoot-grand { font-size: 17px; font-weight: 700; color: var(--primary); }
    /* Clears the 62px narrow-desktop rail. Same pointer gate as the rail itself. */
    @media (max-width: 1100px) and (min-width: 769px) and (hover: hover) and (pointer: fine) { .q-nav-footer { left: 78px; } }
    /* Touch tablets run the sidebar as a slide-over drawer, so there is nothing
       pinned on the left to clear -- line the bar up with its own right gutter. */
    @media (min-width: 769px) and (hover: none) and (pointer: coarse) { .q-nav-footer { left: 24px; } }
    @media (max-width: 768px) {
      .q-nav-footer { left: 8px; right: 8px; bottom: calc(72px + env(safe-area-inset-bottom)); padding: 10px 14px; }
      .q-navfoot-totals { display: none; }
    }

    /* Admin-only discount custom field */
    .disc-custom-input {
      width: 56px; height: 34px; border-radius: 6px; border: 1.5px solid var(--border);
      font-size: 13px; text-align: center; font-family: inherit;
    }

    /* Success overlay */
    .q-success-overlay {
      position: fixed; inset: 0; z-index: 500; background: rgba(13,17,23,.92);
      display: none; align-items: center; justify-content: center; padding: 24px;
    }
    .q-success-overlay.open { display: flex; animation: sheetFade .2s ease; }
    .q-success-card {
      background: white; border-radius: 20px; padding: 40px 36px; max-width: 420px; width: 100%;
      text-align: center; animation: successPop .35s cubic-bezier(.34,1.56,.64,1);
    }
    @keyframes successPop { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
    .q-success-icon {
      width: 72px; height: 72px; border-radius: 50%; background: #ECFDF3; color: #16A34A;
      display: flex; align-items: center; justify-content: center; margin: 0 auto 18px;
    }
    .q-success-title { font-size: 21px; font-weight: 800; margin-bottom: 6px; }
    .q-success-sub { font-size: 14px; color: var(--text-secondary); margin-bottom: 26px; }
    .q-success-actions { display: flex; flex-direction: column; gap: 10px; }

    /* U-factor visual comparison bar */
    .uf-bar-track { height: 8px; background: var(--border); border-radius: 6px; overflow: hidden; margin-top: 8px; }
    .uf-bar-fill { height: 100%; border-radius: 6px; background: var(--accent); }

    /* ============================================================
       REPORTS — scoped visual language (2026-08-04)

       Deliberately NOT a restyle of .stat-card / .card: those are shared with
       the dashboard and every other screen, and changing them would drag the
       whole app along. Everything here is namespaced .rpt-*.

       What was wrong with the old look, and what replaced it:
       - Rainbow left-edge bars (green/blue/purple/amber) that encoded nothing.
         Colour now appears ONLY where it carries meaning: direction of travel,
         and goal attainment.
       - UPPERCASE + letter-spacing on both card titles and stat labels, which
         flattens hierarchy — when everything shouts, nothing reads first.
         Labels are now sentence case and muted.
       - Six identical boxes of identical weight, so revenue looked exactly as
         important as deposits. There is now one hero and a supporting row.
       - Numbers with no shape beside them. The hero carries a sparkline and its
         progress against goal.
    ============================================================ */
    .rpt-wrap { max-width: 1400px; }

    /* Header */
    .rpt-head { display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:20px; }
    .rpt-h1 { font-size:24px; font-weight:700; letter-spacing:-.025em; color:var(--text-primary); line-height:1.1; }
    .rpt-sub { font-size:13px; color:var(--text-muted); margin-top:4px; }
    .rpt-controls { margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

    /* Segmented period control — replaces a <select> for the primary axis of the
       whole screen. One tap, and the current window is always visible. */
    .rpt-seg { display:inline-flex; background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:3px; gap:2px; }
    .rpt-seg button {
      appearance:none; border:0; background:transparent; cursor:pointer;
      font:inherit; font-size:12.5px; font-weight:600; color:var(--text-muted);
      padding:0 12px; height:30px; border-radius:7px; white-space:nowrap; transition:background .12s,color .12s;
    }
    .rpt-seg button:hover { color:var(--text-primary); }
    .rpt-seg button.active { background:var(--card); color:var(--text-primary); box-shadow:0 1px 2px rgba(0,0,0,.06); }

    /* Surfaces: hairline border, generous radius, near-flat shadow. */
    .rpt-card {
      background:var(--card); border:1px solid var(--border); border-radius:14px;
      padding:20px 22px; box-shadow:0 1px 2px rgba(16,24,40,.04);
    }
    .rpt-card-head { display:flex; align-items:baseline; gap:12px; margin-bottom:16px; }
    .rpt-card-title { font-size:14.5px; font-weight:650; color:var(--text-primary); letter-spacing:-.01em; }
    .rpt-card-note { font-size:12px; color:var(--text-muted); margin-left:auto; }

    /* Hero metric */
    .rpt-hero { display:grid; grid-template-columns:minmax(240px,1fr) minmax(220px,1.1fr); gap:28px; align-items:center; }
    .rpt-hero-label { font-size:12.5px; font-weight:600; color:var(--text-muted); }
    .rpt-hero-value {
      font-size:44px; font-weight:700; letter-spacing:-.035em; line-height:1;
      color:var(--text-primary); margin-top:6px; font-variant-numeric:tabular-nums;
    }
    .rpt-hero-spark { height:56px; margin-top:14px; }

    /* Goal progress */
    .rpt-goal-row { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:8px; }
    .rpt-goal-label { font-size:12.5px; color:var(--text-muted); }
    .rpt-goal-pct { font-size:20px; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
    .rpt-track { height:9px; border-radius:99px; background:var(--bg); overflow:hidden; }
    .rpt-fill  { height:100%; border-radius:99px; transition:width .5s cubic-bezier(.4,0,.2,1); }
    .rpt-goal-foot { font-size:12px; color:var(--text-muted); margin-top:8px; }

    /* Supporting metric row */
    .rpt-metrics { display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr)); gap:0; margin-top:4px; }
    .rpt-metric { padding:16px 20px; border-left:1px solid var(--border); }
    .rpt-metric:first-child { border-left:0; padding-left:0; }
    .rpt-metric-label { font-size:12px; font-weight:500; color:var(--text-muted); }
    .rpt-metric-value {
      font-size:25px; font-weight:650; letter-spacing:-.025em; line-height:1.15;
      color:var(--text-primary); margin-top:5px; font-variant-numeric:tabular-nums;
    }
    .rpt-metric-foot { font-size:11.5px; color:var(--text-muted); margin-top:5px; line-height:1.35; }

    /* Delta pill — colour ONLY here and on the goal bar, where it means something */
    .rpt-delta { display:inline-flex; align-items:center; gap:3px; font-size:11.5px; font-weight:650;
                 padding:2px 7px; border-radius:99px; font-variant-numeric:tabular-nums; }
    .rpt-delta.up   { color:#067647; background:#ECFDF3; }
    .rpt-delta.down { color:#B42318; background:#FEF3F2; }
    .rpt-delta.flat { color:var(--text-muted); background:var(--bg); }

    /* Funnel */
    .rpt-funnel-row { display:grid; grid-template-columns:120px 1fr 76px; align-items:center; gap:14px; padding:9px 0; }
    .rpt-funnel-name { font-size:13px; font-weight:550; color:var(--text-secondary); }
    .rpt-funnel-track { height:26px; border-radius:7px; background:var(--bg); overflow:hidden; }
    .rpt-funnel-fill { height:100%; border-radius:7px; transition:width .5s cubic-bezier(.4,0,.2,1); }
    .rpt-funnel-val { text-align:right; font-size:15px; font-weight:650; font-variant-numeric:tabular-nums; color:var(--text-primary); }
    .rpt-funnel-conv { font-size:11px; color:var(--text-muted); font-variant-numeric:tabular-nums; }

    /* Rep table */
    .rpt-table { width:100%; border-collapse:collapse; }
    .rpt-table th {
      text-align:left; font-size:11.5px; font-weight:600; color:var(--text-muted);
      padding:0 12px 10px; border-bottom:1px solid var(--border); white-space:nowrap;
    }
    .rpt-table th.num, .rpt-table td.num { text-align:right; font-variant-numeric:tabular-nums; }
    .rpt-table td { padding:13px 12px; border-bottom:1px solid var(--border); font-size:13.5px; }
    .rpt-table tr:last-child td { border-bottom:0; }
    .rpt-table td:first-child, .rpt-table th:first-child { padding-left:0; }
    .rpt-table td:last-child, .rpt-table th:last-child { padding-right:0; }
    .rpt-rep-name { font-weight:600; color:var(--text-primary); }
    .rpt-rep-bar { height:5px; border-radius:99px; background:var(--bg); margin-top:7px; overflow:hidden; max-width:220px; }
    .rpt-rep-bar > i { display:block; height:100%; border-radius:99px; background:var(--accent); }

    /* Notice strip */
    .rpt-notice {
      display:flex; align-items:flex-start; gap:12px; padding:14px 16px; margin-bottom:18px;
      border:1px solid #FDE3C3; background:#FFFCF5; border-radius:12px;
    }
    .rpt-notice-dot { width:7px; height:7px; border-radius:50%; background:#B54708; flex:0 0 auto; margin-top:6px; }
    .rpt-notice-title { font-size:13.5px; font-weight:600; color:#93370D; }
    .rpt-notice-body { font-size:12.5px; color:#B54708; margin-top:2px; line-height:1.45; }
    .rpt-notice button {
      height:32px; padding:0 13px; font-size:12.5px; font-weight:600; border-radius:8px; cursor:pointer;
      border:1px solid #FDE3C3; background:var(--card); color:#93370D; white-space:nowrap; font-family:inherit;
    }

    .rpt-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
    @media (max-width: 900px) {
      .rpt-hero { grid-template-columns:1fr; gap:20px; }
      .rpt-grid-2 { grid-template-columns:1fr; }
      .rpt-metric { border-left:0; padding-left:0; }
    }

    /* ---- Busy button (js/guard.js) ----
       Applied the instant a write handler is tapped, and removed when it
       settles. pointer-events is the part that matters: it stops the second
       through tenth taps in the browser, before any handler runs. The fade is
       the part people notice, and the reason they stop tapping. */
    .hb-busy { pointer-events: none; opacity: .55; cursor: default; }

    /* ---- Door picker tiles (js/door-art.js) ----
       Only used when a product type has variants that map to a door. Every
       other product keeps .qd-pills, so windows are visually unchanged. */
    .qd-variant-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
    .qd-door-tile {
      display: flex; flex-direction: column; align-items: center; gap: 7px;
      padding: 10px 6px 9px; background: var(--card, #fff);
      border: 1.5px solid var(--border); border-radius: 9px;
      cursor: pointer; transition: border-color .12s, box-shadow .12s, transform .12s;
      font: inherit; text-align: center;
    }
    .qd-door-tile:hover { border-color: var(--accent, #C41E3A); transform: translateY(-1px); }
    .qd-door-tile:focus-visible { outline: 2px solid var(--accent, #C41E3A); outline-offset: 2px; }
    .qd-door-tile.active {
      border-color: var(--accent, #C41E3A);
      box-shadow: 0 0 0 1px var(--accent, #C41E3A), 0 2px 10px rgba(0,0,0,.08);
    }
    .qd-door-art { display: block; width: 100%; }
    .qd-door-art svg { display: block; width: 100%; height: auto; max-height: 132px; }
    .qd-door-name { font-size: 11.5px; font-weight: 600; line-height: 1.25; color: var(--text-secondary); }
    .qd-door-tile.active .qd-door-name { color: var(--text-primary); }
    @media (max-width: 640px) {
      .qd-variant-tiles { grid-template-columns: repeat(2, 1fr); }
      .qd-door-art svg { max-height: 150px; }
    }

    /* ---- Live unit illustration in the item drawer (js/door-art.js) ----
       Same drawing the contract prints, shown while the line is still being
       edited. Borrows the tile's card treatment so it reads as part of the
       drawer and not as a widget bolted on.

       The svg gets a FIXED height, not the max-height the tiles use. Every
       DoorArt svg carries a viewBox, so preserveAspectRatio letterboxes and
       CENTRES the drawing inside whatever box it is given: a 60"-tall double
       hung and a 48"-wide slider then both sit centred and neither can grow
       taller than the drawer. Capping height on a width:100% svg instead leaves
       the shrunk drawing hugging the left edge, which is why that is not done
       here. */
    .qd-unit-preview {
      display: flex; flex-direction: column; gap: 6px;
      padding: 12px 10px 10px; background: var(--card, #fff);
      border: 1.5px solid var(--border); border-radius: 9px; text-align: center;
    }
    .qd-unit-preview-art { display: block; width: 100%; }
    .qd-unit-preview-art svg { display: block; width: 100%; height: 190px; }
    .qd-unit-preview-size { font-size: 11.5px; font-weight: 600; color: var(--text-secondary); }
    /* The same caveat the homeowner gets under the picture on the contract. Muted
       and small, but present: a rep who does not know grids are left out of the
       drawing cannot answer the question when it is asked across the table. */
    .qd-unit-preview-note { font-size: 11px; line-height: 1.4; color: var(--text-muted); }
    /* A door carries no size caption and most lines carry no note. Without this the
       flex gap still reserves a row for each, and the card grows two empty bands. */
    .qd-unit-preview-size:empty, .qd-unit-preview-note:empty { display: none; }
    @media (max-width: 640px) {
      .qd-unit-preview-art svg { height: 210px; }
    }

/* Rep-only supplier size limits under the Size boxes in the quote drawer.
   Deliberately quiet: a reminder while quoting, not a warning, and never
   printed on a contract or anything the homeowner sees. */
.qd-size-hint {
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-muted, #6B7280);
}
.qd-size-hint .star { color: var(--accent, #B8152E); font-weight: 700; }