/* =========================================================
   AGEE MOTHERSHIP — DESIGN SYSTEM
   Dark, modern, industrial command-center theme.
   ========================================================= */

:root {
  /* Backgrounds */
  --bg-app: #04101A;
  --bg-app-alt: #07121C;
  --bg-panel: #0B1926;
  --bg-panel-alt: #102232;
  --bg-raised: #14293A;

  /* Borders */
  --border: #17364B;
  --border-strong: #21445C;

  /* Text */
  --text-primary: #F5F9FC;
  --text-secondary: #90A7B8;
  --text-faint: #5C7488;

  /* Service colors */
  --fire: #FF2A2A;
  --fire-strong: #ED1717;
  --water: #0B78FF;
  --water-strong: #075EE6;
  --mold: #20D45A;
  --mold-strong: #2AA100;
  --warn: #F0BB37;

  /* Semantic */
  --danger: var(--fire);
  --info: var(--water);
  --success: var(--mold);
  --pending: var(--warn);

  --radius: 13px;
  --radius-sm: 8px;
  --shadow-card: 0 4px 18px rgba(0, 0, 0, 0.35);

  --sidebar-w: 288px;
  --topbar-h: 68px;

  /* Status colors used specifically for appointment pending/confirmed
     (this app's own convention: pending reads as needs-attention red,
     confirmed reads as locked-in green — distinct from the generic
     amber "pending" used elsewhere in the product). */
  --appt-pending: var(--fire);
  --appt-confirmed: var(--mold);
}

/* Day theme — the sun/moon button in the header flips this on. Same
   tokens, lighter values; service colours darkened a touch so they
   still read on white. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg-app: #EEF3F7;
  --bg-app-alt: #E7EEF4;
  --bg-panel: #FFFFFF;
  --bg-panel-alt: #F3F7FA;
  --bg-raised: #E9EFF4;
  --border: #D5DFE8;
  --border-strong: #BCCAD6;
  --text-primary: #0B1926;
  --text-secondary: #4B6172;
  --text-faint: #7A8FA0;
  --fire: #D71C1C;
  --fire-strong: #B81212;
  --water: #0B5FD6;
  --water-strong: #094CB0;
  --mold: #178A3E;
  --mold-strong: #11702F;
  --warn: #B07A00;
  --shadow-card: 0 4px 18px rgba(12, 32, 52, 0.10);
}
:root[data-theme="light"] .status-pill { filter: saturate(0.9); }
.theme-toggle svg { width: 18px; height: 18px; }

/* Brightness — a screen-level dial (60–140%), set from the header. Applied
   on the root so fixed panels stay fixed; never applied to print. */
html { filter: brightness(var(--ui-brightness, 1)); }
@media print { html { filter: none !important; } }
/* Header freshness pill: live data · Gmail age · QuickBooks age */
.sync-wrap { position: relative; }
/* Photo picker in the daily-update draft dialog */
.photo-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; max-height: 260px; overflow: auto; padding: 4px; }
.photo-pick-item { display: flex; flex-direction: column; gap: 4px; align-items: center; font-size: 10.5px; color: var(--text-secondary); cursor: pointer; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px; }
.photo-pick-item:has(input:checked) { border-color: var(--water); background: rgba(11, 120, 255, 0.10); }
.photo-pick-item img { width: 100%; height: 72px; object-fit: cover; border-radius: 4px; }
.photo-pick-item input { width: auto; }
.sync-pill { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-panel-alt); color: var(--text-secondary); font-size: 11px; font-weight: 800; letter-spacing: 0.3px; cursor: pointer; white-space: nowrap; }
.sync-pill:hover { border-color: var(--border-strong); color: var(--text-primary); }
.sync-pill .sync-lbl + .sync-dot { margin-left: 6px; }
.sync-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-faint); flex-shrink: 0; }
.sync-dot.ok { background: var(--mold); box-shadow: 0 0 0 3px rgba(32, 212, 90, 0.15); }
.sync-dot.warn { background: var(--warn); }
.sync-dot.stale { background: var(--fire); }
.sync-dot.busy { background: var(--water); animation: syncpulse 1s ease-in-out infinite; }
.sync-dot.off { background: var(--text-faint); opacity: 0.5; }
@keyframes syncpulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.sync-pop { position: absolute; top: 40px; right: 0; z-index: 60; width: 340px; background: var(--bg-panel); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow-card); padding: 12px 14px; display: none; }
.sync-pop.open { display: block; }
.sync-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border); font-size: 12.5px; }
.sync-row:first-of-type { border-top: none; }
.sync-row > div { flex: 1; }
.sync-row .sync-dot { margin-top: 5px; }
.sync-list { margin: 8px 0 6px; padding-left: 18px; font-size: 12.5px; line-height: 1.5; }
.sync-list.muted { color: var(--text-secondary); }
@media (max-width: 900px) { .sync-pill .sync-lbl { display: none; } .sync-pill { gap: 4px; padding: 0 8px; } }
.brightness-wrap { position: relative; }
.brightness-wrap .icon-btn svg { width: 18px; height: 18px; }
.brightness-pop {
  position: absolute; top: 44px; right: 0; z-index: 60; width: 240px;
  background: var(--bg-panel); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card); padding: 12px 14px; display: none;
}
.brightness-pop.open { display: block; }
.brightness-pop .brightness-row { display: flex; align-items: center; gap: 10px; }
.brightness-pop input[type="range"] { flex: 1; accent-color: var(--water); }
.brightness-pop .brightness-val { min-width: 42px; text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; font-size: 12.5px; }
.brightness-pop .brightness-label { font-size: 10px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase; color: var(--text-faint); margin-bottom: 6px; display: flex; justify-content: space-between; align-items: center; }
.brightness-pop .brightness-label button { font-size: 10px; padding: 2px 8px; }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-app);
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

#app-root { min-height: 100vh; }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }

/* Baseline size for every inline icon — an <svg> with only a viewBox
   and no width/height otherwise renders at the browser's ~300x150
   replaced-element default. More specific rules below (.icon-btn svg,
   .qa-btn svg, etc.) override this where a different size is wanted. */
svg { width: 16px; height: 16px; flex-shrink: 0; vertical-align: -3px; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; }

/* =========================================================
   LAYOUT SHELL
   ========================================================= */

.shell {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--bg-app-alt);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; bottom: 0; left: 0;
  z-index: 40;
}

.sidebar-brand {
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.brand-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-logo-img {
  width: 46px; height: 46px;
  object-fit: contain;
  border-radius: 9px;
  background: #050d15;
  flex-shrink: 0;
}

.brand-text .brand-title {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.5px;
  line-height: 1.15;
}

.brand-text .brand-sub {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: var(--text-secondary);
  text-transform: uppercase;
  margin-top: 2px;
}

.brand-tagline {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.4px;
  line-height: 1.5;
}

.brand-tagline .tw-restore { color: var(--fire); }
.brand-tagline .tw-recover { color: var(--water); }
.brand-tagline .tw-rebuild { color: var(--mold); }

.brand-tagline-sub {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 13.5px;
  font-weight: 600;
  border: 1px solid transparent;
  transition: background 0.12s ease, color 0.12s ease;
}

.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }

.nav-item:hover {
  background: var(--bg-panel);
  color: var(--text-primary);
}

.nav-item.active {
  background: rgba(11, 120, 255, 0.12);
  border-color: rgba(11, 120, 255, 0.35);
  color: var(--text-primary);
}

.nav-item.active svg { color: var(--water); }

.nav-item .badge-soon {
  margin-left: auto;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--warn);
  border: 1px solid rgba(240, 187, 55, 0.4);
  padding: 2px 6px;
  border-radius: 5px;
}

.nav-item .badge-count {
  margin-left: auto;
  background: var(--fire);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  min-width: 18px;
  text-align: center;
  padding: 2px 6px;
  border-radius: 20px;
}

.nav-item .badge-gc {
  margin-left: auto;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--mold);
  border: 1px solid rgba(32, 212, 90, 0.4);
  padding: 2px 6px;
  border-radius: 5px;
}

.sidebar-footer {
  border-top: 1px solid var(--border);
  padding: 16px 18px 20px;
  font-size: 11.5px;
  color: var(--text-secondary);
}

.sidebar-footer .emergency-tag {
  color: var(--fire);
  font-weight: 800;
  letter-spacing: 0.6px;
  font-size: 11px;
  margin-bottom: 2px;
}

.sidebar-footer .emergency-phone {
  color: var(--text-primary);
  font-weight: 800;
  font-size: 17px;
  margin-bottom: 12px;
  display: block;
}

.sidebar-footer .cred-line {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.cred-chip {
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  padding: 2px 6px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--text-secondary);
}

.sidebar-footer .lic-num {
  font-size: 10.5px;
  color: var(--text-faint);
  font-weight: 600;
}

/* Main column */
.main-col {
  margin-left: var(--sidebar-w);
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.topbar {
  min-height: 92px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-app-alt);
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 14px 24px;
  position: sticky;
  top: 0;
  z-index: 30;
  flex-wrap: wrap;
}

.topbar-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1 1 auto;
  min-width: 0;
}

.topbar-brand img {
  width: 54px; height: 54px;
  object-fit: contain;
  border-radius: 10px;
  background: #050d15;
  flex-shrink: 0;
}

.topbar-brand .tb-app-name {
  font-size: 46px;
  font-weight: 800;
  letter-spacing: 0.2px;
  color: var(--text-secondary);
  white-space: nowrap;
  line-height: 1;
}

