/* Extracted from docs/pro/dashboard.html (Rock 4 Phase 2 continuation).
   Load order matters: this file replaces the inline <style> block that sat
   at the same position in <head>; keep the <link> tags in dashboard.html in
   their original slots relative to theme-system.css and each other. */
/* Theme variables set by [data-theme] system — see <style id="theme-system"> */
/* Fallback defaults (overridden by theme-system) */
:root {
  --orange:#e8720c; --ob:#f08030; --og:color-mix(in srgb, var(--orange) 22%, transparent);
  --bg:#0A0C0F; --s:#111418; --s2:#181C22; --s3:#1E2229;
  --br:rgba(255,255,255,.07); --t:#E8EAF0; --m:#6B7280;
  --blue:#4A9EFF; --green:#2ECC8A; --purple:#9B6DFF; --red:#E05252; --gold:#D4A017;
  --paper:var(--s3); --ink:var(--t); --rule:rgba(255,255,255,.09);
}
/* Z-INDEX TOKENS — single source of truth so modal/toast/banner stacking
   stays predictable. Replaces the 99999 / 99998 / 9999 sprinkled across
   ~30 inline styles. Higher number = closer to the user. Leave a 100-step
   gap between layers so per-component overrides don't collide. */
:root{
  --z-base:1;
  --z-sticky:50;        /* sticky headers, kanban column tops, action bars */
  --z-dropdown:200;     /* dropdowns, popovers, autocomplete */
  --z-overlay:1000;     /* drag-shields, scroll-locks */
  --z-modal:9000;       /* dialogs and bottom sheets */
  --z-toast:9100;       /* toasts above modals */
  --z-banner:9500;      /* trial banner, offline banner */
  --z-loader:9900;      /* full-screen loaders */
  --z-emergency:9999;   /* truly above everything */
}
/* ══ DESIGN TOKENS (Wave 4 2026-05-14) ════════════════════════════════
   Typography, spacing, radius, and tap-target scales. New components
   pull from these; legacy inline styles (~1,145 of them across the
   tree) get retired incrementally — each follow-up PR can replace
   a swath without breaking what's already on tokens. The scale ratio
   is roughly 1.25 for type, +2px for spacing.

   Why we're not retiring everything in one go:
     - Some inline styles encode SEMANTIC overrides (stage colors,
       conditional badges) that need per-replacement review.
     - Atomic blast radius: if a token tweak regresses a surface,
       only token-using components rerender, not the entire app. */
:root{
  /* Type scale — pixel values, not rem, to stay consistent with the
     existing codebase which is already entirely pixel-anchored. */
  --fs-2xs:9px;     /* eyebrows, badges, density chips */
  --fs-xs:10px;     /* tab labels, mn-lbl, tiny captions */
  --fs-sm:11px;     /* secondary text, kc-tag, hdr-stat */
  --fs-md:12px;     /* body small, kc-addr */
  --fs-base:13px;   /* default body */
  --fs-lg:14px;     /* body large */
  --fs-xl:16px;     /* iOS minimum input size; section titles */
  --fs-2xl:18px;    /* modal titles */
  --fs-3xl:22px;    /* card counts, big numbers */
  --fs-4xl:24px;    /* mobile hero name */

  /* Spacing scale — even pixels, predictable.                      */
  --sp-0:0;
  --sp-1:2px;
  --sp-2:4px;
  --sp-3:6px;
  --sp-4:8px;
  --sp-5:10px;
  --sp-6:12px;
  --sp-7:14px;
  --sp-8:16px;
  --sp-10:20px;
  --sp-12:24px;
  --sp-16:32px;

  /* Radius — six steps from hairline pills to full circles.        */
  --r-xs:4px;
  --r-sm:6px;
  --r-md:8px;
  --r-lg:12px;
  --r-xl:16px;
  --r-2xl:20px;
  --r-full:50%;

  /* Tap targets — Apple HIG minimums on mobile chrome.             */
  --tap-min:44px;

  /* Transitions — reuse so animation timing stays consistent.      */
  --t-fast:.12s;
  --t-mid:.18s;
  --t-slow:.32s;
  --ease-out:cubic-bezier(.18,.89,.32,1.28);

  /* ── Wave 5 accent contract moved to docs/pro/css/theme-system.css ──
     in Wave 6 (A.1) so customer.html / login.html / vault.html inherit
     the same --accent-fg / --accent-ring contract automatically. See
     the "Shared accent contrast contract" block near the bottom of
     theme-system.css for the per-theme overrides. */
}
*{margin:0;padding:0;box-sizing:border-box;}
/* Global iOS auto-zoom kill: any focused input under 16px triggers Mobile
   Safari to zoom the viewport in, dismiss the keyboard, then zoom back —
   dizzying in the field. Forcing the computed font-size to at least 16px
   on iOS-sized viewports prevents that behaviour and overrides the 24+
   scoped rules that previously set 11–13px on individual fields. */
@media (max-width:900px){
  input,select,textarea{font-size:max(16px,1em)!important;}
}
body{font-family:'Barlow',sans-serif;background:var(--bg);color:var(--t);height:100vh;height:100dvh;overflow:hidden;display:flex;flex-direction:column;touch-action:pan-x pan-y pinch-zoom;-webkit-overflow-scrolling:touch;-webkit-tap-highlight-color:transparent;}

/* HEADER */
header{flex-shrink:0;background:rgba(10,12,15,.97);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--br);display:flex;align-items:center;justify-content:space-between;padding:0 18px;height:52px;z-index:1000;}
.logo{font-family:'Barlow Condensed',sans-serif;font-size:17px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;}
.logo span{color:var(--orange);}
.logo-mark{width:36px;height:36px;background:var(--orange);border-radius:6px;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed',sans-serif;font-size:14px;font-weight:800;color:var(--accent-fg);letter-spacing:.5px;flex-shrink:0;}
.hbadge{font-family:'Barlow Condensed',sans-serif;font-size:9px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--orange);border:1px solid var(--orange);padding:2px 7px;border-radius:2px;margin-left:8px;}
.hright{display:flex;align-items:center;gap:10px;}
.upill{display:flex;align-items:center;gap:7px;background:var(--s2);border:1px solid var(--br);border-radius:20px;padding:4px 11px 4px 5px;cursor:pointer;}
.upill:hover{border-color:var(--orange);}
.av{width:24px;height:24px;background:var(--orange);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;}
.uname{font-size:12px;font-weight:500;}
.so{font-size:11px;color:var(--m);background:none;border:none;cursor:pointer;transition:color .2s;}
.so:hover{color:var(--orange);}

/* ══ PRO CHROME — icon system + header tools (2026-05-14) ══════════════
   Replaces the inline-styled emoji buttons in the global <header> with a
   real icon system. `.nbd-icon` is the universal 16×16 inline-SVG glyph
   (uses `currentColor` so it inherits theme/orange/muted). `.hdr-tool` is
   the wrapper button — transparent, square hit target, hover lifts the
   color from muted to text. Same shape as `.crm-icon-btn` so the
   pipeline header and the global header read as one design language.

   Brand stays orange-keyed: the wrapper paints `currentColor` from
   `var(--m)` (muted) at rest and `var(--t)` (text, often orange-tinted)
   on hover. We don't blue-ify into JobNimbus — orange is NBD's identity.

   Decorative emojis on cards / chips / stage headers stay where they
   carry MEANING (storm icon on a hail card, due-warning on a stale lead).
   This rule only retires emoji from chrome (headers, nav buttons,
   tab labels) where they were Unicode codepoints standing in for icons. */
.nbd-icon{
  display:inline-block; width:16px; height:16px;
  fill:none; stroke:currentColor; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
  vertical-align:middle; flex-shrink:0;
}
.nbd-icon-sm{ width:14px; height:14px; }
.nbd-icon-lg{ width:18px; height:18px; }

.hdr-tool{
  display:inline-flex; align-items:center; justify-content:center;
  position:relative;
  width:30px; height:30px;
  padding:0; background:transparent;
  border:none; border-radius:6px;
  color:var(--m); cursor:pointer;
  transition:color .15s, background .15s;
  line-height:1; font-family:inherit;
}
.hdr-tool:hover{ color:var(--t); background:color-mix(in srgb, var(--t) 8%, transparent); }
.hdr-tool:focus-visible{ outline:2px solid var(--orange); outline-offset:1px; }
.hdr-tool .hdr-tool-badge{
  position:absolute; top:2px; right:2px;
  background:var(--red); color:var(--t);
  font-size:9px; font-weight:700;
  border-radius:8px; padding:1px 4px;
  min-width:16px; text-align:center; line-height:1.2;
  pointer-events:none;
}
/* Divider between activity tools (recent / notifs) and prefs tools
   (theme / settings / guide). Lighter than R5.7 was — calmer chunking. */
.hdr-tool-divider{
  display:inline-block; width:1px; height:16px;
  background:var(--br); margin:0 4px;
  opacity:.5;
}
/* Desktop-only header tools (theme/settings/guide + divider). Collapsed
   into the mobile kebab menu at ≤768px to reclaim header real-estate.
   Recent + Notifications stay visible on mobile because they carry
   live status badges reps glance at. */
.hdr-tools-mobile-only{ display:none; }
.hdr-mobile-menu{
  display:none;
  position:absolute; top:calc(100% + 6px); right:0;
  min-width:200px; padding:6px;
  background:var(--s2); border:1px solid var(--br); border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  z-index:9999;
}
.hdr-mobile-menu.open{ display:block; }
.hdr-mobile-menu button{
  display:flex; align-items:center; gap:10px;
  width:100%; text-align:left;
  background:transparent; border:none; border-radius:5px;
  padding:10px 12px; font-size:13px; color:var(--t);
  cursor:pointer; font-family:inherit;
  min-height:40px;
}
.hdr-mobile-menu button:hover,
.hdr-mobile-menu button:focus-visible{
  background:var(--s3); color:var(--orange); outline:none;
}
.hdr-mobile-menu .nbd-icon{ color:var(--m); flex-shrink:0; }
.hdr-mobile-menu button:hover .nbd-icon{ color:var(--orange); }
/* ══ MOBILE JOB-DETAIL (Wave 2B) ════════════════════════════════════
   Full-screen on mobile (≤768px). z-index above #mobile-nav (1900)
   but below toast (3000+). Hidden by default via [hidden]; .open
   flips it on. NBD-orange brand kept — JobNimbus is monochrome blue,
   we stay orange-accented so the brand identity holds. */
.m-jobdetail{
  position:fixed; inset:0;
  background:var(--bg);
  z-index:2100;
  display:none; flex-direction:column;
  -webkit-overflow-scrolling:touch;
  font-family:'Barlow',sans-serif;
}
.m-jobdetail.open{ display:flex; }
.m-jobdetail[hidden]{ display:none; }
.m-jobdetail.open[hidden]{ display:none; }

/* Top bar — sticky, frosted */
.m-jd-topbar{
  position:sticky; top:0; z-index:2;
  display:flex; align-items:center; gap:8px;
  padding:env(safe-area-inset-top, 8px) 12px 8px;
  background:color-mix(in srgb, var(--bg) 92%, transparent);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--br);
  min-height:calc(44px + env(safe-area-inset-top, 0px));
}
.m-jd-icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; padding:0;
  background:transparent; border:none; border-radius:8px;
  color:var(--t); cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.m-jd-icon-btn:active{ background:color-mix(in srgb, var(--t) 8%, transparent); }
.m-jd-chips{
  flex:1; display:flex; gap:6px; min-width:0;
  align-items:center; justify-content:center;
}
.m-jd-status{
  flex:1 1 auto; min-width:0; text-align:center;
  font-family:'Barlow Condensed',sans-serif;
  font-size:11px; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--orange);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  padding:6px 10px; border-radius:14px;
  background:color-mix(in srgb, var(--orange) 14%, transparent);
  /* Reset button defaults — the chips are <button> for the tap-to-pick UX */
  border:1px solid color-mix(in srgb, var(--orange) 30%, transparent);
  font-family:'Barlow Condensed',sans-serif; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:transform .1s, filter .15s;
}
.m-jd-status:active{ transform:scale(.96); }
.m-jd-status:hover{ filter:brightness(1.1); }
.m-jd-jobtype{
  /* Type chip inherits .m-jd-status sizing but its color is rewritten at
     populate-time from JOB_TYPE_META, so the default tint here just keeps
     the empty state visible. */
  color:var(--m);
  background:color-mix(in srgb, var(--m) 12%, transparent);
  border-color:color-mix(in srgb, var(--m) 28%, transparent);
}
.m-jd-edit{
  background:transparent; border:none;
  color:var(--orange); font-weight:700; font-size:13px;
  padding:8px 10px; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

/* Scroll body — everything below the top bar */
.m-jd-scroll{
  flex:1; overflow-y:auto;
  padding-bottom:calc(80px + env(safe-area-inset-bottom, 0px));
}

/* Hero — property photo or empty placeholder */
.m-jd-hero{
  position:relative;
  height:200px;
  background:var(--s2) center/cover no-repeat;
  border-bottom:1px solid var(--br);
}
.m-jd-hero-empty{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  color:var(--m); font-size:12px; padding:0 24px; text-align:center;
}
.m-jd-hero.has-photo .m-jd-hero-empty{ display:none; }
.m-jd-storm{
  position:absolute; top:12px; left:12px;
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(220, 38, 38, .92); color:#fff;
  font-size:11px; font-weight:700;
  padding:5px 10px; border-radius:14px;
  box-shadow:0 2px 8px rgba(0,0,0,.4);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.m-jd-storm::before{ content:'⛈'; font-size:13px; }

/* Title block */
.m-jd-title-block{
  padding:18px 18px 12px;
  display:flex; flex-direction:column; gap:6px;
}
.m-jd-name{
  margin:0;
  font-family:'Barlow Condensed',sans-serif;
  font-size:var(--fs-4xl); font-weight:800; letter-spacing:.01em;
  color:var(--t); line-height:1.15;
}
.m-jd-addr{
  display:flex; align-items:center; gap:var(--sp-3);
  font-size:var(--fs-base); color:var(--m); line-height:1.3;
}
.m-jd-addr .nbd-icon{ flex-shrink:0; color:var(--m); }
.m-jd-value{
  align-self:flex-start;
  font-family:'Barlow Condensed', ui-monospace, sans-serif;
  font-size:14px; font-weight:800;
  color:var(--orange);
  padding:4px 10px;
  background:color-mix(in srgb, var(--orange) 14%, transparent);
  border-radius:14px;
  margin-top:4px;
  font-variant-numeric:tabular-nums;
}

/* Action ring — 5 circular buttons in a row */
.m-jd-actions{
  display:flex; justify-content:space-around; align-items:flex-start;
  padding:8px 12px 18px;
  border-bottom:1px solid var(--br);
}
.m-jd-act{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  background:transparent; border:none;
  padding:6px 4px; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  flex:1; min-width:0;
}
.m-jd-act-ring{
  display:flex; align-items:center; justify-content:center;
  width:50px; height:50px;
  border-radius:50%;
  background:color-mix(in srgb, var(--orange) 14%, transparent);
  color:var(--orange);
  transition:transform .15s ease, background .15s;
}
.m-jd-act-ring .nbd-icon{ width:22px; height:22px; }
.m-jd-act:active .m-jd-act-ring{
  transform:scale(.94);
  background:color-mix(in srgb, var(--orange) 22%, transparent);
}
.m-jd-act:disabled{ opacity:.45; cursor:not-allowed; }
.m-jd-act-lbl{
  font-family:'Barlow Condensed',sans-serif;
  font-size:var(--fs-xs); font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--m);
  white-space:nowrap;
}

/* Tabs — JobNimbus 3-tab pattern */
.m-jd-tabs{
  display:flex;
  border-bottom:1px solid var(--br);
  background:var(--bg);
  position:sticky; top:calc(44px + env(safe-area-inset-top, 0px));
  z-index:1;
}
.m-jd-tab{
  flex:1; background:transparent; border:none;
  padding:14px 8px; cursor:pointer;
  font-family:'Barlow Condensed',sans-serif;
  font-size:12px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--m);
  border-bottom:2px solid transparent;
  -webkit-tap-highlight-color:transparent;
  transition:color .15s, border-color .15s;
}
.m-jd-tab.active{ color:var(--orange); border-bottom-color:var(--orange); }

/* Tab bodies */
.m-jd-tab-body{ padding:16px 18px; }
.m-jd-tab-body[hidden]{ display:none; }
.m-jd-empty{
  padding:32px 16px; text-align:center;
  color:var(--m); font-size:13px;
}
.m-jd-detail-row{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:14px; padding:10px 0;
  border-bottom:1px solid var(--br);
  font-size:13px;
}
.m-jd-detail-row:last-child{ border-bottom:none; }
.m-jd-detail-k{
  font-family:'Barlow Condensed',sans-serif;
  font-size:11px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--m);
  flex-shrink:0;
}
.m-jd-detail-v{
  color:var(--t); text-align:right; word-break:break-word;
}

/* Photos tab — date-grouped grid (CompanyCam-inspired) */
.m-jd-photo-group{ margin-bottom:14px; }
.m-jd-photo-date{
  font-family:'Barlow Condensed',sans-serif;
  font-size:11px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--m);
  margin-bottom:6px;
}
.m-jd-photo-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:4px;
}
.m-jd-photo-grid img{
  width:100%; aspect-ratio:1; object-fit:cover;
  border-radius:6px; background:var(--s2);
}

/* Activity feed */
.m-jd-act-row{
  display:flex; gap:10px; padding:12px 0;
  border-bottom:1px solid var(--br);
  font-size:13px;
}
.m-jd-act-row:last-child{ border-bottom:none; }
.m-jd-act-icon{ flex-shrink:0; color:var(--m); margin-top:1px; }
.m-jd-act-text{ flex:1; min-width:0; color:var(--t); }
.m-jd-act-time{
  font-size:11px; color:var(--m); margin-top:2px;
}

/* Desktop / tablet — hide entirely (≥769px uses cardDetailModal) */
@media (min-width:769px){
  .m-jobdetail{ display:none !important; }
}
/* ══ END MOBILE JOB-DETAIL ══ */

/* ══ MOBILE CREATE POPOVER (Wave 2C.1) ═══════════════════════════════
   Bottom-sheet from the orange "+" FAB. Above #mobile-nav (1900) but
   the backdrop sits above the nav so taps outside the sheet close it.
   On desktop the popover is force-hidden — desktop users have the
   .crm-hdr-actions surface for the same affordances. */
.m-create-backdrop{
  position:fixed; inset:0;
  background:rgba(0,0,0,.45);
  z-index:2050;
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  animation:m-create-fade .18s ease-out;
}
.m-create-backdrop[hidden]{ display:none; }
@keyframes m-create-fade{ from { opacity:0; } to { opacity:1; } }

.m-create-popover{
  position:fixed; left:0; right:0; bottom:0;
  z-index:2060;
  background:var(--s2);
  border-top-left-radius:18px; border-top-right-radius:18px;
  border-top:1px solid var(--br);
  padding:10px 14px calc(14px + env(safe-area-inset-bottom, 0px));
  box-shadow:0 -8px 24px rgba(0,0,0,.4);
  display:flex; flex-direction:column; gap:4px;
  animation:m-create-slide-up .22s cubic-bezier(.18,.89,.32,1.28);
  max-height:90vh; overflow-y:auto;
}
.m-create-popover[hidden]{ display:none; }
@keyframes m-create-slide-up{
  from { transform:translateY(100%); }
  to   { transform:translateY(0); }
}

.m-create-handle{
  width:42px; height:4px; border-radius:2px;
  background:var(--br); opacity:.7;
  align-self:center;
  margin:4px 0 10px;
}
.m-create-title{
  font-family:'Barlow Condensed',sans-serif;
  font-size:11px; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--m);
  padding:0 4px 6px;
}

.m-create-row{
  display:flex; align-items:center; gap:14px;
  width:100%; padding:12px 8px;
  background:transparent; border:none; border-radius:10px;
  color:var(--t); text-align:left; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background .12s;
}
.m-create-row:active{ background:color-mix(in srgb, var(--t) 8%, transparent); }
.m-create-row-ico{
  display:flex; align-items:center; justify-content:center;
  width:42px; height:42px;
  border-radius:50%;
  background:color-mix(in srgb, var(--t) 10%, transparent);
  color:var(--t);
  flex-shrink:0;
}
.m-create-row-ico--orange{
  background:var(--orange);
  color:var(--accent-fg);
}
.m-create-row-ico--knock{
  background:color-mix(in srgb, var(--orange) 18%, transparent);
  color:var(--orange);
}
.m-create-row-text{
  display:flex; flex-direction:column; gap:1px;
  min-width:0; flex:1;
}
.m-create-row-lbl{
  font-size:var(--fs-lg); font-weight:600; color:var(--t);
  line-height:1.2;
}
.m-create-row-hint{
  font-size:var(--fs-sm); color:var(--m);
  line-height:1.3;
}

.m-create-cancel{
  margin-top:6px; padding:13px;
  background:transparent; border:1px solid var(--br); border-radius:12px;
  color:var(--m); cursor:pointer;
  font-family:inherit; font-size:14px; font-weight:600;
  -webkit-tap-highlight-color:transparent;
}
.m-create-cancel:active{ background:color-mix(in srgb, var(--t) 6%, transparent); }

@media (min-width:769px){
  .m-create-backdrop, .m-create-popover{ display:none !important; }
}
/* ══ END MOBILE CREATE POPOVER ══ */

/* ══ MOBILE PHOTO CAMERA FAB (Wave 2C.2) ═════════════════════════════
   CompanyCam-style floating shutter button on view-photos. Sits above
   the safe-area inset and clears #mobile-nav (62px) so taps land on
   the button, not the nav. Desktop hides it — the inline "Open
   Camera" header button is the desktop entry point. */
.m-shutter-fab{
  position:fixed;
  bottom:calc(78px + env(safe-area-inset-bottom, 0px));
  right:18px;
  z-index:1950;
  width:62px; height:62px;
  border:1px solid var(--accent-ring);   /* Wave 5: was border:none — visible boundary on light/pastel themes */
  border-radius:50%;
  background:var(--orange);
  color:var(--accent-fg);                /* Wave 5: was var(--t) — guaranteed-contrast fg */
  display:none; align-items:center; justify-content:center;
  /* Wave 5: drop hardcoded orange shadow + white-ring; use --og glow
     (per-theme tinted) and --accent-ring for the outline. */
  box-shadow:0 6px 18px var(--og), 0 0 0 4px color-mix(in srgb, var(--accent-fg) 8%, transparent);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:transform .15s ease, box-shadow .15s ease;
}
.m-shutter-fab:active{
  transform:scale(.92);
  box-shadow:0 3px 10px var(--og);
}
.m-shutter-fab .nbd-icon{ width:26px; height:26px; }
/* Only show on phones AND only when view-photos is active (otherwise
   the FAB would float across every view). */
@media (max-width:768px){
  #view-photos.active ~ .m-shutter-fab,
  #view-photos.active .m-shutter-fab{ display:inline-flex; }
}
/* The above selector chain isn't quite right because the FAB lives
   INSIDE view-photos. Belt-and-suspenders: show whenever view-photos
   is active on mobile via direct child path. */
@media (max-width:768px){
  #view-photos.active > .m-shutter-fab{ display:inline-flex; }
}
@media (min-width:769px){
  .m-shutter-fab{ display:none !important; }
}
/* ══ END MOBILE PHOTO CAMERA FAB ══ */

/* ══ MOBILE INSPECTION OVERLAY (Wave 2D) ═════════════════════════════
   Same structural shell as .m-jobdetail (full-screen, z above
   #mobile-nav) but stripped down to host the InspectionReportEngine
   wizard. Engine's internal markup gets normalized via the wrapper
   so it renders well on phones without engine rewrites. */
.m-inspection{
  position:fixed; inset:0;
  background:var(--bg);
  z-index:2110;  /* +10 over .m-jobdetail so it lifts above it */
  display:none; flex-direction:column;
  -webkit-overflow-scrolling:touch;
  font-family:'Barlow',sans-serif;
}
.m-inspection.open{ display:flex; }
.m-inspection[hidden]{ display:none; }
.m-inspection.open[hidden]{ display:none; }

.m-inspection-topbar{
  position:sticky; top:0; z-index:2;
  display:flex; align-items:center; gap:8px;
  padding:env(safe-area-inset-top, 8px) 12px 8px;
  background:color-mix(in srgb, var(--bg) 92%, transparent);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--br);
  min-height:calc(44px + env(safe-area-inset-top, 0px));
}
.m-inspection-title{
  flex:1; text-align:center;
  font-family:'Barlow Condensed',sans-serif;
  font-size:14px; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--t);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.m-inspection-spacer{ width:36px; flex-shrink:0; }

.m-inspection-scroll{
  flex:1; overflow-y:auto;
  padding:14px 14px calc(80px + env(safe-area-inset-bottom, 0px));
}

/* Normalize engine-rendered markup on mobile:
   - max-width:none so the desktop-sized wizard scales to viewport
   - generous tap targets for the engine's section/photo/save buttons
   - readable line-height for the long-form question text          */
.m-inspection-scroll #mInspectionContainer{
  max-width:none !important;
}
.m-inspection-scroll #mInspectionContainer button{
  min-height:44px;
}
.m-inspection-scroll #mInspectionContainer input,
.m-inspection-scroll #mInspectionContainer textarea,
.m-inspection-scroll #mInspectionContainer select{
  min-height:44px;
  font-size:16px;  /* prevent iOS zoom-on-focus */
}

