/* ====================================================================
   RoofMetric — Modern UI
   Refined palette · Inter typography · soft shadows · smooth lines
   ==================================================================== */

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Brand palette — chrome silver + cyan to match the logo, with deeper trust-blue primary */
  --primary: #1d4ed8;
  --primary-dark: #1e3a8a;
  --primary-soft: #dbeafe;
  --brand-cyan: #06b6d4;          /* matches the cyan R in the logo */
  --brand-cyan-dark: #0e7490;
  --brand-cyan-soft: #cffafe;
  --brand-chrome: #94a3b8;         /* matches the chrome silver M */
  --brand-chrome-light: #e2e8f0;
  --accent: #06b6d4;               /* legacy alias — now cyan, brand-aligned */
  --accent-dark: #0e7490;
  --accent-soft: #cffafe;
  --success: #10b981;
  --success-soft: #d1fae5;
  --warning: #f59e0b;
  --warning-soft: #fef3c7;
  --danger: #ef4444;
  --danger-soft: #fee2e2;

  --bg: #f8fafc;
  --bg-alt: #f1f5f9;
  --surface: #ffffff;
  --surface-2: #fafbfc;
  --text: #0f172a;
  --text-muted: #64748b;
  --text-soft: #94a3b8;
  --border: #e2e8f0;
  --border-soft: #f1f5f9;

  /* Shadows — multi-layer for depth */
  --shadow-xs: 0 1px 2px rgba(15,23,42,0.04);
  --shadow-sm: 0 1px 3px rgba(15,23,42,0.04), 0 1px 2px rgba(15,23,42,0.06);
  --shadow: 0 4px 6px -1px rgba(15,23,42,0.05), 0 2px 4px -2px rgba(15,23,42,0.04);
  --shadow-md: 0 10px 15px -3px rgba(15,23,42,0.06), 0 4px 6px -4px rgba(15,23,42,0.05);
  --shadow-lg: 0 20px 25px -5px rgba(15,23,42,0.08), 0 8px 10px -6px rgba(15,23,42,0.05);
  --shadow-xl: 0 25px 50px -12px rgba(15,23,42,0.18);

  /* Radii */
  --r-sm: 6px;
  --r: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;

  --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

html { -webkit-text-size-adjust: 100%; }

/* Mobile only (app + narrow web): kill horizontal overflow without breaking
   sticky headers. `clip` (not `hidden`) keeps position:sticky working. Scoped
   to ≤768px so the DESKTOP WEB layout is completely unaffected. */
@media (max-width: 768px) {
  html, body { max-width: 100%; overflow-x: clip; }

  /* Popups/modals: fit the screen width and scroll DOWN, never sideways.
     The side-scroll comes from inner grids (e.g. change-order line items)
     whose inputs won't shrink — min-width:0 lets the columns collapse to fit. */
  .modal-card, .modal-overlay > div {
    max-width: 100% !important;
    width: calc(100vw - 16px) !important;
    overflow-x: hidden;
    box-sizing: border-box;
  }
  .modal-card input, .modal-card select, .modal-card textarea, .modal-card button {
    min-width: 0;
    box-sizing: border-box;
  }
  .modal-card [style*="grid"] > * { min-width: 0; }

  /* Estimate builder: fit the screen; let inner grids shrink and the line-item
     table scroll WITHIN its card instead of pushing the page wide. */
  #estimate, .estimate-wrap, .estimate-section { max-width: 100%; overflow-x: hidden; box-sizing: border-box; }
  .estimate-card { max-width: 100%; box-sizing: border-box; overflow-x: auto; }
  .estimate-card input, .estimate-card select, .estimate-card textarea { min-width: 0; box-sizing: border-box; }
  #estimate [style*="grid"] > *, .estimate-section [style*="grid"] > * { min-width: 0; }

  /* Room-scan cards: the LiDAR measurement summary was colliding with the
     View / +Estimate / Share buttons. Drop the actions to their own full-width
     row, wrapping, at full opacity (mobile has no hover). */
  #cd_scansList .task-card { flex-wrap: wrap; }
  #cd_scansList .task-actions {
    width: 100%;
    opacity: 1 !important;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-top: 8px;
  }
}

/* ===================================================================== */
/*  APP-ONLY UI (html.cap-native) — present ONLY inside the iOS app.     */
/*  The cap-native class is added by an inline script in app.html when   */
/*  running under Capacitor, so none of these rules can affect the web.  */
/* ===================================================================== */
/* Login overlay: respect the notch/status bar and home indicator, and
   drop the site-admin login link (contractors don't need it in-app). */
html.cap-native #authOverlay {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  box-sizing: border-box;
}
html.cap-native #authAdminLink { display: none; }
/* Buttons that only make sense inside the app (native scan → estimate, etc.). */
.rm-native-only { display: none; }
html.cap-native .rm-native-only { display: inline-flex; }

/* Kill the redundant dashboard "Active customer / Back to profile / Clear"
   breadcrumb box — it's not needed on the profile and a duplicate element id
   kept re-showing it. (Only the dashboard banner has this class; the measure
   page's banner uses inline styles and is unaffected.) */
.active-customer-banner { display: none !important; }
/* App-only: suppress the double-tap-to-zoom gesture delay/zoom. */
html.cap-native, html.cap-native body { touch-action: manipulation; }
/* Login fades in as the branded intro lifts away. */
@keyframes rmFadeIn { from { opacity: 0; } to { opacity: 1; } }
html.cap-native #authOverlay { animation: rmFadeIn 0.55s ease; }
/* Give the whole app a touch of top safe-area breathing room under the
   iOS status bar without affecting the web layout. */
html.cap-native .mobile-topbar { padding-top: calc(12px + env(safe-area-inset-top)); }

/* ===================== Calendar — month/week/day ===================== */
.cal-cell-compact { min-height: 56px; cursor: pointer; }
.cal-dots { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; margin-top: 3px; }
.cal-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.cal-week-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-week-col { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; min-height: 120px; display: flex; flex-direction: column; }
.cal-week-col.today { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.cal-week-colhead { text-align: center; font-size: 11px; padding: 6px 2px; background: var(--bg-alt); color: var(--text-muted); border-bottom: 1px solid var(--border); }
.cal-week-colhead strong { font-size: 15px; color: var(--text); }
.cal-week-coltasks { padding: 4px; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; }
.cal-week-coltasks .cal-task { font-size: 11px; padding: 4px 6px; border-radius: 5px; background: var(--surface); border: 1px solid var(--border); cursor: pointer; white-space: normal; }
.cal-day-view { display: flex; flex-direction: column; gap: 8px; }
.cal-day-item { display: flex; gap: 10px; align-items: center; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); cursor: pointer; }
.cal-day-item:hover { border-color: var(--primary); }
@media (max-width: 768px) {
  .cal-week-grid { gap: 3px; }
  .cal-week-col { min-height: 90px; }
  .cal-week-colhead { font-size: 10px; padding: 4px 1px; }
  .cal-week-colhead strong { font-size: 13px; }
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-feature-settings: 'cv02','cv03','cv04','cv11';
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================== APP SHELL (SIDEBAR + MAIN) ============================== */
.app-shell {
  display: grid;
  grid-template-columns: 250px 1fr;
  min-height: 100vh;
  transition: grid-template-columns .25s ease;
}
.app-shell.sidebar-collapsed { grid-template-columns: 60px 1fr; }

.sidebar {
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 22px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  z-index: 100;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 8px 18px;
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 14px;
}
.sidebar-brand .logo {
  font-size: 22px;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: white;
  border-radius: var(--r);
  flex-shrink: 0;
}
/* RoofMetric SVG brand icon (replaces the old span.logo) */
.sidebar-brand .brand-icon {
  width: 40px; height: 40px;
  flex-shrink: 0;
  border-radius: 9px;
  display: block;
}
.sidebar-brand:hover { opacity: 0.9; }
.sidebar-brand h1 { color: var(--text); }
.sidebar-brand h1 {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
}
.sidebar-brand .tagline {
  display: block;
  color: var(--text-muted);
  font-size: 11px;
  margin-top: 1px;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: var(--transition);
  line-height: 1.2;
}
/* Default state: sidebar is EXPANDED → text labels only, icons hidden.
   When .sidebar.collapsed is added, the rules below flip: icons show,
   labels hide. SVG icons inherit color from the link (currentColor) so
   they pick up the active / hover / default theme color automatically. */
.sidebar-nav .nav-icon {
  display: none;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--text-muted);
}
.sidebar-nav .nav-icon svg {
  width: 19px;
  height: 19px;
  display: block;
  opacity: 0.85;
  transition: opacity .15s;
}
.sidebar-nav a:hover .nav-icon svg { opacity: 1; }
.sidebar-nav a.active .nav-icon { color: var(--primary); }
.sidebar-nav a.active .nav-icon svg { opacity: 1; }
.sidebar-nav .nav-label {
  font-weight: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── COLLAPSE TOGGLE BUTTON ──
   Sits between the brand and the nav. Discreet, blends with the sidebar.
   In expanded mode: chevron + "Collapse" text, right-aligned.
   In collapsed mode: just the chevron, centered, points the other way. */
.sidebar-collapse-btn {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--border-soft, rgba(148,163,184,0.25));
  color: var(--text-muted);
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer;
  margin: 0 4px 8px;
  transition: background .15s, color .15s, border-color .15s;
}
.sidebar-collapse-btn:hover {
  background: var(--bg-alt, rgba(148,163,184,0.08));
  color: var(--text);
  border-color: var(--border, #e2e8f0);
}
.sidebar.collapsed .sidebar-collapse-btn {
  justify-content: center;
  padding: 6px 0;
}
.sidebar.collapsed .sidebar-collapse-btn .sb-chevron {
  transform: rotate(180deg);
  transition: transform .25s;
}
.sidebar-collapse-btn .sb-chevron { transition: transform .25s; }
.sidebar.collapsed .sidebar-collapse-btn .sb-collapse-label { display: none; }

/* ── COLLAPSED STATE ──
   Narrow rail (60px). Icons replace labels. Brand text + tagline hide.
   Section labels hide (they don't make sense as just dashes in a rail). */
.sidebar.collapsed { width: 60px !important; padding: 22px 6px; }
.sidebar.collapsed .sidebar-brand-text { display: none; }
.sidebar.collapsed .sidebar-brand { justify-content: center; padding: 0 0 18px; }
.sidebar.collapsed .sidebar-nav a {
  justify-content: center;
  padding: 10px 6px;
  gap: 0;
}
.sidebar.collapsed .sidebar-nav .nav-icon { display: inline-flex; }
.sidebar.collapsed .sidebar-nav .nav-label { display: none; }
.sidebar.collapsed .sidebar-section-label { display: none; }
.sidebar.collapsed .sidebar-nav .notif-badge {
  position: absolute !important;
  top: 2px;
  right: 6px;
  margin: 0 !important;
}
.sidebar.collapsed .sidebar-nav a { position: relative; }
.sidebar.collapsed .sidebar-footer .sidebar-user .user-info-box { display: none; }
.sidebar.collapsed .sidebar-footer .sidebar-user { justify-content: center; padding: 8px; }

/* Tooltip on hover when collapsed — shows the friendly page name as a small bubble */
.sidebar.collapsed .sidebar-nav a::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 100%;
  margin-left: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--text, #0f172a);
  color: white;
  padding: 4px 10px;
  border-radius: 5px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s;
  z-index: 200;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.sidebar.collapsed .sidebar-nav a:hover::after { opacity: 1; }
.sidebar-nav a:hover {
  background: var(--bg-alt);
}
.sidebar-nav a.active {
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 600;
}
.sidebar-nav a.admin-link {
  margin-top: 12px;
  border-top: 1px solid var(--border-soft);
  padding-top: 14px;
  border-radius: 0 0 8px 8px;
}

.sidebar-footer {
  border-top: 1px solid var(--border-soft);
  padding-top: 12px;
  margin-top: 12px;
}
.sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--text);
  transition: var(--transition);
}
.sidebar-user:hover { background: var(--bg-alt); }
.user-avatar {
  width: 32px; height: 32px;
  background: var(--primary-soft);
  color: var(--primary);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
}
.user-info-box strong {
  display: block;
  font-size: 13px;
  color: var(--text);
}
.user-info-box small {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
}

.main-content {
  background: var(--bg);
  min-width: 0;  /* prevents grid overflow */
}

/* Hide all pages by default; the active page gets display restored via JS */
.app-shell .page-section {
  display: none;
}
.app-shell .page-section.active-page {
  display: block;
}
/* The hero is shown only on the welcome/measure page */
.app-shell #hero-banner.active-page-hero {
  display: block;
}
.app-shell #hero-banner {
  display: none;
}

/* Sidebar toggle button (mobile) */
.sidebar-toggle {
  display: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  width: 40px; height: 40px;
  font-size: 22px;
  cursor: pointer;
  margin-right: 10px;
}

.mobile-topbar {
  display: none;
  align-items: center;
  /* Right padding leaves room for the floating Sign Out button so the
     notification bell isn't hidden behind it. Sign Out is ~110px wide
     including its own right inset; 120px gives breathing room. */
  padding: 12px 120px 12px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 90;
}
.mobile-topbar .brand {
  display: flex; align-items: center; gap: 10px;
}
.mobile-topbar .topbar-icon {
  width: 32px; height: 32px;
  border-radius: 7px;
  display: block;
  flex-shrink: 0;
}
.mobile-topbar .logo {
  font-size: 18px;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: white;
  border-radius: 6px;
}
.mobile-topbar h1 { font-size: 16px; font-weight: 700; }

/* Always-visible Sign Out button — fixed to the top-right of the viewport
   so it's reachable from any page on any screen size. Bypasses parent
   CSS by being position:fixed with a high z-index. */
.topbar-signout {
  position: fixed !important;
  /* Respect iPhone notch / dynamic island so the button doesn't sit
     behind the status bar on Capacitor / standalone PWA. The fallback
     keeps web users on the same 14px top inset they're used to. */
  top: calc(14px + env(safe-area-inset-top, 0px));
  right: calc(14px + env(safe-area-inset-right, 0px));
  z-index: 9999;
  padding: 8px 14px;
  background: white;
  border: 1.5px solid #1d4ed8;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #1e3a8a;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(29, 78, 216, 0.16);
  transition: var(--transition);
}
.topbar-signout:hover {
  background: linear-gradient(135deg, #1d4ed8, #06b6d4);
  color: white;
  border-color: #06b6d4;
  box-shadow: 0 4px 12px rgba(29, 78, 216, 0.32);
}

/* P2-14: Sidebar drawer kicks in earlier (768px) so iPad portrait still
   gets the full fixed sidebar — was 900px which was too aggressive. */
@media (max-width: 768px) {
  .app-shell {
    grid-template-columns: 1fr;
  }
  .sidebar {
    position: fixed;
    top: 0; left: 0;
    width: 270px;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 4px 0 20px rgba(0,0,0,0.15);
    /* Above the map (z 1000) and topbar (z 1000) so the drawer is never
       painted over by Leaflet panes/controls when it slides open. */
    z-index: 1300;
  }
  .sidebar.open { transform: translateX(0); }
  .mobile-topbar { display: flex; }
  .sidebar-toggle { display: block; }
  /* Backdrop when sidebar is open */
  .sidebar.open::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: -1;
    width: 100vw;
  }
}

/* ============================== TOPBAR ============================== */
.topbar {
  background: rgba(255,255,255,0.9);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border-soft);
  padding: 14px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 1000;
}
.brand { display: flex; align-items: center; gap: 14px; }
.logo {
  font-size: 26px;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: white;
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  -webkit-text-fill-color: white;
}
.topbar h1 {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.tagline { color: var(--text-muted); font-size: 13px; font-weight: 500; }

nav { display: flex; gap: 4px; align-items: center; }
nav a {
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
  padding: 8px 14px;
  border-radius: var(--r-sm);
  transition: var(--transition);
}
nav a:hover {
  color: var(--text);
  background: var(--bg-alt);
}

/* ============================== HERO ============================== */
.hero {
  background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #3b82f6 100%);
  color: white;
  padding: 88px 24px 100px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 50%, rgba(255,255,255,0.12) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(249,115,22,0.18) 0%, transparent 50%);
  pointer-events: none;
}
.hero h2 {
  font-size: 52px;
  font-weight: 800;
  letter-spacing: -0.025em;
  margin-bottom: 18px;
  line-height: 1.1;
  position: relative;
}
.hero p {
  font-size: 19px;
  max-width: 720px;
  margin: 0 auto 36px;
  opacity: 0.92;
  font-weight: 400;
  position: relative;
}
.cta {
  display: inline-block;
  background: var(--accent);
  color: white;
  padding: 16px 36px;
  border-radius: var(--r);
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  box-shadow: 0 10px 25px rgba(249,115,22,0.4);
  transition: var(--transition);
  position: relative;
}
.cta:hover {
  background: var(--accent-dark);
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(249,115,22,0.5);
}

/* ============================== APP / MEASURE ============================== */
.app { padding: 36px 24px; }

.search-bar {
  display: flex;
  gap: 10px;
  max-width: 1400px;
  margin: 0 auto 12px;
  align-items: center;
  position: relative;
}
.search-input-wrap { flex: 1; position: relative; }
.search-bar input {
  width: 100%;
  padding: 14px 18px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  font-size: 15px;
  background: var(--surface);
  font-family: inherit;
  transition: var(--transition);
  box-shadow: var(--shadow-xs);
}
.search-bar input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-soft);
}
.search-bar button {
  padding: 14px 28px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: var(--r);
  font-weight: 600;
  cursor: pointer;
  font-size: 15px;
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
  font-family: inherit;
}
.search-bar button:hover { background: var(--primary-dark); transform: translateY(-1px); box-shadow: var(--shadow); }