.topbar-brand .tb-app-name-accent {
  font-weight: 900;
  background: linear-gradient(90deg, var(--fire) 0%, var(--water) 50%, var(--mold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.bell-wrap { position: relative; margin-left: auto; }

.bell-badge {
  position: absolute;
  top: -4px; right: -4px;
  background: var(--fire);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  width: 16px; height: 16px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}

.user-chip-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: none;
  padding: 0;
  color: inherit;
}

.user-chip .chevron { color: var(--text-faint); width: 14px; height: 14px; flex-shrink: 0; }

.clock-widget {
  text-align: right;
  padding-left: 18px;
  border-left: 1px solid var(--border);
  flex-shrink: 0;
}

.clock-widget .cw-date { font-size: 11.5px; font-weight: 700; color: var(--text-secondary); }
.clock-widget .cw-time { font-size: 18px; font-weight: 900; margin-top: 2px; font-variant-numeric: tabular-nums; }
.clock-widget .cw-quote { font-size: 11px; font-style: italic; color: var(--text-secondary); margin-top: 6px; max-width: 200px; }
.clock-widget .cw-quote-by { font-size: 10px; color: var(--text-faint); margin-top: 2px; }

.global-search {
  flex: 0 1 260px;
  max-width: 260px;
  position: relative;
}

.global-search input {
  width: 100%;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  padding: 9px 14px 9px 36px;
  font-size: 13px;
}

.global-search input::placeholder { color: var(--text-faint); }
.global-search input:focus { outline: none; border-color: var(--water); }

.global-search .search-icon {
  position: absolute;
  left: 11px; top: 50%;
  transform: translateY(-50%);
  color: var(--text-faint);
  width: 15px; height: 15px;
}

.global-search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
  max-height: 420px;
  overflow-y: auto;
  z-index: 50;
}
.gsr-group-label {
  padding: 8px 12px 4px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-faint);
}
.gsr-item { padding: 8px 12px; cursor: pointer; }
.gsr-item:hover { background: var(--bg-panel-alt); }
.gsr-item-title { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.gsr-item-sub { font-size: 11.5px; color: var(--text-secondary); margin-top: 2px; }
.gsr-empty { padding: 14px 12px; font-size: 12.5px; color: var(--text-faint); }

.user-chip {
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--bg-panel-alt);
  border: 1px solid var(--border-strong);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 13px;
  color: var(--water);
}

.user-meta .user-name { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.user-meta .user-role { font-size: 11px; color: var(--text-secondary); }

.page-content {
  padding: 24px 28px 60px;
  width: 100%;
}

/* =========================================================
   COMPONENTS
   ========================================================= */

.panel {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  /* Wide content (tables) scrolls inside the panel instead of the
     whole page scrolling sideways — see .data-table's min-width. */
  overflow-x: auto;
}

.panel-pad { padding: 18px 20px; }

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

.panel-title {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.3px;
}

.panel-title .count-pill {
  margin-left: 8px;
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 700;
}

/* Hero banner — real AGEE creative (extracted from the supplied
   reference), not CSS-drawn. See assets/agee-hero-creative.png. */
.hero {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 22px;
  box-shadow: var(--shadow-card);
  background: var(--bg-panel);
  line-height: 0;
}

.hero img {
  width: 100%;
  height: auto;
  display: block;
}

/* KPI cards */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}

.kpi-card {
  min-width: 0;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow-card);
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.kpi-card.clickable { cursor: pointer; transition: border-color 0.12s ease, transform 0.12s ease; }
.kpi-card.clickable:hover { border-color: var(--water); transform: translateY(-1px); }

.kpi-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.kpi-icon svg { width: 20px; height: 20px; }
.kpi-icon.water { background: rgba(11,120,255,0.15); color: var(--water); }
.kpi-icon.fire { background: rgba(255,42,42,0.15); color: var(--fire); }
.kpi-icon.mold { background: rgba(32,212,90,0.15); color: var(--mold); }
.kpi-icon.warn { background: rgba(240,187,55,0.15); color: var(--warn); }
.kpi-icon.neutral { background: var(--bg-panel-alt); color: var(--text-secondary); }

.kpi-body { flex: 1; min-width: 0; }
.kpi-value { font-size: 25px; font-weight: 900; line-height: 1.05; font-variant-numeric: tabular-nums; }
.kpi-card > div:last-child { min-width: 0; }
.kpi-label { font-size: 11.5px; font-weight: 700; color: var(--text-secondary); margin-top: 2px; overflow-wrap: anywhere; }
.kpi-sub { font-size: 10.5px; font-weight: 700; margin-top: 6px; }
.kpi-sub.positive { color: var(--mold); }
.kpi-sub.neutral { color: var(--text-secondary); }
.kpi-sub.pending { color: var(--text-faint); font-weight: 600; font-style: italic; }

/* Dashboard grid */
.dash-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 18px;
  align-items: start;
}

.dash-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

.tab-row {
  display: flex;
  gap: 6px;
  padding: 10px 14px 0;
}

.tab-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 7px;
}

.tab-btn.active {
  background: var(--bg-panel-alt);
  color: var(--text-primary);
  border-color: var(--border-strong);
}

.list-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 8px;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  border-left: 3px solid transparent;
}

.list-row:last-child { border-bottom: none; }
.list-row.accent-pending { border-left-color: var(--appt-pending); }
.list-row.accent-confirmed { border-left-color: var(--appt-confirmed); }
.list-row.accent-attention { border-left-color: var(--fire); }

.row-time {
  width: 64px;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 800;
  color: var(--water);
}

/* flex-basis keeps title/subtitle on their own line once trailing
   controls (pill, buttons) no longer fit beside them — this is what
   stops the row's action buttons from being crammed illegibly small
   on a phone-width screen. */
.row-main { flex: 1 1 140px; min-width: 0; }
.row-title { font-size: 13px; font-weight: 700; }
.row-sub { font-size: 11.5px; color: var(--text-secondary); margin-top: 2px; }

.addr-link {
  color: var(--water);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.addr-link:hover { text-decoration: underline; }
.addr-link svg { width: 11px; height: 11px; flex-shrink: 0; }

.status-pill {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.4px;
  padding: 4px 9px;
  border-radius: 20px;
  text-transform: uppercase;
  white-space: nowrap;
}

.status-pill.pending { color: var(--warn); background: rgba(240,187,55,0.12); }
.status-pill.confirmed { color: var(--water); background: rgba(11,120,255,0.12); }
.status-pill.completed { color: var(--mold); background: rgba(32,212,90,0.12); }
.status-pill.cancelled { color: var(--fire); background: rgba(255,42,42,0.12); }
.status-pill.attention { color: var(--fire); background: rgba(255,42,42,0.12); }
.status-pill.neutral { color: var(--text-secondary); background: var(--bg-panel-alt); }

.btn {
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  font-weight: 700;
  padding: 8px 14px;
  border: 1px solid var(--border-strong);
  background: var(--bg-panel-alt);
  color: var(--text-primary);
}

.btn:hover { border-color: var(--water); }
.btn.btn-sm { padding: 5px 10px; font-size: 11.5px; }
.btn.btn-primary { background: var(--water); border-color: var(--water-strong); color: #fff; }
.btn.btn-primary:hover { background: var(--water-strong); }
.btn.btn-danger { background: transparent; border-color: rgba(255,42,42,0.5); color: var(--fire); }
.btn.btn-danger-solid { background: var(--fire); border-color: var(--fire-strong); color: #fff; }
.btn.btn-danger-solid:hover { background: var(--fire-strong); }
.btn.btn-ghost { background: transparent; border-color: transparent; color: var(--text-secondary); }
.btn.btn-ghost:hover { color: var(--text-primary); border-color: var(--border-strong); }

.icon-btn {
  width: 30px; height: 30px;
  border-radius: 7px;
  border: 1px solid var(--border-strong);
  background: var(--bg-panel-alt);
  color: var(--text-secondary);
  display: flex; align-items: center; justify-content: center;
}
.icon-btn:hover { color: var(--text-primary); }
.icon-btn svg { width: 15px; height: 15px; }

/* ---- Subcontractor project-assignment chips (Team page) ---- */
.sub-assign-list { display: flex; flex-direction: column; gap: 4px; }
.sub-assign-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; }
.chip-icon-btn { width: 18px; height: 18px; border-radius: 5px; border: none; background: transparent; color: var(--text-faint); display: inline-flex; align-items: center; justify-content: center; padding: 0; flex-shrink: 0; }
.chip-icon-btn:hover { color: var(--text-primary); background: var(--bg-panel-alt); }
.chip-icon-btn svg { width: 12px; height: 12px; }

/* Calendar */
.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 0;
}

.cal-head .cal-month { font-size: 13px; font-weight: 800; }

.cal-nav-btn {
  width: 26px; height: 26px;
  border-radius: 6px;
  border: 1px solid var(--border-strong);
  background: var(--bg-panel-alt);
  color: var(--text-secondary);
  display: flex; align-items: center; justify-content: center;
}
.cal-nav-btn:hover { color: var(--text-primary); }
.cal-nav-btn svg { width: 13px; height: 13px; }

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  padding: 14px 16px 18px;
}

.cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 0 16px 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.cal-legend-item { display: flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; color: var(--text-secondary); }
.cal-legend-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

.cal-dow {
  font-size: 10px;
  font-weight: 800;
  color: var(--text-faint);
  text-align: center;
  padding-bottom: 6px;
  letter-spacing: 0.5px;
}

.cal-cell {
  aspect-ratio: 1;
  border-radius: 8px;
  background: var(--bg-panel-alt);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-secondary);
  position: relative;
}

.cal-cell.muted { opacity: 0.35; }
.cal-cell.today { border-color: var(--water); color: var(--text-primary); }
.cal-cell.clickable { cursor: pointer; transition: border-color 0.12s ease, background 0.12s ease; }
.cal-cell.clickable:hover { border-color: var(--water); background: var(--bg-raised); color: var(--text-primary); }

.cal-dot {
  position: absolute;
  bottom: 5px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--water);
}

/* Donut chart (Projects by Type) */
.donut-wrap { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; padding: 18px 20px 22px; }
.donut-svg { width: 120px; height: 120px; flex-shrink: 0; }
.donut-center-value { font-size: 22px; font-weight: 900; fill: var(--text-primary); }
.donut-center-label { font-size: 8.5px; font-weight: 700; fill: var(--text-secondary); letter-spacing: 0.5px; }

.donut-legend { flex: 1; display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.donut-legend-row { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--text-secondary); }
.donut-legend-row.clickable { cursor: pointer; border-radius: 6px; margin: 0 -6px; padding: 4px 6px; transition: background 0.12s ease, color 0.12s ease; }
.donut-legend-row.clickable:hover { background: var(--bg-panel-alt); color: var(--text-primary); }
.donut-legend-row .dl-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.donut-legend-row .dl-count { margin-left: auto; color: var(--text-primary); font-weight: 800; }