@media (min-width:769px){
  .m-inspection{ display:none !important; }
}

/* CTA inside the mobile job-detail Activity tab (Wave 2D entry point) */
.m-jd-cta{
  display:flex; align-items:center; gap:12px;
  width:100%; padding:14px 12px;
  background:color-mix(in srgb, var(--orange) 8%, transparent);
  border:1px solid color-mix(in srgb, var(--orange) 35%, var(--br));
  border-radius:12px;
  color:var(--t); cursor:pointer;
  text-align:left;
  -webkit-tap-highlight-color:transparent;
  transition:background .12s;
  margin-bottom:14px;
}
.m-jd-cta:active{ background:color-mix(in srgb, var(--orange) 14%, transparent); }
.m-jd-cta-ico{
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px;
  border-radius:50%;
  background:var(--orange);
  color:var(--accent-fg);
  flex-shrink:0;
}
.m-jd-cta-text{
  display:flex; flex-direction:column; gap:2px;
  min-width:0; flex:1;
}
.m-jd-cta-lbl{
  font-size:14px; font-weight:700; color:var(--t);
  line-height:1.2;
}
.m-jd-cta-hint{
  font-size:11.5px; color:var(--m);
  line-height:1.3;
}
.m-jd-cta-chev{
  font-size:22px; color:var(--orange); font-weight:700;
  margin-left:4px;
}
/* ══ END MOBILE INSPECTION OVERLAY ══ */

/* ══ END PRO CHROME ══ */

/* BREADCRUMB NAVIGATION */
.breadcrumb-container{
  background:var(--bg);
  border-bottom:1px solid var(--br);
  padding:8px 24px;
  display:flex;
  align-items:center;
  min-height:36px;
}
/* Hide the breadcrumb on dense views where the sidebar already shows
   the current page — saves ~52px of vertical space for the kanban.
   Re-enabled on other views (Estimates, Photos, etc.) where the
   breadcrumb provides sub-route context (e.g. Customer detail). */
body:has(#view-crm.active) .breadcrumb-container,
body:has(#view-prospects.active) .breadcrumb-container{
  display:none!important;
}
.breadcrumb-link{
  font-size:12px;
  font-weight:500;
  color:var(--m);
  text-decoration:none;
  cursor:pointer;
  transition:color .15s;
}
.breadcrumb-link:hover{
  color:var(--orange);
}
.breadcrumb-sep{
  font-size:11px;
  color:var(--br);
  margin:0 8px;
  user-select:none;
}
.breadcrumb-current{
  font-size:12px;
  font-weight:600;
  color:var(--t);
}

/* COMMAND PALETTE
   Default hidden — same reasoning as .shortcuts-panel (see comment there).
   `.dn` utility (display:none) has equal specificity and was losing to this
   inline rule, so the palette was auto-opening on every page load. openCmd
   Palette() in ui.js sets `style.display = 'flex'` explicitly. */
.cmd-palette{
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index:10000;
  display:none;
  align-items:flex-start;
  justify-content:center;
  padding-top:15vh;
  animation:cmdFadeIn .15s ease-out;
}
@keyframes cmdFadeIn{
  from{opacity:0;}
  to{opacity:1;}
}
.cmd-overlay{
  position:absolute;
  top:0;right:0;bottom:0;left:0;
  background:rgba(0,0,0,0.75);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.cmd-modal{
  position:relative;
  background:var(--s);
  border:1px solid var(--br);
  border-radius:12px;
  width:90%;
  max-width:640px;
  max-height:70vh;
  display:flex;
  flex-direction:column;
  box-shadow:0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.03);
  animation:cmdSlideIn .2s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes cmdSlideIn{
  from{transform:translateY(-20px);opacity:0;}
  to{transform:translateY(0);opacity:1;}
}
.cmd-search-box{
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px 18px;
  border-bottom:1px solid var(--br);
}
.cmd-icon{
  font-size:18px;
  opacity:0.5;
}
#cmdInput{
  flex:1;
  background:transparent;
  border:none;
  outline:none;
  font-size:16px;
  color:var(--t);
  font-family:'Barlow',sans-serif;
}
#cmdInput::placeholder{
  color:var(--m);
}
/* Phase 1 Step 1: voice input affordance in the cmd palette. */
.cmd-mic-btn{
  background:transparent;
  border:1px solid var(--br);
  color:var(--m);
  width:32px;
  height:32px;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  flex-shrink:0;
  transition:background .15s, border-color .15s, color .15s, transform .08s;
  -webkit-tap-highlight-color:transparent;
}
.cmd-mic-btn:hover{
  border-color:var(--orange);
  color:var(--orange);
}
.cmd-mic-btn:active{ transform:scale(.94); }
.cmd-mic-btn[data-state="recording"]{
  background:var(--red, #ef4444);
  border-color:var(--red, #ef4444);
  color:#fff;
  animation:cmdMicPulse 1.2s ease-in-out infinite;
}
.cmd-mic-btn[data-state="transcribing"]{
  background:var(--orange);
  border-color:var(--orange);
  color:#fff;
  animation:cmdMicSpin 1s linear infinite;
}
.cmd-mic-btn[disabled]{
  opacity:.5;
  cursor:not-allowed;
}
@keyframes cmdMicPulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(239,68,68,.5); }
  50%    { box-shadow:0 0 0 8px rgba(239,68,68,0); }
}
@keyframes cmdMicSpin{
  to{ transform:rotate(360deg); }
}
.cmd-kbd{
  font-family:'Barlow Condensed',sans-serif;
  font-size:11px;
  font-weight:600;
  color:var(--m);
  background:var(--s2);
  border:1px solid var(--br);
  border-radius:4px;
  padding:3px 8px;
  letter-spacing:0.03em;
}
.cmd-results{
  flex:1;
  overflow-y:auto;
  max-height:50vh;
}
.cmd-results::-webkit-scrollbar{width:4px;}
.cmd-results::-webkit-scrollbar-thumb{background:var(--br);}
.cmd-group{
  padding:12px 0;
}
.cmd-group-label{
  font-size:10px;
  font-weight:700;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--orange);
  padding:8px 18px 6px;
}
.cmd-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 18px;
  cursor:pointer;
  transition:all 0.12s;
  border-left:3px solid transparent;
}
.cmd-item:hover,
.cmd-item.selected{
  background:var(--s2);
  border-left-color:var(--orange);
}
.cmd-item-icon{
  font-size:18px;
  width:24px;
  text-align:center;
  flex-shrink:0;
}
.cmd-item-content{
  flex:1;
  min-width:0;
}
.cmd-item-title{
  font-size:14px;
  font-weight:500;
  color:var(--t);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.cmd-item-meta{
  font-size:11px;
  color:var(--m);
  margin-top:2px;
}
.cmd-item-badge{
  font-size:10px;
  font-weight:600;
  letter-spacing:0.05em;
  text-transform:uppercase;
  background:rgba(74,158,255,0.12);
  color:var(--blue);
  padding:3px 8px;
  border-radius:4px;
  flex-shrink:0;
}
.cmd-footer{
  border-top:1px solid var(--br);
  padding:10px 18px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.cmd-footer-hint{
  font-size:11px;
  color:var(--m);
  display:flex;
  align-items:center;
  gap:12px;
}
.cmd-empty{
  padding:40px 20px;
  text-align:center;
  color:var(--m);
}
.cmd-empty-icon{
  font-size:48px;
  opacity:0.3;
  margin-bottom:12px;
}
.cmd-empty-text{
  font-size:14px;
}

/* KEYBOARD SHORTCUTS PANEL
   Default hidden so the panel doesn't blanket the dashboard on every page
   load (the .dn utility class has equal specificity and was losing to this
   block because it loads earlier — making the panel always-visible until
   the user dismissed it, blocking every click underneath). openPanel() now
   sets `display:flex` explicitly. */
.shortcuts-panel{
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index:10001;
  display:none;
  align-items:center;
  justify-content:center;
  padding:40px;
  animation:cmdFadeIn .15s ease-out;
}
.shortcuts-modal{
  position:relative;
  background:var(--s);
  border:1px solid var(--br);
  border-radius:12px;
  width:100%;
  max-width:900px;
  max-height:85vh;
  display:flex;
  flex-direction:column;
  box-shadow:0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.03);
  animation:cmdSlideIn .2s cubic-bezier(0.16, 1, 0.3, 1);
}
.shortcuts-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 24px;
  border-bottom:1px solid var(--br);
}
.shortcuts-title{
  font-family:'Barlow Condensed',sans-serif;
  font-size:24px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.04em;
  color:var(--t);
}
.shortcuts-subtitle{
  font-size:12px;
  color:var(--m);
  margin-top:2px;
}
.shortcuts-close{
  background:transparent;
  border:none;
  color:var(--m);
  font-size:20px;
  cursor:pointer;
  padding:4px 8px;
  transition:color .15s;
}
.shortcuts-close:hover{
  color:var(--orange);
}
.shortcuts-body{
  flex:1;
  overflow-y:auto;
  padding:24px;
}
.shortcuts-body::-webkit-scrollbar{width:4px;}
.shortcuts-body::-webkit-scrollbar-thumb{background:var(--br);}
.shortcuts-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:24px;
}
.shortcuts-section{
  background:var(--s2);
  border:1px solid var(--br);
  border-radius:8px;
  padding:16px;
}
.shortcuts-section-title{
  font-size:10px;
  font-weight:700;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--orange);
  margin-bottom:12px;
  padding-bottom:8px;
  border-bottom:1px solid var(--br);
}
.shortcuts-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:8px 0;
  border-bottom:1px solid rgba(255,255,255,0.03);
}
.shortcuts-item:last-child{
  border-bottom:none;
}
.shortcuts-keys{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  color:var(--m);
  white-space:nowrap;
}
.shortcuts-keys kbd{
  font-family:'Barlow Condensed',sans-serif;
  font-size:11px;
  font-weight:600;
  color:var(--t);
  background:var(--s3);
  border:1px solid var(--br);
  border-radius:4px;
  padding:4px 8px;
  min-width:28px;
  text-align:center;
  box-shadow:0 1px 2px rgba(0,0,0,0.2);
}
.shortcuts-desc{
  font-size:13px;
  color:var(--m);
  flex:1;
  text-align:right;
}
.shortcuts-footer{
  border-top:1px solid var(--br);
  padding:14px 24px;
  text-align:center;
}
.shortcuts-footer kbd{
  font-family:'Barlow Condensed',sans-serif;
  font-size:11px;
  font-weight:600;
  color:var(--t);
  background:var(--s2);
  border:1px solid var(--br);
  border-radius:4px;
  padding:3px 8px;
}
/* How-To Guide Items */
.howto-item{
  padding:10px 0;
  border-bottom:1px solid var(--br);
}
.howto-item:last-child{border-bottom:none;}
.howto-q{
  font-weight:600;
  font-size:13px;
  color:var(--orange);
  margin-bottom:5px;
}
.howto-a{
  font-size:12px;
  color:var(--t);
  line-height:1.5;
}
.howto-a kbd{
  font-family:'Barlow Condensed',sans-serif;
  font-size:11px;
  font-weight:600;
  color:var(--t);
  background:var(--s2);
  border:1px solid var(--br);
  border-radius:3px;
  padding:2px 6px;
}
.sc-tab:hover{color:var(--t) !important;}

/* KEYBOARD HINT BADGES */
.kbd-hint{
  font-family:'Barlow Condensed',sans-serif;
  font-size:10px;
  font-weight:600;
  color:var(--m);
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:3px;
  padding:2px 6px;
  margin-left:6px;
  opacity:0;
  transition:opacity .2s;
}
.btn:hover .kbd-hint{
  opacity:1;
}


/* SKELETON LOADING SCREENS */
@keyframes shimmer {
  0% {
    background-position: -468px 0;
  }
  100% {
    background-position: 468px 0;
  }
}

.skeleton {
  animation: shimmer 1.5s infinite linear;
  background: linear-gradient(
    90deg,
    var(--s2) 0%,
    rgba(255,255,255,0.03) 50%,
    var(--s2) 100%
  );
  background-size: 468px 100%;
  border-radius: 6px;
}

/* Kanban Card Skeleton — Premium shimmer */
.k-card-skeleton {
  background: var(--s2);
  border: 1px solid var(--br);
  border-left: 3px solid var(--br);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 8px;
  cursor: default;
  animation: skeletonFadeIn .4s ease;
}
@keyframes skeletonFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.k-card-skeleton:nth-child(2) { animation-delay: .1s; }
.k-card-skeleton:nth-child(3) { animation-delay: .2s; }

.k-card-skeleton-header {
  width: 70%;
  height: 16px;
  margin-bottom: 12px;
  border-radius: 4px;
}

.k-card-skeleton-line {
  width: 100%;
  height: 11px;
  margin-bottom: 8px;
  border-radius: 3px;
}

.k-card-skeleton-line:last-child {
  width: 50%;
}

.k-card-skeleton-footer {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.k-card-skeleton-tag {
  width: 60px;
  height: 20px;
  border-radius: 10px;
}

/* Photo Grid Skeleton */
.photo-skeleton-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  padding: 12px;
}

.photo-skeleton-item {
  aspect-ratio: 1;
  border-radius: 8px;
}

/* Estimate Table Skeleton */
.estimate-skeleton-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
}

.estimate-skeleton-row {
  border-bottom: 1px solid var(--br);
}

.estimate-skeleton-cell {
  padding: 12px;
  height: 48px;
}

.estimate-skeleton-bar {
  height: 12px;
  border-radius: 4px;
}


/* TOAST NOTIFICATIONS */
.toast-container{
  position:fixed;
  bottom:20px;
  right:20px;
  z-index:10002;
  display:flex;
  flex-direction:column;
  gap:12px;
  pointer-events:none;
}
.toast{
  background:var(--s);
  border:1px solid var(--br);
  border-left:4px solid var(--orange);
  border-radius:8px;
  padding:14px 18px;
  min-width:300px;
  max-width:420px;
  box-shadow:0 8px 24px rgba(0,0,0,0.4);
  display:flex;
  align-items:center;
  gap:12px;
  pointer-events:auto;
  animation:toastSlideIn .25s cubic-bezier(0.16, 1, 0.3, 1);
}
.toast.toast-success{border-left-color:var(--green);}
.toast.toast-error{border-left-color:var(--red);}
.toast.toast-info{border-left-color:var(--blue);}
@keyframes toastSlideIn{
  from{transform:translateX(400px);opacity:0;}
  to{transform:translateX(0);opacity:1;}
}
.toast-icon{
  font-size:20px;
  flex-shrink:0;
}
.toast-content{
  flex:1;
}
.toast-title{
  font-size:13px;
  font-weight:600;
  color:var(--t);
  margin-bottom:2px;
}
.toast-message{
  font-size:12px;
  color:var(--m);
  line-height:1.4;
}
.toast-actions{
  display:flex;
  gap:8px;
  margin-top:8px;
}
.toast-btn{
  font-size:11px;
  font-weight:600;
  padding:4px 10px;
  border-radius:4px;
  border:none;
  cursor:pointer;
  transition:all .15s;
}
.toast-btn-primary{
  background:var(--orange);
  color:var(--accent-fg);
}
.toast-btn-primary:hover{
  background:var(--ob);
}
.toast-btn-ghost{
  background:transparent;
  color:var(--m);
}
.toast-btn-ghost:hover{
  color:var(--t);
  background:var(--s2);
}
.toast-close{
  background:transparent;
  border:none;
  color:var(--m);
  font-size:16px;
  cursor:pointer;
  padding:0;
  width:20px;
  height:20px;
  flex-shrink:0;
  transition:color .15s;
}
.toast-close:hover{
  color:var(--orange);
}

/* MAIN LAYOUT */
.app-body{flex:1;display:flex;overflow:hidden;}

/* SIDEBAR */
.sidebar{width:200px;flex-shrink:0;background:var(--s);border-right:1px solid var(--br);display:flex;flex-direction:column;overflow-y:auto;}
.sidebar::-webkit-scrollbar{width:3px;}.sidebar::-webkit-scrollbar-thumb{background:var(--br);}
.nlabel{font-size:9px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--m);padding:14px 16px 5px;margin-top:4px;}
.ni{display:flex;align-items:center;gap:10px;padding:11px 16px;font-size:13px;color:var(--m);cursor:pointer;border-left:3px solid transparent;transition:all .18s cubic-bezier(0.4, 0, 0.2, 1);user-select:none;position:relative;min-height:40px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ni:hover{color:var(--t);background:var(--s2);transform:translateX(2px);}
.ni.active{color:var(--orange);background:color-mix(in srgb, var(--orange) 10%, transparent);border-left-color:var(--orange);font-weight:600;}
.ni.active .ni-icon{transform:scale(1.1);}
.ni-icon{font-size:15px;width:20px;text-align:center;transition:transform .2s;}
.nbadge{margin-left:auto;background:var(--red);color:var(--t);font-size:9px;font-weight:700;border-radius:10px;padding:2px 7px;min-width:18px;text-align:center;}
.health-indicator{
  display:inline-block;width:9px;height:9px;border-radius:50%;margin-left:7px;
  transition:all .3s ease;opacity:0;box-shadow:0 0 0 0 currentColor;
}
.health-indicator.loading{background:#fbbf24;opacity:1;animation:pulse 1.5s infinite;}
.health-indicator.healthy{background:#10b981;opacity:1;box-shadow:0 0 8px rgba(16,185,129,.4);}
.health-indicator.error{background:#ef4444;opacity:1;animation:pulse 1.5s infinite;box-shadow:0 0 8px rgba(239,68,68,.4);}
@keyframes pulse{0%,100%{opacity:1;} 50%{opacity:.5;}}

/* COLLAPSIBLE NAV SECTIONS */
.nav-section{margin-top:12px;}
.nav-section-header{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;font-size:9px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--orange);cursor:pointer;user-select:none;transition:all .18s;border-radius:6px;margin:0 8px;}
.nav-section-header:hover{background:var(--s2);}
.nav-section-toggle{font-size:11px;transition:transform .25s cubic-bezier(0.4, 0, 0.2, 1);opacity:.7;}
.nav-section-toggle.open{transform:rotate(90deg);opacity:1;}
.nav-section-content{max-height:0;overflow:hidden;transition:max-height .3s cubic-bezier(0.4, 0, 0.2, 1);}
.nav-section-content.open{max-height:600px;}
.nav-divider{height:1px;background:var(--br);margin:16px 0;opacity:.5;}

/* CONTENT */
.content{flex:1;overflow:hidden;display:flex;flex-direction:column;min-height:0;}
.view{display:none;flex:1;overflow-y:auto;overflow-x:hidden;min-height:0;-webkit-overflow-scrolling:touch;touch-action:pan-y pinch-zoom;}
.view.active{display:flex;flex-direction:column;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y pinch-zoom;}
.view-scroll{overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y pinch-zoom;}
.view-scroll{flex:1;overflow-y:auto;padding:22px 24px;min-height:0;}
.view-scroll::-webkit-scrollbar{width:4px;}.view-scroll::-webkit-scrollbar-thumb{background:var(--br);}

/* ══ UNIVERSAL SCROLL SAFETY NET ══
   Every .view is a flex column that should either:
   (a) contain a .view-scroll that scrolls its children, OR
   (b) scroll itself (custom layouts like Ask Joe, CRM kanban).
   These rules guarantee the bottom of content is never clipped:
   1. Safe-area-aware bottom padding on every scroll surface so the
      iOS home indicator + mobile bottom nav (62px) can't overlap.
   2. `min-height:0` on every flex descendant of .view so nested
      flex children can actually shrink and let overflow:auto work.
   3. Any view that forgot its .view-scroll still gets scroll via
      the existing .view overflow-y:auto default. */
.view.active > .view-scroll,
.view.active > :not(header):not(nav):not(.joe-header):not(.joe-input-area):not(.joe-context-bar):not(.kanban-board):not(#kanbanBoard):not(#d2dMap):not(.crm-header):not(.crm-secondary-header):not(#bulkActionBar) {
  min-height:0;
}
/* Safe-area bottom padding on the scroll surface so the mobile
   bottom nav (62px) and the iPhone home indicator never cover
   the last row of content. Applied to both .view-scroll and
   the view itself when it's the scroll container. */
.view-scroll {
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0)) !important;
}
@media (max-width: 768px) {
  .view-scroll {
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0)) !important;
  }
}
/* ══ END UNIVERSAL SCROLL SAFETY NET ══ */

/* ══ TOUCH-DEVICE HOVER NEUTRALIZATION ══
   On iPad + mobile, every :hover rule in the app (137+) would
   stick after a tap and stay visible until the user tapped
   somewhere else. That produces 'stuck hover' ghosts on cards,
   buttons, and nav items. This rule disables transform changes
   and heavy background shifts on devices without a real hover
   capability (pointer: coarse). Buttons still get their :active
   feedback and focus rings work normally.

   The @media (hover: none) query targets: touchscreen-only iPad,
   iPhone, Android. Desktop with mouse stays unaffected. iPad with
   Apple Pencil reports hover:hover so it still gets hover styles
   when the pencil hovers \u2014 that's the right behavior. */
/* ══ WAVE 106: COLOR-BLIND-SAFE PALETTE OVERRIDE ══
   Single toggle swaps the 5 status colors to a deuteranopia/
   protanopia-safe palette. The default red/green pair is the
   most common color-blindness collision; the swap moves to a
   blue/orange pair using the IBM-recommended accessible palette.

   Engagement tier colors (W91/W92) and snooze pills inherit from
   the same vars, so this single override propagates to every
   surface that uses status color. Activated via:
     :root[data-cb-safe="1"]   (toggled by Comfort tab in W107)
*/
:root[data-cb-safe="1"] {
  --green: #648fff;  /* IBM Accessible Blue (replaces green) */
  --red:   #fe6100;  /* IBM Accessible Orange (replaces red) */
  --gold:  #ffb000;  /* IBM Accessible Yellow (replaces gold) */
  --blue:  #785ef0;  /* IBM Accessible Purple (shift) */
  --purple:#dc267f;  /* IBM Accessible Magenta (shift) */
  --orange:#fe6100;  /* match red so accent stays consistent */
}

/* ══ WAVE 101: TEXT SIZE SCALE ══
   Three-step text scale via root font-size override. Affects every
   `rem`-sized element automatically (most of the app). 'medium' is
   the default — no rule needed since 100% is the browser default.
   Ranges chosen for legibility without breaking layout: small
   shrinks ~8%, large grows ~8%. Bigger jumps would force kanban
   columns to overflow. */
:root[data-text-size="small"]  { font-size: 92%; }
:root[data-text-size="large"]  { font-size: 108%; }

/* ══ WAVE 101: REDUCE MOTION (USER PREFERENCE) ══
   Force-disable all animations + transitions when the rep flips the
   "Reduce motion" toggle in the Comfort tab. Browsers already
   respect prefers-reduced-motion at the OS level; this gives the
   rep a manual override regardless of OS setting. Same selector
   shape as the W57/W58 prefers-reduced-motion blocks. */
:root[data-motion="reduce"] *,
:root[data-motion="reduce"] *::before,
:root[data-motion="reduce"] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}

@media (hover: none) {
  /* Disable transforms on :hover (scale / translate / lift) */
  *:hover {
    transform: none !important;
  }
  /* Most app buttons and cards rely on transform:translateY() or
     scale() for their hover lift \u2014 those all get neutralized by
     the rule above. Color / border / shadow changes are left
     alone because they're cheap and don't create stuck ghosts. */

  /* Wave 81: touch target audit. Inline action buttons added in
     W46-W79 (the 📞/💬/📧/🔍/💤/⏰ vocabulary) sized themselves
     at 22-30px which works on desktop but is below the iOS HIG
     and WCAG 2.5.5 minimum (44x44 recommended, 32x32 floor). On
     touch devices we bump them all to 36x36 minimum so reps
     hitting them on a phone don't fat-finger an adjacent row.
     Inline-style width/height get overridden via attribute
     selectors so we don't have to edit each button site. */
  .cmd-action,
  .hl-action,
  .at-action,
  .ss-action,
  .rc-action,
  .notif-action,
  .af-action {
    min-width: 36px !important;
    min-height: 36px !important;
    /* Bump font-size proportionally so the icon doesn't look
       lost in the larger box. */
    font-size: 14px !important;
  }
  /* The 22px rc-action buttons in the recent dropdown (W53/W62/W67)
     started smallest — round them slightly more so the bigger
     touch target still looks deliberate. */
  .rc-action {
    border-radius: 6px !important;
  }
}
/* ══ END HOVER NEUTRALIZATION ══ */

/* ══ PROFESSIONAL MODE (DE-MOJI) ══
   When body.professional-mode is active, decorative emojis
   throughout the app are hidden via CSS. The nav icons, stat
   card icons, widget icons, kanban stage emojis, panel labels,
   and metric prefixes all disappear, leaving a clean text-only
   corporate-style interface.

   Toggled via Settings → Appearance → Professional Mode checkbox.
   Persisted in localStorage('nbd_professional_mode'). */
