/* ============================================================
       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 38 uses, --bg-secondary 4, --brand-soft 1 --
         all `background:`, none of them defined anywhere. */
      --bg-card:        var(--card);
      --bg-secondary:   var(--bg);
      /* 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.56:1, failed AA) -> 4.76: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 lane/card colors: alias for appointment (pill token is --s-appt)
         and the two stages that only had literal-color pill classes. */
      --s-appointment: #6941C6;
      --s-follow_up:   #B54708;
      --s-unqualified: #475569;

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

      /* Semantic aliases, same values as the windows CRM. The dialog and audit-log
         CSS ported from windows consumes these; without the definitions
         var(--danger) was invalid at computed-value time, so .btn-danger fell back
         to transparent and every destructive confirm button rendered in the base
         style -- the exact bug that port set out to fix. The audit dots went
         invisible for the same reason. */
      --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 */
    }

    /* ============================================================
       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;
    }
    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 {
      width: 220px; 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 {
      width: 160px; 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); }

    /* 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: #475569;             background: #F1F5F9; }
    /* 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; }

    /* ===== 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: 0 12px 28px -6px rgba(0,0,0,.28); 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(--s-quoted-bg); border-radius: 0 0 10px 10px; }
    /* ---- Customer notes timeline (small print, newest first) ---- */
    .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; }

    /* ---- 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: #B54708; background: #FFFAEB; }
    .pipe-card-age.pipe-age-red { color: var(--s-lost); background: var(--s-lost-bg); }

    /* 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; }
    @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 already used on
       .sidebar-foot 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); }

      /* iOS zooms the whole page when you focus an input under 16px, and then
         leaves it zoomed -- a rep measuring a house taps a field and the layout
         jumps. Lifting every field to 16px on TOUCH ONLY stops it; mouse devices
         do not match this query, so the desktop look (13-15px fields) is
         untouched. The windows CRM has carried this since July; painting never
         got it, so every field on a rep's iPad still jumped.
         !important because dozens of fields carry inline font-size below 16px,
         and 16px is the correct minimum for a touch target anyway. */
      input, select, textarea,
      .form-input, .leads-search, .leads-select, .notes-textarea,
      .disc-custom-input, .job-value-input { font-size: 16px !important; }
    }

    /* ============================================================
       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;
      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; }

    /* In-page pitch.html overlay (replaces the old new-tab window.open) —
       reuses the header/close-button look above, just wraps an iframe
       instead of the hw-slide deck. */
    #pitch-iframe-overlay {
      position: fixed; inset: 0; z-index: 2000;
      background: #060A12;
      display: none;
      flex-direction: column;
      animation: hwFadeIn .3s ease;
    }
    #pitch-iframe-overlay.open { display: flex; }
    #pitch-iframe-frame {
      flex: 1; width: 100%; border: none; background: #fff;
    }

    .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; 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; }

    /* 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); }
    .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: 44px; height: 44px;
      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-unqualified { background: #F1F5F9;                 color: #475569;             border-color: #94A3B8; }

    /* 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: 44px; padding: 0 14px;
      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: 44px; padding: 0 15px;
      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; }
    .fc .fc-non-business { background: rgba(0,0,0,.02); }
    .fc .fc-highlight { background: rgba(196,30,58,.08); }

    /* Busy-day readability (#4): make the "+N more" chip an obvious tap target
       and the expand popover a clean, readable list of the day's full schedule. */
    .fc .fc-daygrid-more-link {
      font-size: 11px; font-weight: 700; color: var(--accent);
      margin: 1px 4px; padding: 1px 5px; border-radius: 4px;
      background: rgba(196,30,58,.08);
    }
    .fc .fc-daygrid-more-link:hover { background: rgba(196,30,58,.16); text-decoration: none; }
    .fc .fc-daygrid-day-frame { min-height: 92px; }
    /* The "+N more" popover MUST sit above the day-grid events, or the cell's
       own event chips paint on top of it and the text stacks/doubles (looked
       like "letters on top of each other"). A solid opaque bg + a high z-index
       keeps it a clean, readable card. Selector also works if FullCalendar
       portals the popover outside the .fc root. */
    .fc .fc-popover.fc-more-popover,
    .fc-popover.fc-more-popover {
      min-width: 240px; max-width: 320px;
      border: 1px solid var(--border); border-radius: 10px;
      box-shadow: 0 12px 32px rgba(16,24,40,.28); overflow: hidden;
      background: #FFFFFF !important;
      z-index: 10000 !important;
    }
    .fc .fc-more-popover .fc-popover-body,
    .fc-more-popover .fc-popover-body { background: #FFFFFF !important; }
    .fc .fc-popover-header {
      background: var(--bg); color: var(--text-primary);
      font-size: 12.5px; font-weight: 700; padding: 8px 12px;
    }
    .fc .fc-more-popover .fc-popover-body { padding: 8px; max-height: 60vh; overflow-y: auto; }
    /* Inside the popover events can wrap to their full name — no ellipsis crush. */
    .fc .fc-more-popover .fc-event { margin: 3px 0; padding: 5px 8px; }
    .fc .fc-more-popover .fc-event-title,
    .fc .fc-more-popover .fc-event-inner { white-space: normal; overflow: visible; }
    .fc .fc-more-popover .fc-event-title-container { white-space: normal; }

    /* 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); }

    /* 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; }
    .status-job-canceled  { color: #B42318; background: #FEF3F2; font-weight:700; text-decoration:line-through; }

    /* 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: 44px; padding: 0 14px;
      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: 44px; padding: 0 16px;
      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 {
      /* Always visible (not hover-only) -- a hover-only delete button is
         effectively unreachable on a touch device, which is how admin/rep
         manage job photos most of the time. */
      position: absolute; top: 4px; right: 4px;
      width: 26px; height: 26px; border-radius: 6px;
      background: rgba(0,0,0,.55); color: white;
      display: flex; align-items: center; justify-content: center;
      font-size: 13px; opacity: .85; transition: opacity .15s, background .15s;
    }
    .photo-thumb:hover .photo-thumb-del,
    .photo-thumb-del:hover { opacity: 1; background: rgba(220,38,38,.9); }

    /* 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; }

    /* -- Nav count badge (Website Leads: not yet contacted). Same rule as the
       windows CRM; painting had only the inline-styled Jobs badge. -- */
    .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;
    }

    .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); }

    /* Room surface toggle grid — same tappable box style as the product-type grid, for Add to Room */
    .qrs-surf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; margin-bottom: 4px; }
    .qrs-surf-btn {
      display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
      min-height: 76px; border-radius: 10px; border: 2px solid var(--border);
      background: white; padding: 10px 8px; cursor: pointer; transition: all .12s; text-align: center;
    }
    .qrs-surf-btn:hover { border-color: var(--accent); }
    .qrs-surf-btn.active { border-color: var(--accent); background: rgba(220,38,38,.06); }
    .qrs-surf-label { font-size: 13px; font-weight: 600; color: var(--text-primary); }
    .qrs-surf-btn.active .qrs-surf-label { color: var(--accent); }
    .qrs-surf-area { font-size: 11px; color: var(--text-muted); }
    .qrs-surf-price { font-size: 14px; font-weight: 700; color: var(--accent); min-height: 17px; }

    /* Per-surface detail row (sheen / qty) shown below the grid, only for toggled-on surfaces */
    .qrs-surf-opts {
      display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
      border-top: 1px solid var(--border); padding: 12px 0;
    }
    .qrs-surf-opts-label { font-size: 13px; font-weight: 600; color: var(--text-primary); flex-basis: 100%; }

    /* 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); }

    /* Room card surface-upcharge inline toggle labels */
    .rm-surf-chk { display:flex; align-items:center; gap:4px; font-size:11px; color:var(--text-secondary); cursor:pointer; white-space:nowrap; }
    .rm-surf-chk input[type=checkbox] { width:13px; height:13px; cursor:pointer; accent-color:var(--primary); }

    /* 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; }
    }

    /* ── Ported from the windows CRM ──────────────────────────────────────────
       Styles for the dialog, audit-log and customers modules, which were copied
       across to reach parity. Taken verbatim so the two apps look the same and a
       later change to one reads as a recognisable diff against the other.
       .btn-danger in particular: Dialog.confirm() defaults to danger:true, so
       without it every destructive confirm button rendered in the base style. */
    .btn-danger { background: var(--danger); color: white; }
    .btn-danger:hover { filter: brightness(.92); }
    .dialog-overlay { z-index: 500; }
    .dialog-msg { font-size: 14px; line-height: 1.55; color: var(--text-primary); margin: 0; }
    .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-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; }
    .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; }

    /* These three are the phone layout for the customers list. The @media wrapper
       was dropped when the block was ported, so they applied at every width and
       !important beat the desktop 6-column grid above -- the customers table was
       stuck in its cramped 3-column phone form on desktop, and the drawer stats
       were always 2-up instead of 4. Header cells are hidden alongside the row
       cells now, matching windows; painting hid only the rows, so on a phone the
       header showed six labels over three columns of data. */
    @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); }
    }

    /* ---- 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; }