/* Quick actions */
.quick-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.qa-btn {
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.qa-btn svg { width: 20px; height: 20px; }

.qa-btn.qa-green { background: linear-gradient(135deg, var(--mold), var(--mold-strong)); color: #fff; }
.qa-btn.qa-blue { background: linear-gradient(135deg, var(--water), var(--water-strong)); color: #fff; }
.qa-btn.qa-red { background: linear-gradient(135deg, var(--fire), var(--fire-strong)); color: #fff; }
.qa-btn.qa-neutral { background: var(--bg-panel-alt); border-color: var(--border-strong); color: var(--text-primary); }
.qa-btn.qa-neutral:hover { border-color: var(--water); }

/* Tables */
.data-table { width: 100%; min-width: 560px; border-collapse: collapse; }
.data-table th {
  text-align: left;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.data-table td {
  padding: 13px 16px;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.data-table tr:last-child td { border-bottom: none; }
/* Icon buttons inside a cell sit on one line beside the text (and beside
   each other) instead of stacking, so rows stay one line tall. */
.data-table td .icon-btn { display: inline-flex; vertical-align: middle; margin-right: 4px; }
.data-table td .icon-btn:last-child { margin-right: 0; }
/* A cell that holds text plus its action buttons: one line, never wrapped. */
.data-table td .cell-row { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.data-table tr.clickable:hover { background: var(--bg-panel-alt); cursor: pointer; }

.drag-handle-cell { width: 20px; padding-right: 0 !important; cursor: grab; }
.drag-handle { color: var(--text-faint); }
.draggable-row:hover .drag-handle-cell { color: var(--text-secondary); }
.draggable-row.dragging { opacity: 0.4; }
.drop-zone { transition: outline-color 0.12s, background 0.12s; outline: 2px dashed transparent; outline-offset: -2px; }
.drop-zone.drop-hover { outline-color: var(--water); background: rgba(11,120,255,0.05); }

.next-action {
  font-size: 12px;
  font-weight: 700;
  color: var(--warn);
  display: flex;
  align-items: center;
  gap: 6px;
}

.type-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.type-dot.water { background: var(--water); }
.type-dot.fire { background: var(--fire); }
.type-dot.mold { background: var(--mold); }
.type-dot.recon { background: var(--text-primary); }
.type-dot.other { background: var(--text-faint); }

/* Filter bar */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}

.page-title { font-size: 22px; font-weight: 900; }
.page-subtitle { font-size: 12.5px; color: var(--text-secondary); margin-top: 3px; }

/* Tabs (project detail) */
.detail-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
  overflow-x: auto;
}

.detail-tab {
  padding: 10px 16px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-secondary);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

.detail-tab.active { color: var(--text-primary); border-color: var(--water); }

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

.revenue-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.revenue-hero-figure {
  background: var(--bg-panel-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 18px 20px;
}
/* Financial Control Center */
.fin-tabs { flex-wrap: wrap; }
@media (max-width: 860px) {
  /* Long tab strips scroll sideways inside their own row on a phone. */
  .detail-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; padding-bottom: 4px; }
  .detail-tabs .detail-tab { white-space: nowrap; flex: 0 0 auto; }
}
.fin-tabs .badge-soon { margin-left: 4px; }
.fin-period-bar { margin-bottom: 18px; align-items: center; flex-wrap: wrap; row-gap: 6px; }
@media (max-width: 860px) {
  .fin-period-bar .scope-total-fine { flex-basis: 100%; margin-left: 0 !important; }
  .fin-custom-range { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
}
.fin-ne { color: var(--text-faint); font-weight: 600; font-size: 0.85em; }
.fin-unit { font-size: 0.6em; font-weight: 600; color: var(--text-faint); }
.fin-kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: 14px; }
.fin-card { background: var(--bg-panel-alt); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; min-width: 0; }
.fin-card.open { border-color: var(--water); }
.fin-card.accent-fire .fin-card-value { color: var(--fire); }
.fin-card.accent-water .fin-card-value { color: var(--water); }
.fin-card.accent-mold .fin-card-value { color: var(--mold); }
.fin-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fin-card-label { font-size: 10.5px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-faint); }
.fin-card-value { font-size: 24px; font-weight: 900; margin-top: 6px; font-variant-numeric: tabular-nums; word-break: break-word; }
.fin-card-sub { font-size: 11.5px; color: var(--text-secondary); margin-top: 4px; }
.fin-info { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--border); background: transparent; color: var(--text-faint); font-size: 10px; font-weight: 800; cursor: pointer; flex-shrink: 0; font-family: Georgia, serif; font-style: italic; }
.fin-info:hover { border-color: var(--water); color: var(--water); }
.fin-breakdown { margin-top: 10px; border-top: 1px dashed var(--border); padding-top: 8px; }
.fin-bl { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; padding: 3px 0; }
.fin-bl-label { color: var(--text-secondary); }
.fin-bl-note { display: block; font-size: 10.5px; color: var(--text-faint); font-style: italic; }
.fin-bl-value { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.fin-bl-foot { font-size: 11px; color: var(--text-faint); margin-top: 6px; font-style: italic; }
.fin-qa-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px 22px; margin-top: 14px; }
.fin-qa { padding: 8px 0; border-bottom: 1px solid var(--border); }
.fin-q { font-size: 12px; color: var(--text-secondary); }
.fin-a { font-size: 15px; font-weight: 700; margin-top: 3px; font-variant-numeric: tabular-nums; }
.fin-a-hint { font-size: 11px; font-weight: 500; color: var(--text-faint); margin-top: 2px; }
.fin-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding-top: 0; }
.fin-filters .form-select { width: auto; }
.fin-form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px 20px; }
.fin-modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.fin-adorn { position: relative; }
.fin-adorn .fin-adorn-pre, .fin-adorn .fin-adorn-post { position: absolute; top: 50%; transform: translateY(-50%); color: var(--text-faint); font-size: 13px; font-weight: 700; pointer-events: none; }
.fin-adorn .fin-adorn-pre { left: 11px; }
.fin-adorn .fin-adorn-post { right: 11px; }
.fin-adorn .fin-adorn-pre + .form-input { padding-left: 24px; }
.fin-adorn .form-input:has(+ .fin-adorn-post) { padding-right: 26px; }
.fin-archived td { opacity: 0.55; }
.fin-detail-row td { background: var(--bg-panel-alt); }
.fin-up { color: var(--fire); }
.fin-down { color: var(--mold); }
.fin-alert.high { border-left: 3px solid var(--fire); }
.fin-alert.medium { border-left: 3px solid var(--warn); }
.fin-alert.low { border-left: 3px solid var(--text-faint); }
.fin-custom-range { display: inline-flex; align-items: center; gap: 6px; }
.fin-custom-range .form-input { width: 140px; padding: 6px 8px; font-size: 12.5px; }
.fin-future td { opacity: 0.7; }
.fin-actual { text-align: right; margin-top: 3px; }
.fin-budget-input { width: 120px; text-align: right; padding: 5px 8px; font-size: 12.5px; }
.fin-budget-table td { vertical-align: top; }
.fin-notes { margin: 0; padding-left: 18px; font-size: 12px; color: var(--text-secondary); }
.fin-notes li { margin: 3px 0; }
.fin-report-total td { border-top: 2px solid var(--border); }

/* Clickable "Active Projects" counts */
.unit-cell { white-space: nowrap; }
.unit-pill { display: inline-block; padding: 3px 9px; border-radius: 999px; background: var(--bg-raised); border: 1px solid var(--border-strong); font-weight: 800; font-variant-numeric: tabular-nums; font-size: 12.5px; }
.count-link { display: inline-block; min-width: 28px; text-align: center; padding: 3px 10px; border-radius: 999px; background: rgba(11, 120, 255, 0.14); color: var(--water); font-weight: 800; cursor: pointer; border: 1px solid rgba(11, 120, 255, 0.35); }
.count-link:hover { background: var(--water); color: #fff; }
.count-zero { color: var(--text-faint); }

/* Estimates — one folder per client */
.est-folder-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; cursor: pointer; user-select: none; }
.est-folder-head:hover { background: var(--bg-panel-alt); }
.est-folder-caret { display: inline-flex; color: var(--text-faint); transition: transform 0.15s ease; }
.est-folder-caret svg { width: 16px; height: 16px; }
.est-folder.open .est-folder-caret { transform: rotate(90deg); color: var(--water); }
.est-folder.open .est-folder-head { border-bottom: 1px solid var(--border); }
.est-folder .row-title { font-size: 14px; font-weight: 800; }

/* Mothership Assistant */
.ai-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 60;
  display: flex; align-items: center; gap: 8px;
  padding: 12px 18px; border-radius: 999px; border: 1px solid var(--border);
  background: linear-gradient(135deg, var(--water), var(--mold)); color: #fff;
  font-weight: 800; font-size: 13px; letter-spacing: 0.3px; cursor: pointer;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}