body.professional-mode .ni-icon,
body.professional-mode .stat-icon,
body.professional-mode .w-card-icon,
body.professional-mode .mm-item-icon,
body.professional-mode .mn-icon,
body.professional-mode .empty-icon {
  display: none !important;
}
/* FIX (2026-06-20): professional-mode hides .ni-icon for a clean text-only look —
   correct in the EXPANDED sidebar, where the text labels remain visible. But
   sidebar-collapsed hides the labels too (font-size:0 on .ni, see #kanban-force-css),
   leaving the icon as the ONLY content. Hiding it then blanks the entire 60px rail:
   every nav item renders as an empty box and the nav becomes unusable. Keep nav
   icons visible whenever the sidebar is collapsed, regardless of professional mode.
   Higher specificity + !important beats the display:none rule above. */
body.professional-mode.sidebar-collapsed .sidebar .ni .ni-icon{
  display:inline-block!important;
}
/* Sidebar nav items — remove left gap where emoji was */
body.professional-mode .ni { gap: 4px; }
body.professional-mode .mn-item { gap: 1px; }
/* Kanban stage headers — emoji prefixes are inline text, hide via font-size trick */
body.professional-mode .kcol-header { letter-spacing: 0; }
/* Mobile nav items */
body.professional-mode .mm-item { gap: 6px; }
/* ══ END PROFESSIONAL MODE ══ */

/* ══ SITE-WIDE SIZING SYSTEM (rev 2026-05-05) ══
   --nbd-scale is set on :root by nbdSetSize(). It composes WITH the
   kanban Density tokens (--kcard-pad-*) instead of overriding them
   with !important — so UI Size and Density are now independent axes:
     UI Size affects everything (panels, buttons, page titles, sidebar)
     Density affects only kanban-card chrome
   Both can be set, both compose. Card padding = density token × scale.
   compact=0.85  default=1.0  comfortable=1.12  large=1.25                */
:root { --nbd-scale: 1; }

/* Panels — explicit rules per preset including default for consistency. */
body[data-nbd-size="compact"] .panel-body     { padding: calc(14px * var(--nbd-scale)) calc(16px * var(--nbd-scale)) !important; }
body[data-nbd-size="default"] .panel-body     { padding: 18px 20px !important; }
body[data-nbd-size="comfortable"] .panel-body { padding: calc(22px * var(--nbd-scale)) calc(24px * var(--nbd-scale)) !important; }
body[data-nbd-size="large"] .panel-body       { padding: calc(26px * var(--nbd-scale)) calc(28px * var(--nbd-scale)) !important; }

/* Kanban cards — DO NOT override .k-card padding here. The Density
   system (:root[data-density]) owns card padding via --kcard-pad.
   Instead we scale the card name + value font sizes per UI size, so
   bigger UI = bigger text on cards while density still controls the
   surrounding padding. The font scaling uses calc on density tokens. */
:root[data-nbd-scale-cards="true"] .kc-name      { font-size: calc(var(--kcard-name-fz) * var(--nbd-scale)); }
:root[data-nbd-scale-cards="true"] .kc-val-badge { font-size: calc(var(--kcard-val-fz)  * var(--nbd-scale)); }
:root[data-nbd-scale-cards="true"] .kc-addr,
:root[data-nbd-scale-cards="true"] .kc-email-line,
:root[data-nbd-scale-cards="true"] .kc-phone,
:root[data-nbd-scale-cards="true"] .kc-phone-link { font-size: calc(var(--kcard-meta-fz) * var(--nbd-scale)); }
:root[data-nbd-scale-cards="true"] .kc-tag,
:root[data-nbd-scale-cards="true"] .kc-carrier,
:root[data-nbd-scale-cards="true"] .kc-days       { font-size: calc(var(--kcard-tag-fz) * var(--nbd-scale)); }
/* Always-on (UI Size = compact OR comfortable OR large). Default has no
   override so the density tokens apply at 1.0x — clean baseline.        */
body[data-nbd-size="compact"],
body[data-nbd-size="comfortable"],
body[data-nbd-size="large"]                                    { /* marker — see :root rule */ }
/* Apply the marker via JS-set attribute instead of conditional CSS — see nbdSetSize. */

/* Buttons */
body[data-nbd-size="compact"] .btn      { padding: calc(6px * var(--nbd-scale)) calc(12px * var(--nbd-scale)); font-size: calc(12px * var(--nbd-scale)); }
body[data-nbd-size="default"] .btn      { padding: 9px 16px; font-size: 13px; }
body[data-nbd-size="comfortable"] .btn  { padding: calc(11px * var(--nbd-scale)) calc(18px * var(--nbd-scale)); font-size: calc(14px * var(--nbd-scale)); }
body[data-nbd-size="large"] .btn        { padding: calc(14px * var(--nbd-scale)) calc(22px * var(--nbd-scale)); font-size: calc(15px * var(--nbd-scale)); }

/* Sidebar nav items */
body[data-nbd-size="compact"] .ni       { padding: 4px 8px; font-size: 12px; }
body[data-nbd-size="default"] .ni       { padding: 7px 12px; font-size: 13px; }
body[data-nbd-size="comfortable"] .ni   { padding: 10px 16px; font-size: 14px; }
body[data-nbd-size="large"] .ni         { padding: 12px 18px; font-size: 15px; }

/* Page titles — also covers the new compact CRM header title chip. */
body[data-nbd-size="compact"]     .page-title,
body[data-nbd-size="compact"]     .crm-hdr-title { font-size: calc(13px * var(--nbd-scale)) !important; }
body[data-nbd-size="default"]     .page-title    { font-size: 22px !important; }
body[data-nbd-size="default"]     .crm-hdr-title { font-size: 14px !important; }
body[data-nbd-size="comfortable"] .page-title    { font-size: calc(24px * var(--nbd-scale)) !important; }
body[data-nbd-size="comfortable"] .crm-hdr-title { font-size: calc(15px * var(--nbd-scale)) !important; }
body[data-nbd-size="large"]       .page-title    { font-size: calc(28px * var(--nbd-scale)) !important; }
body[data-nbd-size="large"]       .crm-hdr-title { font-size: calc(16px * var(--nbd-scale)) !important; }

/* View padding */
body[data-nbd-size="compact"] .view-scroll      { padding: 14px 16px !important; }
body[data-nbd-size="default"] .view-scroll      { padding: 22px 24px !important; }
body[data-nbd-size="comfortable"] .view-scroll  { padding: 26px 28px !important; }
body[data-nbd-size="large"] .view-scroll        { padding: 30px 32px !important; }

/* Compact CRM header — pad multiplied by --nbd-scale per UI size so
   "Large" gives the header more breathing room and "Compact" tightens.
   Also covers the Prospects page header for parity.                     */
body[data-nbd-size="compact"]     .crm-header  { padding: calc(6px * var(--nbd-scale)) calc(10px * var(--nbd-scale)); }
body[data-nbd-size="default"]     .crm-header  { padding: 8px 14px; }
body[data-nbd-size="comfortable"] .crm-header  { padding: calc(10px * var(--nbd-scale)) calc(16px * var(--nbd-scale)); }
body[data-nbd-size="large"]       .crm-header  { padding: calc(12px * var(--nbd-scale)) calc(20px * var(--nbd-scale)); }

/* Compact icon buttons in the new header — slightly bigger on Large size
   so the touch target is reasonable. */
body[data-nbd-size="large"]       .crm-icon-btn { width: calc(34px * var(--nbd-scale)); height: calc(34px * var(--nbd-scale)); }
body[data-nbd-size="comfortable"] .crm-icon-btn { width: calc(32px * var(--nbd-scale)); height: calc(32px * var(--nbd-scale)); }
/* ══ END SIZING SYSTEM ══ */

/* MAP VIEWS */
/* min-height:0 on every flex ancestor is REQUIRED so the
   sidebar's overflow-y:auto actually triggers. Without it,
   the sidebar expands to its natural content height and the
   parent page scrolls instead of the sidebar scrolling. */
/* position:relative so the absolute spyglass panel anchors to the map
   view, not BODY — body-anchored it rendered under the page header and
   its input/buttons were unclickable (NEW-D36). Mobile overrides below
   still force their own position with !important. */
.map-view{display:none;flex:1;min-height:0;position:relative;}
.map-view.active{display:flex;min-height:0;height:100%;}
.map-sidebar{width:280px;flex-shrink:0;background:var(--s);border-right:1px solid var(--br);overflow-y:auto;padding:14px;min-height:0;max-height:100%;}
.map-sidebar::-webkit-scrollbar{width:3px;}
.map-sidebar::-webkit-scrollbar-thumb{background:var(--br);border-radius:3px;}
.map-sidebar::-webkit-scrollbar-thumb:hover{background:var(--orange);}
.map-area{flex:1;position:relative;min-height:300px;}
.map-area > div[id$="Map"]{position:absolute;top:0;left:0;right:0;bottom:0;min-height:300px;}

/* COMPONENTS */
.page-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;}
.page-title{font-family:'Barlow Condensed',sans-serif;font-size:22px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;}
.page-sub{font-size:12px;color:var(--m);margin-top:2px;}
.btn{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:7px;font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;cursor:pointer;border:1px solid transparent;transition:all .2s;}
.btn-orange{background:var(--orange);color:var(--accent-fg);border-color:var(--orange);box-shadow:0 3px 12px var(--og);}
.btn-orange:hover{background:var(--ob);}
.btn-ghost{background:var(--s2);color:var(--t);border-color:var(--br);}
.btn-ghost:hover{border-color:var(--orange);color:var(--orange);}
.btn-red{background:rgba(224,82,82,.12);color:var(--red);border-color:var(--red);}
.btn-green{background:rgba(46,204,138,.12);color:var(--green);border-color:var(--green);}
.panel{background:var(--s);border:1px solid var(--br);border-radius:10px;overflow:hidden;margin-bottom:16px;}
.panel-hdr{padding:14px 18px 12px;border-bottom:1px solid var(--br);display:flex;align-items:center;justify-content:space-between;}
.panel-label{font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--orange);margin-bottom:2px;}
.panel-title{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;}
.panel-body{padding:18px 20px;}
/* Toggle switch component */
.ob-toggle{position:relative;display:inline-block;width:38px;height:20px;flex-shrink:0;}
.ob-toggle input{opacity:0;width:0;height:0;position:absolute;}
.ob-toggle span{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:#334;border-radius:20px;transition:.3s;}
.ob-toggle span::before{content:'';position:absolute;width:16px;height:16px;left:2px;bottom:2px;background:#fff;border-radius:50%;transition:.3s;}
.ob-toggle input:checked + span{background:var(--orange,var(--orange));}
.ob-toggle input:checked + span::before{transform:translateX(18px);}
.sgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px;}
@media (max-width:600px){ .sgrid{ grid-template-columns:repeat(2,1fr); gap:10px; } }
@media (max-width:400px){ .sgrid{ grid-template-columns:1fr; } }
.stat-card{background:var(--s);border:1px solid var(--br);border-radius:9px;padding:16px 18px;display:flex;align-items:center;gap:12px;}
.stat-card:hover{border-color:rgba(255,255,255,.12);}
.stat-icon{width:40px;height:40px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;}
.si-o{background:color-mix(in srgb, var(--orange) 15%, transparent)}.si-b{background:rgba(74,158,255,.12)}.si-p{background:rgba(155,109,255,.12)}.si-g{background:rgba(46,204,138,.12)}
.stat-val{font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:700;line-height:1;}
.stat-lbl{font-size:11px;color:var(--m);margin-top:2px;}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
@media (max-width:430px){ .pgrid{ grid-template-columns:repeat(2,1fr); } }
.stage-box{border-radius:7px;padding:12px;display:flex;flex-direction:column;align-items:center;gap:4px;border:1px solid rgba(255,255,255,.05);}
.sb-new{background:var(--s3)}.sb-ct{background:rgba(74,158,255,.08);border-color:rgba(74,158,255,.18)}.sb-es{background:rgba(212,160,23,.09);border-color:rgba(212,160,23,.22)}.sb-ng{background:rgba(155,109,255,.08);border-color:rgba(155,109,255,.18)}.sb-won{background:rgba(46,204,138,.08);border-color:rgba(46,204,138,.18)}.sb-lost{background:rgba(224,82,82,.08);border-color:rgba(224,82,82,.18)}
.stage-count{font-family:'Barlow Condensed',sans-serif;font-size:22px;font-weight:700;}
.stage-name{font-size:9px;letter-spacing:.06em;color:var(--m);text-transform:uppercase;font-weight:600;text-align:center;}
.s-blue{color:var(--blue)}.s-gold{color:var(--gold)}.s-purple{color:var(--purple)}.s-green{color:var(--green)}.s-red{color:var(--red)}

/* TABLE */
.tbl{width:100%;border-collapse:collapse;}
.tbl th{font-size:9px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--m);padding:8px 12px;text-align:left;border-bottom:1px solid var(--br);}
.tbl td{padding:9px 12px;font-size:12px;border-bottom:1px solid rgba(255,255,255,.03);}
.tbl tr:hover td{background:var(--s2);}
.tag{display:inline-block;font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:12px;}
.tag-new{background:var(--s3);color:var(--m)}.tag-ct{background:rgba(74,158,255,.12);color:var(--blue)}.tag-es{background:rgba(212,160,23,.12);color:var(--gold)}.tag-ng{background:rgba(155,109,255,.12);color:var(--purple)}.tag-won{background:rgba(46,204,138,.12);color:var(--green)}.tag-lost{background:rgba(224,82,82,.12);color:var(--red)}

/* SEARCH */
.search-row{display:flex;gap:7px;margin-bottom:12px;}
.search-row input{flex:1;background:var(--s2);border:1px solid var(--br);border-radius:7px;padding:9px 11px;font-family:'Barlow',sans-serif;font-size:12px;color:var(--t);outline:none;transition:border-color .2s;}
.search-row input:focus{border-color:var(--orange);}
.search-row input::placeholder{color:#3a3f48;}

/* PIN GRID */
/* Drawing sidebar section labels — click to collapse/expand */
.slabel2{font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--orange);margin:10px 0 6px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:4px 0;border-bottom:1px solid color-mix(in srgb, var(--orange) 15%, transparent);user-select:none;-webkit-tap-highlight-color:transparent;}
.slabel2::after{content:'−';font-size:14px;color:var(--m);transition:transform .15s;}
.slabel2.collapsed::after{content:'+';}
.pin-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-bottom:10px;}
.pin-btn{display:flex;align-items:center;gap:7px;background:var(--s2);border:1px solid var(--br);border-radius:6px;padding:7px 9px;cursor:pointer;font-size:11px;font-weight:500;color:var(--t);transition:all .2s;}
.pin-btn:hover,.pin-btn.active{border-color:var(--orange);background:color-mix(in srgb, var(--orange) 8%, transparent);}
/* ── MAP OVERLAY SYSTEM ── */
.overlay-panel{background:var(--s2);border:1px solid var(--br);border-radius:8px;padding:10px;margin-bottom:10px;}
.overlay-row{display:flex;align-items:center;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--rule);}
.overlay-row:last-child{border-bottom:none;}
.overlay-label{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:600;color:var(--t);letter-spacing:.04em;}
.overlay-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
.overlay-toggle{position:relative;width:36px;height:20px;background:var(--s3);border:1px solid var(--br);border-radius:10px;cursor:pointer;transition:background .2s;flex-shrink:0;}
.overlay-toggle.on{background:var(--orange);border-color:var(--orange);}
.overlay-toggle::after{content:'';position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;transition:transform .2s;}
.overlay-toggle.on::after{transform:translateX(16px);}
/* Pin confirm dialog */
.pin-confirm-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:2050;background:rgba(0,0,0,.7);display:none;align-items:center;justify-content:center;}
.pin-confirm-overlay.open{display:flex;}
.pin-confirm-box{background:var(--s);border:1px solid var(--br);border-radius:10px;padding:20px;width:280px;box-shadow:0 20px 60px rgba(0,0,0,.6);}
.pin-confirm-title{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;color:var(--t);margin-bottom:6px;}
.pin-confirm-sub{font-size:11px;color:var(--m);margin-bottom:14px;}
.pin-confirm-status{display:inline-flex;align-items:center;gap:6px;background:var(--s2);border:1px solid var(--br);border-radius:5px;padding:5px 10px;font-size:11px;font-weight:600;color:var(--t);margin-bottom:4px;}
.pin-confirm-coords{font-size:10px;color:var(--m);margin-bottom:14px;}
.pin-confirm-notes{width:100%;background:var(--s2);border:1px solid var(--br);border-radius:6px;color:var(--t);font-size:11px;padding:8px;resize:none;box-sizing:border-box;margin-bottom:12px;font-family:'Barlow',sans-serif;}
.pin-confirm-notes:focus{outline:none;border-color:var(--orange);}
.pin-confirm-btns{display:flex;gap:8px;}
.pin-confirm-btns .btn{flex:1;justify-content:center;font-size:12px;}
/* Address pin input */
.addr-pin-row{display:flex;gap:6px;margin-bottom:8px;}
.addr-pin-row input{flex:1;background:var(--s2);border:1px solid var(--br);border-radius:6px;color:var(--t);font-size:11px;padding:7px 9px;}
.addr-pin-row input:focus{outline:none;border-color:var(--orange);}
.addr-pin-row input::placeholder{color:var(--m);}
/* ── ADDRESS AUTOCOMPLETE ── */
.ac-wrap{position:relative;width:100%;}
.ac-wrap input{width:100%;box-sizing:border-box;}
.ac-drop{position:absolute;top:calc(100% + 3px);left:0;right:0;background:var(--s2);border:1px solid var(--orange);border-radius:7px;z-index:2800;box-shadow:0 8px 32px rgba(0,0,0,.6);overflow:hidden;max-height:240px;overflow-y:auto;}
.ac-item{padding:9px 12px;font-size:11px;color:var(--t);cursor:pointer;border-bottom:1px solid var(--rule);line-height:1.4;}
.ac-item:last-child{border-bottom:none;}
.ac-item:hover,.ac-item.ac-active{background:var(--og);color:var(--orange);}
.ac-item b{font-weight:700;}
.ac-spinner{padding:8px 12px;font-size:11px;color:var(--m);text-align:center;}
/* ── MAKE THIS A LEAD BUTTON ── */
.make-lead-btn{display:flex;align-items:center;gap:7px;width:100%;justify-content:center;background:linear-gradient(135deg,var(--orange),var(--ob));color:var(--t);border:none;border-radius:7px;padding:10px 14px;font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;margin-top:10px;transition:all .2s;box-shadow:0 2px 12px var(--og);}
.make-lead-btn:hover{transform:translateY(-1px);box-shadow:0 4px 20px var(--og);}
/* ── PIN LEAD POPUP ── */
.pin-lead-popup{font-family:'Barlow',sans-serif;min-width:220px;max-width:260px;background:var(--s);border-radius:8px;overflow:hidden;}
.plp-header{background:var(--s2);padding:10px 12px;border-bottom:1px solid var(--rule);}
.plp-status{display:inline-flex;align-items:center;gap:5px;font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:5px;}
.plp-name{font-size:13px;font-weight:700;color:var(--t);}
.plp-addr{font-size:11px;color:var(--m);margin-top:2px;}
.plp-body{padding:10px 12px;}
.plp-row{display:flex;justify-content:space-between;align-items:center;padding:3px 0;font-size:11px;border-bottom:1px solid var(--rule);}
.plp-row:last-child{border-bottom:none;}
.plp-key{color:var(--m);}
.plp-val{color:var(--t);font-weight:600;text-align:right;max-width:130px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.plp-btns{padding:10px 12px;display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--rule);}
.plp-btn-go{display:flex;align-items:center;justify-content:center;gap:6px;background:var(--orange);color:var(--accent-fg);border:none;border-radius:6px;padding:8px;font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;width:100%;transition:all .15s;}
.plp-btn-go:hover{background:var(--ob);}
.plp-btn-del{display:flex;align-items:center;justify-content:center;gap:6px;background:transparent;color:var(--red);border:1px solid rgba(224,82,82,.3);border-radius:6px;padding:7px;font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;width:100%;transition:all .15s;}
.plp-btn-del:hover{background:rgba(224,82,82,.1);}
/* ── DELETE CONFIRM MODAL ── */
.del-confirm-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:2150;background:rgba(0,0,0,.75);display:none;align-items:center;justify-content:center;}
.del-confirm-overlay.open{display:flex;}
.del-confirm-box{background:var(--s);border:1px solid var(--br);border-radius:10px;padding:22px;width:300px;max-width:calc(100vw - 32px);box-shadow:0 20px 60px rgba(0,0,0,.7);}
.del-confirm-icon{font-size:28px;margin-bottom:8px;}
.del-confirm-title{font-family:'Barlow Condensed',sans-serif;font-size:17px;font-weight:700;color:var(--t);margin-bottom:4px;}
.del-confirm-sub{font-size:11px;color:var(--m);line-height:1.5;margin-bottom:16px;}
.del-confirm-name{font-size:12px;font-weight:700;color:var(--orange);margin-bottom:14px;background:var(--s2);border-radius:5px;padding:6px 10px;}
.del-confirm-btns{display:flex;gap:8px;}
.del-confirm-btns .btn{flex:1;justify-content:center;}
/* ── DELETED LEADS DRAWER ── */
.deleted-drawer{position:fixed;top:0;right:-420px;width:400px;max-width:100vw;height:100vh;height:100dvh;background:var(--s);border-left:1px solid var(--br);z-index:1500;transition:right .3s ease;box-shadow:-8px 0 40px rgba(0,0,0,.5);display:flex;flex-direction:column;}
.deleted-drawer.open{right:0;}
.deleted-drawer-hdr{padding:16px 18px;border-bottom:1px solid var(--br);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;}
.deleted-drawer-title{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;text-transform:uppercase;color:var(--t);}
.deleted-drawer-close{background:none;border:none;color:var(--m);font-size:18px;cursor:pointer;padding:4px;}
.deleted-drawer-body{flex:1;overflow-y:auto;padding:14px;}
.deleted-card{background:var(--s2);border:1px solid var(--br);border-radius:8px;padding:12px;margin-bottom:10px;opacity:.85;}
.deleted-card-name{font-size:13px;font-weight:700;color:var(--t);margin-bottom:2px;}
.deleted-card-addr{font-size:11px;color:var(--m);margin-bottom:8px;}
.deleted-card-meta{font-size:10px;color:var(--m);margin-bottom:10px;}
.deleted-card-btns{display:flex;gap:6px;}
.dc-restore{flex:1;background:rgba(46,204,138,.12);color:var(--green);border:1px solid rgba(46,204,138,.25);border-radius:5px;padding:6px;font-size:11px;font-weight:700;cursor:pointer;font-family:'Barlow Condensed',sans-serif;letter-spacing:.04em;}
.dc-restore:hover{background:rgba(46,204,138,.22);}
.dc-perm{flex:1;background:rgba(224,82,82,.08);color:var(--red);border:1px solid rgba(224,82,82,.2);border-radius:5px;padding:6px;font-size:11px;font-weight:700;cursor:pointer;font-family:'Barlow Condensed',sans-serif;letter-spacing:.04em;}
.dc-perm:hover{background:rgba(224,82,82,.18);}
.deleted-empty{text-align:center;padding:40px 20px;color:var(--m);font-size:13px;}
.btn-trash-toggle{position:relative;}
.trash-count-badge{position:absolute;top:-6px;right:-6px;background:var(--red);color:var(--t);border-radius:50%;width:16px;height:16px;font-size:9px;font-weight:800;display:flex;align-items:center;justify-content:center;display:none;}
.prop-card-inner{background:var(--s2);border:1px solid var(--br);border-radius:7px;padding:10px;margin-bottom:4px;}
.prop-card-addr{font-size:12px;font-weight:600;color:var(--blue);margin-bottom:4px;}
.prop-card-coords{font-size:10px;color:var(--m);}
/* ── PROPERTY INTEL CARD ── */
.pi-card{background:var(--s2);border:1px solid var(--br);border-radius:8px;overflow:hidden;margin-bottom:6px;}
.pi-header{background:var(--s3);padding:9px 12px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--rule);}
.pi-title{font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--orange);}
.pi-county{font-size:10px;color:var(--m);}
.pi-body{padding:10px 12px;}
.pi-owner{font-size:13px;font-weight:700;color:var(--t);margin-bottom:2px;}
.pi-addr-line{font-size:11px;color:var(--m);margin-bottom:8px;}
.pi-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 10px;margin-bottom:8px;}
.pi-stat{display:flex;flex-direction:column;}
.pi-stat-val{font-size:12px;font-weight:700;color:var(--t);}
.pi-stat-key{font-size:9px;color:var(--m);text-transform:uppercase;letter-spacing:.06em;}
.pi-roof-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:12px;font-size:10px;font-weight:800;font-family:'Barlow Condensed',sans-serif;letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px;}
.pi-roof-new{background:rgba(46,204,138,.15);color:var(--green);border:1px solid rgba(46,204,138,.3);}
.pi-roof-mid{background:rgba(234,179,8,.15);color:var(--gold);border:1px solid rgba(234,179,8,.3);}
.pi-roof-old{background:rgba(224,82,82,.15);color:var(--red);border:1px solid rgba(224,82,82,.3);}
.pi-roof-ancient{background:rgba(155,109,255,.15);color:var(--purple);border:1px solid rgba(155,109,255,.3);}
.pi-llc-flag{display:inline-flex;align-items:center;gap:4px;background:rgba(74,158,255,.12);color:var(--blue);border:1px solid rgba(74,158,255,.25);border-radius:10px;font-size:9px;font-weight:700;padding:2px 8px;letter-spacing:.05em;text-transform:uppercase;margin-left:6px;}
.pi-link{font-size:10px;color:var(--orange);text-decoration:none;display:flex;align-items:center;gap:3px;margin-top:6px;}
.pi-link:hover{text-decoration:underline;}
.pi-loading{display:flex;align-items:center;gap:8px;padding:12px;font-size:11px;color:var(--m);}
.pi-spinner{width:14px;height:14px;border:2px solid var(--br);border-top-color:var(--orange);border-radius:50%;animation:spin .7s linear infinite;flex-shrink:0;}
.pi-error{padding:10px 12px;font-size:11px;color:var(--red);}
.pi-no-key{padding:10px 12px;font-size:11px;color:var(--m);line-height:1.5;}
/* Pull intel button in lead modal */
.pull-intel-btn{display:flex;align-items:center;gap:6px;background:var(--s2);border:1px solid var(--br);border-radius:6px;padding:7px 12px;font-size:11px;font-weight:700;color:var(--m);cursor:pointer;transition:all .15s;font-family:'Barlow Condensed',sans-serif;letter-spacing:.05em;text-transform:uppercase;width:100%;justify-content:center;margin-bottom:10px;}
.pull-intel-btn:hover{border-color:var(--orange);color:var(--orange);background:var(--og);}
.pull-intel-btn.loading{color:var(--orange);border-color:var(--orange);}
/* Intel result in lead modal */
.modal-intel-result{background:var(--s2);border:1px solid var(--br);border-radius:7px;padding:10px;margin-bottom:10px;font-size:11px;display:none;}
.modal-intel-result.visible{display:block;}
.mir-owner{font-weight:700;color:var(--t);margin-bottom:4px;}
.mir-grid{display:grid;grid-template-columns:1fr 1fr;gap:3px;}
.mir-item{color:var(--m);}
.mir-item span{color:var(--t);font-weight:600;}
/* Roof age badge on kanban card */
.kct-roof{font-size:9px;font-weight:800;padding:2px 7px;border-radius:10px;text-transform:uppercase;letter-spacing:.05em;}
.kct-roof-new{background:rgba(46,204,138,.15);color:var(--green);}
.kct-roof-mid{background:rgba(234,179,8,.15);color:var(--gold);}
.kct-roof-old{background:rgba(224,82,82,.15);color:var(--red);}
.kct-roof-ancient{background:rgba(155,109,255,.15);color:var(--purple);}
.pin-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}