.status {
  font-size: 13px;
  color: var(--text-muted);
  min-width: 140px;
  font-weight: 500;
}
.status.error { color: var(--danger); }
.status.success { color: var(--success); }

.search-tip {
  max-width: 1400px;
  margin: 6px auto 18px;
  padding: 11px 16px;
  background: var(--primary-soft);
  border-left: 3px solid var(--primary);
  border-radius: var(--r-sm);
  font-size: 13px;
  color: #1e3a8a;
  font-weight: 500;
}

.suggestions {
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
  max-height: 320px;
  overflow-y: auto;
  z-index: 1100;
  display: none;
  padding: 6px;
}
.suggestions.open { display: block; }
.suggestion {
  padding: 10px 12px;
  cursor: pointer;
  font-size: 14px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  transition: var(--transition);
}
.suggestion:hover, .suggestion.active { background: var(--bg-alt); }
.suggestion .pin { color: var(--primary); font-size: 14px; margin-top: 2px; }
.suggestion .text strong { display: block; color: var(--text); font-weight: 600; font-size: 14px; }
.suggestion .text span { color: var(--text-muted); font-size: 12px; }

/* WORKSPACE */
.workspace {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 20px;
  max-width: 1400px;
  margin: 0 auto;
}
.map-column { display: flex; flex-direction: column; gap: 20px; }

#map {
  height: 540px;
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
  background: #e0e0e0;
  position: relative;
  border: 1px solid var(--border);
}

/* Pulsing highlight at the geocoded address — draws attention to where to click */
.address-pulse {
  width: 28px; height: 28px;
  position: relative;
  pointer-events: none;
}
.address-pulse .dot {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #f97316;
  border: 3px solid white;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  z-index: 2;
}
.address-pulse .ring {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 3px solid #f97316;
  animation: pulseRing 2s ease-out infinite;
  opacity: 0.8;
}
.address-pulse .ring.delay { animation-delay: 1s; }

/* Wrong-house warning prompt — red themed, more attention-grabbing */
.click-house-prompt.chp-warning {
  background: #fef2f2;
  border-color: #ef4444;
  border-left: 4px solid #ef4444;
}
.click-house-prompt.chp-warning strong { color: #b91c1c; }
.click-house-prompt.chp-warning .chp-icon { font-size: 26px; }

/* Wrong-house warning marker — red, no animation, no click */
.address-pulse.warning .warning-dot {
  background: #ef4444;
  border: 3px solid white;
  width: 16px; height: 16px;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(239,68,68,0.6);
}

@keyframes pulseRing {
  0%   { width: 14px; height: 14px; opacity: 0.9; }
  100% { width: 70px; height: 70px; opacity: 0; }
}

.click-house-prompt {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--r);
  padding: 14px 18px;
  box-shadow: var(--shadow-lg);
  z-index: 1000;
  max-width: 90%;
  min-width: 340px;
}
.chp-content {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 13px; color: var(--text); line-height: 1.5;
}
.chp-icon { font-size: 22px; line-height: 1; }
.chp-content strong { color: var(--text); display: block; margin-bottom: 4px; font-weight: 600; }
.chp-content small { color: var(--text-muted); }
.chp-close {
  background: transparent; border: none; color: var(--text-muted);
  font-size: 18px; cursor: pointer; padding: 0 4px; line-height: 1;
}

/* STREET VIEW */
.streetview-section {
  background: var(--surface);
  border-radius: var(--r-md);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
}
.sv-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; flex-wrap: wrap; gap: 8px; }
.sv-header h3 { font-size: 16px; font-weight: 600; }
.sv-hint { font-size: 12px; color: var(--text-muted); }
.sv-container { position: relative; width: 100%; height: 320px; border-radius: var(--r); overflow: hidden; background: #1e293b; margin-bottom: 14px; }
.sv-container iframe { width: 100%; height: 100%; border: 0; }
.sv-placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #94a3b8; font-size: 14px; pointer-events: none;
  text-align: center; padding: 16px;
}

.pitch-tool {
  background: var(--bg-alt);
  border-radius: var(--r);
  padding: 14px;
}
.pitch-tool h4 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 10px;
  font-weight: 600;
}
.pitch-references { display: grid; grid-template-columns: repeat(auto-fit, minmax(85px, 1fr)); gap: 8px; margin-bottom: 12px; }
.pitch-ref-card {
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--r-sm);
  padding: 10px 6px;
  cursor: pointer;
  text-align: center;
  transition: var(--transition);
}
.pitch-ref-card:hover { border-color: var(--primary); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.pitch-ref-card.selected { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 3px rgba(249,115,22,0.12); }
.pitch-ref-card svg { width: 60px; height: 30px; display: block; margin: 0 auto 6px; }
.pitch-ref-card .pitch-label { font-size: 12px; font-weight: 700; color: var(--text); }
.pitch-ref-card .pitch-deg { font-size: 10px; color: var(--text-muted); }
.story-counter { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.story-counter label { font-size: 13px; display: block; margin-bottom: 6px; font-weight: 500; }
.story-counter select {
  width: 100%; padding: 9px 11px;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  font-size: 13px; background: var(--surface); font-family: inherit;
}

/* RIGHT PANEL */
.panel {
  background: var(--surface);
  border-radius: var(--r-md);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  overflow-y: auto;
  border: 1px solid var(--border);
}
.panel h3 {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
  letter-spacing: -0.01em;
}
.panel h4 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 12px;
  margin-top: 4px;
  font-weight: 600;
}

/* Workflow stepper */
.workflow-stepper {
  list-style: none; display: flex; gap: 4px;
  padding: 6px; margin-bottom: 18px;
  background: var(--bg-alt); border-radius: var(--r);
}
.step-item {
  flex: 1; display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--text-soft); font-weight: 600;
  padding: 6px 8px; border-radius: var(--r-sm);
  transition: var(--transition);
}
.step-item .num {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--border); color: white;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; flex-shrink: 0;
}
.step-item.active { color: var(--primary); background: var(--primary-soft); }
.step-item.active .num { background: var(--primary); }
.step-item.done { color: var(--success); }
.step-item.done .num { background: var(--success); }

.outline-actions { margin-bottom: 18px; }

.disclaimer-box {
  background: var(--warning-soft);
  border: 1px solid #fcd34d;
  border-left: 3px solid var(--warning);
  border-radius: var(--r-sm);
  padding: 11px 13px;
  font-size: 12.5px;
  line-height: 1.55;
  color: #78350f;
  margin-bottom: 16px;
}
.disclaimer-box strong { color: #92400e; }

.pitch-section { margin-bottom: 22px; }
.pitch-section > label { display: block; margin-bottom: 14px; font-size: 14px; font-weight: 600; }
.pitch-method {
  background: var(--bg-alt);
  border-left: 3px solid var(--primary);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  margin-bottom: 10px;
}
.method-tag {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--primary); margin-bottom: 8px;
}
.method-link {
  display: inline-block; color: var(--primary);
  text-decoration: none; font-weight: 600;
  font-size: 13px; padding: 6px 0;
}
.method-link:hover { text-decoration: underline; }

.pitch-section select, .pitch-section input {
  width: 100%; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  font-size: 14px; background: var(--surface); font-family: inherit;
  transition: var(--transition);
}
.pitch-section select:focus, .pitch-section input:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.hint { font-size: 12px; color: var(--text-muted); margin-top: 8px; line-height: 1.5; }

/* Results metrics */
.results {
  background: var(--bg-alt);
  padding: 18px;
  border-radius: var(--r);
  margin-bottom: 18px;
}
.metric {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0; border-bottom: 1px solid var(--border);
  font-size: 13.5px;
}
.metric:last-child { border-bottom: none; }
.metric span { color: var(--text-muted); font-weight: 500; }
.metric strong { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.metric.primary {
  background: var(--primary-soft);
  margin: 6px -18px;
  padding: 10px 18px;
  border-bottom: none;
  border-radius: var(--r-sm);
}
.metric.primary strong { color: var(--primary); font-size: 16px; font-weight: 700; }

.actions { display: flex; gap: 10px; margin-bottom: 12px; }
.actions button {
  flex: 1; padding: 12px;
  border: none; border-radius: var(--r-sm);
  font-weight: 600; cursor: pointer; font-size: 14px;
  font-family: inherit; transition: var(--transition);
}
.actions .primary { background: var(--primary); color: white; box-shadow: var(--shadow-xs); }
.actions .primary:hover { background: var(--primary-dark); transform: translateY(-1px); box-shadow: var(--shadow); }
.actions .secondary { background: var(--surface); color: var(--text); border: 1px solid var(--border); }
.actions .secondary:hover { background: var(--bg-alt); }

button.full {
  width: 100%; padding: 13px; border: none; border-radius: var(--r-sm);
  font-weight: 600; cursor: pointer; font-size: 14px; font-family: inherit;
  transition: var(--transition);
}
button.full.primary { background: var(--primary); color: white; box-shadow: var(--shadow-xs); }
button.full.primary:hover { background: var(--primary-dark); transform: translateY(-1px); box-shadow: var(--shadow); }
button.full.secondary { background: var(--surface); color: var(--text); border: 1px solid var(--border); }
button.full.secondary:hover { background: var(--bg-alt); }

.big-cta {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  font-size: 15px; padding: 15px;
  box-shadow: 0 4px 14px rgba(249,115,22,0.35);
  font-weight: 700;
}
.big-cta:hover { box-shadow: 0 6px 20px rgba(249,115,22,0.45); }

.material-est {
  background: var(--accent-soft);
  padding: 18px;
  border-radius: var(--r);
  border-left: 3px solid var(--accent);
}

/* ============================== ADMIN AREA ============================== */
#adminGate {
  position: fixed; inset: 0;
  background: var(--bg);
  z-index: 5000; overflow-y: auto; padding: 32px;
}
#adminLoginScreen { display: flex; align-items: center; justify-content: center; min-height: 80vh; }
.admin-login-card {
  background: var(--surface);
  padding: 48px 40px;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xl);
  max-width: 440px; width: 100%;
  border: 1px solid var(--border);
}
.admin-login-card h2 { margin-bottom: 8px; font-size: 24px; font-weight: 700; letter-spacing: -0.01em; }
.admin-login-card p { color: var(--text-muted); font-size: 14px; margin-bottom: 24px; }
.admin-login-card input {
  width: 100%; padding: 13px 15px;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  font-size: 15px; margin-bottom: 14px; font-family: inherit;
  transition: var(--transition);
}
.admin-login-card input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); }
.admin-login-card button {
  width: 100%; padding: 13px;
  background: var(--primary); color: white;
  border: none; border-radius: var(--r-sm);
  font-weight: 600; cursor: pointer; font-family: inherit;
  font-size: 15px; transition: var(--transition);
}
.admin-login-card button:hover { background: var(--primary-dark); }

#adminPanel-main { max-width: 1100px; margin: 0 auto; }
.admin-header {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 16px; margin-bottom: 28px;
  padding-bottom: 20px; border-bottom: 1px solid var(--border);
}
.admin-header h2 { font-size: 26px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 4px; }
.admin-header button {
  padding: 9px 16px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  cursor: pointer; margin-left: 8px; font-size: 13px;
  font-weight: 500; font-family: inherit;
  transition: var(--transition);
}
.admin-header button:hover { background: var(--bg-alt); }

.atab {
  background: transparent; border: none;
  padding: 12px 18px; font-size: 14px; font-weight: 600;
  color: var(--text-muted); cursor: pointer;
  border-bottom: 2.5px solid transparent; margin-bottom: -1px;
  display: flex; align-items: center; gap: 8px;
  font-family: inherit; transition: var(--transition);
}
.atab.active { color: var(--primary); border-bottom-color: var(--primary); }
.atab:hover { color: var(--text); }
.atab-panel { display: none; }
.atab-panel.active { display: block; }

.tier-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.tier-table th, .tier-table td { padding: 12px 10px; text-align: left; border-bottom: 1px solid var(--border); }
.tier-table th { background: var(--bg-alt); text-transform: uppercase; letter-spacing: 0.06em; font-size: 10px; font-weight: 600; color: var(--text-muted); }
.tier-table input {
  width: 100%; padding: 7px 9px;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  font-size: 13px; font-family: inherit;
}
.tier-table .tier-name { font-weight: 700; color: var(--text); }

.info-box {
  background: var(--warning-soft);
  border: 1px solid #fcd34d;
  border-left: 3px solid var(--warning);
  border-radius: var(--r-sm);
  padding: 13px 16px; font-size: 13px;
  color: #78350f; margin-top: 16px; line-height: 1.55;
}

.account-status-card {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: white; border-radius: var(--r-md);
  padding: 28px; box-shadow: var(--shadow-md);
  margin-bottom: 16px;
}
.account-status-card h3 { color: white; margin-bottom: 6px; border: none; padding: 0; font-size: 18px; font-weight: 700; }
.account-status-card .section-sub { color: rgba(255,255,255,0.9); font-size: 14px; }
.account-meta {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px; margin-top: 18px; padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.2);
}
.account-meta div { font-size: 13px; }
.account-meta span { color: rgba(255,255,255,0.85); }
.account-meta strong { display: block; font-size: 18px; margin-top: 4px; font-weight: 700; }

.key-status {
  margin-top: 10px; padding: 10px 14px;
  border-radius: var(--r-sm); font-size: 13px; display: none;
}
.key-status.ok { display: block; background: var(--success-soft); color: #047857; border: 1px solid #6ee7b7; }
.key-status.bad { display: block; background: var(--danger-soft); color: var(--danger); border: 1px solid #fca5a5; }

.estimate-card .badge {
  background: var(--success); color: white; font-size: 10px;
  padding: 3px 9px; border-radius: 12px; vertical-align: middle;
  margin-left: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
}
.estimate-card .badge.admin-badge { background: var(--primary); }
.estimate-card .badge.member-badge { background: #6366f1; }

/* ============================== DASHBOARD ============================== */
.dashboard-section {
  padding: 48px 24px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.dashboard-wrap { max-width: 1400px; margin: 0 auto; }
.dashboard-header {
  display: flex; justify-content: space-between; align-items: flex-end;
  flex-wrap: wrap; gap: 16px; margin-bottom: 28px;
}
.dashboard-header h2 { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 6px; }

.active-customer-banner {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: white; padding: 12px 20px;
  border-radius: var(--r); display: flex; align-items: center; gap: 12px;
  font-size: 14px; box-shadow: var(--shadow);
}
.active-customer-banner strong { font-size: 15px; font-weight: 700; }
.link-btn {
  background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.3);
  color: white; padding: 5px 12px; border-radius: var(--r-sm);
  cursor: pointer; font-size: 12px; font-family: inherit; font-weight: 500;
  transition: var(--transition);
}
.link-btn:hover { background: rgba(255,255,255,0.3); }

.dash-tabs {
  display: flex; gap: 4px; border-bottom: 1px solid var(--border);
  margin-bottom: 28px; flex-wrap: wrap;
}
.dtab {
  background: transparent; border: none;
  padding: 12px 18px; font-size: 14px; font-weight: 600;
  color: var(--text-muted); cursor: pointer;
  border-bottom: 2.5px solid transparent; margin-bottom: -1px;
  display: flex; align-items: center; gap: 8px;
  font-family: inherit; transition: var(--transition);
}
.dtab.active { color: var(--primary); border-bottom-color: var(--primary); }
.dtab:hover { color: var(--text); }
.dtab .count {
  background: var(--bg-alt); color: var(--text-muted);
  padding: 2px 9px; border-radius: 10px;
  font-size: 11px; font-weight: 700;
}
.dtab.active .count { background: var(--primary-soft); color: var(--primary); }

.dtab-panel { display: none; }
.dtab-panel.active { display: block; }

.customer-layout, .templates-layout {
  display: grid; grid-template-columns: 340px 1fr; gap: 20px;
  position: relative;
}
.customer-list-pane, .templates-list-pane,
.customer-detail-pane, .template-detail-pane {
  background: var(--surface);
  border-radius: var(--r-md);
  padding: 22px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
}
.customer-detail-pane, .template-detail-pane { min-height: 540px; }

/* ===== Customer list slide-away =====
   When a customer is selected (.detail-open class on .customer-layout),
   the list collapses to width:0 and the detail pane takes the full row.
   The CSS grid template animates smoothly. The "← Customers" back button
   inside the profile is the only way back to the list. */
.customer-layout {
  transition: grid-template-columns 240ms ease;
}
.customer-layout.detail-open {
  grid-template-columns: 0 1fr;
}
.customer-layout.detail-open .customer-list-pane {
  overflow: hidden;
  padding-left: 0; padding-right: 0;
  opacity: 0; pointer-events: none;
  transform: translateX(-12px);
  transition: opacity 200ms ease, transform 220ms ease, padding 220ms ease;
}
.customer-list-pane {
  transition: opacity 200ms ease, transform 220ms ease, padding 220ms ease;
}
/* Back button — only meaningful inside the detail view, so hide it
   until the slide-away is active. Made visually obvious as the only
   way back to the list. */
.cd-back-btn {
  display: none;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 12px 6px 8px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 999px;
  cursor: pointer;
  margin-bottom: 12px;
  font-family: inherit;
  transition: background 160ms ease, border-color 160ms ease;
}
.cd-back-btn:hover {
  background: var(--bg-alt);
  border-color: var(--primary);
  color: var(--primary);
}
.cd-back-btn span { font-size: 18px; line-height: 0; vertical-align: middle; }
.customer-layout.detail-open .cd-back-btn { display: inline-flex; align-items: center; }

/* ===== Customer profile tabs =====
   Horizontal-scrolling tab bar. Each tab is an outlined pill button — large
   enough to be obviously clickable, matching the primary button outline so
   users notice the content split is one click away. No icons (per design
   feedback). On mobile the row scrolls horizontally rather than wrapping. */
.cd-tabs {
  display: flex;
  gap: 8px;
  margin: 16px 0 18px;
  padding: 4px 2px 6px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.cd-tabs::-webkit-scrollbar { display: none; }
.cd-tab {
  background: var(--surface);
  border: 1.5px solid var(--border);
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  border-radius: 999px;
  transition: background 160ms ease, border-color 160ms ease,
              color 160ms ease, box-shadow 160ms ease, transform 80ms ease;
  letter-spacing: 0.01em;
}
.cd-tab:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-soft, rgba(29,78,216,0.04));
}
.cd-tab:active { transform: translateY(1px); }
.cd-tab.active {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
  box-shadow: 0 1px 4px rgba(29,78,216,0.22);
}
.cd-tab.active:hover {
  background: var(--primary-dark, var(--primary));
  border-color: var(--primary-dark, var(--primary));
  color: white;
}
.cd-tab-panel { display: none; }
.cd-tab-panel.active { display: block; animation: cdTabFadeIn 200ms ease; }
@keyframes cdTabFadeIn {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: translateY(0); }
}

.pane-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px;
}
.pane-header h3 { font-size: 16px; font-weight: 700; }

