/* ============================================================
   AMREP Quote Workspace — Brand Edition
   Fonts:   Oswald (headings/labels) + Montserrat (body)
   Palette: AMREP Orange #f45423 · Red #ca1f30 · Navy #1a2236
   Hero bg: amrepproducts.com home-hero-bg-V3_0.jpg
   Zero functional changes — CSS only.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Oswald:wght@400;500;600;700&display=swap');

/* ── Design tokens ─────────────────────────────────────────── */
:root {
  /* AMREP brand palette */
  --orange:       #f45423;
  --orange-hover: #d93e12;
  --orange-light: rgba(244,84,35,0.12);
  --orange-glow:  rgba(244,84,35,0.25);
  --orange-border:#f88d6c;
  --red:          #ca1f30;
  --red-dark:     #9e1624;

  /* Navy + surfaces */
  --navy:         #14233a;
  --navy-deep:    #0f1d31;
  --navy-mid:     #233754;
  --navy-light:   #2d4668;
  --card:         #344a69;
  --card-2:       #3e5779;
  --card-3:       #4a6790;
  --glass:        rgba(15,22,35,0.88);
  --glass-border: rgba(255,255,255,0.07);

  /* Text */
  --text:         #edf0f7;
  --text-2:       #a8b5cc;
  --text-3:       #6a7f9c;
  --muted:        #4a5f7a;

  /* Lines */
  --line:         rgba(244,84,35,0.14);
  --line-2:       rgba(168,181,204,0.12);
  --line-strong:  rgba(244,84,35,0.28);

  /* Semantic */
  --danger:       #f87171;
  --danger-bg:    rgba(248,113,113,0.12);
  --success:      #4ade80;
  --success-bg:   rgba(74,222,128,0.12);
  --warning:      #fbbf24;
  --warning-bg:   rgba(251,191,36,0.1);

  /* Shadows */
  --shadow-sm:    0 1px 4px rgba(0,0,0,0.5);
  --shadow:       0 4px 20px rgba(0,0,0,0.55), 0 1px 4px rgba(0,0,0,0.35);
  --shadow-lg:    0 16px 60px rgba(0,0,0,0.7), 0 4px 16px rgba(0,0,0,0.45);
  --shadow-brand: 0 4px 22px rgba(244,84,35,0.4), 0 2px 8px rgba(244,84,35,0.2);

  /* Geometry */
  --r-xs:  3px;
  --r-sm:  5px;
  --r:     8px;
  --r-lg:  12px;
  --r-xl:  18px;
  --r-2xl: 24px;
  --r-pill:999px;

  /* Rail */
  --rail-w:   230px;
  --topbar-h: 104px;
  --header-rule-h: 2px;

  /* Motion */
  --ease:  cubic-bezier(0.22, 1, 0.36, 1);
  --dur:   0.15s;

  /* Fonts */
  --font-head: 'Oswald', Impact, sans-serif;
  --font-body: 'Montserrat', Arial, sans-serif;
}

/* Light mode (when NOT dark-mode class) */
body:not(.dark-mode) {
  --navy:       #14233a;
  --navy-deep:  #0f1d31;
  --navy-mid:   #233754;
  --navy-light: #2d4668;
  --card:       #ffffff;
  --card-2:     #f5f7fb;
  --card-3:     #eaf0f9;
  --glass:      rgba(20,35,58,0.94);
  --glass-border: rgba(255,255,255,0.08);

  --text:       #111827;
  --text-2:     #374151;
  --text-3:     #6b7280;
  --muted:      #9ca3af;

  --line:         rgba(244,84,35,0.12);
  --line-2:       rgba(55,65,81,0.12);
  --line-strong:  rgba(244,84,35,0.22);

  --shadow-sm:  0 1px 3px rgba(15,23,42,0.08);
  --shadow:     0 4px 16px rgba(15,23,42,0.1), 0 1px 4px rgba(15,23,42,0.06);
  --shadow-lg:  0 12px 40px rgba(15,23,42,0.14), 0 4px 12px rgba(15,23,42,0.08);
  --shadow-brand: 0 4px 18px rgba(244,84,35,0.32);
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { margin: 0; padding: 0; scroll-behavior: smooth; font-size: 15px; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text);
  background: #1a2236;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Ambient background: subtle noise texture using repeating gradient */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 50% at 15% 0%,  rgba(244,84,35,0.10) 0%, transparent 55%),
    radial-gradient(ellipse 60% 45% at 90% 10%, rgba(202,31,48,0.07)  0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 50% 100%,rgba(74,102,142,0.24)   0%, transparent 60%);
}
body:not(.dark-mode)::before {
  background:
    radial-gradient(ellipse 80% 50% at 15% 0%,  rgba(244,84,35,0.06) 0%, transparent 55%),
    radial-gradient(ellipse 60% 45% at 90% 10%, rgba(202,31,48,0.04)  0%, transparent 50%);
}

h1, h2, h3, h4 { margin: 0; line-height: 1.2; }
h1 { font-family: var(--font-head); font-size: 1.5rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
h2 { font-family: var(--font-head); font-size: 1.05rem; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; }
h3 { font-family: var(--font-head); font-size: 0.9rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; }
h4 { font-family: var(--font-head); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; }

/* ── Typography helpers ─────────────────────────────────────── */
.eyebrow {
  margin: 0 0 1px;
  font-family: var(--font-head);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange);
  font-weight: 400;
}
.muted  { color: var(--text-3); }
.small  { font-size: 0.78rem; }
.error  { color: var(--danger); font-weight: 600; margin: 6px 0; font-size: 0.82rem; }

/* ── Top navigation bar ─────────────────────────────────────── */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  height: var(--topbar-h);
  min-height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 24px 8px calc(var(--rail-w) + 24px);
  background: rgba(15, 22, 35, 0.92);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: var(--header-rule-h) solid var(--orange);
  box-shadow: 0 2px 0 rgba(244,84,35,0.15), 0 4px 20px rgba(0,0,0,0.4);
}
body:not(.dark-mode) .topbar {
  background: rgba(15, 22, 35, 0.92);
  border-bottom: var(--header-rule-h) solid var(--orange);
  box-shadow: 0 2px 0 rgba(244,84,35,0.2), 0 2px 12px rgba(0,0,0,0.35);
}

/* Logo locked into top-left of rail */
.brand-logo {
  position: fixed;
  left: 10px;
  top: 8px;
  width: 210px;
  height: 72px;
  object-fit: contain;
  object-position: left center;
  padding: 0;
  background: transparent;
  border: none;
  z-index: 201;
  display: block;
  flex-shrink: 0;
  overflow: visible;
}
body:not(.dark-mode) .brand-logo {
  background: transparent;
}

.topbar > div:nth-child(2) {
  display: flex; flex-direction: column; gap: 0; line-height: 1.02;
}
.topbar > div:nth-child(2) h1 {
  font-size: 1.05rem; font-weight: 500;
  color: var(--text);
  letter-spacing: 0.08em;
  line-height: 1.1;
}
body:not(.dark-mode) .topbar > div:nth-child(2) h1 { color: #ffffff; }

body:not(.dark-mode) #authState {
  color: rgba(230, 235, 248, 0.9);
}

.auth-box { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.auth-meta-row { display: flex; align-items: center; justify-content: flex-end; width: 100%; }
#authState { font-size: 0.73rem; font-weight: 500; color: rgba(230, 235, 248, 0.9); font-family: var(--font-body); max-width: 520px; overflow-wrap: anywhere; word-break: break-word; }
.auth-actions { display: flex; align-items: center; gap: 6px; }
.active-user-bubbles {
  display: inline-flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 5px;
  max-width: 280px;
  overflow: hidden;
}
.active-user-bubble {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--card-2);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: var(--shadow-sm);
  flex: 0 0 auto;
}
body.dark-mode .active-user-bubble {
  background: #3a557a;
  color: #ffffff;
  border-color: rgba(255,255,255,0.35);
}

.inbox-btn { position: relative; padding: 7px 10px; min-width: 36px; }
.inbox-icon { font-size: 1rem; line-height: 1; }
.inbox-badge {
  position: absolute; top: -3px; right: -3px;
  min-width: 17px; height: 17px; padding: 0 3px;
  border-radius: var(--r-pill);
  background: var(--orange);
  color: #fff; font-size: 9px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 2px var(--card), var(--shadow-brand);
}

/* ── Layout shell ───────────────────────────────────────────── */
.layout {
  position: relative;
  z-index: 1;
  padding-top: calc(var(--topbar-h) + var(--header-rule-h));
  display: flex;
  min-height: 100vh;
}

/* ── Left rail ──────────────────────────────────────────────── */
.workspace-tabs {
  position: fixed;
  top: calc(var(--topbar-h) + var(--header-rule-h)); left: 0; bottom: 0;
  width: var(--rail-w);
  z-index: 150;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow-y: auto; overflow-x: hidden;

  /* Self-hosted-safe background (no external image dependency) */
  background-image:
    url('assets/home-hero-bg-V3_0.jpg');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}
/* Dark overlay on the hero background so text is readable */
.workspace-tabs::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 15, 30, 0.88) 0%, rgba(15, 22, 40, 0.92) 40%, rgba(10, 14, 28, 0.96) 100%);
  z-index: 0;
}
/* Everything inside rail sits above the overlay */
.workspace-tabs > * { position: relative; z-index: 1; }
.workspace-tabs.tab-row { margin-bottom: 0; }

/* Orange top stripe */
.workspace-tabs::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--orange);
  z-index: 2;
  box-shadow: 0 0 12px var(--orange-glow);
  display: none;
}

/* Rail section labels */
.rail-section-label {
  font-family: var(--font-head);
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange);
  padding: 18px 16px 6px;
  border-bottom: 1px solid rgba(244,84,35,0.18);
  margin-bottom: 4px;
}
.rail-section-label:first-child { padding-top: 14px; }

/* Truck accent image at bottom of rail */
.rail-truck {
  display: none;
}
.rail-truck img {
  width: 100%;
  height: auto;
  display: block;
  filter: brightness(0.9) saturate(0.8);
}

/* Tab buttons */
.tab-btn {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  border: none !important;
  border-left: 3px solid transparent;
  border-radius: 0;
  padding: 10px 16px 10px 22px;
  font-family: var(--font-head);
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(230, 235, 248, 0.75);
  background: transparent;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  text-align: left;
  min-height: 40px;
  margin: 0;
}
.tab-link-btn {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  border: none !important;
  border-left: 3px solid transparent;
  border-radius: 0;
  padding: 10px 16px 10px 22px;
  font-family: var(--font-head);
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(230, 235, 248, 0.75);
  background: transparent;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  text-align: left;
  min-height: 40px;
  margin: 0;
  text-decoration: none;
}
.tab-btn .tab-icon {
  font-size: 0.85rem;
  width: 18px;
  text-align: center;
  flex-shrink: 0;
  line-height: 1;
  opacity: 0.7;
}
.tab-link-btn .tab-icon {
  font-size: 0.85rem;
  width: 18px;
  text-align: center;
  flex-shrink: 0;
  line-height: 1;
  opacity: 0.85;
  color: var(--orange);
}
.tab-btn .tab-label { flex: 1; font-size: 0.8rem; }
.tab-link-btn .tab-label { flex: 1; font-size: 0.8rem; }
.tab-btn:hover {
  color: #fff;
  background: var(--orange-light);
  border-left-color: rgba(244,84,35,0.55);
}
.tab-link-btn:hover {
  color: #fff;
  background: var(--orange-light);
  border-left-color: rgba(244,84,35,0.55);
}
.tab-btn:hover .tab-icon { opacity: 1; }
.tab-link-btn:hover .tab-icon { opacity: 1; }
.tab-btn.active {
  color: #fff;
  background: var(--orange-light);
  border-left-color: rgba(244,84,35,0.55);
  font-weight: 500;
}
.tab-btn.active .tab-icon { opacity: 1; color: var(--orange); }
.workspace-tabs .tab-icon { color: var(--orange); }
.rail-submenu {
  display: flex;
  flex-direction: column;
  margin: 0 0 6px 0;
  padding-left: 18px;
  border-left: 1px solid rgba(244,84,35,0.25);
  margin-left: 16px;
}
.rail-submenu[hidden] { display: none !important; }
.tab-sub-btn {
  min-height: 34px;
  width: calc(100% - 10px);
  margin-left: 8px;
  padding: 8px 14px 8px 20px;
  font-size: 0.72rem;
  letter-spacing: 0.07em;
}
.tab-sub-btn .tab-icon {
  font-size: 0.72rem;
  opacity: 0.8;
}

/* Improve contrast for orange accents on dark backgrounds */
.workspace-tabs .step-chip.active,
.workspace-tabs .finance-title,
.workspace-tabs .preview-box h3,
.workspace-tabs .verbiage-block h4,
.workspace-tabs .warranty-block h4,
.workspace-tabs .notes-block h4 {
  color: #ffffff;
}

.bt-view {
  margin-top: 12px;
  border: none;
  padding: 0;
  background: transparent;
}

.comp-view {
  margin-top: 12px;
}
.comp-workspace {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 14px;
  min-height: 720px;
}
.comp-sidebar {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.comp-section {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: 14px;
}
.comp-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.comp-section-head h3 {
  font-size: 0.8rem;
}
.comp-btn-row {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.comp-mini-btn {
  flex: 1;
  min-height: 34px;
  font-size: 0.72rem;
  padding: 8px 10px;
}
.comp-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--r);
  cursor: pointer;
  margin-bottom: 4px;
  border: 1px solid transparent;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.comp-item:hover {
  background: var(--card-2);
}
.comp-item.active {
  background: color-mix(in srgb, var(--orange) 10%, var(--card));
  border-color: var(--line-strong);
}
.comp-item.inactive {
  opacity: 0.45;
}
.comp-swatch {
  width: 13px;
  height: 13px;
  border-radius: 3px;
  flex-shrink: 0;
  border: 2px solid rgba(255,255,255,0.15);
}
body:not(.dark-mode) .comp-swatch {
  border-color: rgba(17,24,39,0.12);
}
.comp-name {
  display: block;
  color: var(--text);
  font-size: 0.82rem;
  line-height: 1.3;
}
.comp-meta {
  display: block;
  color: var(--text-3);
  font-size: 0.68rem;
  margin-top: 2px;
}
.comp-legend-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  color: var(--text-2);
  font-size: 0.78rem;
}
.comp-legend-icon {
  width: 18px;
  text-align: center;
  color: var(--orange);
}
.comp-amrep-mark {
  color: #c0392b;
}
.comp-help-copy {
  margin-top: 10px;
}
.comp-stats-table,
.comp-eref-table {
  width: 100%;
  border-collapse: collapse;
}
.comp-stats-table th,
.comp-stats-table td,
.comp-eref-table th,
.comp-eref-table td {
  padding: 6px 4px;
  border-bottom: 1px solid var(--line-2);
  font-size: 0.72rem;
}
.comp-stats-table th,
.comp-eref-table th {
  text-align: left;
  color: var(--text-3);
  font-family: var(--font-head);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.62rem;
}
.comp-stats-table td.sval,
.comp-stats-table td.sval2,
.comp-eref-table td.right,
.comp-eref-table th.right {
  text-align: right;
}
.comp-stats-table td.sval { color: #22c55e; font-weight: 700; }
.comp-stats-table td.sval2 { color: #f59e0b; }
.comp-filter-label {
  display: block;
  margin: 8px 0 6px;
  color: var(--text-3);
  font-family: var(--font-head);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.comp-toggle-btn {
  width: 100%;
  background: var(--card-2);
  border: 1px solid var(--line-2);
  color: var(--text-2);
  padding: 8px 10px;
  border-radius: var(--r);
  cursor: pointer;
  font-family: var(--font-body);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.comp-toggle-btn:hover,
.comp-toggle-btn.active {
  background: color-mix(in srgb, var(--orange) 12%, var(--card));
  border-color: var(--line-strong);
  color: var(--text);
}
.comp-eref-controls {
  display: none;
  margin-top: 10px;
}
.comp-eref-controls.visible {
  display: block;
}
.comp-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pill {
  background: var(--card-2);
  border: 1px solid var(--line-2);
  color: var(--text-2);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.68rem;
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.pill:hover,
.pill.active {
  background: color-mix(in srgb, var(--orange) 12%, var(--card));
  border-color: var(--line-strong);
  color: var(--text);
}
.comp-map-shell {
  position: relative;
  min-height: 720px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background:
    radial-gradient(ellipse at center, rgba(20,35,58,0.92) 0%, rgba(15,29,49,1) 100%);
}
body:not(.dark-mode) .comp-map-shell {
  background: linear-gradient(160deg, #d8e8f4 0%, #c0d4ec 100%);
}
#compMap {
  width: 100%;
  height: 100%;
  display: block;
  min-height: 720px;
}
.comp-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--text-3);
  font-size: 0.9rem;
  z-index: 2;
}
.comp-map-note {
  position: absolute;
  left: 14px;
  bottom: 12px;
  color: rgba(255,255,255,0.55);
  font-size: 0.66rem;
  z-index: 2;
  pointer-events: none;
}
body:not(.dark-mode) .comp-map-note {
  color: rgba(20,35,58,0.55);
}
.comp-tooltip {
  position: absolute;
  z-index: 10;
  max-width: 270px;
  background: var(--card);
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--orange);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  color: var(--text);
  padding: 10px 12px;
  font-size: 0.75rem;
  line-height: 1.5;
  pointer-events: none;
}
.comp-tooltip.hidden {
  display: none;
}
.tt-title {
  font-weight: 700;
  margin-bottom: 7px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--line-2);
}
.tt-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 3px;
}
.tt-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 4px;
}
.tt-muted,
.tt-label {
  color: var(--text-3);
}
.tt-label {
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 7px 0 3px;
}
.comp-zoom-controls {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 2;
}
.comp-zoom-btn,
.comp-zoom-level {
  width: 40px;
  min-height: 36px;
  border-radius: var(--r);
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(20,35,58,0.86);
  color: #d5deeb;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
}
.comp-zoom-btn {
  cursor: pointer;
  font-size: 1.05rem;
}
.comp-zoom-btn.reset {
  font-size: 0.72rem;
  width: 54px;
}
.comp-zoom-level {
  width: 54px;
  min-height: 28px;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
}
body:not(.dark-mode) .comp-zoom-btn,
body:not(.dark-mode) .comp-zoom-level {
  background: rgba(255,255,255,0.92);
  border-color: rgba(17,24,39,0.12);
  color: #14233a;
}
.state-base {
  cursor: pointer;
  fill: #1a2840;
  stroke: #0a1220;
  stroke-width: 0.6;
}
.state-border,
.state-coverage {
  pointer-events: none;
}
.state-border {
  fill: none;
  stroke: #0a1220;
  stroke-width: 0.8;
}
.state-base:hover {
  fill: #22384f;
}
body:not(.dark-mode) .state-base {
  fill: #c0d4e8;
  stroke: #9ab4cc;
}
body:not(.dark-mode) .state-base:hover {
  fill: #a8c0dc;
}
body:not(.dark-mode) .state-border {
  stroke: #7090ae;
}
.eref-bubble-group {
  pointer-events: all;
}
.eref-bubble-group circle {
  transition: r 0.35s cubic-bezier(0.34,1.3,0.64,1), fill-opacity 0.25s;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.55));
}
.eref-bubble-group:hover circle {
  fill-opacity: 0.55 !important;
}
.eref-bubble-group text {
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}