/* DRAW PANEL */
.lt-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-bottom:10px;}
.lt-btn{display:flex;align-items:center;gap:7px;background:var(--s2);border:2px solid var(--br);border-radius:6px;padding:7px 9px;cursor:pointer;font-size:11px;font-weight:600;color:var(--t);transition:all .2s;}
.lt-btn:hover,.lt-btn.active{background:var(--s3);}
/* ── DRAWING TOOL UPGRADES ── */
.draw-mode-row{display:flex;gap:5px;margin-bottom:8px;}
.draw-mode-btn{flex:1;background:var(--s2);border:1px solid var(--br);border-radius:6px;padding:6px 4px;font-size:10px;font-weight:700;font-family:'Barlow Condensed',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--m);cursor:pointer;text-align:center;transition:all .15s;}
.draw-mode-btn:hover{border-color:var(--orange);color:var(--t);}
.draw-mode-btn.active{background:var(--og);border-color:var(--orange);color:var(--orange);}
.draw-mode-btn.mode-perim.active{background:rgba(34,197,94,.12);border-color:#22C55E;color:#22C55E;}
.draw-mode-btn.mode-er.active{background:rgba(99,102,241,.12);border-color:#6366F1;color:#6366F1;}
.draw-mode-btn.mode-gutter.active{background:rgba(6,182,212,.12);border-color:#06B6D4;color:#06B6D4;}
.perim-bar{background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.25);border-radius:6px;padding:7px 10px;margin-bottom:8px;font-size:10px;color:#22C55E;display:none;}
.perim-bar.visible{display:block;}
.er-bar{background:rgba(99,102,241,.1);border:1px solid rgba(99,102,241,.25);border-radius:6px;padding:7px 10px;margin-bottom:8px;font-size:10px;color:#6366F1;display:none;}
.er-bar.visible{display:block;}
.er-close-btn{background:rgba(99,102,241,.2);border:1px solid rgba(99,102,241,.3);border-radius:4px;padding:3px 8px;font-size:9px;font-weight:700;color:#6366F1;cursor:pointer;margin-top:5px;width:100%;font-family:"Barlow Condensed",sans-serif;letter-spacing:.05em;}
/* Rake/Eave chooser during perimeter draw */
.re-chooser{background:var(--s);border:1px solid var(--br);border-radius:8px;padding:12px;margin-bottom:8px;display:none;box-shadow:0 4px 20px rgba(0,0,0,.4);}
.re-chooser.visible{display:block;}
.re-chooser-title{font-size:10px;color:var(--m);margin-bottom:8px;text-transform:uppercase;letter-spacing:.07em;font-weight:700;}
.re-row{display:flex;gap:6px;}
.re-btn{flex:1;padding:8px 6px;border-radius:6px;font-size:11px;font-weight:700;font-family:"Barlow Condensed",sans-serif;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;text-align:center;border:1px solid;}
.re-btn-eave{background:rgba(190,29,93,.12);border-color:#BE185D;color:#BE185D;}
.re-btn-rake{background:rgba(236,72,153,.12);border-color:#EC4899;color:#EC4899;}
.re-btn:hover{filter:brightness(1.2);}
/* Line select highlight */
.line-item{display:flex;align-items:center;gap:6px;padding:5px 6px;border-radius:5px;cursor:pointer;transition:background .12s;}
.line-item:hover{background:var(--s3);}
.line-item.selected{background:var(--og);outline:1px solid var(--orange);}
/* Line type change inline */
.line-type-sel{background:var(--s3);border:1px solid var(--orange);border-radius:4px;color:var(--t);font-size:10px;padding:2px 4px;margin-left:auto;}
/* Gutter calc result */
.gutter-result{background:var(--s2);border:1px solid var(--br);border-radius:6px;padding:8px 10px;margin-top:6px;display:none;}
.gutter-result.visible{display:block;}
.gr-row{display:flex;justify-content:space-between;font-size:11px;padding:2px 0;}
.gr-key{color:var(--m);}
.gr-val{color:var(--t);font-weight:700;}
.lt-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;}
.draw-btns{display:flex;gap:5px;margin-bottom:10px;}
.draw-btn{flex:1;padding:8px 5px;border:1px solid var(--br);border-radius:6px;background:var(--s2);color:var(--t);font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;transition:all .2s;}
.draw-btn:hover{border-color:var(--orange);color:var(--orange);}
.draw-btn.go{background:var(--green);border-color:var(--green);color:var(--bg);}
.draw-btn.go:hover{background:#25b87a;}
.draw-btn.stop{background:rgba(224,82,82,.12);border-color:var(--red);color:var(--red);}
.line-list{display:flex;flex-direction:column;gap:4px;max-height:180px;overflow-y:auto;margin-bottom:10px;}
.line-item{display:flex;align-items:center;gap:7px;background:var(--s2);border:1px solid var(--br);border-radius:5px;padding:6px 9px;font-size:11px;}
.line-lbl{flex:1;font-weight:500;}
.line-len{color:var(--orange);font-weight:700;font-family:'Barlow Condensed',sans-serif;font-size:12px;}
.line-del{background:none;border:none;color:var(--m);cursor:pointer;font-size:12px;padding:1px 3px;transition:color .2s;}
.line-del:hover{color:var(--red);}
/* Per-type totals at the top of the LINES list */
.line-totals{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:6px;padding-bottom:6px;border-bottom:1px solid var(--br);}
.line-total-chip{display:inline-flex;align-items:center;gap:5px;background:var(--s2);border:1px solid var(--br);border-radius:999px;padding:3px 9px;font-size:10px;color:var(--t);line-height:1;}
.line-total-chip .lt-dot{width:7px;height:7px;}
.line-total-chip-name{font-weight:600;}
.line-total-chip-meta{color:var(--m);}
.line-total-chip-len{color:var(--orange);font-weight:700;font-family:'Barlow Condensed',sans-serif;font-size:11px;letter-spacing:.02em;}
/* Per-line type ordinal (#N) */
.line-num{color:var(--m);font-weight:500;margin-left:2px;}
.calc-selects{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:8px;}
.calc-select{background:var(--s2);border:1px solid var(--br);border-radius:6px;padding:8px 9px;font-family:'Barlow',sans-serif;font-size:11px;color:var(--t);outline:none;width:100%;}
.calc-select:focus{border-color:var(--orange);}
.calc-result{background:var(--s3);border:1px solid var(--br);border-radius:7px;padding:10px;margin-bottom:10px;}
.cr-row{display:flex;justify-content:space-between;padding:3px 0;font-size:11px;border-bottom:1px solid rgba(255,255,255,.04);}
.cr-row:last-child{border-bottom:none;font-weight:700;font-size:13px;}
.cr-key{color:var(--m);}
.cr-val{color:var(--t);}
.cr-row.hl .cr-val{color:var(--orange);font-family:'Barlow Condensed',sans-serif;font-size:16px;}

/* ESTIMATE BUILDER */
.est-steps{display:flex;gap:0;margin-bottom:22px;}
.est-step{flex:1;text-align:center;position:relative;}
.est-step::after{content:'';position:absolute;top:14px;left:50%;width:100%;height:2px;background:var(--br);}
.est-step:last-child::after{display:none;}
.step-circle{width:28px;height:28px;border-radius:50%;border:2px solid var(--br);background:var(--s2);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;font-family:'Barlow Condensed',sans-serif;margin:0 auto 5px;position:relative;z-index:1;transition:all .3s;}
.step-label{font-size:9px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--m);}
.est-step.active .step-circle{border-color:var(--orange);background:var(--orange);color:var(--accent-fg);}
.est-step.done .step-circle{border-color:var(--green);background:var(--green);color:var(--t);}
.est-step.active .step-label,.est-step.done .step-label{color:var(--t);}
.tier-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:16px 0;}
@media (max-width:520px){ .tier-grid{ grid-template-columns:1fr; gap:10px; } }
.tier-card{background:var(--s2);border:2px solid var(--br);border-radius:10px;padding:16px;cursor:pointer;transition:all .25s;position:relative;overflow:hidden;}
.tier-card:hover{border-color:rgba(255,255,255,.2);}
.tier-card.selected{border-color:var(--orange);background:color-mix(in srgb, var(--orange) 7%, transparent);}
.tier-card.selected::before{content:'✓';position:absolute;top:8px;right:10px;color:var(--orange);font-weight:700;font-size:14px;}
.tier-badge{font-family:'Barlow Condensed',sans-serif;font-size:9px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;padding:2px 8px;border-radius:12px;margin-bottom:8px;display:inline-block;}
.tier-good{background:rgba(74,158,255,.15);color:var(--blue);}
.tier-better{background:color-mix(in srgb, var(--orange) 15%, transparent);color:var(--orange);}
.tier-best{background:rgba(46,204,138,.15);color:var(--green);}
.tier-name{font-family:'Barlow Condensed',sans-serif;font-size:17px;font-weight:700;margin-bottom:6px;}
.tier-items{font-size:11px;color:var(--m);line-height:1.7;}
.tier-price{font-family:'Barlow Condensed',sans-serif;font-size:22px;font-weight:700;color:var(--orange);margin-top:10px;}
.est-meas-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:16px;}
.meas-field label{display:block;font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--m);margin-bottom:5px;}
.meas-field input,.meas-field select{width:100%;background:var(--s2);border:1px solid var(--br);border-radius:7px;padding:9px 10px;font-family:'Barlow',sans-serif;font-size:13px;color:var(--t);outline:none;transition:border-color .2s;}
.meas-field input:focus,.meas-field select:focus{border-color:var(--orange);}
.li-table{width:100%;border-collapse:collapse;font-size:12px;display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.li-table th{font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--m);padding:6px 10px;border-bottom:1px solid var(--br);text-align:left;}
.li-table td{padding:7px 10px;border-bottom:1px solid rgba(255,255,255,.04);}
.li-table .code{color:var(--orange);font-weight:700;font-family:'Barlow Condensed',sans-serif;}
.li-table .total-row td{font-weight:700;border-top:2px solid var(--br);color:var(--t);}
.li-table .grand{background:color-mix(in srgb, var(--orange) 6%, transparent);}
.li-table .grand td{color:var(--orange);font-family:'Barlow Condensed',sans-serif;font-size:15px;}

/* ESTIMATE CARD */
.est-card{background:var(--s2);border:1px solid var(--br);border-radius:8px;padding:13px 15px;display:flex;align-items:center;gap:12px;margin-bottom:8px;cursor:pointer;transition:all .2s;}
.est-card:hover{border-color:var(--orange);background:color-mix(in srgb, var(--orange) 4%, transparent);}
.est-addr{font-size:13px;font-weight:600;color:var(--blue);margin-bottom:2px;}
.est-meta{font-size:11px;color:var(--m);}
.est-total{font-family:'Barlow Condensed',sans-serif;font-size:20px;font-weight:700;color:var(--orange);margin-left:auto;flex-shrink:0;}

/* ── Rebuilt Estimates list cards (April 2026) ── */
/* The full-width card now has a click-to-open body and an
   explicit action bar with edit/duplicate/rename/assign/delete.
   We override .est-card display:flex with flex-direction:column
   so the action row sits below the body instead of inline. */
.nbd-est-card {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
  cursor: default;
}
.nbd-est-card .est-card-main {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px 10px;
  cursor: pointer;
}
.nbd-est-card .est-card-icon { font-size: 22px; flex-shrink: 0; }
.nbd-est-card .est-card-body { flex: 1; min-width: 0; }
.nbd-est-card .est-card-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 16px; font-weight: 700;
  color: var(--t, #fff);
  text-transform: uppercase; letter-spacing: .03em;
  margin-bottom: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nbd-est-card .est-card-meta {
  font-size: 11px; color: var(--m, #888);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nbd-est-card .est-card-chips {
  display: flex; gap: 6px; margin-top: 6px;
  flex-wrap: wrap; align-items: center;
}
.est-lead-chip {
  font-size: 10px; font-weight: 600;
  padding: 3px 8px; border-radius: 12px;
  border: 1px solid var(--br, #2a2d35);
  display: inline-flex; align-items: center; gap: 4px;
  cursor: pointer;
  max-width: 180px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.est-lead-chip.assigned { color: #4ade80; border-color: rgba(74,222,128,.35); background: rgba(74,222,128,.06); }
.est-lead-chip.unassigned { color: var(--m, #888); background: var(--s3, #1a1d23); }
.est-lead-chip.unassigned:hover { color: var(--orange); border-color: var(--orange); }
.est-src-chip {
  font-size: 9px; font-weight: 700;
  letter-spacing: .1em;
  padding: 2px 7px; border-radius: 3px;
  text-transform: uppercase;
}
.est-src-chip.v2 { background: color-mix(in srgb, var(--orange) 12%, transparent); color: var(--orange); border: 1px solid color-mix(in srgb, var(--orange) 30%, transparent); }
.est-src-chip.classic { background: rgba(96,165,250,.08); color: #60a5fa; border: 1px solid rgba(96,165,250,.25); }
.est-date { font-size: 10px; color: var(--m, #888); margin-left: auto; }
.nbd-est-card .est-card-total {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 22px; font-weight: 700;
  color: var(--orange, var(--orange));
  flex-shrink: 0;
}
.nbd-est-card .est-card-actions {
  display: flex; gap: 4px;
  padding: 8px 12px 12px;
  border-top: 1px solid var(--br, #2a2d35);
  flex-wrap: wrap;
}
.est-act-btn {
  background: none;
  border: 1px solid var(--br, #2a2d35);
  color: var(--m, #888);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px; font-weight: 600;
  letter-spacing: .04em;
  padding: 10px 12px;
  border-radius: 5px;
  cursor: pointer;
  transition: all .15s;
  /* iOS HIG min 44x44 tap target. Previously 32px, which was
     hard to hit accurately in the field on iPhone. */
  min-height: 44px;
  min-width: 44px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.est-act-btn:hover { color: var(--orange, var(--orange)); border-color: var(--orange, var(--orange)); background: color-mix(in srgb, var(--orange) 6%, transparent); }
.est-act-btn.danger:hover { color: #ef4444; border-color: #ef4444; background: rgba(239,68,68,.06); }
@media (max-width: 600px) {
  .nbd-est-card .est-card-main { flex-wrap: wrap; }
  .nbd-est-card .est-card-total { width: 100%; text-align: right; margin-top: 4px; }
  .est-act-btn { flex: 1; min-width: 70px; }
}
/* ── End rebuilt cards ── */

/* DAMAGE PHOTOS */
.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px;}
@media (max-width:480px){ .photo-grid{ grid-template-columns:repeat(2,1fr); gap:6px; } }
.photo-thumb{aspect-ratio:1;border-radius:6px;overflow:hidden;border:1px solid var(--br);cursor:pointer;position:relative;}
.photo-thumb img{width:100%;height:100%;object-fit:cover;}
.photo-thumb:hover img{opacity:.85;}
.upload-zone{border:2px dashed var(--br);border-radius:8px;padding:20px;text-align:center;cursor:pointer;transition:border-color .2s;}
.upload-zone:hover{border-color:var(--orange);}
.upload-zone input{display:none;}
.upload-icon{font-size:28px;margin-bottom:8px;opacity:.5;}
.upload-text{font-size:12px;color:var(--m);}

/* LEADERBOARD */
.lb-rank{font-family:'Barlow Condensed',sans-serif;font-size:18px;font-weight:700;width:32px;text-align:center;}
.lb-rank.gold{color:var(--gold)}.lb-rank.silver{color:#9CA3AF}.lb-rank.bronze{color:#92400E}
.lb-name{font-size:13px;font-weight:600;}
.lb-bar{flex:1;background:var(--s3);border-radius:4px;height:6px;overflow:hidden;}
.lb-fill{height:100%;border-radius:4px;background:var(--orange);transition:width .6s ease;}

/* SETTINGS */
.settings-section{margin-bottom:24px;}

/* ── SETTINGS TABS ─────────────────────────────────────────────────── */
.stab-btn{background:transparent;border:none;border-bottom:2px solid transparent;padding:10px 18px;font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--m);cursor:pointer;transition:all .15s;white-space:nowrap;margin-bottom:-2px;}
.stab-btn:hover{color:var(--t);}
.stab-btn.stab-active{color:var(--orange);border-bottom-color:var(--orange);}
.stab-panel{animation:fadeIn .15s ease;}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
/* ═══ TEMPLATE LIBRARY ═══ */
.tl-filters{display:flex;gap:8px;flex-wrap:wrap;padding:0 16px 16px;margin-top:-4px;}
.tl-filter-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:20px;border:1px solid var(--br);background:var(--s);color:var(--m);font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:600;letter-spacing:.04em;cursor:pointer;transition:all .2s;-webkit-tap-highlight-color:transparent;white-space:nowrap;}
.tl-filter-btn:hover{background:var(--s2);color:var(--t);border-color:color-mix(in srgb, var(--orange) 30%, transparent);}
.tl-filter-btn:active{transform:scale(.96);}
.tl-filter-active{background:var(--orange)!important;color:var(--accent-fg)!important;border-color:var(--orange)!important;}
.tl-filter-count{font-size:11px;opacity:.7;font-weight:400;}
.tl-category{margin:0 16px 16px;border:1px solid var(--br);border-radius:10px;background:var(--s);overflow:hidden;transition:box-shadow .2s;}
.tl-category:hover{box-shadow:0 2px 12px rgba(0,0,0,.08);}
.tl-cat-header{display:flex;align-items:center;gap:10px;padding:14px 16px;cursor:pointer;user-select:none;transition:background .15s;-webkit-tap-highlight-color:transparent;}
.tl-cat-header:hover{background:var(--s2);}
.tl-cat-header:active{background:color-mix(in srgb, var(--orange) 6%, transparent);}
.tl-cat-chevron{font-size:14px;color:var(--m);font-weight:700;width:16px;text-align:center;transition:transform .2s;}
.tl-category.tl-collapsed .tl-cat-chevron{transform:rotate(-90deg);}
.tl-cat-icon{font-size:20px;}
.tl-cat-title{margin:0;font-size:15px;font-weight:700;font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.06em;flex:1;}
.tl-cat-badge{font-size:10px;font-weight:600;padding:3px 10px;border-radius:10px;letter-spacing:.04em;}
.tl-cat-count{font-size:12px;color:var(--m);font-weight:500;white-space:nowrap;}
.tl-cat-body{border-top:1px solid var(--br);transition:max-height .3s ease;}
.tl-category.tl-collapsed .tl-cat-body{display:none;}
.tl-doc-row{display:flex;align-items:center;gap:14px;padding:14px 16px;border-bottom:1px solid var(--br);cursor:pointer;transition:background .15s,padding-left .15s;-webkit-tap-highlight-color:transparent;}
.tl-doc-row:last-child{border-bottom:none;}
.tl-doc-row:hover{background:var(--s2);padding-left:20px;}
.tl-doc-row:active{background:color-mix(in srgb, var(--orange) 6%, transparent);}
.tl-doc-icon{width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;transition:transform .15s;}
.tl-doc-row:hover .tl-doc-icon{transform:scale(1.08);}
.tl-doc-info{flex:1;min-width:0;}
.tl-doc-name{font-family:'Barlow Condensed',sans-serif;font-size:15px;font-weight:700;color:var(--t);letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tl-doc-desc{font-size:12px;color:var(--m);margin-top:2px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.tl-doc-arrow{font-size:16px;color:var(--m);font-weight:700;opacity:0;transition:opacity .15s,transform .15s;}
.tl-doc-row:hover .tl-doc-arrow{opacity:1;transform:translateX(3px);}
@media(max-width:768px){
  .tl-filters{padding:0 12px 12px;gap:6px;}
  .tl-filter-btn{padding:7px 12px;font-size:12px;}
  .tl-category{margin:0 12px 12px;}
  .tl-cat-header{padding:12px 14px;gap:8px;}
  .tl-cat-badge{display:none;}
  .tl-doc-row{padding:12px 14px;gap:10px;}
  .tl-doc-icon{width:36px;height:36px;font-size:17px;}
  .tl-doc-name{font-size:14px;}
  .tl-doc-desc{font-size:11px;-webkit-line-clamp:1;}
  .tl-doc-arrow{opacity:1;font-size:14px;}
}
@media(max-width:480px){
  .tl-filters{gap:4px;}
  .tl-filter-btn{padding:6px 10px;font-size:11px;}
  .tl-filter-count{display:none;}
  .tl-cat-title{font-size:13px;}
  .tl-cat-count{font-size:11px;}
  .tl-doc-row{min-height:44px;}
}

.settings-section.collapsible { border: 1px solid var(--br); border-radius: 8px; padding: 0; background: var(--s); }
.settings-section.collapsible .settings-title { 
  cursor: pointer; 
  user-select: none; 
  margin: 0; 
  padding: 14px 16px; 
  border-bottom: none; 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  transition: background .15s; 
}
.settings-section.collapsible .settings-title:hover { background: var(--s2); }
.settings-section.collapsible .settings-title::after { 
  content: '▼'; 
  font-size: 10px; 
  color: var(--m); 
  transition: transform .2s; 
}
.settings-section.collapsible.collapsed .settings-title::after { transform: rotate(-90deg); }
.settings-section-content { 
  padding: 0 16px 16px; 
  overflow: hidden; 
  transition: max-height .3s ease, opacity .2s ease; 
}
.settings-section.collapsed .settings-section-content { 
  max-height: 0 !important; 
  opacity: 0; 
  padding: 0 16px; 
}
.settings-title{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--br);}
.sf-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px;}
.sf label{display:block;font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--m);margin-bottom:5px;}
.sf input{width:100%;background:var(--s2);border:1px solid var(--br);border-radius:7px;padding:10px 12px;font-family:'Barlow',sans-serif;font-size:13px;color:var(--t);outline:none;}
.sf input:focus{border-color:var(--orange);}

/* MODAL */
.modal-bg{display:none;position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,.7);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:2000;align-items:center;justify-content:center;}
.modal-bg.open{display:flex;}
.modal{background:var(--s);border:1px solid var(--br);border-radius:12px;padding:28px;width:100%;max-width:500px;position:relative;max-height:90vh;overflow-y:auto;}
.modal::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--orange),transparent);}
.modal-close{position:absolute;top:12px;right:14px;background:none;border:none;color:var(--m);font-size:17px;cursor:pointer;}
.modal-close:hover{color:var(--t);}

/* ══ M-MODAL-BAR (Wave 2E 2026-05-14) ══════════════════════════════════
   Standardized header row for modals. JobNimbus / CompanyCam pattern:
   ✕ (close) on the left, title centered, optional action button (✓ /
   share / ⋯) on the right. Replaces the floating-X + ad-hoc-heading
   combo every modal was reinventing.
   Usage:
     <div class="modal-bg" id="someModal">
       <div class="modal m-modal-has-bar">
         <div class="m-modal-bar">
           <button class="m-modal-bar-x" data-action="closeModal" data-target="...">✕</button>
           <div class="m-modal-bar-titles">
             <span class="m-modal-bar-eyebrow">CRM</span>
             <span class="m-modal-bar-title">Add Lead</span>
           </div>
           <button class="m-modal-bar-action" data-action="call" data-fn="...">Save</button>
         </div>
         <!-- form body -->
       </div>
     </div>
   `.m-modal-has-bar` removes the default 28px top padding so the bar
   sits flush; the floating .modal-close is auto-hidden when the bar is
   present. Orange ::before gradient stays for NBD signature. */
.modal.m-modal-has-bar{ padding-top:0; }
.modal.m-modal-has-bar > .modal-close{ display:none; }
.m-modal-bar{
  position:sticky; top:0; z-index:2;
  display:flex; align-items:center; gap:8px;
  margin:0 -28px 18px;          /* extend to modal edges */
  padding:10px 12px;
  background:color-mix(in srgb, var(--s) 92%, transparent);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--br);
  border-top-left-radius:12px; border-top-right-radius:12px;
  min-height:48px;
}
.m-modal-bar-x{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; padding:0;
  background:transparent; border:none; border-radius:8px;
  color:var(--m); cursor:pointer; flex-shrink:0;
  font-size:18px; line-height:1;
  -webkit-tap-highlight-color:transparent;
  transition:color .15s, background .15s;
}
.m-modal-bar-x:hover{ color:var(--t); background:color-mix(in srgb, var(--t) 8%, transparent); }
.m-modal-bar-x:active{ transform:scale(.94); }
.m-modal-bar-titles{
  flex:1; min-width:0;
  display:flex; flex-direction:column; align-items:center; gap:1px;
  text-align:center;
}
.m-modal-bar-eyebrow{
  font-family:'Barlow Condensed',sans-serif;
  font-size:9px; font-weight:800;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--orange);
  line-height:1.1;
}
.m-modal-bar-title{
  font-family:'Barlow Condensed',sans-serif;
  font-size:16px; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase;
  color:var(--t);
  line-height:1.15;
  max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.m-modal-bar-action{
  background:transparent; border:none;
  color:var(--orange); font-weight:700; font-size:13px;
  padding:8px 10px; border-radius:6px;
  cursor:pointer; flex-shrink:0;
  font-family:inherit;
  -webkit-tap-highlight-color:transparent;
  min-width:36px; min-height:36px;
}
.m-modal-bar-action:hover{ background:color-mix(in srgb, var(--orange) 12%, transparent); }
.m-modal-bar-action:disabled{ color:var(--m); cursor:not-allowed; }
.m-modal-bar-spacer{ width:36px; flex-shrink:0; }
/* Mobile: pin the bar above the safe-area inset so iPhone notches
   don't eat the close button. */
@media (max-width:768px){
  .m-modal-bar{
    padding-top:calc(10px + env(safe-area-inset-top, 0px));
  }
}
/* ══ END M-MODAL-BAR ══ */

/* ══ WAVE 3 — KANBAN POLISH (2026-05-14) ═════════════════════════════
   Two small wins:
     A. Tighter, lighter column headers — claws back vertical space
        and stops the headers from competing with the cards visually.
     B. Hover-reveal stage arrows on desktop — cards read cleaner at
        rest; arrows fade in only when you mean to interact with the
        card. Touch devices keep arrows always-on via @media (hover:none). */

/* A. Column header — tighter padding, hairline border instead of 2px,
   slightly lighter font weight. Wins ~6px of vertical per column. */
.kcol-header{
  padding:7px 12px !important;
  border-bottom:1px solid currentColor !important;
  font-weight:600 !important;
}
.kcol-count{ font-weight:700; }

/* B. Hover-reveal arrows.
   Hotfix 2026-05-14: dropping (pointer:fine) — hybrid-touch desktops
   (Windows laptops, Brave on touch monitors) register as
   (pointer:coarse), which was breaking the desktop hide. New rule:
   hide whenever the device CAN hover (hover:hover); show whenever it
   can't (hover:none). Belt-and-suspenders default + always-visible on
   :focus-within keeps keyboard a11y intact. */
.kc-arrow{
  opacity:.35;
  transition:opacity .15s ease, color .15s, transform .15s, background .15s;
}
.k-card:hover .kc-arrow,
.k-card:focus-within .kc-arrow,
.kc-arrow:focus-visible{
  opacity:1;
}
@media (hover: none){
  /* Touch devices have no hover — keep arrows fully visible at rest so
     tap targets are obvious. */
  .kc-arrow{ opacity:1; }
}
/* ══ END WAVE 3 ══ */

/* ══ Phase D.2 — Cross-lead Recent Photo Feed (CompanyCam-style) ════
   The Photo Library now has two modes: "By Property" (existing per-
   lead gallery) and "Recent" (chronological feed across every lead
   the rep owns). The Recent feed groups photos by date and lays them
   out as a 3-up grid — same data shape PhotoEngine already uses, just
   queried with .where('userId','==',uid).orderBy('uploadedAt','desc')
   instead of by lead. Each tile carries a small lead-name overlay so
   the rep can pivot back into the per-lead view from a thumbnail. */
.ph-mode-toggle{
  display:inline-flex;
  background:var(--s2);
  border:1px solid var(--br);
  border-radius:6px;
  padding:2px;
  gap:2px;
  flex-shrink:0;
}
.ph-mode-btn{
  background:transparent;
  border:none;
  color:var(--m);
  font-family:'Barlow Condensed',sans-serif;
  font-size:11px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:6px 12px;
  border-radius:4px;
  cursor:pointer;
  transition:color .15s, background .15s;
}
.ph-mode-btn:hover{ color:var(--t); }
.ph-mode-btn.active{
  background:var(--orange);
  color:var(--accent-fg);
  box-shadow:inset 0 0 0 1px var(--accent-ring);
}
.ph-recent-group{ margin-bottom:18px; }
.ph-recent-date{
  font-family:'Barlow Condensed',sans-serif;
  font-size:11px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--m);
  margin:8px 0 8px;
  padding-bottom:6px;
  border-bottom:1px solid var(--br);
}
.ph-recent-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
  gap:8px;
}
.ph-recent-tile{
  position:relative;
  aspect-ratio:1;
  overflow:hidden;
  border-radius:6px;
  background:var(--s2);
  cursor:pointer;
  transition:transform .12s;
}
.ph-recent-tile:hover{ transform:scale(1.02); }
.ph-recent-tile img{
  width:100%; height:100%;
  object-fit:cover;
}
.ph-recent-tile-label{
  position:absolute;
  bottom:0; left:0; right:0;
  padding:6px 8px 6px;
  background:linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,.0));
  color:#fff;
  font-size:10px;
  font-weight:600;
  letter-spacing:.02em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  pointer-events:none;
}
/* ══ END Phase D.2 ══ */
.mfield{margin-bottom:12px;}
.mfield label{display:block;font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--m);margin-bottom:5px;}
.mfield input,.mfield select,.mfield textarea{width:100%;background:var(--s2);border:1px solid var(--br);border-radius:7px;padding:9px 11px;font-family:'Barlow',sans-serif;font-size:13px;color:var(--t);outline:none;}
.mfield input:focus,.mfield select:focus,.mfield textarea:focus{border-color:var(--orange);}
.mfield select option{background:var(--s2);}
.mfield textarea{resize:vertical;min-height:65px;}
.mrow{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.msave{width:100%;background:var(--orange);color:var(--accent-fg);border:none;border-radius:8px;padding:11px;font-family:'Barlow Condensed',sans-serif;font-size:15px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;margin-top:6px;}
.msave:hover{background:var(--ob);}
/* Next Actions panel — context-aware action chips inside the lead modal */
.nap-btn{display:inline-flex;align-items:center;gap:6px;background:var(--s2);border:1px solid var(--br);border-radius:18px;padding:6px 11px;font-family:'Barlow',sans-serif;font-size:12px;color:var(--t);cursor:pointer;transition:all .15s;}
.nap-btn:hover{border-color:var(--orange);background:rgba(212,160,23,.08);}
.nap-btn .nap-ico{font-size:14px;line-height:1;}
.nap-btn .nap-lbl{font-weight:600;letter-spacing:.01em;}
.nap-btn .nap-kind{font-size:8px;letter-spacing:.1em;text-transform:uppercase;color:var(--m);background:var(--s);border:1px solid var(--br);border-radius:8px;padding:1px 6px;font-weight:700;}
.nap-btn .nap-kind-doc{color:#0891b2;border-color:rgba(8,145,178,.4);}
.nap-btn .nap-kind-stage{color:#16a34a;border-color:rgba(22,163,74,.4);}
/* Trade chip — selected state controlled inline by toggleTradeChip */
.trade-chip:hover{border-color:var(--orange);}
/* Touch-device polish — chips inside modals are the easiest tap target to
   miss on a phone, so we bump them to a 40px floor and kill hover sticking. */
@media (pointer: coarse) {
  .nap-btn { min-height: 40px; padding: 8px 13px; font-size: 13px; }
  .nap-btn .nap-ico { font-size: 15px; }
  .nap-btn:hover { background: var(--s2); border-color: var(--br); }
  .trade-chip { min-height: 36px; padding: 8px 13px !important; font-size: 12px !important; }
  .trade-chip:hover { border-color: var(--br); }
}
.merr{background:rgba(220,50,50,.1);border:1px solid rgba(220,50,50,.3);border-radius:6px;padding:7px 11px;font-size:11px;color:#ff7070;margin-bottom:10px;display:none;}
.mok{background:rgba(46,204,138,.1);border:1px solid rgba(46,204,138,.3);border-radius:6px;padding:7px 11px;font-size:11px;color:var(--green);margin-bottom:10px;display:none;}

/* TIPS MODAL */
.tip-card{background:var(--s2);border:1px solid var(--br);border-radius:8px;padding:12px 14px;margin-bottom:8px;}
.tip-num{font-family:'Barlow Condensed',sans-serif;font-size:11px;color:var(--orange);font-weight:700;margin-bottom:3px;}
.tip-text{font-size:12px;color:var(--t);line-height:1.5;}

/* TOAST */
.toast{position:fixed;bottom:20px;right:20px;background:var(--s);border:1px solid var(--br);border-radius:8px;padding:10px 16px;font-size:13px;z-index:3000;transform:translateY(60px);opacity:0;transition:all .3s;pointer-events:none;display:flex;flex-direction:column;gap:8px;min-width:200px;}
.toast.show{transform:translateY(0);opacity:1;}
.toast.success,.toast.ok{border-color:var(--green);color:var(--green);}
.toast.error{border-color:var(--red);color:var(--red);}
.toast.info{border-color:var(--blue);color:var(--blue);}
.toast.warning{border-color:var(--gold,var(--gold));color:var(--gold,var(--gold));}
.toast-progress{height:3px;background:currentColor;border-radius:3px;animation:toast-progress 2.8s linear;}
@keyframes toast-progress{from{width:100%;}to{width:0%;}}

/* TOGGLE SWITCH */
.toggle-switch{position:relative;display:inline-block;width:44px;height:24px;}
.toggle-switch input{opacity:0;width:0;height:0;}
.toggle-slider{
  position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;
  background:var(--s3);border:1px solid var(--br);border-radius:24px;
  transition:all .25s ease;
}
.toggle-slider:before{
  content:'';position:absolute;height:16px;width:16px;left:3px;bottom:3px;
  background:var(--m);border-radius:50%;transition:all .25s ease;
}
.toggle-switch input:checked + .toggle-slider{
  background:var(--orange);border-color:var(--orange);
}
.toggle-switch input:checked + .toggle-slider:before{
  background:#fff;transform:translateX(20px);
}
.toggle-slider:hover{border-color:var(--orange);}


/* MEAS LABEL */
.meas-label{background:rgba(10,12,15,.88);color:var(--t);border:1px solid color-mix(in srgb, var(--orange) 60%, transparent);border-radius:3px;padding:2px 6px;font-size:10px;font-weight:700;font-family:'Barlow Condensed',sans-serif;white-space:nowrap;cursor:pointer;pointer-events:auto;}

/* DRAW TOOL — shortcut hint */
.draw-shortcut-hint{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(10,12,15,.92);color:var(--t);font-family:'Barlow Condensed',sans-serif;font-size:18px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:10px 24px;border-radius:8px;border:1px solid var(--orange);pointer-events:none;z-index:9000;animation:shintFade .7s ease-out forwards;}
@keyframes shintFade{0%{opacity:1;transform:translate(-50%,-50%) scale(1);}100%{opacity:0;transform:translate(-50%,-60%) scale(.95);}}

/* DRAW TOOL — facet area label on map */
.facet-area-label{background:rgba(10,12,15,.85);color:var(--t);border:1px solid rgba(74,158,255,.5);border-radius:4px;padding:3px 8px;font-size:11px;font-weight:700;font-family:'Barlow Condensed',sans-serif;white-space:nowrap;text-align:center;}

/* DRAW TOOL — angle labels */
.angle-label{background:rgba(10,12,15,.8);color:var(--gold);border:1px solid rgba(234,179,8,.4);border-radius:3px;padding:1px 5px;font-size:9px;font-weight:700;font-family:'Barlow Condensed',sans-serif;white-space:nowrap;}
.angle-label-marker{background:none!important;border:none!important;}

/* DRAW TOOL — facet list in sidebar */
.facet-list{display:flex;flex-direction:column;gap:4px;max-height:160px;overflow-y:auto;margin-bottom:10px;}
.facet-row{display:flex;align-items:center;gap:8px;padding:6px 8px;background:var(--s2);border:1px solid var(--br);border-radius:5px;font-size:11px;cursor:pointer;transition:border-color .15s;}
.facet-row:hover{border-color:var(--orange);}
.facet-name{font-weight:700;color:var(--t);flex:1;font-family:'Barlow Condensed',sans-serif;letter-spacing:.03em;text-transform:uppercase;}
.facet-area{color:var(--m);font-size:10px;white-space:nowrap;}
.facet-pitch-sel{background:var(--s);border:1px solid var(--br);border-radius:4px;padding:2px 4px;font-size:10px;color:var(--t);font-family:inherit;cursor:pointer;}
.facet-pitch-sel:focus{border-color:var(--orange);outline:none;}

/* DRAW TOOL — structure list */
.structure-row{display:flex;align-items:center;gap:6px;padding:6px 8px;background:var(--s2);border:1px solid var(--br);border-radius:5px;font-size:11px;cursor:pointer;transition:all .15s;margin-bottom:3px;}
.structure-row:hover{border-color:var(--orange);}
.structure-active{border-color:var(--orange);background:color-mix(in srgb, var(--orange) 6%, transparent);}
.structure-icon{font-size:14px;}
.structure-name{flex:1;font-weight:700;font-family:'Barlow Condensed',sans-serif;color:var(--t);letter-spacing:.03em;text-transform:uppercase;}
.structure-rename,.structure-del{background:none;border:none;color:var(--m);cursor:pointer;font-size:11px;padding:2px 4px;}
.structure-rename:hover{color:var(--orange);}
.structure-del:hover{color:var(--red);}

/* DRAW TOOL — voice button active state */
.voice-active{background:rgba(239,68,68,.15)!important;border-color:#EF4444!important;color:#EF4444!important;animation:voicePulse 1.5s infinite;}
@keyframes voicePulse{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.3);}50%{box-shadow:0 0 0 6px rgba(239,68,68,0);}}

/* DRAW TOOL — presentation overlay */
#presentOverlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:900;pointer-events:none;display:flex;flex-direction:column;justify-content:flex-end;}
.present-bar{pointer-events:all;background:rgba(10,12,15,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:2px solid var(--orange);padding:16px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px;}
.present-title{font-family:'Barlow Condensed',sans-serif;font-size:20px;font-weight:800;text-transform:uppercase;color:var(--t);letter-spacing:.04em;}
.present-controls{display:flex;align-items:center;gap:8px;}
.present-btn{background:var(--s2);border:1px solid var(--br);border-radius:6px;padding:8px 14px;font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:700;color:var(--t);cursor:pointer;text-transform:uppercase;letter-spacing:.06em;transition:all .15s;}
.present-btn:hover{border-color:var(--orange);color:var(--orange);}
.present-btn-next{background:var(--orange);border-color:var(--orange);color:var(--accent-fg);}
.present-btn-next:hover{background:#B44A17;}
.present-btn-close{border-color:var(--red);color:var(--red);}
.present-step{font-size:11px;color:var(--m);font-weight:700;letter-spacing:.1em;}
.present-info{pointer-events:all;background:rgba(10,12,15,.85);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:12px 20px;font-size:13px;color:var(--m);border-top:1px solid var(--br);}

/* DRAW TOOL — comparison results */
.comp-row{display:flex;align-items:center;gap:4px;padding:5px 8px;border-radius:4px;font-size:11px;margin-bottom:2px;}
.comp-label{flex:1;font-weight:600;color:var(--t);}
.comp-ours,.comp-theirs{width:55px;text-align:right;font-family:'Barlow Condensed',sans-serif;font-weight:700;}
.comp-ours{color:var(--orange);}
.comp-theirs{color:var(--blue);}
.comp-diff{width:50px;text-align:right;font-weight:700;font-size:10px;}
.comp-match{background:rgba(46,204,138,.06);}.comp-match .comp-diff{color:var(--green);}
.comp-warn{background:rgba(234,179,8,.06);}.comp-warn .comp-diff{color:var(--gold);}
.comp-off{background:rgba(239,68,68,.06);}.comp-off .comp-diff{color:var(--red);}

/* MARKER CLUSTER — NBD Pro brand */
.marker-cluster-small{background:color-mix(in srgb, var(--orange) 35%, transparent)!important}
.marker-cluster-small div{background:color-mix(in srgb, var(--orange) 70%, transparent)!important;color:var(--t)!important;font-family:'Barlow Condensed',sans-serif!important;font-weight:700!important}
.marker-cluster-medium{background:color-mix(in srgb, var(--orange) 45%, transparent)!important}
.marker-cluster-medium div{background:color-mix(in srgb, var(--orange) 80%, transparent)!important;color:var(--t)!important;font-family:'Barlow Condensed',sans-serif!important;font-weight:700!important}
.marker-cluster-large{background:color-mix(in srgb, var(--orange) 55%, transparent)!important}
.marker-cluster-large div{background:color-mix(in srgb, var(--orange) 90%, transparent)!important;color:var(--t)!important;font-family:'Barlow Condensed',sans-serif!important;font-weight:700!important}

/* ═══ DAILY COMMAND CENTER WIDGET ═══ */
.dt-widget{margin:0 0 16px;border:1px solid var(--br);border-radius:10px;background:var(--s);overflow:hidden;}
.dt-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;cursor:pointer;transition:background .15s;gap:12px;}
.dt-header:hover{background:var(--s2);}
.dt-header-left{min-width:0;}
.dt-title{font-family:'Barlow Condensed',sans-serif;font-size:14px;font-weight:700;color:var(--t);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;}
.dt-date{font-size:11px;color:var(--m);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:320px;}
.dt-header-right{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.dt-floor-pill{font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;padding:3px 10px;border-radius:12px;letter-spacing:.04em;white-space:nowrap;}
.dt-habit-pill{font-size:10px;color:var(--m);padding:2px 8px;background:var(--s2);border-radius:10px;white-space:nowrap;}
.dt-chevron{font-size:14px;color:var(--m);transition:transform .2s;}
.dt-body{padding:0 16px 16px;border-top:1px solid var(--br);}

/* KPI Strip */
.dt-kpi-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;padding:14px 0 12px;}
@media(max-width:768px){.dt-kpi-strip{grid-template-columns:repeat(3,1fr);}.dt-kpi:nth-child(4),.dt-kpi:nth-child(5){grid-column:span 1;}}
@media(max-width:480px){.dt-kpi-strip{grid-template-columns:repeat(2,1fr);}}
.dt-kpi{background:var(--s2);border:1px solid var(--br);border-radius:8px;padding:10px;text-align:center;transition:all .2s;}
.dt-kpi.hit{border-color:var(--kpi-color,#10b981);background:color-mix(in srgb,var(--kpi-color,#10b981) 8%,var(--s2));}
.dt-kpi-label{font-family:'Barlow Condensed',sans-serif;font-size:10px;font-weight:600;color:var(--m);letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dt-kpi-controls{display:flex;align-items:center;justify-content:center;gap:6px;}
.dt-kpi-btn{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--br);background:transparent;cursor:pointer;font-size:16px;font-weight:700;color:var(--m);display:flex;align-items:center;justify-content:center;transition:all .15s;line-height:1;flex-shrink:0;}
.dt-kpi-btn:hover{border-color:var(--kpi-color,var(--orange));color:var(--kpi-color,var(--orange));transform:scale(1.1);}
.dt-kpi-btn:active{transform:scale(0.95);}
.dt-kpi-val{font-family:'Barlow Condensed',sans-serif;font-size:32px;color:var(--t);min-width:36px;text-align:center;line-height:1;}
.dt-kpi-val.hit{color:var(--kpi-color,#10b981);}
.dt-kpi-input{font-family:'Barlow Condensed',sans-serif;font-size:26px;color:var(--t);background:transparent;border:none;outline:none;width:70px;text-align:center;padding:0;}
.dt-kpi-input:focus{color:var(--orange);}
.dt-kpi-bar{height:3px;background:var(--br);border-radius:2px;margin-top:6px;overflow:hidden;}
.dt-kpi-bar-fill{height:100%;border-radius:2px;transition:width .4s ease;}
.dt-kpi-target{font-size:9px;color:var(--m);margin-top:4px;font-family:'DM Mono','Barlow Condensed',monospace;letter-spacing:.03em;}

/* Bottom Row: Floors + Habits */
.dt-bottom-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:12px 0;border-top:1px solid var(--br);}
@media(max-width:640px){.dt-bottom-row{grid-template-columns:1fr;}}
.dt-section-label{font-family:'Barlow Condensed',sans-serif;font-size:10px;font-weight:700;color:var(--m);letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px;}
.dt-floor-grid{display:grid;gap:4px;}
.dt-floor-item{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:6px;cursor:pointer;transition:all .15s;font-size:12px;color:var(--t);}
.dt-floor-item:hover{background:var(--s2);}
.dt-floor-item.met{color:#10b981;}
.dt-floor-item.met span{text-decoration:line-through;opacity:.7;}
.dt-floor-check{width:18px;height:18px;border-radius:4px;border:1.5px solid var(--br);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#10b981;flex-shrink:0;transition:all .15s;}
.dt-floor-item.met .dt-floor-check{background:#10b981;border-color:#10b981;color:white;}
.dt-egg-earned{margin-top:8px;padding:8px 12px;background:linear-gradient(135deg,#fef3c7,#fde68a);border-radius:8px;font-size:11px;font-weight:700;color:#92400e;text-align:center;letter-spacing:.02em;}
.dt-habit-grid{display:grid;gap:4px;}
.dt-habit-item{display:flex;align-items:center;gap:8px;padding:5px 10px;border-radius:6px;cursor:pointer;transition:all .15s;font-size:12px;color:var(--t);}
.dt-habit-item:hover{background:var(--s2);}
.dt-habit-item.done{opacity:.6;}
.dt-habit-item.done .dt-habit-text{text-decoration:line-through;}
.dt-habit-icon{font-size:14px;flex-shrink:0;}
.dt-habit-text{flex:1;min-width:0;}
.dt-habit-check{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--br);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:#10b981;flex-shrink:0;transition:all .15s;}
.dt-habit-item.done .dt-habit-check{background:#10b981;border-color:#10b981;color:white;}

/* Notes Row */
.dt-notes-row{display:flex;gap:12px;padding:12px 0;border-top:1px solid var(--br);flex-wrap:wrap;}
.dt-note-field{flex:1;min-width:140px;}
.dt-note-field label{display:block;font-family:'Barlow Condensed',sans-serif;font-size:9px;font-weight:600;color:var(--m);letter-spacing:.08em;text-transform:uppercase;margin-bottom:4px;}
.dt-note-field input{width:100%;padding:6px 10px;background:var(--s2);border:1px solid var(--br);border-radius:5px;font-size:12px;color:var(--t);box-sizing:border-box;}
.dt-note-field input:focus{border-color:var(--orange);outline:none;}
.dt-rating{display:flex;gap:2px;padding-top:2px;}
.dt-rating-dot{cursor:pointer;font-size:12px;color:var(--br);transition:color .15s;line-height:1;}
.dt-rating-dot.active{color:#f59e0b;}
.dt-rating-dot:hover{color:var(--orange);}

/* Footer */
.dt-footer{display:flex;justify-content:space-between;align-items:center;padding-top:10px;border-top:1px solid var(--br);}
.dt-config-btn{display:flex;align-items:center;gap:4px;background:none;border:none;color:var(--m);font-size:10px;cursor:pointer;padding:4px 8px;border-radius:4px;transition:all .15s;}
.dt-config-btn:hover{background:var(--s2);color:var(--t);}

/* MAP BADGE */
.leaflet-popup-content-wrapper.nbd-pin-popup,.nbd-pin-popup .leaflet-popup-content-wrapper{background:var(--s)!important;border:1px solid var(--br)!important;border-radius:8px!important;box-shadow:0 8px 32px rgba(0,0,0,.7)!important;padding:0!important;}
.nbd-pin-popup .leaflet-popup-content{margin:0!important;width:auto!important;}
.nbd-pin-popup .leaflet-popup-tip-container{display:none;}
.nbd-pin-popup .leaflet-popup-close-button{color:var(--m)!important;top:6px!important;right:8px!important;font-size:16px!important;}
.map-badge{position:absolute;top:10px;right:10px;z-index:800;background:rgba(10,12,15,.88);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid var(--br);border-radius:5px;padding:5px 10px;font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--orange);}

/* EMPTY */
.empty{text-align:center;padding:30px 16px;color:var(--m);font-size:12px;}
.empty-icon{font-size:30px;margin-bottom:8px;opacity:.4;}

/* ════════════════════════════════════════════════════════════════════
   WIDGET HOME PAGE SYSTEM
   ════════════════════════════════════════════════════════════════════ */
.widget-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;padding:0 0 20px;}
.w-card{background:var(--s);border:1px solid var(--br);border-radius:10px;overflow:hidden;transition:border-color .2s,box-shadow .2s;}
.w-card:hover{border-color:color-mix(in srgb, var(--orange) 30%, transparent);box-shadow:0 4px 20px rgba(0,0,0,.15);}
.w-sm{grid-column:span 1;}
.w-md{grid-column:span 1;}
.w-lg{grid-column:span 2;}
@media(max-width:768px){.w-lg{grid-column:span 1;}}
.w-card-hdr{display:flex;align-items:center;gap:6px;padding:10px 12px 6px;border-bottom:1px solid var(--br);}
.w-card-icon{font-size:14px;}
.w-card-title{flex:1;font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--m);}
.w-card-remove{background:none;border:none;color:var(--br);font-size:12px;cursor:pointer;padding:2px;opacity:0;transition:opacity .15s;}
.w-card:hover .w-card-remove{opacity:1;}
.w-card-remove:hover{color:var(--red);}
.w-card-body{padding:12px;}
.w-big-num{font-family:'Barlow Condensed',sans-serif;font-size:28px;font-weight:800;color:var(--orange);line-height:1;}
.w-sub{font-size:10px;color:var(--m);margin-top:4px;text-transform:uppercase;letter-spacing:.06em;}
.w-empty{text-align:center;padding:16px 8px;font-size:11px;color:var(--m);}
.w-bar-track{width:100%;height:6px;background:var(--br);border-radius:3px;overflow:hidden;}
.w-bar-fill{height:100%;background:var(--orange);border-radius:3px;transition:width .3s ease;}
.w-lead-row{display:flex;align-items:center;justify-content:space-between;padding:5px 0;border-bottom:1px solid var(--br);cursor:pointer;}
.w-lead-row:last-child{border-bottom:none;}
.w-lead-row:hover{background:color-mix(in srgb, var(--orange) 3%, transparent);}
.w-lead-name{font-size:11px;font-weight:600;color:var(--t);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:70%;}
.w-lead-stage{font-size:10px;font-weight:700;}
.w-activity-row{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px solid var(--br);}
.w-activity-row:last-child{border-bottom:none;}
.w-activity-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
.w-mini-btn{background:var(--s2);border:1px solid var(--br);border-radius:5px;padding:5px 10px;font-size:10px;font-weight:700;color:var(--t);cursor:pointer;font-family:inherit;transition:all .15s;text-align:center;}
.w-mini-btn:hover{border-color:var(--orange);color:var(--orange);}
.w-task-row{display:flex;align-items:center;gap:8px;padding:4px 0;cursor:pointer;}
.w-task-row input[type="checkbox"]{accent-color:var(--orange);}
.w-funnel{display:flex;flex-direction:column;gap:4px;}
.w-funnel-row{display:flex;align-items:center;gap:8px;}
.w-funnel-bar{padding:4px 8px;border-radius:4px;font-size:11px;font-weight:700;color:var(--t);text-align:center;min-width:30px;}
.w-funnel-label{font-size:10px;color:var(--m);}
.w-add-card{border-style:dashed;border-color:var(--br);cursor:pointer;display:flex;align-items:center;justify-content:center;}
.w-add-card:hover{border-color:var(--orange);}

/* Widget picker modal */
.w-picker-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,.7);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:9000;display:flex;align-items:center;justify-content:center;padding:16px;}
.w-picker{background:var(--s);border:1px solid var(--br);border-radius:14px;width:100%;max-width:520px;max-height:80vh;display:flex;flex-direction:column;overflow:hidden;}
.w-picker-hdr{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--br);}
.w-picker-body{flex:1;overflow-y:auto;padding:12px 20px;}
.w-picker-cat{font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--orange);padding:12px 0 6px;border-bottom:1px solid var(--br);margin-bottom:4px;}
.w-picker-row{display:flex;align-items:center;gap:10px;padding:8px 6px;border-radius:6px;cursor:pointer;transition:background .1s;}
.w-picker-row:hover{background:var(--s2);}
.w-picker-active{background:color-mix(in srgb, var(--orange) 5%, transparent);}
.w-picker-row input[type="checkbox"]{accent-color:var(--orange);}
.w-picker-icon{font-size:16px;}
.w-picker-name{flex:1;font-size:13px;font-weight:600;color:var(--t);}
.w-picker-size{font-size:9px;color:var(--m);text-transform:uppercase;letter-spacing:.06em;background:var(--s2);padding:2px 6px;border-radius:3px;}
.w-picker-footer{display:flex;justify-content:space-between;padding:12px 20px;border-top:1px solid var(--br);}

/* ════════════════════════════════════════════════════════════════════
   PREMIUM POLISH — Micro-interactions, depth, animation, refinement
   ════════════════════════════════════════════════════════════════════ */

/* ── GLOBAL FOCUS RINGS ── */
input:focus, select:focus, textarea:focus {
  border-color: var(--orange) !important;
  box-shadow: 0 0 0 3px var(--og), 0 1px 2px rgba(0,0,0,.2) !important;
  transition: border-color .2s, box-shadow .2s !important;
}

/* ── ENHANCED BUTTON STATES ── */
.btn { transition: all .2s cubic-bezier(.4,0,.2,1); }
.btn:active { transform: scale(.97); transition-duration: .08s; }
/* Wave 5b: flat solid fill replaces the 135deg gradient. Live mirror
   showed that on themes where --orange and --ob have similar
   luminance (forest, neon, gold, paper), the gradient read as muddy
   two-tone instead of a clean button. Solid + 1px ring + per-theme
   glow gives a uniformly readable button on all 66 themes. Hover
   nudges to --ob and adds depth via stronger glow — keeps the
   "press it" affordance without re-introducing the gradient. */
.btn-orange {
  background: var(--orange);
  color: var(--accent-fg);
  box-shadow:
    inset 0 0 0 1px var(--accent-ring),
    0 4px 14px var(--og),
    0 1px 3px rgba(0,0,0,.15);
}
.btn-orange:hover {
  background: var(--ob);
  color: var(--accent-fg);
  box-shadow:
    inset 0 0 0 1px var(--accent-ring),
    0 6px 22px var(--og),
    0 2px 6px rgba(0,0,0,.2);
  transform: translateY(-1px);
}
.btn-orange:active { transform: translateY(0) scale(.98); }
.btn-ghost {
  transition: all .2s cubic-bezier(.4,0,.2,1);
}
.btn-ghost:hover {
  border-color: var(--orange);
  color: var(--orange);
  background: var(--og);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--orange) 6%, transparent);
}

/* ── PREMIUM MODAL ANIMATIONS ── */
.modal-bg { -webkit-backdrop-filter:blur(20px);backdrop-filter: blur(12px) saturate(1.5); transition: opacity .2s; }
.modal-bg.open { animation: modalBgIn .25s ease; }
@keyframes modalBgIn {
  from { opacity: 0; -webkit-backdrop-filter:blur(20px);backdrop-filter: blur(0px); }
  to { opacity: 1; -webkit-backdrop-filter:blur(20px);backdrop-filter: blur(12px); }
}
.modal {
  animation: modalSlideIn .3s cubic-bezier(.16,1,.3,1);
  box-shadow: 0 24px 80px rgba(0,0,0,.5), 0 0 0 1px var(--br), 0 0 120px -20px var(--og);
}
@keyframes modalSlideIn {
  from { opacity: 0; transform: scale(.92) translateY(16px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.modal::before {
  background: linear-gradient(90deg, transparent, var(--orange), transparent);
  height: 2px;
  opacity: .8;
}
.modal-close {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px;
  transition: all .15s;
}
.modal-close:hover {
  background: var(--s2);
  color: var(--orange);
  transform: rotate(90deg);
}

/* ── SAVE BUTTON GLOW PULSE ── */
.msave {
  background: linear-gradient(135deg, var(--orange), var(--ob));
  box-shadow: 0 4px 16px var(--og);
  transition: all .25s cubic-bezier(.4,0,.2,1);
  position: relative;
  overflow: hidden;
}
.msave::after {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,.08) 50%, transparent 70%);
  transform: rotate(45deg) translateX(-100%);
  transition: transform .5s;
}
.msave:hover::after { transform: rotate(45deg) translateX(20%); }
.msave:hover {
  background: linear-gradient(135deg, var(--ob), var(--orange));
  box-shadow: 0 8px 28px var(--og);
  transform: translateY(-1px);
}
.msave:active { transform: translateY(0) scale(.98); }
.msave:disabled {
  opacity: .6;
  pointer-events: none;
  box-shadow: none;
}

/* ── KANBAN CARD PREMIUM ── */
.k-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--rule);
  border-radius: 10px;
  padding: 14px 16px;
  cursor: grab;
  /* Hover-jiggle final fix: was `transition: all .25s`, which animated
     EVERY property change on hover (including subpixel anti-aliasing
     shifts triggered by the z-index hover-bump below). The catchall
     plus z-index change caused stacking-context re-paint flicker
     anywhere near the card edge — most visible when the cursor sat on
     the bottom-right `...` button. Narrowed to explicit properties +
     dropped the z-index hover-bump (set globally) + promoted to a GPU
     layer via will-change so the shadow growth is composited, not
     re-painted per-frame. */
  transition: box-shadow .15s ease, border-color .15s ease;
  will-change: box-shadow;
  position: relative;
  z-index: 1;
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
}
.k-card:hover {
  box-shadow: 0 10px 30px rgba(0,0,0,.18), 0 4px 8px rgba(0,0,0,.1);
  border-color: rgba(255,255,255,.12);
}
.k-card.dragging {
  opacity: .5;
  cursor: grabbing;
  transform: rotate(2deg) scale(1.04);
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
  z-index: 100;
}
.k-card.drag-placeholder {
  border: 2px dashed var(--orange);
  background: var(--og);
  height: 60px;
  border-radius: 10px;
  animation: placeholderPulse 1.5s ease infinite;
}
@keyframes placeholderPulse {
  0%, 100% { opacity: .4; }
  50% { opacity: .7; }
}

/* ── Wave 17: stage-aging visual cues ──
   The card's left border subtly tints when a lead has been sitting
   in its current stage for too long. The threshold reflects what
   field reps actually feel: ≥3 days = warming, ≥7 days = stale,
   ≥14 days = critical. Terminal stages (closed/lost) skip the
   treatment in JS so this CSS only activates on still-actionable
   leads. The aging badge on the right of the card title row gives
   the rep an exact day count without ambiguity. */
.k-card-aging-warming  { border-left-color: #fbbf24 !important; }
.k-card-aging-stale    { border-left-color: #f97316 !important; }
.k-card-aging-critical {
  border-left-color: #ef4444 !important;
  border-left-width: 4px !important;
}
.k-card-aging-critical::before {
  content: '';
  position: absolute;
  left: -4px; top: 0; bottom: 0;
  width: 4px;
  background: #ef4444;
  border-radius: 4px 0 0 4px;
  animation: kCardCriticalPulse 2.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes kCardCriticalPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}
.kc-stage-age {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  white-space: nowrap;
  margin-left: 6px;
}
.kc-stage-age-warming  { background: rgba(251,191,36,0.18); color: #d97706; border: 1px solid rgba(251,191,36,0.45); }
.kc-stage-age-stale    { background: rgba(249,115,22,0.20); color: #ea580c; border: 1px solid rgba(249,115,22,0.50); }
.kc-stage-age-critical { background: rgba(239,68,68,0.22);  color: #dc2626; border: 1px solid rgba(239,68,68,0.55); }

/* Wave 57: fresh-share pulse. The W44 share-tracking pill (e.g.
   "📤 SMS today") gets a subtle 2.4s pulse animation when the
   share is less than 24 hours old. Helps reps spot recent shares
   while scrolling the kanban without needing to click in. The
   crm.js renderCard adds the kc-shared-fresh class for shares
   under 24h; older shares keep the calm purple pill. */
.kc-shared-fresh {
  animation: kCardSharedFreshPulse 2.4s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(155, 109, 255, 0.55);
}
@keyframes kCardSharedFreshPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(155, 109, 255, 0.45);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(155, 109, 255, 0.05);
  }
}
/* Respect prefers-reduced-motion — pulse is non-essential signal
   so we drop it for users who'd find it distracting. */
@media (prefers-reduced-motion: reduce) {
  .kc-shared-fresh { animation: none; }
}

/* Wave 58: fresh-view pulse. Sibling of the W57 share pulse but on
   the customer-engagement signal instead of the rep-side share.
   Green halo (matches the green '👁 viewed today' pill) so reps
   visually distinguish "they opened it" (green) from "I sent it"
   (purple) at a glance even with the same pulse rhythm. */
.kc-viewed-fresh {
  animation: kCardViewedFreshPulse 2.4s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(46, 204, 138, 0.55);
}
@keyframes kCardViewedFreshPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(46, 204, 138, 0.50);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(46, 204, 138, 0.05);
  }
}
@media (prefers-reduced-motion: reduce) {
  .kc-viewed-fresh { animation: none; }
}

/* Card name with gradient underline on hover */
.kc-name {
  font-weight: 800;
  font-size: 13px;
  margin-bottom: 2px;
  color: var(--ink);
  line-height: 1.25;
  padding-right: 60px;
  position: relative;
}

/* Card value badge glow.
   R6: glow blur radius dropped 20px → 8px. The original 20px halo
   was visually bleeding into adjacent elements (the count badges
   4px away in the R4 layout), creating an overlap-appearance that
   wasn't a real DOM overlap. With the value on its own row now,
   the tighter 8px glow gives the orange treatment without crowding. */
.kc-val-badge {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: var(--orange);
  letter-spacing: .02em;
  text-shadow: 0 0 8px var(--og);
  white-space: nowrap;
  display: inline-block;
}

/* Card tags upgrade */
.kc-tag {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 2px 8px;
  border-radius: 10px;
  text-transform: uppercase;
  transition: transform .15s;
}
/* Hover feedback via brightness — scale(1.05) caused jiggle when the
   cursor sat at the tag's edge (scale up → cursor outside → scale
   down → cursor inside → loop). Brightness is a paint-only change. */
.kc-tag:hover { filter: brightness(1.12); }

/* Card action buttons */
.kc-btn {
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 5px;
  padding: 4px 8px;
  font-size: 10px;
  cursor: pointer;
  color: var(--m);
  font-family: inherit;
  transition: all .2s cubic-bezier(.4,0,.2,1);
}
.kc-btn:hover {
  /* translateY(-1px) caused the same edge-jiggle as the other kanban
     hover transforms (cursor near button edge → button lifts → cursor
     drops off → button drops → loop). Paint-only feedback: brighter
     background + stronger shadow signals interactivity without moving
     the hit area. Matches the pattern used on .kc-tag, .kc-photo-thumb,
     .kc-arrow, .kc-days after the v2.0-final hover-stability sweep. */
  background: var(--s2);
  color: var(--ink);
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
  filter: brightness(1.08);
}
.kc-btn.edit:hover { border-color: var(--orange); color: var(--orange); background: var(--og); }
.kc-btn.del:hover { border-color: var(--red); color: var(--red); background: rgba(224,82,82,.08); }

/* Card photo hover zoom */
.kc-photo-thumb {
  transition: box-shadow .15s ease, filter .15s ease;
}
.kc-photo-thumb:hover {
  /* scale(1.15) + dynamic position:relative caused layout reflow +
     edge-jiggle on hover. Brightness + shadow gives the same
     "interactive" feel without changing the element's bounds. */
  filter: brightness(1.1);
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
}

/* ── KANBAN COLUMN POLISH ── */
.kcol {
  transition: background .3s, box-shadow .3s;
}
.kcol-body.drag-over {
  background: var(--og);
  outline: 2px dashed var(--orange);
  animation: columnGlow .8s ease infinite alternate;
}
@keyframes columnGlow {
  from { box-shadow: inset 0 0 20px color-mix(in srgb, var(--orange) 5%, transparent); }
  to { box-shadow: inset 0 0 20px color-mix(in srgb, var(--orange) 15%, transparent); }
}

/* Column count badge */
.kcount {
  background: var(--s3);
  min-width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--m);
  transition: all .3s;
}

/* ── STAT CARDS PREMIUM ── */
.stat-card {
  background: var(--s);
  border: 1px solid var(--br);
  border-radius: 12px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: all .25s cubic-bezier(.4,0,.2,1);
  position: relative;
  overflow: hidden;
}
.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--orange), transparent);
  opacity: 0;
  transition: opacity .3s;
}
.stat-card:hover {
  border-color: rgba(255,255,255,.12);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
}
.stat-card:hover::before { opacity: 1; }

.stat-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  transition: transform .3s;
}
.stat-card:hover .stat-icon { transform: scale(1.1); }

.stat-val {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  background: linear-gradient(135deg, var(--t), var(--m));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── PANEL POLISH ── */
.panel {
  background: var(--s);
  border: 1px solid var(--br);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 16px;
  transition: border-color .3s;
}
.panel:hover { border-color: rgba(255,255,255,.1); }
.panel-hdr {
  padding: 16px 20px 14px;
  border-bottom: 1px solid var(--br);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent);
}

/* ── TOAST UPGRADE ── */
.toast {
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.05);
}

/* ── LOADING SKELETON ENHANCEMENTS ── */
.skeleton-card {
  height: 120px;
  border-radius: 10px;
  margin-bottom: 8px;
}
.skeleton-line {
  height: 10px;
  margin-bottom: 8px;
  border-radius: 4px;
}
.skeleton-line.short { width: 60%; }
.skeleton-line.med { width: 80%; }
.skeleton-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

/* ── EMPTY STATE POLISH ── */
.empty {
  text-align: center;
  padding: 40px 24px;
  color: var(--m);
  font-size: 13px;
  line-height: 1.6;
}
.empty-icon {
  font-size: 38px;
  margin-bottom: 12px;
  opacity: .5;
  animation: emptyBob 3s ease-in-out infinite;
}
@keyframes emptyBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.empty-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--t);
  margin-bottom: 6px;
}
.empty-sub {
  font-size: 12px;
  color: var(--m);
  margin-bottom: 16px;
  max-width: 280px;
  margin-left: auto;
  margin-right: auto;
}
.empty-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--og);
  border: 1px solid var(--orange);
  color: var(--orange);
  border-radius: 8px;
  padding: 8px 16px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  cursor: pointer;
  transition: all .2s;
}
.empty-cta:hover {
  background: var(--orange);
  color:var(--accent-fg);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px var(--og);
}