.ai-fab svg { width: 16px; height: 16px; }
.ai-fab:hover { transform: translateY(-1px); }
body.ai-open .ai-fab { display: none; }
.ai-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 400px; max-width: 100vw; z-index: 70;
  background: var(--bg-panel); border-left: 1px solid var(--border);
  box-shadow: -16px 0 40px rgba(0, 0, 0, 0.35);
  display: flex; flex-direction: column;
}
.ai-head { display: flex; justify-content: space-between; gap: 10px; padding: 16px 16px 12px; border-bottom: 1px solid var(--border); }
.ai-title { font-size: 15px; font-weight: 900; }
.ai-sub { font-size: 11.5px; color: var(--text-secondary); margin-top: 3px; line-height: 1.4; }
.ai-head-acts { display: flex; gap: 4px; align-items: flex-start; flex-shrink: 0; }
.ai-head-acts .icon-btn.active { color: var(--mold); border-color: var(--mold); }
.ai-messages { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.ai-msg { display: flex; flex-direction: column; gap: 6px; }
.ai-msg.user { align-items: flex-end; }
.ai-bubble { max-width: 92%; padding: 10px 12px; border-radius: 12px; font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.ai-msg.user .ai-bubble { background: var(--water); color: #fff; border-bottom-right-radius: 4px; }
.ai-msg.assistant .ai-bubble { background: var(--bg-panel-alt); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.ai-thinking { color: var(--text-faint); font-style: italic; }
.ai-error { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border); color: var(--fire); font-size: 12px; }
.ai-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.ai-chip { font-size: 11px; padding: 3px 8px; border-radius: 999px; background: rgba(32, 212, 90, 0.12); color: var(--mold); border: 1px solid rgba(32, 212, 90, 0.3); }
.ai-empty { margin: auto 0; text-align: center; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.ai-empty-title { font-size: 14px; font-weight: 700; color: var(--text-secondary); }
.ai-quick { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.ai-voice-error { padding: 8px 16px; font-size: 12px; color: var(--warn); border-top: 1px solid var(--border); }
.ai-composer-wrap { border-top: 1px solid var(--border); }
.ai-attach-row { display: flex; align-items: center; gap: 8px; padding: 10px 16px 0; flex-wrap: wrap; }
.ai-attach-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 4px 10px; border-radius: 999px; background: var(--bg-panel-alt); border: 1px solid var(--border); color: var(--text-secondary); max-width: 100%; }
.ai-attach-chip svg { width: 13px; height: 13px; flex-shrink: 0; }
.ai-msg.user .ai-attach-chip { align-self: flex-end; }
.ai-drawer.ai-dropping { outline: 2px dashed var(--water); outline-offset: -8px; }
.ai-composer { padding: 12px 16px; display: flex; gap: 8px; align-items: flex-end; }
.ai-composer .form-textarea { flex: 1; resize: none; min-height: 44px; }
.ai-composer-acts { display: flex; gap: 6px; align-items: center; }
.ai-listening { color: var(--fire) !important; border-color: var(--fire) !important; animation: ai-pulse 1s ease-in-out infinite; }
@keyframes ai-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 42, 42, 0.5); } 50% { box-shadow: 0 0 0 8px rgba(255, 42, 42, 0); } }
@media (max-width: 720px) {
  .ai-drawer { width: 100vw; }
  .ai-fab { bottom: 78px; right: 14px; padding: 10px 14px; }
}
@media print { .ai-fab, .ai-drawer { display: none !important; } }
@media print {
  body.fin-printing .sidebar, body.fin-printing .topbar, body.fin-printing .mobile-topbar, body.fin-printing .mobile-bottom-nav,
  body.fin-printing .app-footer, body.fin-printing .page-header, body.fin-printing .detail-tabs, body.fin-printing .fin-period-bar,
  body.fin-printing .conn-banner, body.fin-printing #page-content > .panel:not(.fin-report) { display: none !important; }
  body.fin-printing .fin-report { border: none; box-shadow: none; background: #fff; color: #111; }
  body.fin-printing .fin-report .data-table th, body.fin-printing .fin-report .data-table td { color: #111; border-color: #ccc; }
  body.fin-printing .fin-report .panel-title, body.fin-printing .fin-report .page-subtitle, body.fin-printing .fin-notes { color: #111; }
}
.fin-compare th .icon-btn { width: 22px; height: 22px; margin-left: 4px; vertical-align: middle; }
.fin-compare th .icon-btn svg { width: 12px; height: 12px; }
.revenue-hero-figure.clickable { cursor: pointer; transition: border-color 0.12s ease, transform 0.12s ease; }
.revenue-hero-figure.clickable:hover { border-color: var(--water); transform: translateY(-1px); }
.revenue-hero-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-faint);
}
.revenue-hero-value {
  font-size: 34px;
  font-weight: 900;
  color: var(--mold);
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.revenue-hero-value.muted { color: var(--fire); }
.revenue-hero-sub {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
}

.inv-theme-swatch {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
}
.inv-theme-swatch.active {
  border-color: var(--text-primary);
  box-shadow: 0 0 0 2px var(--bg-panel);
}

.inv-tmpl-preview-wrap { min-width: 0; }
.inv-tmpl-preview {
  transform: scale(0.42);
  transform-origin: top left;
  width: 238%;
  height: 240px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}

.field {
  background: var(--bg-panel-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}

.field-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text-faint);
}

.field-value { font-size: 14px; font-weight: 700; margin-top: 4px; }
/* Project Overview: every box is a live control that saves on change. */
.field.editable .form-input, .field.editable .form-select { margin-top: 6px; font-weight: 700; font-size: 13px; padding: 7px 10px; width: 100%; }
.field.editable .form-input::placeholder { font-weight: 500; font-style: italic; color: var(--text-faint); }
.field.editable .form-input:focus, .field.editable .form-select:focus { border-color: var(--water); box-shadow: 0 0 0 3px color-mix(in srgb, var(--water) 18%, transparent); }
.field.editable .fin-adorn { margin-top: 6px; }
.field.editable .fin-adorn .form-input { margin-top: 0; }
.field.editable .scope-raw { margin-top: 5px; }
.field-value.empty { color: var(--text-faint); font-weight: 500; font-style: italic; }
/* Dashboard figures that open their own breakdown page. */
.field.clickable { cursor: pointer; transition: border-color 0.12s ease, transform 0.12s ease; }
.field.clickable:hover { border-color: var(--water); transform: translateY(-1px); }
.field.clickable .field-link-hint { display: inline-block; vertical-align: middle; opacity: 0.55; }
.field.clickable .field-link-hint svg { width: 12px; height: 12px; }
.empty-note { color: var(--text-faint); font-style: italic; font-weight: 500; }
.row-link { color: var(--water); font-weight: 700; cursor: pointer; }
.due-count { font-size: 11.5px; font-weight: 700; color: var(--mold); margin-top: 2px; white-space: nowrap; }
.due-count.soon { color: var(--warn); }
.due-count.overdue { color: var(--fire); }
.row-link:hover { text-decoration: underline; }

.empty-state {
  padding: 40px 20px;
  text-align: center;
  color: var(--text-faint);
  font-size: 13px;
}

.empty-state .empty-icon { margin-bottom: 10px; opacity: 0.5; }

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

.photo-thumb {
  display: block;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-panel-alt);
  position: relative;
}

.photo-thumb img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }

.photo-thumb-label {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 6px 8px;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-primary);
  background: linear-gradient(transparent, rgba(2,8,14,0.85));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Coming soon */
.soon-panel {
  padding: 60px 30px;
  text-align: center;
}
.soon-panel .soon-icon { color: var(--text-faint); margin-bottom: 16px; }
.soon-panel h3 { font-size: 17px; margin-bottom: 8px; }
.soon-panel p { font-size: 13px; color: var(--text-secondary); max-width: 460px; margin: 0 auto; }

/* Modal */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(2, 8, 14, 0.72);
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
  padding: 24px;
}

.modal-box {
  background: var(--bg-panel);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  width: 100%;
  max-width: 560px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.55);
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
}

.modal-title { font-size: 15px; font-weight: 800; }

.modal-close {
  width: 30px; height: 30px;
  border-radius: 7px;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text-secondary);
  display: flex; align-items: center; justify-content: center;
}
.modal-close:hover { color: var(--fire); border-color: rgba(255,42,42,0.4); }

.modal-body {
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 20px;
  border-top: 1px solid var(--border);
}

.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-label { font-size: 11.5px; font-weight: 700; color: var(--text-secondary); }

.form-input, .form-select, .form-textarea {
  background: var(--bg-panel-alt);
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-size: 13px;
  width: 100%;
}

.form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--water); }
.form-textarea { resize: vertical; min-height: 70px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.conn-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(240,187,55,0.09);
  border: 1px solid rgba(240,187,55,0.35);
  color: var(--warn);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 20px;
}

.conn-banner svg { width: 16px; height: 16px; flex-shrink: 0; }

/* App footer */
.app-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 24px;
  border-top: 1px solid var(--border);
  background: var(--bg-app-alt);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-secondary);
  letter-spacing: 0.4px;
  margin-top: 24px;
  flex-wrap: wrap;
}

.app-footer .af-strip {
  flex: 1;
  max-width: 220px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--fire), var(--water), var(--mold));
}

.app-footer .af-tag .tw-restore { color: var(--fire); }
.app-footer .af-tag .tw-recover { color: var(--water); }
.app-footer .af-tag .tw-rebuild { color: var(--mold); }

/* Mobile shell */
.mobile-topbar { display: none; }
.mobile-bottom-nav { display: none; }

@media (max-width: 1100px) {
  .kpi-grid { grid-template-columns: repeat(3, 1fr); }
  .dash-grid { grid-template-columns: minmax(0, 1fr); }
  .field-grid { grid-template-columns: repeat(2, 1fr); }
  .quick-actions { grid-template-columns: repeat(2, 1fr); }
  .clock-widget { display: none; }
}