@media (max-width: 1180px) {
  .comp-workspace {
    grid-template-columns: 1fr;
  }
  .comp-map-shell,
  #compMap {
    min-height: 580px;
  }
}

.comp-channel-shell {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.comp-channel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 4px 2px 0;
}
.comp-channel-header h3 {
  font-size: 1rem;
}
.comp-channel-tabs {
  display: flex;
  gap: 2px;
  padding: 4px;
  background: var(--card-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
}
.comp-channel-tab {
  flex: 1;
  min-height: 38px;
  border: 1px solid transparent;
  border-radius: calc(var(--r) - 2px);
  background: transparent;
  color: var(--text-3);
  font-family: var(--font-head);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.comp-channel-tab:hover {
  color: var(--text);
}
.comp-channel-tab.active {
  background: var(--card);
  color: var(--text);
  border-color: var(--line);
  box-shadow: var(--shadow-sm);
}
.comp-channel-panel {
  display: none;
}
.comp-channel-panel.active {
  display: block;
}
.comp-channel-tooltip {
  position: fixed;
  display: none;
  max-width: 300px;
  background: rgba(15, 22, 35, 0.96);
  color: #fff;
  padding: 10px 14px;
  border-radius: var(--r);
  font-size: 0.75rem;
  line-height: 1.5;
  pointer-events: none;
  z-index: 300;
  box-shadow: var(--shadow-lg);
}
body:not(.dark-mode) .comp-channel-tooltip {
  background: rgba(20,35,58,0.96);
}
.comp-channel-bar-chart {
  max-height: 600px;
  overflow-y: auto;
}
.comp-channel-bubble-container {
  position: relative;
  width: 100%;
  height: 500px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.comp-channel-bubble-canvas {
  width: 100%;
  height: 100%;
  display: block;
}
.comp-cheat-shell {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.comp-cheat-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 4px 2px 0;
}
.comp-cheat-header h3 {
  font-size: 1rem;
}
.comp-cheat-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.comp-cheat-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.comp-cheat-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.comp-cheat-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--line);
}
.comp-cheat-card-head h4 {
  margin: 0;
  font-size: 0.92rem;
}
.comp-cheat-card-body {
  padding: 14px 16px 16px;
}
.comp-cheat-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.comp-cheat-tag {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--orange) 14%, var(--card));
  border: 1px solid color-mix(in srgb, var(--orange) 35%, var(--line));
  color: var(--text);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.comp-cheat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}
.comp-cheat-point {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--card-2);
}
.comp-cheat-point h5 {
  margin: 0 0 8px;
  font-size: 0.82rem;
}
.comp-cheat-point p,
.comp-cheat-card-body p {
  margin: 0;
  color: var(--text-2);
  line-height: 1.55;
}
.comp-cheat-compare {
  display: grid;
  gap: 10px;
}
.comp-cheat-compare-block {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.comp-cheat-compare-block.amrep {
  background: color-mix(in srgb, var(--orange) 8%, var(--card));
}
.comp-cheat-compare-block.other {
  background: var(--card-2);
}
.comp-cheat-compare-label {
  display: inline-block;
  margin-bottom: 6px;
  font-family: var(--font-head);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}
.comp-cheat-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 18px;
  color: var(--text-2);
}
.comp-cheat-list li {
  line-height: 1.5;
}
.comp-cheat-products {
  color: var(--text-3);
  font-size: 0.78rem;
  line-height: 1.5;
}
.comp-cheat-objection {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--card);
}
.comp-cheat-objection strong {
  color: var(--text);
}
.comp-cheat-empty {
  padding: 36px 24px;
  text-align: center;
  color: var(--text-3);
  border: 1px dashed var(--line);
  border-radius: var(--r);
  background: var(--card-2);
}
.bt-reference-shell {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.bt-reference-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 4px 2px 0;
}
.bt-reference-header h3 {
  font-size: 1rem;
}
.bt-reference-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
}
.bt-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}
.bt-dashboard-card .comp-cheat-card-body,
.bt-reference-group .comp-cheat-card-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.bt-dashboard-links,
.bt-inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.bt-filter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.bt-filter-tabs {
  margin-bottom: 0;
}
.bt-reference-filter.active {
  background: color-mix(in srgb, var(--orange) 12%, var(--card));
  border-color: var(--orange);
  color: var(--orange);
}
.bt-reference-table th,
.bt-reference-table td {
  vertical-align: top;
}
.bt-reference-table td {
  white-space: normal;
  line-height: 1.45;
}
.bt-mat-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 116px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--card-2);
}
.bt-mat-stat strong {
  font-family: var(--font-head);
  font-size: 1.2rem;
  line-height: 1.1;
  color: var(--text);
}
.bt-mat-stat-label {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}
.bt-mat-stat-meta {
  color: var(--text-2);
  line-height: 1.45;
}
.bt-reference-table .bt-mat-row-active td {
  background: color-mix(in srgb, var(--orange) 10%, var(--card));
  font-weight: 600;
}
.bt-cipher-card .comp-cheat-card-body {
  gap: 16px;
}
.bt-cipher-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
}
.bt-cipher-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--card-2);
}
.bt-cipher-examples {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.bt-cipher-examples .btn {
  min-height: 34px;
  padding: 7px 10px;
}
.bt-cipher-result {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 142px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--card);
}
.bt-cipher-built {
  min-height: 130px;
}
.bt-cipher-model {
  font-family: var(--font-head);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  word-break: break-word;
}
.bt-cipher-token-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.bt-cipher-token {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 6px 9px;
  border: 1px solid color-mix(in srgb, var(--orange) 30%, var(--line));
  border-radius: 7px;
  background: color-mix(in srgb, var(--orange) 8%, var(--card));
  color: var(--text-2);
  font-size: 0.82rem;
  line-height: 1.2;
}
.bt-cipher-token strong {
  color: var(--orange);
  font-family: var(--font-head);
  font-size: 0.82rem;
}
.bt-cipher-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
  margin: 0;
}
.bt-cipher-facts div {
  display: grid;
  gap: 3px;
}
.bt-cipher-facts dt {
  color: var(--text-3);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.bt-cipher-facts dd {
  margin: 0;
  color: var(--text-2);
  line-height: 1.35;
}
.bt-cipher-warnings {
  display: grid;
  gap: 4px;
  color: var(--danger);
  font-size: 0.82rem;
}
.bt-cipher-empty {
  color: var(--text-3);
}
.bt-cipher-disabled {
  opacity: 0.65;
}
.bt-cipher-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.bt-cipher-legend span {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  min-height: 28px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--card-2);
  color: var(--text-2);
  font-size: 0.8rem;
}
.bt-cipher-legend strong {
  color: var(--text);
}
.comp-channel-shell .kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.comp-channel-shell .kpi {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 16px;
}
.comp-channel-shell .kpi .label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
  margin-bottom: 4px;
}
.comp-channel-shell .kpi .value {
  font-family: var(--font-head);
  font-size: 1.5rem;
  line-height: 1;
}
.comp-channel-shell .kpi .delta {
  font-size: 0.76rem;
  margin-top: 6px;
  color: var(--text-3);
}
.comp-channel-shell .filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  align-items: center;
}
.comp-channel-shell .filters label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.76rem;
  color: var(--text-3);
}
.comp-channel-shell .filters select,
.comp-channel-shell .filters input {
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 0.78rem;
  background: var(--card);
  color: var(--text);
}
.comp-channel-shell .legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 10px;
  font-size: 0.76rem;
  color: var(--text-3);
}
.comp-channel-shell .legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.comp-channel-shell .legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.comp-channel-shell .coverage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 6px;
}
.comp-channel-shell .state-tile {
  border-radius: 6px;
  padding: 8px;
  text-align: center;
  font-size: 0.68rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  border: 2px solid transparent;
  box-shadow: var(--shadow-sm);
}
.comp-channel-shell .state-tile:hover {
  transform: scale(1.06);
  box-shadow: var(--shadow-md);
  z-index: 2;
}
.comp-channel-shell .state-tile .ab {
  font-family: var(--font-head);
  font-size: 0.95rem;
  line-height: 1;
}
.comp-channel-shell .state-tile .info {
  font-size: 0.58rem;
  opacity: 0.85;
  margin-top: 4px;
  word-break: break-word;
}
.comp-channel-shell .scroll-table {
  max-height: 520px;
  overflow-y: auto;
}
.comp-channel-shell .empty-state {
  text-align: center;
  padding: 40px;
  color: var(--text-3);
}
.comp-channel-shell .badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  white-space: nowrap;
}
.comp-channel-shell .badge-direct {
  background: #dbeafe;
  color: #1d4ed8;
}
.comp-channel-shell .badge-dealer {
  background: #fef3c7;
  color: #92400e;
}
.comp-channel-shell .badge-noone {
  background: #fee2e2;
  color: #991b1b;
}
.comp-channel-shell .badge-named {
  background: #e0e7ff;
  color: #4338ca;
}
.comp-channel-shell .badge-change {
  background: #fef3c7;
  color: #92400e;
}
.comp-channel-shell .badge-nochange {
  background: #d1fae5;
  color: #065f46;
}
.comp-channel-shell .badge-deprioritize {
  background: #f3f4f6;
  color: #6b7280;
}
.comp-channel-shell .change-arrow {
  color: #d97706;
  font-weight: 700;
}
.comp-channel-shell table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.76rem;
}
.comp-channel-shell th {
  text-align: left;
  padding: 8px 10px;
  font-weight: 700;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  border-bottom: 2px solid var(--line);
  position: sticky;
  top: 0;
  background: var(--card);
  white-space: nowrap;
}
.comp-channel-shell td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.comp-channel-shell tr:hover td {
  background: var(--card-2);
}
@media (max-width: 768px) {
  .bt-cipher-grid {
    grid-template-columns: 1fr;
  }
  .comp-channel-shell .kpi-row {
    grid-template-columns: 1fr 1fr;
  }
}
#tabBodytools .bt-legacy .tab-content { display: block !important; }
#tabBodytools .bt-legacy .no-print { display: block !important; }
#tabBodytools .bt-legacy .header-gradient,
#tabBodytools .bt-legacy .workspace-tabs { display: none !important; }

/* Body Tools utility shim (native workspace mode) */
#tabBodytools .bt-legacy {
  color: var(--text);
  background: transparent;
  font-family: var(--font-body) !important;
}
#tabBodytools .bt-legacy h1,
#tabBodytools .bt-legacy h2,
#tabBodytools .bt-legacy h3,
#tabBodytools .bt-legacy h4,
#tabBodytools .bt-legacy .card-header,
#tabBodytools .bt-legacy .stat-label {
  font-family: var(--font-head) !important;
}
#tabBodytools .bt-legacy .max-w-7xl { max-width: 100%; margin: 0 auto; }
#tabBodytools .bt-legacy .mb-8 { margin-bottom: 1.5rem; }
#tabBodytools .bt-legacy .mb-6 { margin-bottom: 1rem; }
#tabBodytools .bt-legacy .mb-4 { margin-bottom: 0.875rem; }
#tabBodytools .bt-legacy .mb-2 { margin-bottom: 0.5rem; }
#tabBodytools .bt-legacy .mt-12 { margin-top: 2rem; }
#tabBodytools .bt-legacy .mt-4 { margin-top: 1rem; }
#tabBodytools .bt-legacy .mt-3 { margin-top: 0.75rem; }
#tabBodytools .bt-legacy .mt-2 { margin-top: 0.5rem; }
#tabBodytools .bt-legacy .pt-4 { padding-top: 1rem; }
#tabBodytools .bt-legacy .pt-2 { padding-top: 0.5rem; }
#tabBodytools .bt-legacy .p-6 { padding: 1.5rem; }
#tabBodytools .bt-legacy .p-4 { padding: 1rem; }
#tabBodytools .bt-legacy .p-3 { padding: 0.75rem; }
#tabBodytools .bt-legacy .grid { display: grid; }
#tabBodytools .bt-legacy .gap-6 { gap: 1.25rem; }
#tabBodytools .bt-legacy .gap-4 { gap: 1rem; }
#tabBodytools .bt-legacy .grid-cols-1 { grid-template-columns: 1fr; }
#tabBodytools .bt-legacy .flex { display: flex; }
#tabBodytools .bt-legacy .flex-col { flex-direction: column; }
#tabBodytools .bt-legacy .items-center { align-items: center; }
#tabBodytools .bt-legacy .items-start { align-items: flex-start; }
#tabBodytools .bt-legacy .justify-between { justify-content: space-between; }
#tabBodytools .bt-legacy .justify-center { justify-content: center; }
#tabBodytools .bt-legacy .text-4xl { font-size: 1.8rem; line-height: 1.15; font-weight: 700; }
#tabBodytools .bt-legacy .text-3xl { font-size: 1.55rem; line-height: 1.15; font-weight: 700; }
#tabBodytools .bt-legacy .text-2xl { font-size: 1.35rem; line-height: 1.2; font-weight: 700; }
#tabBodytools .bt-legacy .text-xl { font-size: 1.2rem; line-height: 1.25; font-weight: 700; }
#tabBodytools .bt-legacy .text-lg { font-size: 1.15rem; line-height: 1.3; }
#tabBodytools .bt-legacy .text-sm { font-size: 0.94rem; line-height: 1.35; }
#tabBodytools .bt-legacy .text-xs { font-size: 0.8rem; line-height: 1.4; }
#tabBodytools .bt-legacy .font-bold { font-weight: 700; }
#tabBodytools .bt-legacy .font-semibold { font-weight: 600; }
#tabBodytools .bt-legacy .leading-relaxed { line-height: 1.65; }
#tabBodytools .bt-legacy .opacity-75 { opacity: 0.8; }
#tabBodytools .bt-legacy .opacity-50 { opacity: 0.6; }
#tabBodytools .bt-legacy .text-white { color: var(--text); }
#tabBodytools .bt-legacy .text-orange-500 { color: #ff6a1d; }
#tabBodytools .bt-legacy .text-blue-500 { color: #3e79e6; }
#tabBodytools .bt-legacy .text-green-500 { color: #22c55e; }
#tabBodytools .bt-legacy .border-t { border-top: 1px solid rgba(15, 23, 42, 0.12); }
#tabBodytools .bt-legacy .rounded { border-radius: 12px; }
#tabBodytools .bt-legacy .rounded-full { border-radius: 999px; }
#tabBodytools .bt-legacy .w-full { width: 100%; }
#tabBodytools .bt-legacy .h-8 { height: 2rem; }
#tabBodytools .bt-legacy .w-8 { width: 2rem; }
#tabBodytools .bt-legacy .bg-orange-500 { background: #f45423; }
#tabBodytools .bt-legacy,
#tabBodytools .bt-legacy .tab-content,
#tabBodytools .bt-legacy .main-content,
#tabBodytools .bt-legacy [class*="bg-"] {
  background: transparent !important;
}
#tabBodytools .bt-legacy .card,
#tabBodytools .bt-legacy .drawing-card,
#tabBodytools .bt-legacy .formula-box,
#tabBodytools .bt-legacy .safe {
  background: var(--card) !important;
  color: var(--text) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-sm) !important;
}
#tabBodytools .bt-legacy .card .input-field { background: var(--card-2); color: var(--text); }
#tabBodytools .bt-legacy .input-field,
#tabBodytools .bt-legacy input,
#tabBodytools .bt-legacy select,
#tabBodytools .bt-legacy textarea {
  background: var(--card-2) !important;
  color: var(--text) !important;
  border: 1px solid var(--line-2) !important;
  border-radius: var(--r) !important;
  box-shadow: none !important;
}
#tabBodytools .bt-legacy .input-label {
  color: var(--text-3) !important;
  font-family: var(--font-head) !important;
  font-size: 0.66rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}