/* ── SIDEBAR POLISH ── */
.sidebar {
  transition: width .3s cubic-bezier(.4,0,.2,1);
}
.sidebar .nav-item {
  transition: all .2s;
}
.sidebar .nav-item:hover {
  background: var(--og);
}
.sidebar .nav-item.active {
  position: relative;
}
.sidebar .nav-item.active::before {
  content: '';
  position: absolute;
  left: 0; top: 4px; bottom: 4px;
  width: 3px;
  background: var(--orange);
  border-radius: 0 3px 3px 0;
}

/* ── SCROLLBAR REFINEMENT ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--br);
  border-radius: 3px;
  transition: background .2s;
}
::-webkit-scrollbar-thumb:hover { background: var(--m); }

/* ── SELECTION COLOR ── */
::selection {
  background: var(--og);
  color: var(--t);
}

/* ── TABLE HOVER ANIMATION ── */
.tbl tr {
  transition: background .15s;
}
.tbl tr:hover td {
  background: var(--og);
}

/* ── SEARCH INPUT PREMIUM ── */
#crmSearch {
  transition: all .25s cubic-bezier(.4,0,.2,1);
}
#crmSearch:focus {
  box-shadow: 0 0 0 3px var(--og), 0 4px 16px rgba(0,0,0,.15);
  border-color: var(--orange);
  background: var(--s);
}