.primary.small {
  padding: 7px 14px;
  background: linear-gradient(135deg, #1d4ed8, #06b6d4);
  color: white;
  border: none; border-radius: var(--r-sm); cursor: pointer;
  font-size: 13px; font-weight: 600; font-family: inherit;
  transition: filter 0.15s ease, transform 0.12s ease;
}
.primary.small:hover { filter: brightness(1.08); }

.customer-search {
  width: 100%; padding: 10px 13px;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  font-size: 13px; margin-bottom: 14px; font-family: inherit;
}

.customer-list, .template-list { max-height: 600px; overflow-y: auto; }
.customer-row, .template-row {
  padding: 12px 14px; border-radius: var(--r-sm); cursor: pointer;
  border: 1px solid transparent; margin-bottom: 4px;
  transition: var(--transition);
}
.customer-row:hover, .template-row:hover { background: var(--bg-alt); }
.customer-row.active, .template-row.active {
  background: var(--primary-soft); border-color: var(--primary);
}
.customer-row .name, .template-row .name {
  font-weight: 600; font-size: 14px; color: var(--text);
  display: block; margin-bottom: 3px;
}
.customer-row .meta, .template-row .meta {
  font-size: 12px; color: var(--text-muted);
}

.empty-state { text-align: center; padding: 28px 16px; color: var(--text-muted); font-size: 13px; }
.empty-state.large { padding: 80px 24px; }
.empty-state.large h3 { color: var(--text); margin-bottom: 10px; font-size: 20px; }

.placeholder-list {
  text-align: left; background: var(--bg-alt);
  padding: 18px; border-radius: var(--r);
  margin-top: 24px; font-size: 13px;
  max-width: 540px; margin-left: auto; margin-right: auto;
}
.placeholder-list strong { display: block; margin-bottom: 10px; }
.placeholder-list ul { padding-left: 22px; }
.placeholder-list li { margin-bottom: 4px; }
.placeholder-list code {
  background: var(--surface); padding: 2px 7px;
  border-radius: 4px; border: 1px solid var(--border);
  font-size: 12px; font-family: 'JetBrains Mono', monospace;
}

/* Customer detail */
.customer-detail h3 { font-size: 22px; font-weight: 700; margin-bottom: 4px; letter-spacing: -0.01em; }
.customer-detail .addr { color: var(--text-muted); margin-bottom: 18px; font-size: 14px; }

.customer-meta-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px;
}
.customer-meta-grid label {
  font-size: 11px; color: var(--text-muted); display: block;
  margin-bottom: 5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
}
.customer-meta-grid input, .customer-meta-grid textarea {
  width: 100%; padding: 9px 12px;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  font-size: 13px; font-family: inherit;
  transition: var(--transition);
}
.customer-meta-grid input:focus, .customer-meta-grid textarea:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.customer-section-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-muted); margin: 24px 0 10px;
  padding-bottom: 8px; border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
  font-weight: 600;
}

/* Hail history display */
.hail-results { margin-bottom: 16px; }
.hail-summary {
  background: var(--bg-alt);
  border-left: 3px solid var(--text-muted);
  padding: 12px 14px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.55;
}
.hail-summary.clear {
  background: var(--success-soft);
  border-left-color: var(--success);
  color: #047857;
}
.hail-summary.impact {
  background: var(--warning-soft);
  border-left-color: var(--warning);
  color: #78350f;
}
.hail-summary strong { font-weight: 700; }
.hail-event {
  display: grid;
  grid-template-columns: 90px 60px 1fr;
  gap: 10px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border-soft);
  font-size: 12px;
  align-items: center;
}
.hail-event:last-child { border-bottom: none; }
.hail-event .he-date { color: var(--text-muted); }
.hail-event .he-size { font-weight: 700; color: var(--warning); text-align: right; }
.hail-event .he-loc { color: var(--text); font-size: 11px; }
.hail-source {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 8px;
  font-style: italic;
}

.note-list .note {
  background: var(--warning-soft);
  padding: 12px 14px;
  border-radius: var(--r-sm);
  margin-bottom: 8px;
  border-left: 3px solid var(--warning);
  font-size: 13px;
}
.note-list .note .meta {
  font-size: 11px; color: var(--text-muted);
  margin-top: 6px; display: flex; justify-content: space-between;
}
.note-list .delete-note {
  background: transparent; border: none; color: var(--danger);
  cursor: pointer; font-size: 12px; font-weight: 500;
}

.note-input { display: flex; gap: 8px; }
.note-input textarea {
  flex: 1; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  font-size: 13px; resize: vertical; min-height: 64px; font-family: inherit;
}
.note-input button {
  padding: 0 18px; background: var(--primary); color: white;
  border: none; border-radius: var(--r-sm);
  cursor: pointer; font-weight: 600; font-family: inherit;
}

.attachments-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}
.attachment-card {
  position: relative; background: var(--bg-alt); border-radius: var(--r-sm);
  overflow: hidden; border: 1px solid var(--border);
  aspect-ratio: 1; cursor: pointer; transition: var(--transition);
}
.attachment-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.attachment-card img { width: 100%; height: 100%; object-fit: cover; }
.attachment-card .doc-icon {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100%; padding: 10px; text-align: center;
  font-size: 12px; color: var(--text-muted);
}
.attachment-card .doc-icon .icon { font-size: 28px; margin-bottom: 6px; }
.attachment-card .delete {
  position: absolute; top: 6px; right: 6px;
  background: rgba(0,0,0,0.7); color: white;
  border: none; border-radius: 50%;
  width: 22px; height: 22px; cursor: pointer;
  font-size: 14px; line-height: 22px; padding: 0;
}
.attachment-card .name {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.8));
  color: white; font-size: 10px; padding: 8px 8px 5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.upload-trigger {
  border: 2px dashed var(--border); border-radius: var(--r-sm);
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text-muted);
  font-size: 11px; text-align: center; padding: 10px;
  transition: var(--transition);
}
.upload-trigger:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }

.history-list { display: flex; flex-direction: column; gap: 8px; }
.history-row {
  background: var(--bg-alt); padding: 12px 14px;
  border-radius: var(--r-sm); display: flex;
  justify-content: space-between; align-items: center; font-size: 13px;
}
.history-row .actions { display: flex; gap: 4px; flex-wrap: wrap; }
.history-row button {
  background: var(--surface); border: 1.5px solid #1d4ed8;
  color: #1e3a8a;
  border-radius: var(--r-sm); padding: 4px 9px;
  cursor: pointer; font-size: 11.5px; font-family: inherit;
  font-weight: 600;
  min-height: 30px;
}
/* Solid red background with white text — much more legible than the
   prior red-on-pink which faded into the background on iOS. */