#tabBodytools .bt-legacy .tab-button,
#tabBodytools .bt-legacy .button-secondary,
#tabBodytools .bt-legacy .button-primary {
  min-height: 38px;
  border-radius: var(--r) !important;
  font-family: var(--font-head) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease) !important;
}
#tabBodytools .bt-legacy .tab-button,
#tabBodytools .bt-legacy .button-secondary {
  background: var(--card-2) !important;
  color: var(--text-2) !important;
  border: 1px solid var(--line-2) !important;
  box-shadow: none !important;
}
#tabBodytools .bt-legacy .tab-button:hover,
#tabBodytools .bt-legacy .button-secondary:hover,
#tabBodytools .bt-legacy .drawing-cat-item:hover {
  background: color-mix(in srgb, var(--orange) 10%, var(--card)) !important;
  color: var(--text) !important;
  border-color: var(--line-strong) !important;
}
#tabBodytools .bt-legacy .tab-button.active,
#tabBodytools .bt-legacy .button-primary,
#tabBodytools .bt-legacy .active-cat-item {
  background: var(--orange) !important;
  color: #fff !important;
  border: 1px solid var(--orange) !important;
  box-shadow: var(--shadow-brand) !important;
}
#tabBodytools .bt-legacy .drawing-cat-item {
  background: var(--card) !important;
  color: var(--text) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r) !important;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease) !important;
}
#tabBodytools .bt-legacy table {
  background: transparent !important;
  color: var(--text) !important;
}
#tabBodytools .bt-legacy td,
#tabBodytools .bt-legacy th {
  border-color: var(--line-2) !important;
}
#tabBodytools .bt-legacy th {
  color: var(--text-3) !important;
  font-family: var(--font-head) !important;
  font-size: 0.66rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}
#tabBodytools .bt-legacy .weight-bar-container {
  background: color-mix(in srgb, var(--navy) 12%, #ffffff) !important;
  border-radius: 999px !important;
}
#tabBodytools .bt-legacy .weight-bar-fill.safe {
  background: linear-gradient(90deg, #22c55e, #16a34a) !important;
}
#tabBodytools .bt-legacy .weight-bar-fill.warning {
  background: linear-gradient(90deg, #f59e0b, #f97316) !important;
}
#tabBodytools .bt-legacy .weight-bar-fill.danger {
  background: linear-gradient(90deg, #ef4444, #dc2626) !important;
}

/* Light mode: prevent dark blue bodytools canvas bleed */
body:not(.dark-mode) #tabBodytools .bt-view,
body:not(.dark-mode) #tabBodytools .bt-legacy,
body:not(.dark-mode) #tabBodytools .bt-legacy .tab-content,
body:not(.dark-mode) #tabBodytools .bt-legacy .tab-content.active,
body:not(.dark-mode) #tabBodytools .bt-legacy .main-content {
  background: #ffffff !important;
  color: #1f2937 !important;
}
body:not(.dark-mode) #tabBodytools .bt-legacy .card,
body:not(.dark-mode) #tabBodytools .bt-legacy .drawing-card,
body:not(.dark-mode) #tabBodytools .bt-legacy .formula-box,
body:not(.dark-mode) #tabBodytools .bt-legacy .safe {
  background: var(--card) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}

body.dark-mode #tabBodytools .bt-legacy,
body.dark-mode #tabBodytools .bt-legacy .tab-content,
body.dark-mode #tabBodytools .bt-view {
  background: transparent !important;
  color: #dbe5fb !important;
}
body.dark-mode #tabBodytools .bt-legacy .card,
body.dark-mode #tabBodytools .bt-legacy .drawing-card,
body.dark-mode #tabBodytools .bt-legacy .formula-box,
body.dark-mode #tabBodytools .bt-legacy .safe {
  background: var(--card) !important;
  color: var(--text) !important;
  border-color: var(--line-2) !important;
}
body.dark-mode #tabBodytools .bt-legacy .input-field,
body.dark-mode #tabBodytools .bt-legacy input,
body.dark-mode #tabBodytools .bt-legacy select,
body.dark-mode #tabBodytools .bt-legacy textarea {
  background: color-mix(in srgb, var(--navy-deep) 82%, #ffffff) !important;
  color: var(--text) !important;
  border-color: var(--line-2) !important;
}

/* Body Tools visualizer/drawings contrast fixes */
#tabBodytools .bt-legacy .truck-drawing-svg {
  background: #f8fafc !important;
  border-color: #cdd7e8 !important;
}
#tabBodytools .bt-legacy #vis-state-rules,
#tabBodytools .bt-legacy #bodyConfigInfo,
#tabBodytools .bt-legacy #vis-tag-excluded-note {
  background: #f8fafc !important;
  color: #1f2937 !important;
  border-color: #cdd7e8 !important;
}
#tabBodytools .bt-legacy #vis-state-rules strong,
#tabBodytools .bt-legacy #bodyConfigInfo strong,
#tabBodytools .bt-legacy #vis-tag-excluded-note strong {
  color: #111827 !important;
}

#tabBodytools .bt-legacy .drawing-card .drawing-number {
  color: #0f172a !important;
}
#tabBodytools .bt-legacy .drawing-card .drawing-description {
  color: #1f2937 !important;
}
#tabBodytools .bt-legacy .drawing-card .drawing-specs {
  color: #334155 !important;
  opacity: 1 !important;
}
#tabBodytools .bt-legacy #drawingGrid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)) !important;
}
#tabBodytools .bt-legacy .drawing-card {
  overflow: hidden;
}
#tabBodytools .bt-legacy .drawing-card-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(210px, 38%);
  gap: 16px;
  padding: 20px;
  align-items: stretch;
}
#tabBodytools .bt-legacy .drawing-card-copy {
  min-width: 0;
}
#tabBodytools .bt-legacy .drawing-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
#tabBodytools .bt-legacy .drawing-preview-shell {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 180px;
  border: 1px solid rgba(226, 232, 240, 0.5);
  border-radius: var(--r);
  overflow: hidden;
  background: #e7edf6;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.06);
}
#tabBodytools .bt-legacy .drawing-pdf-preview-canvas {
  display: block;
  max-width: calc(100% - 10px);
  max-height: calc(100% - 10px);
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.22);
}
#tabBodytools .bt-legacy .drawing-preview-loading,
#tabBodytools .bt-legacy .drawing-preview-fallback {
  display: grid;
  place-items: center;
  min-height: 180px;
  padding: 14px;
  color: #475569;
  text-align: center;
  font-family: var(--font-head);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
#tabBodytools .bt-legacy .drawing-edit-panel {
  margin: 0 20px 20px;
  padding: 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: color-mix(in srgb, var(--card-2) 80%, #ffffff);
}
#tabBodytools .bt-legacy .drawing-edit-panel label {
  color: #f8fafc !important;
  opacity: 1 !important;
  font-family: var(--font-head) !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}
#tabBodytools .bt-legacy .drawing-edit-panel input,
#tabBodytools .bt-legacy .drawing-edit-panel select {
  margin-top: 8px !important;
  background: #34475f !important;
  color: #ffffff !important;
  border-color: #8aa0bd !important;
  opacity: 1 !important;
}
#tabBodytools .bt-legacy .drawing-edit-panel input::placeholder {
  color: #cbd5e1 !important;
  opacity: 1 !important;
}
#tabBodytools .bt-legacy .drawing-edit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
#tabBodytools .bt-legacy .drawing-edit-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
}
#tabBodytools .bt-legacy .drawing-edit-status {
  color: var(--text-2);
  font-size: 0.85rem;
}

body.dark-mode #tabBodytools .bt-legacy .truck-drawing-svg,
body.dark-mode #tabBodytools .bt-legacy #vis-state-rules,
body.dark-mode #tabBodytools .bt-legacy #bodyConfigInfo,
body.dark-mode #tabBodytools .bt-legacy #vis-tag-excluded-note {
  background: #eef3fb !important;
  color: #111827 !important;
  border-color: #b8c6dc !important;
}
body.dark-mode #tabBodytools .bt-legacy .drawing-card .drawing-number,
body.dark-mode #tabBodytools .bt-legacy .drawing-card .drawing-description,
body.dark-mode #tabBodytools .bt-legacy .drawing-card .drawing-specs {
  color: #e7edff !important;
  opacity: 1 !important;
}
body.dark-mode #tabBodytools .bt-legacy .drawing-preview-shell {
  background: #eef3fb;
  border-color: #94a3b8;
}
body.dark-mode #tabBodytools .bt-legacy .drawing-edit-panel {
  background: #5f7796 !important;
  border-color: #9fb2ca !important;
}
body.dark-mode #tabBodytools .bt-legacy .drawing-edit-panel label {
  color: #ffffff !important;
}
body.dark-mode #tabBodytools .bt-legacy .drawing-edit-panel input,
body.dark-mode #tabBodytools .bt-legacy .drawing-edit-panel select {
  background: #26384f !important;
  color: #ffffff !important;
  border-color: #b8c7dc !important;
}

.bt-document-upload-card {
  margin-bottom: 16px;
  border-top: 3px solid var(--orange);
}
.bt-document-upload-form {
  display: grid;
  gap: 12px;
}
.bt-document-upload-form input[type="file"] {
  padding: 10px;
  border: 1px dashed var(--line);
  background: var(--card-2);
}
.bt-document-upload-form .three-col {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

@media (min-width: 768px) {
  #tabBodytools .bt-legacy .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  #tabBodytools .bt-legacy .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
  #tabBodytools .bt-legacy .md\:p-6 { padding: 1.5rem; }
}
@media (min-width: 1024px) {
  #tabBodytools .bt-legacy .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  #tabBodytools .bt-legacy .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  #tabBodytools .bt-legacy .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0,1fr)); }
  #tabBodytools .bt-legacy .lg\:col-span-2 { grid-column: span 2 / span 2; }
}
@media (max-width: 760px) {
  .bt-document-upload-form .three-col { grid-template-columns: 1fr; }
  #tabBodytools .bt-legacy .drawing-card-inner {
    grid-template-columns: 1fr;
  }
  #tabBodytools .bt-legacy .drawing-edit-grid {
    grid-template-columns: 1fr;
  }
  .bt-filter-row {
    align-items: flex-start;
  }
  .bt-dashboard-links,
  .bt-inline-actions {
    flex-direction: column;
  }
}

/* Main content */
#appPanel {
  margin-left: var(--rail-w);
  flex: 1; min-width: 0; display: block;
}

#loginPanel {
  margin-left: var(--rail-w);
  flex: 1;
}

.login-rail {
  position: fixed;
  top: calc(var(--topbar-h) + var(--header-rule-h));
  left: 0;
  bottom: 0;
  width: var(--rail-w);
  z-index: 145;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden;
  background-image:
    url('assets/home-hero-bg-V3_0.jpg');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}
.login-rail::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--orange);
  z-index: 2;
  box-shadow: 0 0 12px var(--orange-glow);
  display: none;
}
.login-rail::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 15, 30, 0.88) 0%, rgba(15, 22, 40, 0.92) 40%, rgba(10, 14, 28, 0.96) 100%);
  z-index: 0;
}
.login-rail > * {
  position: relative;
  z-index: 1;
}
.login-rail-item {
  border: 1px solid transparent;
  border-left: 3px solid transparent;
  border-radius: 0;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 10px 16px 10px 22px;
  font-family: var(--font-head);
  font-size: 0.8rem;
  color: rgba(230, 235, 248, 0.75);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.login-rail-item.active {
  color: #fff;
  background: rgba(244,84,35,0.38);
  border-left-color: var(--orange);
  font-weight: 500;
}
.login-rail .tab-icon {
  width: 16px;
  min-width: 16px;
  text-align: center;
  opacity: 0.9;
}

/* ── Secondary tab rows inside cards ────────────────────────── */
.tab-row {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.tab-row:not(.workspace-tabs) .btn.active {
  background: var(--orange-light);
  color: var(--orange);
  border-color: var(--orange);
  font-weight: 600;
}

/* ── Cards ─────────────────────────────────────────────────── */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-top: 3px solid var(--orange);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  padding: 20px;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
body:not(.dark-mode) .card { border-color: rgba(244,84,35,0.22); border-top-color: var(--orange); }

.subcard {
  border: 1px solid var(--line);
  border-left: 3px solid rgba(244,84,35,0.4);
  border-radius: 0 var(--r) var(--r) 0;
  padding: 13px 15px;
  background: var(--card-2);
  transition: border-color var(--dur) var(--ease);
}
.subcard:hover { border-left-color: var(--orange); }

/* ── Login card ─────────────────────────────────────────────── */
.card-auth {
  width: min(92vw, 560px);
  max-width: 560px;
  margin: clamp(28px,5vh,64px) auto 0;
  border-top: 4px solid var(--orange);
  border-radius: 0 0 var(--r-xl) var(--r-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  position: relative;
}
/* Hero truck silhouette as login card bg */
.card-auth::after {
  content: '';
  position: absolute;
  bottom: 0; right: -10px;
  width: 55%;
  height: 55%;
  background: radial-gradient(ellipse at right bottom, rgba(244,84,35,0.22) 0%, rgba(244,84,35,0) 68%);
  opacity: 0.07;
  pointer-events: none;
  z-index: 0;
}
.card-auth > * { position: relative; z-index: 1; }
.card-auth h2 {
  font-family: var(--font-head);
  font-size: 1.55rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 4px;
  color: var(--orange);
}
.card-auth .stack { gap: 14px; }

/* Improve dark-mode contrast for key UI regions */
body.dark-mode {
  background: #1a2236;
}
body.dark-mode .card,
body.dark-mode .subcard,
body.dark-mode .preview-shell,
body.dark-mode .table thead {
  background-color: inherit;
}
body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea {
  background: #243857;
  border-color: rgba(255,255,255,0.2);
  color: #f3f7ff;
}

/* In dark mode, use white headers for readability */
body.dark-mode .section-head h2,
body.dark-mode .table th,
body.dark-mode .preview-box h3,
body.dark-mode .finance-title,
body.dark-mode .verbiage-block h4,
body.dark-mode .warranty-block h4,
body.dark-mode .notes-block h4,
body.dark-mode .card-auth h2 {
  color: #ffffff;
}

/* ── Section headers ─────────────────────────────────────────── */
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.section-head h2 {
  display: flex; align-items: center; gap: 10px;
}
/* Orange bar before section titles */
.section-head h2::before {
  content: '';
  width: 4px; height: 18px;
  background: var(--orange);
  border-radius: 2px;
  flex-shrink: 0;
  box-shadow: 0 0 8px var(--orange-glow);
}
.pill-row { display: flex; gap: 6px; align-items: center; }

/* ── Status badges ──────────────────────────────────────────── */
.status-square {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  padding: 4px 10px;
  min-width: 80px;
  text-align: center;
  font-family: var(--font-head);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-2);
  background: var(--card-2);
}
.status-square.saved {
  background: var(--success-bg);
  border-color: var(--success);
  color: var(--success);
}
.status-square.unsaved {
  background: var(--danger-bg);
  border-color: var(--danger);
  color: var(--danger);
  animation: unsavedPulse 2s ease-in-out infinite;
}
 .presence-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 74px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  font-size: 0.68rem;
  font-weight: 600;
  border: 1px solid transparent;
}
.presence-badge.online {
  background: var(--success-bg);
  border-color: var(--success);
  color: var(--success);
}
.presence-badge.offline {
  background: var(--card-2);
  border-color: var(--line);
  color: var(--text-3);
}
@keyframes unsavedPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.65; }
}

/* ── Stepper ────────────────────────────────────────────────── */
.stepper-wrap {
  display: flex; flex-wrap: wrap;
  gap: 3px; padding: 2px 0; margin-bottom: 6px;
}
.step-chip {
  border: 1px solid var(--line-strong);
  border-radius: 0;
  padding: 6px 16px;
  background: var(--card-2);
  cursor: pointer;
  font-family: var(--font-head);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2);
  transition: all var(--dur) var(--ease);
  white-space: nowrap;
  border-bottom: 3px solid transparent;
}
.step-chip:hover {
  border-color: var(--line-strong);
  border-bottom-color: var(--orange);
  color: var(--text);
  background: var(--card-3);
}
.step-chip.active {
  background: var(--orange);
  border-color: transparent;
  border-bottom-color: var(--orange-border);
  color: #fff;
  font-weight: 500;
  box-shadow: var(--shadow-brand);
}
.step-anchor { scroll-margin-top: calc(var(--topbar-h) + 16px); }

/* ── Quick Picks ────────────────────────────────────────────── */
.chip-row {
  display: flex; flex-wrap: wrap;
  gap: 5px; margin-top: 5px;
}
.chip-row button {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  padding: 3px 11px;
  background: var(--card-2);
  font-size: 0.73rem;
  font-weight: 500;
  color: var(--text-2);
  cursor: pointer;
  font-family: var(--font-body);
  transition: all var(--dur) var(--ease);
}
.chip-row button:hover {
  background: var(--orange-light);
  border-color: var(--orange);
  color: var(--orange);
}

