@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Inter:wght@400;450;500;600;700&display=swap');
/* ============================================================
   SureTech Consulting CRM — "Studio" design system.
   Modern-SaaS (Stripe/Vercel): light & airy canvas, layered soft
   shadows, gradient primary actions, refined type, subtle depth.
   All original class names preserved; token names kept stable so
   workspace.css inherits the new palette automatically.
   ============================================================ */
:root{
  /* brand — dark "BusyBusy-SaaS" theme (2026-07-26). Surface/text tokens shifted
     to a dark navy family consistent with the pre-existing .topbar gradient
     (#1a1a20->#1a1a20) so the theme feels native, not bolted on. --brass/--brass-2
     (the gold accent) are deliberately UNCHANGED per the client's explicit ask to
     keep the SureTech brand accent while everything else goes dark. Surface elevation
     keeps the same relative ranking as the old light theme (panel > panel-2 >
     paper > panel-3), just inverted in absolute value: on a dark base, elevated
     surfaces get progressively LIGHTER overlays over the dark page (the opposite
     of light-theme shadow-based elevation), so cards still visibly "lift" off
     the page. */
  --ink:#f2f3f6; --ink-2:#c6c8d1; --ink-3:#9698a3;
  --steel:#6d3fff; --steel-2:#8a6aff; --steel-strong:#c4b6ff;
  --steel-soft:#241c3d; --steel-soft-2:#2b2148;
  --brass:#6d3fff; --brass-2:#8a6aff; --brass-soft:#241c3d;   /* accent, used sparingly */
  /* surfaces — neutral charcoal, not accent-tinted (violet is used as an accent
     ON TOP, not washed through every surface — the "IT SaaS dark mode" look). */
  --paper:#0a0a0d; --panel:#17171e; --panel-2:#121216; --panel-3:#0e0e12;
  --line:#27272f; --line-2:#1e1e25; --line-strong:#3c3c48;
  --text:#e4e5ea; --text-2:#a8aab3; --muted:#75767f;
  --green:#34c17f; --green-soft:#123521; --red:#e5645c; --red-soft:#33161a;
  /* type */
  --disp:"Plus Jakarta Sans",system-ui,sans-serif;
  --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  /* geometry + depth (layered soft shadows = the SaaS feel) — shadow alpha
     raised well above the old light-theme values, since black shadows barely
     read at all against a dark base at the original opacities */
  --r:12px; --r-sm:8px; --r-lg:16px;
  --sh-xs:0 1px 2px rgba(0,0,0,.45);
  --sh-sm:0 1px 3px rgba(0,0,0,.5),0 1px 2px rgba(0,0,0,.35);
  --sh:0 4px 10px -2px rgba(0,0,0,.55),0 2px 6px -2px rgba(0,0,0,.4);
  --sh-md:0 16px 32px -8px rgba(0,0,0,.6),0 4px 12px -4px rgba(0,0,0,.4);
  --sh-lg:0 30px 60px -14px rgba(0,0,0,.7);
  --ring:0 0 0 3px rgba(109,63,255,.35);
  --spec:inset 0 1px 0 rgba(255,255,255,.05);
  --blur:blur(10px);
  /* tells the browser to render native checkboxes/selects/scrollbars in dark
     style — no CSS var touches those, so without this they'd stay light no
     matter what the rest of this file says. */
  color-scheme:dark;
  /* legacy aliases (kept so any older rule still resolves) */
  --blue:var(--ink); --blue2:var(--steel); --gold:var(--brass); --gold2:var(--brass-2);
  --blue-soft:var(--steel-soft); --gold-soft:var(--brass-soft); --grey-soft:#1b2434;
  --glass:var(--panel); --glass-2:var(--panel-2); --glass-brd:var(--line);
}
*{box-sizing:border-box}
html,body{min-height:100%}
body{
  margin:0;font-family:"Inter",system-ui,"Segoe UI",Arial,sans-serif;color:var(--text);
  font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  background:var(--paper);position:relative;overflow-x:hidden;
}
/* soft brand glow-field — dark surfaces show a subtle color cast far more
   readably than light ones (same corner-glow technique as Linear/Vercel/Raycast's
   dark modes), so opacities are roughly doubled vs. the old light-theme values;
   the blue triplet matches the new --steel exactly, gold triplet is --brass-2
   (unchanged, since brass itself didn't change). */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60vmax 40vmax at 12% -8%, rgba(58,120,201,.14), transparent 60%),
    radial-gradient(55vmax 42vmax at 100% 0%, rgba(204,154,68,.09), transparent 55%);
}
/* Global dark-theme polish: text selection, native scrollbars (only
   .table-wrap themed its own before now), and disabled form controls — none
   of these are touched by the CSS vars above, so without explicit rules the
   browser falls back to light-mode UA chrome regardless of what the rest of
   this file says. */
::selection{background:var(--steel-soft-2);color:var(--ink)}
html{scrollbar-color:var(--line-strong) var(--panel-2)}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--panel-2)}
::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:20px;border:3px solid var(--panel-2)}
::-webkit-scrollbar-thumb:hover{background:var(--muted)}
input:disabled,select:disabled,textarea:disabled{background:var(--panel-2);color:var(--muted);cursor:not-allowed;opacity:.7}
a{color:var(--steel);text-decoration:none}
a:hover{color:var(--steel-strong);text-decoration:none}
h1{font-family:var(--disp);font-size:26px;font-weight:800;letter-spacing:-.025em;margin:0 0 16px;color:var(--ink)}
h2{font-family:var(--disp);font-size:16px;font-weight:700;letter-spacing:-.012em;margin:18px 0 10px;color:var(--ink)}
h3{font-family:var(--disp);font-weight:700;letter-spacing:-.01em;color:var(--ink)}