/* ── TAG / BADGE ANIMATION ── */
.tag {
  transition: all .2s;
}
.tag:hover {
  transform: scale(1.06);
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}

/* ── STAGE BOX HOVER ── */
.stage-box {
  transition: all .25s;
  cursor: pointer;
}
.stage-box:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
}
.stage-count {
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.stage-box:hover .stage-count {
  transform: scale(1.1);
}

/* ── REVENUE PILL HOVER ── */
.rev-pill {
  transition: all .2s;
  cursor: default;
}
.rev-pill:hover {
  background: var(--s2);
  border-radius: 6px;
}
.rev-pill:hover .rev-num {
  color: var(--orange);
}

/* ── FOLLOW-UP ALERT ANIMATION ── */
.follow-up-alert {
  animation: alertSlideIn .4s cubic-bezier(.16,1,.3,1);
}
@keyframes alertSlideIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── DRAG ARROW BUTTONS ── */
.kc-arrow {
  transition: all .2s cubic-bezier(.4,0,.2,1);
  border-radius: 3px;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.kc-arrow:hover {
  /* scale(1.15) caused stage-nav arrows to wiggle off-cursor when
     hovered near their edge. Color + background still gives clear
     hover affordance without changing the hit area. */
  color: var(--orange);
  background: var(--og);
}

/* ── TASK ITEMS ── */
.today-task-item {
  transition: all .2s;
  border-radius: 6px;
  padding: 8px 10px;
}
.today-task-item:hover {
  background: var(--s2);
}
.today-task-overdue {
  animation: overdueFlash 2s ease-in-out infinite;
}
@keyframes overdueFlash {
  0%, 100% { opacity: 1; }
  50% { opacity: .5; }
}

/* ── BULK SELECTION ANIMATION ── */
.k-card.bulk-selected {
  background: var(--og);
  box-shadow: 0 0 0 2px var(--orange), 0 4px 12px var(--og);
  animation: bulkPop .2s cubic-bezier(.16,1,.3,1);
}
@keyframes bulkPop {
  from { transform: scale(.96); }
  to { transform: scale(1); }
}

/* ── NUMBER COUNTER ANIMATION ── */
@keyframes countUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.stat-val, .stage-count, .rev-num {
  animation: countUp .4s cubic-bezier(.16,1,.3,1);
}

/* ── PHOTO UPLOAD ZONE ── */
.upload-zone {
  transition: all .25s;
  border: 2px dashed var(--br);
  border-radius: 10px;
}
.upload-zone:hover {
  border-color: var(--orange);
  background: var(--og);
  transform: scale(1.01);
}

/* ── TOOLTIP-STYLE BADGE ── */
.kc-days {
  position: relative;
  transition: all .2s;
}
.kc-days:hover {
  /* scale(1.08) caused days-badge jiggle when the cursor sat at its
     edge. Shadow alone signals interactivity without changing bounds. */
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}

/* ── PIN BUTTON RIPPLE ── */
.pin-btn {
  position: relative;
  overflow: hidden;
}
.pin-btn::after {
  content: '';
  position: absolute;
  top:0;right:0;bottom:0;left:0;
  background: radial-gradient(circle at center, var(--og) 0%, transparent 70%);
  opacity: 0;
  transition: opacity .3s;
}
.pin-btn:hover::after { opacity: 1; }

/* ── SMOOTH PAGE TRANSITIONS ── */
.view {
  animation: viewFadeIn .3s cubic-bezier(.4,0,.2,1);
}
@keyframes viewFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── ESTIMATE STEP INDICATOR ── */
.est-step {
  position: relative;
  padding: 10px 18px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--m);
  transition: all .3s;
  cursor: default;
}
.est-step.active {
  color: var(--orange);
}
.est-step.active::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: var(--orange);
  border-radius: 2px 2px 0 0;
}
.est-step.done {
  color: var(--green);
}
.est-step.done::before {
  content: '✓ ';
}

/* ── TIER CARD SELECTION ── */
.tier-card {
  background: var(--s);
  border: 2px solid var(--br);
  border-radius: 12px;
  padding: 20px;
  cursor: pointer;
  transition: all .3s cubic-bezier(.4,0,.2,1);
  position: relative;
  overflow: hidden;
}
.tier-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: transparent;
  transition: background .3s;
}
.tier-card:hover {
  border-color: var(--orange);
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(0,0,0,.18);
}
.tier-card.selected {
  border-color: var(--orange);
  background: var(--og);
  box-shadow: 0 0 0 1px var(--orange), 0 8px 28px var(--og);
}
.tier-card.selected::before {
  background: linear-gradient(90deg, var(--orange), var(--ob));
}

/* ── TIER CARDS — SMALL MOBILE (≤640px) ── */
@media(max-width:640px){
  .tier-grid {
    display:flex !important;
    flex-direction:column !important;
    gap:10px !important;
  }
  .tier-card {
    padding:14px 16px !important;
    min-height:auto !important;
  }
  .tier-card .tier-name {
    font-size:15px !important;
  }
  .tier-card .tier-items {
    font-size:12px !important;
    line-height:1.6 !important;
  }
  .tier-card .tier-price {
    font-size:18px !important;
    margin-top:8px !important;
  }
  .tier-badge {
    font-size:10px !important;
    padding:3px 10px !important;
  }
}