/* ── Buttons ────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center; justify-content: center;
  gap: 6px;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  border-bottom: 3px solid transparent;
  padding: 8px 18px;
  background: var(--card-2);
  color: var(--text-2);
  cursor: pointer;
  font-family: var(--font-head);
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  min-height: 38px;
  touch-action: manipulation;
  transition: all var(--dur) var(--ease);
  white-space: nowrap;
}
.btn:hover {
  border-color: var(--orange);
  border-bottom-color: var(--orange-border);
  color: var(--orange);
  background: var(--orange-light);
  transform: translateY(-1px);
}
.btn:active { transform: translateY(0); }

/* Primary — matches amrepproducts.com exactly */
.btn.primary {
  background: var(--orange);
  color: #fff;
  border-color: transparent;
  border-bottom: 3px solid var(--orange-border);
  font-weight: 500;
  box-shadow: var(--shadow-brand);
  letter-spacing: 0.08em;
}
.btn.primary:hover {
  background: var(--orange-hover);
  border-bottom-color: var(--orange);
  color: #fff;
  box-shadow: 0 6px 24px rgba(244,84,35,0.5);
  transform: translateY(-1px);
}

.btn.ghost {
  background: transparent;
  border-color: var(--line-2);
  color: var(--text-3);
  border-bottom-color: transparent;
}
.btn.ghost:hover {
  border-color: var(--orange);
  border-bottom-color: var(--orange-border);
  color: var(--orange);
  background: var(--orange-light);
}

.topbar .btn.ghost {
  color: rgba(230, 235, 248, 0.9);
  border-color: rgba(244, 84, 35, 0.2);
}
.topbar .btn.ghost:hover {
  color: #fff;
}
body.dark-mode #authState {
  color: rgba(230, 235, 248, 0.9);
}

.btn.danger {
  background: var(--danger-bg);
  border-color: var(--danger);
  color: var(--danger);
  border-bottom-color: var(--red-dark);
}
.btn.danger:hover {
  background: var(--danger);
  color: #fff;
}

.button-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.quote-protection-stack {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

/* ── Quote Builder guided help ─────────────────────────────── */
.quote-help-btn {
  min-height: 34px;
  padding: 7px 12px;
}

.quote-tour-open {
  scroll-behavior: smooth;
}

.quote-tour-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background:
    radial-gradient(circle at var(--tour-x, 50%) var(--tour-y, 45%), rgba(244, 84, 35, 0.16), transparent 18%),
    rgba(5, 10, 22, 0.62);
  backdrop-filter: blur(2px);
}

.quote-tour-spotlight {
  position: fixed;
  z-index: 10001;
  border: 2px solid var(--orange);
  border-radius: 14px;
  box-shadow: 0 0 0 9999px rgba(5, 10, 22, 0.44), 0 0 32px rgba(244, 84, 35, 0.52);
  pointer-events: none;
  transition: left 220ms var(--ease), top 220ms var(--ease), width 220ms var(--ease), height 220ms var(--ease);
  animation: quoteTourPulse 1.55s ease-in-out infinite;
}

.quote-tour-card {
  position: fixed;
  z-index: 10002;
  width: min(430px, calc(100vw - 28px));
  max-height: calc(100vh - 28px);
  overflow: auto;
  border: 1px solid rgba(244, 84, 35, 0.45);
  border-top: 3px solid var(--orange);
  border-radius: 0 0 18px 18px;
  background: var(--card);
  color: var(--text);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.38);
  padding: 16px;
  transition: left 220ms var(--ease), top 220ms var(--ease);
}

.quote-tour-kicker {
  color: var(--orange);
  font-family: var(--font-head);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 7px;
}

.quote-tour-card h3 {
  margin: 0 0 8px;
  font-family: var(--font-head);
  font-size: 1.18rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.quote-tour-card p {
  margin: 0 0 10px;
  color: var(--text-2);
  line-height: 1.48;
}

.quote-tour-card ul {
  margin: 8px 0 0;
  padding-left: 18px;
  color: var(--text-2);
}

.quote-tour-card li + li {
  margin-top: 5px;
}

.quote-tour-visual {
  margin: 12px 0;
  min-height: 84px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(244, 84, 35, 0.11), transparent 42%),
    rgba(83, 117, 170, 0.12);
  position: relative;
  overflow: hidden;
}

.quote-tour-visual::before,
.quote-tour-visual::after {
  content: '';
  position: absolute;
  border-radius: 999px;
  background: rgba(244, 84, 35, 0.8);
  width: 9px;
  height: 9px;
  top: 50%;
  transform: translateY(-50%);
  animation: quoteTourDot 2s ease-in-out infinite;
}

.quote-tour-visual::before { left: 16%; }
.quote-tour-visual::after { left: 76%; animation-delay: 0.4s; }

.quote-tour-visual-bar {
  position: absolute;
  left: 12%;
  right: 12%;
  top: 50%;
  height: 3px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, var(--orange), rgba(102, 199, 255, 0.75));
}

.quote-tour-visual-card {
  position: absolute;
  left: 14%;
  top: 18px;
  width: 72%;
  height: 18px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.quote-tour-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
}

.quote-tour-progress {
  color: var(--text-3);
  font-size: 0.8rem;
}

.quote-tour-hidden {
  display: none !important;
}

@keyframes quoteTourPulse {
  0%, 100% { box-shadow: 0 0 0 9999px rgba(5, 10, 22, 0.44), 0 0 22px rgba(244, 84, 35, 0.38); }
  50% { box-shadow: 0 0 0 9999px rgba(5, 10, 22, 0.44), 0 0 38px rgba(244, 84, 35, 0.72); }
}

@keyframes quoteTourDot {
  0%, 100% { opacity: 0.3; transform: translateY(-50%) scale(0.75); }
  50% { opacity: 1; transform: translateY(-50%) scale(1.25); }
}

/* ── Form controls ──────────────────────────────────────────── */
label {
  display: flex; flex-direction: column; gap: 4px;
  font-family: var(--font-head);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}

input, select, textarea {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  border-bottom: 2px solid var(--line-strong);
  padding: 9px 12px;
  background: var(--card-2);
  color: var(--text);
  min-height: 40px;
  font-family: var(--font-body);
  font-size: 0.88rem;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  outline: none;
  appearance: auto;
  -webkit-appearance: auto;
}
input::placeholder, textarea::placeholder { color: var(--text-3); font-size: 0.82rem; }
input:focus, select:focus, textarea:focus {
  border-color: var(--orange);
  border-bottom-color: var(--orange);
  box-shadow: 0 2px 0 var(--orange), 0 0 0 3px var(--orange-light);
  background: var(--card-3);
}
input:hover:not(:focus), select:hover:not(:focus), textarea:hover:not(:focus) {
  border-color: rgba(244,84,35,0.4);
  border-bottom-color: rgba(244,84,35,0.4);
}
input[readonly] {
  background: var(--card);
  color: var(--text-3);
  cursor: default;
  border-color: var(--line);
  border-bottom-color: var(--line);
}
textarea { min-height: 90px; resize: vertical; }

input[type="checkbox"] {
  width: 16px; height: 16px; min-height: 16px;
  appearance: auto;
  -webkit-appearance: auto;
  accent-color: var(--orange);
  cursor: pointer;
  border-radius: var(--r-xs);
}