@media (max-width: 860px) {
  .sidebar { display: none; }
  .main-col { margin-left: 0; }
  .topbar { display: none; }

  .mobile-topbar {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 56px;
    padding: 0 16px;
    background: var(--bg-app-alt);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 30;
  }

  .mobile-topbar { flex-direction: column; align-items: stretch; height: auto; gap: 6px; padding: 8px 12px; }
  .mobile-topbar-row { display: flex; align-items: center; gap: 10px; }
  .mobile-topbar-tools { margin-left: auto; display: flex; align-items: center; gap: 4px; }
  .mobile-topbar-tools .icon-btn { width: 34px; height: 34px; }
  .mobile-topbar-tools .sync-pill { height: 30px; padding: 0 8px; gap: 4px; }
  /* Pop-overs opened from the phone header pin to the screen edges so they
     never hang off the side of a narrow viewport. */
  .mobile-topbar .sync-pop, .mobile-topbar .brightness-pop { position: fixed; top: 58px; left: 12px; right: 12px; width: auto; transform: none; }
  .mobile-search { position: relative; display: flex; align-items: center; gap: 8px; flex: none; max-width: none; width: 100%; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 999px; padding: 6px 12px; }
  .mobile-search svg { width: 15px; height: 15px; color: var(--text-faint); flex-shrink: 0; }
  .mobile-search input { flex: 1; width: auto; background: transparent; border: none; border-radius: 0; outline: none; color: var(--text-primary); font-size: 14px; padding: 2px 0; min-width: 0; }
  .mobile-search input:focus { border-color: transparent; }
  .mobile-search .global-search-results { left: 0; right: 0; max-height: 60vh; }
  .mobile-topbar .brand-title { font-size: 13px; }
  .mobile-topbar .brand-sub { font-size: 8.5px; }

  .page-content { padding: 16px 14px 90px; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .quick-actions { grid-template-columns: repeat(2, 1fr); }
  .field-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .app-footer { font-size: 9.5px; padding: 10px 14px 90px; }
  .app-footer .af-strip { display: none; }

  /* Bigger touch targets — the desktop sizes below this breakpoint
     were too small/cramped to tap reliably on a phone. */
  .icon-btn { width: 38px; height: 38px; }
  .icon-btn svg { width: 17px; height: 17px; }
  .cal-nav-btn { width: 34px; height: 34px; }
  .cal-nav-btn svg { width: 15px; height: 15px; }
  .btn { padding: 10px 14px; }
  .btn.btn-sm { padding: 9px 12px; font-size: 12px; }
  .tab-btn { padding: 8px 12px; }
  .nav-item, .detail-tab { min-height: 40px; }
  .modal-overlay { padding: 12px; }
  .modal-box { max-height: 92vh; }
  .list-row { padding: 14px 16px; }
  .list-row > .icon-btn,
  .list-row > .btn { margin-left: auto; }

  .mobile-bottom-nav {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: 62px;
    background: var(--bg-app-alt);
    border-top: 1px solid var(--border);
    z-index: 40;
  }

  .mbn-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 700;
    color: var(--text-secondary);
  }

  .mbn-item svg { width: 19px; height: 19px; }
  .mbn-item.active { color: var(--water); }
}

/* =========================================================
   PRICE LISTS — WORK ORDER READER
   ========================================================= */
.table-wrap { overflow-x: auto; }
.data-table td.num, .data-table th.num { text-align: right; white-space: nowrap; }

.conn-banner.danger {
  border-color: rgba(255, 42, 42, 0.45);
  background: rgba(255, 42, 42, 0.10);
  color: #FFC9C9;
}

/* Drop zone ---------------------------------------------- */
.scope-drop {
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg-panel-alt);
  padding: 26px 20px;
  text-align: center;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.scope-drop.dragging { border-color: var(--water); background: rgba(11, 120, 255, 0.08); }
.scope-drop-icon svg { width: 26px; height: 26px; color: var(--water); }
.scope-drop-main { font-size: 14px; font-weight: 600; margin-top: 8px; }
.scope-drop-main .btn { margin-left: 4px; vertical-align: baseline; }
.scope-drop-sub { font-size: 11.5px; color: var(--text-secondary); margin-top: 8px; }

.scope-paste { margin-top: 14px; }
.scope-paste summary {
  cursor: pointer; font-size: 12px; font-weight: 700; color: var(--text-secondary);
  padding: 6px 0; list-style: none;
}
.scope-paste summary::-webkit-details-marker { display: none; }
.scope-paste summary::before { content: "+ "; color: var(--water); }
.scope-paste[open] summary::before { content: "– "; }

/* Working state ------------------------------------------ */
.scope-working { display: flex; align-items: center; gap: 14px; padding: 18px 4px; }
.scope-working-title { font-size: 13.5px; font-weight: 700; }
.scope-working-step { font-size: 12px; color: var(--text-secondary); margin-top: 3px; }
.scope-spinner {
  width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%;
  border: 2.5px solid var(--border-strong); border-top-color: var(--water);
  animation: scope-spin 0.8s linear infinite;
}
@keyframes scope-spin { to { transform: rotate(360deg); } }

/* Review -------------------------------------------------- */
.scope-review { border-color: var(--border-strong); }
/* Estimate / invoice import: line item review */
.doc-lines td { vertical-align: top; }
.doc-lines .form-input { padding: 5px 8px; font-size: 12.5px; }
.doc-lines .form-input.num { text-align: right; }
.doc-lines tr.is-dup td { opacity: 0.62; }
.doc-lines tr.is-off .form-input { color: var(--text-secondary); }
.doc-dup-note { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--warning, #f0a23b); margin-top: 4px; font-weight: 600; }
.doc-dup-note svg { width: 12px; height: 12px; }
.scope-header-grid { padding: 4px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.scope-hf { margin: 0; }
.form-input.missing, .form-input.missing::placeholder { border-color: rgba(240, 187, 55, 0.45); color: var(--warn); }
.form-input.missing { background: rgba(240, 187, 55, 0.06); }

.scope-summary {
  margin-top: 14px; padding: 10px 12px; border-left: 2px solid var(--water);
  background: var(--bg-panel-alt); border-radius: var(--radius-sm);
  font-size: 12.5px; color: var(--text-secondary);
}
.scope-flags {
  margin-top: 14px; padding: 12px 14px; border-radius: var(--radius-sm);
  background: rgba(240, 187, 55, 0.08); border: 1px solid rgba(240, 187, 55, 0.3);
}
.scope-flags-title { font-size: 12px; font-weight: 800; color: var(--warn); display: flex; align-items: center; gap: 6px; }
.scope-flags-title svg { width: 15px; height: 15px; }
.scope-flags ul { margin: 8px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--text-secondary); }
.scope-flags li { margin-bottom: 4px; }

.scope-table { min-width: 1040px; }
.scope-table td:first-child { min-width: 250px; }
.scope-table .scope-desc { width: 100%; }
.scope-table td { vertical-align: top; }
.scope-table .form-input, .scope-table .form-select { padding: 6px 8px; font-size: 12.5px; }
.scope-table .scope-qty { width: 72px; text-align: right; }
.scope-table .scope-unit { width: 108px; }
.scope-table .scope-code { min-width: 190px; }
.code-combo-input { cursor: text; }
.code-combo-panel {
  position: absolute;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
  max-height: 280px;
  overflow-y: auto;
  z-index: 500;
}
.code-combo-opt {
  padding: 8px 12px;
  font-size: 12.5px;
  line-height: 1.4;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
}
.code-combo-opt:last-child { border-bottom: none; }
.code-combo-opt:hover, .code-combo-opt.active { background: var(--bg-panel-alt); }
.code-combo-opt[data-code-combo-pick=""] { color: var(--text-faint); font-style: italic; }
.code-combo-code { font-weight: 700; font-variant-numeric: tabular-nums; }
.code-combo-empty { padding: 10px 12px; font-size: 12.5px; color: var(--text-faint); }
.scope-raw { font-size: 11px; color: var(--text-faint); margin-top: 4px; font-style: italic; }
.scope-note { font-size: 11.5px; color: var(--warn); margin-top: 4px; display: flex; align-items: center; gap: 4px; }
.scope-note svg { width: 13px; height: 13px; flex-shrink: 0; }
.scope-missing-val { color: var(--text-faint); font-size: 11.5px; }

.scope-totals {
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between;
  padding: 16px 20px; border-top: 1px solid var(--border); background: var(--bg-panel-alt);
}
.scope-total-label { font-size: 11.5px; font-weight: 700; color: var(--text-secondary); }
.scope-total-value { font-size: 22px; font-weight: 800; margin-top: 2px; }
.scope-total-notes { font-size: 12px; color: var(--warn); max-width: 420px; display: flex; flex-direction: column; gap: 4px; }
.scope-total-notes svg { width: 13px; height: 13px; vertical-align: -2px; }
.scope-total-fine { color: var(--text-faint); font-size: 11px; }

.scope-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; justify-content: space-between; }
.scope-action-btns { display: flex; gap: 8px; }

/* Saved analyses ------------------------------------------ */
.scope-saved { border-top: 1px solid var(--border); }
.scope-saved:first-of-type { border-top: none; }
.scope-saved-head {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  padding: 14px 20px; cursor: pointer;
}
.scope-saved-head:hover { background: var(--bg-panel-alt); }
.scope-saved.open .scope-saved-head { background: var(--bg-panel-alt); }
.scope-saved-title { font-size: 13.5px; font-weight: 700; }
.scope-saved-sub { font-size: 11.5px; color: var(--text-secondary); margin-top: 3px; }
.scope-saved-right { text-align: right; }
.scope-saved-amt { font-size: 15px; font-weight: 800; }
.scope-saved-actions { display: flex; gap: 8px; align-items: center; justify-content: flex-end; }

.rate-input { width: 110px; text-align: right; padding: 6px 8px; font-size: 12.5px; }

@media (max-width: 760px) {
  .scope-totals { flex-direction: column; }
  .scope-actions { flex-direction: column; align-items: stretch; }
  .scope-action-btns { justify-content: flex-end; }
}

/* Rate table (the signed GC sheet) ------------------------ */
.rate-head-tools { display: flex; gap: 8px; align-items: center; }
.rate-search { width: 210px; padding: 6px 10px; font-size: 12px; }
.rate-table { min-width: 700px; }
.rate-table td { vertical-align: top; }
.rate-table th.rate-num, .rate-table td.rate-num { width: 42px; color: var(--text-faint); font-size: 11.5px; }
.rate-desc { font-size: 13px; font-weight: 600; }
.rate-note { font-size: 11px; color: var(--text-secondary); margin-top: 3px; max-width: 560px; line-height: 1.45; }
.rate-code { font-size: 10.5px; color: var(--text-faint); margin-top: 3px; letter-spacing: 0.04em; }
.rate-unit { font-size: 12px; color: var(--text-secondary); white-space: nowrap; }
.rate-pct { margin-left: 4px; color: var(--text-secondary); font-size: 12px; }
.rate-table tr.rate-section td {
  background: var(--bg-panel-alt); font-size: 11px; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-secondary); padding: 8px 14px;
}