/* ---------- top bar: refined navy, soft depth ---------- */
.topbar{display:flex;align-items:center;gap:16px;padding:0 18px;height:60px;
  position:sticky;top:0;z-index:50;color:#fff;
  background:linear-gradient(180deg,#1a1a20,#0d0d11);
  border-bottom:1px solid rgba(255,255,255,.06);
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 6px 20px -8px rgba(12,20,34,.5)}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.brand:hover{text-decoration:none}
.brand-logo{height:36px;width:auto;display:block;filter:drop-shadow(0 1px 2px rgba(0,0,0,.3))}
.crm-tag{font-family:var(--disp);color:#fff;font-weight:700;font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;padding-left:12px;margin-left:1px;border-left:1px solid rgba(255,255,255,.18);opacity:.92}
.mainnav{display:flex;gap:3px;flex:1 1 auto;min-width:0;align-items:center;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.mainnav::-webkit-scrollbar{display:none}
.mainnav a{flex:0 0 auto;color:#b7c1d2;padding:7px 12px;border-radius:8px;font-weight:500;font-size:13.5px;
  transition:color .16s,background .16s}
.mainnav a:hover{text-decoration:none;color:#fff;background:rgba(255,255,255,.07)}
.mainnav a.active{color:#fff;background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
/* Marketing / Operations dropdowns — native <details name="navgroup"> gives
   mutual-exclusion (only one open at a time) for free; layout.php's nav
   script only has to close them on an outside click. */
.mainnav details{flex:0 0 auto;position:relative}
.mainnav details summary{list-style:none;cursor:pointer;color:#b7c1d2;padding:7px 10px 7px 12px;border-radius:8px;
  font-weight:500;font-size:13.5px;display:flex;align-items:center;gap:5px;transition:color .16s,background .16s;user-select:none}
.mainnav details summary::-webkit-details-marker{display:none}
.mainnav details summary:hover{color:#fff;background:rgba(255,255,255,.07)}
.mainnav details summary.active,.mainnav details[open] summary{color:#fff;background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.mainnav details summary .care{width:12px;height:12px;opacity:.7;transition:transform .15s;flex:none}
.mainnav details[open] summary .care{transform:rotate(180deg)}
.mainnav details .dropdown{position:fixed;min-width:190px;background:#1b2534;
  border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:6px;display:flex;flex-direction:column;gap:1px;
  box-shadow:0 12px 28px rgba(0,0,0,.35);z-index:60}
.mainnav details .dropdown a{color:#b7c1d2;padding:8px 10px;border-radius:7px;font-weight:500;font-size:13.5px}
.mainnav details .dropdown a:hover{text-decoration:none;color:#fff;background:rgba(255,255,255,.08)}
.mainnav details .dropdown a.active{color:#fff;background:rgba(255,255,255,.12)}
.nav-toggle{display:none;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:#fff;
  border-radius:8px;width:36px;height:36px;align-items:center;justify-content:center;flex:none;cursor:pointer}
.nav-toggle:hover{background:rgba(255,255,255,.15)}
.nav-toggle svg{width:19px;height:19px;display:block}
.topclock{display:flex;align-items:center;gap:6px;color:#c3ccd9;font-size:12.5px;font-weight:500;white-space:nowrap;
  padding:6px 10px;border-radius:8px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09)}
.topclock svg{width:14px;height:14px;opacity:.8;flex:none}
.topclock .t{font-variant-numeric:tabular-nums;letter-spacing:.01em;min-width:72px;text-align:center}
.topclock .tz{font-size:10px;font-weight:700;letter-spacing:.06em;color:#8ea0b8;background:rgba(255,255,255,.08);border-radius:5px;padding:2px 5px}
.topclock{flex:none}
@media(max-width:1280px){.topclock{display:none}}
.userbox{display:flex;align-items:center;gap:10px;font-size:12.5px;color:#aeb9c8;flex:none}
.userbox .userlink{color:#aeb9c8;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}
.userbox .userlink:hover{color:#fff}

/* Notifications bell (new calls / new appointments) */
.notif-wrap{position:relative}
#notif-btn{position:relative}
#notif-btn.pulse{animation:livepulse .9s ease-out}
.notif-badge{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;padding:0 4px;border-radius:9px;
  background:#e34948;color:#fff;font-size:10px;font-weight:700;line-height:16px;text-align:center;box-shadow:0 0 0 2px var(--blue,#1e2c3f)}
.notif-dropdown{position:absolute;top:calc(100% + 8px);right:0;left:auto;min-width:280px;max-width:min(340px,92vw);
  background:#1b2534;border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:0;
  box-shadow:0 12px 28px rgba(0,0,0,.35);z-index:70;max-height:70vh;overflow-y:auto}
.notif-head{padding:12px 14px;font-weight:700;font-size:12.5px;color:#fff;border-bottom:1px solid rgba(255,255,255,.08)}
.notif-empty{padding:22px 14px;text-align:center;color:#8ea0b8;font-size:12.5px}
.notif-item{display:flex;gap:10px;align-items:flex-start;padding:10px 14px;color:#b7c1d2;border-bottom:1px solid rgba(255,255,255,.05)}
.notif-item:last-child{border-bottom:none}
.notif-item:hover{background:rgba(255,255,255,.06);text-decoration:none;color:#fff}
.notif-ic{font-size:15px;flex:none;line-height:1.3}
.notif-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.notif-txt strong{font-size:12.5px;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.notif-sub{font-size:11px;color:#8ea0b8}

/* forced password-change gate */
#pwgate{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;
  background:rgba(16,25,42,.5);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
#pwgate .box{width:400px;max-width:92vw;padding:30px;border-radius:var(--r-lg);
  background:var(--panel);border:1px solid var(--line);box-shadow:var(--sh-lg)}
#pwgate .box h2{font-family:var(--disp);margin-top:0}
.btn-ghost{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;border:1px solid rgba(255,255,255,.28);color:#fff;
  padding:7px 13px;border-radius:8px;font-weight:500;font-size:12.5px;line-height:1;transition:.16s}
.btn-ghost:hover{background:rgba(255,255,255,.12);text-decoration:none;border-color:rgba(255,255,255,.5)}
.btn-ghost.btn-icon{width:34px;height:34px;padding:0;justify-content:center}
.btn-ghost.btn-icon svg{width:17px;height:17px;display:block}
.userbox{flex-wrap:nowrap}

.wrap{max-width:1280px;margin:24px auto;padding:0 24px}

/* ---------- KPI stat cards ---------- */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:22px}
.kpi{background:linear-gradient(180deg,#18294a,#111a2c);border:1px solid var(--line);border-radius:var(--r);
  padding:16px 18px;box-shadow:var(--sh-sm);position:relative;overflow:hidden;
  transition:transform .18s cubic-bezier(.2,.7,.3,1),box-shadow .18s}
.kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--steel-2),var(--steel));border-radius:0 3px 3px 0}
.kpi:hover{transform:translateY(-3px);box-shadow:var(--sh-md)}
.kpi .n{font-family:var(--disp);font-size:34px;font-weight:800;color:var(--ink);letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;line-height:1.05}
.kpi .l{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;font-weight:600;margin-top:4px}

.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;
  margin-bottom:16px;box-shadow:var(--sh-sm)}

/* ---------- inputs / buttons ---------- */
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
input,select,textarea{font:inherit;color:var(--text);padding:9px 12px;border-radius:var(--r-sm);
  border:1px solid var(--line-strong);background:var(--panel);box-shadow:inset 0 1px 2px rgba(16,24,40,.04);
  transition:border-color .15s,box-shadow .15s}
input::placeholder,textarea::placeholder{color:#9aa4b3}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--steel);box-shadow:var(--ring)}
input[type=checkbox],input[type=radio]{width:auto;padding:0;box-shadow:none;accent-color:var(--steel);vertical-align:middle}
input[type=file]{padding:8px 11px;background:var(--panel-2);cursor:pointer;max-width:520px}
input[type=file]::file-selector-button{font:inherit;font-family:var(--disp);font-weight:600;font-size:12.5px;margin-right:12px;
  padding:7px 13px;border:1px solid var(--line-strong);border-radius:8px;background:var(--panel-2);color:var(--text);cursor:pointer;transition:.15s}
input[type=file]::file-selector-button:hover{background:var(--steel-soft);border-color:var(--steel)}
/* consistent form rhythm */
.form-actions{margin-top:22px}
.check-row{display:flex;align-items:center;gap:9px;margin-top:14px;font-size:13px;color:var(--text-2);
  font-weight:400;text-transform:none;letter-spacing:0}
.btn{font-family:var(--disp);background:linear-gradient(180deg,var(--steel-2),var(--steel));color:#fff;
  border:1px solid rgba(16,24,40,.08);padding:9px 17px;border-radius:var(--r-sm);font-weight:600;font-size:13.5px;
  cursor:pointer;letter-spacing:-.01em;box-shadow:var(--sh-xs),inset 0 1px 0 rgba(255,255,255,.18);
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  transition:transform .13s,box-shadow .15s,filter .15s}
.btn svg{width:15px;height:15px;display:block}
.btn:hover{filter:brightness(1.05);transform:translateY(-1px);box-shadow:var(--sh),inset 0 1px 0 rgba(255,255,255,.2)}
.btn:active{transform:translateY(0);filter:brightness(.98)}
.btn-gold{background:linear-gradient(180deg,var(--brass-2),var(--brass));color:#fff}
/* light secondary button (for use on white pages — NOT the dark topbar) */
.btn-soft{font-family:var(--disp);background:var(--panel);color:var(--text-2);border:1px solid var(--line-strong);
  padding:9px 16px;border-radius:var(--r-sm);font-weight:600;font-size:13px;cursor:pointer;box-shadow:var(--sh-xs);
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  transition:background .15s,border-color .15s,color .15s}
.btn-soft:hover{background:var(--steel-soft);border-color:var(--steel);color:var(--steel-strong);text-decoration:none}
/* horizontal-scroll wrapper so wide tables never clip (the "cutout") */
.table-wrap{width:100%;overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-sm);
  margin-bottom:16px;-webkit-overflow-scrolling:touch}
.table-wrap table{border:none;box-shadow:none;border-radius:0}
.table-wrap::-webkit-scrollbar{height:10px}
.table-wrap::-webkit-scrollbar-track{background:var(--panel-2)}
.table-wrap::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:20px;border:2px solid var(--panel-2)}
.table-wrap::-webkit-scrollbar-thumb:hover{background:var(--muted)}
/* obvious "go back" control (Mac-friendly: clearly a button, not a whisper link) */
.btn-back{display:inline-flex;align-items:center;gap:7px;background:var(--panel);border:1px solid var(--line-strong);
  color:var(--text-2);font-family:var(--disp);font-weight:600;font-size:13px;padding:8px 15px 8px 12px;border-radius:9px;
  box-shadow:var(--sh-xs);transition:background .15s,border-color .15s,color .15s,transform .15s}
.btn-back:hover{background:var(--steel-soft);border-color:var(--steel);color:var(--steel-strong);text-decoration:none;transform:translateX(-2px)}
.btn-back svg{width:16px;height:16px;display:block}
/* narrow columns that shrink to content (keeps action buttons tidy, not floating) */
.col-action{width:1%;white-space:nowrap;text-align:right}
.col-center{width:1%;white-space:nowrap;text-align:center}
/* fixed-layout tables: column widths come from <colgroup>, immune to web-font
   reflow (no "fits then overflows" flicker). Long cells clip cleanly. */
table.tbl-fixed{table-layout:fixed}
.tbl-fixed td{overflow:hidden}
.tbl-fixed td.trunc{white-space:nowrap;text-overflow:ellipsis}
.tbl-fixed td.col-action,.tbl-fixed td.col-center{overflow:visible}
/* small row action ("Open") */
.btn-open{display:inline-flex;align-items:center;gap:5px;background:var(--steel-soft);border:1px solid transparent;
  color:var(--steel-strong);font-family:var(--disp);font-weight:600;font-size:12px;padding:6px 13px;border-radius:8px;
  transition:.14s;white-space:nowrap}
.btn-open:hover{background:var(--steel);color:#fff;text-decoration:none}
.btn-open svg{width:13px;height:13px;opacity:.7}
.btn-open:hover svg{opacity:1}
/* success banner */
.ok{display:flex;align-items:center;gap:9px;background:var(--green-soft);color:var(--green);padding:11px 15px;
  border-radius:var(--r-sm);margin-bottom:16px;font-size:13px;font-weight:500;border:1px solid rgba(52,193,127,.3)}
.ok svg{width:17px;height:17px;flex:none}

/* ---------- table ---------- */
table{width:100%;border-collapse:separate;border-spacing:0;border-radius:var(--r);overflow:hidden;
  background:var(--panel);border:1px solid var(--line);box-shadow:var(--sh-sm)}
th{background:var(--panel-2);color:var(--muted);text-align:left;padding:9px 14px;font-size:11px;
  font-weight:600;letter-spacing:.06em;text-transform:uppercase;border-bottom:1px solid var(--line-strong)}
td{padding:10px 14px;border-bottom:1px solid var(--line-2);vertical-align:middle;color:var(--text-2)}
tr:last-child td{border-bottom:none}
tbody tr,tr{transition:background .13s}
tr:hover td{background:var(--steel-soft)}

/* ---------- pills ---------- */
.pill{display:inline-block;padding:4px 11px;border-radius:7px;font-size:11px;font-weight:600;letter-spacing:.02em;
  text-transform:uppercase;box-shadow:inset 0 0 0 1px rgba(16,24,40,.04)}
.t-CLIENT{background:var(--green-soft);color:var(--green)}
.t-ARCHITECT{background:var(--steel-soft);color:var(--steel-strong)}
.t-DESIGNER{background:#2a1f42;color:#b39ffb}
.t-REALTOR{background:#0d3230;color:#3fd8c4}
.t-NEW_USER{background:var(--brass-soft);color:var(--brass-2)}
.s-PENDING{background:var(--steel-soft);color:var(--steel-strong)}
.s-CALLING{background:var(--green-soft);color:var(--green)}
.s-DONE{background:#1d7d54;color:#fff}
.s-FAILED{background:#c23934;color:#fff}
.s-WRONG_NUMBER{background:#3a2f14;color:var(--brass-2)}
.s-NO_ANSWER,.s-OPTED_OUT{background:var(--grey-soft);color:var(--muted)}
.s-NO_CALL{background:var(--steel-soft);color:var(--steel-strong)}
.s-BOOKED{background:#1d7d54;color:#fff}
.s-CANCELLED{background:#c23934;color:#fff}
.s-SENT{background:#1d7d54;color:#fff}
.s-SKIPPED{background:var(--grey-soft);color:var(--muted)}
.s-ERROR{background:#c23934;color:#fff}
.s-BLOCKED{background:#c23934;color:#fff}
.role-admin{background:var(--brass-soft);color:var(--brass-2);text-transform:uppercase;letter-spacing:.04em}
.role-staff{background:var(--grey-soft);color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.role-other{background:var(--steel-soft);color:var(--steel-strong);text-transform:uppercase;letter-spacing:.04em}
.btn-danger{background:var(--panel);color:var(--red);border:1px solid var(--line-strong);padding:6px 13px;border-radius:var(--r-sm);
  font-family:var(--disp);font-weight:600;font-size:12.5px;cursor:pointer;transition:.15s;box-shadow:var(--sh-xs)}
.btn-danger:hover{background:var(--red);color:#fff;border-color:var(--red)}
.cell-you{color:var(--muted);font-size:12.5px;font-style:italic}
/* lead reference code (SureTech-0042) */
.lead-id{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--steel-strong);
  background:var(--steel-soft);border:1px solid var(--line);border-radius:6px;padding:3px 8px;white-space:nowrap}
.lead-id:hover{background:var(--steel);color:#fff;border-color:var(--steel);text-decoration:none}
.lead-id-tag{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:13px;font-weight:600;
  color:var(--steel-strong);background:var(--steel-soft);border:1px solid var(--line);border-radius:8px;padding:5px 12px;margin:2px 0 18px}
.lead-id-tag .lbl{font-family:"Inter",sans-serif;font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}

/* inline-editable pill (dropdown that looks like a pill) */
select.pill-select{-webkit-appearance:none;appearance:none;border:none;cursor:pointer;font-weight:600;font-size:11px;
  text-transform:uppercase;letter-spacing:.02em;padding:4px 22px 4px 11px;line-height:1.4;border-radius:7px;box-shadow:inset 0 0 0 1px rgba(16,24,40,.04);
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10"><path d="M1 3l4 4 4-4" fill="none" stroke="%23aab5c9" stroke-width="1.6"/></svg>');
  background-repeat:no-repeat;background-position:right 7px center;transition:filter .15s,box-shadow .2s}
select.pill-select:hover{filter:brightness(.97)}
select.pill-select:focus{outline:none;box-shadow:var(--ring)}
select.pill-select.saved{box-shadow:0 0 0 2px var(--green)}
/* in fixed-layout tables (Leads), pills fill their cell so the chevron never clips */
.tbl-fixed td .pill-select{width:100%;max-width:100%}

/* small tag next to a lead's name marking it as a Google Ads click (source=google_ads) */
.badge-ads{display:inline-block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  padding:2px 6px;border-radius:6px;background:var(--brass-soft);color:var(--brass);vertical-align:middle}

/* same idea, for a Meta (Facebook/Instagram) Ads click (source=meta_ads) — Meta's brand blue */
.badge-meta{display:inline-block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  padding:2px 6px;border-radius:6px;background:#132a4d;color:#4d9bff;vertical-align:middle}

/* free-text lead tags shown as small chips under the lead name */
.lead-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.lead-tag{display:inline-block;font-size:10.5px;font-weight:600;line-height:1;
  padding:3px 7px;border-radius:999px;background:var(--brass-soft);color:var(--brass);
  border:1px solid rgba(0,0,0,.05);white-space:nowrap}

/* info banner + conversation expander */
.info-note{background:var(--steel-soft);border:1px solid var(--line);border-left:3px solid var(--steel);
  border-radius:var(--r-sm);padding:12px 16px;margin:0 0 18px;font-size:12.5px;color:var(--steel-strong)}
.convo-toggle{display:inline-flex;align-items:center;justify-content:center;color:var(--steel);text-decoration:none;
  transition:transform .15s,color .15s}
.convo-toggle svg{width:18px;height:18px;display:block}
.convo-toggle:hover{transform:scale(1.12);color:var(--steel-strong);text-decoration:none}
.convo-toggle.muted{opacity:.3}
.convo-label{display:flex;align-items:center;gap:6px;font-family:var(--disp);font-weight:700;font-size:12px;margin-bottom:6px}
.convo-label svg{width:16px;height:16px;flex:none}
.convo-pre{white-space:pre-wrap;word-break:break-word;margin:0;font:12px/1.55 var(--mono);
  background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 13px;max-height:220px;overflow:auto}

/* login */
.login-wrap{max-width:400px;margin:11vh auto;padding:38px 36px;border-radius:var(--r-lg);
  background:var(--panel);border:1px solid var(--line);box-shadow:var(--sh-lg)}
.login-wrap h1{font-family:var(--disp);text-align:center}
.login-logo{text-align:center;margin-bottom:24px}
.login-logo img{width:170px;max-width:72%;height:auto}
.login-sub{font-family:var(--disp);font-weight:600;color:var(--steel);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;margin-top:10px}
.login-wrap label{display:block;font-size:11.5px;color:var(--muted);margin:14px 0 6px;font-weight:600;
  text-transform:uppercase;letter-spacing:.04em}
.login-wrap input{width:100%}
.login-wrap .btn{width:100%;margin-top:24px;padding:11px;font-size:14px}
.err{background:var(--red-soft);color:var(--red);padding:11px 13px;border-radius:var(--r-sm);margin-bottom:14px;font-size:13px;
  border:1px solid rgba(229,100,92,.35)}

/* detail form */
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.formgrid .full{grid-column:1/-1}

/* Generic responsive form grids (Job Sites / Timesheets) — a fixed
   grid-template-columns in an inline style attribute can't be overridden by
   the mobile media query below, which is exactly how these forms ended up
   overflowing the viewport on a phone instead of stacking. Use these classes
   instead of ad-hoc inline grid styles for any new multi-column form. */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.grid-4{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:10px;align-items:end}
.grid-5{display:grid;grid-template-columns:1fr 1fr 1fr 1fr auto;gap:10px;align-items:end}
.field label{display:block;font-size:11px;color:var(--muted);margin-bottom:6px;font-weight:600;
  text-transform:uppercase;letter-spacing:.04em}
.field input,.field select,.field textarea{width:100%}
.muted{color:var(--muted)}
.foot{text-align:center;color:var(--muted);font-size:11.5px;letter-spacing:.03em;padding:28px}
@media(max-width:820px){.kpis{grid-template-columns:repeat(2,1fr)}.formgrid{grid-template-columns:1fr}}

/* ---------- Steve: floating AI assistant ---------- */
#steve-btn{position:fixed;right:24px;bottom:24px;z-index:100;height:50px;padding:0 22px;border:none;cursor:pointer;
  border-radius:25px;color:#fff;font-family:var(--disp);font-weight:600;font-size:13.5px;letter-spacing:-.01em;
  display:flex;align-items:center;gap:9px;background:linear-gradient(180deg,var(--steel-2),var(--steel));
  box-shadow:var(--sh-md),inset 0 1px 0 rgba(255,255,255,.2);transition:transform .16s,box-shadow .16s,filter .16s}
#steve-btn::before{content:"";width:8px;height:8px;border-radius:50%;background:#7ff0b0;box-shadow:0 0 8px #7ff0b0}
#steve-btn:hover{transform:translateY(-2px);filter:brightness(1.05);box-shadow:var(--sh-lg)}
#steve-panel{position:fixed;right:24px;bottom:84px;z-index:100;width:376px;max-width:calc(100vw - 32px);
  height:520px;max-height:calc(100vh - 140px);display:flex;flex-direction:column;overflow:hidden;
  border-radius:var(--r-lg);border:1px solid var(--line);box-shadow:var(--sh-lg);
  background:var(--panel);transform-origin:bottom right;animation:stevepop .2s ease}
@keyframes stevepop{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
#steve-panel[hidden]{display:none}
.steve-head{display:flex;align-items:center;gap:9px;padding:15px 17px;color:#fff;font-family:var(--disp);font-weight:600;
  background:linear-gradient(180deg,#1a1a20,#0d0d11)}
.steve-head .dot{width:8px;height:8px;border-radius:50%;background:#4ade80;box-shadow:0 0 8px #4ade80}
.steve-head .x{margin-left:auto;cursor:pointer;font-size:22px;line-height:1;opacity:.8}
.steve-head .x:hover{opacity:1}
#steve-msgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;background:var(--panel-2)}
.jm{max-width:86%;padding:10px 14px;border-radius:14px;font-size:13px;line-height:1.5;white-space:pre-wrap}
.jm.bot{align-self:flex-start;background:var(--panel);border:1px solid var(--line);border-bottom-left-radius:4px;box-shadow:var(--sh-xs)}
.jm.me{align-self:flex-end;background:linear-gradient(180deg,var(--steel-2),var(--steel));color:#fff;border-bottom-right-radius:4px}
.jm.typing{color:var(--muted);font-style:italic}
#steve-form{display:flex;gap:8px;padding:13px;border-top:1px solid var(--line);background:var(--panel)}
#steve-input{flex:1}
#steve-form .btn{padding:10px 15px}

/* ---------- modals ---------- */
.modal-bg{position:fixed;inset:0;z-index:200;background:rgba(16,25,42,.46);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  display:flex;align-items:center;justify-content:center}
.modal-bg[hidden]{display:none}
.modal{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-lg);padding:24px 28px;width:500px;max-width:calc(100vw - 32px);
  max-height:calc(100vh - 60px);overflow-y:auto}
.modal h2{margin:0 0 20px}
.modal .field{margin-bottom:14px}
.modal .field label{display:block;font-size:11px;color:var(--muted);font-weight:600;
  text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}
.modal .field input,.modal .field select,.modal .field textarea{width:100%}
.modal .modal-foot{display:flex;gap:10px;justify-content:flex-end;margin-top:22px;padding-top:16px;
  border-top:1px solid var(--line)}
/* inline list-add button on table rows */
.btn-list{display:inline-flex;align-items:center;gap:4px;background:var(--brass-soft);border:1px solid transparent;
  color:var(--brass);font-family:var(--disp);font-weight:600;font-size:11.5px;padding:5px 10px;
  border-radius:7px;transition:.14s;white-space:nowrap;margin-left:5px;text-decoration:none}
.btn-list:hover{background:var(--brass);color:#fff;text-decoration:none}
.btn-tag{display:inline-flex;align-items:center;gap:4px;background:var(--steel-soft,#eef2f8);border:1px solid transparent;
  color:var(--steel-strong,#3b5168);font-family:var(--disp);font-weight:600;font-size:11.5px;padding:5px 10px;
  border-radius:7px;transition:.14s;white-space:nowrap;margin-left:5px;text-decoration:none}
.btn-tag:hover{background:var(--steel,#5b7a99);color:#fff;text-decoration:none}
.btn-danger-link{display:inline-flex;align-items:center;justify-content:center;background:var(--red-soft);border:1px solid transparent;
  color:var(--red);width:28px;height:28px;flex-shrink:0;
  border-radius:7px;transition:.14s;text-decoration:none}
.btn-danger-link svg{width:14px;height:14px}
.btn-danger-link:hover{background:var(--red);color:#fff;text-decoration:none}
/* toast notification */
.toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);z-index:300;
  background:#1a1a20;color:#fff;padding:11px 22px;border-radius:10px;font-size:13.5px;
  font-weight:500;box-shadow:var(--sh-md);opacity:0;pointer-events:none;
  transition:opacity .25s,transform .25s;transform:translateX(-50%) translateY(10px)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* AI auto-dialer start/stop control (dashboard, admin) */
.ai-switch{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 18px;
  border-radius:12px;margin-bottom:20px;border:1px solid var(--line)}
.ai-switch.on{background:var(--green-soft);border-color:#1f5c3d}
.ai-switch.off{background:var(--red-soft);border-color:#6b2a28}
.ai-switch-info{display:flex;align-items:center;gap:12px}
.ai-switch-info strong{display:block;font-size:14.5px;line-height:1.2}
.ai-switch .ai-state{font-size:12.5px;color:var(--muted)}
.ai-switch .ai-dot{width:11px;height:11px;border-radius:50%;flex-shrink:0}
.ai-switch.on .ai-dot{background:var(--green);box-shadow:0 0 0 3px rgba(52,193,127,.22)}
.ai-switch.off .ai-dot{background:var(--red);box-shadow:0 0 0 3px rgba(229,100,92,.22)}

/* Danger button (themed delete confirm + bulk actions) */
.btn-danger{font-family:var(--disp);background:linear-gradient(180deg,#d64c47,var(--red));color:#fff;border:0;
  font-weight:600;font-size:13.5px;padding:9px 18px;border-radius:9px;cursor:pointer;line-height:1}
.btn-danger:hover{filter:brightness(1.06);color:#fff}
.btn-danger:disabled{opacity:.5;cursor:not-allowed;filter:none}
/* Bulk-select action bar */
.bulk-bar{display:flex;align-items:center;gap:12px;background:var(--red-soft);border:1px solid var(--red);
  border-radius:10px;padding:9px 14px;margin-bottom:12px}
.bulk-bar[hidden]{display:none}
.bulk-bar .count{font-weight:700;color:var(--red);font-size:13.5px;margin-right:auto}
.row-check,.check-all{cursor:pointer;width:15px;height:15px}

/* Live-update indicator: solid green = auto-refreshing; rings out on each refresh */
.live-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#22c55e;vertical-align:middle;margin-left:10px}
.live-dot.pulse{animation:livepulse .6s ease-out}
@keyframes livepulse{from{box-shadow:0 0 0 0 rgba(34,197,94,.55)}to{box-shadow:0 0 0 9px rgba(34,197,94,0)}}

/* confirm-modal button row (CSV import etc.) — centered, comfortable spacing */
.modal-btns{display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:6px}

/* ---------- merged call transcript (one dialogue, not two columns) ---------- */
.chat-thread{display:flex;flex-direction:column;gap:9px;padding:8px 4px;max-height:360px;overflow-y:auto}
.chat-msg{display:flex;flex-direction:column;max-width:74%}
.chat-msg .chat-who{font-family:var(--disp);font-size:10.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;margin-bottom:3px;color:var(--muted)}
.chat-bubble{padding:9px 13px;border-radius:13px;font-size:13px;line-height:1.5;white-space:pre-wrap;word-break:break-word;box-shadow:var(--sh-xs)}
/* Steve (AI) on the left, steel blue */
.chat-ai{align-self:flex-start;align-items:flex-start}
.chat-ai .chat-who{color:var(--steel-strong)}
.chat-ai .chat-bubble{background:var(--steel-soft);color:var(--ink);border-bottom-left-radius:4px}
/* Client on the right, warm neutral */
.chat-client{align-self:flex-end;align-items:flex-end}
.chat-client .chat-who{color:var(--brass)}
.chat-client .chat-bubble{background:var(--panel-3);color:var(--text);border:1px solid var(--line-strong);border-bottom-right-radius:4px}

/* ---------- rich email editor (Marketing) ---------- */
.rich{border:1px solid var(--line-strong);border-radius:var(--r-sm);overflow:hidden;background:var(--panel);box-shadow:var(--sh-sm)}
.rich-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:3px;padding:8px 10px;background:var(--panel-2);border-bottom:1px solid var(--line)}
/* Font family/size pickers (buildFontControls() in marketing.php) — these are
   native <select> elements, which without their own rule fall back to the
   generic boxy input/select/textarea styling (taller, bordered, a different
   shape than the toolbar's other flat icon+label buttons) and visibly clash
   sitting in the same row as .rt-btn. Matched to .rt-btn's own height/shape. */
.rt-fontsel{height:32px;padding:0 8px;border:1px solid transparent;border-radius:7px;background:transparent;
  color:var(--text-2);font-family:var(--disp);font-size:12.5px;cursor:pointer;width:118px;
  transition:background .12s,color .12s,border-color .12s,box-shadow .12s}
.rt-fontsel:hover{background:var(--panel);border-color:var(--line-strong);color:var(--steel-strong);box-shadow:var(--sh-xs)}
.rt-sizesel{width:70px}
/* Icon + visible text label (not icon-only) — a bare glyph for "Insert button" or
   "Text colour" reads as an abstract shape to a non-technical client; spelling out
   what each control does removes the guesswork entirely, no hover/tooltip needed. */
.rt-btn{height:32px;padding:0 10px 0 8px;border:1px solid transparent;background:transparent;border-radius:7px;cursor:pointer;
  color:var(--text-2);display:inline-flex;align-items:center;gap:6px;transition:background .12s,color .12s,border-color .12s,box-shadow .12s}
.rt-btn svg{width:17px;height:17px;display:block;flex:none}
.rt-btn-label{font-size:12px;font-weight:600;white-space:nowrap}
.rt-btn:hover{background:var(--panel);border-color:var(--line-strong);color:var(--steel-strong);box-shadow:var(--sh-xs)}
.rt-btn:active{background:var(--steel-soft);box-shadow:none}
.rt-sep{width:1px;height:20px;background:var(--line-strong);margin:0 5px;flex:none}
.rt-colorpop{position:absolute;z-index:410;background:var(--panel);border:1px solid var(--line-strong);border-radius:10px;
  box-shadow:var(--sh-md);padding:9px;display:grid;grid-template-columns:repeat(6,1fr);gap:7px}
.rt-sw{width:24px;height:24px;border-radius:6px;border:1px solid rgba(255,255,255,.18);cursor:pointer;padding:0;transition:transform .1s}
.rt-sw:hover{transform:scale(1.14)}
/* image resize/remove toolbar (click an image in the editor) */
.rt-imgtools{position:absolute;z-index:411;display:flex;gap:3px;background:#1a1a20;border-radius:8px;padding:4px;box-shadow:var(--sh-md)}
.rt-imgbtn{min-width:30px;height:26px;padding:0 9px;border:0;background:transparent;color:#fff;border-radius:5px;cursor:pointer;font-family:var(--disp);font-weight:600;font-size:12px}
.rt-imgbtn:hover{background:rgba(255,255,255,.16)}
.rt-imgbtn.del{color:#ffb4a8}
.rt-imgsep{width:1px;height:16px;background:rgba(255,255,255,.28);margin:0 3px;align-self:center;flex:none}
.rich-area img{cursor:pointer}
.rich-area img.selimg{outline:2px solid var(--steel);outline-offset:2px}
.rt-imghandle{position:absolute;z-index:412;width:16px;height:16px;background:var(--steel);border:2px solid #fff;
  border-radius:3px;box-shadow:0 1px 4px rgba(16,24,40,.35);cursor:nwse-resize}
.rt-imghandle:hover{background:var(--steel-strong)}
/* Dark editing surface that matches the app theme (this is what the user
   explicitly wanted — NOT a white "paper" card). This is SAFE for the actual
   sent email: the light text colour here comes from this container's
   stylesheet, and stylesheet colours do NOT serialise into the editor's
   innerHTML — plain typed text carries no baked-in colour, so recipients
   still see normal dark-on-white in their own inbox. The white LIVE PREVIEW
   pane (.composer-preview-body below) is what shows the true email
   appearance while composing, so the office user always has an accurate
   what-the-recipient-sees view alongside the theme-matched editor. */
.rich-area{min-height:180px;max-height:420px;overflow-y:auto;padding:16px 18px;font-size:14px;line-height:1.6;
  color:var(--text);background:var(--panel);outline:none}
.rich-area:focus{box-shadow:inset 0 0 0 2px rgba(58,120,201,.3)}
.rich-area.empty::before{content:attr(data-placeholder);color:var(--muted);pointer-events:none;display:block}
.rich-area img{max-width:100%;height:auto;border-radius:8px}
.rich-area h2{font-size:20px;margin:10px 0 6px;color:var(--ink)}
.rich-area a{color:var(--steel-strong)}
.rich-area:focus-visible{outline:none}

/* ---------- chat message attachments ---------- */
.ws-attach-view{margin-top:6px}
.ws-attach-img{max-width:280px;max-height:240px;border-radius:10px;border:1px solid var(--line);display:block;cursor:pointer}
.ws-attach-file{display:inline-flex;align-items:center;gap:9px;padding:9px 13px;background:var(--panel-2);border:1px solid var(--line-strong);
  border-radius:9px;color:var(--text);font-size:13px;font-weight:500;max-width:280px;text-decoration:none;transition:.14s}
.ws-attach-file:hover{background:var(--steel-soft);border-color:var(--steel);color:var(--steel-strong);text-decoration:none}
.ws-attach-file svg{flex:none;color:var(--steel)}
.ws-attach-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ws-cbtn:disabled{opacity:.5;cursor:wait}

/* ---------- full-screen campaign composer (Mailchimp-style) ---------- */
.composer{position:fixed;inset:0;z-index:300;background:var(--paper);display:flex;flex-direction:column}
.composer[hidden]{display:none}
.composer-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 22px;flex:none;
  background:linear-gradient(180deg,#1a1a20,#0d0d11);color:#fff;box-shadow:0 6px 20px -8px rgba(12,20,34,.5)}
.composer-top h2{color:#fff;font-size:17px}
.composer-title{display:flex;align-items:center;gap:14px}
.composer-body{flex:1;display:flex;overflow:hidden}
.composer-editor{flex:1;min-width:0;overflow-y:auto;padding:24px 28px;display:flex;flex-direction:column}
.composer-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:22px;flex:none}
.composer-canvas-label{display:block;font-size:11px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px;flex:none}
/* Let the whole editor column scroll and the email body grow to its full height,
   instead of trapping a tall email inside a small inner scrollbox. The toolbar stays
   pinned at the top of the editor while you scroll through the email. */
.composer-editor .rich{flex:none;display:flex;flex-direction:column;min-height:0;overflow:visible}
.composer-editor .rich .rich-toolbar{flex:none;position:sticky;top:0;z-index:3}
.rich.big .rich-area{min-height:min(72vh,620px);max-height:none;overflow:visible}
.composer-preview{width:400px;flex:none;background:var(--panel-3);border-left:1px solid var(--line);overflow-y:auto;padding:24px 22px}
.composer-preview-label{font-size:11px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px}
.composer-preview-frame{background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh-sm);overflow:hidden}
/* Previews the actual email HTML — same "stays light" reasoning as .rich-area above. */
.composer-preview-subject{font-family:var(--disp);font-weight:700;font-size:15px;color:#1a1a20;padding:15px 18px;border-bottom:1px solid var(--line)}
.composer-preview-body{padding:18px;font-size:14px;line-height:1.6;color:#111a2b;overflow-wrap:anywhere;word-break:break-word;min-height:200px;overflow-x:auto}
.composer-preview-body *{max-width:100%}
.composer-preview-body img{height:auto;border-radius:8px}
.composer-preview-body table{max-width:100%;border-collapse:collapse}
.composer-preview-body h2{font-size:20px;margin:10px 0 6px;color:#1a1a20}
.composer-preview-body a{color:#2b62a8}
@media(max-width:900px){
  .composer-body{flex-direction:column;overflow-y:auto}
  .composer-editor{padding:18px 16px}
  .composer-preview{width:auto;border-left:0;border-top:1px solid var(--line)}
  .composer-fields{grid-template-columns:1fr}
}

/* ---------- themed dialog (custom alert / confirm / prompt) ---------- */
.ui-dialog-bg{position:fixed;inset:0;z-index:400;background:rgba(16,25,42,.5);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);display:flex;align-items:center;justify-content:center;padding:20px}
.ui-dialog-bg[hidden]{display:none}
.ui-dialog{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-lg);
  padding:26px 28px;width:440px;max-width:calc(100vw - 32px);animation:stevepop .18s ease}
.ui-dialog h3{font-family:var(--disp);font-size:17px;margin:0 0 8px;color:var(--ink)}
.ui-dialog p{margin:0;color:var(--text-2);font-size:14px;line-height:1.55}
.ui-dialog-foot{display:flex;gap:10px;justify-content:flex-end;margin-top:22px}

/* ============================================================
   Mobile / small-screen responsiveness. The app was built desktop-first;
   these rules keep the top bar, page headers, toolbars, forms and tables
   usable on a phone instead of overflowing the viewport.
   ============================================================ */
@media(max-width:820px){
  .wrap{margin:18px auto;padding:0 15px}
  /* top bar: a horizontal swipe strip with no visible hint isn't discoverable
     on a real phone — collapse the nav behind a real hamburger toggle instead,
     as a full-width dropdown under the brand row. */
  .topbar{gap:10px;padding:10px 12px;flex-wrap:wrap;height:auto;min-height:60px}
  .nav-toggle{display:flex}
  .mainnav{display:none;flex-direction:column;align-items:stretch;gap:2px;width:100%;order:10;
    background:rgba(0,0,0,.16);border-radius:10px;padding:6px;overflow-x:visible;max-width:none;
    /* the topbar is position:sticky, so with enough nav items the open dropdown
       can run past the bottom of the screen with no way to reach the rest —
       cap it to the remaining viewport height and let it scroll internally. */
    max-height:calc(100vh - 76px);overflow-y:auto;-webkit-overflow-scrolling:touch}
  .topbar.nav-open .mainnav{display:flex}
  .mainnav a{flex:0 0 auto;width:100%;padding:11px 14px;border-radius:8px}
  /* dropdowns just expand inline in the accordion instead of flying out */
  .mainnav details{width:100%}
  .mainnav details summary{width:100%;padding:11px 14px}
  .mainnav details .dropdown{position:static;box-shadow:none;border:none;background:transparent;padding:0 0 0 14px;margin-top:2px}
  .mainnav details .dropdown a{padding:10px 14px}
  .userbox{gap:9px;margin-left:auto}
  .userbox .userlink{max-width:96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* page headers that float their action buttons to the right — stack the
     buttons neatly under the title instead of colliding with it. */
  h1{font-size:22px}
  h1 > span[style*="float"]{float:none!important;display:flex!important;flex-wrap:wrap;gap:8px;margin-top:12px}
  /* filter/search toolbars: fields share the row and wrap instead of overflowing. */
  .toolbar{gap:8px}
  .toolbar input,.toolbar select{min-width:0;flex:1 1 150px}
  /* forms collapse to a single column. */
  .formgrid{grid-template-columns:1fr}
  .grid-2,.grid-3,.grid-4,.grid-5{grid-template-columns:1fr}
  .kpis{grid-template-columns:repeat(2,1fr);gap:12px}
  .kpi .n{font-size:26px}
  .modal{padding:22px 18px}
  .card{padding:18px 16px}
}
@media(max-width:460px){
  .kpis{grid-template-columns:1fr}
  h1{font-size:20px}
  .crm-tag{display:none}                 /* reclaim width on the smallest screens */
  #steve-btn{right:14px;bottom:14px;padding:0 16px}
}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}