.history-row button.danger {
  color: #ffffff !important;
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  border: none !important;
  font-weight: 700;
  padding: 4px 11px;
}
.history-row button.danger:hover { filter: brightness(1.06); }
/* Logo-themed primary buttons inside history rows for consistency */
.history-row button.primary,
.history-row button.primary.small {
  background: linear-gradient(135deg, #1d4ed8, #06b6d4) !important;
  color: white !important;
  border: none !important;
  font-weight: 600;
  padding: 4px 11px;
}
.history-row button.secondary,
.history-row button.secondary.small {
  background: white !important;
  color: #1e3a8a !important;
  border: 1.5px solid #1d4ed8 !important;
  padding: 4px 11px;
  font-weight: 600;
}

.danger {
  background: var(--danger-soft); color: #b91c1c;
  border: 1px solid #fca5a5; padding: 9px 16px;
  border-radius: var(--r-sm); cursor: pointer;
  font-size: 13px; font-weight: 600; font-family: inherit;
  transition: var(--transition);
}
.danger:hover { background: #fee2e2; }

.template-edit input, .template-edit textarea {
  width: 100%; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  font-size: 13px; font-family: inherit;
}
.template-edit label {
  font-size: 11px; color: var(--text-muted);
  display: block; margin: 12px 0 5px;
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
}
.template-line-table { width: 100%; border-collapse: collapse; margin-top: 14px; }
.template-line-table th, .template-line-table td { padding: 8px 5px; font-size: 12px; border-bottom: 1px solid var(--border); text-align: left; }
.template-line-table th { color: var(--text-muted); text-transform: uppercase; font-size: 10px; letter-spacing: 0.06em; font-weight: 600; }
.template-line-table input {
  width: 100%; padding: 7px 9px; font-size: 12px;
  border: 1px solid transparent; background: transparent;
  border-radius: var(--r-sm); font-family: inherit;
  transition: var(--transition);
}
.template-line-table input:focus { background: var(--surface); border-color: var(--primary); outline: none; }
.template-line-table .remove-tpl-row { background: transparent; border: none; color: var(--danger); cursor: pointer; font-size: 16px; }

/* ============================================================
   TEMPLATE PICKER LAYOUT (Settings page)
   Cards + controls on the left, sticky live preview on the right.
   Collapses to single column under 1100px wide.
   ============================================================ */
/* Side-by-side picker + preview. Controls on the left stay form-width; the
   preview on the right is the dominant column on desktop so the sample
   estimate has room to look like an estimate. Collapses to single-column
   under 1100px wide. */
.tpl-picker-layout {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: 24px;
  margin-top: 14px;
  align-items: start;
}
@media (max-width: 1100px) {
  .tpl-picker-layout { grid-template-columns: 1fr; }
  .tpl-picker-preview { position: static !important; }
}
.tpl-picker-controls { min-width: 0; }
.tpl-picker-preview {
  position: sticky;
  top: 80px;
  max-height: calc(100vh - 100px);
  overflow: auto;
  background: var(--bg-alt, #f8fafc);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  padding: 12px;
}
.tpl-picker-preview .template-preview {
  padding: 0;
  background: transparent;
  border: none;
}
/* Inside the side-by-side preview, shrink the sample page so its content
   doesn't crowd the right edge. The page itself stays proportional to a
   real US Letter sheet (612×792 pt ≈ 1:1.29), just scaled down. */
.tpl-picker-preview .tpl-preview-page {
  font-size: 11px;
  padding: 20px 22px;
  max-width: 100%;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.08);
}
.tpl-picker-preview .tpl-preview-company { font-size: 15px; }
.tpl-picker-preview .tpl-preview-meta-num { font-size: 17px; }
.tpl-picker-preview .tpl-preview-table { font-size: 10px; }
.tpl-picker-preview .tpl-preview-table th,
.tpl-picker-preview .tpl-preview-table td { padding: 5px 6px; }
.tpl-picker-preview .tpl-preview-measurements { padding: 7px 10px; gap: 6px; }
.tpl-picker-preview .tpl-preview-measurements strong { font-size: 12px; }
.tpl-picker-preview .tpl-preview-totals { width: 220px; font-size: 11px; }
.tpl-picker-preview .tpl-preview-grand { font-size: 13px !important; }
.tpl-picker-preview .tpl-preview-grand span:last-child { font-size: 15px !important; }
/* Bold Contemporary's full-bleed header — pull the negative-margin a little */
.tpl-picker-preview .style-bold-contemporary .tpl-preview-header { padding: 20px 22px; }
.tpl-picker-preview .style-bold-contemporary .tpl-preview-company { font-size: 18px; }
.tpl-picker-preview .style-bold-contemporary .tpl-preview-meta-num { font-size: 22px; }

.tpl-picker-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

/* ============================================================
   TEMPLATE LIVE PREVIEW
   Renders an HTML mock of what an estimate using the selected
   template will look like — branding, line items, totals.
   Each templateId variant gets its own distinctive look:
   .style-modern-minimalist  — clean whitespace, accent bar
   .style-classic-executive  — serif, navy + gold rules
   .style-bold-contemporary  — color-block header, big numbers
   .style-architect-schematic — monospaced, title block, dotted grid
   ============================================================ */
.template-preview {
  background: var(--bg-alt, #f8fafc);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  padding: 18px;
  overflow: auto;
}
.tpl-preview-page {
  background: #ffffff;
  color: #0f172a;
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 28px;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif;
  font-size: 13px;
  line-height: 1.45;
}
.tpl-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 2px solid #1d4ed8;
  padding-bottom: 14px;
  margin-bottom: 16px;
  gap: 16px;
}
.tpl-preview-brand {
  display: flex;
  gap: 14px;
  align-items: center;
  min-width: 0;
}
.tpl-preview-logo {
  max-height: 64px;
  max-width: 110px;
  object-fit: contain;
}
.tpl-preview-logo-fallback {
  width: 56px; height: 56px; border-radius: 10px;
  background: linear-gradient(135deg, #1d4ed8, #06b6d4);
  color: white; font-size: 26px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.tpl-preview-brand-text { min-width: 0; }
.tpl-preview-company {
  font-size: 18px; font-weight: 700; color: #0f172a; margin-bottom: 2px;
}
.tpl-preview-tagline {
  font-size: 11px; color: #64748b; margin-bottom: 4px;
}
.tpl-preview-contact {
  font-size: 11px; color: #475569;
}
.tpl-preview-meta { text-align: right; flex-shrink: 0; }
.tpl-preview-meta-label {
  font-size: 10px; letter-spacing: 0.12em; color: #64748b; font-weight: 600;
}
.tpl-preview-meta-num {
  font-size: 20px; font-weight: 700; color: #1d4ed8;
}
.tpl-preview-meta-date {
  font-size: 11px; color: #64748b;
}
.tpl-preview-customer {
  background: #f1f5f9;
  border-radius: 6px;
  padding: 10px 14px;
  margin-bottom: 14px;
}
.tpl-preview-section-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
  color: #64748b; font-weight: 600; margin-bottom: 3px;
}
.tpl-preview-measurements {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 16px;
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(29,78,216,0.04), rgba(6,182,212,0.04));
  border-radius: 6px;
}
.tpl-preview-measurements > div {
  display: flex;
  flex-direction: column;
  font-size: 11px;
}
.tpl-preview-measurements span { color: #64748b; }
.tpl-preview-measurements strong {
  font-size: 14px; color: #0f172a; margin-top: 2px;
}
.tpl-preview-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin-bottom: 14px;
}
.tpl-preview-table th {
  text-align: left;
  background: #1d4ed8;
  color: white;
  padding: 8px 10px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.tpl-preview-table td {
  padding: 7px 10px;
  border-bottom: 1px solid #e2e8f0;
  color: #1e293b;
  vertical-align: top;
}
.tpl-preview-table tr:nth-child(even) td { background: #f8fafc; }
.tpl-preview-totals {
  margin-left: auto;
  width: 280px;
  font-size: 13px;
}
.tpl-preview-totals > div {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  color: #475569;
}
.tpl-preview-grand {
  border-top: 2px solid #1d4ed8;
  margin-top: 6px;
  padding-top: 10px !important;
  font-size: 16px !important;
  font-weight: 700;
  color: #0f172a !important;
}
.tpl-preview-grand span:last-child { color: #1d4ed8; }
.tpl-preview-footer {
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px dashed #cbd5e1;
  font-size: 10px;
  color: #94a3b8;
  text-align: center;
  font-style: italic;
}

/* ============================================================
   TEMPLATE STYLE VARIANTS — each template gets distinct visuals
   The colors below are defaults; CSS custom properties --tpl-primary
   and --tpl-accent (set inline by JS) override them so the user's
   color picker selections show up live.
   ============================================================ */

/* ── MODERN MINIMALIST ─ generous whitespace, single accent bar ── */
.tpl-preview-page.style-modern-minimalist {
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif;
  padding: 32px 36px;
}
.style-modern-minimalist .tpl-preview-header {
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 22px;
  margin-bottom: 22px;
}
.style-modern-minimalist .tpl-preview-company {
  font-size: 20px;
  letter-spacing: -0.01em;
  font-weight: 600;
}
.style-modern-minimalist .tpl-preview-meta-num {
  color: var(--tpl-accent, #0ea5e9);
  font-size: 22px;
}
.style-modern-minimalist .tpl-preview-table th {
  background: transparent;
  color: var(--tpl-primary, #0f172a);
  border-bottom: 2px solid var(--tpl-accent, #0ea5e9);
  font-weight: 500;
  letter-spacing: 0.08em;
}
.style-modern-minimalist .tpl-preview-table td { color: #334155; }
.style-modern-minimalist .tpl-preview-table tr:nth-child(even) td { background: transparent; }
.style-modern-minimalist .tpl-preview-grand {
  border-top-color: var(--tpl-accent, #0ea5e9);
  color: var(--tpl-primary, #0f172a) !important;
}
.style-modern-minimalist .tpl-preview-grand span:last-child {
  color: var(--tpl-accent, #0ea5e9);
  font-size: 18px;
}
.style-modern-minimalist .tpl-preview-customer {
  background: transparent;
  border-left: 3px solid var(--tpl-accent, #0ea5e9);
  padding: 4px 0 4px 12px;
  border-radius: 0;
}
.style-modern-minimalist .tpl-preview-measurements {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 0;
}

/* ── CLASSIC EXECUTIVE ─ serif type, navy + gold rule lines ── */
.tpl-preview-page.style-classic-executive {
  font-family: "Georgia", "Times New Roman", Times, serif;
  padding: 30px 38px;
  background: #fdfcf8;
  border: 1px double #c9b88a;
}
.style-classic-executive .tpl-preview-header {
  border-bottom: 3px double var(--tpl-accent, #b08d4a);
  padding-bottom: 18px;
}
.style-classic-executive .tpl-preview-company {
  font-family: "Playfair Display", "Georgia", serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--tpl-primary, #1a2a47);
  letter-spacing: 0.02em;
}
.style-classic-executive .tpl-preview-tagline {
  font-style: italic;
  color: var(--tpl-accent, #b08d4a);
}
.style-classic-executive .tpl-preview-meta-label {
  font-family: "Georgia", serif;
  font-size: 11px;
  font-variant: small-caps;
  letter-spacing: 0.18em;
  color: var(--tpl-accent, #b08d4a);
}
.style-classic-executive .tpl-preview-meta-num {
  font-family: "Georgia", serif;
  color: var(--tpl-primary, #1a2a47);
  font-size: 22px;
}
.style-classic-executive .tpl-preview-table th {
  background: var(--tpl-primary, #1a2a47);
  border-bottom: 2px solid var(--tpl-accent, #b08d4a);
  font-family: "Georgia", serif;
  font-variant: small-caps;
  letter-spacing: 0.1em;
}
.style-classic-executive .tpl-preview-table td {
  font-family: "Georgia", serif;
  font-size: 13px;
}
.style-classic-executive .tpl-preview-grand {
  border-top: 3px double var(--tpl-accent, #b08d4a);
  color: var(--tpl-primary, #1a2a47) !important;
  font-family: "Georgia", serif;
}
.style-classic-executive .tpl-preview-grand span:last-child {
  color: var(--tpl-accent, #b08d4a);
}
.style-classic-executive .tpl-preview-section-label {
  font-family: "Georgia", serif;
  font-variant: small-caps;
  letter-spacing: 0.15em;
  color: var(--tpl-accent, #b08d4a);
}
.style-classic-executive .tpl-preview-customer {
  background: transparent;
  border-top: 1px solid var(--tpl-accent, #b08d4a);
  border-bottom: 1px solid var(--tpl-accent, #b08d4a);
  border-radius: 0;
  padding: 12px 0;
}
.style-classic-executive .tpl-preview-measurements {
  background: #faf6ec;
  border: 1px solid #d4c388;
  border-radius: 0;
}

/* ── BOLD CONTEMPORARY ─ color-block header, oversized numbers ── */
.tpl-preview-page.style-bold-contemporary {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  padding: 0;
  overflow: hidden;
}
.style-bold-contemporary .tpl-preview-header {
  background: linear-gradient(135deg, var(--tpl-primary, #1e2a3a), #0a1525);
  color: white;
  padding: 28px 32px;
  margin: 0 0 18px 0;
  border-bottom: 6px solid var(--tpl-accent, #f97316);
  border-radius: 0;
}
.style-bold-contemporary .tpl-preview-company {
  color: white;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.style-bold-contemporary .tpl-preview-tagline,
.style-bold-contemporary .tpl-preview-contact { color: rgba(255,255,255,0.7); }
.style-bold-contemporary .tpl-preview-meta-label {
  color: var(--tpl-accent, #f97316);
  font-weight: 800;
  font-size: 11px;
}
.style-bold-contemporary .tpl-preview-meta-num {
  color: white;
  font-size: 32px;
  font-weight: 900;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.style-bold-contemporary .tpl-preview-meta-date { color: rgba(255,255,255,0.6); }
.style-bold-contemporary .tpl-preview-customer,
.style-bold-contemporary .tpl-preview-measurements,
.style-bold-contemporary .tpl-preview-table,
.style-bold-contemporary .tpl-preview-totals,
.style-bold-contemporary .tpl-preview-footer { margin-left: 32px; margin-right: 32px; }
.style-bold-contemporary .tpl-preview-customer {
  background: var(--tpl-accent, #f97316);
  color: white;
  border-radius: 4px;
  padding: 14px 16px;
}
.style-bold-contemporary .tpl-preview-customer .tpl-preview-section-label,
.style-bold-contemporary .tpl-preview-customer div { color: white; }
.style-bold-contemporary .tpl-preview-customer div[style*="color:#64748b"] { color: rgba(255,255,255,0.85) !important; }
.style-bold-contemporary .tpl-preview-measurements {
  background: linear-gradient(135deg, rgba(249,115,22,0.08), rgba(30,42,58,0.04));
  border: none;
  border-radius: 4px;
}
.style-bold-contemporary .tpl-preview-measurements strong {
  font-size: 18px;
  color: var(--tpl-primary, #1e2a3a);
  font-weight: 900;
}
.style-bold-contemporary .tpl-preview-table th {
  background: var(--tpl-primary, #1e2a3a);
  border-bottom: 4px solid var(--tpl-accent, #f97316);
  text-transform: uppercase;
  font-weight: 800;
}
.style-bold-contemporary .tpl-preview-grand {
  border-top: 4px solid var(--tpl-accent, #f97316);
  font-size: 20px !important;
  font-weight: 900;
}
.style-bold-contemporary .tpl-preview-grand span:last-child {
  color: var(--tpl-accent, #f97316);
  font-size: 22px;
}
.style-bold-contemporary .tpl-preview-footer { padding-bottom: 24px; }

/* ── ARCHITECT SCHEMATIC ─ monospaced type, title block, dotted grid ── */
.tpl-preview-page.style-architect-schematic {
  font-family: "JetBrains Mono", "Courier New", Courier, monospace;
  padding: 22px 28px;
  background:
    repeating-linear-gradient(0deg, transparent 0px, transparent 19px, rgba(0,0,0,0.04) 19px, rgba(0,0,0,0.04) 20px),
    repeating-linear-gradient(90deg, transparent 0px, transparent 19px, rgba(0,0,0,0.04) 19px, rgba(0,0,0,0.04) 20px),
    #fefefe;
  border: 2px solid var(--tpl-primary, #1f2937);
  position: relative;
}
.style-architect-schematic::before {
  content: "EST. " attr(data-estnum);
  position: absolute;
  top: 8px;
  right: 12px;
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--tpl-accent, #ef4444);
  font-weight: bold;
}
.style-architect-schematic .tpl-preview-header {
  border-bottom: 2px dashed var(--tpl-primary, #1f2937);
}
.style-architect-schematic .tpl-preview-company {
  font-family: "JetBrains Mono", "Courier New", monospace;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 16px;
  font-weight: 700;
  color: var(--tpl-primary, #1f2937);
}
.style-architect-schematic .tpl-preview-company::before { content: "▸ "; color: var(--tpl-accent, #ef4444); }
.style-architect-schematic .tpl-preview-tagline,
.style-architect-schematic .tpl-preview-contact { font-size: 10px; letter-spacing: 0.06em; }
.style-architect-schematic .tpl-preview-meta-label {
  background: var(--tpl-primary, #1f2937);
  color: white;
  padding: 2px 8px;
  font-size: 10px;
  letter-spacing: 0.18em;
}
.style-architect-schematic .tpl-preview-meta-num {
  font-family: "JetBrains Mono", "Courier New", monospace;
  color: var(--tpl-accent, #ef4444);
  font-size: 18px;
  letter-spacing: 0.05em;
}
.style-architect-schematic .tpl-preview-customer {
  border: 1px dashed var(--tpl-primary, #1f2937);
  background: rgba(255,255,255,0.7);
  border-radius: 0;
}
.style-architect-schematic .tpl-preview-section-label {
  font-family: "JetBrains Mono", monospace;
  letter-spacing: 0.18em;
  color: var(--tpl-accent, #ef4444);
}
.style-architect-schematic .tpl-preview-measurements {
  background: rgba(255,255,255,0.7);
  border: 1px solid var(--tpl-primary, #1f2937);
  border-radius: 0;
  font-family: "JetBrains Mono", monospace;
}
.style-architect-schematic .tpl-preview-measurements strong {
  font-family: "JetBrains Mono", monospace;
  color: var(--tpl-primary, #1f2937);
}
.style-architect-schematic .tpl-preview-table th {
  background: var(--tpl-primary, #1f2937);
  border-bottom: 2px solid var(--tpl-accent, #ef4444);
  font-family: "JetBrains Mono", monospace;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.style-architect-schematic .tpl-preview-table td {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  border-bottom: 1px dashed #cbd5e1;
}
.style-architect-schematic .tpl-preview-table tr:nth-child(even) td { background: transparent; }
.style-architect-schematic .tpl-preview-grand {
  border-top: 2px solid var(--tpl-accent, #ef4444);
  font-family: "JetBrains Mono", monospace;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.style-architect-schematic .tpl-preview-grand span:last-child { color: var(--tpl-accent, #ef4444); }

/* ============================================================
   FONT PAIRING VARIATIONS — applied as a second class on the
   preview page so they layer ON TOP of the base template style.
   Each pairing tweaks one or more of: font family, weight,
   letter-spacing, header sizing, accent color tint.
   ============================================================ */

/* --- Modern Minimalist pairings --- */
.tpl-preview-page.pairing-helvetica-clean {
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: 0;
}
.tpl-preview-page.pairing-helvetica-clean .tpl-preview-company { font-weight: 600; }

.tpl-preview-page.pairing-helvetica-tight {
  font-family: "Helvetica Neue", Helvetica, "Arial Narrow", Arial, sans-serif;
  letter-spacing: -0.01em;
  font-stretch: condensed;
}
.tpl-preview-page.pairing-helvetica-tight .tpl-preview-company {
  font-weight: 800;
  letter-spacing: -0.03em;
  font-size: 21px;
}
.tpl-preview-page.pairing-helvetica-tight .tpl-preview-meta-num { font-weight: 800; letter-spacing: -0.02em; }
.tpl-preview-page.pairing-helvetica-tight .tpl-preview-table th { font-weight: 700; }

/* --- Classic Executive pairings --- */
.tpl-preview-page.pairing-times-navy-gold {
  font-family: "Playfair Display", "Georgia", "Times New Roman", serif;
}
/* keeps the default navy + gold; nothing to override */

.tpl-preview-page.pairing-times-charcoal-brass {
  font-family: "Playfair Display", "Georgia", "Times New Roman", serif;
  --tpl-primary: #2a2a2a;
  --tpl-accent: #9b7a3f;
}
.tpl-preview-page.pairing-times-charcoal-brass .tpl-preview-company {
  font-family: "Playfair Display", "Georgia", serif;
  font-style: italic;
}

.tpl-preview-page.pairing-times-classic {
  font-family: "Georgia", "Times New Roman", Times, serif;
  --tpl-primary: #000;
  --tpl-accent: #000;
}
.tpl-preview-page.pairing-times-classic .tpl-preview-header { border-bottom: 1px solid #000; }
.tpl-preview-page.pairing-times-classic .tpl-preview-table th {
  background: #000;
  border-bottom: 1px solid #000;
}
.tpl-preview-page.pairing-times-classic .tpl-preview-grand { border-top: 2px solid #000; }
.tpl-preview-page.pairing-times-classic .tpl-preview-grand span:last-child { color: #000; }
.tpl-preview-page.pairing-times-classic .tpl-preview-section-label,
.tpl-preview-page.pairing-times-classic .tpl-preview-tagline { color: #555; }

/* --- Bold Contemporary pairings --- */
.tpl-preview-page.pairing-helvetica-display {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.tpl-preview-page.pairing-helvetica-display .tpl-preview-company {
  font-size: 28px; font-weight: 800; letter-spacing: -0.02em;
}
.tpl-preview-page.pairing-helvetica-display .tpl-preview-meta-num {
  font-size: 34px; font-weight: 800; letter-spacing: -0.02em;
}

.tpl-preview-page.pairing-helvetica-strong {
  font-family: "Helvetica Neue", "Arial Black", Helvetica, Arial, sans-serif;
}
.tpl-preview-page.pairing-helvetica-strong .tpl-preview-company {
  font-size: 30px; font-weight: 900; letter-spacing: 0; text-transform: uppercase;
}
.tpl-preview-page.pairing-helvetica-strong .tpl-preview-meta-num { font-weight: 900; font-size: 36px; }
.tpl-preview-page.pairing-helvetica-strong .tpl-preview-table th { font-weight: 900; letter-spacing: 0.08em; }
.tpl-preview-page.pairing-helvetica-strong .tpl-preview-grand { font-weight: 900; }

/* --- Architect Schematic pairings --- */
.tpl-preview-page.pairing-courier-strict { font-family: "JetBrains Mono", "Courier New", Courier, monospace; }
.tpl-preview-page.pairing-courier-strict * { font-family: inherit !important; }

.tpl-preview-page.pairing-courier-mixed .tpl-preview-table td,
.tpl-preview-page.pairing-courier-mixed .tpl-preview-measurements strong,
.tpl-preview-page.pairing-courier-mixed .tpl-preview-meta-num {
  font-family: "JetBrains Mono", "Courier New", monospace;
}
.tpl-preview-page.pairing-courier-mixed .tpl-preview-company,
.tpl-preview-page.pairing-courier-mixed .tpl-preview-table th,
.tpl-preview-page.pairing-courier-mixed .tpl-preview-section-label {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: 0.08em;
}

/* Settings panel container: was 720px (built when settings only had simple
   text forms). The template picker now uses a side-by-side picker+preview
   layout that needs much more horizontal room. Bumped to 1200px so on a
   1440+ monitor the preview gets a comfortable column without compaction.
   The simple forms inside individual cards still constrain their own inputs
   so they don't look stretched-out. */
.settings-grid { max-width: 1200px; }
.settings-grid > .estimate-card > h3 + p,
.settings-grid > .estimate-card > h3 { max-width: 720px; }
.settings-grid > .estimate-card > input,
.settings-grid > .estimate-card > textarea,
.settings-grid > .estimate-card > .two-col { max-width: 720px; }

.storage-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px; background: var(--bg-alt);
  padding: 18px; border-radius: var(--r); margin-bottom: 18px;
}
.stat-item { font-size: 13px; }
.stat-item span { color: var(--text-muted); }
.stat-item strong { display: block; font-size: 20px; margin-top: 4px; color: var(--text); font-weight: 700; }

.storage-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.storage-actions .primary, .storage-actions .secondary {
  padding: 11px 18px; border-radius: var(--r-sm);
  border: none; font-size: 13px; font-weight: 600;
  cursor: pointer; font-family: inherit; transition: var(--transition);
}
.storage-actions .primary { background: var(--primary); color: white; }
.storage-actions .primary:hover { background: var(--primary-dark); }
.storage-actions .secondary { background: var(--surface); border: 1px solid var(--border); color: var(--text); }
.storage-actions .secondary:hover { background: var(--bg-alt); }

.template-apply-select {
  padding: 9px 14px; border: 1px solid var(--border);
  background: var(--surface); border-radius: var(--r-sm);
  font-size: 13px; cursor: pointer; font-family: inherit;
}

.estimate-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.secondary.big {
  padding: 15px; background: var(--surface);
  color: var(--text); border: 1px solid var(--border);
  border-radius: var(--r); font-size: 16px; font-weight: 700;
  cursor: pointer; font-family: inherit; transition: var(--transition);
}
.secondary.big:hover { background: var(--bg-alt); }

/* ============================== ESTIMATE BUILDER ============================== */
.estimate-section {
  background: var(--bg); padding: 56px 24px;
  border-top: 1px solid var(--border);
}
.estimate-wrap { max-width: 1400px; margin: 0 auto; }
.estimate-section h2 { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 6px; }
.estimate-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 24px; }
.estimate-col { display: flex; flex-direction: column; gap: 16px; }

.estimate-card {
  background: var(--surface);
  border-radius: var(--r-md);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
}
.estimate-card h3 {
  font-size: 17px; font-weight: 700; margin-bottom: 14px;
  padding-bottom: 12px; border-bottom: 1px solid var(--border);
  letter-spacing: -0.01em;
}
.estimate-card label {
  display: block; font-size: 11px; color: var(--text-muted);
  margin: 12px 0 5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.estimate-card input[type="text"],
.estimate-card input[type="number"],
.estimate-card input[type="password"],
.estimate-card textarea {
  width: 100%; padding: 10px 13px;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  font-size: 14px; font-family: inherit; background: var(--surface);
  transition: var(--transition);
}
.estimate-card input:focus, .estimate-card textarea:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.logo-uploader { display: flex; gap: 14px; align-items: center; margin-bottom: 18px; }
.logo-preview {
  width: 100px; height: 100px;
  border: 2px dashed var(--border); border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-alt); color: var(--text-muted);
  font-size: 11px; text-align: center;
  overflow: hidden; flex-shrink: 0;
}
.logo-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-actions { display: flex; flex-direction: column; gap: 7px; }
.logo-actions button {
  padding: 9px 15px; border: 1px solid var(--border);
  background: var(--surface); border-radius: var(--r-sm);
  cursor: pointer; font-size: 13px; font-weight: 500; font-family: inherit;
  transition: var(--transition);
}
.logo-actions button:hover { background: var(--bg-alt); }

.line-items { width: 100%; border-collapse: collapse; margin-bottom: 14px; }
.line-items th, .line-items td {
  padding: 10px 7px; text-align: left;
  border-bottom: 1px solid var(--border-soft); font-size: 13px;
}
.line-items th {
  background: var(--bg-alt); font-weight: 600;
  color: var(--text-muted); text-transform: uppercase;
  font-size: 10px; letter-spacing: 0.06em;
}
.line-items input {
  width: 100%; padding: 7px 8px;
  border: 1px solid transparent; border-radius: 5px;
  font-size: 13px; background: transparent; font-family: inherit;
  transition: var(--transition);
  min-width: 0;
  box-sizing: border-box;
}
/* Qty + price inputs get larger minimum width so 4-digit totals + decimals
   stay legible on phones (e.g. 1234.5 sq, $385.50/sq, $2,499.99 total). */
.line-items td:nth-child(2) input,
.line-items td:nth-child(3) input {
  font-variant-numeric: tabular-nums;
  text-align: right;
  padding-right: 6px;
  font-weight: 600;
}
.line-items input:focus { background: var(--surface); border-color: var(--primary); outline: none; }
.line-items td.row-total { font-weight: 600; text-align: right; padding-right: 12px; font-variant-numeric: tabular-nums; }
.line-items .remove-row {
  background: transparent; border: none; color: var(--danger);
  cursor: pointer; font-size: 18px; padding: 0 6px;
}
.line-actions {
  display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap;
  /* Sticky to the TOP so the Regional Catalog / Import / Add Line Item buttons
     stay visible while scrolling through a long imported line-item list. */
  position: sticky; top: 0; z-index: 5;
  background: var(--surface);
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.line-actions button {
  padding: 9px 15px; border: 1px solid var(--border);
  background: var(--surface); border-radius: var(--r-sm);
  cursor: pointer; font-size: 13px; font-family: inherit;
  transition: var(--transition);
}
.line-actions button:hover { background: var(--bg-alt); }

.totals-area {
  background: var(--bg-alt); border-radius: var(--r);
  padding: 16px 20px; margin-bottom: 18px;
}
.total-row {
  display: grid; grid-template-columns: 1fr auto auto;
  gap: 14px; align-items: center;
  padding: 7px 0; font-size: 14px;
}
.total-row label { margin: 0; color: var(--text); font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 14px; }
.total-row input {
  width: 70px; padding: 6px 9px !important;
  font-size: 13px; text-align: right;
  border: 1px solid var(--border) !important;
  border-radius: 4px !important; background: var(--surface) !important;
}
.total-row span { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; min-width: 100px; }
.total-row.grand { border-top: 2px solid var(--text); margin-top: 8px; padding-top: 14px; font-size: 19px; }
.total-row.grand label { font-weight: 700; }
.total-row.grand span { color: var(--primary); font-weight: 800; }

.primary.big {
  width: 100%; padding: 16px;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: white; border: none; border-radius: var(--r);
  font-size: 16px; font-weight: 700;
  cursor: pointer; margin-top: 14px; font-family: inherit;
  box-shadow: 0 4px 14px rgba(249,115,22,0.35);
  transition: var(--transition);
}
.primary.big:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(249,115,22,0.5); }

/* ============================== PHOTO ANALYSIS ============================== */
.photo-section {
  background: var(--surface); padding: 56px 24px;
  border-top: 1px solid var(--border);
}
.photo-wrap { max-width: 1400px; margin: 0 auto; }
.photo-section h2 { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 6px; }
.section-sub { color: var(--text-muted); margin-bottom: 28px; font-size: 14px; }

.badge {
  background: var(--accent); color: white; font-size: 10px;
  padding: 3px 9px; border-radius: 12px; vertical-align: middle;
  margin-left: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
}

.photo-tabs {
  display: flex; gap: 4px; border-bottom: 1px solid var(--border);
  margin-bottom: 28px;
}
.ptab {
  background: transparent; border: none;
  padding: 12px 22px; font-size: 14px; font-weight: 600;
  color: var(--text-muted); cursor: pointer;
  border-bottom: 2.5px solid transparent; margin-bottom: -1px;
  font-family: inherit; transition: var(--transition);
}
.ptab.active { color: var(--primary); border-bottom-color: var(--primary); }
.ptab:hover { color: var(--text); }
.ptab-panel { display: none; }
.ptab-panel.active { display: block; }

.upload-area {
  border: 2px dashed var(--border); border-radius: var(--r-md);
  padding: 48px; text-align: center; cursor: pointer;
  background: var(--bg-alt); transition: var(--transition); margin-bottom: 18px;
}
.upload-area:hover, .upload-area.dragover {
  border-color: var(--primary); background: var(--primary-soft);
}
.upload-prompt strong { display: block; font-size: 16px; margin-bottom: 6px; font-weight: 600; }
.upload-prompt span { color: var(--text-muted); font-size: 13px; }

.pitch-photo-tools { display: grid; grid-template-columns: 1fr 320px; gap: 22px; margin-bottom: 18px; }
.pitch-canvas-wrap, .siding-canvas-wrap {
  background: #1e293b; border-radius: var(--r-md);
  overflow: hidden; position: relative;
}
.pitch-canvas-wrap canvas, .siding-canvas-wrap canvas {
  display: block; width: 100%; height: auto; cursor: crosshair;
}
.canvas-help {
  position: absolute; top: 10px; left: 10px;
  background: rgba(15,23,42,0.85); color: white;
  padding: 7px 12px; border-radius: var(--r-sm);
  font-size: 12px; pointer-events: none;
}

.pitch-readout {
  background: var(--bg-alt); padding: 18px;
  border-radius: var(--r); display: flex; flex-direction: column; gap: 10px;
}
.pitch-readout button {
  padding: 11px; border: none; border-radius: var(--r-sm);
  font-weight: 600; cursor: pointer; font-size: 14px;
  margin-top: 6px; font-family: inherit;
}
.pitch-readout .primary { background: var(--primary); color: white; }
.pitch-readout .secondary { background: var(--surface); border: 1px solid var(--border); color: var(--text); }

.opening-toolbar {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin-bottom: 14px; padding: 14px;
  background: var(--bg-alt); border-radius: var(--r);
}
.opening-toolbar label { font-size: 13px; width: 100%; margin-bottom: 4px; font-weight: 500; }
.opening-toolbar select {
  flex: 1; min-width: 220px; padding: 9px 12px;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  font-size: 13px; background: var(--surface); font-family: inherit;
}
.opening-toolbar button {
  padding: 9px 16px; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: var(--surface);
  cursor: pointer; font-size: 13px; font-weight: 500; font-family: inherit;
  transition: var(--transition);
}
.opening-toolbar button:hover { background: var(--bg-alt); }

.siding-readout {
  background: var(--bg-alt); padding: 18px;
  border-radius: var(--r); margin-top: 18px;
}

.tip-box {
  background: var(--accent-soft); border-left: 3px solid var(--accent);
  padding: 13px 17px; border-radius: var(--r-sm);
  font-size: 13px; color: var(--text); margin-top: 14px; line-height: 1.55;
}

/* ============================== PRICING ============================== */
.pricing-section {
  background: var(--surface); padding: 80px 24px;
  border-top: 1px solid var(--border);
}
.pricing-wrap { max-width: 1200px; margin: 0 auto; }
.pricing-section h2 { text-align: center; font-size: 36px; font-weight: 800; letter-spacing: -0.025em; margin-bottom: 12px; }

.pricing-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px; margin-top: 36px;
}
.pricing-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 32px 26px;
  text-align: center; position: relative;
  display: flex; flex-direction: column;
  transition: var(--transition);
}
.pricing-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.pricing-card.featured {
  border-color: var(--accent); border-width: 2px;
  transform: scale(1.04);
  box-shadow: 0 12px 32px rgba(249,115,22,0.18);
}
.pricing-card.featured:hover { transform: scale(1.04) translateY(-4px); }
.featured-badge {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: white;
  padding: 5px 16px; border-radius: 14px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  box-shadow: var(--shadow);
}
.pricing-card h3 { font-size: 18px; margin-bottom: 14px; font-weight: 700; }
.price { margin-bottom: 24px; }
.price .amount { font-size: 44px; font-weight: 800; color: var(--text); letter-spacing: -0.02em; }
.price .period { color: var(--text-muted); font-size: 14px; }
.features { list-style: none; padding: 0; margin: 0 0 22px; text-align: left; flex: 1; }
.features li { padding: 8px 0; font-size: 13px; border-bottom: 1px solid var(--border-soft); }
.features li:last-child { border-bottom: none; }
.signup-btn {
  width: 100%; padding: 13px; border: none; border-radius: var(--r-sm);
  font-weight: 700; font-size: 14px; cursor: pointer; font-family: inherit;
  transition: var(--transition);
}
.signup-btn.primary { background: var(--primary); color: white; }
.signup-btn.primary:hover { background: var(--primary-dark); transform: translateY(-1px); box-shadow: var(--shadow); }
.signup-btn.secondary { background: var(--surface); color: var(--text); border: 1px solid var(--border); }
.signup-btn.secondary:hover { background: var(--bg-alt); }

/* ============================== INFO SECTIONS ============================== */
.info { padding: 80px 24px; background: var(--surface); }
.info.alt { background: var(--bg); }
.info h2 { font-size: 32px; font-weight: 800; letter-spacing: -0.025em; text-align: center; margin-bottom: 44px; }
.info h3 { font-size: 18px; font-weight: 700; margin: 28px 0 10px; }
.info p, .info ul { max-width: 800px; margin: 0 auto 14px; }
.info ul { padding-left: 24px; }
.info li { margin-bottom: 6px; }

.steps {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 28px; max-width: 1200px; margin: 0 auto;
}
.step {
  background: var(--bg); padding: 28px;
  border-radius: var(--r-md); text-align: center;
  border: 1px solid var(--border-soft);
}
.info.alt .step { background: var(--surface); }
.num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: white; border-radius: 50%;
  font-weight: 700; font-size: 18px; margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
}
.step h3 { margin-bottom: 8px; }
.step p { font-size: 14px; color: var(--text-muted); }

/* ============================== MODAL ============================== */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(15,23,42,0.6);
  backdrop-filter: blur(8px);
  z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal-card {
  background: var(--surface); border-radius: var(--r-lg);
  max-width: 540px; width: 100%; padding: 32px;
  box-shadow: var(--shadow-xl);
  max-height: 90vh; overflow-y: auto;
  border: 1px solid var(--border);
}
.modal-card h3 { margin-bottom: 8px; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.template-picker { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.template-pick-card {
  text-align: left; padding: 16px 18px;
  border: 2px solid var(--border); background: var(--surface);
  border-radius: var(--r); cursor: pointer;
  display: flex; flex-direction: column; gap: 4px;
  transition: var(--transition); font-family: inherit;
}
.template-pick-card:hover {
  border-color: var(--primary); background: var(--primary-soft);
  transform: translateY(-2px); box-shadow: var(--shadow);
}
.template-pick-card strong { font-size: 15px; color: var(--text); font-weight: 700; }
.template-pick-card span { font-size: 12px; color: var(--text-muted); }

/* ============================== FOOTER ============================== */
footer {
  background: #0f172a; color: #94a3b8;
  text-align: center; padding: 28px;
  font-size: 13px;
}
footer a { color: #cbd5e1; }

/* ============================== RESPONSIVE ============================== */
@media (max-width: 960px) {
  .workspace { grid-template-columns: 1fr; }
  #map { height: 440px; }
  .sv-container { height: 280px; }
  .hero h2 { font-size: 36px; }
  .pricing-section h2 { font-size: 28px; }
  nav { display: none; }
  .tagline { display: none; }
}

/* ============= MOBILE-SPECIFIC ============= */
@media (max-width: 640px) {
  .topbar { padding: 12px 16px; }
  .app { padding: 20px 12px; }
  .hero { padding: 56px 20px 64px; }
  .hero h2 { font-size: 28px; line-height: 1.15; }
  .hero p { font-size: 16px; }

  /* Keep content clear of the sticky mobile top bar when navigating/scrolling
     to a section (otherwise the bar covers the top of the roof-measure search
     bar). ~64px ≈ the mobile-topbar height. */
  html { scroll-padding-top: 64px; }
  .app, .dashboard-section, #measure { scroll-margin-top: 64px; }
  #measure.app { padding-top: 18px; }

  /* Search bar — stack vertically so it can use full width */
  .search-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .search-input-wrap { width: 100%; }
  .search-bar input {
    font-size: 16px; /* 16px prevents iOS Safari from zooming in on focus */
    padding: 14px 16px;
    width: 100%;
    box-sizing: border-box;
  }
  .search-bar button {
    width: 100%;
    padding: 14px;
    font-size: 15px;
  }
  .status {
    min-width: auto;
    width: 100%;
    text-align: center;
    margin-top: 4px;
  }
  .search-tip { font-size: 12px; padding: 9px 12px; }

  /* Autocomplete dropdown — bigger touch targets */
  .suggestions { max-height: 260px; }
  .suggestion {
    padding: 14px 12px;
    font-size: 15px;
  }
  .suggestion .text strong { font-size: 15px; }
  .suggestion .text span { font-size: 13px; }

  /* Map height shorter on phones */
  #map { height: 360px; }

  /* Workflow stepper hides on tiny screens (saves space, isn't critical) */
  .workflow-stepper { display: none; }

  /* Panel padding tighter */
  .panel { padding: 16px; }
  .panel h3 { font-size: 16px; margin-bottom: 14px; }

  /* Estimate grid stacks */
  .estimate-grid { gap: 14px; }
  .estimate-card { padding: 18px; }
  .two-col { grid-template-columns: 1fr; }

  /* Customer detail meta grid stacks */
  .customer-meta-grid { grid-template-columns: 1fr; gap: 10px; }

  /* Pricing cards smaller */
  .pricing-section { padding: 48px 16px; }
  .pricing-card { padding: 24px 20px; }
  .pricing-card.featured { transform: none; }

  /* Section headings */
  .info { padding: 48px 20px; }
  .info h2 { font-size: 24px; margin-bottom: 28px; }
  .photo-section, .estimate-section, .dashboard-section { padding: 36px 16px; }

  /* Modals fit phone */
  .modal-card { padding: 22px; max-height: 88vh; }
  .modal-card h3 { font-size: 18px; }

  /* Login modal — already good but ensure tap targets are big */
  .auth-modal { max-width: 100%; }
  .auth-form { padding: 22px; }
  .auth-form input { font-size: 16px; padding: 13px 14px; }

  /* Click-house prompt — small toast at the bottom on mobile (not blocking the map) */
  .click-house-prompt {
    top: auto !important;
    bottom: 8px;
    left: 8px;
    right: 8px;
    transform: none !important;
    min-width: 0;
    max-width: none;
    padding: 9px 11px;
  }
  .chp-content { gap: 8px; align-items: center; }
  .chp-icon { font-size: 18px; }
  .chp-content strong { font-size: 12px; }
  .chp-content small { font-size: 10.5px; line-height: 1.3; display: block; margin-top: 2px; }
  .chp-close { font-size: 22px; padding: 0 6px; }
}
@media (max-width: 900px) {
  /* Mobile: list and detail BOTH live in a single column. The slide-away
     behavior is even more important here — when no customer is selected,
     show only the list. When one IS selected, hide the list entirely. */
  /* minmax(0, 1fr) (not bare 1fr) lets the column shrink below its content's
     natural width — otherwise the grid item's default min-width:auto forces
     the detail pane wider than the phone screen (clipped content). */
  .customer-layout, .templates-layout { grid-template-columns: minmax(0, 1fr); }
  .customer-layout.detail-open { grid-template-columns: minmax(0, 1fr); }
  .customer-layout.detail-open .customer-list-pane {
    display: none;
  }
  .customer-layout:not(.detail-open) .customer-detail-pane {
    display: none;
  }
  /* Pair with min-width:0 on the grid item so it actually collapses to the
     track width; the tab row (.cd-tabs) then scrolls within instead of
     blowing out the whole profile. */
  .customer-detail-pane, .template-detail-pane { min-width: 0; }
  .customer-detail, .cd-tab-panel { min-width: 0; max-width: 100%; }
  .estimate-grid { grid-template-columns: minmax(0, 1fr); }
  /* CRITICAL: grid items default to min-width:auto, so the 480px line-items
     table (below) was forcing the single column wider than the screen — that's
     the "right 80% cut off". min-width:0 lets the column collapse to the
     viewport; the table then scrolls inside its own overflow:auto card. */
  .estimate-col { min-width: 0; max-width: 100%; }
  .estimate-buttons { grid-template-columns: 1fr; }
  /* Profile tabs: WRAP so all are visible at once (no sideways swipe). */
  .cd-tabs { flex-wrap: wrap; overflow-x: visible; gap: 6px; }
  .cd-tab { padding: 8px 12px; font-size: 13px; flex: 0 0 auto; }
  .customer-detail-pane { padding: 16px; }
}
@media (max-width: 768px) {
  .pitch-photo-tools { grid-template-columns: 1fr; }
}

/* ===================================================================== */
/*  MOBILE OPTIMIZATIONS — contractors mostly use this on phones        */
/* ===================================================================== */
@media (max-width: 768px) {
  /* Active customer banner stacks name + buttons vertically */
  .active-customer-banner {
    flex-direction: column;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 14px;
  }
  .active-customer-banner button.primary,
  .active-customer-banner button.secondary {
    width: 100%;
    padding: 12px 16px;
    font-size: 14px;
    min-height: 44px;
  }
  .active-customer-banner > div:first-child {
    text-align: center;
  }
  .active-customer-banner > div:last-child {
    flex-direction: column;
  }

  /* Customer detail panel — two-column meta grid → single column */
  .customer-meta-grid {
    grid-template-columns: 1fr !important;
  }

  /* Section titles with action buttons — let buttons wrap below the title */
  .customer-section-title {
    flex-wrap: wrap;
    gap: 8px;
  }
  .customer-section-title button {
    min-height: 44px;
  }

  /* Modal dialogs use full screen on mobile */
  .modal-card {
    max-width: 100% !important;
    width: 100%;
    margin: 8px;
    max-height: calc(100vh - 16px);
    overflow-y: auto;
  }

  /* Estimate builder line items table — let it scroll horizontally
     instead of cramping the columns */
  .line-items {
    font-size: 13px;
    min-width: 480px;
  }
  .estimate-card { overflow-x: auto; }

  /* Line actions (sticky toolbar) — full-width buttons for thumb-friendly tapping */
  .line-actions {
    flex-direction: column;
    gap: 8px;
  }
  .line-actions button,
  .line-actions select {
    width: 100%;
    min-height: 44px;
    padding: 12px 16px;
    font-size: 14px;
  }

  /* Customer rows in the list — bigger tap target */
  .customer-row {
    padding: 14px 12px !important;
    min-height: 56px;
  }

  /* All form inputs at 16px to prevent iOS Safari zoom-on-focus */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="search"],
  textarea,
  select {
    font-size: 16px !important;
  }

  /* Dashboard tab nav — scrollable horizontally if it overflows */
  .dtab-nav {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .dtab {
    flex-shrink: 0;
    min-height: 44px;
  }

  /* Sidebar — make the user menu more thumb-friendly */
  .sidebar-user {
    padding: 14px;
    min-height: 56px;
  }

  /* Customer detail header — name + delete button stack on tiny screens */
  #cd_name {
    font-size: 22px;
    line-height: 1.2;
  }

  /* Photos / documents grid — single column on small screens */
  .attachments-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px;
  }

  /* History rows (saved measurements/estimates/change orders) — stack the actions below */
  .history-row {
    flex-direction: column;
    align-items: stretch !important;
    gap: 10px;
    padding: 12px;
  }
  .history-row .actions {
    flex-wrap: wrap;
    gap: 6px;
  }
  .history-row .actions button {
    flex: 1;
    min-height: 44px;
    padding: 10px 12px;
  }

  /* Notes / hail / change order action buttons — full width on mobile */
  .customer-detail button.primary,
  .customer-detail button.secondary {
    min-height: 44px;
  }
}

/* ===== TINY PHONES (≤ 380px) ===== */
@media (max-width: 380px) {
  .estimate-card { padding: 14px; }
  .modal-card { padding: 16px; }
  .hero h2 { font-size: 24px; }
  /* Photos grid → single column on the smallest phones */
  .attachments-grid {
    grid-template-columns: 1fr !important;
  }
}

/* =====================================================================
   NOTIFICATION BELL + DROPDOWN PANEL
   ===================================================================== */
.notif-bell {
  position: relative;
  width: 100%;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  font-size: 18px;
  cursor: pointer;
  margin-bottom: 8px;
  color: var(--text);
  transition: background 0.15s;
}
.notif-bell:hover { background: var(--bg-alt); }
.notif-bell.mobile {
  width: auto;
  padding: 6px 10px;
  margin: 0 0 0 auto;
  border: none;
  font-size: 22px;
}
.notif-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #ef4444;
  color: white;
  font-size: 11px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  border: 2px solid var(--bg);
}
.notif-panel {
  position: fixed;
  top: 60px;
  right: 24px;
  width: 380px;
  max-width: calc(100vw - 32px);
  max-height: 70vh;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.18);
  z-index: 999;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.notif-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-alt);
}
.notif-panel-header strong { font-size: 15px; }
.notif-list { overflow-y: auto; flex: 1; }
.notif-item {
  display: flex;
  gap: 10px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.15s;
}
.notif-item:hover { background: var(--bg-alt); }
.notif-item.unread { background: rgba(37, 99, 235, 0.04); }
.notif-item.unread::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
  margin-top: 7px;
  flex-shrink: 0;
}
.notif-item.read::before {
  content: '';
  display: inline-block;
  width: 8px;
  flex-shrink: 0;
}
.notif-item-body { flex: 1; min-width: 0; }
.notif-item-title { font-weight: 600; font-size: 13px; margin-bottom: 2px; }
.notif-item-text { font-size: 12px; color: var(--text-muted); }
.notif-item-time { font-size: 11px; color: var(--text-muted); margin-top: 4px; }

@media (max-width: 768px) {
  .notif-panel {
    top: 56px;
    right: 8px;
    left: 8px;
    width: auto;
    max-height: calc(100vh - 80px);
  }
}

/* =====================================================================
   TASKS (on customer detail)
   ===================================================================== */
.task-list { display: flex; flex-direction: column; gap: 8px; }
.task-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.task-card.done { opacity: 0.6; }
.task-card.done .task-title { text-decoration: line-through; }
.task-checkbox {
  width: 20px; height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
  cursor: pointer;
}
.task-body { flex: 1; min-width: 0; }
.task-title { font-weight: 600; font-size: 14px; }
.task-meta { font-size: 11px; color: var(--text-muted); margin-top: 4px; display: flex; gap: 10px; flex-wrap: wrap; }
.task-priority-urgent { color: #dc2626; font-weight: 700; }
.task-priority-high { color: #f97316; font-weight: 600; }
.task-due-overdue { color: #dc2626; font-weight: 600; }
.task-card .task-actions { display: flex; gap: 4px; opacity: 0.5; transition: opacity 0.15s; }
.task-card:hover .task-actions { opacity: 1; }

/* =====================================================================
   STAGES + CUSTOM FIELDS EDITORS (Settings)
   ===================================================================== */
.stage-row, .custom-field-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
}
.stage-row input { flex: 1; }
.custom-field-row input, .custom-field-row select { flex: 1; min-width: 0; }
.cf-options-input { font-size: 12px; }
.drag-handle { cursor: grab; user-select: none; color: var(--text-muted); padding: 0 4px; }

/* =====================================================================
   TEAM TREE (Settings)
   ===================================================================== */
.team-tree-node {
  border-left: 2px solid var(--border);
  padding-left: 12px;
  margin-left: 8px;
  margin-top: 6px;
}
.team-tree-node.root { border-left: none; padding-left: 0; margin-left: 0; }
.team-tree-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--bg-alt);
  margin-bottom: 4px;
}
.team-tree-row .role-badge {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.team-tree-row .role-owner { background: #dbeafe; color: #1e40af; }
.team-tree-row .role-admin { background: #fef3c7; color: #92400e; }
.team-tree-row .role-member { background: var(--border); color: var(--text-muted); }

/* Sidebar section labels — group nav items into Workflow / Tools / Account */
.sidebar-section-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  padding: 16px 16px 6px;
  opacity: 0.7;
}

/* =====================================================================
   HIGH-END PREMIUM OVERHAUL — sidebar glass, hero gradient, refined cards
   This block layers on top of the base styles, adding the polish that makes
   the site feel like a modern CRM (Linear / Vercel / Stripe aesthetic).
   ===================================================================== */

/* Body — subtle gradient backdrop for visual depth */
body {
  background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
  background-attachment: fixed;
}

/* Sidebar — frosted glass + subtle inner shadow */
.sidebar {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-right: 1px solid rgba(226, 232, 240, 0.7);
  box-shadow: inset -1px 0 0 rgba(255,255,255,0.6);
}

/* Active sidebar item — gradient bar + soft glow */
.sidebar-nav a.active {
  background: linear-gradient(135deg, rgba(29,78,216,0.10), rgba(6,182,212,0.08));
  color: var(--primary-dark);
  font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(29,78,216,0.12);
  position: relative;
}
.sidebar-nav a.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px; bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--primary), var(--brand-cyan));
}
.sidebar-nav a {
  position: relative;
}
.sidebar-nav a:hover:not(.active) {
  background: rgba(241,245,249,0.7);
}

/* Section labels — more refined typography */
.sidebar-section-label {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 1;
  color: var(--text-soft);
  font-weight: 700;
  padding-left: 12px;
}

/* Dashboard hero — gradient header with depth */
.dashboard-header {
  position: relative;
  padding: 24px 0 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--border-soft);
}
.dashboard-header::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0;
  width: 80px;
  height: 2px;
  background: linear-gradient(90deg, var(--primary), var(--brand-cyan));
  border-radius: 2px;
}
.dashboard-header h2 {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.035em;
}

/* KPI cards — refined with subtle gradient borders + lift on hover */
.home-kpi {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  padding: 20px 22px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(15,23,42,0.04);
}
.home-kpi::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 14px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(29,78,216,0.18), rgba(6,182,212,0.18) 50%, transparent);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.home-kpi:hover::before { opacity: 1; }
.home-kpi:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px -8px rgba(29,78,216,0.18);
}
.home-kpi .kpi-num {
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
}
.home-kpi .kpi-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  margin-top: 8px;
  color: var(--text-soft);
}

/* Estimate-style cards on home / dashboard — premium feel */
.estimate-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  padding: 22px;
  box-shadow: 0 1px 3px rgba(15,23,42,0.04);
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}
.estimate-card h3 {
  font-size: 16px;
  letter-spacing: -0.01em;
}
.estimate-card > .section-sub {
  color: var(--text-soft);
  font-size: 13px;
  margin-top: -2px;
  margin-bottom: 14px;
}

/* Pipeline donut container — subtle ring shadow */
#stagePieChart {
  filter: drop-shadow(0 4px 10px rgba(29,78,216,0.08));
}

/* Buttons — refined */
button.primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border: none;
  font-weight: 600;
  letter-spacing: -0.005em;
  box-shadow: 0 1px 2px rgba(29,78,216,0.20), inset 0 1px 0 rgba(255,255,255,0.18);
  transition: transform 0.1s ease, box-shadow 0.2s ease, filter 0.15s ease;
}
button.primary:hover {
  filter: brightness(1.07);
  box-shadow: 0 6px 16px -3px rgba(29,78,216,0.35);
}
button.primary:active { transform: translateY(1px); }
button.secondary {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-weight: 600;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
button.secondary:hover {
  background: var(--bg-alt);
  border-color: var(--brand-cyan);
  color: var(--primary);
}

/* Input + select polish — softer borders, more breathing room.
   NOTE: deliberately no `transition` here. Animated transitions on form
   inputs trigger browser password managers to dismiss their autofill
   dropdown mid-click (the input re-renders during the transition and the
   manager thinks focus left). Static styling keeps autofill stable. */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="search"],
input[type="password"],
input[type="url"],
select,
textarea {
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 11px 13px;
  background: var(--surface);
  font-family: inherit;
}

/* Stage pill on customer rows — refined */
.stage-pill {
  font-family: 'Space Grotesk', sans-serif;
  letter-spacing: 0.04em;
}

/* Mobile top bar — also frosted */
.mobile-topbar {
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid rgba(226,232,240,0.7);
}

/* =====================================================================
   BILLING TOGGLE — monthly / annual switch on subscription plans grid
   ===================================================================== */
.billing-toggle {
  background: transparent;
  border: none;
  padding: 8px 16px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  transition: background 0.15s, color 0.15s;
}
.billing-toggle:hover { color: var(--text); }
.billing-toggle.active {
  background: var(--surface);
  color: var(--primary);
  box-shadow: var(--shadow-xs);
}

/* =====================================================================
   SETTINGS SUB-NAVIGATION — tabs within the Settings page
   ===================================================================== */
.settings-subnav {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 18px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.settings-subtab {
  background: transparent;
  border: none;
  padding: 9px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.settings-subtab:hover { background: var(--bg); color: var(--text); }
.settings-subtab.active {
  background: var(--bg);
  color: var(--primary);
  box-shadow: var(--shadow-xs);
}

/* =====================================================================
   CALENDAR — premium grid with smooth interactions
   ===================================================================== */
.cal-toolbar {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
  padding: 4px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-xs);
}
.cal-toolbar button {
  border: none;
  background: transparent;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.cal-toolbar button:hover { background: var(--bg-alt); }
.cal-toolbar button:active { background: var(--primary-soft); color: var(--primary); }
.cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-bottom: 6px;
}
.cal-weekdays > div {
  text-align: center;
  font-size: 10px;
  font-weight: 800;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 4px 0;
}
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  border-radius: 14px;
  padding: 6px;
  background: linear-gradient(180deg, rgba(241,245,249,0.5), rgba(248,250,252,0));
}
.cal-cell {
  min-height: 110px;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.15s ease;
  overflow: hidden;
}
.cal-cell:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: 0 6px 14px -4px rgba(37,99,235,0.18);
}
.cal-cell.other-month {
  background: var(--bg-alt);
  opacity: 0.6;
}
.cal-cell.other-month:hover { opacity: 0.85; }
.cal-cell.today {
  border-color: var(--primary);
  background: linear-gradient(135deg, var(--primary-soft), rgba(219,234,254,0.4));
  box-shadow: inset 0 0 0 1px var(--primary);
}
.cal-cell.today .cal-cell-date {
  color: white;
  background: var(--primary);
  padding: 2px 7px;
  border-radius: 100px;
  font-size: 11px;
  align-self: flex-start;
  box-shadow: 0 1px 3px rgba(37,99,235,0.4);
}
.cal-cell.drop-target {
  border: 2px dashed var(--primary);
  background: rgba(37, 99, 235, 0.08);
  transform: scale(1.02);
}
.cal-cell-date {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}
.cal-cell-tasks {
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow: hidden;
}
.cal-task {
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 5px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: white;
  cursor: grab;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: none;
  border: none;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(15,23,42,0.15);
  transition: transform 0.1s ease;
}
.cal-task:hover { transform: translateX(2px); }
.cal-task:active { cursor: grabbing; }
.cal-task.priority-urgent { background: linear-gradient(135deg, #dc2626, #b91c1c); }
.cal-task.priority-high { background: linear-gradient(135deg, #f97316, #ea580c); }
.cal-task.priority-low { background: linear-gradient(135deg, #64748b, #475569); }
.cal-task.done { opacity: 0.45; text-decoration: line-through; }

@media (max-width: 768px) {
  .cal-cell { min-height: 80px; padding: 6px; }
  .cal-task { font-size: 10px; padding: 3px 6px; }
  .cal-weekdays > div { font-size: 9px; padding: 4px 0; }
}

/* =====================================================================
   PREMIUM TYPOGRAPHY — Space Grotesk for displays, Inter for body
   ===================================================================== */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-feature-settings: 'cv02','cv03','cv04','cv11', 'ss01';
  letter-spacing: -0.005em;
}
.sidebar-brand h1,
.dashboard-header h2,
.dashboard-section > .dashboard-header h2,
.estimate-card h3,
.feature-card h3,
.rm-modal-header h2,
section h2,
section > h3,
.pricing-wrap h2,
#calMonthTitle {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  letter-spacing: -0.025em;
  font-weight: 700;
}
/* Larger, tighter, more confident displays on key pages */
.dashboard-header h2,
.pricing-wrap h2 {
  font-size: 26px;
  letter-spacing: -0.03em;
  font-weight: 700;
  background: linear-gradient(135deg, var(--text) 60%, var(--brand-cyan));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.sidebar-brand h1 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.kpi-num {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  letter-spacing: -0.04em;
  font-feature-settings: 'tnum';
}
.home-kpi .kpi-num {
  background: linear-gradient(135deg, var(--primary) 0%, var(--brand-cyan) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cal-task, .stage-pill, .role-badge, .notif-badge {
  letter-spacing: 0.01em;
  font-feature-settings: 'tnum';
}
#stageChartTotal {
  font-family: 'Space Grotesk', sans-serif;
  letter-spacing: -0.04em;
}

/* =====================================================================
   PREMIUM POLISH — buttons, transitions, cards
   ===================================================================== */
.dashboard-section {
  animation: rm-fade-in 0.22s ease-out;
}
.estimate-card {
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}
button.primary, button.secondary, button.danger {
  letter-spacing: -0.005em;
  font-feature-settings: 'cv02','cv03','cv04','cv11';
}
button.primary:not(.small):hover {
  box-shadow: 0 4px 12px -2px rgba(37,99,235,0.35);
}
/* Static focus state — no transition so password autofill doesn't get dismissed */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="search"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}
/* Disable autofill background flash in Webkit which can cause re-render flicker */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--surface) inset !important;
  -webkit-text-fill-color: var(--text) !important;
  transition: background-color 9999s ease-in-out 0s;
}

/* =====================================================================
   FEATURES GRID — Features page (nav replacement for About)
   ===================================================================== */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 8px;
}
.feature-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.feature-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.08);
  border-color: var(--primary);
}
.feature-card .feature-icon {
  font-size: 32px;
  margin-bottom: 10px;
}
.feature-card h3 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--text);
}
.feature-card p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0;
}

/* =====================================================================
   SUBSCRIPTION CARD — Settings page billing block
   ===================================================================== */
.sub-plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin: 12px 0;
}
.sub-plan {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  background: var(--bg);
  cursor: pointer;
  transition: border-color 0.15s, transform 0.1s;
}
.sub-plan:hover { border-color: var(--primary); transform: translateY(-2px); }
.sub-plan.current { border-color: var(--primary); background: var(--primary-soft); }
.sub-plan .plan-name { font-weight: 700; font-size: 15px; margin-bottom: 4px; }
.sub-plan .plan-price { font-size: 22px; font-weight: 800; color: var(--primary); }
.sub-plan .plan-price small { font-size: 12px; color: var(--text-muted); font-weight: 500; }
.sub-plan .plan-features { font-size: 12px; color: var(--text-muted); margin-top: 8px; line-height: 1.6; }
.sub-plan .plan-features li { list-style: none; }
.sub-plan .plan-current-badge { display: inline-block; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--primary); color: white; text-transform: uppercase; letter-spacing: 0.05em; margin-top: 8px; }

/* =====================================================================
   PHOTO VIEWER — full-screen, prev/next, thumbnails, annotate, delete
   ===================================================================== */
.pv-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: #0a0a0a;
  display: flex; flex-direction: column;
  animation: rm-fade-in 0.15s ease-out;
}
.pv-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px; gap: 10px;
  background: rgba(20,20,20,0.92);
  border-bottom: 1px solid #222;
  color: #fff;
}
.pv-info { display: flex; align-items: baseline; gap: 12px; min-width: 0; flex: 1; }
.pv-info strong { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 50vw; }
.pv-counter { font-size: 12px; color: #999; flex-shrink: 0; }
.pv-actions { display: flex; gap: 6px; flex-shrink: 0; }
.pv-btn {
  background: transparent; color: #fff;
  border: 1px solid #333; border-radius: 8px;
  padding: 7px 12px; font-size: 13px; cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.pv-btn:hover { background: #1f1f1f; border-color: #555; }
.pv-btn-danger:hover { background: rgba(239,68,68,0.18); border-color: #ef4444; }
.pv-close { font-size: 22px; padding: 4px 12px; }
.pv-stage {
  flex: 1; position: relative;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  background: #0a0a0a;
}
#pv_img {
  max-width: 92%; max-height: 88%;
  box-shadow: 0 12px 40px rgba(0,0,0,0.6);
  border-radius: 4px;
  background: #1a1a1a;
}
.pv-nav {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  background: rgba(0,0,0,0.55);
  color: #fff;
  border: none;
  width: 52px; height: 52px;
  border-radius: 50%;
  font-size: 32px; line-height: 1;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.pv-nav:hover:not(:disabled) { background: rgba(0,0,0,0.85); transform: translateY(-50%) scale(1.08); }
.pv-nav:disabled { opacity: 0.25; cursor: not-allowed; }
.pv-prev { left: 18px; }
.pv-next { right: 18px; }
.pv-thumbs {
  background: rgba(15,15,15,0.96);
  border-top: 1px solid #222;
  padding: 10px 16px;
  display: flex; gap: 8px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.pv-thumb {
  flex-shrink: 0;
  width: 72px; height: 56px;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  opacity: 0.55;
  transition: opacity 0.12s, border-color 0.12s;
  background: #1a1a1a;
}
.pv-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pv-thumb:hover { opacity: 0.85; }
.pv-thumb.active { border-color: var(--primary, #2563eb); opacity: 1; }

@media (max-width: 768px) {
  .pv-topbar { padding: 10px 12px; }
  .pv-info strong { max-width: 40vw; }
  .pv-btn { padding: 6px 9px; font-size: 12px; }
  .pv-nav { width: 44px; height: 44px; font-size: 26px; }
  .pv-prev { left: 8px; } .pv-next { right: 8px; }
  .pv-thumb { width: 56px; height: 44px; }
  #pv_img { max-width: 96%; max-height: 84%; }
}

/* =====================================================================
   GENERIC MODERN MODAL FRAMEWORK
   Used by the annotator, sketcher, and any new modal. Replaces the older
   inline-styled "white card on dark background" pattern with a cleaner,
   more app-like UI.
   ===================================================================== */
.rm-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.78);
  backdrop-filter: blur(8px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  animation: rm-fade-in 0.16s ease-out;
}
@keyframes rm-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes rm-scale-in { from { transform: scale(0.98); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.rm-modal {
  background: var(--bg);
  border-radius: 14px;
  width: 100%;
  max-width: 1100px;
  max-height: 96vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
  animation: rm-scale-in 0.18s ease-out;
}
.rm-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  /* iOS safe-area: when the modal goes edge-to-edge on mobile, the top
     of the header would otherwise sit under the notch / dynamic island. */
  padding: calc(18px + env(safe-area-inset-top, 0px)) 22px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 2;
}
/* Body region was missing CSS — modals like Add Customer were rendering
   with zero padding so the form felt cramped and text looked
   disproportionate to the borders. */
.rm-modal-body {
  padding: 20px 22px;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}
.rm-modal-body label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 6px;
}
.rm-modal-body input[type="text"],
.rm-modal-body input[type="email"],
.rm-modal-body input[type="tel"],
.rm-modal-body input[type="number"],
.rm-modal-body select,
.rm-modal-body textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  background: var(--surface);
  color: var(--text);
  transition: border-color 0.12s, box-shadow 0.12s;
}
.rm-modal-body input:focus,
.rm-modal-body select:focus,
.rm-modal-body textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.12);
}
/* Stack the phone/email two-col + city/state/zip three-col on narrow screens
   so labels don't get cut off and inputs aren't 50 px wide. */
@media (max-width: 560px) {
  .rm-modal-body .nc-two-col { grid-template-columns: 1fr !important; }
  .rm-modal-body > div > div[style*="grid-template-columns:2fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
  }
}
.rm-modal-header h2 {
  font-size: 17px;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.01em;
}
.rm-modal-sub {
  font-size: 13px;
  color: var(--text-muted);
  margin: 2px 0 0;
  max-width: 600px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rm-icon-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  width: 36px;
  height: 36px;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: var(--text-muted);
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.rm-icon-btn:hover {
  background: var(--bg-alt);
  color: var(--text);
  border-color: var(--text-muted);
}
.rm-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  /* iOS safe-area: footer would otherwise sit behind the home indicator
     on edge-to-edge mobile modals, clipping the Save button. */
  padding: 14px 22px calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border);
  background: var(--bg-alt);
  position: sticky;
  bottom: 0;
  z-index: 2;
}
.rm-footer-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.rm-status {
  font-size: 13px;
  color: var(--text-muted);
}
.rm-btn {
  padding: 9px 16px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, transform 0.05s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.rm-btn:active { transform: translateY(1px); }
/* Force the modal primary button to always render with white text on a
   solid blue background. The page elsewhere defines button.primary with
   a gradient + no explicit color, so when modals appear inside contexts
   that pick up that style (e.g. inside an admin tab), the modal's "Create"
   button was rendering dark-on-dark. Use button.rm-btn-primary selector
   for higher specificity, plus an inline-style fallback as belt-and-suspenders. */
button.rm-btn.rm-btn-primary,
.rm-btn.rm-btn-primary {
  background: var(--primary, #1d4ed8) !important;
  color: #ffffff !important;
  border: 1px solid var(--primary, #1d4ed8) !important;
  background-image: none !important;
}
button.rm-btn.rm-btn-primary:hover,
.rm-btn.rm-btn-primary:hover {
  background: var(--primary-dark, #1e40af) !important;
  border-color: var(--primary-dark, #1e40af) !important;
}
button.rm-btn.rm-btn-primary:disabled,
.rm-btn.rm-btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }
.rm-btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}
.rm-btn-ghost:hover { background: var(--bg-alt); }

/* =====================================================================
   ANNOTATOR — clean toolbar with icon+label tools, options pill row
   ===================================================================== */
.anno-modal {
  max-width: 1200px;
  height: 96vh;
  /* Use dynamic viewport on iOS so the modal height accounts for the
     real visible area (excludes Safari address bar / dynamic chrome). */
  height: 96dvh;
}
.anno-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 22px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-alt);
  flex-wrap: wrap;
  /* Pin the toolbar to the top of the modal body — it was getting hidden
     behind the canvas on iOS when the photo was tall enough to push the
     toolbar out of the visible area. */
  position: sticky;
  top: 0;
  z-index: 3;
}
.anno-tool-group {
  display: flex;
  gap: 4px;
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 4px;
  border-radius: 10px;
}
.anno-tool-group.rm-utility {
  background: transparent;
  border: none;
  padding: 0;
  margin-left: auto;
}
.anno-tool {
  background: transparent;
  border: none;
  padding: 6px 10px;
  border-radius: 7px;
  cursor: pointer;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: var(--text);
  min-width: 56px;
  transition: background 0.12s, color 0.12s;
}
.anno-tool .anno-tool-icon { font-size: 18px; line-height: 1; }
.anno-tool .anno-tool-label { font-size: 11px; font-weight: 600; opacity: 0.8; }
.anno-tool:hover { background: var(--bg-alt); }
.anno-tool.active {
  background: var(--primary);
  color: #fff;
}
.anno-tool.active .anno-tool-label { opacity: 1; }
.anno-options {
  display: flex;
  gap: 14px;
  align-items: center;
}
.anno-option-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
}
.anno-option-row label {
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 10px;
}
.anno-option-row input[type="color"] {
  width: 44px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  padding: 2px;
  background: var(--bg);
}
.anno-option-row input[type="range"] {
  width: 100px;
  accent-color: var(--primary);
}
.anno-canvas-wrap {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: #1f2937;
  overflow: auto;
  /* CRITICAL on iOS: without min-height:0 the flex child can grow taller
     than the parent and shove the toolbar / footer out of view. Tall
     portrait photos triggered this — user reported the annotation tools
     were "hidden behind the photo". */
  min-height: 0;
  min-width: 0;
}
.anno-canvas-wrap canvas {
  max-width: 100%;
  max-height: 100%;
  cursor: crosshair;
  background: white;
  box-shadow: 0 12px 32px rgba(0,0,0,0.4);
  border-radius: 4px;
  touch-action: none;
}

@media (max-width: 768px) {
  /* Mobile: edge-to-edge modal that uses dynamic viewport units so iOS
     Safari's collapsing address bar doesn't clip the footer + Save
     button. The toolbar (sticky top) + safe-area-aware header/footer
     stay reachable on tall portrait photos. */
  .rm-modal { border-radius: 0; max-height: 100vh; max-height: 100dvh; height: 100dvh; }
  .anno-modal { height: 100vh; height: 100dvh; }
  .anno-toolbar { padding: 8px 12px; gap: 8px; }
  .anno-tool { min-width: 48px; padding: 4px 6px; }
  .anno-tool .anno-tool-label { font-size: 10px; }
  .anno-options { gap: 8px; }
  .anno-option-row input[type="range"] { width: 70px; }
  /* Header collapses on mobile — toolbar handles the safe-area top, the
     header just shows the title + close button. */
  .rm-modal-header { padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px; }
  .rm-modal-footer { padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); }
}

/* =====================================================================
   HOME DASHBOARD — KPIs, pipeline, calendar, recent
   ===================================================================== */
.home-kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.home-kpi {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: transform 0.15s, box-shadow 0.15s;
}
.home-kpi:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.06);
}
.home-kpi .kpi-num {
  font-size: 28px;
  font-weight: 700;
  color: var(--primary);
  line-height: 1;
}
.home-kpi .kpi-label {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.home-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 900px) {
  .home-grid { grid-template-columns: 1fr; }
}

/* Stage legend (next to pie chart) */
.stage-legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
}
.stage-legend-row:hover { background: var(--bg-alt); }
.stage-legend-dot { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
.stage-legend-name { flex: 1; font-weight: 500; }
.stage-legend-count { color: var(--text-muted); font-weight: 600; }

/* Project / customer rows on the home page */
.home-project-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.15s;
}
.home-project-row:last-child { border-bottom: none; }
.home-project-row:hover { background: var(--bg-alt); }
.home-project-row .stage-pill {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* Calendar — day blocks */
.cal-day {
  border-bottom: 1px solid var(--border);
  padding: 10px 0;
}
.cal-day:last-child { border-bottom: none; }
.cal-day-header {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
  display: flex;
  justify-content: space-between;
}
.cal-day-header .cal-day-date { color: var(--primary); }
.cal-day-task {
  display: flex;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  margin-bottom: 4px;
  font-size: 13px;
  cursor: pointer;
}
.cal-day-task:hover { background: var(--bg-alt); }
.cal-day-task .cal-task-title { flex: 1; }
.cal-day-task .cal-task-customer { font-size: 11px; color: var(--text-muted); }
.cal-day.today { background: rgba(37, 99, 235, 0.04); border-left: 3px solid var(--primary); padding-left: 10px; margin-left: -10px; }

/* ====================================================================
   QA-2026-05: consolidated mobile/responsive + tap-target fixes
   ==================================================================== */

/* P2-2: customer detail State/Zip — was inline grid that bypassed the
   global .two-col mobile breakpoint. Now responsive. */
.cd-state-zip-row {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 10px;
}
@media (max-width: 600px) {
  .cd-state-zip-row {
    grid-template-columns: 1fr 1fr;
  }
}

/* P0-1 new-customer modal: stack name fields on mobile */
@media (max-width: 600px) {
  .nc-two-col {
    grid-template-columns: 1fr !important;
  }
}

/* P2-4: bump .small button tap targets on mobile to 44px floor (iOS HIG).
   The customer-detail action row (Measure/Build/Email/Import/Delete)
   was sub-30px which is below any tap-target floor. */
@media (max-width: 768px) {
  .primary.small,
  .secondary.small,
  .danger.small {
    min-height: 44px;
    padding: 10px 14px;
    font-size: 14px;
  }
}

/* P2-1: calendar grid unusable below ~720px (7 columns × ~48px each).
   On phones we hide the grid and let the home-page upcoming-list view
   render instead. The grid is still usable on tablet portrait. */
@media (max-width: 600px) {
  .cal-grid {
    display: block;
  }
  .cal-day {
    display: block;
    margin-bottom: 10px;
    border-radius: 8px;
    background: var(--bg-alt);
  }
  .cal-day-header {
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 600;
  }
}

/* P2-3: pie chart fixed at 260×260 crowded 375px viewport. Scale down. */
@media (max-width: 500px) {
  .pipeline-pie,
  .stage-donut,
  #stageDonut {
    width: min(260px, 60vw) !important;
    height: min(260px, 60vw) !important;
  }
}

/* P2-6: team invite row grid was 1fr 130px auto which overflowed mobile.
   Stack vertically on phones. */
@media (max-width: 600px) {
  #teamMembersList + div [style*="grid-template-columns"],
  #teamInviteEmail ~ * [style*="grid-template-columns"],
  .team-invite-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
}

/* P2-13: notification panel on tablet sat over the main content.
   Make it full-width below 900px so it doesn't float orphaned. */
@media (max-width: 900px) and (min-width: 769px) {
  .notif-panel {
    right: 16px !important;
    width: calc(100vw - 32px) !important;
    max-width: 420px;
  }
}

/* P2-17: change-order line items — let mobile horizontal-scroll */
@media (max-width: 600px) {
  .change-order-items,
  [data-line-items-container] {
    overflow-x: auto;
  }
}

/* ====================================================================
   P3-7: Print stylesheet — clean one-pager for customer records
   ==================================================================== */
@media print {
  /* Hide UI chrome */
  .sidebar, .mobile-topbar, .sidebar-collapse-btn,
  .dash-tabs, .pane-header, .customer-list-pane,
  .active-customer-banner, .notif-panel, .notif-bell,
  .customer-meta-grid input + button,
  .danger, .secondary, .primary,
  #cd_measureRoof, #cd_buildEstimate, #cd_emailCustomer,
  #cd_importMeasurement, #cd_delete,
  #cd_localOnlyNotice, #cd_syncToCloud,
  .dtab, .atab, .settings-subtab,
  .rm-modal-overlay {
    display: none !important;
  }
  /* Expand every <details> so prints aren't collapsed */
  details:not([open]) summary ~ * { display: block !important; }
  details { display: block !important; }
  details summary { display: none !important; }
  /* Black on white for ink saving */
  body, .main-content, .customer-detail, .estimate-card {
    background: white !important;
    color: black !important;
    box-shadow: none !important;
  }
  /* Sidebar's grid column → full bleed */
  .app-shell { grid-template-columns: 1fr !important; }
  .main-content { padding: 0 !important; }
  /* Don't break inside a card */
  .estimate-card, .customer-detail > * { page-break-inside: avoid; }
  /* Hyperlinks shouldn't print as long URLs */
  a { color: black !important; text-decoration: none !important; }
}

/* ====================================================================
   2026-05-13 MODERN UI POLISH — refined inputs, buttons, cards, modals
   ==================================================================== */

/* Refined input styling — softer borders, focused ring, smooth transitions.
   Targets all standard inputs unless they explicitly opt out. */
.estimate-card input[type="text"],
.estimate-card input[type="email"],
.estimate-card input[type="tel"],
.estimate-card input[type="number"],
.estimate-card input[type="password"],
.estimate-card input[type="date"],
.estimate-card input[type="search"],
.estimate-card textarea,
.estimate-card select,
.settings-grid input[type="text"],
.settings-grid input[type="email"],
.settings-grid input[type="tel"],
.settings-grid input[type="password"],
.settings-grid textarea,
.settings-grid select {
  border: 1px solid #d0d7e2;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
  color: var(--text);
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.estimate-card input:focus,
.estimate-card textarea:focus,
.estimate-card select:focus,
.settings-grid input:focus,
.settings-grid textarea:focus,
.settings-grid select:focus {
  outline: none;
  border-color: var(--primary, #1d4ed8);
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.12);
  background: #fff;
}
.estimate-card input:hover:not(:focus):not(:disabled),
.estimate-card select:hover:not(:focus):not(:disabled),
.settings-grid input:hover:not(:focus):not(:disabled),
.settings-grid select:hover:not(:focus):not(:disabled) {
  border-color: #94a3b8;
}

/* ===================================================================
   DOCUMENTS — slim horizontal rows (rewritten 2026-05-31)
   Replaces the bulky icon-tile grid. Each document row is a single
   compact strip: name (click to rename) + meta + open + delete.
   =================================================================== */
/* The parent #cd_docGrid still has class .attachments-grid (CSS grid
   for the photos section). Force it to a single-column block layout
   when it contains doc-rows so the wrapper spans the full width
   instead of being squeezed into a 120px grid cell — that's what was
   making rows bleed off the right edge on mobile. */
#cd_docGrid {
  display: block;
  padding: 0;
  border: none;
  background: transparent;
}
.doc-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.doc-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
  cursor: pointer;
  min-height: 48px;
}
.doc-row:hover {
  border-color: #1d4ed8;
  box-shadow: 0 1px 4px rgba(29, 78, 216, 0.08);
}
.doc-row-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.doc-row-name {
  font-size: 13.5px;
  font-weight: 600;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: text;
  padding: 1px 0;
}
.doc-row-name:hover { text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
.doc-row-meta {
  font-size: 11px;
  color: #64748b;
  font-weight: 500;
}
.doc-row-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.doc-row-actions button.secondary.small {
  padding: 4px 10px;
  font-size: 12px;
  min-height: 30px;
}
.doc-row-actions button.danger {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
  border: none;
  border-radius: 6px;
  padding: 4px 9px;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  min-height: 30px;
  min-width: 30px;
  cursor: pointer;
}
.doc-row-actions button.danger:hover { filter: brightness(1.06); }

/* ===================================================================
   CUSTOMER PROFILE — Hero action grid (revised 2026-05-31)
   All the big features the contractor reaches for, front and center.
   Identical compact pill buttons (no icons, no subtitles) — 3 per row
   on phones, scales up on wider screens. Native-only items
   (LiDAR, AR, exterior, roof scan, gutter) live here too; on web they
   alert "iOS app only" when tapped.
   Auto-fit grid keeps them all the same size whatever the count.
   =================================================================== */
.profile-hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  margin: 12px 0 6px;
}
.hero-action {
  min-height: 50px;
  padding: 10px 12px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: white;
  background: linear-gradient(135deg, #1d4ed8, #06b6d4);
  box-shadow: 0 3px 10px -2px rgba(29, 78, 216, 0.32);
  transition: transform 0.12s ease, box-shadow 0.2s ease, filter 0.15s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}
.hero-action:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px -3px rgba(29, 78, 216, 0.4);
}
.hero-action:active { transform: translateY(0); }
.hero-action.hero-beta::after {
  /* No-op — BETA marker is in the label text itself so the badge stays
     visually consistent with the other pills. */
}
@media (max-width: 480px) {
  .profile-hero {
    grid-template-columns: repeat(auto-fit, minmax(105px, 1fr));
    gap: 7px;
  }
  .hero-action {
    font-size: 12px;
    padding: 9px 8px;
    min-height: 46px;
  }
}

/* Refined buttons — clearer hierarchy, subtle elevation.
   Updated 2026-05-31: gradient now matches the logo blue→cyan so buttons
   visually tie back to the brand identity instead of looking like generic
   bootstrap blue. Used everywhere via .primary class. */
button.primary {
  background: linear-gradient(135deg, #1d4ed8, #06b6d4);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 10px 18px;
  font-weight: 600;
  font-size: 14px;
  font-family: inherit;
  letter-spacing: -0.005em;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(29, 78, 216, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: transform 0.12s ease, box-shadow 0.2s ease, filter 0.15s ease;
}
button.primary:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(1.08);
  box-shadow: 0 6px 18px -2px rgba(29, 78, 216, 0.35);
}
button.primary:active { transform: translateY(0); }
button.primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
button.primary.small { padding: 6px 12px; font-size: 13px; border-radius: 6px; }

button.secondary {
  background: white;
  color: #1e3a8a; /* Logo-deep-blue ink so the outlined buttons read as part of the brand */
  border: 1.5px solid #1d4ed8; /* Brand blue outline — keeps the existing thickness */
  border-radius: 8px;
  padding: 10px 18px;
  font-weight: 600;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.12s ease;
}
button.secondary:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(29,78,216,0.05), rgba(6,182,212,0.05));
  border-color: #06b6d4;
  color: #0e7490;
}
button.secondary:active { transform: translateY(1px); }
button.secondary.small { padding: 6px 12px; font-size: 13px; }

button.danger {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 10px 18px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(239, 68, 68, 0.25);
  transition: filter 0.15s ease, transform 0.12s ease, box-shadow 0.2s ease;
}
button.danger:hover:not(:disabled) {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px -2px rgba(239, 68, 68, 0.35);
}
button.danger.small { padding: 6px 12px; font-size: 13px; border-radius: 6px; }

/* Refined cards — soft shadow + subtle gradient ring */
.estimate-card {
  background: white;
  border: 1px solid #e5e9f0;
  border-radius: 14px;
  padding: 20px 22px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.03);
  transition: box-shadow 0.2s ease;
}
.estimate-card:hover {
  box-shadow: 0 4px 12px -2px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.04);
}
.estimate-card h3 {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--text);
  margin: 0 0 4px;
}
.estimate-card .section-sub {
  font-size: 13px;
  color: #64748b;
  margin: 0 0 14px;
}

/* Refined labels */
.estimate-card label,
.settings-grid label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}

/* Refined tab buttons (admin + dashboard) */
.atab, .dtab, .settings-subtab {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  color: #64748b;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.atab:hover, .dtab:hover, .settings-subtab:hover {
  background: #f8fafc;
  color: var(--text);
}
.atab.active, .dtab.active, .settings-subtab.active {
  background: linear-gradient(135deg, rgba(29,78,216,0.08), rgba(6,182,212,0.06));
  border-color: rgba(29,78,216,0.18);
  color: var(--primary, #1d4ed8);
  font-weight: 600;
}

/* ====================================================================
   MULTI-SOURCE SCANNER ANIMATION
   Ported from /get-estimate.html. Plays a multi-stage scanning overlay
   on the map during roof detection — visually demonstrates that we're
   pulling data from satellite + LiDAR + footprints in parallel.
   ==================================================================== */
.scanner-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 500; }
.scanner-box {
  position: absolute;
  width: 180px; height: 180px;
  transform: translate(-50%, -50%);
  border: 2px solid #10b981;
  border-radius: 8px;
  box-shadow: 0 0 0 4px rgba(16,185,129,0.2), 0 0 24px rgba(16,185,129,0.4);
  background: linear-gradient(180deg, transparent 0%, rgba(16,185,129,0.05) 50%, transparent 100%);
  overflow: hidden;
  animation: scanner-pulse 0.4s ease-out;
}
.scanner-box::before, .scanner-box::after {
  content: ''; position: absolute; left: 0; right: 0;
  height: 3px; background: #10b981;
  box-shadow: 0 0 12px #10b981, 0 0 20px #10b981;
}
.scanner-box::before { top: 0; animation: scanner-line-top 1.6s linear infinite; }
.scanner-box::after { bottom: 0; animation: scanner-line-bot 1.6s linear infinite; }
.scanner-corner { position: absolute; width: 18px; height: 18px; border: 3px solid #10b981; }
.scanner-corner.tl { top: -2px; left: -2px; border-right: none; border-bottom: none; }
.scanner-corner.tr { top: -2px; right: -2px; border-left: none; border-bottom: none; }
.scanner-corner.bl { bottom: -2px; left: -2px; border-right: none; border-top: none; }
.scanner-corner.br { bottom: -2px; right: -2px; border-left: none; border-top: none; }
.scanner-text { position: absolute; bottom: -30px; left: 50%; transform: translateX(-50%); white-space: nowrap; background: rgba(16,185,129,0.95); color: white; padding: 4px 10px; border-radius: 4px; font-family: 'Space Grotesk', monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; transition: background 0.3s ease; }
.scanner-text.stage-lidar { background: rgba(59,130,246,0.95); }
.scanner-text.stage-footprint { background: rgba(168,85,247,0.95); }
.scanner-text.stage-merge { background: rgba(245,158,11,0.95); }
.scanner-text.stage-done { background: rgba(16,185,129,0.95); }
.scanner-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(0deg, transparent 49%, rgba(16,185,129,0.45) 50%, transparent 51%),
    linear-gradient(90deg, transparent 49%, rgba(16,185,129,0.45) 50%, transparent 51%);
  background-size: 30px 30px;
  animation: scanner-grid-pan 2.4s linear infinite;
  opacity: 0.6;
}
.scanner-datapoint { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #10b981; box-shadow: 0 0 10px #10b981; transform: translate(-50%,-50%); animation: scanner-datapoint-pop 1.2s ease-out forwards; }
@keyframes scanner-pulse { from { transform: translate(-50%,-50%) scale(0.5); opacity: 0; } to { transform: translate(-50%,-50%) scale(1); opacity: 1; } }
@keyframes scanner-line-top { 0% { transform: translateY(0); } 50% { transform: translateY(174px); } 100% { transform: translateY(0); } }
@keyframes scanner-line-bot { 0% { transform: translateY(0); } 50% { transform: translateY(-174px); } 100% { transform: translateY(0); } }
@keyframes scanner-grid-pan { from { background-position: 0 0; } to { background-position: 30px 30px; } }
@keyframes scanner-datapoint-pop { 0% { transform: translate(-50%,-50%) scale(0); opacity: 0; } 25% { transform: translate(-50%,-50%) scale(1.4); opacity: 1; } 100% { transform: translate(-50%,-50%) scale(1); opacity: 0.85; } }

/* ── Manual roof facet builder ─────────────────────────────────────────────
   Per-facet pitch prompt shown after each polygon is drawn, plus the on-map
   facet labels (e.g. "F2 · 6/12"). */
.facet-pitch-overlay {
  position: fixed; inset: 0; z-index: 12000;
  background: rgba(10, 22, 51, 0.55);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.facet-pitch-card {
  background: var(--surface, #fff); border-radius: 14px; padding: 22px;
  width: 100%; max-width: 360px; box-shadow: 0 20px 50px rgba(0,0,0,0.3);
}
.facet-pitch-card h3 { margin: 0 0 4px; font-size: 18px; color: var(--text, #0f172a); }
.facet-pitch-card p { margin: 0 0 14px; font-size: 13px; color: var(--text-muted, #64748b); }
.facet-pitch-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 14px; }
.facet-pitch-grid button {
  padding: 12px 0; min-height: 44px; border: 1px solid var(--border, #e2e8f0);
  background: var(--bg-alt, #f8fafc); border-radius: 8px; font-size: 14px; font-weight: 700;
  cursor: pointer; color: var(--text, #0f172a);
}
.facet-pitch-grid button:hover, .facet-pitch-grid button:active {
  border-color: #f97316; background: #fff7ed; color: #c2410c;
}
.facet-pitch-custom { display: flex; gap: 8px; margin-bottom: 12px; }
.facet-pitch-custom input {
  flex: 1; min-width: 0; padding: 10px; border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px; font-size: 14px;
}
.facet-skip { width: 100%; background: transparent; border: none; color: var(--text-muted, #64748b); font-size: 13px; cursor: pointer; padding: 6px; }
.leaflet-tooltip.facet-label {
  background: rgba(16,185,129,0.92); color: #fff; border: none; border-radius: 6px;
  font-weight: 700; font-size: 12px; padding: 2px 7px; box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
.leaflet-tooltip.facet-label::before { display: none; }

/* ── Roof edge labeling palette + on-map helper ────────────────────────────*/
/* We drive drawing with our own buttons, so hide Leaflet.draw's create icons
   (the square/polygon buttons) — the user taps corners, not a shape tool. */
.leaflet-draw-draw-polygon, .leaflet-draw-draw-rectangle,
.leaflet-draw-draw-polyline, .leaflet-draw-draw-marker,
.leaflet-draw-draw-circle, .leaflet-draw-draw-circlemarker { display: none !important; }
.leaflet-draw-section:has(.leaflet-draw-toolbar-top:empty) { display: none; }

.draw-helper {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  max-width: min(92%, 460px); z-index: 1100;
  background: rgba(15,23,42,0.92); color: #fff; border-radius: 10px;
  padding: 11px 14px; font-size: 13px; line-height: 1.35; font-weight: 500;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3); display: flex; gap: 9px; align-items: flex-start;
}
.draw-helper-dot {
  flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; margin-top: 4px;
  background: #f97316; box-shadow: 0 0 0 4px rgba(249,115,22,0.25);
  animation: drawHelperPulse 1.4s ease-in-out infinite;
}
@keyframes drawHelperPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

.edge-palette {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  width: min(94%, 520px); z-index: 1100;
  background: var(--surface, #fff); border-radius: 14px; padding: 12px 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.28);
}
.edge-palette-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.edge-palette-head strong { font-size: 15px; color: var(--text, #0f172a); }
.edge-done {
  background: #10b981; color: #fff; border: none; border-radius: 8px;
  padding: 8px 16px; font-size: 13px; font-weight: 700; cursor: pointer; min-height: 40px;
}
.edge-types { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
.edge-type-btn {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  border: 2px solid var(--border, #e2e8f0); background: var(--bg-alt, #f8fafc);
  border-radius: 9px; padding: 9px 4px; cursor: pointer; min-height: 56px;
  font-size: 12px; font-weight: 700; color: var(--text, #0f172a);
}
.edge-type-btn .edge-swatch { width: 22px; height: 5px; border-radius: 3px; background: var(--ec); }
.edge-type-btn .edge-amt { font-size: 10px; font-weight: 600; color: var(--text-muted, #64748b); }
.edge-type-btn.active { border-color: var(--ec); background: color-mix(in srgb, var(--ec) 12%, white); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ec) 22%, transparent); }
.edge-summary { margin-top: 10px; font-size: 12px; color: var(--text-muted, #64748b); line-height: 1.5; }
.edge-summary strong { color: var(--text, #0f172a); }
.edge-warn { color: #d97706; font-weight: 600; }
.edge-ok { color: #10b981; font-weight: 600; }
.roof-edge-line { cursor: pointer; }

/* Always-visible manual-trace entry button + its help dialog. */
.trace-roof-btn {
  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
  background: #f97316; color: #fff; border: none; border-radius: 10px;
  padding: 12px 20px; font-size: 14px; font-weight: 700; cursor: pointer;
  box-shadow: 0 6px 20px rgba(249,115,22,0.4); z-index: 1050; font-family: inherit;
  min-height: 46px;
}
.trace-help-overlay {
  position: fixed; inset: 0; z-index: 12000; background: rgba(10,22,51,0.55);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.trace-help-card {
  background: var(--surface, #fff); border-radius: 14px; padding: 22px;
  width: 100%; max-width: 380px; box-shadow: 0 20px 50px rgba(0,0,0,0.3);
}
.trace-help-card h3 { margin: 0 0 12px; font-size: 18px; color: var(--text, #0f172a); }
.trace-help-card ol { margin: 0 0 12px; padding-left: 20px; }
.trace-help-card li { font-size: 14px; line-height: 1.5; color: var(--text, #0f172a); margin-bottom: 6px; }
.trace-help-tip { font-size: 13px; color: var(--text-muted, #64748b); background: var(--bg-alt, #f8fafc); border-radius: 8px; padding: 10px 12px; margin: 0 0 16px; }
.trace-help-card button.primary { width: 100%; min-height: 48px; font-size: 15px; }

/* Roof sketch tool — phase control panel docked at the bottom of the map. */
.sketch-panel {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  width: min(94%, 540px); z-index: 1100;
  background: var(--surface, #fff); border-radius: 14px; padding: 12px 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.28);
}
.sketch-panel .sk-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.sketch-panel .sk-row strong { font-size: 15px; color: var(--text, #0f172a); }
.sketch-panel .sk-sub { font-size: 12px; color: var(--text-muted, #64748b); text-align: right; }
.sketch-panel .sk-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.sketch-panel .sk-go {
  flex: 1 1 auto; background: #6366f1; color: #fff; border: none; border-radius: 9px;
  padding: 11px 14px; font-size: 13px; font-weight: 700; cursor: pointer; min-height: 44px;
}
.sketch-panel .sk-ghost {
  background: var(--bg-alt, #f8fafc); color: var(--text-muted, #64748b);
  border: 1px solid var(--border, #e2e8f0); border-radius: 9px;
  padding: 11px 14px; font-size: 13px; font-weight: 600; cursor: pointer; min-height: 44px;
}
/* Precise crosshair while sketching so corners are easy to hit (the default
   Leaflet grab/hand made it hard to land exactly on a corner). */
#map.sketch-cursor,
#map.sketch-cursor .leaflet-grab,
#map.sketch-cursor .leaflet-interactive,
#map.sketch-cursor .leaflet-container { cursor: crosshair !important; }

/* Compact the sketch panel on phones so it doesn't cover the roof. */
@media (max-width: 600px) {
  .sketch-panel { width: 96%; bottom: 8px; padding: 8px 10px; border-radius: 11px; }
  .sketch-panel .sk-row { margin-bottom: 7px; gap: 6px; }
  .sketch-panel .sk-row strong { font-size: 13px; }
  .sketch-panel .sk-sub { font-size: 10.5px; line-height: 1.25; }
  .sketch-panel .sk-btns { gap: 6px; }
  .sketch-panel .sk-go, .sketch-panel .sk-ghost { padding: 9px 10px; font-size: 12px; min-height: 40px; }
  .sketch-panel .edge-types { gap: 4px; }
  .sketch-panel .edge-type-btn { padding: 6px 2px; font-size: 10.5px; min-height: 48px; }
  .sketch-panel .edge-summary { font-size: 11px; margin-top: 7px; }
}

@media (max-width: 520px) {
  .edge-types { grid-template-columns: repeat(5, 1fr); gap: 4px; }
  .edge-type-btn { padding: 8px 2px; font-size: 11px; }
}