/* Totals stack -------------------------------------------- */
.scope-total-stack { display: flex; flex-direction: column; gap: 6px; min-width: 300px; }
.scope-total-row { display: flex; justify-content: space-between; gap: 24px; align-items: baseline; }
.scope-total-row.grand { border-top: 1px solid var(--border-strong); padding-top: 8px; margin-top: 2px; }
.scope-total-mid { font-size: 14px; font-weight: 700; white-space: nowrap; }
.scope-addline { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 12px; padding-bottom: 4px; }

/* =========================================================
   INVOICE BUILDER
   ========================================================= */
.inv-head-actions { display: flex; gap: 8px; }
.inv-meta-grid { padding: 18px 20px 4px; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.inv-meta-grid .form-group { margin: 0; }
.form-textarea.missing { border-color: rgba(240,187,55,0.45); background: rgba(240,187,55,0.06); }
.conn-banner.success { border-color: rgba(32,212,90,0.4); background: rgba(32,212,90,0.09); color: #BFF3D0; }
:root[data-theme="light"] .conn-banner.success { color: #14532d; }

.inv-table-edit { min-width: 900px; }
.inv-table-edit td { vertical-align: top; }
.inv-table-edit th.inv-n, .inv-table-edit td.inv-n { width: 34px; color: var(--text-faint); font-size: 11.5px; }
.inv-table-edit .form-input, .inv-table-edit .form-select { padding: 6px 8px; font-size: 12.5px; }
.inv-table-edit .inv-code { min-width: 230px; margin-bottom: 6px; }
.inv-table-edit .inv-desc { width: 100%; min-width: 230px; }
.inv-table-edit .inv-qty, .inv-table-edit .inv-rate { width: 86px; text-align: right; }
.inv-row-acts { white-space: nowrap; }
.inv-row-acts .btn { padding: 4px 6px; }
.inv-po-row td { background: rgba(11,120,255,0.06); }

/* ---- Sketches ---- */
.sk-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; padding: 0 20px 20px; }
.sk-card { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-panel-alt); overflow: hidden; display: flex; flex-direction: column; }
.sk-card-thumb { display: block; height: 150px; background: #fff; overflow: hidden; cursor: pointer; }
.sk-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sk-card-blank { height: 100%; display: flex; align-items: center; justify-content: center; color: #889; font-size: 12px; background-image: linear-gradient(#e6ebf1 1px, transparent 1px), linear-gradient(90deg, #e6ebf1 1px, transparent 1px); background-size: 20px 20px; }
.sk-card-body { padding: 10px 12px 12px; }
.sk-card-legend { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.sk-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-secondary); border: 1px solid var(--border); border-radius: 20px; padding: 2px 8px; }
.sk-chip i { width: 9px; height: 9px; border-radius: 2px; background: var(--sw); display: inline-block; }
.sk-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 14px; align-items: start; }
.sk-main { min-width: 0; }
.sk-toolbar { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius-sm) var(--radius-sm) 0 0; border-bottom: none; }
.sk-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.sk-tool { font: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 11px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-panel-alt); color: var(--text-primary); cursor: pointer; }
.sk-tool.active { background: var(--water); border-color: var(--water); color: #fff; }
.sk-row { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; }
.sk-colors, .sk-stamps, .sk-view { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sk-colors.dim { opacity: 0.5; }
.sk-swatch, .sk-stamp { font: inherit; font-size: 11.5px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px 4px 6px; border-radius: 20px; border: 1px solid var(--border); background: var(--bg-panel-alt); color: var(--text-primary); cursor: pointer; }
.sk-swatch span { width: 14px; height: 14px; border-radius: 50%; background: var(--sw); display: inline-block; }
.sk-swatch.active, .sk-stamp.active { border-color: var(--sw); box-shadow: 0 0 0 2px color-mix(in srgb, var(--sw) 35%, transparent); }
.sk-stamp b { width: 18px; height: 18px; border-radius: 50%; background: var(--sw); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; }
.sk-stage { position: relative; height: 68vh; min-height: 360px; background: #e9eef3; border: 1px solid var(--border); border-radius: 0 0 var(--radius-sm) var(--radius-sm); overflow: hidden; touch-action: none; }
.sk-stage canvas { display: block; width: 100%; height: 100%; cursor: crosshair; }
.sk-input { position: absolute; display: flex; gap: 6px; align-items: center; background: var(--bg-raised); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 6px; box-shadow: var(--shadow-card); z-index: 5; }
.sk-input .form-input { width: 190px; padding: 6px 8px; font-size: 13px; }
.sk-side { display: flex; flex-direction: column; gap: 12px; }
.sk-side-block { background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; }
.sk-legend { display: flex; flex-direction: column; gap: 6px; }
.sk-legend-row, .sk-area-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.sk-area-row { cursor: pointer; padding: 4px 0; border-bottom: 1px solid var(--border); }
.sk-area-row input { width: auto; margin: 0; }
.sk-legend-key { width: 18px; height: 18px; border-radius: 3px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; color: #fff; }
.sk-legend-key.color { background: repeating-linear-gradient(135deg, var(--sw) 0 2px, transparent 2px 6px); border: 1.5px solid var(--sw); }
.sk-legend-key.stamp, .sk-legend-key.pin { background: var(--sw); border-radius: 50%; }
.sk-legend-key.room { border: 2px solid #222; }
.sk-legend-n { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.sk-areas { margin-top: 8px; }
.sk-symbols { display: flex; flex-wrap: wrap; gap: 5px; padding: 6px 8px; border: 1px dashed var(--border); border-radius: 8px; width: 100%; }
.sk-symbol { font: inherit; font-size: 11.5px; padding: 4px 9px; border-radius: 20px; border: 1px solid var(--border); background: var(--bg-panel-alt); color: var(--text-primary); cursor: pointer; }
.sk-symbol.active { background: var(--water); border-color: var(--water); color: #fff; }
.sk-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; font-size: 12px; color: var(--text-secondary); margin-top: 6px; }
.sk-metrics b { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.sk-metrics i { font-style: normal; font-size: 11px; }
.sk-selected { border-color: var(--water); box-shadow: 0 0 0 2px rgba(11, 120, 255, 0.12); }
.sk-source { display: flex; flex-direction: column; gap: 8px; }
.sk-source label { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; line-height: 1.4; cursor: pointer; }
.sk-source input { width: auto; margin: 3px 0 0; }
.sk-room-table { min-width: 0; }
.sk-room-table td { padding: 4px 6px; }
.sk-room-table .form-input { padding: 6px 8px; font-size: 12.5px; }
.sk-room-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sk-chip-btn { font: inherit; font-size: 11.5px; padding: 4px 9px; border-radius: 20px; border: 1px solid var(--border); background: var(--bg-panel-alt); color: var(--text-primary); cursor: pointer; }
.sk-chip-btn:hover { border-color: var(--water); color: var(--water); }
/* Small laptops and tablets: the side panel drops below the sheet so drawing gets the full width. */
@media (max-width: 1100px) {
  .sk-wrap { grid-template-columns: 1fr; }
  .sk-stage { height: 60vh; }
}
@media (max-width: 900px) {
  .sk-cards { padding: 0 12px 14px; }
  /* Phone: each tool row scrolls sideways on one line so the sheet starts higher. */
  .sk-hint { display: none; }
  .sk-toolbar { gap: 6px; padding: 8px 10px; }
  .sk-tools, .sk-colors, .sk-stamps, .sk-symbols, .sk-view { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; }
  .sk-tools::-webkit-scrollbar, .sk-colors::-webkit-scrollbar, .sk-stamps::-webkit-scrollbar, .sk-symbols::-webkit-scrollbar, .sk-view::-webkit-scrollbar { display: none; }
  .sk-tool, .sk-swatch, .sk-stamp, .sk-symbol, .sk-view .btn { white-space: nowrap; flex-shrink: 0; }
  .sk-row { flex-direction: column; align-items: stretch; gap: 6px; min-width: 0; }
  .sk-toolbar, .sk-main { min-width: 0; max-width: 100%; }
  .sk-tools, .sk-colors, .sk-stamps, .sk-symbols, .sk-view { min-width: 0; max-width: 100%; }
  .sk-symbols { width: auto; }
}
@media (max-width: 480px) {
  .revenue-hero { grid-template-columns: 1fr; }
  .kpi-card { flex-direction: column; gap: 10px; padding: 14px; }
  .kpi-icon { width: 38px; height: 38px; }
  .kpi-icon svg { width: 18px; height: 18px; }
  .kpi-value { font-size: 24px; }
}
/* ---- Estimate builder ---- */
.est-section { border: 1px solid var(--border); border-radius: var(--radius-sm); margin: 0 20px 14px; overflow: hidden; background: var(--bg-panel); }
.est-section-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--bg-panel-alt); border-bottom: 1px solid var(--border); }
.est-section-head .form-input { flex: 1; font-weight: 600; min-width: 160px; }
.est-section-head .btn { padding: 4px 6px; }
.est-section-head .btn svg { width: 14px; height: 14px; }
.est-section .table-wrap { margin: 0; }
.est-table-edit { min-width: 1040px; }
.est-opt-row td { background: rgba(240, 187, 55, 0.08); }
.est-opt { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; white-space: nowrap; cursor: pointer; }
.est-opt input { width: auto; margin: 0; }
.inv-table-edit .est-unit { width: 64px; text-align: center; }
.est-sec-pick { padding: 4px 6px !important; font-size: 12px !important; margin-top: 6px; max-width: 240px; }
.est-textbox { padding: 0 20px 16px; }
.est-text-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.est-text-tools { display: flex; gap: 6px; flex-wrap: wrap; }
.btn.listening { background: rgba(224, 64, 64, 0.12); border-color: rgba(224, 64, 64, 0.55); color: #e04040; animation: est-pulse 1.2s ease-in-out infinite; }
@keyframes est-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(224, 64, 64, 0.35); } 50% { box-shadow: 0 0 0 7px rgba(224, 64, 64, 0); } }
@media (prefers-reduced-motion: reduce) { .btn.listening { animation: none; } }
.est-listening { margin-top: 6px; font-size: 12px; color: #e04040; display: flex; align-items: center; gap: 6px; }
.est-listening svg { width: 14px; height: 14px; }
.est-contracts { display: flex; flex-direction: column; gap: 8px; }
.est-contract { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-panel-alt); }
.est-contract > svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--text-secondary); }
.est-contract .row-main { flex: 1; min-width: 0; }
.est-po-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; cursor: default; }
label.est-po-head { cursor: pointer; margin: 0; }
.est-po-head input[type="checkbox"] { width: auto; margin: 0; }
.est-po-head .form-input { width: 64px; padding: 4px 6px; text-align: right; }
.est-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; padding: 0 20px 18px; }
.est-photo { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-panel-alt); padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.est-photo-img { height: 150px; border-radius: 4px; overflow: hidden; background: var(--bg-app-alt); display: flex; align-items: center; justify-content: center; }
.est-photo-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.est-photo .form-input { font-size: 12px; padding: 6px 8px; }
.est-photo-acts { display: flex; align-items: center; gap: 4px; }
.est-photo-acts .btn { padding: 3px 6px; }
.est-photo-acts .btn svg { width: 13px; height: 13px; }
@media (max-width: 720px) { .est-photos { padding: 0 12px 14px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } }
.est-tmpl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.est-tmpl-grid .form-group { margin: 0; }
@media (max-width: 720px) {
  .est-section { margin: 0 12px 12px; }
  .est-section-head { flex-wrap: wrap; }
  .est-textbox { padding: 0 14px 14px; }
}
.inv-po-desc { font-size: 13px; font-weight: 700; }
.inv-po-rate { font-size: 12.5px; font-weight: 600; }
.rot-up { transform: rotate(-90deg); }
.rot-down { transform: rotate(90deg); }
.inv-row-acts svg { width: 14px; height: 14px; }