/* ── COMMAND PALETTE POLISH ── */
.cmd-palette-overlay {
  -webkit-backdrop-filter:blur(20px);backdrop-filter: blur(12px) saturate(1.4);
}
.cmd-palette {
  box-shadow: 0 24px 80px rgba(0,0,0,.6), 0 0 120px -20px var(--og);
}

/* ── ESTIMATE REVIEW TABLE ── */
.li-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.li-table th {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: 10px 12px;
  text-align: left;
  color: var(--m);
  border-bottom: 2px solid var(--br);
}
.li-table td {
  padding: 9px 12px;
  border-bottom: 1px solid rgba(255,255,255,.04);
  transition: background .15s;
}
.li-table tr:hover td {
  background: var(--s2);
}
.li-table .code {
  color: var(--orange);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
}
.li-table .total-row.grand td {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--orange);
  border-top: 2px solid var(--br);
  padding-top: 12px;
}

/* ── NOTIFICATION BADGE PULSE ── */
.nav-badge {
  animation: badgePulse 2s ease-in-out infinite;
}
@keyframes badgePulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--og); }
  50% { box-shadow: 0 0 0 4px transparent; }
}

/* ── DELETED DRAWER SLIDE-IN ── */
.deleted-drawer {
  transition: transform .35s cubic-bezier(.16,1,.3,1);
}

/* ── TASK MODAL UPGRADE ── */
#taskModal .modal {
  max-width: 420px;
}
.task-item {
  transition: all .2s;
  border-radius: 6px;
  padding: 8px 10px;
}
.task-item:hover {
  background: var(--s2);
}
.task-item.done .task-text {
  text-decoration: line-through;
  opacity: .5;
}
.task-item.overdue {
  border-left: 2px solid var(--red);
}

/* ── INSURANCE CARRIER BADGE ── */
.kc-carrier {
  font-size: 10px;
  font-weight: 700;
  background: var(--s3);
  border-radius: 5px;
  padding: 2px 8px;
  letter-spacing: .02em;
  transition: all .2s;
}
.kc-carrier:hover {
  background: var(--og);
  color: var(--orange);
}

/* ── PHONE LINK INTERACTIVE ── */
.kc-phone-link {
  transition: all .2s;
  border-radius: 4px;
  padding: 1px 4px;
  margin: -1px -4px;
}
.kc-phone-link:hover {
  background: rgba(37,99,235,.1);
  box-shadow: 0 2px 8px rgba(37,99,235,.15);
}

/* ── SMOOTH BODY LOAD ── */
body {
  animation: bodyFadeIn .5s ease;
}
@keyframes bodyFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ── TOOLTIP GENERAL ── */
[title] {
  position: relative;
}

/* ── CRM SECONDARY HEADER TABS ── */
/* Compact secondary toolbar — horizontal icon+label buttons
   in a single-row strip. Intentionally short so it doesn't eat
   screen real estate above the kanban. */
.crm-secondary-header {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 18px;
  background: var(--s2, #1a1d23);
  border-bottom: 1px solid var(--br, #2a2d35);
  margin-bottom: 10px;
  position: sticky;
  top: 0;
  z-index: 50;
  transition: transform .25s ease, opacity .25s ease;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.crm-secondary-header::-webkit-scrollbar { display: none; }
/* Override the vertical icon-above-label layout to horizontal
   icon-beside-label. Buttons get comfortable breathing room — Joe
   reported the previous 4px/10px header + 6px/10px button packing
   felt "bold, tight, butted up against everything." */
.crm-sec-btn {
  flex-direction: row !important;
  gap: 8px !important;
  padding: 8px 14px !important;
  white-space: nowrap;
  min-height: 38px;
  letter-spacing: 0 !important;
}
.crm-sec-icon { width: 18px !important; height: 18px !important; }
.crm-sec-icon svg { width: 15px !important; height: 15px !important; }
/* Soften the label — was uppercase + 600 weight + tight tracking;
   becomes mixed-case + medium weight + relaxed tracking. The inline
   style on each <span class="crm-sec-label"> hardcodes the harsh
   look, so every property here needs !important to win the cascade. */
.crm-sec-label {
  font-size: 12px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: .01em !important;
}
.crm-secondary-header.hidden {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
  position: absolute;
}
.crm-sec-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 14px;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  color: var(--m, var(--m));
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  letter-spacing: .04em;
  transition: all .2s;
  position: relative;
  overflow: hidden;
}
.crm-sec-btn:hover {
  color: var(--t, #e5e7eb);
  background: rgba(255,255,255,.05);
}
.crm-sec-btn.active {
  color: var(--orange, #e8720c);
  background: color-mix(in srgb, var(--orange) 10%, transparent);
  box-shadow: inset 0 -2px 0 var(--orange, #e8720c);
}
/* Drop the radial-gradient ::before overlay. The orange glow on hover
   read as cheesy and competed visually with the actual button label.
   Hover/active are now communicated by background tint + (active-only)
   bottom underline only. */
.crm-sec-btn::before { display: none !important; }
.crm-sec-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.crm-sec-icon svg {
  width: 18px;
  height: 18px;
}
.crm-sec-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
  position: relative;
  z-index: 1;
}
.crm-sec-restore {
  display: none;
  text-align: center;
  padding: 4px 0;
  background: var(--s2, #1a1d23);
  border-bottom: 1px solid var(--br, #2a2d35);
  color: var(--m, var(--m));
  font-size: 11px;
  cursor: pointer;
  font-family: 'Barlow Condensed', sans-serif;
  letter-spacing: .05em;
  transition: background .2s;
}
.crm-sec-restore:hover {
  background: color-mix(in srgb, var(--orange) 8%, transparent);
  color: var(--orange, var(--orange));
}

/* ── TOGGLE SWITCH UPGRADE ── */
.toggle-switch input:checked + .toggle-slider {
  box-shadow: 0 0 10px var(--og);
}

/* ── SETTINGS FIELD FOCUS ── */
.sf input:focus {
  background: var(--s);
  box-shadow: 0 0 0 3px var(--og);
}

/* ── DELETED LEAD CARD ── */
.deleted-card {
  transition: all .2s;
  border-radius: 8px;
}
.deleted-card:hover {
  background: var(--s2);
  transform: translateX(2px);
}

/* ── ── TABLET (hide sidebar, reflow grids) ── */
@media(max-width:900px){
  .sidebar{display:none;}
  .sgrid{grid-template-columns:repeat(2,1fr);}
  .two-col{grid-template-columns:1fr;}
  .tier-grid{grid-template-columns:1fr;}
}

/* ── SAFARI STANDALONE (Add to Home Screen) FIXES ── */
@media(display-mode: standalone) {
  /* Use dvh (dynamic viewport height) for map — accounts for missing Safari toolbar */
  #d2dMap { height:55dvh!important; min-height:300px; }
  /* Prevent overscroll bounce that breaks map pan */
  html, body { overscroll-behavior: none; }
  /* Safe area insets for notched devices */
  header { padding-top: env(safe-area-inset-top, 0); }
  .mn { padding-bottom: env(safe-area-inset-bottom, 0); }
  /* Estimate builder — ensure scroll works in standalone */
  #est-builder { -webkit-overflow-scrolling:touch!important; overflow-y:auto!important; }
  .tier-grid { overflow:visible!important; }
  /* Views — enable proper scroll in standalone with explicit height.
     Without height, flex layout collapses views to zero in standalone
     because there's no browser chrome to anchor the viewport. */
  .view.active {
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    height:calc(100dvh - 60px)!important; /* header height */
    min-height:0!important;
  }
  .view-scroll {
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    flex:1!important;
    min-height:0!important;
  }
  /* Kanban board needs explicit height in standalone */
  #kanbanBoard {
    max-height:calc(100dvh - 200px)!important;
    overflow-x:auto!important;
  }
  /* Photos grid needs scroll in standalone */
  #photoLeadsList {
    max-height:calc(100dvh - 250px)!important;
    overflow-y:auto!important;
  }
  /* Drawing tool — map view must NOT collapse in standalone.
     The .view.active above sets overflow-y:auto which can cause
     the map-view flex child to lose its height. Force explicit
     dimensions so Leaflet always has a non-zero container. */
  #view-draw.active { overflow:hidden!important; }
  #view-draw .map-view.active { height:100%!important; min-height:0!important; }
  #view-draw .map-area { min-height:calc(100dvh - 120px)!important; }
  /* Maps & Pins view — same treatment */
  #view-map.active { overflow:hidden!important; }
  #view-map .map-view.active { height:100%!important; min-height:0!important; }
  #view-map .map-area { min-height:calc(100dvh - 120px)!important; }
}

/* ── MOBILE FULL SYSTEM (≤768px) ── */
@media(max-width:768px){
  /* ── MOBILE SCROLL FIX ── */
  html{height:100%;overflow:auto;}
  body{height:auto;min-height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;}
  .app-body{flex-direction:column;overflow:visible!important;}
  .content{width:100%;overflow:visible!important;}
  .view{overflow:visible!important;}
  .view-scroll{overflow:visible!important;height:auto!important;}
  /* ── END MOBILE SCROLL FIX ── */
  .sidebar{display:none!important;}
  header{padding:0 12px;height:48px;}
  .logo{font-size:14px;}
  .hbadge{display:none;}
  .uname{display:none;}
  .so{display:none;}
  .upill{padding:4px 6px;}
  /* Mobile header tools — collapse preference buttons into kebab */
  .hdr-tools-desktop-only{ display:none!important; }
  .hdr-tools-mobile-only{ display:inline-flex!important; }
  /* PIPELINE stat line — compress on mobile. Desktop shows the full
     "13 customers · $126,043 pipeline · 3 prospects" — on phones we
     drop the wordy nouns and switch the dollar amount to a K/M
     abbreviation so the line stays on ONE row beside the PIPELINE
     label instead of wrapping. Spans are emitted by crm-pipeline.js
     setSubLine path. */
  .crm-stat-word{ display:none!important; }
  .crm-stat-money-full{ display:none!important; }
  .crm-stat-money-short{ display:inline!important; }
  /* Touch-target bump for the global-header icon buttons on mobile.
     Desktop sits at a comfortable 30×30 because the cursor is precise;
     on phones the same 30×30 puts thumbs below iOS HIG's 44px floor.
     40×40 (with `min-` so larger buttons aren't shrunk) is a balance —
     thumb-reachable without forcing the header taller than 48px. */
  header .hdr-tool{ min-width:40px!important; min-height:40px!important; }
  .upill{ min-height:36px!important; }
  body{padding-bottom:62px;}
  .app-body{flex-direction:column;}
  .content{width:100%;}
  .view-scroll{padding:14px 12px 20px;}
  .page-hdr{flex-direction:column;align-items:flex-start;gap:10px;}
  .page-hdr button{width:100%;}
  .sgrid{grid-template-columns:repeat(2,1fr);gap:8px;}
  .stat-card{padding:12px;}
  .stat-val{font-size:20px;}
  .two-col{grid-template-columns:1fr;gap:10px;}
  .map-view{flex-direction:column!important;position:static!important;overflow:visible!important;}
  .map-sidebar{width:100%!important;max-height:0;overflow:hidden;transition:max-height .3s ease;padding:0!important;border-right:none!important;border-top:1px solid var(--br);order:2;}
  .map-sidebar.open{max-height:340px;overflow-y:auto;padding:12px!important;}
  .map-area{order:1;height:55vw;min-height:220px;}
  .map-area > div[id$="Map"]{height:100%!important;}
  .map-toggle-btn{display:flex!important;position:absolute;bottom:10px;left:50%;transform:translateX(-50%);z-index:500;background:var(--s);border:1px solid var(--br);border-radius:20px;padding:6px 16px;font-size:11px;font-family:'Barlow Condensed',sans-serif;letter-spacing:.08em;color:var(--t);cursor:pointer;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.4);}
  /* !important blanket on the mobile re-layout rules — desktop's
     `.crm-header{ flex-wrap:nowrap; ... }` at the Pro-Chrome block
     is declared AFTER this media query in source order, so without
     !important the cascade lets the desktop rule win at 375px (this
     was a pre-existing responsive bug — the original wrap behavior
     never worked, it just looked-OK enough to ship). Same for
     `.crm-hdr-views{ overflow:hidden; display:inline-flex }`. */
  .crm-header{padding:12px 14px 8px!important;flex-wrap:wrap!important;gap:8px!important;}
  .crm-header > div:first-child{flex:1 1 100%!important;}
  .crm-header > div:last-child{flex-wrap:wrap;gap:6px;width:100%;}
  .crm-header input[type=text]{width:100%!important;flex:1;}
  .crm-header select{flex:1;}
  .crm-header .btn{flex:1;justify-content:center;font-size:11px;padding:7px 8px;}
  /* CRM pipeline mobile re-layout —
       1. View tabs (Ins/Cash/Fin/War/Svc/Jobs/All) get their own
          full-width horizontal scroller so the highest-frequency
          switcher is always visible.
       2. Filter/action buttons (Needs Attention, Stale Shares,
          Prospects, Snoozed, Hot first, Bulk, CSV) collapse into the
          existing Tools (⋯) dropdown via .crm-tools-menu-mobile.
       3. Pointless icons on mobile (sidebar collapse — there's no
          sidebar; fullscreen — the view is already fullscreen-ish)
          are hidden to declutter.
       4. Orphan separator pips are dropped so we don't leave empty
          1px gaps where their neighbour buttons used to live. */
  .crm-tools-menu-mobile{ display:block; }
  /* Search cluster: force its own row + let the input grow */
  .crm-hdr-search{ flex-basis:100%!important; flex-wrap:wrap!important; gap:6px!important; min-width:0!important; }
  /* View switcher: own full-width horizontal-scroll row */
  .crm-hdr-views{
    display:flex!important;
    flex-basis:100%!important;
    width:100%!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    flex-wrap:nowrap!important;
    white-space:nowrap;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
  }
  .crm-hdr-views .kview-btn{
    flex-shrink:0!important;
    min-height:38px!important;
    padding:8px 14px!important;
    font-size:12px!important;
  }
  /* Actions row: its own row, left-aligned (margin-left:auto unused
     when row is full-width), buttons size to content */
  .crm-hdr-actions{
    flex-basis:100%!important;
    width:100%!important;
    margin-left:0!important;
    overflow-x:visible!important;
    mask-image:none!important;
    -webkit-mask-image:none!important;
  }
  #needsAttentionBtn,
  #staleSharesBtn,
  #prospectsToggleBtn,
  #snoozedToggleBtn,
  #engagementSortBtn,
  #bulkModeBtn,
  #csvExportBtn,
  #sidebarToggleBtn,
  #kanbanFullscreenBtn{ display:none!important; }
  .crm-hdr-sep{ display:none!important; }
  /* Bump tap-target on every item inside the mobile Tools (⋯) dropdown
     so the menu items themselves clear the 44px floor — the .crm-tools-
     menu base is `padding:8px 12px` (~32px tall) which is fine on
     desktop where the cursor is precise but cramped on a phone. */
  .crm-tools-menu button{ min-height:44px!important; padding:10px 14px!important; font-size:13px!important; }
  /* Bulk-action bar — sits between header and kanban when Bulk select
     is ON. Inline styles ship it as a tight one-line flex with 11-12px
     fonts and 5px-padded selects, which packs ~9 controls into the
     row. On phones it wraps but each control is sub-tap-target. Bump
     font + padding + min-height; let selects/buttons take a full row
     each when their natural width exceeds 50% of the bar. */
  #bulkActionBar{
    padding:10px 12px!important;
    font-size:13px!important;
    gap:8px!important;
    flex-wrap:wrap!important;
  }
  #bulkActionBar select,
  #bulkActionBar .btn{
    min-height:40px!important;
    font-size:13px!important;
    padding:8px 10px!important;
    flex:1 1 auto!important;
    min-width:0!important;
  }
  #bulkActionBar #bulkSelectedCount{ flex-basis:100%!important; font-size:14px!important; }
  /* Trash button is the only .btn left in the actions row on mobile;
     without this override, .crm-header .btn{flex:1} would stretch it
     to fill the entire row width. */
  .crm-header .btn-trash-toggle{ flex:0 0 auto!important; min-height:40px!important; min-width:40px!important; padding:8px 12px!important; }
  /* Match icon-buttons (density, Tools⋯) to the trash button so the
     three actions-row controls share one visual height and clear the
     44px iOS thumb-zone with a couple px to spare. */
  .crm-icon-btn{ min-width:40px!important; min-height:40px!important; }
  /* Hide secondary CRM header on mobile (use bottom nav instead) */
  .crm-secondary-header{display:none!important;}
  .crm-sec-restore{display:none!important;}
  .crm-rev-strip{padding:4px 12px 8px;overflow-x:auto;flex-wrap:nowrap;}
  .rev-pill{padding:6px 12px;flex-shrink:0;}
  .sf-row{flex-direction:column;gap:8px;}
  .theme-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));}
  .step-bar{overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px;}
  .step-item{flex-shrink:0;}
  .doc-grid{grid-template-columns:1fr!important;}
  .lb-row{flex-wrap:wrap;gap:4px;}
  /* z-index:1900 so modals (2000) render ABOVE the bottom nav */
  #mobile-nav{display:flex!important;position:fixed;bottom:0;left:0;right:0;z-index:1900;height:62px;background:rgba(10,12,15,.96);border-top:1px solid var(--br);justify-content:space-around;align-items:center;padding:0 4px 2px;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);}
  .mn-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:6px 8px 4px;cursor:pointer;border-radius:12px;flex:1;transition:all .18s ease;position:relative;-webkit-tap-highlight-color:transparent;min-width:0;}
  .mn-item::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:0;height:2px;background:var(--orange);border-radius:0 0 3px 3px;transition:width .2s ease;}
  .mn-item.active::before{width:28px;}
  .mn-item.active{background:color-mix(in srgb, var(--orange) 10%, transparent);}
  .mn-item.active .mn-icon{color:var(--orange);transform:scale(1.12);filter:drop-shadow(0 0 6px color-mix(in srgb, var(--orange) 50%, transparent));}
  .mn-item.active .mn-lbl{color:var(--orange);font-weight:700;}
  .mn-item:active{background:color-mix(in srgb, var(--orange) 8%, transparent);transform:scale(.94);}
  .mn-icon{font-size:19px;line-height:1;transition:all .18s ease;color:var(--m);}
  /* Wave 2A — mobile-nav uses .nbd-icon SVG glyphs now (parity with global
     header). Emoji-rendered .mn-icon spans are kept as a fallback but the
     SVG is the primary visual; sizing matches the old emoji rendering. */
  .mn-item .nbd-icon{ width:22px; height:22px; transition:transform .18s ease, color .18s ease; }
  .mn-item.active .nbd-icon{ color:var(--orange); transform:scale(1.12); filter:drop-shadow(0 0 6px color-mix(in srgb, var(--orange) 50%, transparent)); }
  /* Center "+" gets the brand-accent FAB treatment within the nav strip —
     mirrors JobNimbus's centered "+" but stays orange-keyed. */
  /* Wave 5: --accent-fg ensures icon contrast on every theme; --og
     glow is per-theme-tinted. */
  .mn-item.mn-fab .nbd-icon{ color:var(--accent-fg); }
  .mn-item.mn-fab{
    background:var(--orange); border-radius:50%;
    width:48px; height:48px; flex:0 0 48px;
    padding:0; margin-top:-14px;
    border:1px solid var(--accent-ring);
    box-shadow:0 4px 12px var(--og);
  }
  .mn-item.mn-fab .mn-lbl{ display:none; }
  .mn-item.mn-fab.active{ background:var(--orange); }
  .mn-item.mn-fab.active::before{ display:none; }
  .mn-lbl{font-size:8.5px;font-family:'Barlow Condensed',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--m);transition:all .18s ease;white-space:nowrap;font-weight:600;}
  .mn-badge{position:absolute;top:3px;right:calc(50% - 18px);background:var(--red);color:var(--t);font-size:8px;font-weight:700;border-radius:8px;padding:1px 5px;min-width:14px;text-align:center;line-height:1.4;}
  #mobile-more-menu.open{display:block;}
  .mm-overlay.open{display:block;}

  /* ══════════════════════════════════
     MAP MOBILE OVERRIDES
     ══════════════════════════════════ */

  /* Taller map on mobile so there's room to breathe */
  .map-area{height:64vw!important;min-height:240px!important;}

  /* Spyglass: static below map on mobile */
  .map-spyglass-panel{
    position:static!important;
    transform:none!important;
    top:auto!important; left:auto!important;
    min-width:0!important;
    width:100%!important;
    box-sizing:border-box!important;
    box-shadow:none!important;
    order:2!important;
    background:rgba(10,12,15,.98)!important;
    padding:8px 10px!important;
    border-radius:0!important;
    border:none!important;
    border-bottom:1px solid var(--br)!important;
  }

  /* Map-view: column layout with order slots */
  .map-view{ flex-direction:column!important; position:relative!important; }
  #mainMapArea{ order:1!important; }
  #map-sidebar-map{ order:3!important; }

  /* Badge: icon-only on mobile, smaller */
  .map-badge{
    font-size:10px!important;
    padding:4px 7px!important;
    top:6px!important; right:6px!important;
    max-width:120px!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }

  /* Pin stats: compact pills, smaller text */
  .pin-stats-overlay{
    top:6px!important; left:6px!important;
    flex-direction:row!important;
    flex-wrap:wrap!important;
    gap:3px!important;
    max-width:calc(100% - 140px)!important;
  }
  .pin-stat-pill{
    padding:3px 7px!important;
    font-size:9px!important;
    gap:4px!important;
  }
  .pin-stat-dot{ width:6px!important; height:6px!important; }

  /* FAB bar: icon-only, compact, scrollable strip */
  .map-fab-bar{
    bottom:8px!important;
    left:8px!important;
    right:8px!important;
    transform:none!important;
    padding:5px 8px!important;
    gap:4px!important;
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-width:none!important;
    justify-content:flex-start!important;
    border-radius:14px!important;
  }
  .map-fab-bar::-webkit-scrollbar{ display:none!important; }

  /* FAB buttons: icon + very short label, smaller */
  .map-fab{
    padding:6px 9px!important;
    font-size:9px!important;
    gap:3px!important;
    flex-shrink:0!important;
    border-radius:20px!important;
  }
  /* Hide text on small FABs, show only emoji */
  .map-fab span:not(.map-fab-icon){ display:none!important; }
  .map-fab-icon{ font-size:14px!important; }
  /* Show emoji only for the My Location fab */
  .map-fab:first-child span:not(.map-fab-icon){ display:inline!important; font-size:9px!important; }
  .map-fab-div{ display:none!important; }

  /* ══════════════════════════════════
     KANBAN MOBILE OVERRIDES
     ══════════════════════════════════ */

  /* Narrower columns on mobile so more fit */
  .kanban-col{min-width:195px!important;max-width:195px!important;}
  .kcol-body{max-height:calc(100vh - 280px)!important;max-height:calc(100dvh - 280px)!important;}

  /* Compact card on mobile */
  .k-card{ padding:9px 10px 8px!important; }
  .kc-name{ font-size:12px!important; padding-right:52px!important; }
  /* Mobile size override — top/right removed in tandem with the desktop
     absolute-positioning fix above. Badge now flows inside .kc-val-row. */
  .kc-val-badge{ font-size:13px!important; }
  .kc-addr{ font-size:9px!important; margin-bottom:4px!important; }
  .kc-phone-row{ margin-bottom:4px!important; }
  .kc-phone-link{ font-size:10px!important; }
  .kc-email-line{ display:none!important; } /* hide email on mobile — saves space */
  .kc-ins-row{ margin-bottom:4px!important; }
  .kc-carrier{ font-size:9px!important; padding:1px 5px!important; }
  .kc-claim-num{ display:none!important; }
  .kc-photos{ display:none!important; } /* hide photo thumbnails on mobile */
  .kc-tags{ gap:2px!important; margin-bottom:4px!important; }
  .kc-tag{ font-size:8px!important; padding:1px 5px!important; }
  .kc-days{ font-size:8px!important; }
  .kc-footer{ padding-top:5px!important; }

  /* CRM header: stack properly on small screens */
  .crm-header > div:last-child > input[type=text]{ min-width:0!important; width:auto!important; flex:1!important; }

  /* Add Lead button — 44px+ tap target on mobile */
  .crm-header .btn-orange{ min-height:44px!important; font-size:13px!important; padding:10px 14px!important; }

  /* Quick Add FAB removed */

  /* Lead modal — full screen on mobile, bigger tap targets */
  #leadModal .modal { max-width:100%!important; width:100%!important; margin:0!important; border-radius:16px 16px 0 0!important; position:fixed!important; bottom:0!important; left:0!important; right:0!important; max-height:92vh!important; }
  #leadModal.modal-bg.open { align-items:flex-end!important; }
  .mfield input, .mfield select, .mfield textarea { font-size:16px!important; padding:12px 14px!important; min-height:48px!important; }
  .mfield label { font-size:11px!important; margin-bottom:6px!important; }
  .mrow { flex-direction:column!important; gap:0!important; }
  .msave { font-size:15px!important; padding:16px!important; min-height:52px!important; margin-top:8px!important; }
  .modal-close { width:44px!important; height:44px!important; font-size:20px!important; top:8px!important; right:8px!important; display:flex!important; align-items:center!important; justify-content:center!important; }

  /* Quick add modal — same treatment */
  #quickAddModal .modal { max-width:100%!important; width:100%!important; margin:0!important; border-radius:16px 16px 0 0!important; position:fixed!important; bottom:0!important; left:0!important; right:0!important; }
  #quickAddModal.modal-bg.open { align-items:flex-end!important; }

  /* ══ ESTIMATE BUILDER — FULL MOBILE OVERHAUL ══ */
  .est-meas-grid { grid-template-columns:1fr!important; gap:8px!important; }
  .meas-field input, .meas-field select { font-size:16px!important; padding:12px 14px!important; min-height:48px!important; }
  .meas-field label { font-size:11px!important; margin-bottom:6px!important; }

  /* Tier grid — force single column, scrollable */
  .tier-grid { grid-template-columns:1fr!important; gap:14px!important; max-height:none!important; overflow:visible!important; }
  .tier-card { padding:20px!important; min-height:auto!important; }
  .tier-card .tier-name { font-size:16px!important; }
  .tier-card .tier-items { font-size:13px!important; line-height:1.7!important; }
  .tier-card .tier-price { font-size:20px!important; margin-top:10px!important; }
  .tier-badge { font-size:11px!important; padding:4px 12px!important; }

  /* Est steps progress — compact on mobile */
  .est-steps { gap:0!important; padding:0 8px!important; margin-bottom:16px!important; }
  .est-step .step-circle { width:28px!important; height:28px!important; font-size:12px!important; }
  .est-step .step-label { font-size:9px!important; }

  /* Est builder — proper scrolling */
  #est-builder { overflow-y:auto!important; -webkit-overflow-scrolling:touch!important; padding-bottom:100px!important; }
  #est-builder .panel { margin:0 0 12px!important; }
  #est-builder .panel-body { padding:14px!important; }
  #est-builder .btn { min-height:48px!important; font-size:14px!important; padding:12px 20px!important; }

  /* Review step — scrollable on mobile */
  #estStep4 .panel-body { max-height:none!important; overflow:visible!important; }
  #estReviewBody { font-size:13px!important; }
  #estReviewBody table { display:block!important; overflow-x:auto!important; -webkit-overflow-scrolling:touch!important; }

  /* view-est needs to allow scroll */
  #view-est.active { display:flex!important; flex-direction:column!important; overflow:visible!important; }
  #view-est .view-scroll { overflow-y:auto!important; -webkit-overflow-scrolling:touch!important; flex:1!important; }

  /* Kanban cards — bigger tap targets */
  .k-card { cursor:pointer; min-height:80px; }

  /* Joe view — full height on mobile */
  #view-joe.active { height:calc(100vh - 110px); height:calc(100dvh - 110px); display:flex; flex-direction:column; }
  #view-joe:not(.active) { display:none!important; }
  .joe-messages { flex:1!important; }

  /* Notification button — bigger tap target */
  #notifBtn { width:44px!important; height:44px!important; }

  /* ══ SAFE AREA INSETS (iPhone notch, home indicator) ══ */
  body { padding-bottom:calc(62px + env(safe-area-inset-bottom, 0px))!important; }
  #mobile-nav { height:calc(62px + env(safe-area-inset-bottom, 0px))!important; padding-bottom:env(safe-area-inset-bottom, 0px)!important; }
  #mobile-more-menu { padding-bottom:calc(80px + env(safe-area-inset-bottom, 0px))!important; }
  header { padding-top:env(safe-area-inset-top, 0px)!important; }

  /* ══ GLOBAL MOBILE TOUCH & SCROLL ══ */
  html { -webkit-text-size-adjust:100%; }
  body { -webkit-overflow-scrolling:touch; overflow-x:hidden!important; }
  * { -webkit-tap-highlight-color:transparent; }
  a, button, .btn, .ni, .mn-item, .mm-item { touch-action:manipulation; }
  input, select, textarea { font-size:16px!important; } /* prevent iOS zoom on focus */

  /* ══ SCROLL FIX: ensure views are always scrollable ══ */
  .view.active { display:block!important; min-height:auto!important; }
  .view-scroll { min-height:auto!important; padding-bottom:80px!important; }

  /* ══ MODALS: full-width on mobile, bottom-sheet style ══ */
  .modal { max-width:100vw!important; width:calc(100% - 16px)!important; margin:8px!important; border-radius:16px!important; max-height:calc(100vh - 80px)!important; max-height:calc(100dvh - 80px)!important; overflow-y:auto!important; -webkit-overflow-scrolling:touch!important; }

  /* ══ TOAST: above mobile nav ══ */
  .toast { bottom:calc(72px + env(safe-area-inset-bottom, 0px))!important; right:12px!important; left:12px!important; max-width:none!important; }

}