button, .btn, input, select, textarea {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* Light mode inputs */
body:not(.dark-mode) input,
body:not(.dark-mode) select,
body:not(.dark-mode) textarea {
  background: #f9fafb;
  border-color: #d1d5db;
  border-bottom-color: #9ca3af;
  color: var(--text);
}
body:not(.dark-mode) input:focus,
body:not(.dark-mode) select:focus,
body:not(.dark-mode) textarea:focus {
  background: #fff;
  border-color: var(--orange);
  border-bottom-color: var(--orange);
  box-shadow: 0 2px 0 var(--orange), 0 0 0 3px var(--orange-light);
}
body:not(.dark-mode) input[readonly] {
  background: #f3f4f6;
}

.input-inline { gap: 4px; text-transform: none; letter-spacing: 0; font-family: var(--font-body); font-size: 0.82rem; }
.label-inline {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: inherit; font-weight: inherit;
  letter-spacing: inherit; text-transform: inherit;
  font-family: inherit;
}
.toggle-label { flex-direction: row; align-items: center; gap: 10px; text-transform: none; letter-spacing: 0; font-size: 0.82rem; }
.toggle-label input[type="checkbox"] { flex-shrink: 0; }

/* Help tooltips */
.help-inline {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--orange-light);
  color: var(--orange);
  font-size: 0.58rem; font-weight: 700;
  cursor: help; white-space: nowrap; position: relative;
  vertical-align: middle; flex-shrink: 0;
  font-family: var(--font-body);
  transition: background var(--dur) var(--ease);
  border: 1px solid rgba(244,84,35,0.3);
}
.help-inline:hover { background: var(--orange); color: #fff; }
.help-inline::after {
  content: attr(data-help);
  position: absolute; left: 0; top: calc(100% + 7px);
  width: min(280px,70vw); padding: 8px 11px;
  border: 1px solid var(--line-strong);
  border-top: 2px solid var(--orange);
  border-radius: 0 0 var(--r) var(--r);
  background: var(--card);
  color: var(--text-2);
  font-family: var(--font-body);
  font-size: 11px; font-weight: 400;
  line-height: 1.45; text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  box-shadow: var(--shadow-lg);
  opacity: 0; transform: translateY(-4px) scale(0.97);
  pointer-events: none;
  transition: opacity 0.14s var(--ease), transform 0.14s var(--ease);
  z-index: 1200;
}
.help-inline:hover::after,
.help-inline:focus-visible::after,
.help-inline.open::after { opacity: 1; transform: translateY(0) scale(1); }

/* Customer summary */
.customer-selection-summary {
  margin-top: 4px; padding: 7px 11px;
  border: 1px solid var(--line);
  border-left: 3px solid rgba(244,84,35,0.3);
  border-radius: 0;
  background: var(--card-2);
  font-size: 0.78rem; line-height: 1.4;
  min-height: 36px; color: var(--text-3);
}

.quote-customer-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(6, 12, 26, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.quote-customer-modal-overlay[hidden] {
  display: none;
}

.quote-customer-modal {
  width: min(980px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow: auto;
  border: 1px solid var(--line-strong);
  border-top: 3px solid var(--orange);
  border-radius: 0 0 18px 18px;
  background: var(--card);
  color: var(--text);
  box-shadow: var(--shadow-lg);
  padding: 18px;
}

.quote-customer-modal h3 {
  color: var(--text);
}

/* ── Layout grids ───────────────────────────────────────────── */
.stack        { display: flex; flex-direction: column; gap: 12px; }
.two-col      { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.three-col    { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.pricing-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 10px; }
.form-inline-grid { display: grid; gap: 12px; margin-bottom: 16px; }
.model-grid    { grid-template-columns: repeat(4, minmax(0,1fr)); }
.customer-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
.option-model-picker-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.option-model-picker-label {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-2);
}
.option-model-picker-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.option-model-picker {
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: 0;
  max-height: 170px;
  overflow: auto;
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 12px;
}
.option-model-picker label {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  margin: 0;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.76rem;
}
.option-model-picker input[type="checkbox"] {
  width: 14px;
  height: 14px;
  min-height: 14px;
  flex: 0 0 auto;
}
.user-multiselect-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.user-multiselect {
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: 0;
  overflow: hidden;
}
.user-multiselect > summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 12px;
  font-size: 0.82rem;
  color: var(--text-2);
  background: var(--card-2);
  border-left: 3px solid transparent;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.user-multiselect > summary::-webkit-details-marker {
  display: none;
}
.user-multiselect[open] > summary,
.user-multiselect > summary:hover {
  border-left-color: var(--orange);
  background: var(--card-3);
}
.user-multiselect .option-model-picker-actions {
  padding: 8px 10px 0;
}
.user-multiselect-picker {
  border: none;
  background: transparent;
  max-height: 220px;
}
.workspace-grid {
  display: grid;
  grid-template-columns: minmax(640px, 60%) minmax(300px, 40%);
  gap: 16px;
  align-items: start;
}
.workspace-grid > * { min-width: 0; }
.contact-save-row { justify-content: flex-end; align-self: end; }
.tab-panel { padding: 20px 24px; }
#messageCenter { padding: 0; margin: 0; }

/* ── Options list ───────────────────────────────────────────── */
.options-list {
  border: 1px solid var(--line);
  border-radius: 0;
  max-height: 280px;
  overflow: auto;
  padding: 6px;
  display: grid; gap: 4px;
  background: var(--card);
  scrollbar-width: thin;
  scrollbar-color: var(--orange-light) transparent;
}
.option-item {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center; gap: 8px;
  padding: 7px 10px;
  border: 1px solid transparent;
  border-left: 3px solid transparent;
  border-radius: 0;
  background: var(--card-2);
  transition: all var(--dur) var(--ease);
}
.option-item:hover {
  border-color: var(--line);
  border-left-color: var(--orange);
  background: var(--card-3);
}
.option-item label {
  display: flex; flex-direction: row;
  align-items: center; text-align: left;
  gap: 8px; margin: 0; min-width: 0;
  color: var(--text-2); font-size: 0.83rem;
  font-family: var(--font-body);
  font-weight: 400; text-transform: none; letter-spacing: 0;
}
.option-item label input[type="checkbox"] {
  width: 15px; height: 15px; min-height: 15px; flex: 0 0 auto;
}
.option-item label span {
  display: block; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.option-item .price-block {
  display: flex; align-items: center; gap: 6px; justify-content: flex-end;
  font-size: 0.8rem; font-weight: 600; color: var(--text-2);
}
.option-detail-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(150px, 0.45fr) minmax(190px, 0.7fr) minmax(220px, 1fr);
  gap: 8px;
  padding: 8px 0 2px 23px;
}
.option-detail-row.is-disabled {
  opacity: 0.55;
}
.option-detail-row label {
  display: grid;
  gap: 4px;
  color: var(--text-3);
  font-family: var(--font-head);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.option-detail-row select,
.option-detail-row input {
  min-height: 34px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  letter-spacing: 0;
  text-transform: none;
}
.option-detail-toggle {
  align-self: end;
  min-height: 34px;
}
.options-empty {
  border: 1px dashed var(--line);
  border-radius: var(--r);
  color: var(--text-2);
  padding: 16px;
  text-align: center;
}

#selectedOptionsSummary {
  margin-top: 8px;
  border-left: 3px solid var(--orange);
  border-radius: 0;
  padding: 8px 12px;
  background: var(--card-2);
  font-size: 0.78rem; color: var(--text-3);
}

.camera-configurator-entry,
.lighting-configurator-entry,
.camera-admin-panel,
.lighting-admin-panel {
  margin: 10px 0;
  border: 1px solid var(--line);
  border-left: 3px solid var(--orange);
  background: var(--card-2);
}

.camera-configurator-entry,
.lighting-configurator-entry {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
}

.camera-configurator-entry strong,
.lighting-configurator-entry strong {
  display: block;
  color: var(--text);
  font-family: var(--font-head);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.camera-admin-panel,
.lighting-admin-panel {
  padding: 12px;
}

.configurator-component-admin {
  margin-top: 14px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.configurator-cost-table input {
  width: 110px;
  min-height: 34px;
  padding: 6px 8px;
}

.configurator-cost-table td:nth-child(3) {
  min-width: 240px;
}

.camera-admin-head,
.lighting-admin-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}

.camera-admin-head h3,
.lighting-admin-head h3 {
  margin: 0 0 4px;
}

.camera-admin-grid,
.lighting-admin-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.camera-config-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(6, 12, 26, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.camera-config-modal-overlay[hidden] {
  display: none;
}

.camera-config-modal {
  width: min(1040px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow: auto;
  border: 1px solid var(--line-strong);
  border-top: 3px solid var(--orange);
  border-radius: 0 0 18px 18px;
  background: var(--card);
  color: var(--text);
  box-shadow: var(--shadow-lg);
  padding: 18px;
}

.camera-config-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.camera-config-head h3 {
  margin: 0 0 4px;
  color: var(--text);
}

.camera-config-grid,
.lighting-config-row-editor {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.camera-config-locations,
.camera-config-accessories {
  margin-top: 12px;
  padding: 10px;
  border: 1px solid var(--line);
  background: var(--card-2);
}

.camera-config-locations legend,
.camera-config-accessories legend {
  padding: 0 6px;
  color: var(--text-2);
  font-family: var(--font-head);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.camera-config-location-grid,
.camera-config-accessory-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.camera-config-accessory-subgroup {
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.camera-config-accessory-subhead {
  margin-bottom: 8px;
  color: var(--text);
  font-family: var(--font-head);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.camera-config-location-grid label,
.camera-config-accessory-grid label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--text-2);
  font-size: 0.82rem;
  text-transform: none;
  letter-spacing: 0;
}

.camera-config-custom-location {
  margin-top: 10px;
}

.camera-config-summary {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  background: var(--card-2);
}

.camera-config-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.camera-config-summary-item {
  display: grid;
  gap: 3px;
}

.camera-config-summary-item span {
  color: var(--text-3);
  font-size: 0.72rem;
}

.camera-config-summary-item strong {
  color: var(--text);
  font-size: 0.95rem;
}

.camera-config-components {
  margin-top: 10px;
  color: var(--text-2);
  font-size: 0.8rem;
  line-height: 1.45;
}

.lighting-config-rows {
  margin-top: 12px;
}

.lighting-config-row-table {
  margin: 0;
}

.lighting-config-sections {
  display: grid;
  gap: 12px;
}

.lighting-config-section {
  border: 1px solid var(--line);
  background: var(--card-2);
  padding: 12px;
}

.lighting-config-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.lighting-config-section-head h4 {
  margin: 0;
  color: var(--text);
  font-family: var(--font-head);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lighting-config-section-grid {
  display: grid;
  grid-template-columns: 1fr 2fr 0.55fr 1.25fr 1.15fr;
  gap: 10px;
  align-items: end;
}

.lighting-config-section-actions {
  margin-top: 12px;
}

@media (max-width: 1080px) {
  .camera-admin-grid,
  .lighting-admin-grid,
  .camera-config-grid,
  .lighting-config-row-editor,
  .lighting-config-section-grid,
  .camera-config-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .camera-configurator-entry,
  .lighting-configurator-entry,
  .camera-admin-head,
  .lighting-admin-head,
  .camera-config-head {
    align-items: stretch;
    flex-direction: column;
  }
	  .camera-admin-grid,
	  .lighting-admin-grid,
	  .camera-config-grid,
	  .lighting-config-row-editor,
	  .lighting-config-section-grid,
	  .camera-config-summary-grid,
	  .camera-config-location-grid,
	  .camera-config-accessory-grid {
	    grid-template-columns: 1fr;
	  }
}

.misc-editor { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.misc-editor h4 { margin: 0 0 10px; color: var(--text-2); }
.misc-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr auto;
  gap: 10px; align-items: end; margin-bottom: 10px;
}

/* ── Tables ─────────────────────────────────────────────────── */
.table {
  width: 100%; border-collapse: collapse; font-size: 0.83rem;
}
.table thead {
  position: sticky; top: 0;
  background: var(--navy-mid);
  z-index: 2;
}
body:not(.dark-mode) .table thead { background: var(--navy); }
.table th {
  text-align: left; padding: 10px 10px;
  font-family: var(--font-head);
  font-size: 0.66rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--orange);
  border-bottom: 2px solid var(--orange);
  white-space: nowrap;
}
body:not(.dark-mode) .table th { color: #ffffff; }
.table td {
  text-align: left; padding: 9px 10px;
  border-bottom: 1px solid var(--line);
  vertical-align: top; color: var(--text-2);
  transition: color var(--dur) var(--ease);
}
.table tbody tr { cursor: pointer; transition: background var(--dur) var(--ease); }
.table tbody tr:hover { background: var(--orange-light); }
.table tbody tr:hover td { color: var(--text); }
.table th.num, .table td.num { text-align: right; }
.table td .btn { padding: 4px 10px; min-height: 28px; font-size: 0.72rem; }

.tier-pricing-status {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0 18px;
}
.tier-pricing-status-card {
  background: var(--card-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 12px 14px;
}
.tier-pricing-status-card span {
  display: block;
  color: var(--text-2);
  font-family: var(--font-head);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.tier-pricing-status-card strong {
  display: block;
  margin-top: 6px;
  color: var(--text);
  font-size: 1rem;
}
.tier-pricing-status-card strong.is-off { color: var(--orange); }
.tier-pricing-status-card strong.is-on { color: #22c55e; }
.tier-pricing-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.9fr);
  gap: 16px;
}
.tier-pricing-rules {
  display: grid;
  gap: 8px;
}
.tier-pricing-rule {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding: 7px 0;
}
.tier-pricing-rule span { color: var(--text-2); }
.tier-pricing-rule strong { color: var(--text); text-align: right; }
body.dark-mode .tier-pricing-status-card span {
  color: #d3deef;
}
body.dark-mode .tier-pricing-rule span {
  color: #c3d0e3;
}
body.dark-mode #tabTierPricing .subcard h3,
body.dark-mode #tabDealerPortal .subcard h3 {
  color: #f4f7ff;
}
body.dark-mode #tabTierPricing .table td .muted,
body.dark-mode #tabDealerPortal .table td .muted {
  color: #b7c4d8;
}

/* ── Change summary ─────────────────────────────────────────── */
.change-summary {
  border: 1px solid rgba(251,191,36,0.35);
  border-left: 3px solid var(--warning);
  background: var(--warning-bg);
  border-radius: 0;
  padding: 10px 14px;
  font-size: 0.8rem; color: var(--warning);
}

/* ── Sticky action bar ──────────────────────────────────────── */
.quote-action-bar {
  align-items: center;
}

.quote-action-bar [data-last-saved-proxy],
.quote-action-bar #lastSavedStamp {
  margin-right: 8px;
  white-space: nowrap;
}

.quote-action-bar-top {
  background: var(--glass);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-top: 2px solid var(--orange);
  border-radius: 0;
  padding: 10px 0 8px;
  margin: 0 0 10px;
  gap: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.24);
}

.sticky-action-bar {
  position: sticky; bottom: 0; z-index: 10;
  background: var(--glass);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-top: 2px solid var(--orange);
  border-radius: 0;
  padding: 10px 0 4px;
  margin-top: 6px; gap: 8px;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.35);
}
.action-hint {
  min-height: 1.1rem;
  margin-top: 4px;
}

/* ── Toasts ─────────────────────────────────────────────────── */
.toast-host {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 12000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  max-width: min(420px, 90vw);
}
.toast {
  pointer-events: auto;
  border: 1px solid var(--line-strong);
  border-left: 4px solid var(--orange);
  background: var(--card-2);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 0;
  box-shadow: 0 10px 26px rgba(0,0,0,0.3);
  font-size: 0.82rem;
  line-height: 1.35;
  transform: translateY(8px);
  opacity: 0;
  animation: toastIn 160ms ease forwards;
}
.toast.success {
  border-left-color: var(--success);
}
.toast.error {
  border-left-color: var(--danger);
}
.toast.info {
  border-left-color: var(--orange);
}
.toast.removing {
  animation: toastOut 140ms ease forwards;
}
@keyframes toastIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes toastOut {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(6px); }
}

/* ── KPI strip ──────────────────────────────────────────────── */
.quote-library-summary {
  display: flex; gap: 6px 10px;
  flex-wrap: wrap; margin: 0 0 14px;
}
.dashboard-metric {
  display: flex; align-items: baseline; gap: 7px;
  background: var(--card-2);
  border: 1px solid var(--line);
  border-top: 2px solid var(--orange);
  border-radius: 0;
  padding: 6px 14px;
  white-space: nowrap;
}
.kpi-value {
  font-family: var(--font-head);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--orange);
  letter-spacing: 0.04em;
}

/* ── Reports ────────────────────────────────────────────────── */
.reports-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 12px;
  margin-top: 10px;
}
.report-card {
  border: 1px solid var(--line);
  border-top: 2px solid var(--orange);
  background: var(--card-2);
  padding: 10px 12px;
}
.report-card h3 {
  margin: 0 0 8px;
  font-size: 0.9rem;
  color: var(--text);
}
.report-card-wide {
  grid-column: 1 / -1;
}
.leadership-packet-toolbar {
  display: grid;
  grid-template-columns: minmax(210px, 1fr) minmax(180px, 240px) minmax(320px, auto);
  gap: 12px;
  align-items: end;
  border: 1px solid var(--line);
  border-left: 3px solid var(--orange);
  background: rgba(255,255,255,0.03);
  padding: 12px;
  margin: 0 0 12px;
}
.leadership-packet-toolbar label {
  margin: 0;
}
.leadership-packet-toolbar label span {
  display: block;
  font-size: 0.72rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}
.leadership-packet-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.leadership-packet-status {
  grid-column: 1 / -1;
}
.stage-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border: 1px solid var(--line);
  margin-right: 6px;
  margin-bottom: 6px;
  font-size: 0.73rem;
}
.stage-dot {
  width: 9px;
  height: 9px;
  border-radius: 0;
  display: inline-block;
}
.dot-budgetary { background: #38d9d9; }
.dot-pipeline { background: #1e88e5; }
.dot-expected { background: #fb8c00; }
.dot-commit { background: #fdd835; }
.dot-won { background: #00b050; }
.dot-lost { background: #ff1f1f; }
.dot-revised { background: #8792a2; }
.report-row {
  display: grid;
  grid-template-columns: minmax(140px, 220px) 1fr 90px;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
}
.report-row-compact {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 2px 10px;
}
.report-row-compact > div:first-child {
  flex: 1 1 100%;
  min-width: 0;
}
.report-row-compact .report-value {
  flex: 0 1 auto;
}
.report-bar {
  height: 14px;
  display: flex;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--line);
  overflow: hidden;
}
.bar-seg { height: 100%; min-width: 0; }
.bar-budgetary { background: #38d9d9; }
.bar-pipeline { background: #1e88e5; }
.bar-expected { background: #fb8c00; }
.bar-commit { background: #fdd835; }
.bar-won { background: #0d7fd1; }
.bar-lost { background: #ff1f1f; }
.bar-revised { background: #8792a2; }
.bar-expired { background: linear-gradient(90deg, #fb8c00, #ff4d1f); }
.report-bar-single .bar-seg {
  min-width: 3px;
}
.report-value {
  text-align: right;
  font-size: 0.78rem;
  color: var(--text-2);
}
.report-donut-layout {
  display: grid;
  grid-template-columns: minmax(130px, 165px) minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}
.report-donut {
  width: min(160px, 100%);
  aspect-ratio: 1;
  border-radius: 50%;
  position: relative;
  margin: 0 auto;
  background: var(--donut-bg, conic-gradient(#00b050 0 var(--won-pct), #ff1f1f var(--won-pct) 100%));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}
.report-donut-hole {
  position: absolute;
  inset: 25%;
  border-radius: 50%;
  background: var(--card-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1px solid var(--line);
}
.report-donut-hole strong {
  font-family: var(--font-head);
  font-size: clamp(0.68rem, 1.2vw, 1.05rem);
  color: var(--text);
  line-height: 1;
  white-space: nowrap;
}
.report-donut-hole span {
  margin-top: 5px;
  color: var(--text-2);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.report-donut-summary {
  min-width: 0;
  overflow-wrap: anywhere;
}
.report-demo-chart-scroll {
  overflow-x: auto;
  margin: 8px 0 10px;
  padding-bottom: 4px;
}
.report-demo-chart {
  display: grid;
  grid-template-columns: 22px 42px minmax(260px, 1fr);
  grid-template-rows: 210px auto;
  gap: 4px 8px;
  align-items: stretch;
}
.report-demo-y-title {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  justify-self: center;
  color: var(--text);
  font-size: 0.72rem;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.report-demo-y-axis {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--text-2);
  font-size: 0.74rem;
  text-align: right;
  padding: 6px 0 22px;
}
.report-demo-plot {
  grid-column: 3;
  grid-row: 1;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(64px, 1fr);
  gap: 14px;
  align-items: stretch;
  height: 210px;
  padding: 8px 10px 0;
  border-left: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background-image: linear-gradient(to bottom, rgba(255,255,255,0.11) 1px, transparent 1px);
  background-size: 100% 25%;
}
.report-demo-bar-group {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: end;
  min-width: 0;
}
.report-demo-bar {
  position: relative;
  justify-self: center;
  align-self: end;
  width: min(110px, 100%);
  min-height: 18px;
  background: #0d7fd1;
  border: 1px solid rgba(255,255,255,0.16);
  color: #fff;
  font-weight: 700;
  font-size: 0.72rem;
}
.report-demo-bar span {
  position: absolute;
  top: 3px;
  left: 0;
  right: 0;
  text-align: center;
}
.report-demo-x-label {
  min-height: 34px;
  margin-top: 8px;
  color: var(--text);
  font-size: 0.72rem;
  line-height: 1.15;
  text-align: center;
  overflow-wrap: anywhere;
}
.report-demo-x-title {
  grid-column: 3;
  grid-row: 2;
  color: var(--text);
  font-size: 0.72rem;
  text-align: center;
}
.funnel-wrap {
  max-width: 560px;
}
.funnel-seg {
  color: #04131f;
  font-weight: 700;
  text-align: center;
  margin: 0 auto 4px;
  padding: 8px 4px;
}
.funnel-budgetary { background: #38d9d9; width: 100%; }
.funnel-pipeline { background: #1e88e5; width: 80%; }
.funnel-expected { background: #fb8c00; width: 62%; }
.funnel-commit { background: #fdd835; width: 48%; }
.past-due-wrap {
  overflow-x: auto;
}

@media (max-width: 760px) {
  .reports-grid {
    grid-template-columns: 1fr;
  }
  .leadership-packet-toolbar {
    grid-template-columns: 1fr;
  }
  .leadership-packet-actions {
    justify-content: flex-start;
  }
  .report-donut-layout {
    grid-template-columns: 1fr;
  }
  .report-demo-chart {
    grid-template-columns: 14px 28px minmax(180px, 1fr);
    gap: 4px 5px;
  }
  .report-demo-y-title {
    font-size: 0.66rem;
  }
  .report-demo-y-axis {
    font-size: 0.68rem;
  }
  .report-demo-plot {
    grid-auto-columns: minmax(54px, 1fr);
    gap: 8px;
    padding-left: 4px;
    padding-right: 4px;
  }
  .report-demo-x-label,
  .report-demo-x-title {
    font-size: 0.68rem;
  }
}

/* ── Modals ─────────────────────────────────────────────────── */
.splash-backdrop {
  position: fixed; inset: 0; z-index: 11000;
  background: rgba(5,10,20,0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.splash-backdrop[hidden] { display: none !important; }
.splash-card {
  width: min(460px,100%);
  background: var(--card);
  border: 1px solid var(--line);
  border-top: 4px solid var(--orange);
  border-radius: 0;
  box-shadow: var(--shadow-lg);
  padding: 28px;
  animation: slideUp 0.24s var(--ease) both;
}
.splash-card h2 { margin: 0 0 8px; }
@keyframes slideUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Messages ───────────────────────────────────────────────── */
.message-layout { display: grid; grid-template-columns: 1fr 1.3fr; gap: 14px; }
.message-mailbox-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.message-mailbox-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.message-box-tab.is-active {
  background: var(--card-3);
  border-color: var(--orange);
  color: var(--text);
}
.message-bulk-actions {
  margin: 8px 0 10px;
}
.message-detail {
  margin-top: 10px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--orange);
  border-radius: 0;
  background: var(--card-2);
  padding: 12px; min-height: 100px;
  white-space: pre-wrap; font-size: 0.85rem; color: var(--text-2);
}
.message-unread td { font-weight: 700; color: var(--text); }
.message-status { font-size: 0.72rem; }
.message-select-cell {
  width: 58px;
  text-align: center;
}
.message-selected td {
  background: rgba(255, 76, 30, 0.08);
}

/* ── Preview / print ────────────────────────────────────────── */
.preview { margin-top: 16px; }
.preview-shell {
  border: 1px solid var(--line);
  border-top: 3px solid var(--orange);
  border-radius: 0;
  padding: 22px;
  background: var(--card);
  position: relative; overflow: hidden;
}
body:not(.dark-mode) .preview-shell { background: #fff; color: #111827; }

.preview-watermark {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  pointer-events: none; z-index: 1;
}
.preview-watermark .wm-main {
  font-family: var(--font-head);
  font-size: clamp(3rem,9vw,6rem);
  letter-spacing: 0.28em; font-weight: 700;
  color: rgba(244,84,35,0.05); line-height: 1;
  text-transform: uppercase;
}
.preview-watermark .wm-sub {
  margin-top: 14px;
  font-size: clamp(1.1rem,3vw,2rem);
  letter-spacing: 0.16em; font-weight: 500;
  color: rgba(244,84,35,0.07); line-height: 1;
  font-family: var(--font-head); text-transform: uppercase;
}

.preview-top {
  display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  align-items: flex-start; gap: 12px;
  border-bottom: 2px solid var(--orange);
  padding-bottom: 14px; margin-bottom: 14px;
}
.preview-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.preview-title-center { display: flex; justify-content: center; align-items: center; padding-top: 8px; }
.preview-title-center h3 { font-size: 1rem; font-weight: 600; letter-spacing: 0.1em; }
.preview-logo {
  width: auto; height: 40px;
  max-width: min(200px,32vw); max-height: 40px;
  object-fit: contain; display: block;
}
.preview-company { font-size: 9.5px; line-height: 1.35; color: #667085; }
.quote-meta-top { text-align: right; font-size: 0.84rem; justify-self: end; width: 100%; max-width: 420px; margin-left: auto; overflow-wrap: anywhere; word-break: break-word; }
.quote-meta-top > div { margin-bottom: 2px; }
.validity-notice { font-size: 0.73rem; color: var(--muted); line-height: 1.3; max-width: 320px; margin-left: auto; }
.preview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.preview-box {
  border: 1px solid var(--line); border-top: 2px solid var(--orange);
  border-radius: 0; padding: 12px; background: var(--card-2);
}
.preview-box h3 { margin: 0 0 6px; font-size: 0.85rem; color: var(--orange); letter-spacing: 0.08em; }
.preview-meta { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0; font-size: 0.88rem; }

.finance-block {
  margin: 12px 0; border: 1px solid var(--line); border-top: 2px solid var(--orange);
  border-radius: 0; padding: 12px; background: var(--card-2);
}
.finance-block p { margin: 0; font-size: 0.8rem; line-height: 1.4; }
.finance-title { font-family: var(--font-head); font-weight: 500; color: var(--orange); letter-spacing: 0.06em; text-transform: uppercase; }

.verbiage-block, .warranty-block, .notes-block {
  margin: 12px 0; border: 1px solid var(--line); border-left: 3px solid var(--orange);
  border-radius: 0; padding: 12px; background: var(--card-2);
}
.verbiage-block h4, .warranty-block h4, .notes-block h4 {
  margin: 0 0 8px; color: var(--orange); letter-spacing: 0.08em;
}
.verbiage-line { font-size: 0.85rem; line-height: 1.4; margin: 1px 0; }
.warranty-block p, .notes-block p, .finance-block p { font-size: 0.85rem; line-height: 1.4; margin: 0; }

.sum {
  width: auto; min-width: 300px; max-width: 460px;
  margin-left: auto; border-collapse: collapse;
}
.sum td, .sum th { padding: 5px 8px; border-bottom: 1px solid var(--line); font-size: 0.85rem; }
.sum th { text-align: right; font-weight: 500; color: var(--text-3); }
.sum tr.total td, .sum tr.total th {
  border-top: 2px solid var(--orange);
  font-family: var(--font-head); font-size: 1rem; font-weight: 600;
  color: var(--orange); letter-spacing: 0.04em;
}
.sum tr.approval td { border-bottom: none; padding-top: 10px; }
.sum td.approval-right { text-align: right; color: var(--orange); font-size: 0.82rem; }

.liability-block { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.liability-block p { margin: 0; font-size: 0.72rem; line-height: 1.35; color: var(--muted); }
.hgac-preview-shell {
  border: 1px solid var(--line);
  border-top: 3px solid var(--orange);
  background: #fff;
  color: #111827;
  padding: 18px;
}
.hgac-preview-shell * { box-sizing: border-box; }
.hgac-preview-head {
  text-align: center;
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
  margin-bottom: 12px;
}
.hgac-brand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}
.hgac-brand-row img {
  display: block;
  object-fit: contain;
}
.hgac-brand-amrep { max-height: 38px; max-width: 210px; }
.hgac-brand-hgac { max-height: 34px; max-width: 190px; }
.hgac-preview-head h3 {
  margin: 0;
  font-size: 1.05rem;
  font-family: var(--font-head);
  letter-spacing: 0.08em;
}
.hgac-preview-head p {
  margin: 4px 0 0;
  font-size: 0.82rem;
  color: var(--muted);
}
.hgac-worksheet-note {
  font-size: 0.76rem;
  line-height: 1.35;
  color: var(--text-2);
  margin-bottom: 10px;
}
.hgac-preview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--line);
  border-bottom: none;
  margin-bottom: 12px;
}
.hgac-preview-grid .cell {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  min-height: 34px;
  padding: 8px 10px;
  font-size: 0.82rem;
  line-height: 1.35;
}
.hgac-preview-grid .cell:nth-child(2n) { border-right: none; }
.hgac-label { font-family: var(--font-head); letter-spacing: 0.05em; color: var(--text-2); }
.hgac-value { margin-top: 3px; color: #111827; font-weight: 500; }
.hgac-block {
  border: 1px solid var(--line);
  margin-bottom: 12px;
}
.hgac-block-title {
  border-bottom: 1px solid var(--line);
  background: #f8fafc;
  padding: 8px 10px;
  font-size: 0.82rem;
  font-family: var(--font-head);
  letter-spacing: 0.05em;
  color: var(--text-2);
}
.hgac-block-body { padding: 10px; }
.hgac-keyline {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  font-size: 0.82rem;
  padding: 3px 0;
}
.hgac-keyline strong:last-child { text-align: right; }
.hgac-worksheet-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}
.hgac-worksheet-table th,
.hgac-worksheet-table td {
  border: 1px solid var(--line);
  padding: 7px 8px;
  vertical-align: top;
}
.hgac-worksheet-table th {
  background: #f8fafc;
  font-family: var(--font-head);
  letter-spacing: 0.05em;
  color: var(--text-2);
  font-weight: 500;
}
.hgac-worksheet-table td.num,
.hgac-worksheet-table th.num { text-align: right; }
.hgac-worksheet-table td.center { text-align: center; }
.hgac-worksheet-subtotal {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 8px 10px;
  border-top: 1px solid var(--line);
  font-size: 0.84rem;
}
.hgac-worksheet-subtotal strong:last-child { text-align: right; }
.hgac-check-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  border: 1px solid var(--line);
  border-top: none;
  padding: 8px 10px;
  font-size: 0.8rem;
}
.hgac-check-row .percent {
  font-family: var(--font-head);
  color: var(--orange);
}
.hgac-total-grid {
  display: grid;
  grid-template-columns: 1fr 110px auto 160px;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--line);
  padding: 10px;
  margin-bottom: 12px;
}
.hgac-total-grid .qty-box,
.hgac-total-grid .money-box {
  border: 1px solid var(--line);
  min-height: 34px;
  padding: 7px 10px;
  background: #fff;
  text-align: right;
  font-weight: 600;
}
.hgac-final-total {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  border: 2px solid var(--orange);
  padding: 10px 12px;
  font-size: 0.92rem;
  font-family: var(--font-head);
  letter-spacing: 0.04em;
  color: var(--orange);
  margin-bottom: 12px;
}
.hgac-preview-foot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
body.dark-mode .hgac-preview-shell {
  background: #fff;
  color: #111827;
}
body.dark-mode .hgac-preview-grid .cell,
body.dark-mode .hgac-block,
body.dark-mode .hgac-total-grid,
body.dark-mode .hgac-check-row,
body.dark-mode .hgac-worksheet-table th,
body.dark-mode .hgac-worksheet-table td,
body.dark-mode .hgac-final-total {
  border-color: var(--line);
}
body.dark-mode .hgac-block-title,
body.dark-mode .hgac-worksheet-table th {
  background: rgba(255,255,255,0.04);
}
body.dark-mode .hgac-value,
body.dark-mode .hgac-preview-shell { color: #111827; }
body.dark-mode .hgac-total-grid .qty-box,
body.dark-mode .hgac-total-grid .money-box { background: #fff; color: #111827; }
.signature-pad-wrap {
  margin-top: 6px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: #ffffff;
  padding: 6px;
}
.signature-pad {
  width: 100%;
  height: 170px;
  display: block;
  background: #ffffff;
  touch-action: none;
  cursor: crosshair;
}
.signature-block {
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--card-2);
  padding: 10px 12px;
}
.signature-block h4 {
  margin: 0 0 6px;
  color: var(--orange);
  letter-spacing: 0.08em;
}
.signature-line {
  border-bottom: 1px solid var(--line-strong);
  min-height: 34px;
  display: flex;
  align-items: flex-end;
}
.signature-line img {
  max-height: 30px;
  width: auto;
  object-fit: contain;
}
.signature-meta {
  margin-top: 6px;
  font-size: 0.78rem;
  color: var(--text-3);
}
.internal-margin-block {
  border-color: rgba(251,191,36,0.3) !important;
  border-left-color: var(--warning) !important;
  background: var(--warning-bg) !important;
}
.internal-margin-block p { margin: 0 0 4px; color: var(--warning); font-size: 0.78rem; }
.internal-margin-block p:last-child { margin-bottom: 0; }

/* ── Approval queue ─────────────────────────────────────────── */
#approvalQueueCard { margin-top: 16px; }
#approvalQueueCard { overflow-x: auto; }
#approvalQueueTable { min-width: 1120px; }
#quotesTable { min-width: 860px; table-layout: auto; width: 100%; font-size: 0.74rem; }
#quotesTable th, #quotesTable td { white-space: normal; overflow-wrap: anywhere; word-break: break-word; line-height: 1.3; padding: 6px 7px; }
#quotesTable th:nth-child(1), #quotesTable td:nth-child(1) { width: 4%; text-align: center; padding-left: 4px; padding-right: 4px; }
#quotesTable th:nth-child(2), #quotesTable td:nth-child(2) { width: 18%; }
#quotesTable th:nth-child(3), #quotesTable td:nth-child(3) { width: 14%; }
#quotesTable th:nth-child(4), #quotesTable td:nth-child(4) { width: 8%; }
#quotesTable th:nth-child(5), #quotesTable td:nth-child(5) { width: 22%; }
#quotesTable th:nth-child(6), #quotesTable td:nth-child(6) { width: 12%; }
#quotesTable th:nth-child(7), #quotesTable td:nth-child(7) { width: 9%; }
#quotesTable th:nth-child(8), #quotesTable td:nth-child(8) { width: 1%; min-width: 170px; white-space: nowrap; overflow-wrap: normal; word-break: normal; }
#quotesTable td:nth-child(8) .btn { margin: 2px 4px 2px 0; white-space: nowrap; }
#tabQuotes aside.card { overflow-x: auto; }
#printRoot h2, #printRoot h3, #printRoot .quote-meta-top { overflow-wrap: anywhere; word-break: break-word; }
#forcePwPanel h2 { margin-bottom: 6px; }

/* When quote library reaches compact width, hide Updated column */
@media (max-width: 1480px) and (min-width: 1151px) {
  #quotesTable th:nth-child(6),
  #quotesTable td:nth-child(6) { display: none; }
  #quotesTable th:nth-child(1), #quotesTable td:nth-child(1) { width: 4%; }
  #quotesTable th:nth-child(2), #quotesTable td:nth-child(2) { width: 20%; }
  #quotesTable th:nth-child(3), #quotesTable td:nth-child(3) { width: 16%; }
  #quotesTable th:nth-child(4), #quotesTable td:nth-child(4) { width: 8%; }
  #quotesTable th:nth-child(5), #quotesTable td:nth-child(5) { width: 27%; }
  #quotesTable th:nth-child(7), #quotesTable td:nth-child(7) { width: 10%; }
  #quotesTable th:nth-child(8), #quotesTable td:nth-child(8) { width: 1%; min-width: 170px; white-space: nowrap; overflow-wrap: normal; word-break: normal; }
}

/* ── Scrollbar ──────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(244,84,35,0.3); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--orange); }

/* ── Responsive 1300px ──────────────────────────────────────── */
@media (max-width: 1300px) {
  .form-inline-grid, .customer-grid, .model-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .tier-pricing-status { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tier-pricing-grid { grid-template-columns: 1fr; }
  .option-model-picker { grid-template-columns: 1fr; }
}

/* ── Responsive 1150px ──────────────────────────────────────── */
@media (max-width: 1150px) {
  .workspace-grid { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .three-col { grid-template-columns: 1fr 1fr; }
  .misc-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .tab-panel { padding: 16px; }
}

/* ── Tablet optimization (iPad) ───────────────────────────── */
@media (max-width: 1024px) {
  :root { --topbar-h: 114px; }
  .topbar { gap: 10px; padding: 10px 14px 10px calc(var(--rail-w) + 14px); }
  .brand-logo { width: 180px; height: 56px; }
  .btn { min-height: 42px; padding: 9px 14px; }
  input, select, textarea { min-height: 42px; font-size: 0.95rem; }
  .tab-panel { padding: 14px; }
  .section-head { margin-bottom: 12px; padding-bottom: 10px; }
}

/* ── Responsive 980px — icon-only rail ──────────────────────── */
@media (max-width: 980px) {
  :root { --rail-w: 54px; }
  .tab-btn .tab-label, .tab-link-btn .tab-label { display: none; }
  .tab-btn, .tab-link-btn { padding: 12px; justify-content: center; }
  .tab-btn .tab-icon, .tab-link-btn .tab-icon { width: auto; font-size: 1rem; }
  .rail-section-label { display: none; }
  .rail-truck { display: none; }
  .login-rail-item { justify-content: center; padding: 12px 8px; }
  .login-rail-item .tab-label { display: none; }
  .login-rail-item .tab-icon { width: auto; min-width: 0; font-size: 1rem; }
  .topbar { padding-left: calc(var(--rail-w) + 16px); }
  .pricing-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

/* ── Responsive 760px — bottom tab bar ──────────────────────── */
@media (max-width: 760px) {
  :root { --rail-w: 0px; --topbar-h: 108px; }
  .workspace-tabs {
    position: fixed; top: auto; bottom: 0; left: 0; right: 0;
    width: 100%; height: 58px;
    flex-direction: row; padding: 0;
    border-right: none; border-top: 3px solid var(--orange);
    gap: 0; justify-content: space-around;
    overflow-x: auto; overflow-y: hidden;
    background-image: none;
    background: var(--navy-deep);
  }
  .login-rail { display: none; }
  #loginPanel { margin-left: 0; }
  .workspace-tabs::before { height: 3px; top: -3px; }
  .workspace-tabs::after { display: none; }
  .tab-btn, .tab-link-btn {
    flex-direction: column; padding: 6px 8px;
    font-size: 0.55rem; gap: 2px; min-height: unset;
    border-left: none; border-top: 2px solid transparent;
    flex: 1; justify-content: center; align-items: center;
  }
  .rail-submenu,
  .tab-sub-btn { display: none !important; }
  .tab-btn .tab-label, .tab-link-btn .tab-label { display: block; font-size: 0.55rem; }
  .tab-btn .tab-icon, .tab-link-btn .tab-icon { font-size: 1rem; width: auto; }
  .tab-btn.active { border-top-color: var(--orange); border-left: none; }
  .rail-section-label, .rail-truck { display: none; }
  #appPanel { margin-left: 0; padding-bottom: calc(74px + env(safe-area-inset-bottom)); }
  .topbar { position: fixed; padding-left: 16px; flex-wrap: wrap; gap: 8px; height: auto; padding: calc(10px + env(safe-area-inset-top)) 16px 10px; }
  .brand-logo { position: static; width: auto; height: 36px; max-height: 36px; max-width: min(180px,50vw); padding: 0; background: transparent; border: none; }
  .layout { padding-top: calc(var(--topbar-h) + var(--header-rule-h)); }
  .two-col { grid-template-columns: 1fr; }
  .three-col { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr 1fr; }
  .preview-grid { grid-template-columns: 1fr; }
  .form-inline-grid, .customer-grid, .model-grid { grid-template-columns: 1fr; }
  .tier-pricing-status,
  .tier-pricing-grid { grid-template-columns: 1fr; }
  .option-model-picker { grid-template-columns: 1fr; }
  .auth-box { width: 100%; align-items: stretch; }
  .auth-meta-row { justify-content: flex-start; }
  .auth-actions { justify-content: flex-start; }
  .message-layout { grid-template-columns: 1fr; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .stepper-wrap { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  .step-chip { flex-shrink: 0; }
  .sticky-action-bar { position: static; border-top: 2px solid var(--orange); }
  .preview-top { grid-template-columns: 1fr; gap: 8px; }
  .preview-title-center { justify-content: flex-start; }
  .quote-meta-top { text-align: left; max-width: 100%; }
  .validity-notice { margin-left: 0; max-width: 100%; }
  .sum { max-width: 100%; min-width: 0; margin-left: 0; }
  .hgac-preview-grid,
  .hgac-preview-foot,
  .hgac-total-grid { grid-template-columns: 1fr; }
  .hgac-brand-row { flex-direction: column; align-items: flex-start; }
  .misc-grid { grid-template-columns: 1fr; }
  .button-row { flex-wrap: wrap; }
  .btn { min-height: 44px; padding: 10px 14px; font-size: 0.86rem; }
  input, select, textarea { min-height: 44px; font-size: 16px; }
  .active-user-bubble { width: 30px; height: 30px; font-size: 0.66rem; }
  #quotesTable { font-size: 0.8rem; }
  #quotesTable th, #quotesTable td { padding: 7px 6px; }
  .options-list { max-height: 38vh; }
  .option-item { grid-template-columns: 1fr; align-items: start; }
  .option-item .price-block { justify-content: flex-start; }
  .table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
  .tab-panel { padding: 12px; }
}

/* ── Print ──────────────────────────────────────────────────── */
@media print {
  body, body::before { background: #fff; animation: none; color: #111; }
  body { font-family: Arial, Helvetica, sans-serif; }
  :root {
    --orange: #f45423; --line: rgba(0,0,0,0.15);
    --text: #111; --text-2: #333; --card: #fff; --card-2: #f5f5f5;
  }
  .no-print { display: none !important; }
  .topbar, .workspace-tabs { display: none !important; }
  #appPanel { margin-left: 0; }
  .tab-panel { padding: 0; }
  #printRoot { border: none; box-shadow: none; padding: 0; margin: 0; }
  .preview-shell { border: none; box-shadow: none; border-top: 3px solid var(--orange); border-radius: 0; }
  .card { box-shadow: none; border-radius: 0; }
  .sum, .table { font-size: 10pt; }
  .preview-watermark .wm-main { color: rgba(0,0,0,0.04); }
  .preview-watermark .wm-sub { color: rgba(0,0,0,0.05); }
}

.segmented-toggle { display:flex; gap:8px; flex-wrap:wrap; }
.segmented-toggle-btn { min-width:96px; }
.segmented-toggle-btn.active { background: var(--orange); color: #fff; border-color: var(--orange); }
body.dark-mode .segmented-toggle-btn.active { background: var(--orange); color: #fff; }

.report-custom-range { display:flex; gap:12px; flex-wrap:wrap; margin-top:10px; }
.report-custom-range label { min-width:180px; }

.demo-notice {
  margin: 0 0 18px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
}

.demo-toggle-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-weight: 600;
}

.demo-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.demo-kpi-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(83, 117, 170, 0.22), rgba(35, 49, 76, 0.36));
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.demo-kpi-card strong {
  font-size: 1.8rem;
  line-height: 1;
}

.demo-availability-hint {
  border: 1px solid var(--line);
  border-left: 3px solid rgba(102, 199, 255, 0.72);
  border-radius: 12px;
  padding: 10px 12px;
  background: rgba(83, 117, 170, 0.12);
  color: var(--text-2);
}

.demo-availability-hint strong {
  color: var(--text);
}

.demo-availability-hint.is-ok {
  border-left-color: #33c27f;
}

.demo-availability-hint.is-warning {
  border-left-color: #ffb060;
}

.demo-availability-hint.is-error {
  border-left-color: #ff5d68;
  color: var(--text);
}

.demo-availability-list {
  margin: 6px 0 0;
  padding-left: 18px;
}

.demo-conflict-note {
  display: block;
  margin-top: 4px;
  color: #ffb060;
  font-size: 0.78rem;
}

.demo-layout-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  margin-bottom: 18px;
  align-items: start;
}

.demo-layout-grid.is-map-expanded,
.demo-fleet-grid,
.demo-schedule-stack {
  grid-template-columns: 1fr;
}

.demo-request-section {
  min-width: 0;
}

.demo-request-map-note {
  display: none;
}

.demo-request-section.is-map-expanded {
  padding-top: 10px;
  padding-bottom: 10px;
}

.demo-request-section.is-map-expanded .section-head {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.demo-request-section.is-map-expanded #demoRequestForm {
  display: none;
}

.demo-request-section.is-map-expanded .demo-request-map-note {
  display: block;
  margin-top: 4px;
}

.demo-map-section {
  transition: grid-column 0.18s ease, box-shadow 0.18s ease;
}

.demo-map-section.is-expanded {
  grid-column: 1 / -1;
}

.demo-fleet-section {
  grid-column: 1 / -1;
}

.demo-map-canvas {
  min-height: 420px;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  background:
    radial-gradient(circle at top, rgba(255, 255, 255, 0.08), transparent 38%),
    linear-gradient(180deg, rgba(15, 31, 57, 0.92), rgba(10, 20, 40, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.demo-map-section.is-expanded .demo-map-canvas {
  min-height: 620px;
}

.demo-map-svg {
  width: 100%;
  height: 420px;
  display: block;
  cursor: grab;
  touch-action: none;
}

.demo-map-section.is-expanded .demo-map-svg {
  height: 620px;
}

.demo-map-svg:active {
  cursor: grabbing;
}

.demo-map-controls {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 3;
}

.demo-map-control-btn {
  min-width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(8, 18, 34, 0.74);
  color: #f3f7ff;
  font-family: var(--font-display);
  font-size: 0.95rem;
  line-height: 1;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.24);
}

.demo-map-control-btn.is-reset {
  min-width: 46px;
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.demo-map-state {
  fill: rgba(255, 255, 255, 0.08);
  stroke: rgba(255, 255, 255, 0.18);
  stroke-width: 0.8;
}

.demo-map-city-label {
  fill: rgba(225, 234, 250, 0.28);
  font-size: 6px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-anchor: middle;
  pointer-events: none;
  paint-order: stroke;
  stroke: rgba(10, 20, 40, 0.5);
  stroke-width: 1px;
}

.demo-map-unit {
  fill: #ff6b2c;
  stroke: #fff;
  stroke-width: 1.6;
}

.demo-map-stop {
  fill: #66c7ff;
  stroke: rgba(255, 255, 255, 0.85);
  stroke-width: 1;
}

.demo-map-stop-group,
.demo-map-unit-group,
.demo-map-plant-group {
  cursor: pointer;
}

.demo-map-plant-group {
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

.demo-map-plant-body,
.demo-map-plant-roof,
.demo-map-plant-roofline,
.demo-map-plant-stack {
  fill: rgba(255, 255, 255, 0.96);
}

.demo-map-plant-roofline {
  stroke: rgba(255, 255, 255, 0.96);
  stroke-width: 1;
}

.demo-map-plant-window {
  fill: rgba(8, 18, 34, 0.78);
}

.demo-map-tooltip {
  position: absolute;
  display: none;
  max-width: 240px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(8, 18, 34, 0.94);
  color: #f3f7ff;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.35);
  font-size: 0.82rem;
  line-height: 1.35;
  pointer-events: none;
  z-index: 4;
}

.demo-map-tooltip div + div {
  margin-top: 2px;
}

.demo-status-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 0.77rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.demo-status-pending {
  background: rgba(255, 161, 67, 0.16);
  color: #ffb060;
}

.demo-status-approved,
.demo-status-available {
  background: rgba(64, 212, 148, 0.15);
  color: #75f0b6;
}

.demo-status-declined {
  background: rgba(255, 93, 104, 0.15);
  color: #ff8f98;
}

.demo-status-extended_loan {
  background: rgba(102, 199, 255, 0.15);
  color: #91dbff;
}

.demo-action-row {
  gap: 8px;
  flex-wrap: wrap;
}

.demo-linked-quote {
  margin-top: 5px;
}

.demo-link-btn {
  min-height: 0;
  padding: 3px 7px;
  font-size: 0.74rem;
}

#demoCurrentTable th:nth-child(6),
#demoCurrentTable td:nth-child(6),
#demoScheduleTable th:nth-child(6),
#demoScheduleTable td:nth-child(6) {
  white-space: nowrap;
}

#demoCurrentTable th:last-child,
#demoCurrentTable td:last-child,
#demoScheduleTable th:last-child,
#demoScheduleTable td:last-child {
  min-width: 170px;
}

.demo-fleet-unit-cell {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 210px;
}

.demo-fleet-unit-cell > strong {
  color: var(--text);
}

.demo-fleet-schedule-summary {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--text-2);
  font-size: 0.76rem;
  line-height: 1.3;
}

.demo-fleet-schedule-line strong {
  color: var(--orange);
  font-weight: 700;
}

.demo-fleet-schedule-empty,
.demo-fleet-schedule-more {
  color: var(--text-3);
  font-size: 0.74rem;
  line-height: 1.25;
}

@media (max-width: 1080px) {
  .demo-layout-grid {
    grid-template-columns: 1fr;
  }
}

.demo-map-unit-group {
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.28));
}

.demo-map-unit-group.is-active-demo {
  filter:
    drop-shadow(0 0 7px rgba(255, 48, 48, 0.95))
    drop-shadow(0 0 14px rgba(255, 48, 48, 0.58));
}

.demo-map-unit-ring {
  fill: rgba(10, 20, 40, 0.78);
  stroke: rgba(255, 255, 255, 0.72);
  stroke-width: 1.2;
}

.demo-map-unit-ring.is-active-demo {
  stroke: #ff3838;
  stroke-width: 2.2;
  animation: demoActiveUnitPulse 1.35s ease-in-out infinite;
}

@keyframes demoActiveUnitPulse {
  0%, 100% {
    stroke-opacity: 0.75;
    filter: drop-shadow(0 0 2px rgba(255, 48, 48, 0.6));
  }
  50% {
    stroke-opacity: 1;
    filter: drop-shadow(0 0 9px rgba(255, 48, 48, 1));
  }
}

.demo-map-unit-image {
  image-rendering: auto;
}

.demo-map-error {
  min-height: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px;
  text-align: center;
  color: #ffd0d0;
  background: linear-gradient(180deg, rgba(56, 22, 28, 0.72), rgba(20, 14, 18, 0.92));
  border: 1px solid rgba(255, 121, 121, 0.25);
  border-radius: 18px;
}

.demo-map-error strong {
  color: #ffb8b8;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-map-fallback {
  min-height: 420px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(18, 35, 61, 0.96), rgba(9, 18, 34, 0.98)),
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.06), transparent 30%);
}

.demo-map-section.is-expanded .demo-map-fallback {
  min-height: 620px;
}

.demo-map-fallback-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px 0;
  color: #d7e5ff;
}

.demo-map-fallback-stage {
  position: relative;
  height: 372px;
  margin: 10px 12px 12px;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)),
    repeating-linear-gradient(90deg, transparent, transparent 79px, rgba(255,255,255,0.04) 80px),
    repeating-linear-gradient(0deg, transparent, transparent 59px, rgba(255,255,255,0.04) 60px);
}

.demo-map-section.is-expanded .demo-map-fallback-stage {
  height: 572px;
}

.demo-map-fallback-marker,
.demo-map-fallback-stop {
  position: absolute;
  transform: translate(-50%, -50%);
}

.demo-map-fallback-marker {
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.demo-map-fallback-marker.is-active-demo .demo-map-fallback-ring {
  border-color: #ff3838;
  box-shadow: 0 0 0 2px rgba(255, 56, 56, 0.55), 0 0 18px rgba(255, 56, 56, 0.9);
  animation: demoFallbackActiveUnitPulse 1.35s ease-in-out infinite;
}

@keyframes demoFallbackActiveUnitPulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(255, 56, 56, 0.45), 0 0 10px rgba(255, 56, 56, 0.65); }
  50% { box-shadow: 0 0 0 4px rgba(255, 56, 56, 0.78), 0 0 24px rgba(255, 56, 56, 1); }
}

.demo-map-fallback-ring {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 38px;
  height: 38px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: rgba(10, 20, 40, 0.78);
  border: 1px solid rgba(255,255,255,0.72);
  box-shadow: 0 4px 10px rgba(0,0,0,0.28);
}

.demo-map-fallback-icon {
  position: relative;
  display: block;
  width: 36px;
  height: 24px;
  object-fit: contain;
  z-index: 1;
}

.demo-map-fallback-dot,
.demo-map-fallback-stop {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #66c7ff;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.7);
}

.demo-map-fallback-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.demo-map-fallback-land {
  fill: rgba(116, 141, 176, 0.15);
}

.demo-map-fallback-outline {
  fill: none;
  stroke: rgba(190, 210, 240, 0.38);
  stroke-width: 2;
}

.demo-unit-page-shell {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.demo-unit-page-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.demo-unit-page-chip {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.03);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.demo-unit-page-chip strong {
  font-size: 1rem;
}

.demo-unit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.demo-unit-card h4 {
  margin-bottom: 12px;
}

.demo-unit-card textarea,
.demo-unit-card input,
.demo-unit-card select {
  width: 100%;
}

.demo-unit-pm-table input,
.demo-unit-pm-table select {
  min-width: 100px;
}

.demo-reschedule-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(6, 12, 26, 0.68);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.demo-reschedule-modal {
  width: min(620px, calc(100vw - 32px));
  border: 1px solid var(--line-strong);
  border-top: 3px solid var(--orange);
  background: var(--card);
  color: var(--text);
  box-shadow: var(--shadow-lg);
  border-radius: 0 0 18px 18px;
  padding: 18px;
}

.demo-reschedule-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.demo-reschedule-head h3 {
  color: var(--text);
}

.demo-reschedule-close {
  width: 34px;
  height: 34px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  font-family: var(--font-head);
  font-size: 1rem;
  line-height: 1;
}

.demo-reschedule-close:hover {
  border-color: var(--orange);
  color: var(--orange);
  background: var(--orange-light);
}

.demo-reschedule-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.demo-reschedule-summary > div {
  border: 1px solid var(--line-2);
  background: var(--card-2);
  padding: 10px 12px;
}

.demo-reschedule-summary span {
  display: block;
  margin-bottom: 4px;
  color: var(--text-3);
  font-family: var(--font-head);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.demo-reschedule-summary strong {
  display: block;
  color: var(--text);
  font-size: 0.9rem;
}

.demo-reschedule-date-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.demo-reschedule-status {
  margin-top: 12px;
  border: 1px solid var(--line-2);
  background: rgba(255, 255, 255, 0.03);
  padding: 10px 12px;
}

.demo-reschedule-status.is-error {
  border-color: rgba(248, 113, 113, 0.55);
  background: var(--danger-bg);
  color: var(--danger);
}

.demo-reschedule-status.is-ok {
  border-color: rgba(74, 222, 128, 0.45);
  background: var(--success-bg);
  color: var(--success);
}

.demo-reschedule-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
}

@media (max-width: 680px) {
  .demo-reschedule-summary,
  .demo-reschedule-date-grid {
    grid-template-columns: 1fr;
  }
}

.demo-unit-service-form {
  margin-bottom: 12px;
}

@media (max-width: 1180px) {
  .demo-unit-grid,
  .demo-unit-page-meta {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 780px) {
  .demo-unit-grid,
  .demo-unit-page-meta {
    grid-template-columns: 1fr;
  }
}

.demo-map-fallback-gulf,
.demo-map-fallback-lake {
  fill: rgba(12, 24, 44, 0.82);
}

.home-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 18px;
}

.home-hero-card,
.home-industry-card {
  grid-column: 1 / -1;
}

.home-hero-card {
  min-height: 218px;
  border-color: rgba(244, 84, 35, 0.38);
  border-top-color: var(--orange);
  background:
    linear-gradient(90deg, rgba(8, 13, 28, 0.94) 0%, rgba(12, 21, 40, 0.86) 48%, rgba(10, 17, 32, 0.68) 100%),
    url('assets/home-hero-bg-V3_0.jpg');
  background-size: cover;
  background-position: center 62%;
  background-repeat: no-repeat;
  box-shadow: 0 22px 58px rgba(0, 0, 0, 0.28);
}

.home-hero-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 116, 67, 0.12) 0%, rgba(255, 116, 67, 0) 44%);
  pointer-events: none;
}

.home-hero-card > * {
  position: relative;
  z-index: 1;
}

.home-hero-card h2,
.home-hero-card .home-momentum-line {
  color: #fff;
}

.home-hero-card .muted,
.home-hero-card #homeUpdatedAt {
  color: rgba(232, 239, 255, 0.78);
}

.home-hero-card .btn.ghost {
  color: rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.22);
}

.home-hero-card .btn.ghost:hover {
  color: #fff;
  background: rgba(255, 116, 67, 0.2);
  border-color: rgba(255, 116, 67, 0.55);
}

.home-hero-copy {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.home-momentum-line {
  margin: 0;
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--text);
}

.home-kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.home-kpi-card {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.home-kpi-label,
.home-kpi-note,
.home-feed-meta {
  color: var(--text-3);
}

.home-kpi-label {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.home-kpi-value {
  font-size: 1.4rem;
  color: var(--text);
}

.home-kpi-note {
  font-size: 0.88rem;
  line-height: 1.4;
}

.home-accomplishments,
.home-feed-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.home-action-card {
  align-self: start;
}

.home-action-count {
  white-space: nowrap;
  font-weight: 700;
}

.home-action-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.home-action-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(255, 116, 67, 0.22);
  border-radius: 8px;
  padding: 14px 16px;
  background: rgba(255, 116, 67, 0.07);
}

.home-action-main {
  min-width: 0;
}

.home-action-meta {
  color: var(--text-3);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.home-action-item h3 {
  margin: 4px 0 6px;
  font-size: 1rem;
}

.home-action-item p {
  margin: 0 0 4px;
  color: var(--text-2);
  line-height: 1.4;
}

.home-action-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.home-action-actions .btn {
  min-width: 76px;
}

.home-action-empty {
  border: 1px dashed rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  padding: 14px 16px;
}

.home-accomplishment-item,
.home-feed-item {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.03);
}

.home-accomplishment-item {
  font-weight: 600;
  color: var(--text);
}

.home-feed-item h3 {
  margin: 4px 0 8px;
  font-size: 1rem;
}

.home-feed-item p {
  margin: 0;
  color: var(--text-2);
  line-height: 1.5;
}

.home-feed-link {
  display: inline-block;
  margin-top: 10px;
  color: #ff7443;
  font-weight: 700;
  text-decoration: none;
}

.home-feed-link:hover {
  text-decoration: underline;
}

.home-watchlists {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.home-watchlists h3 {
  margin-bottom: 10px;
}

.home-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.home-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 7px 11px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 116, 67, 0.18);
  color: var(--text);
  font-size: 0.86rem;
}

body:not(.dark-mode) .home-kpi-card,
body:not(.dark-mode) .home-action-item,
body:not(.dark-mode) .home-action-empty,
body:not(.dark-mode) .home-accomplishment-item,
body:not(.dark-mode) .home-feed-item {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(17, 24, 39, 0.08);
}

body:not(.dark-mode) .home-chip {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(244, 84, 35, 0.22);
}

body.dark-mode .home-momentum-line,
body.dark-mode .home-kpi-value,
body.dark-mode .home-accomplishment-item {
  color: #f4f7ff;
}

body.dark-mode .home-kpi-label,
body.dark-mode .home-kpi-note,
body.dark-mode .home-feed-meta {
  color: rgba(220, 230, 250, 0.68);
}

body.dark-mode .home-feed-item p {
  color: rgba(232, 239, 255, 0.84);
}

body.dark-mode .home-chip {
  color: rgba(242, 246, 255, 0.92);
}

@media (max-width: 1080px) {
  .home-grid,
  .home-watchlists,
  .home-kpi-grid {
    grid-template-columns: 1fr 1fr;
  }

  .home-hero-card,
  .home-industry-card {
    grid-column: auto;
  }
}

@media (max-width: 760px) {
  .home-grid,
  .home-watchlists,
  .home-kpi-grid,
  .home-action-item {
    grid-template-columns: 1fr;
  }

  .home-action-actions {
    justify-content: flex-start;
  }
}

#announcementsTable td:last-child {
  white-space: nowrap;
}


/* Dealer Portal */
.dealer-portal-page #dealerAuthState {
  font-size: 0.73rem;
  font-weight: 500;
  color: rgba(230, 235, 248, 0.9);
  font-family: var(--font-body);
  max-width: 520px;
  overflow-wrap: anywhere;
  word-break: break-word;
}
body:not(.dark-mode).dealer-portal-page #dealerAuthState { color: rgba(230, 235, 248, 0.9); }

#dealerLoginPanel {
  margin-left: var(--rail-w);
  flex: 1;
}

#dealerWorkspaceContent {
  margin-left: var(--rail-w);
  flex: 1;
  min-width: 0;
  display: block;
}

.dealer-main-panel { min-width: 0; }
.dealer-tab-panel { min-width: 0; }
#dealerPreviewBanner { margin: 20px 24px 0; }

.dealer-home-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

.dealer-home-hero {
  background:
    radial-gradient(circle at top right, rgba(244, 84, 35, 0.16), transparent 34%),
    linear-gradient(145deg, var(--card), var(--card-2));
}

.dealer-hero-card { overflow: hidden; }
.dealer-kpi-grid,
.dealer-home-snapshot,
.dealer-next-list,
.dealer-tool-grid,
.dealer-document-grid,
.dealer-reference-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.dealer-home-snapshot,
.dealer-next-list,
.dealer-tool-grid,
.dealer-document-grid,
.dealer-reference-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.home-kpi,
.dealer-snapshot-item,
.dealer-next-list > div,
.dealer-tool-card,
.dealer-document-card,
.dealer-reference-item {
  border: 1px solid var(--line);
  border-left: 3px solid rgba(244, 84, 35, 0.4);
  border-radius: 0 var(--r) var(--r) 0;
  background: var(--card-2);
  color: var(--text);
  padding: 13px 15px;
  min-width: 0;
}

.home-kpi,
.dealer-snapshot-item,
.dealer-next-list > div,
.dealer-document-card,
.dealer-reference-item { display: grid; gap: 5px; }

.home-kpi span,
.dealer-snapshot-item span,
.dealer-next-list span,
.dealer-tool-card span,
.dealer-document-card span,
.dealer-reference-item span,
.dealer-reference-item small {
  color: var(--text-2);
  line-height: 1.45;
}

.home-kpi strong,
.dealer-snapshot-item strong,
.dealer-tool-card strong,
.dealer-document-card strong,
.dealer-reference-item strong {
  color: var(--text);
  font-weight: 700;
}

.dealer-home-actions { margin-top: 16px; }
.dealer-preview-banner { border-left-color: var(--orange); display: flex; gap: 12px; align-items: center; }
.dealer-family-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.dealer-body-reference { margin-top: 16px; }
.dealer-safe-tool-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.dealer-tool-card,
.dealer-document-card button {
  font: inherit;
}

.dealer-tool-card {
  appearance: none;
  text-decoration: none;
  text-align: left;
  cursor: default;
}
button.dealer-tool-card { cursor: pointer; }
button.dealer-tool-card:hover,
.dealer-document-card:hover,
.dealer-reference-item:hover {
  border-left-color: var(--orange);
}

.dealer-option-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  max-height: 360px;
  overflow: auto;
  padding-right: 4px;
}

.dealer-option-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 90px;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-left: 3px solid transparent;
  border-radius: 0 var(--r) var(--r) 0;
  background: var(--card-2);
}
.dealer-option-row span { display: grid; gap: 3px; }
.dealer-option-row small { color: var(--text-2); }
.dealer-option-row input[type="number"] { min-width: 76px; }

.dealer-estimate {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.dealer-estimate div {
  border: 1px solid var(--line);
  border-left: 3px solid rgba(244, 84, 35, 0.4);
  border-radius: 0 var(--r) var(--r) 0;
  background: var(--card-2);
  padding: 12px;
  display: grid;
  gap: 4px;
}
.dealer-estimate span {
  color: var(--text-2);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.dealer-estimate strong { color: var(--text); font-size: 1.1rem; }

.dealer-hgac-notice {
  border: 1px solid rgba(244, 84, 35, 0.35);
  border-left: 3px solid var(--orange);
  border-radius: 0 var(--r) var(--r) 0;
  background: rgba(244, 84, 35, 0.09);
  color: var(--text);
  padding: 11px 13px;
  line-height: 1.45;
}

.dealer-quote-customer-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 10px;
  align-items: stretch;
}
.dealer-quote-customer-tools .customer-selection-summary {
  border: 1px solid var(--line);
  border-left: 3px solid rgba(244, 84, 35, 0.42);
  border-radius: 0 var(--r) var(--r) 0;
  background: var(--card-2);
  padding: 10px 12px;
  line-height: 1.4;
}
.dealer-customer-layout,
.dealer-customer-tables {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.dealer-customer-tables { margin-top: 16px; }
.dealer-customer-layout .subcard h3,
.dealer-customer-tables .subcard h3 {
  margin-top: 0;
}

.compact-head { align-items: baseline; }
.status-pill {
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 6px 10px;
  color: var(--text);
  background: var(--card-2);
  font-family: var(--font-head);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

body.dark-mode.dealer-portal-page .home-kpi,
body.dark-mode.dealer-portal-page .dealer-snapshot-item,
body.dark-mode.dealer-portal-page .dealer-next-list > div,
body.dark-mode.dealer-portal-page .dealer-tool-card,
body.dark-mode.dealer-portal-page .dealer-document-card,
body.dark-mode.dealer-portal-page .dealer-reference-item,
body.dark-mode.dealer-portal-page .dealer-option-row,
body.dark-mode.dealer-portal-page .dealer-quote-customer-tools .customer-selection-summary,
body.dark-mode.dealer-portal-page .dealer-estimate div {
  background: #3e5779;
}

@media (max-width: 1150px) {
  .dealer-kpi-grid,
  .dealer-safe-tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .dealer-home-snapshot,
  .dealer-next-list,
  .dealer-tool-grid,
  .dealer-document-grid,
  .dealer-reference-list,
  .dealer-option-list,
  .dealer-quote-customer-tools,
  .dealer-customer-layout,
  .dealer-customer-tables { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  #dealerLoginPanel,
  #dealerWorkspaceContent { margin-left: 0; }
  #dealerWorkspaceContent { padding-bottom: calc(74px + env(safe-area-inset-bottom)); }
  #dealerPreviewBanner { margin: 12px; }
  .dealer-kpi-grid,
  .dealer-estimate { grid-template-columns: 1fr; }
  .dealer-option-row { grid-template-columns: auto minmax(0, 1fr); }
  .dealer-option-row input[type="number"] { grid-column: 2; }
}

/* Dealer logo + quote output */
.dealer-logo-admin-cell {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
  border: 1px solid var(--line);
  border-left: 3px solid rgba(244, 84, 35, 0.42);
  border-radius: 0 var(--r) var(--r) 0;
  background: var(--card-2);
  padding: 12px;
}
.dealer-logo-preview-cell {
  min-height: 94px;
  border: 1px dashed rgba(244, 84, 35, 0.46);
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-2);
  font-family: var(--font-head);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  padding: 10px;
}
.dealer-logo-preview-cell img {
  max-width: 145px;
  max-height: 76px;
  object-fit: contain;
}
.dealer-logo-controls { display: grid; gap: 8px; }
.dealer-logo-controls input[type="color"] {
  width: 100%;
  height: 38px;
  padding: 3px;
  cursor: pointer;
}
.dealer-admin-name-cell { display: flex; align-items: center; gap: 10px; }
.dealer-admin-logo-thumb {
  width: 52px;
  height: 34px;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--line-2);
  padding: 3px;
}
.dealer-admin-logo-empty { color: var(--text-3); font-size: 0.76rem; min-width: 52px; }

.dealer-preview-card { margin-top: 16px; }
.dealer-quote-preview {
  background: #fff;
  color: #111827;
  border: 1px solid #d6dde8;
  box-shadow: 0 12px 36px rgba(0,0,0,0.18);
  padding: 18px;
  overflow-x: auto;
}
.dealer-preview-sheet { min-width: 780px; }
.dealer-preview-topline {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) 260px;
  gap: 16px;
  align-items: stretch;
  border-bottom: 3px solid var(--orange);
  padding-bottom: 13px;
}
.dealer-preview-logo-cell {
  min-height: 86px;
  border: 1px solid #cfd6e2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  padding: 8px;
  box-sizing: border-box;
}
.dealer-preview-logo-cell img {
  max-width: 170px;
  max-height: 72px;
  object-fit: contain;
}
.dealer-preview-amrep-cell {
  min-height: 86px;
  border: 1px solid #cfd6e2;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  background: #fff;
  color: #4b5563;
  font-size: 0.76rem;
  line-height: 1.35;
  padding: 8px;
  box-sizing: border-box;
}
.dealer-preview-amrep-cell img {
  max-width: 86px;
  max-height: 44px;
  object-fit: contain;
}
.dealer-preview-amrep-info { line-height: 1.35; }
.dealer-preview-logo-placeholder {
  width: 100%;
  height: 68px;
  border: 1px dashed #9aa5b5;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  font-family: var(--font-head);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.dealer-preview-title {
  display: grid;
  align-content: center;
  text-align: center;
}
.dealer-preview-title h3 {
  margin: 0;
  font-family: var(--font-head);
  font-size: 2rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #111827;
}
.dealer-preview-title p { margin: 2px 0 0; color: #4b5563; }
.dealer-preview-meta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 8px;
  font-size: 0.78rem;
  max-width: 380px;
  margin-top: 8px;
  text-align: left;
}
.dealer-preview-meta-inline {
  margin-left: auto;
  margin-right: auto;
}
.dealer-preview-meta strong { color: #111827; }
.dealer-preview-meta span { color: #4b5563; }
.dealer-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
  margin: 14px 0;
}
.dealer-preview-grid .preview-box {
  border: 1px solid #cfd6e2;
  background: #f8fafc;
  color: #111827;
  padding: 10px;
  display: grid;
  gap: 4px;
}
.dealer-preview-grid .preview-box h3 {
  margin: 0 0 3px;
  color: var(--orange);
  font-family: var(--font-head);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.dealer-preview-grid .preview-box span { color: #4b5563; }
.dealer-preview-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
}
.dealer-preview-table th,
.dealer-preview-table td {
  border: 1px solid #cfd6e2;
  padding: 8px;
  font-size: 0.84rem;
}
.dealer-preview-table th { background: #eef2f7; text-align: left; color: #111827; }
.dealer-preview-table .num { text-align: right; }
.dealer-preview-table tfoot th,
.dealer-preview-table tfoot td { background: #f8fafc; }
.dealer-preview-table .dealer-grand-total th,
.dealer-preview-table .dealer-grand-total td {
  background: #fff5f1;
  color: #111827;
  font-weight: 800;
  font-size: 0.96rem;
}
.dealer-preview-notes {
  border: 1px solid #cfd6e2;
  margin-top: 12px;
  padding: 10px;
  background: #f8fafc;
}
.dealer-preview-notes p { margin: 4px 0 0; }
.dealer-preview-disclaimer {
  margin: 13px 0 0;
  color: #5b6472;
  font-size: 0.76rem;
}

@media (max-width: 900px) {
  .dealer-logo-admin-cell { grid-template-columns: 1fr; }
}


/* Municipal bids body tool */
.municipal-bids-shell { gap: 16px; }
.municipal-bid-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.municipal-bid-controls {
  display: grid;
  grid-template-columns: auto minmax(240px, 1fr) minmax(170px, 220px) auto;
  gap: 12px;
  align-items: end;
}
.municipal-bid-category-tabs { margin-top: -4px; }
.municipal-bid-search input { min-width: 0; }
.municipal-bids-status { margin: 2px 0 4px; }
.municipal-bids-list { display: block; }
.municipal-bid-table-wrap {
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--card);
  box-shadow: var(--shadow);
}
.municipal-bid-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.municipal-bid-table th {
  background: var(--card-2);
  border-bottom: 1px solid var(--line);
  color: var(--text);
  font-family: var(--font-head);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  padding: 14px 16px;
  text-align: left;
  text-transform: uppercase;
}
.municipal-bid-table td {
  border-bottom: 1px solid var(--line);
  color: var(--text);
  padding: 16px;
  vertical-align: middle;
}
.municipal-bid-table th:nth-child(1),
.municipal-bid-table td:nth-child(1) { width: 118px; }
.municipal-bid-table th:nth-child(2),
.municipal-bid-table td:nth-child(2) { width: 240px; }
.municipal-bid-table th:nth-child(3),
.municipal-bid-table td:nth-child(3) { width: 170px; }
.municipal-bid-table th:nth-child(5),
.municipal-bid-table td:nth-child(5),
.municipal-bid-table th:nth-child(6),
.municipal-bid-table td:nth-child(6) { width: 90px; }
.municipal-bid-table th:nth-child(7),
.municipal-bid-table td:nth-child(7) { width: 140px; }
.municipal-bid-table th:nth-child(8),
.municipal-bid-table td:nth-child(8) { width: 110px; }
.municipal-bid-row:hover td { background: color-mix(in srgb, var(--card-2) 64%, transparent); }
.municipal-bid-row.is-expanded td { background: color-mix(in srgb, var(--card-2) 74%, transparent); }
.municipal-bid-agency { display: block; }
.municipal-bid-sub {
  color: var(--muted);
  display: block;
  font-size: 0.82rem;
  margin-top: 4px;
}
.municipal-bid-status {
  border-radius: var(--r-pill);
  display: inline-flex;
  font-family: var(--font-head);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  padding: 5px 9px;
  text-transform: uppercase;
  white-space: nowrap;
}
.municipal-bid-status-urgent,
.municipal-bid-status-expired {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
}
.municipal-bid-status-open {
  background: rgba(34, 197, 94, 0.12);
  color: #22c55e;
}
.municipal-bid-status-awarded {
  background: rgba(56, 189, 248, 0.13);
  color: #38bdf8;
}
.municipal-bid-status-board {
  background: rgba(244, 84, 35, 0.12);
  color: var(--orange);
}
.municipal-bid-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 8px;
}
.municipal-bid-tags span {
  background: color-mix(in srgb, var(--card-2) 85%, var(--orange));
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  font-family: var(--font-head);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  padding: 4px 7px;
}
.municipal-bid-table p { margin: 0; }
.municipal-bid-number,
.municipal-bid-action { text-align: center; }
.municipal-bid-timing { color: var(--orange); display: block; }
body.dark-mode .municipal-bid-table-wrap {
  background: #14233a;
  border-color: rgba(255,255,255,0.12);
}
body.dark-mode .municipal-bid-table th {
  background: #3a5173;
  color: #f4f7fb;
}
body.dark-mode .municipal-bid-table td {
  background: #2f4361;
  border-bottom-color: rgba(255,255,255,0.1);
  color: #e8eef8;
}
body.dark-mode .municipal-bid-row:hover td,
body.dark-mode .municipal-bid-row.is-expanded td {
  background: #354d70;
}
body.dark-mode .municipal-bid-agency,
body.dark-mode .municipal-bid-table p,
body.dark-mode .municipal-bid-number {
  color: #f4f7fb;
}
body.dark-mode .municipal-bid-sub {
  color: #b9c7dc;
}
body.dark-mode .municipal-bid-tags span {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.16);
  color: #eef3fb;
}
body.dark-mode .municipal-bid-detail-btn {
  color: #f4f7fb;
  border-color: rgba(255,255,255,0.22);
}
body.dark-mode .municipal-bid-detail-btn:hover {
  background: rgba(244,84,35,0.16);
}
.municipal-bid-detail-row td {
  background: var(--card-2);
  padding: 0;
}
.municipal-bid-detail-panel {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1.6fr) minmax(240px, 0.8fr) auto;
  align-items: start;
  padding: 18px;
}
.municipal-bid-detail-meta {
  display: grid;
  gap: 8px;
}
.municipal-bid-detail-meta div {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 9px 10px;
}
.municipal-bid-detail-meta span {
  color: var(--muted);
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.municipal-bid-detail-meta strong { display: block; margin-top: 3px; }
.municipal-bid-scope { line-height: 1.55; }
.municipal-bid-source { text-decoration: none; }
.municipal-bids-empty {
  border: 1px dashed var(--line);
  border-radius: var(--r);
  padding: 18px;
  text-align: center;
}
body.dark-mode .municipal-bid-detail-row td {
  background: #111c30;
}
body.dark-mode .municipal-bid-detail-panel {
  color: #f4f7fb;
}
body.dark-mode .municipal-bid-detail-panel h3,
body.dark-mode .municipal-bid-detail-panel p,
body.dark-mode .municipal-bid-detail-meta strong {
  color: #f4f7fb;
}
body.dark-mode .municipal-bid-detail-meta div {
  background: rgba(255,255,255,0.045);
  border-color: rgba(255,255,255,0.14);
}
body.dark-mode .municipal-bid-detail-meta span {
  color: #b9c7dc;
}
@media (max-width: 1100px) {
  .municipal-bid-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .municipal-bid-controls { grid-template-columns: 1fr 1fr; }
  .municipal-bid-table-wrap { overflow-x: auto; }
  .municipal-bid-table { min-width: 980px; }
  .municipal-bid-detail-panel { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .municipal-bid-kpis,
  .municipal-bid-controls { grid-template-columns: 1fr; }
}