/* The paper copy: white sheet, on screen only when previewing, and the
   only thing that goes to the printer. */
.inv-preview-panel { padding: 0; overflow: hidden; }
#invoice-sheet { display: none; }
@media print {
  body * { visibility: hidden !important; }
  #invoice-sheet, #invoice-sheet * { visibility: visible !important; }
  #invoice-sheet {
    display: block !important; position: absolute; left: 0; top: 0; width: 100%;
    margin: 0; padding: 0; background: #fff;
  }
  @page { margin: 0.5in; }
}
.src-tag {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 6px;
  font-size: 10.5px; color: var(--text-faint); text-decoration: none;
  border: 1px solid var(--border); border-radius: 20px; padding: 2px 8px;
}
a.src-tag:hover { color: var(--water); border-color: var(--water); }
.src-tag svg { width: 12px; height: 12px; }
.photo-import { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; padding-bottom: 4px; }
.photo-import .scope-total-fine { max-width: 620px; }

/* ---- Offline layer: toasts + held-photo badge ---- */
#toast-host { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 400; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; width: min(420px, calc(100vw - 32px)); }
.toast { background: var(--bg-raised); color: var(--text-primary); border: 1px solid var(--border-strong); border-left: 4px solid var(--water); border-radius: var(--radius-sm); box-shadow: var(--shadow-card); padding: 10px 14px; font-size: 12.5px; font-weight: 600; line-height: 1.4; opacity: 0; transform: translateY(8px); transition: opacity 0.25s ease, transform 0.25s ease; max-width: 100%; }
.toast.show { opacity: 1; transform: none; }
.toast.ok { border-left-color: var(--mold); }
.toast.warn { border-left-color: var(--warn); }
.photo-thumb { position: relative; }
.photo-pending { position: absolute; top: 6px; left: 6px; background: rgba(240,187,55,0.92); color: #1a1400; font-size: 10px; font-weight: 800; letter-spacing: 0.3px; padding: 2px 7px; border-radius: 999px; }
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }

/* ---- Daily report photos: per-day strips and day groups ---- */
.photo-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.photo-strip .photo-thumb { width: 56px; height: 56px; flex: 0 0 auto; }
.photo-strip .photo-thumb img { width: 56px; height: 56px; }
.photo-strip .photo-pending { top: 3px; left: 3px; font-size: 8.5px; padding: 1px 5px; }
.photo-strip-count { margin-left: 4px; }
.photo-day { padding: 14px 20px 6px; }
.photo-day + .photo-day { border-top: 1px solid var(--border); }
.photo-day-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; font-weight: 800; font-size: 13px; }

/* ---- Photo delete button on thumbnails ---- */
.photo-del { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.25); background: rgba(2,8,14,0.72); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: opacity 0.12s ease; }
.photo-del svg { width: 14px; height: 14px; }
.photo-thumb:hover .photo-del, .photo-del:focus-visible { opacity: 1; }
@media (hover: none) { .photo-del { opacity: 1; } }
.photo-del:hover { background: var(--fire); border-color: var(--fire); }
/* Wide-but-not-huge desktop: keep the header on one row */
@media (max-width: 1600px) and (min-width: 861px) { .topbar .user-meta { display: none; } .topbar .global-search { flex-basis: 200px; } }

/* ---- Draft: optional picker for the project's other photos ---- */
.photo-library { margin: 4px 0 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-panel-alt); }
.photo-library > summary { cursor: pointer; padding: 9px 12px; font-size: 12.5px; font-weight: 700; color: var(--text-secondary); list-style: none; }
.photo-library > summary::-webkit-details-marker { display: none; }
.photo-library > summary::before { content: "▸ "; }
.photo-library[open] > summary::before { content: "▾ "; }
.photo-library .photo-pick { padding: 0 12px 12px; max-height: 320px; overflow-y: auto; }

/* ---- Back arrow on every page ---- */
.back-btn { display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 12px 0 8px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-panel); color: var(--text-secondary); font-size: 12.5px; font-weight: 700; cursor: pointer; flex-shrink: 0; }
.back-btn svg { width: 16px; height: 16px; transform: rotate(180deg); }
.back-btn:hover { border-color: var(--water); color: var(--text-primary); }
.page-header.has-back { gap: 12px; }
.page-header.has-back > .back-btn + div { flex: 1 1 240px; min-width: 0; }
.back-bar { margin-bottom: 14px; }
@media (max-width: 860px) {
  .back-btn span { display: none; }
  .back-btn { width: 34px; padding: 0; justify-content: center; }
}

/* ---- Phone "More" page: links to every section ---- */
.mobile-sections { display: none; margin-bottom: 18px; }
.mobile-sections-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.mobile-section { display: flex; align-items: center; gap: 8px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-panel); color: var(--text-primary); text-decoration: none; font-size: 12.5px; font-weight: 700; }
.mobile-section svg { width: 18px; height: 18px; color: var(--water); flex-shrink: 0; }
.mobile-section span:first-of-type { flex: 1; min-width: 0; }
@media (max-width: 860px) { .mobile-sections { display: block; } }

/* ---- Contracts: in-app PDF viewer + client tick list ---- */
.pdf-pages { max-height: min(70vh, 760px); overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-panel-alt); padding: 10px; display: flex; flex-direction: column; gap: 10px; }
.pdf-page { display: block; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.25); border-radius: 2px; }
.modal-box.modal-wide { max-width: 960px; width: calc(100vw - 32px); }
/* Estimate PDF import dialog */
.estimp-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.estimp-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr)); gap: 8px 14px; margin: 10px 0 14px; }
.estimp-field .field-value { font-size: 13px; }
.estimp-section { margin-bottom: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: auto; }
.estimp-table { min-width: 460px; }
.estimp-section-title { font-size: 12.5px; font-weight: 800; padding: 8px 12px; background: var(--bg-panel-alt); border-bottom: 1px solid var(--border); }
.estimp-table td, .estimp-table th { padding: 6px 8px; font-size: 12.5px; }
.estimp-table input[type="checkbox"] { width: auto; margin: 0; }
.estimp-skip td { opacity: 0.45; text-decoration: line-through; }
.estimp-skip td:first-child { opacity: 1; text-decoration: none; }
.estimp-totals { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); gap: 6px 14px; padding: 10px 12px; background: var(--bg-panel-alt); border-radius: var(--radius-sm); font-size: 12.5px; margin-bottom: 12px; }
.estimp-totals div { display: flex; justify-content: space-between; gap: 10px; }
.estimp-totals b { font-variant-numeric: tabular-nums; }
.estimp-texts { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.estimp-text { font-size: 12.5px; white-space: pre-wrap; color: var(--text-secondary); max-height: 140px; overflow: auto; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.estimp-flags { border: 1px solid rgba(240,187,55,0.5); background: rgba(240,187,55,0.08); border-radius: var(--radius-sm); padding: 8px 12px; margin-bottom: 12px; }
.estimp-flags ul { margin: 4px 0 0; padding-left: 18px; font-size: 12.5px; }
.estimp-flags li { margin: 2px 0; }
.pill-ok { background: rgba(32,212,90,0.15); color: var(--mold); }
.pill-warn { background: rgba(240,187,55,0.18); color: var(--warn); }
.check-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px 12px; max-height: 180px; overflow-y: auto; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-panel-alt); }

/* ---- Settings → Invoice Template live preview: shrunk to fit the panel.
   zoom (not transform:scale) so the box actually shrinks instead of
   leaving reserved empty space; overflow-x is the fallback where zoom
   isn't supported. ---- */