/* ── Extra small phones (under 400px) ── */
@media(max-width:400px){
  .map-area{height:70vw!important;min-height:220px!important;}
  .kanban-col{min-width:175px!important;max-width:175px!important;}
  .map-fab{ padding:5px 7px!important; }
  .map-badge{ font-size:9px!important; max-width:90px!important; }
  .map-spyglass-input{ font-size:12px!important; }
}

/* Always hidden on desktop, shown via media query above */
#mobile-nav{display:none;}
#mobile-more-menu{
  display:none;position:fixed;bottom:0;left:0;right:0;top:0;z-index:2001;
  background:var(--bg, #0a0c0f);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  flex-direction:column;overflow-y:auto;-webkit-overflow-scrolling:touch;
  /* Respect iPhone notch / status bar so header isn't under the chrome */
  padding:max(16px, env(safe-area-inset-top, 16px)) 0 80px;
}
#mobile-more-menu.open{display:flex;}
.mm-header{display:flex;align-items:center;justify-content:space-between;padding:20px 20px 14px;border-bottom:1px solid var(--br);}
.mm-header-title{font-family:'Barlow Condensed',sans-serif;font-size:18px;font-weight:800;color:var(--t);letter-spacing:.04em;}
/* 48x48 tap target (iOS HIG 44x44 minimum + 4px cushion).
   Larger font, border that visually says 'tappable' */
.mm-close{background:var(--s2);border:1px solid var(--br);border-radius:12px;color:var(--t);font-size:22px;width:48px;height:48px;display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-tap-highlight-color:transparent;flex-shrink:0;transition:all .15s;}
.mm-close:hover,.mm-close:active{background:var(--orange);color:var(--accent-fg);border-color:var(--orange);}
.mm-section{padding:8px 12px 4px;font-size:9px;font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.12em;color:var(--m);font-weight:700;}
.mm-item{display:flex;align-items:center;gap:14px;padding:15px 20px;cursor:pointer;font-size:15px;color:var(--t);border-left:3px solid transparent;transition:all .15s;-webkit-tap-highlight-color:transparent;min-height:48px;}
.mm-item:hover,.mm-item:active{background:var(--s2);border-left-color:var(--orange);color:var(--orange);}
.mm-item-icon{font-size:20px;width:28px;text-align:center;flex-shrink:0;}
.mm-overlay{display:none;position:fixed;top:0;right:0;bottom:0;left:0;z-index:1998;background:rgba(0,0,0,.5);}
.mm-overlay.open{display:block;}
.map-toggle-btn{display:none;}

/* ── MAP FLOATING TOOLBAR ── */
.map-fab-bar{
  position:absolute;
  bottom:18px;
  left:50%;
  transform:translateX(-50%);
  z-index:900;
  display:flex;
  gap:6px;
  background:rgba(10,12,15,.92);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.1);
  border-radius:40px;
  padding:7px 10px;
  box-shadow:0 4px 24px rgba(0,0,0,.6);
  white-space:nowrap;
}
.map-fab{
  display:flex;
  align-items:center;
  gap:5px;
  background:transparent;
  border:1px solid rgba(255,255,255,.08);
  border-radius:24px;
  padding:6px 12px;
  font-family:'Barlow Condensed',sans-serif;
  font-size:11px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--t);
  cursor:pointer;
  transition:all .15s;
  white-space:nowrap;
}
.map-fab:hover{background:var(--og);border-color:var(--orange);color:var(--orange);}
.map-fab.active{background:var(--orange);border-color:var(--orange);color:var(--accent-fg);}
.map-fab-icon{font-size:13px;}
/* divider between fab groups */
.map-fab-div{width:1px;background:rgba(255,255,255,.1);align-self:stretch;margin:0 2px;}

/* ── PIN STATS OVERLAY ── */
.pin-stats-overlay{
  position:absolute;
  top:10px;
  left:10px;
  z-index:900;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.pin-stat-pill{
  display:flex;
  align-items:center;
  gap:6px;
  background:rgba(10,12,15,.88);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  padding:4px 10px;
  font-family:'Barlow Condensed',sans-serif;
  font-size:11px;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--t);
}
.pin-stat-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}

/* ── SPYGLASS SEARCH PANEL ── */
.map-spyglass-panel{
  position:absolute;
  top:10px;
  left:50%;
  transform:translateX(-50%);
  z-index:900;
  background:rgba(10,12,15,.92);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.1);
  border-radius:30px;
  padding:6px 8px;
  display:flex;
  align-items:center;
  gap:6px;
  min-width:280px;
  box-shadow:0 4px 20px rgba(0,0,0,.5);
  transition:all .2s;
}
.map-spyglass-input{
  flex:1;
  background:transparent;
  border:none;
  outline:none;
  color:var(--t);
  font-family:'Barlow',sans-serif;
  font-size:13px;
  padding:2px 4px;
}
.map-spyglass-input::placeholder{color:var(--m);}
.map-spyglass-btn{
  background:var(--orange);
  border:none;
  border-radius:20px;
  padding:5px 12px;
  font-family:'Barlow Condensed',sans-serif;
  font-size:11px;
  font-weight:700;
  letter-spacing:.06em;
  color:var(--accent-fg);
  cursor:pointer;
  flex-shrink:0;
  transition:background .15s;
}
.map-spyglass-btn:hover{background:var(--ob);}
.map-spyglass-loc-btn{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  border-radius:20px;
  width:30px;height:30px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:14px;flex-shrink:0;
  transition:all .15s;
}
.map-spyglass-loc-btn:hover{background:var(--og);border-color:var(--orange);}

/* ── TERRITORY ZONES ── */
.zone-panel{
  background:var(--s2);border:1px solid var(--br);border-radius:8px;
  padding:10px;margin-bottom:8px;display:none;
}
.zone-panel.visible{display:block;}
.zone-name-input{
  width:100%;background:var(--s3);border:1px solid var(--br);border-radius:5px;
  color:var(--t);font-size:11px;padding:6px 9px;box-sizing:border-box;margin-bottom:6px;
}
.zone-name-input:focus{outline:none;border-color:var(--orange);}
.zone-list{display:flex;flex-direction:column;gap:4px;margin-top:6px;}
.zone-item{display:flex;align-items:center;gap:6px;padding:5px 8px;background:var(--s3);
  border-radius:5px;font-size:11px;color:var(--t);}
.zone-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
.zone-del{margin-left:auto;background:none;border:none;color:var(--m);cursor:pointer;font-size:12px;padding:0 2px;}
.zone-del:hover{color:var(--red);}

/* ── LOCATION ACCURACY RING ── */
@keyframes locPulse{0%{transform:scale(1);opacity:.8;}100%{transform:scale(1.8);opacity:0;}}
.loc-pulse-ring{animation:locPulse 1.5s ease-out infinite;}



/* ── ASK JOE AI CHAT ─────────────────────────── */
#view-joe { flex-direction:column; overflow:hidden; }
#view-joe:not(.active) .joe-input-area { display:none!important; }
#view-joe:not(.active) .joe-header { display:none!important; }
.joe-header { flex-shrink:0; background:var(--s); border-bottom:1px solid var(--br); padding:14px 20px; display:flex; align-items:center; gap:12px; }
.joe-avatar { width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,var(--orange),var(--orange)); display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
.joe-title { font-family:'Barlow Condensed',sans-serif; font-size:18px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--t); }
.joe-subtitle { font-size:11px; color:var(--m); margin-top:1px; }
.joe-status { margin-left:auto; display:flex; align-items:center; gap:6px; font-size:10px; font-family:'Barlow Condensed',sans-serif; letter-spacing:.08em; color:var(--green); }
.joe-status-dot { width:7px; height:7px; border-radius:50%; background:var(--green); animation:pulse 2s infinite; }
.joe-messages { flex:1; overflow-y:auto; padding:20px; display:flex; flex-direction:column; gap:14px; }
.joe-messages::-webkit-scrollbar { width:4px; } .joe-messages::-webkit-scrollbar-thumb { background:var(--br); }
.joe-msg { display:flex; gap:10px; max-width:85%; }
.joe-msg.user { align-self:flex-end; flex-direction:row-reverse; }
.joe-msg-avatar { width:30px; height:30px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:13px; }
.joe-msg.joe .joe-msg-avatar { background:linear-gradient(135deg,var(--orange),#c85010); }
.joe-msg.user .joe-msg-avatar { background:var(--s3); }
.joe-bubble { background:var(--s2); border:1px solid var(--br); border-radius:12px; padding:11px 14px; font-size:13px; line-height:1.6; color:var(--t); }
.joe-msg.user .joe-bubble { background:var(--orange); border-color:var(--orange); color:var(--accent-fg); border-radius:12px 12px 4px 12px; }
.joe-msg.joe .joe-bubble { border-radius:4px 12px 12px 12px; }
.joe-bubble strong { font-weight:700; }
.joe-bubble ul { margin:6px 0 4px 16px; }
.joe-bubble li { margin-bottom:3px; }
.joe-typing { display:flex; gap:4px; padding:4px 2px; align-items:center; }
.joe-typing span { width:7px; height:7px; border-radius:50%; background:var(--orange); animation:joetype 1.2s infinite; }
.joe-typing span:nth-child(2) { animation-delay:.2s; }
.joe-typing span:nth-child(3) { animation-delay:.4s; }
@keyframes joetype { 0%,60%,100%{transform:translateY(0);opacity:.4} 30%{transform:translateY(-5px);opacity:1} }
.joe-input-area { flex-shrink:0; background:var(--s); border-top:1px solid var(--br); padding:14px 20px; }
.joe-input-row { display:flex; gap:10px; align-items:flex-end; }
.joe-input { flex:1; background:var(--s2); border:1px solid var(--br); border-radius:10px; padding:10px 14px; font-family:'Barlow',sans-serif; font-size:13px; color:var(--t); outline:none; resize:none; max-height:120px; min-height:42px; line-height:1.5; }
.joe-input:focus { border-color:var(--orange); }
.joe-send { background:var(--orange); color:var(--accent-fg); border:none; border-radius:10px; padding:10px 16px; font-family:'Barlow Condensed',sans-serif; font-size:14px; font-weight:700; letter-spacing:.06em; cursor:pointer; transition:background .15s; flex-shrink:0; height:42px; }
.joe-send:hover { background:var(--ob); }
.joe-send:disabled { opacity:.4; cursor:not-allowed; }
.joe-quick-btns { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
.joe-quick { background:var(--s2); border:1px solid var(--br); border-radius:20px; padding:5px 12px; font-size:11px; font-family:'Barlow Condensed',sans-serif; letter-spacing:.04em; color:var(--m); cursor:pointer; transition:all .15s; white-space:nowrap; }
.joe-quick:hover { border-color:var(--orange); color:var(--orange); }
.joe-no-key { text-align:center; padding:40px 20px; }
.joe-no-key-icon { font-size:40px; margin-bottom:12px; opacity:.5; }
.joe-no-key p { font-size:13px; color:var(--m); margin-bottom:16px; line-height:1.6; }
.joe-key-input-row { display:flex; gap:8px; max-width:440px; margin:0 auto; }
.joe-key-input-row input { flex:1; background:var(--s2); border:1px solid var(--br); border-radius:7px; padding:9px 12px; font-family:'Barlow',sans-serif; font-size:12px; color:var(--t); outline:none; }
.joe-key-input-row input:focus { border-color:var(--orange); }
.joe-context-bar { background:color-mix(in srgb, var(--orange) 6%, transparent); border-bottom:1px solid color-mix(in srgb, var(--orange) 15%, transparent); padding:7px 20px; font-size:10px; font-family:'Barlow Condensed',sans-serif; letter-spacing:.06em; color:var(--orange); flex-shrink:0; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
/* ── END ASK JOE ─────────────────────────────── */

/* ── TASK SYSTEM ─────────────────────────────── */
.kc-task-badge{display:inline-flex;align-items:center;gap:4px;font-size:var(--kcard-tag-fz, 10px);font-family:'Barlow Condensed',sans-serif;letter-spacing:.06em;padding:3px 8px;border-radius:10px;cursor:pointer;border:1px solid color-mix(in srgb, var(--ink) 14%, transparent);background:color-mix(in srgb, var(--ink) 6%, transparent);color:color-mix(in srgb, var(--ink) 65%, var(--paper));transition:all .15s;white-space:nowrap;font-weight:600;}
.kc-task-badge:hover{border-color:var(--orange);color:var(--orange);background:color-mix(in srgb, var(--orange) 10%, transparent);}
.kc-task-badge.has-tasks{color:var(--ink);border-color:color-mix(in srgb, var(--ink) 22%, transparent);}
.kc-task-badge.has-overdue{border-color:var(--red);color:var(--red);background:color-mix(in srgb, var(--red) 12%, transparent);}
.kc-task-badge.all-done{border-color:var(--green);color:var(--green);background:color-mix(in srgb, var(--green) 12%, transparent);}
/* R4.4: empty-state task badge — quiet pill instead of bright '+ Tasks'
   CTA so the real action signals (Due / Needs X / next-action) win
   the visual hierarchy. Still discoverable on hover via the existing
   :hover rule above which restores the orange treatment. */
.kc-task-badge.empty{
  background: transparent;
  border-color: color-mix(in srgb, var(--ink) 10%, transparent);
  color: color-mix(in srgb, var(--ink) 38%, var(--paper));
  font-weight: 500;
  opacity: 0.72;
}
#taskModal{z-index:2500!important;}
#taskModal .modal{max-width:480px;}
.task-modal-header{margin-bottom:16px;}
.task-lead-name{font-family:'Barlow Condensed',sans-serif;font-size:20px;font-weight:700;text-transform:uppercase;color:var(--t);letter-spacing:.04em;}
.task-lead-addr{font-size:11px;color:var(--m);margin-top:2px;}
.task-add-row{display:flex;gap:8px;margin-bottom:16px;align-items:flex-end;flex-wrap:wrap;}
.task-add-row input[type=text]{flex:1 1 100%;min-width:0;background:var(--s2);border:1px solid var(--br);border-radius:7px;padding:9px 11px;font-family:'Barlow',sans-serif;font-size:13px;color:var(--t);outline:none;}
.task-add-row input[type=text]:focus{border-color:var(--orange);}
.task-add-row input[type=date]{flex:1 1 auto;min-width:0;background:var(--s2);border:1px solid var(--br);border-radius:7px;padding:9px 8px;font-family:'Barlow',sans-serif;font-size:12px;color:var(--t);outline:none;width:130px;}
.task-add-row input[type=date]:focus{border-color:var(--orange);}
.task-add-btn{background:var(--orange);color:var(--accent-fg);border:none;border-radius:7px;padding:9px 14px;font-family:'Barlow Condensed',sans-serif;font-size:14px;font-weight:700;letter-spacing:.06em;cursor:pointer;white-space:nowrap;flex-shrink:0;}
.task-add-btn:hover{background:var(--ob);}
.task-list{display:flex;flex-direction:column;gap:6px;max-height:360px;overflow-y:auto;}
.task-list::-webkit-scrollbar{width:3px;}.task-list::-webkit-scrollbar-thumb{background:var(--br);}
.task-item{display:flex;align-items:center;gap:10px;padding:9px 11px;background:var(--s2);border:1px solid var(--br);border-radius:8px;transition:border-color .15s;}
.task-item.done{opacity:.55;}
.task-item.overdue{border-color:rgba(224,82,82,.4);background:rgba(224,82,82,.04);}
.task-cb{width:17px;height:17px;accent-color:var(--orange);cursor:pointer;flex-shrink:0;}
.task-text{flex:1;font-size:13px;color:var(--t);line-height:1.4;}
.task-item.done .task-text{text-decoration:line-through;color:var(--m);}
.task-due{font-size:9px;font-family:'Barlow Condensed',sans-serif;letter-spacing:.06em;color:var(--m);white-space:nowrap;flex-shrink:0;}
.task-due.overdue{color:var(--red);}
.task-del{background:transparent;border:none;color:var(--m);cursor:pointer;font-size:14px;padding:0 2px;line-height:1;transition:color .15s;flex-shrink:0;}
.task-del:hover{color:var(--red);}
.task-empty{text-align:center;padding:24px;font-size:12px;color:var(--m);}
.today-task-item{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--br);}
.today-task-item:last-child{border-bottom:none;}
.today-task-cb{width:15px;height:15px;accent-color:var(--orange);cursor:pointer;flex-shrink:0;}
.today-task-text{flex:1;font-size:12px;color:var(--t);}
.today-task-text.done{text-decoration:line-through;color:var(--m);}
.today-task-lead{font-size:10px;color:var(--orange);cursor:pointer;flex-shrink:0;}
.today-task-lead:hover{text-decoration:underline;}
.today-task-overdue{font-size:9px;color:var(--red);font-family:'Barlow Condensed',sans-serif;letter-spacing:.06em;flex-shrink:0;}
/* ── END TASK SYSTEM ─────────────────────────── */

/* Force kanban board layout regardless of .view parent */
.view#view-crm { overflow: hidden !important; }
.view#view-crm > .kanban-board { display: flex !important; flex-direction: row !important; overflow-x: auto !important; }

/* ─── Mobile kanban density — tighten cards on small screens ────────
   Joe reported the kanban felt overcrowded on iPhone. Two cards per
   column ate the entire viewport. This block trims paddings, font
   sizes, and gaps WITHOUT touching desktop, so the same cards fit
   ~30% more efficiently and side-scrolling reveals more of the next
   column. */
@media (max-width:900px){
  .k-card{ padding:9px 11px; border-radius:8px; }
  .kc-name{ font-size:13px; line-height:1.18; padding-right:48px; margin-bottom:1px; }
  .kc-addr{ font-size:11px!important; line-height:1.2!important; margin:1px 0 3px!important; }
  .kc-phone-row{ margin:2px 0!important; }
  .kc-phone-link, .kc-email-line{ font-size:11px!important; }
  .kc-email-line{ margin:1px 0 3px!important; }
  .kc-ins-row{ gap:4px!important; margin:3px 0!important; }
  .kc-carrier{ font-size:10px!important; padding:1px 6px!important; }
  .kc-claim-num{ font-size:9px!important; }
  .kc-tag{ font-size:8.5px!important; padding:1px 6px!important; }
  .kc-tags{ gap:3px!important; margin:3px 0!important; }
  .kc-photos{ margin:4px 0!important; gap:3px!important; }
  .kc-photo-thumb, .kc-photo-more{ width:32px!important; height:32px!important; border-radius:5px!important; font-size:10px!important; }
  .kc-val-badge{ font-size:13px!important; }
  .kc-days{ font-size:9px!important; padding:1px 5px!important; }
  .kc-footer{ margin-top:5px!important; padding-top:4px!important; gap:4px!important; }
  .kc-task-badge{ font-size:9.5px!important; padding:3px 7px!important; min-height:24px!important; }
  .kc-actions{ gap:3px!important; }
  .kc-arrow{ width:22px!important; height:22px!important; font-size:10px!important; }
  .kc-btn{ padding:3px 6px!important; font-size:9px!important; min-height:24px!important; }
  /* Tighten column spacing too — gives one more card visible per scroll */
  .kcol-body{ padding:8px!important; gap:6px!important; }
  .kanban-col{ min-width:240px!important; max-width:280px!important; }
  .kcol-header{ padding:8px 10px!important; font-size:11px!important; }
}
@media (max-width:480px){
  /* Even tighter on phones in portrait */
  .k-card{ padding:8px 10px; }
  .kanban-col{ min-width:220px!important; max-width:260px!important; }
  .kc-name{ font-size:12.5px; }
  /* Hide the email row entirely — phone is the primary contact in field
     and the icon row was eating an additional line on every card */
  .kc-email-line{ display:none!important; }
}

/* ─── Mobile dropdown panels — keep them inside the viewport ─────────
   The header bell + recent-customers dropdowns use position:absolute;
   right:0 relative to their tiny icon button, with min-width:320px on
   notif. On a 390px iPhone viewport with the icons near the right edge,
   the dropdown overflows the LEFT side of the screen — text gets clipped
   ("ue Follow-Up" instead of "Overdue Follow-Up"). Convert to full-width
   fixed panels under the header on mobile. */
@media (max-width:600px){
  #notifDropdown, #recentDropdown {
    position: fixed!important;
    top: calc(56px + env(safe-area-inset-top, 0px))!important;
    left: 8px!important;
    right: 8px!important;
    min-width: 0!important;
    max-width: none!important;
    width: auto!important;
    max-height: calc(100vh - 80px)!important;
    max-height: calc(100dvh - 80px - env(safe-area-inset-bottom,0px))!important;
    overflow-y: auto!important;
    -webkit-overflow-scrolling: touch;
  }
  /* Notification badge "50" shouldn't overflow the bell icon */
  #notifBadge { font-size: 8.5px!important; padding: 1px 3.5px!important; min-width: 14px!important; }
}
