/* =========================================================================
   apple.css (served as glass.css) — Shubharambh CRM design system · UAT ONLY
   Loaded only when CRM_ENV=uat; every rule scoped under html.glass-theme so it
   can never reach production. This is NOT a glassmorphism theme — it is the
   Apple-grade product language: clarity, deference, depth. Two materials
   (translucent chrome / near-solid content), SF Pro, gold brand accent +
   the CRM's blue for interaction, soft light for depth. No gradients on fills,
   no glow, no grain. See the Design Language spec.
   ========================================================================= */

html.glass-theme {
  /* neutrals (chosen, cool-neutral) */
  --ground:#F5F5F7; --surface:#FFFFFF; --surface-2:#F2F2F5;
  --ink:#1D1D1F; --ink-2:#5B6470; --ink-3:#8A9099;
  --hair:rgba(0,0,0,.10); --hair-2:rgba(0,0,0,.06);

  /* dark chrome (sidebar / mobile top bar / login stage) */
  --chrome:#141B27; --chrome-2:#0E1521; --chrome-line:rgba(255,255,255,.09);
  --chrome-ink:#EDEEF1; --chrome-ink-2:#9BA3B2;

  /* accents: GOLD = brand & emphasis, BLUE = interaction & system */
  --gold:#9C7A3C; --gold-press:#866A34; --gold-tint:rgba(156,122,60,.13); --gold-ink:#7E6330;
  --blue:#3B82F6; --blue-press:#2563EB; --blue-tint:rgba(59,130,246,.13); --blue-ink:#1D4ED8;

  /* semantic (separate from accents) */
  --green:#2F9E56; --green-tint:rgba(47,158,86,.13);
  --red:#E5484D;   --red-tint:rgba(229,72,77,.12);
  --orange:#C77A16;--orange-tint:rgba(217,130,43,.14);

  /* radii — crisp, precise */
  --r-ctl:7px; --r-card:12px; --r-sheet:18px; --r-pill:980px;

  /* elevation — soft light, two tiers only */
  --e1:0 .5px 0 rgba(0,0,0,.03), 0 1px 2px rgba(0,0,0,.05), 0 10px 24px -14px rgba(0,0,0,.12);
  --e2:0 .5px 0 rgba(0,0,0,.04), 0 16px 44px -14px rgba(0,0,0,.24);

  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",system-ui,"DM Sans","Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --ease:cubic-bezier(.32,.72,0,1);
}

/* =========================================================================
   1. Base — system type, quiet ground (NO mesh / grain / aurora)
   ========================================================================= */
html.glass-theme, html.glass-theme body { font-family:var(--sans); letter-spacing:-.006em; -webkit-font-smoothing:antialiased; }
html.glass-theme body.app-shell  { background:var(--ground); color:var(--ink); }
html.glass-theme body::before, html.glass-theme body::after { display:none !important; content:none !important; }
html.glass-theme .fvn, html.glass-theme .tabular { font-variant-numeric:tabular-nums; }

/* =========================================================================
   2. Typography — one family, strict ramp, NO serif display / NO gradient text
   ========================================================================= */
html.glass-theme h1, html.glass-theme h2, html.glass-theme h3,
html.glass-theme h4, html.glass-theme h5, html.glass-theme h6,
html.glass-theme .h1, html.glass-theme .h2, html.glass-theme .h3,
html.glass-theme .h4, html.glass-theme .h5, html.glass-theme .h6,
html.glass-theme .page-title h1 {
  font-family:var(--sans); font-weight:600; letter-spacing:-.02em; color:var(--ink);
  background:none !important; -webkit-text-fill-color:currentColor !important;
}
html.glass-theme .page-title h1, html.glass-theme h1 { font-size:clamp(1.5rem,1.25rem+1vw,1.85rem); line-height:1.12; }
html.glass-theme h2, html.glass-theme .h2 { font-size:clamp(1.15rem,1rem+.7vw,1.35rem); }
html.glass-theme h3, html.glass-theme .h3, html.glass-theme .h5 { font-size:1.02rem; letter-spacing:-.012em; }
html.glass-theme .h6, html.glass-theme h6 { font-size:.82rem; letter-spacing:.02em; }
html.glass-theme .text-muted { color:var(--ink-2) !important; }
/* KPI caps labels: neutral gray + tight tracking (gold stays sparse) */
html.glass-theme .card.p-3 .text-muted.small:first-child { color:var(--ink-3) !important; letter-spacing:.05em; }
html.glass-theme .card.p-3 .fs-3, html.glass-theme .card.p-3 .fs-4 { color:var(--ink) !important; }
html.glass-theme a { color:var(--blue-ink); text-decoration:none; }
html.glass-theme a:hover { text-decoration:underline; }
html.glass-theme .page-title .small.text-muted a { color:var(--blue-ink); }

/* =========================================================================
   3. Content surfaces — NEAR-SOLID (this is what stops it looking "glass")
   ========================================================================= */