.inv-tmpl-preview-wrap { max-width: 100%; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.inv-tmpl-preview { zoom: 0.46; }

/* ---- Crews & Daily Tasks board ---- */
.task-board { display: flex; gap: 14px; align-items: flex-start; overflow-x: auto; padding-bottom: 8px; }
.task-col { flex: 0 0 280px; width: 280px; background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius); display: flex; flex-direction: column; transition: border-color 0.12s ease, background 0.12s ease; }
.task-col.drop-hover { border-color: var(--water); background: var(--bg-panel-alt); }
.task-col-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 12px 12px 10px; border-bottom: 1px solid var(--border); }
.task-col-title { font-size: 13px; font-weight: 800; }
.task-col-sub { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }
.task-col-actions { display: flex; gap: 2px; flex-shrink: 0; }
.task-col-body { padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 60px; flex: 1; }
.task-col-empty { font-size: 12px; color: var(--text-faint); padding: 10px 2px; }
.task-card { background: var(--bg-panel-alt); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 10px; cursor: grab; }
.task-card.dragging { opacity: 0.45; }
.task-card.task-done { opacity: 0.6; }
.task-card.task-done .task-title { text-decoration: line-through; }
.task-card-row { display: flex; align-items: flex-start; gap: 8px; }
.task-check { flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; border: 1.5px solid var(--border-strong); background: transparent; display: flex; align-items: center; justify-content: center; padding: 0; color: var(--water); }
.task-check.is-done { background: var(--water); border-color: var(--water); color: var(--bg-app); }
.task-check svg { width: 12px; height: 12px; }
.task-body { flex: 1; min-width: 0; }
.task-title { font-size: 13px; font-weight: 700; line-height: 1.35; }
.task-project { display: block; font-size: 11px; color: var(--water); font-weight: 700; margin-top: 2px; }
.task-notes { font-size: 11.5px; color: var(--text-secondary); margin-top: 3px; line-height: 1.4; }
.task-actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.task-grip { color: var(--text-faint); cursor: grab; }
.task-suggestion { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-panel-alt); flex-wrap: wrap; }
@media (max-width: 860px) {
  .task-col { flex: 0 0 240px; width: 240px; }
}
.check-item { display: flex; align-items: center; gap: 8px; font-size: 12.5px; cursor: pointer; }
.check-item input { width: auto; margin: 0; }

/* ---- Financial Control Center: simplified layout ---- */
.fin-fold { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-panel); margin-bottom: 14px; }
.fin-fold > summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 14px 18px; }
.fin-fold > summary::-webkit-details-marker { display: none; }
.fin-fold > summary::before { content: "▸"; color: var(--text-faint); font-size: 12px; }
.fin-fold[open] > summary::before { content: "▾"; }
.fin-fold-title { font-size: 14px; font-weight: 800; }
.fin-fold-sub { font-size: 12px; color: var(--text-secondary); }
.fin-fold-body { padding: 0 6px 6px; border-top: 1px solid var(--border); }
.fin-fold-body > .panel { border: none; box-shadow: none; background: transparent; }
.fin-readonly { font-size: 20px; font-weight: 900; font-variant-numeric: tabular-nums; padding: 8px 0 2px; }
input[type="range"][data-fin-margin], input[type="range"][data-growth-slider] { accent-color: var(--water); height: 28px; }

/* Demo mode: every dollar figure hidden for showing the app to others */
.demo-chip { display: none; align-items: center; gap: 5px; height: 32px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--warn); background: rgba(240,187,55,0.12); color: var(--warn); font-size: 11px; font-weight: 800; letter-spacing: 0.3px; white-space: nowrap; }
.demo-chip svg { width: 13px; height: 13px; }
html[data-demo] .demo-chip { display: inline-flex; }
html[data-demo] .demo-toggle { border-color: var(--warn); color: var(--warn); }
/* The phone bar has no room for the chip: the highlighted eye button is the signal there. */
.mobile-topbar-tools .demo-chip { display: none !important; }
input.demo-masked { -webkit-text-security: disc; letter-spacing: 2px; color: var(--text-secondary); background: var(--bg-panel-alt); cursor: not-allowed; }
input.demo-masked::-ms-reveal { display: none; }
textarea.demo-masked { color: transparent; text-shadow: 0 0 9px var(--text-secondary); background: var(--bg-panel-alt); cursor: not-allowed; resize: none; }
@supports (-webkit-text-security: disc) { textarea.demo-masked { -webkit-text-security: disc; color: var(--text-secondary); text-shadow: none; letter-spacing: 2px; } }
.demo-hidden { padding: 60px 30px; text-align: center; }
.demo-hidden.compact { padding: 26px 20px; }
.demo-hidden-icon { color: var(--text-faint); margin-bottom: 14px; }
.demo-hidden-icon svg { width: 34px; height: 34px; }
.demo-hidden h3 { font-size: 17px; margin: 0 0 8px; }
.demo-hidden p { font-size: 13px; color: var(--text-secondary); max-width: 460px; margin: 0 auto; }
.demo-panel.on { border-color: var(--warn); }
.demo-panel .panel-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.demo-panel .panel-title svg { width: 16px; height: 16px; }
.demo-cols { display: grid; grid-template-columns: 1.3fr 1fr; gap: 24px; }
.demo-list { margin: 6px 0 0; padding-left: 18px; font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.demo-list li { margin-bottom: 5px; }
.demo-note { font-size: 12.5px; color: var(--text-secondary); margin: 6px 0 10px; line-height: 1.5; }
@media (max-width: 760px) { .demo-cols { grid-template-columns: 1fr; } }


/* Daily scope picks (price-list quantities on a daily report) */
.picks-list { max-height: 300px; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-panel); }
.picks-row { display: grid; grid-template-columns: 1fr 88px 130px 120px; gap: 6px; align-items: center; padding: 6px 8px; border-bottom: 1px solid var(--border); }
.picks-row:last-child { border-bottom: none; }
.picks-row.picked { background: rgba(32,212,90,0.08); }
.picks-desc { font-size: 12.5px; line-height: 1.35; min-width: 0; }
.picks-code { font-size: 11px; color: var(--text-faint); margin-right: 4px; }
.picks-unit { font-size: 11px; color: var(--text-secondary); margin-left: 4px; }
.picks-row .form-input { padding: 5px 8px; font-size: 12.5px; min-height: 0; }
.inv-rule { margin-top: 4px; display: flex; gap: 4px; align-items: flex-start; }
.inv-rule svg { width: 12px; height: 12px; flex: none; margin-top: 2px; color: var(--mold); }
@media (max-width: 640px) {
  .picks-row { grid-template-columns: 1fr 70px; }
  .picks-row .picks-area, .picks-row .picks-dbl, .picks-dbl-spacer { grid-column: 1 / -1; }
  .picks-dbl-spacer { display: none; }
}

/* Invoice lines: drag to reorder + stage headers */
.inv-drag-row { cursor: grab; }
.inv-drag-row.dragging { opacity: 0.45; }
.inv-drop-target td { box-shadow: inset 0 3px 0 var(--water); }
.inv-grip { display: inline-flex; vertical-align: middle; margin-right: 4px; color: var(--text-faint); cursor: grab; }
.inv-grip svg { width: 13px; height: 13px; }
.inv-stage-row td { padding: 10px 8px 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary); border-bottom: 1px solid var(--border); background: transparent; }

/* Morning brief, line by line */
.brief-head { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary); margin: 12px 0 4px; }
.brief-line { display: flex; align-items: flex-start; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--border); }
.brief-line:last-child { border-bottom: none; }
.brief-line .brief-text { flex: 1; font-size: 13.5px; line-height: 1.5; }
.brief-line.hidden .brief-text { opacity: 0.45; text-decoration: line-through; }
.brief-line .icon-btn { flex: none; }

/* Answers to checker questions */
.answer-box { padding: 6px 16px 10px 48px; }
.answer-proposal { margin-top: 8px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--bg-panel-alt); border-left: 3px solid var(--water); }

/* ---------------------------------------------------------
   RESIDENTIAL FUNNEL (homeowners only)
   --------------------------------------------------------- */
.funnel-board { display: flex; gap: 12px; overflow-x: auto; padding: 4px 0 12px; align-items: flex-start; }
.funnel-col { flex: 0 0 230px; min-height: 160px; background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; transition: border-color 0.12s ease, background 0.12s ease; }
.funnel-col.drop-hover { border-color: var(--water); background: var(--bg-panel-alt); }
.funnel-col-lost { opacity: 0.75; }
.funnel-col-head { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.funnel-col-hint { font-size: 11px; color: var(--text-faint); margin: 2px 0 8px; }
.funnel-card { background: var(--bg-panel-alt); border: 1px solid var(--border); border-left: 3px solid var(--water); border-radius: var(--radius-sm); padding: 8px 10px; margin-bottom: 8px; cursor: grab; }
.funnel-card.dragging { opacity: 0.5; }
.funnel-card .row-title { display: flex; align-items: center; gap: 6px; }
.funnel-card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; gap: 6px; }
.funnel-empty { color: var(--text-faint); text-align: center; padding: 18px 0; }
@media (max-width: 720px) { .funnel-col { flex-basis: 82vw; } }

/* Residential pricing: the internal margin box (never printed) */
.res-internal { display:flex; align-items:center; gap:14px; flex-wrap:wrap; border:1px dashed var(--warn, #F0BB37); background: rgba(240,187,55,0.06); border-radius: var(--radius-sm); padding: 10px 12px; margin-top: 8px; }
.res-tag { color: var(--warn, #F0BB37); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.inv-table tr.grp td { font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:0.05em; color:#333; background:#f3f3f3; padding:10px 6px 5px; }

/* Demo mode: a link whose address was taken away still looks and clicks like one */
a[data-demo-masked] { cursor: pointer; }
a[data-demo-masked].src-tag { cursor: default; }


/* ---- Today page + grouped sidebar (2026-11-08) ---- */
.today-head { margin: 2px 0 14px; }
.today-title { font-size: 26px; font-weight: 800; letter-spacing: -0.01em; color: var(--text-primary); }
.nav-more {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 10px 12px; margin-top: 4px;
  border-radius: var(--radius-sm); border: 1px dashed var(--border, rgba(255,255,255,0.14));
  background: transparent; color: var(--text-secondary);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; text-align: left;
}
.nav-more svg { width: 18px; height: 18px; flex-shrink: 0; }
.nav-more:hover { background: var(--bg-panel); color: var(--text-primary); }
.nav-more:focus-visible { outline: 2px solid var(--water); outline-offset: 2px; }
.nav-more .nav-more-count { margin-left: auto; font-size: 11px; opacity: .75; }
.nav-more .nav-more-chev { width: 14px; height: 14px; transition: transform .15s ease; }
.nav-more.open .nav-more-chev { transform: rotate(90deg); }
.nav-more-list { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 6px 10px; padding-left: 8px; border-left: 1px solid var(--border, rgba(255,255,255,0.14)); }
.nav-more-list .nav-item { font-size: 13px; }