html.glass-theme .card,
html.glass-theme .filter-bar,
html.glass-theme fieldset,
html.glass-theme .list-group {
  background:var(--surface);
  border:1px solid var(--hair);
  border-radius:var(--r-card);
  box-shadow:var(--e1);
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
html.glass-theme .card { position:relative; transition:box-shadow .25s var(--ease), transform .25s var(--ease); }
html.glass-theme .card::before { display:none !important; }         /* kill the old specular sheen */
html.glass-theme fieldset legend { color:var(--ink-2) !important; font-weight:600; }
html.glass-theme .card.p-2 { border-radius:10px; }
/* interactive cards only, fine-pointer only — no tap-jitter */
@media (hover:hover) and (pointer:fine){
  html.glass-theme a.card:hover, html.glass-theme .card.lift:hover { transform:translateY(-2px); box-shadow:var(--e2); }
}

/* =========================================================================
   4. Sidebar + drawer — LIGHT translucent material (Finder / System Settings).
   The dark-gradient side rail read as "AI dashboard template" (founder,
   2026-07-18). Apple's own pattern: light sidebar material, content scrolls
   behind it, quiet ink text, tinted icons, soft gray selection pill.
   ========================================================================= */
/* RESTORED (founder 2026-07-18): the ORIGINAL navy rail — the "previous blue".
   This is the pre-v17 design verbatim; do not swap it for light material or
   bright brand-blue again. */
html.glass-theme .sidebar,
html.glass-theme .offcanvas.sidebar-mobile {
  background:linear-gradient(180deg,var(--chrome),var(--chrome-2));
  border-right:1px solid var(--chrome-line);
  box-shadow:0 0 0 1px rgba(0,0,0,.2);
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
html.glass-theme .offcanvas.sidebar-mobile { border-radius:0; border-top:0; border-left:0; border-bottom:0; }
html.glass-theme .offcanvas.sidebar-mobile .offcanvas-body,
html.glass-theme .offcanvas.sidebar-mobile .offcanvas-header { background:transparent; }
html.glass-theme .sidebar-brand { border-bottom:1px solid var(--chrome-line); }

html.glass-theme .sidebar-link, html.glass-theme .sidebar-sublink {
  position:relative; border-radius:8px; color:var(--chrome-ink-2); font-weight:500;
  transition:background .18s var(--ease), color .18s var(--ease);
}
html.glass-theme .sidebar-link .sidebar-icon { color:var(--chrome-ink-2); transition:color .18s var(--ease); }
@media (hover:hover) and (pointer:fine){
  html.glass-theme .sidebar-link:hover, html.glass-theme .sidebar-sublink:hover { background:rgba(255,255,255,.06); color:var(--chrome-ink); }
}
/* macOS-style FILLED selection pill — brand gold accent, no glow rail */
html.glass-theme .sidebar-link.active {
  background:rgba(255,255,255,.10); color:#fff; font-weight:600;
}
html.glass-theme .sidebar-link.active .sidebar-icon { color:var(--gold); }
html.glass-theme .sidebar-link.active::before { display:none; }        /* remove old glow rail */
html.glass-theme .sidebar-sublink.active { background:rgba(255,255,255,.07); color:#fff; }
html.glass-theme .sidebar-chevron { color:var(--chrome-ink-2); }

/* profile block — flat avatar, quiet label */
html.glass-theme .sidebar-footer { border-top:1px solid var(--chrome-line); }
html.glass-theme .sidebar-user-card { border-radius:10px; transition:background .18s var(--ease); }
@media (hover:hover) and (pointer:fine){ html.glass-theme .sidebar-user-card:hover { background:rgba(255,255,255,.06); } }
html.glass-theme .sidebar-user-avatar {
  background:#2A3446; color:var(--chrome-ink); font-weight:600;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
html.glass-theme .sidebar-user-name { color:#fff; font-weight:600; }
html.glass-theme .sidebar-user-role { color:var(--chrome-ink-2); }
html.glass-theme .sidebar-action { border-radius:8px; color:var(--chrome-ink-2); }
html.glass-theme .sidebar-action-secondary:hover { background:rgba(255,255,255,.06); color:var(--chrome-ink); }

/* -------------------------------------------------------------------------
   4b. Sidebar pixel-refinement pass (2026-07-19) — WITHIN the navy, no
   colour-identity change. Fixes the "layered-on-top-of-the-old-gold-rail"
   residue + ragged alignment that read as a template:
     #1 inset rounded selection chip (was an edge-to-edge band)
     #2 ONE selection signal (kills the leftover gold left-bar + right-dot +
        gold sublink dot/border + gold footer-card + gold expanded-group text
        that the theme never neutralised)
     #3 one left spine: section labels + icon left edges @18px; parent labels
        + sublink text @50px; sublink bullet under the parent icon centre
     #4 single hairline at the brand divider (kills the gold gradient line)
     #5 tighter icon↔label gap  #6 crisper section labels
     #7 shorter brand header    #8 clearer hover→active contrast
   Geometry scoped to the EXPANDED rail so the 72px collapsed rail is
   untouched; the gold-neutralising + type rules apply in both modes.
   ------------------------------------------------------------------------- */

/* #1 + #3 geometry — inset chips on one spine (expanded rail only) */
html.glass-theme:not(.sidebar-collapsed) .sidebar-link,
html.glass-theme:not(.sidebar-collapsed) .sidebar-sublink { margin:1px 8px; border-radius:8px; }
html.glass-theme:not(.sidebar-collapsed) .sidebar-link {
  padding:9px 10px; gap:10px;                 /* icon L-edge @18px · icon centre @29px · label @50px */
}
html.glass-theme:not(.sidebar-collapsed) .sidebar-sublink {
  padding:7px 10px 7px 42px;                  /* sublink text @50px = under the parent label */
}
html.glass-theme:not(.sidebar-collapsed) .sidebar-subnav { background:transparent; border-left:0; }
html.glass-theme:not(.sidebar-collapsed) .sidebar-sublink::before { left:19px; }  /* bullet centre @29px = parent icon centre */

/* #2 one selection signal — strip every leaked gold accent from the states */
html.glass-theme .sidebar-link,
html.glass-theme .sidebar-sublink,
html.glass-theme button.sidebar-group { border-left:0 !important; }
html.glass-theme .sidebar-link.active::after { display:none; }           /* gold right dot */
html.glass-theme .sidebar-sublink.active::before { background:#fff; }     /* bullet follows text, not gold */
html.glass-theme button.sidebar-group[aria-expanded="true"]:not(.active) {
  color:var(--chrome-ink-2); background:transparent;                      /* open ≠ gold; only active is emphasised */
}
html.glass-theme button.sidebar-group.active { color:#fff; }

/* #8 hover → active contrast (hover .06 in §4 → active .12) */
html.glass-theme .sidebar-link.active { background:rgba(255,255,255,.12); }

/* #2 footer profile card — neutral, was leaking a gold tint + gold border */
html.glass-theme .sidebar-user-card {
  background:rgba(255,255,255,.04); border:1px solid var(--chrome-line);
}
html.glass-theme .sidebar-user-card:hover { background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.14); }

/* #6 section labels — the WINNING rule lives in §18 (a later duplicate block),
   so declaring them here was dead code (the v23 cascade miss). §18 now carries
   the 18px spine + 11px/.72 type as the single source of truth. */

/* #4 + #7 brand — single hairline, trimmer header */
html.glass-theme .sidebar-brand { min-height:80px; }
html.glass-theme .sidebar-brand::after { display:none; }

/* =========================================================================
   5. Top bar — thin material
   ========================================================================= */
html.glass-theme .topbar.d-md-none {                         /* mobile: dark, legible logo + icons */
  background:linear-gradient(180deg,var(--chrome),var(--chrome-2));
  border-bottom:1px solid var(--chrome-line);
}
html.glass-theme .topbar-desktop {                           /* desktop: quiet light strip */
  background:rgba(252,252,253,.86);
  -webkit-backdrop-filter:saturate(140%) blur(12px); backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--hair);
}
html.glass-theme .topbar-desktop::after { display:none; }
html.glass-theme .profile-chip {
  background:var(--surface); border:1px solid var(--hair); border-radius:var(--r-pill);
  box-shadow:var(--e1); transition:background .18s var(--ease);
}
@media (hover:hover) and (pointer:fine){ html.glass-theme .profile-chip:hover { background:var(--surface-2); } }
html.glass-theme .profile-chip-avatar { background:var(--gold-tint); color:var(--gold-ink); box-shadow:inset 0 0 0 1px rgba(156,122,60,.28); }
html.glass-theme .profile-chip-name { color:var(--ink); font-weight:600; }
html.glass-theme .profile-chip-code { color:var(--ink-2); }

/* =========================================================================
   6. Tables — airy, hairline separators, quiet caps headers
   ========================================================================= */
html.glass-theme .table { --bs-table-bg:transparent; --bs-table-color:var(--ink); margin-bottom:0; }
html.glass-theme .table > :not(caption) > * > * { background:transparent; padding-top:.7rem; padding-bottom:.7rem; }
html.glass-theme .table thead th,
html.glass-theme .table thead.table-light th {
  background:transparent !important; color:var(--ink-3) !important;
  text-transform:uppercase; letter-spacing:.055em; font-size:.68rem !important; font-weight:600;
  border-bottom:1px solid var(--hair) !important;
}
html.glass-theme .table > tbody > tr { border-top:1px solid var(--hair-2); }
html.glass-theme .table > tbody > tr > td { border-top:0; }
html.glass-theme .table-hover > tbody > tr { transition:background .12s var(--ease); }
html.glass-theme .table-hover > tbody > tr:hover > * { background:var(--surface-2); }
html.glass-theme .table > :not(:first-child) { border-top:0; }

/* =========================================================================
   7. Forms — quiet fields, BLUE focus (interaction)
   ========================================================================= */
html.glass-theme .form-control, html.glass-theme .form-select {
  background-color:var(--surface); border:1px solid var(--hair); color:var(--ink);
  border-radius:var(--r-ctl); box-shadow:inset 0 1px 1px rgba(0,0,0,.02);
  transition:border-color .15s var(--ease), box-shadow .15s var(--ease);
}
html.glass-theme .form-control::placeholder { color:var(--ink-3); }
html.glass-theme .form-control:focus, html.glass-theme .form-select:focus {
  background-color:var(--surface); border-color:var(--blue); box-shadow:0 0 0 3.5px var(--blue-tint);
}
html.glass-theme .input-group-text { background:var(--surface-2); border:1px solid var(--hair); color:var(--ink-2); border-radius:var(--r-ctl); }
html.glass-theme .form-check-input:checked { background-color:var(--blue); border-color:var(--blue); }
html.glass-theme .form-check-input:focus { border-color:var(--blue); box-shadow:0 0 0 3.5px var(--blue-tint); }
html.glass-theme .form-label, html.glass-theme .form-label.small { color:var(--ink-2); font-weight:590; }

/* =========================================================================
   8. Buttons — gold primary (brand), neutral secondary, blue links
   ========================================================================= */
html.glass-theme .btn {
  border-radius:var(--r-ctl); font-weight:590; letter-spacing:-.01em;
  transition:background .15s var(--ease), box-shadow .15s var(--ease), transform .06s var(--ease);
}
html.glass-theme .btn:active { transform:translateY(.5px); }
html.glass-theme .btn:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }

html.glass-theme .btn-primary {                              /* the one brand action */
  background:var(--gold); border:1px solid var(--gold); color:#fff; box-shadow:none;
}
html.glass-theme .btn-primary:hover, html.glass-theme .btn-primary:focus { background:var(--gold-press); border-color:var(--gold-press); color:#fff; }

html.glass-theme .btn-outline-secondary, html.glass-theme .btn-outline-primary,
html.glass-theme .btn-outline-dark, html.glass-theme .btn-light, html.glass-theme .btn-secondary {
  background:var(--surface); border:1px solid var(--hair); color:var(--ink); box-shadow:var(--e1);
}
html.glass-theme .btn-secondary { background:var(--surface-2); }
@media (hover:hover) and (pointer:fine){
  html.glass-theme .btn-outline-secondary:hover, html.glass-theme .btn-outline-primary:hover,
  html.glass-theme .btn-outline-dark:hover, html.glass-theme .btn-light:hover { background:var(--surface-2); border-color:var(--hair); color:var(--ink); }
}
/* interactive/link buttons in blue */
html.glass-theme .btn-link { color:var(--blue-ink); text-decoration:none; }
html.glass-theme .btn-outline-info { background:var(--blue-tint); border:1px solid transparent; color:var(--blue-ink); }
/* semantic actions stay semantic (flat, not gradient) */
html.glass-theme .btn-success { background:var(--green); border-color:var(--green); color:#fff; }
html.glass-theme .btn-danger  { background:var(--red);   border-color:var(--red);   color:#fff; }
html.glass-theme .btn-outline-success { background:var(--green-tint); border:1px solid transparent; color:#1f7a42; }
html.glass-theme .btn-outline-danger  { background:var(--red-tint);   border:1px solid transparent; color:#c13b3f; }
html.glass-theme .btn-outline-warning { background:var(--orange-tint); border:1px solid transparent; color:var(--orange); }
/* WhatsApp keeps its brand green */
html.glass-theme .btn-whatsapp-solid, html.glass-theme .btn-whatsapp { background:#25D366 !important; border-color:#25D366 !important; color:#0b3d1f !important; }
/* reveal-eye */
html.glass-theme .btn-reveal { background:var(--surface-2); border:1px solid var(--hair); border-radius:var(--r-ctl); color:var(--blue-ink); }

/* =========================================================================
   9. Badges + status chips — FLAT semantic (no borders/glow)
   ========================================================================= */
html.glass-theme .badge { font-weight:600; letter-spacing:.01em; border-radius:6px; -webkit-backdrop-filter:none; backdrop-filter:none; }
html.glass-theme .badge.bg-secondary { background:#EEF1F5 !important; color:#516079 !important; }
html.glass-theme .badge.bg-primary, html.glass-theme .badge.bg-primary-subtle { background:var(--blue-tint) !important; color:var(--blue-ink) !important; border:0 !important; }
html.glass-theme .badge.bg-info, html.glass-theme .badge.bg-info-subtle { background:var(--blue-tint) !important; color:var(--blue-ink) !important; }
html.glass-theme .badge.bg-success, html.glass-theme .badge.bg-success-subtle { background:var(--green-tint) !important; color:#1f7a42 !important; }
html.glass-theme .badge.bg-warning, html.glass-theme .badge.bg-warning-subtle { background:var(--orange-tint) !important; color:var(--orange) !important; }
html.glass-theme .badge.bg-danger, html.glass-theme .badge.bg-danger-subtle { background:var(--red-tint) !important; color:#c13b3f !important; }
/* lead-type pills flattened, keep meaning (Cold = the CRM blue) */
html.glass-theme .badge-type-hot  { background:var(--red-tint) !important; color:#c13b3f !important; border:0 !important; }
html.glass-theme .badge-type-warm { background:var(--gold-tint) !important; color:var(--gold-ink) !important; border:0 !important; }
html.glass-theme .badge-type-cold { background:var(--blue-tint) !important; color:var(--blue-ink) !important; border:0 !important; }

/* =========================================================================
   10. Alerts, dropdowns, modals, pagination, tabs, progress
   ========================================================================= */
html.glass-theme .alert {
  background:var(--surface); border:1px solid var(--hair); border-left-width:3px;
  border-radius:var(--r-card); box-shadow:var(--e1); color:var(--ink);
}
html.glass-theme .alert-success { border-left-color:var(--green); }
html.glass-theme .alert-danger  { border-left-color:var(--red); }
html.glass-theme .alert-info    { border-left-color:var(--blue); }
html.glass-theme .alert-warning { border-left-color:var(--orange); }

html.glass-theme .dropdown-menu, html.glass-theme .toast {
  background:var(--surface); border:1px solid var(--hair); border-radius:var(--r-card); box-shadow:var(--e2);
}
html.glass-theme .dropdown-item:active, html.glass-theme .dropdown-item.active { background:var(--blue); color:#fff; }
html.glass-theme .dropdown-item:hover { background:var(--surface-2); }

html.glass-theme .modal-content { background:var(--surface); border:1px solid var(--hair); border-radius:var(--r-sheet); box-shadow:var(--e2); }
html.glass-theme .modal-header, html.glass-theme .modal-footer { border-color:var(--hair); }
html.glass-theme .modal-backdrop.show { opacity:.32; background:#000; }

html.glass-theme .pagination .page-link {
  background:var(--surface); border:1px solid var(--hair); color:var(--ink);
  margin:0 2px; border-radius:var(--r-ctl); transition:background .12s var(--ease);
}
@media (hover:hover) and (pointer:fine){ html.glass-theme .pagination .page-link:hover { background:var(--surface-2); } }
html.glass-theme .pagination .page-item.active .page-link { background:var(--blue); border-color:var(--blue); color:#fff; }

html.glass-theme .progress { background:var(--surface-2); border-radius:var(--r-pill); }
html.glass-theme .progress-bar { background:var(--gold); }

html.glass-theme .nav-tabs { border-bottom-color:var(--hair); }
html.glass-theme .nav-tabs .nav-link { border:0; color:var(--ink-2); border-radius:8px 8px 0 0; }
html.glass-theme .nav-tabs .nav-link:hover { background:var(--surface-2); }
html.glass-theme .nav-tabs .nav-link.active { background:transparent; color:var(--blue-ink); border-bottom:2px solid var(--blue); }

/* =========================================================================
   11. Sign-in — calm dark stage (no aurora/grain), one solid gold action
   ========================================================================= */
html.glass-theme body.login-shell {
  background:#0E1521;
  background-image:radial-gradient(42rem 26rem at 24% -12%, rgba(156,122,60,.16), transparent 62%),
                   linear-gradient(165deg,#131c2b 0%,#0b131f 62%,#0e1826 100%);
}
html.glass-theme .login-card, html.glass-theme .login-wrap .card {
  background:rgba(255,255,255,.055); -webkit-backdrop-filter:blur(22px); backdrop-filter:blur(22px);
  border:1px solid rgba(255,255,255,.10); border-radius:var(--r-sheet);
  box-shadow:0 30px 70px -24px rgba(0,0,0,.6); color:var(--chrome-ink);
}
html.glass-theme .login-card::before { display:none; }
html.glass-theme .login-brand { background:transparent; border-bottom:1px solid rgba(255,255,255,.10); }
html.glass-theme .login-body { background:transparent; }
html.glass-theme .login-title { color:#fff !important; -webkit-text-fill-color:#fff; font-family:var(--sans); font-weight:600; letter-spacing:-.02em; }
html.glass-theme .login-eyebrow { color:var(--gold) !important; }
html.glass-theme .login-sub { color:var(--chrome-ink-2); }
html.glass-theme .login-label { color:var(--chrome-ink-2); }
html.glass-theme .login-wrap .form-control {
  background-color:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); color:#fff; border-radius:9px;
}
html.glass-theme .login-wrap .form-control:focus { border-color:var(--blue); box-shadow:0 0 0 3.5px rgba(59,130,246,.25); background-color:rgba(255,255,255,.09); }
html.glass-theme .login-wrap .form-control::placeholder { color:rgba(237,238,241,.5); }
html.glass-theme .login-submit.btn-primary { background:var(--gold); border-color:var(--gold); }
html.glass-theme .login-submit.btn-primary:hover { background:var(--gold-press); border-color:var(--gold-press); }
html.glass-theme .login-foot-hint { background:transparent !important; color:var(--chrome-ink-2); border-top-color:rgba(255,255,255,.10); }
html.glass-theme .login-card a, html.glass-theme .login-wrap a { color:#7FB0FF; }
html.glass-theme .login-footer { color:rgba(237,238,241,.55); }

/* =========================================================================
   12. Motion — subtle only (no ripple, no shine, no heavy cascade)
   ========================================================================= */
@keyframes appleRise { from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }
html.glass-theme.glass-anim .app-main > main > * { animation:appleRise .45s var(--ease) both; }
html.glass-theme.glass-anim .app-main > main > *:nth-child(2){animation-delay:.04s}
html.glass-theme.glass-anim .app-main > main > *:nth-child(3){animation-delay:.08s}
html.glass-theme.glass-anim .app-main > main > *:nth-child(4){animation-delay:.12s}
html.glass-theme.glass-anim .app-main > main > *:nth-child(n+5){animation-delay:.14s}
html.glass-theme .glass-ripple { display:none !important; }

/* =========================================================================
   13. Scrollbar + misc
   ========================================================================= */
html.glass-theme ::-webkit-scrollbar { width:12px; height:12px; }
html.glass-theme ::-webkit-scrollbar-thumb { background:rgba(0,0,0,.22); border-radius:999px; border:3px solid transparent; background-clip:padding-box; }
html.glass-theme ::-webkit-scrollbar-thumb:hover { background:rgba(0,0,0,.32); background-clip:padding-box; }
html.glass-theme ::-webkit-scrollbar-track { background:transparent; }
html.glass-theme hr { border-color:var(--hair); opacity:1; }
html.glass-theme code { color:var(--ink-2); }

/* =========================================================================
   14. Responsive — phone / iPad / desktop
   ========================================================================= */
@media (max-width:575.98px){
  html.glass-theme main.container-fluid { padding:.9rem !important; }
}
@media (max-width:767.98px){
  html.glass-theme .sidebar-sublink { min-height:44px; padding-top:.65rem; padding-bottom:.65rem; }
  html.glass-theme .form-control, html.glass-theme .form-select,
  html.glass-theme .form-control-sm, html.glass-theme .form-select-sm,
  html.glass-theme .login-field .form-control { font-size:16px; }        /* no iOS zoom */
  html.glass-theme .table-responsive { -webkit-overflow-scrolling:touch; }
  html.glass-theme .table-responsive > .table > thead > tr > th:first-child,
  html.glass-theme .table-responsive > .table > tbody > tr > td:first-child { position:sticky; left:0; z-index:2; background:var(--surface); }
  /* The pinned HEADER cell needs !important to win: section 3's
     `.table thead th { background:transparent !important }` outranks the
     un-!important background above, so without this the pinned th paints
     transparent and every column header scrolls THROUGH it — six headers
     printing on top of each other on a wide table. Body cells have no such
     competitor, which is why only the header was affected. */
  html.glass-theme .table-responsive > .table > thead > tr > th:first-child { background:var(--surface) !important; }

  /* Anchor returns (`?return_to=/company_data#row-123`) scrolled the target row
     to y=0, which is underneath the 64px sticky mobile topbar — 89% of the row
     was covered and every control in it mis-tapped onto a topbar button. */
  html.glass-theme { scroll-padding-top:calc(var(--topbar-h, 64px) + 8px); }

  /* The tab strip is `display:inline-flex` (section 21), and an inline-flex box
     is content-sized: it grew past the viewport instead of clipping, so
     `overflow-x:auto` never engaged and Blink shrink-to-fit rendered the whole
     page at 78% zoom on /masters and 89% on /signups. Clip it, then it scrolls. */
  html.glass-theme .nav-tabs { display:flex; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  html.glass-theme .nav-tabs::-webkit-scrollbar { display:none; }
  html.glass-theme .nav-tabs .nav-item { flex:0 0 auto; }

  /* ---- 14b. PHONE TABLE CONTRACT (2026-08-21) --------------------------------
     Tables run 327-1397px wide inside a ~359px window. Section 22 deliberately
     keeps tables full-size on TOUCH devices so they pan instead of cramping —
     that call is right for iPads and is left intact; these rules apply only
     below 768px, where panning across 1000+px to reach a button is not a
     workable pattern. ------------------------------------------------------- */

  /* Cap the pinned identity cell. It had no max-width and `nowrap` below meant it
     could not shrink, so an ordinary branch or client name ate 48-63% of the
     window and a long one could occlude the table entirely. */
  html.glass-theme .table-responsive > .table > tbody > tr > td:first-child,
  html.glass-theme .table-responsive > .table > thead > tr > th:first-child {
    max-width:42vw; overflow:hidden; text-overflow:ellipsis;
  }

  /* Right-pin the action column so Call / WhatsApp / Edit / Del are reachable
     WITHOUT panning the full scroll range (1038px on /prospects). Tagged by
     glass.js because no template gives that cell a class. */
  html.glass-theme .table-responsive > .table.has-actions > thead > tr > th.col-actions,
  html.glass-theme .table-responsive > .table.has-actions > tbody > tr > td.col-actions,
  html.glass-theme .table-responsive > .table.has-actions > tfoot > tr > td.col-actions {
    position:sticky; right:0; z-index:2; background:var(--surface);
    box-shadow:-9px 0 9px -9px rgba(0,0,0,.20);
    text-align:right;
    /* Cap it. Pinned at full width a four-button cell claimed ~300px of a 359px
       window and left almost nothing for the record itself — worse than the swipe
       it replaced. Floored as well as capped: squeezed to 80px the buttons stacked
       four-deep and rows grew to 213px, so the floor keeps two per line.
       `white-space` needs !important: the templates set nowrap as an INLINE style
       (prospects.php, dashboard.php), which otherwise wins and shears the last
       button outside the scrollport instead of wrapping it. */
    min-width:132px; max-width:42vw; white-space:normal !important;
  }
  /* Keep the cell in normal table-cell layout — `display:flex` on a <td> takes it
     out of the table's column-sizing model, so min-width stopped applying and the
     buttons stacked four-deep. Inline-block children wrap on their own. */
  html.glass-theme .table-responsive > .table.has-actions > tbody > tr > td.col-actions > * {
    margin:2px 1px !important; vertical-align:middle;
  }
  html.glass-theme .table-responsive > .table.has-actions > thead > tr > th.col-actions {
    background:var(--surface) !important;   /* beat section 3's transparent !important */
  }
  /* Keep the zebra stripe continuous under both pinned cells. The stripe is set by
     section 23 as `tr:nth-child(even) > * { background:rgba(0,0,0,.022) }`, but a
     pinned cell must be OPAQUE (a translucent one lets the columns it covers show
     through while panning), so mirror the same tone as a solid colour. Targeting
     `.table-striped` here would match nothing — this codebase does not use it. */
  html.glass-theme .table > tbody > tr:nth-child(even) > td:first-child {
    background:#F9F9F9;
  }
  /* The action arm must mirror the PIN rule's own shape to outrank it: the pin is
     (0,0,5,4) and a plain `.table > tbody > tr:nth-child(even) > td.col-actions`
     is only (0,0,4,4), so it silently lost and even rows kept a white block. */
  html.glass-theme .table-responsive > .table.has-actions > tbody > tr:nth-child(even) > td.col-actions {
    background:#F9F9F9;
  }
  /* Totals rows are deliberately NOT left-pinned. A tfoot's first cell is usually a
     `colspan` label spanning most of the table (340px on /bookings, 374px on
     /ops_bookings against a 359px scrollport); pinned and opaque it painted over
     every money value in the row at EVERY scroll offset, so the grand total read as
     blank. The tfoot action cell is still right-pinned via .col-actions above. */

  /* Icon-only Call/WhatsApp on PHONES only (section 22 does this for >=992px
     mouse users). Strips ~140px from the widest tables. iPads keep the labels. */
  html.glass-theme .table-responsive .btn-call > .ms-1,
  html.glass-theme .table-responsive .btn-whatsapp > .ms-1 { display:none; }
  html.glass-theme .table-responsive .col-actions .btn-sm { padding:.34rem .5rem; }

  /* Nothing signalled that a table scrolls sideways — no scrollbar takes layout
     on iOS, so a row that ends on a column boundary reads as complete. */
  html.glass-theme .table-responsive.has-xscroll {
    -webkit-mask-image:linear-gradient(to left, transparent 0, #000 26px);
            mask-image:linear-gradient(to left, transparent 0, #000 26px);
  }
  /* Skip the fade entirely when the table has a right-pinned action column: the mask
     lives on the SCROLL CONTAINER, and a descendant cannot cancel an ancestor's mask,
     so the 26px ramp fell straight on the sticky buttons and rendered the last one at
     0-48% opacity. The pinned column is its own affordance. */
  html.glass-theme .table-responsive.has-xscroll:has(> .table.has-actions) {
    -webkit-mask-image:none; mask-image:none;
  }

  /* ---- 14c. PHONE INFORMATION ARCHITECTURE -----------------------------------
     Filter columns are authored col-md-* only, so they fall back to 100% width
     and stack one per row: 811px of filters on /prospects before any data. Two
     per row plus the collapse below take the first data row from y=1398 to
     roughly y=400. ---------------------------------------------------------- */
  html.glass-theme .filter-bar .row > [class*="col-"] { flex:0 0 50%; max-width:50%; }
  /* The Apply/Reset pair needs the full width to stay tappable. */
  html.glass-theme .filter-bar .row > [class*="col-"]:has(> .btn),
  html.glass-theme .filter-bar .row > [class*="col-"].d-flex { flex:0 0 100%; max-width:100%; }
  html.glass-theme .filter-bar .row > [class*="col-"] { margin-bottom:0; }
  html.glass-theme .filter-bar .form-label { margin-bottom:.15rem; }

  /* Collapsed filter form (wrapper built by glass.js). */
  html.glass-theme .fb-collapse > .fb-summary {
    list-style:none; cursor:pointer; display:flex; align-items:center; gap:8px;
    min-height:44px; padding:2px 0; font-weight:600; color:var(--ink-2);
    font-size:var(--fs-subhead);
  }
  html.glass-theme .fb-collapse > .fb-summary::-webkit-details-marker { display:none; }
  html.glass-theme .fb-collapse > .fb-summary::before {
    content:""; width:8px; height:8px; flex:0 0 auto; margin-right:2px;
    border-right:2px solid var(--ink-3); border-bottom:2px solid var(--ink-3);
    transform:rotate(-45deg); transition:transform .18s var(--ease);
  }
  html.glass-theme .fb-collapse[open] > .fb-summary::before { transform:rotate(45deg); }
  html.glass-theme .fb-count {
    background:var(--blue-tint, rgba(59,130,246,.12)); color:var(--blue);
    border-radius:999px; padding:1px 9px; font-size:.72rem; font-weight:600;
  }
  /* Bootstrap's .row carries negative inline margins that the form's own padding
     used to cancel. Re-parented under <details>, which has no padding, those
     margins pushed the row past the viewport on both sides — enough to trigger
     Blink's shrink-to-fit and scale the whole page down. Neutralise them. */
  html.glass-theme .fb-collapse > .row { margin-left:0; margin-right:0; margin-top:10px; }

  /* KPI tiles stacked two-up cost 320-540px above the table. One scrolling row. */
  html.glass-theme .kpi-strip, html.glass-theme .kpi-row {
    display:flex; flex-wrap:nowrap; overflow-x:auto; gap:8px;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  html.glass-theme .kpi-strip::-webkit-scrollbar,
  html.glass-theme .kpi-row::-webkit-scrollbar { display:none; }
  html.glass-theme .kpi-strip > *, html.glass-theme .kpi-row > * { flex:0 0 auto; min-width:44%; }

  /* ---- 14e. STOP SMALL OVERFLOWS SCALING THE WHOLE PAGE ----------------------
     Blink shrink-to-fit silently zooms the entire document out when anything
     exceeds the viewport, so a 5px overflow costs global legibility (this is the
     same mechanism that rendered /masters at 78%). Two real sources, both of
     which predate this pass and were masked by that scaling. */
  /* A `.w-auto` select sizes to its longest OPTION — one long client name and it
     runs past the screen. Measured 380.8px on /leads. */
  html.glass-theme .app-main .form-select,
  html.glass-theme .app-main .form-control,
  html.glass-theme .app-main select,
  html.glass-theme .app-main input[type="text"],
  html.glass-theme .app-main input[type="search"] { max-width:100%; }
  /* Chip rows inside narrow KPI cards are `d-flex` with nowrap, so the last badge
     is pushed past the card (measured right=404.8px on /payroll). Let them wrap. */
  html.glass-theme .app-main .card .d-flex { flex-wrap:wrap; }
  html.glass-theme .app-main .badge { max-width:100%; overflow:hidden; text-overflow:ellipsis; }
  /* app.css's mobile block gives page-title buttons `flex:1; min-width:0`, so a
     three-button row shrinks each to ~64px while its nowrap label needs up to
     115px and spills out of the button (measured: /expenses 28px, /ops_bookings
     31px of page overflow). Let the row wrap and stop shrinking below content. */
  html.glass-theme .page-title .d-flex { flex-wrap:wrap; }
  html.glass-theme .page-title .btn { flex:1 1 auto; min-width:auto; }
  /* Long unbroken strings — a file path rendered in the activity feed measured
     482px wide and pushed the page out by 100px. Must be `anywhere`, not
     `break-word`, on the inner elements: only `anywhere` reduces intrinsic
     min-content width, which is what stops the ancestor computing itself wide
     enough to hold the whole unbroken string. */
  html.glass-theme .app-main { overflow-wrap:break-word; }
  html.glass-theme .app-main code,
  html.glass-theme .app-main b,
  html.glass-theme .app-main small,
  html.glass-theme .app-main .text-muted { overflow-wrap:anywhere; }
}

/* ---- 14d. LANDSCAPE PHONES --------------------------------------------------
   The shell is gated on WIDTH alone, so a landscape phone reports 844 CSS px,
   passes the 768px test and is served the desktop sidebar with no hamburger —
   a 136px nav peephole in a 390px-tall viewport. Key the shell on height too. */
/* Width bound matters: keyed on height alone this fired on a snapped/half-height
   DESKTOP window (1440x460), hiding the sidebar and stacking two topbars. */
@media (max-height:500px) and (orientation:landscape) and (max-width:926px){
  html.glass-theme aside.sidebar { display:none !important; }
  html.glass-theme .app-main { margin-left:0 !important; }
  html.glass-theme header.topbar.d-md-none { display:flex !important; }
  /* The 16px anti-zoom guard lives in a width query, so rotating the phone
     re-enables iOS zoom-on-focus. Restore it here. */
  html.glass-theme .form-control, html.glass-theme .form-select,
  html.glass-theme .form-control-sm, html.glass-theme .form-select-sm { font-size:16px; }
}
@media (pointer:coarse){
  html.glass-theme .btn, html.glass-theme .btn-sm, html.glass-theme .table .btn-sm, html.glass-theme .pagination .page-link { min-height:44px; }
  html.glass-theme .btn-reveal { min-width:44px; min-height:44px; }
  html.glass-theme .card:hover { transform:none; }
  /* v24: the primary nav rail holds the app's most-used targets — give links,
     group toggles + sublinks the 44px touch floor on ANY coarse pointer (was
     only gated under 768px, so iPads/touch-laptops missed it). */
  html.glass-theme:not(.sidebar-collapsed) .sidebar-link,
  html.glass-theme:not(.sidebar-collapsed) button.sidebar-group,
  html.glass-theme:not(.sidebar-collapsed) .sidebar-sublink { min-height:44px; }
  /* Bulk-select boxes shipped at the 13px UA default — 8.7% of the touch floor,
     ~2.4mm on a phone — and they gate every bulk assign/escalate over 30k leads
     and 40k company_data rows. Size the control, then pad the cell out to 44px
     so the whole cell is the target. */
  /* Must carry .form-check-input to outrank section 16c's `input[type=checkbox]
     .form-check-input { width:19px }` — that rule is (0,0,3,2) and a plain
     `table input[type=checkbox]` is only (0,0,2,3), so it would silently lose. */
  html.glass-theme table input[type="checkbox"],
  html.glass-theme table input[type=checkbox].form-check-input { width:24px; height:24px; }
  html.glass-theme table td:has(> input[type="checkbox"]),
  html.glass-theme table th:has(> input[type="checkbox"]) { padding:11px 10px; }
  /* The tab strip was omitted from the floor too (measured 30.7px). */
  html.glass-theme .nav-tabs .nav-link { min-height:44px; display:flex; align-items:center; }
  /* The floor above is an ENUMERATED list, so any control not named ships at its
     desktop size — seven classes were measured at 30-40px. Make it a floor rather
     than a list. Scoped inside the app body so it cannot touch layout chrome, and
     min-height only (min-width would stretch full-width fields). */
  html.glass-theme .app-main a[href]:not(.badge):not(.text-decoration-none),
  html.glass-theme .app-main button:not(.btn-close),
  html.glass-theme .app-main [role="button"],
  html.glass-theme .app-main select,
  html.glass-theme .app-main input:not([type=checkbox]):not([type=radio]):not([type=hidden]) {
    min-height:44px;
  }
  /* Bare anchors inside table cells have no padding, so min-height alone leaves a
     thin hit box — give them a real one without disturbing inline text flow. */
  html.glass-theme .app-main td > a.btn-sm,
  html.glass-theme .app-main td > a:not(.btn) { display:inline-flex; align-items:center; }
}

/* =========================================================================
   15. Accessibility
   ========================================================================= */
html.glass-theme :focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
@media (prefers-reduced-motion:reduce){
  html.glass-theme * { animation-duration:.001ms !important; transition-duration:.001ms !important; }
}
@media (prefers-contrast:more){
  html.glass-theme .card, html.glass-theme .filter-bar, html.glass-theme fieldset { border-color:rgba(0,0,0,.28); }
  html.glass-theme .text-muted { color:#3f4650 !important; }
}

/* =========================================================================
   16. APPLE-FEEL UPGRADES — research-grounded (HIG + WWDC 2020/2023/2025)
   Materials belong to the NAVIGATION layer only; content stays opaque.
   ========================================================================= */

html.glass-theme {
  /* SF text-style ramp as tokens (density-tuned for a web CRM) */
  --fs-large-title:1.68rem; --fs-title:1.3rem; --fs-title2:1.08rem;
  --fs-headline:.94rem; --fs-callout:.86rem; --fs-subhead:.8rem;
  --fs-footnote:.74rem; --fs-caption:.69rem;
  /* springs (WWDC23): smooth=no overshoot, snappy=slight overshoot */
  --spring-smooth:cubic-bezier(.32,.72,0,1);
  --spring-snappy:cubic-bezier(.34,1.28,.64,1);
  /* label hierarchy (vibrant tiers) */
  --hair-strong:rgba(0,0,0,.16);
}

/* ---- 16a. Type: optical tracking (tighten large, ~0 at body) ---- */
html.glass-theme .page-title h1, html.glass-theme h1 { font-size:var(--fs-large-title); letter-spacing:-.021em; }
html.glass-theme h2, html.glass-theme .h2 { letter-spacing:-.018em; }
html.glass-theme h3, html.glass-theme .h3, html.glass-theme .h5 { letter-spacing:-.014em; }

/* ---- 16b. Capsule tags (HIG: pills for tags/counts) ---- */
html.glass-theme .badge { border-radius:var(--r-pill); padding:.3em .66em; }

/* ---- 16c. Apple checkboxes (all) + iOS switches (labelled form toggles) ---- */
html.glass-theme input[type=checkbox].form-check-input,
html.glass-theme input[type=radio].form-check-input {
  appearance:none; -webkit-appearance:none; background-image:none !important;
  width:19px; height:19px; margin:0; flex:0 0 auto; position:relative; cursor:pointer;
  border:1.5px solid var(--hair-strong); border-radius:6px; background:var(--surface);
  transition:background .16s var(--spring-smooth), border-color .16s var(--spring-smooth);
}
html.glass-theme input[type=radio].form-check-input { border-radius:50%; }
html.glass-theme input[type=checkbox].form-check-input:checked,
html.glass-theme input[type=radio].form-check-input:checked { background:var(--blue); border-color:var(--blue); }
html.glass-theme input[type=checkbox].form-check-input:checked::after {
  content:""; position:absolute; left:5.5px; top:2px; width:4.5px; height:9px;
  border:2px solid #fff; border-top:0; border-left:0; transform:rotate(43deg);
}
html.glass-theme input[type=radio].form-check-input:checked::after { content:""; position:absolute; inset:4px; border-radius:50%; background:#fff; }
html.glass-theme .form-check-input:focus-visible { outline:2px solid var(--blue); outline-offset:2px; box-shadow:none; }
/* tidy the row: flex label + control */
html.glass-theme .form-check { display:flex; align-items:center; gap:9px; padding-left:0; min-height:0; }
html.glass-theme .form-check .form-check-input { float:none; }
html.glass-theme .form-check .form-check-label { margin:0; }
/* labelled toggles → iOS switch (green track, spring knob) */
@supports selector(:has(*)) {
  html.glass-theme .form-check:has(> .form-check-label) input[type=checkbox].form-check-input {
    width:40px; height:24px; border:0; border-radius:var(--r-pill);
    background:#E3E3E8; box-shadow:inset 0 0 0 1px rgba(0,0,0,.05);
    transition:background .3s var(--spring-smooth);
  }
  html.glass-theme .form-check:has(> .form-check-label) input[type=checkbox].form-check-input::after {
    content:""; position:absolute; top:2px; left:2px; width:20px; height:20px; border:0;
    border-radius:50%; background:#fff; transform:none; box-shadow:0 1px 3px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.2);
    transition:transform .32s var(--spring-snappy);
  }
  html.glass-theme .form-check:has(> .form-check-label) input[type=checkbox].form-check-input:checked { background:var(--green); }
  html.glass-theme .form-check:has(> .form-check-label) input[type=checkbox].form-check-input:checked::after { transform:translateX(16px); }
}

/* ---- 16d. Navigation-layer glass (content stays opaque) ---- */
html.glass-theme .dropdown-menu, html.glass-theme .toast {
  background:rgba(252,252,253,.78);
  -webkit-backdrop-filter:saturate(180%) blur(22px); backdrop-filter:saturate(180%) blur(22px);
}
html.glass-theme .modal-content {
  background:rgba(252,252,253,.86);
  -webkit-backdrop-filter:saturate(180%) blur(26px); backdrop-filter:saturate(180%) blur(26px);
}

/* ---- 16e. Data tables: alternating rows + roomier (HIG multicolumn) ---- */
html.glass-theme .table > tbody > tr:nth-child(even) > * { background:rgba(0,0,0,.022); }
html.glass-theme .table-hover > tbody > tr:hover > * { background:var(--blue-tint); }
html.glass-theme .table > :not(caption) > * > * { padding-top:.72rem; padding-bottom:.72rem; }
/* scroll-edge: soft shadow under a pinned header instead of a hard divider */
html.glass-theme .table thead.sticky-top th, html.glass-theme thead.position-sticky th {
  background:rgba(252,252,253,.82); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  box-shadow:0 6px 8px -8px rgba(0,0,0,.25);
}

/* ---- 16f. Spring feedback on press ---- */
html.glass-theme .btn, html.glass-theme .sidebar-link, html.glass-theme .list-group-item-action { transition-timing-function:var(--spring-smooth); }
html.glass-theme .btn:active { transition-duration:.05s; }

/* ---- 16g. @supports fallback: opaque overlays where no backdrop-filter ---- */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  html.glass-theme .dropdown-menu, html.glass-theme .toast, html.glass-theme .modal-content { background:var(--surface); }
}

/* =========================================================================
   17. INSET GROUPED FORMS — Settings-style (HIG: grouped inset list for forms)
   Scope: ONLY the main edit forms (form.card.p-3). col-md-* labeled fields become
   label-left / value-right rows inside a white grouped card on the grouped
   background; col-12 (buttons, wide textareas) stay full-width. Filter bars
   (.filter-bar) and inline action forms are untouched.
   ========================================================================= */
html.glass-theme form.card.p-3 {
  background:transparent !important; border:0 !important; box-shadow:none !important; padding:0 !important;
}
html.glass-theme form.card.p-3 fieldset { border:0; padding:0; margin:0; }
/* the field grid → a grouped inset card */
html.glass-theme form.card.p-3 [class*="row g-"] {
  --bs-gutter-x:0; --bs-gutter-y:0; margin:0 0 14px;
  background:var(--surface); border:1px solid var(--hair); border-radius:var(--r-card);
  box-shadow:var(--e1); overflow:hidden;
}
/* labeled field → label-left / value-right row with hairline separator */
html.glass-theme form.card.p-3 [class*="col-md-"] {
  width:100% !important; max-width:100% !important; flex:0 0 100% !important;  /* default: 1 field/row, roomy value (iPad-friendly) */
  display:grid !important; grid-template-columns:minmax(120px,24%) 1fr; align-items:center;
  column-gap:18px; row-gap:3px; padding:10px 18px; border-top:1px solid var(--hair-2);
}
html.glass-theme form.card.p-3 [class*="col-md-"]:nth-child(1) { border-top:0; }
/* desktop (lg+): two fields per row */
@media (min-width:992px){
  html.glass-theme form.card.p-3 [class*="col-md-"] {
    width:50% !important; max-width:50% !important; flex:0 0 50% !important;
    grid-template-columns:minmax(96px,34%) 1fr; column-gap:16px;
  }
  html.glass-theme form.card.p-3 [class*="col-md-"]:nth-child(2) { border-top:0; }
}
html.glass-theme form.card.p-3 [class*="col-md-"] > .form-label {
  grid-column:1; margin:0; align-self:center; color:var(--ink); font-weight:500; font-size:var(--fs-callout);
}
html.glass-theme form.card.p-3 [class*="col-md-"] > .form-control,
html.glass-theme form.card.p-3 [class*="col-md-"] > .form-select,
html.glass-theme form.card.p-3 [class*="col-md-"] > textarea.form-control {
  grid-column:2; max-width:none; width:100%; justify-self:stretch;
}
html.glass-theme form.card.p-3 [class*="col-md-"] > .form-text { grid-column:2; margin:0; }
html.glass-theme form.card.p-3 [class*="col-md-"] > .form-check,
html.glass-theme form.card.p-3 [class*="col-md-"] > .input-group { grid-column:2; align-self:center; }
/* button rows + wide (col-12) blocks: full width, no card, padded to align */
html.glass-theme form.card.p-3 .col-12 { padding:12px 18px 0; }
html.glass-theme form.card.p-3 .col-12 .form-label { display:block; margin-bottom:6px; }
html.glass-theme form.card.p-3 > .mt-3, html.glass-theme form.card.p-3 .row .col-12.mt-2,
html.glass-theme form.card.p-3 .row .col-12.mt-3 { padding:6px 0 0; }
/* inset forms: stack label-above on phones for comfortable data entry */
@media (max-width:767.98px){   /* phones: stack label above the input */
  html.glass-theme form.card.p-3 [class*="col-md-"] { grid-template-columns:1fr; row-gap:5px; padding:11px 15px; }
  html.glass-theme form.card.p-3 [class*="col-md-"] > * { grid-column:auto !important; }   /* undo label/value column pinning so they stack */
  html.glass-theme form.card.p-3 [class*="col-md-"] > .form-label { font-size:var(--fs-footnote); color:var(--ink-2); }
  html.glass-theme form.card.p-3 [class*="col-md-"] > .form-control,
  html.glass-theme form.card.p-3 [class*="col-md-"] > .form-select { max-width:none; }
}

/* =========================================================================
   18. Sidebar section headers (Finder-style grouping) — UAT markup adds them
   ========================================================================= */
/* Single source of truth for section labels (v24): left=18px puts the caps
   header on the same spine as the icon left edge (link margin 8 + padding 10);
   11px/.72 opacity is the crisper, AA-safe type the v23 pass intended. */
html.glass-theme .sidebar-section { padding:15px 10px 5px 18px; margin-top:2px; }
html.glass-theme .sidebar-nav > .sidebar-section:first-child { margin-top:0; padding-top:2px; }
html.glass-theme .sidebar-section span {
  font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--chrome-ink-2); opacity:.72;
}
/* collapsed icon-rail: hide the label, show a hairline divider instead */
html.glass-theme.sidebar-collapsed .sidebar-section { padding:7px 14px; margin:0; }
html.glass-theme.sidebar-collapsed .sidebar-section span { display:none; }
html.glass-theme.sidebar-collapsed .sidebar-section::after { content:""; display:block; height:1px; background:var(--chrome-line); }

/* =========================================================================
   19. Dashboard — Apple search field + refined stat tiles
   ========================================================================= */
/* Apple-style search field: capsule, subtle fill, inset magnifier */
html.glass-theme input[type=search].form-control {
  background-color:var(--surface-2); border:1px solid transparent; border-radius:var(--r-pill);
  padding-left:2.3rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%238A9099' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='4.4'/%3E%3Cline x1='10.7' y1='10.7' x2='14' y2='14'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:.82rem center; background-size:15px;
}
html.glass-theme input[type=search].form-control:focus {
  background-color:var(--surface); border-color:var(--blue); box-shadow:0 0 0 3.5px var(--blue-tint);
}
html.glass-theme input[type=search]::-webkit-search-cancel-button { -webkit-appearance:none; appearance:none; }
/* slim the client-search card */
html.glass-theme #clientSearch { max-width:520px; }
/* stat tiles — tighter, number prominent (Apple widget feel) */
html.glass-theme .row.g-3 > [class*="col-"] > .card.p-3 { padding:13px 16px !important; }
html.glass-theme .card.p-3 .text-muted.small:first-child { margin-bottom:1px !important; font-size:.635rem; }
html.glass-theme .card.p-3 .fs-3 { font-size:1.72rem !important; letter-spacing:-.025em; line-height:1.15; }
/* the client-search result popover reads as a floating menu */
html.glass-theme #clientSearchResults.list-group {
  box-shadow:var(--e2); border:1px solid var(--hair); border-radius:var(--r-card); overflow:hidden;
}
html.glass-theme #clientSearchResults .list-group-item { border-left:0; border-right:0; }
/* client-search: field on the ground, not a boxed card */
html.glass-theme .card:has(#clientSearch) { background:transparent; border:0; box-shadow:none; }
html.glass-theme .card:has(#clientSearch) > .card-body { padding:0; }
html.glass-theme .card:has(#clientSearch) > .card-body > .form-label { margin-bottom:6px; }
/* single-field filter bar (dashboard Branch): compact inline control, not a full card */
html.glass-theme form.filter-bar:has(.row > [class*="col-"]:only-child) {
  padding:0; background:transparent; border:0; box-shadow:none; margin-bottom:8px !important;
}
html.glass-theme form.filter-bar:has(.row > [class*="col-"]:only-child) > .row { margin:0; }
html.glass-theme form.filter-bar:has(.row > [class*="col-"]:only-child) [class*="col-"] { flex:0 0 auto; width:auto; max-width:none; padding:0; }
html.glass-theme form.filter-bar:has(.row > [class*="col-"]:only-child) .form-select { width:240px; }

/* =========================================================================
   20. Large-title collapse — page title fades into the sticky top bar on scroll
   ========================================================================= */
html.glass-theme .topbar-title {
  font-size:15px; font-weight:600; letter-spacing:-.015em; color:var(--ink);
  opacity:0; transform:translateY(3px); transition:opacity .24s var(--ease), transform .24s var(--ease);
  pointer-events:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:56%;
}
html.glass-theme .topbar-desktop.title-visible .topbar-title { opacity:1; transform:none; }

/* =========================================================================
   21. Tappable list rows + segmented controls (from Bootstrap nav-tabs)
   ========================================================================= */
html.glass-theme .row-nav { cursor:pointer; }

html.glass-theme .nav-tabs {
  border-bottom:0; background:var(--surface-2); border-radius:9px; padding:3px;
  display:inline-flex; gap:2px; vertical-align:middle;
}
html.glass-theme .nav-tabs .nav-item { margin:0; }
html.glass-theme .nav-tabs .nav-link {
  border:0; border-radius:7px; color:var(--ink-2); font-weight:500;
  padding:.34rem .9rem; font-size:var(--fs-subhead); letter-spacing:-.006em;
  transition:background .18s var(--ease), color .18s var(--ease);
}
html.glass-theme .nav-tabs .nav-link:hover { border:0; color:var(--ink); background:rgba(0,0,0,.035); }
html.glass-theme .nav-tabs .nav-link.active {
  background:var(--surface); color:var(--ink);
  box-shadow:0 1px 3px rgba(0,0,0,.14), 0 0 0 .5px rgba(0,0,0,.05);
}

/* =========================================================================
   22. Compact wide list tables — fit the viewport, no horizontal scroll
   Main width driver is the action column (Call/WhatsApp buttons with text +
   Log/Open held on one nowrap line). Icon-only the comms buttons, tighten the
   rest, shrink font/padding, let long text wrap.
   ========================================================================= */
/* Real LAPTOP/DESKTOP ONLY (>=992px AND a mouse/trackpad with hover). Touch
   devices — every iPad in portrait OR landscape (incl. iPad Pro at 1024-1366px),
   and all phones — keep the table at normal size and scroll it left/right, the
   correct touch pattern. The hover+pointer test excludes iPads regardless of
   width; compacting them cramped the text. */
@media (min-width:992px) and (hover:hover) and (pointer:fine){
  html.glass-theme .table-responsive .table { font-size:.82rem; }
  html.glass-theme .table-responsive .table > :not(caption) > * > * { padding:.6rem .55rem; vertical-align:middle; }
  html.glass-theme .table-responsive .table th { font-size:.68rem; }
  /* icon-only Call / WhatsApp; tighter action buttons */
  html.glass-theme .table-responsive .btn-call > .ms-1,
  html.glass-theme .table-responsive .btn-whatsapp > .ms-1 { display:none; }
  html.glass-theme .table-responsive .btn-sm { padding:.28rem .5rem; font-size:.72rem; }
  html.glass-theme .table-responsive .btn-call, html.glass-theme .table-responsive .btn-whatsapp { padding:.3rem .44rem; }
}

/* ALL devices — rows stay tidy: each cell is ONE line (no wrapping into a tall
   stack); cells built from stacked <div>s still show their natural ~2 lines. When
   content is long the column stays wide, so .table-responsive scrolls left/right
   and you can see everything. Applies to iPad (portrait + landscape) + laptop.
   (display:-webkit-box line-clamp can't be used here — it breaks table columns.) */
html.glass-theme .table-responsive .table > tbody > tr > td { white-space:nowrap; overflow-wrap:normal; word-break:normal; }
/* cells that are meant to hold prose (a wrapping div/■ inside) may opt back in */
html.glass-theme .table-responsive .table > tbody > tr > td .text-wrap { white-space:normal; }
/* LAPTOP/DESKTOP ONLY: cells wrap so the whole table fits the viewport — NO
   left/right scroll on laptop. Touch devices (iPad, phones) keep the single-line
   + horizontal-scroll behaviour above. This override comes after the nowrap rule
   so it wins at laptop widths with a mouse. */
@media (min-width:992px) and (hover:hover) and (pointer:fine){
  html.glass-theme .table-responsive .table > tbody > tr > td { white-space:normal; overflow-wrap:anywhere; }
}

/* =========================================================================
   23. Smoothness & motion polish — tactile press, spring overlays, smooth scroll
   Makes state changes feel physical + fluid (the "alive" Apple quality).
   ========================================================================= */
/* Tactile press: pill/button controls depress slightly (spring back) */
html.glass-theme .btn { transition:background .18s var(--spring-smooth), border-color .18s var(--spring-smooth), color .18s var(--spring-smooth), box-shadow .18s var(--spring-smooth), transform .14s var(--spring-snappy); }
html.glass-theme .btn:active { transform:scale(.97); transition-duration:.04s; }
html.glass-theme .nav-tabs .nav-link:active, html.glass-theme .page-link:active { transform:scale(.96); }
/* tap feedback on tappable list rows */
html.glass-theme .row-nav { transition:background .14s var(--ease); }
html.glass-theme .row-nav:active > * { background:var(--blue-tint); }

/* Spring pop-in for the navigation layer (Bootstrap doesn't animate these) */
@keyframes glassPop { from{opacity:0; transform:scale(.96) translateY(-6px);} to{opacity:1; transform:none;} }
html.glass-theme .dropdown-menu.show { animation:glassPop .2s var(--spring-snappy) both; transform-origin:top center; will-change:transform,opacity; }
html.glass-theme .popover.show, html.glass-theme .toast.show { animation:glassPop .2s var(--spring-snappy) both; }

/* Smooth programmatic + anchor scrolling */
html.glass-theme { scroll-behavior:smooth; }

/* Consistent easing on the remaining interactive bits */
html.glass-theme a:not(.btn):not(.nav-link):not(.sidebar-link):not(.sidebar-sublink),
html.glass-theme .badge,
html.glass-theme .list-group-item-action {
  transition:color .16s var(--ease), background-color .16s var(--ease), box-shadow .16s var(--ease);
}

@media (prefers-reduced-motion: reduce){
  html.glass-theme { scroll-behavior:auto; }
  html.glass-theme .dropdown-menu.show, html.glass-theme .popover.show, html.glass-theme .toast.show { animation:none; }
  html.glass-theme .btn:active, html.glass-theme .nav-tabs .nav-link:active, html.glass-theme .page-link:active { transform:none; }
}

/* =========================================================================
   4c. Sidebar v24 — second-pass corrections from the multi-lens design review
   (2026-07-19). Deliberately at the FILE END so each rule provably WINS the
   cascade (the v23 lesson: a later duplicate silently overrode the section
   labels). All within-navy, html.glass-theme-scoped, kill-switchable.
   ========================================================================= */

/* Log out pill — the last leaked OLD bright gold (gold border + #B59355 hover
   flood-fill); the theme had only restyled the generic .sidebar-action.
   Neutralise to the same white-on-navy as the footer card. */
html.glass-theme .sidebar-action-primary {
  border:1px solid var(--chrome-line); background:rgba(255,255,255,.04); color:var(--chrome-ink-2);
}
html.glass-theme .sidebar-action-primary:hover {
  background:rgba(255,255,255,.08); color:var(--chrome-ink); border-color:rgba(255,255,255,.14);
}

/* Open (expanded) non-active group had a DEAD hover — the v23 resting rule
   out-specified the generic :hover. Restore the light wash (this selector at
   (0,5,2) beats the (0,4,2) resting rule). */
@media (hover:hover) and (pointer:fine){
  html.glass-theme button.sidebar-group[aria-expanded="true"]:not(.active):hover {
    background:rgba(255,255,255,.06); color:var(--chrome-ink);
  }
}

/* Long labels must truncate, not wrap (the rail is drag-resizable to 200px) —
   footer/username already ellipsize; the nav labels did not, so a long label
   wrapped to a 2nd line and broke the fixed row rhythm. */
html.glass-theme .sidebar-label,
html.glass-theme .sidebar-sublink-label {
  min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
html.glass-theme .sidebar-link, html.glass-theme .sidebar-sublink { min-width:0; }

/* Keyboard focus ring — the global blue (#3B82F6) is a foreign colour on the
   navy rail; use a white ring that belongs to the chrome (content area keeps
   the blue). Targets the nav classes directly so it covers the mobile drawer too. */
html.glass-theme .sidebar-link:focus-visible,
html.glass-theme .sidebar-sublink:focus-visible,
html.glass-theme .sidebar-action:focus-visible,
html.glass-theme .sidebar-user-card:focus-visible,
html.glass-theme .sidebar-brand-link:focus-visible,
html.glass-theme .sidebar-toggle:focus-visible {
  outline:2px solid rgba(255,255,255,.6); outline-offset:2px;
}

/* The lone surviving gold accent (active-item icon) read olive/muddy at the
   dim #9C7A3C (~3.15:1 on the chip). Lift WITHIN the same muted hue so it reads
   as intentional brand gold — the white label + chip still carry selection. */
html.glass-theme .sidebar-link.active .sidebar-icon { color:#C89B4E; }

/* Tactile press — every other control depresses on :active; the nav layer had
   none. Quiet white overlay + micro-scale, within-navy. */
html.glass-theme .sidebar-link:active,
html.glass-theme .sidebar-sublink:active,
html.glass-theme .sidebar-action:active,
html.glass-theme button.sidebar-group:active,
html.glass-theme .sidebar-user-card:active {
  background:rgba(255,255,255,.15); transform:scale(.985); transition-duration:.04s;
}
html.glass-theme .sidebar-link.active:active { background:rgba(255,255,255,.17); }

/* Brand logo hover glow was a warm gold halo — neutralise to a plain shadow. */
html.glass-theme .sidebar-brand-link:hover .brand-logo { filter:drop-shadow(0 2px 6px rgba(0,0,0,.5)); }

/* Footer action buttons inherited app.css transition:all/160ms — match the nav
   rows' named-prop .18s so the whole rail animates in step. */
html.glass-theme .sidebar-action { transition:background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease); }

@media (prefers-reduced-motion: reduce){
  html.glass-theme .sidebar-link:active,
  html.glass-theme .sidebar-sublink:active,
  html.glass-theme .sidebar-action:active,
  html.glass-theme button.sidebar-group:active,
  html.glass-theme .sidebar-user-card:active { transform:none; }
}

/* =========================================================================
   24. v25 — table / header / profile corrections from the multi-lens review
   (2026-07-19). Appended at file END so each rule provably WINS the cascade.
   Theme-scoped, kill-switchable, within the Apple system.
   ========================================================================= */

/* v27 (2026-07-19) — REVERTED the v25/v26 flattening of the STATUS + SOURCE
   pills. Founder: the distinct colour-coded pills are USEFUL — status must read
   by colour at a glance, so keep them SATURATED (white-on-hue), NOT pale tints.
   There is deliberately NO html.glass-theme override for .badge-st-* / .badge-src-*
   here, so the app.css saturated palette shows through on prod, carrying the
   founder's 2026-07-19 colours: convert=GREEN · interest=BLUE · suspect=RED ·
   not-picked=ORANGE · not-interested=BLACK · dead=RED · assigned=INDIGO (off blue) ·
   company_data source=DEEP-ORANGE (distinct from not-picked's amber). Only the
   generic Bootstrap .badge.bg-* utility pills (assignee code, escalated, account
   status) stay flattened by §9 — those aren't semantic status colours. */

/* Role badges (Users page only) stay quiet tints — a role isn't a status. */
html.glass-theme .badge-role-admin      { background:var(--gold-tint)!important; color:var(--gold-ink)!important; border:0!important; }
html.glass-theme .badge-role-associate  { background:var(--blue-tint)!important; color:var(--blue-ink)!important; border:0!important; }

/* #2/#11 — desktop bell: the navy-bar .topbar-btn (pale gold #E8C98A !important)
   was ~1.4:1 on the light desktop strip. Re-skin ONLY inside .topbar-desktop to
   match the adjacent profile chip; the navy mobile bar is untouched. */
html.glass-theme .topbar-desktop .topbar-btn {
  color:var(--ink-2)!important; background:var(--surface); border:1px solid var(--hair); box-shadow:var(--e1);
}
html.glass-theme .topbar-desktop .topbar-btn .icon { color:inherit!important; }
@media (hover:hover) and (pointer:fine){
  html.glass-theme .topbar-desktop .topbar-btn:hover,
  html.glass-theme .topbar-desktop .topbar-btn:focus { color:var(--ink)!important; background:var(--surface-2)!important; border-color:var(--hair); }
}

/* #16 — reconcile the header band height: desktop strip was 56px vs the mobile
   bar's 64px. Match them so the header reads as one system across breakpoints. */
html.glass-theme .topbar-desktop { height:64px; }

/* #10/#15 — row hover: the theme's .table-hover rules never fire (markup sets no
   .table-hover), so prod showed app.css's leftover OLD-gold wash. Give a real,
   quiet BLUE hover (interaction=blue), lighter than the selection-strength
   blue-tint so it doesn't fight the zebra. */
html.glass-theme .table > tbody > tr:hover > * { background:rgba(59,130,246,.06); }

/* #19 — thead vertical padding: app.css forces .85rem !important (~2px taller
   than the body rhythm). Bring it in line. */
html.glass-theme .table thead th,
html.glass-theme .table thead.table-light th { padding-top:.6rem!important; padding-bottom:.6rem!important; }

/* #7/#18 — kill the decorative 48px gold tick under every page H1 (the AI
   "accent underline" tell, and in the OLD gold). Keep the quiet hairline. */
html.glass-theme .page-title::after { display:none; }

/* #5/#8/#12 — /profile hero avatar: match the topbar chip's gold-tint disc
   (was hardcoded OLD navy/gold inline; !important reaches past the neutral
   inline fallback the markup now carries). */
html.glass-theme .profile-avatar { background:var(--gold-tint)!important; color:var(--gold-ink)!important; box-shadow:inset 0 0 0 1px rgba(156,122,60,.28); }