/* app.css — Bates Electric app styles on the Design System v3 tokens.
   Load order: tokens.css (tokens, base, ambient, glass, motion/a11y)
   → components.css (.btn/.badge/.filter/.chip/table.data/.field/.stat/
   .dialog/.toast/.empty) → this file (page scaffolding + page-specific
   styling). Colors, radii, and shadows come from tokens — no raw hex except
   where a palette genuinely sits outside the token set (SDS hazard hues,
   toast-on-navy icon colors). Dark mode is the html.dark token swap in
   tokens.css; the short list of true exceptions lives at the bottom. */

/* ============================================================
   GLASS CARD UTILITY
   ============================================================ */

.glass-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}

/* ============================================================
   AUTH PAGES
   ============================================================ */

.auth-body,
.login-shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(24px, env(safe-area-inset-top)) 20px
           max(24px, env(safe-area-inset-bottom));
  /* flat --bg + .ambient blobs (tokens.css) replace the old gradients.
     Must PAINT --bg (not transparent): body's background propagates to the
     canvas, which is the only layer behind the z-index:-1 ambient blobs —
     transparent here leaves a white canvas in dark mode. */
  background: var(--bg);
}

.auth-shell,
.login-card {
  width: 100%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
}

.auth-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 36px 32px 28px;
  box-shadow: var(--shadow-1),
    0 12px 32px -8px rgba(27,45,91,0.16),
    0 28px 60px -22px rgba(27,45,91,0.20);
  overflow: hidden;
}

@media (max-width: 400px) {
  .auth-card {
    padding: 28px 20px 22px;
    border-radius: var(--radius);
  }
}

/* Auth tabs */
.auth-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 18px;
  background: var(--surface-2);
  padding: 3px;
  border-radius: 10px;
}

.auth-tab {
  flex: 1;
  padding: 8px 14px;
  border: 0;
  background: transparent;
  color: var(--ink-2);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: all 0.2s;
}

.auth-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.auth-tab.active {
  background: var(--accent-soft);
  color: var(--ink);
}

.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-form[hidden] { display: none; }

.brand {
  text-align: center;
  margin-bottom: 24px;
}

.brand-mark {
  width: 128px;
  height: 128px;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.brand-mark img {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 6px 16px rgba(27,45,91,0.20));
}

.bolt {
  color: var(--accent);
  font-size: 40px;
  line-height: 1;
}

.brand h1 {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.4px;
  color: var(--ink);
}

.tagline {
  margin: 6px 0 0;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 500;
}

.field { display: flex; flex-direction: column; gap: 6px; }

.field label {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.field-icon {
  position: absolute;
  left: 14px;
  color: var(--ink-3);
  font-size: 18px;
  pointer-events: none;
  z-index: 1;
}

input[type="email"],
input[type="password"],
input[type="text"],
input[type="tel"] {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  font-size: 15px;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  outline: none;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}

/* When an input follows a field-icon, add left padding to clear the icon */
.input-wrap input[type="email"],
.input-wrap input[type="password"],
.input-wrap input[type="text"],
.input-wrap input[type="tel"] {
  padding-left: 44px;
}

input::placeholder { color: var(--ink-3); }

input:focus-visible {
  background: var(--surface);
  border-color: var(--ink-3);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.field-hint {
  font-size: 12px;
  color: var(--ink-3);
  margin-top: -4px;
}

.toggle-password {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  height: 36px;
  padding: 0 10px;
  background: transparent;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 600;
  border: 0;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background 0.15s, color 0.15s;
}

.toggle-password:hover {
  background: var(--surface-2);
  color: var(--ink);
}

.toggle-password:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.remember {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  color: var(--ink-2);
  font-size: 14px;
  cursor: pointer;
}

.remember input {
  width: 20px;
  height: 20px;
  accent-color: var(--accent);
  cursor: pointer;
}

.forgot {
  color: var(--accent);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: color 0.15s;
}

.forgot:hover { color: var(--accent-hover); }
.forgot:focus-visible { outline: 2px solid var(--accent); border-radius: 4px; }

/* Auth forms use the shared .btn system (components.css); the submit button
   just stretches to the card width. */
.auth-form .btn { width: 100%; margin-top: 6px; }

/* Fixed bottom-right status toast, v3 toast treatment: white text on navy-900
   with a leading intent-colored dot (no glyphs). Kind classes (.info/.error/
   .success/.warning) are applied by JS. Sits above modals (z 2000 > 1000). */
.status {
  position: fixed;
  bottom: 24px;
  right: 24px;
  left: auto;
  max-width: min(420px, calc(100vw - 32px));
  z-index: 2000;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  background: var(--navy-900);
  color: var(--ink-inverse);
  font-size: var(--fs-sm);
  font-weight: 600;
  box-shadow: var(--shadow-2);
}
.status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
/* Intent dot colors: the v3 toast icon palette — fixed literals because the
   toast surface is always navy-900 in both themes. */
.status.success::before { background: #7DE3A5; }
.status.error::before   { background: #FF9E96; }
.status.warning::before { background: #F0C060; }
.status.info::before    { background: #82AAFF; }
/* display:flex above beats the UA [hidden] rule — restore it explicitly, or
   every page shows a small empty toast pill in the corner. */
.status[hidden] { display: none; }

.legal {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  text-align: center;
}
.legal p {
  margin: 0;
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 500;
}

@media (min-width: 900px) {
  .auth-shell,
  .login-card { max-width: 460px; }
  .auth-card { padding: 44px 40px 32px; }
  .brand h1 { font-size: 30px; }
}

/* ============================================================
   HOME HUB / DASHBOARD
   v3: the page sits on flat --bg with the shared .ambient blob layer
   (tokens.css) behind it. Glass lives on chrome (header/topbar) only —
   every content card below is a solid surface.
   ============================================================ */

.hub-body {
  background: var(--bg); /* paints the canvas behind the z-index:-1 ambient blobs */
  color: var(--ink);
  min-height: 100vh;
  min-height: 100dvh;
  position: relative;
  overflow-x: hidden;
}

.hub-header {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  color: var(--ink);
  padding: max(12px, env(safe-area-inset-top)) 0 12px;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 100;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hub-header { background: var(--surface); }
}

.hub-header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

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

.brand-mark.small {
  width: 44px;
  height: 44px;
  margin: 0;
  border-radius: var(--radius);
  background: var(--accent-soft);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}

.hub-brand-text h1 {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--ink);
}

.hub-subtitle {
  margin: 2px 0 0;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--ink-2);
}

.hub-user {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hub-user-meta {
  text-align: right;
  line-height: 1.3;
  display: none;
}

.hub-user-name {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.hub-user-role {
  display: inline-block;
  margin-top: 2px;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  background: var(--accent);
  color: var(--ink-inverse);
  border-radius: 6px;
}

.btn-signout {
  height: 40px;
  padding: 0 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  transition: border-color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast) var(--ease-spring);
}

.btn-signout:hover { border-color: var(--ink-3); }

@media (min-width: 600px) {
  .hub-user-meta { display: block; }
}

.hub-main {
  max-width: 600px;
  margin: 0 auto;
  padding: 16px 16px 120px;
  /* clip (not hidden): kills sideways scroll WITHOUT becoming a scroll
     container, so the sticky mobile action bar inside (site-visit) works.
     Browsers without clip keep hidden — the bar just stays in-flow there. */
  overflow-x: hidden;
  overflow-x: clip;
  position: relative;
  z-index: 1;
}

/* ============================================================
   HERO GREETING
   ============================================================ */
.hub-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin: 8px 0 22px;
  padding: 4px 2px;
  animation: heroFadeIn 0.7s var(--ease-spring) both;
}

.hub-hero-text {
  min-width: 0;
  flex: 1;
}

.hub-hero-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.hub-hero-eyebrow {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--line);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}

.hub-hero-weather {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 4px 10px 4px 8px;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-1);
  animation: chipFadeIn 0.5s ease both;
}

.hub-hero-weather[hidden] { display: none; }
.hub-hero-weather[role="button"] { cursor: pointer; }

.hub-hero-weather-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: var(--accent);
  color: var(--ink-inverse);
}

.hub-hero-weather-temp {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.2px;
}

.hub-hero-weather-loc {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-2);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border-left: 1px solid var(--line);
  padding-left: 6px;
  margin-left: 2px;
}

@keyframes chipFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.hub-hero-title {
  margin: 0;
  font-size: 28px;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.6px;
  color: var(--ink);
}

.hub-hero-comma { color: var(--ink-2); font-weight: 700; }

.hub-hero-name { color: var(--accent); }

.hub-hero-sub {
  margin: 6px 0 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
}

.hub-hero-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
  flex-shrink: 0;
  margin-top: 22px;
}

.hub-hero-badge-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: var(--ink-inverse);
  flex-shrink: 0;
}

.hub-hero-badge-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.hub-hero-badge-text strong {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}
.hub-hero-badge-text span {
  font-size: 11px;
  color: var(--ink-2);
  margin-top: 2px;
}

@media (max-width: 380px) {
  .hub-hero-title { font-size: 24px; }
  .hub-hero-badge { display: none; }
}

@keyframes heroFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.hub-welcome { margin-bottom: 32px; }

.hub-welcome h2 {
  margin: 0 0 8px;
  font-size: 28px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.5px;
}

.hub-welcome p {
  margin: 0;
  color: var(--ink-2);
  font-size: 16px;
}

.hub-error {
  padding: 12px 14px;
  background: var(--danger-bg);
  color: var(--danger);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 16px;
}

/* ============================================================
   TILES & CARDS (solid surfaces)
   ============================================================ */

.tile-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.tile {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  min-height: 160px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  text-align: left;
  text-decoration: none;
  color: var(--ink);
  cursor: pointer;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast) var(--ease-spring);
}

.tile:hover {
  border-color: var(--ink-3);
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}

.tile.featured {
  background: var(--accent-soft);
  border-color: var(--navy-100);
}

.tile.featured:hover { border-color: var(--ink-3); }

.tile.featured .tile-hint { color: var(--ink-2); }

.tile.disabled {
  cursor: not-allowed;
  opacity: 0.4;
}
.tile.disabled:hover {
  transform: none;
  box-shadow: var(--shadow-1);
  border-color: var(--line);
}

.tile-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius);
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.tile-title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--ink);
}

.tile-desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink-2);
}

.tile.featured .tile-desc { color: var(--ink-2); }

.tile-hint {
  margin-top: auto;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ink-3);
}

/* ============================================================
   DASHBOARD SEARCH & EMERGENCY BANNER (solid)
   ============================================================ */

.dashboard-search {
  margin-bottom: 24px;
}

.search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.search-icon {
  position: absolute;
  left: 14px;
  color: var(--ink-3);
  pointer-events: none;
}

.search-input {
  width: 100%;
  padding: 14px 14px 14px 44px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  font-size: 16px;
  font-family: var(--font);
  outline: none;
  box-shadow: var(--shadow-1);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}

.search-input:focus {
  border-color: var(--focus);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.search-input::placeholder { color: var(--ink-3); }

.emergency-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--danger-bg);
  border: 1px solid color-mix(in srgb, var(--danger) 25%, transparent);
  border-radius: var(--radius);
  margin-bottom: 20px;
  cursor: pointer;
  transition: border-color var(--dur-fast), transform var(--dur-fast) var(--ease-spring);
}

.emergency-banner:hover {
  border-color: color-mix(in srgb, var(--danger) 45%, transparent);
}

.emergency-icon {
  flex-shrink: 0;
  color: var(--danger);
  line-height: 0;
}

.emergency-title {
  font-weight: 700;
  color: var(--danger);
  font-size: 15px;
}

.emergency-sub {
  font-size: 13px;
  color: var(--ink-2);
  margin-top: 2px;
}

.emergency-arrow {
  margin-left: auto;
  color: var(--ink-3);
  font-size: 18px;
}

.section-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--ink-2);
  margin-bottom: 14px;
  margin-top: 24px;
}

.section-label::before {
  content: '';
  width: 14px;
  height: 3px;
  border-radius: 2px;
  background: var(--accent);
}

/* Quick cards grid (solid) */
.quick-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 20px;
}

.quick-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  color: var(--ink);
  min-width: 0;
  overflow: hidden;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast) var(--ease-spring);
}

.quick-card:hover {
  border-color: var(--ink-3);
  transform: translateY(-1px);
  box-shadow: var(--shadow-2);
}

.qc-icon {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft);
  border: 1px solid var(--line);
  color: var(--accent);
  margin-bottom: 4px;
}

.qc-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  word-break: break-word;
  letter-spacing: -0.1px;
}

.qc-sub {
  font-size: 11px;
  color: var(--ink-3);
  font-weight: 500;
}

/* Staggered entrance animation for quick cards */
.quick-card {
  animation: cardFadeUp 0.5s var(--ease-spring) both;
}
.quick-card:nth-child(1) { animation-delay: 0.05s; }
.quick-card:nth-child(2) { animation-delay: 0.10s; }
.quick-card:nth-child(3) { animation-delay: 0.15s; }
.quick-card:nth-child(4) { animation-delay: 0.20s; }
.quick-card:nth-child(5) { animation-delay: 0.25s; }
.quick-card:nth-child(6) { animation-delay: 0.30s; }

.featured-action-card {
  animation: cardFadeUp 0.5s var(--ease-spring) both;
}
.featured-action-card:nth-child(2) { animation-delay: 0.08s; }

.reference-card {
  animation: cardFadeUp 0.5s var(--ease-spring) both;
}

@keyframes cardFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Featured actions — first card is the view's one primary (flat accent);
   siblings are solid secondary cards. */
.featured-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.featured-action-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: var(--accent);
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  color: var(--ink-inverse);
  box-shadow: var(--shadow-2);
  transition: background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast) var(--ease-spring);
}

.featured-action-card:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
}

.featured-action-card + .featured-action-card {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
  box-shadow: var(--shadow-1);
}

.featured-action-card + .featured-action-card:hover {
  background: var(--surface);
  border-color: var(--ink-3);
}

.featured-action-card + .featured-action-card .fac-icon,
.featured-action-card + .featured-action-card .fac-title {
  color: var(--ink);
}

.featured-action-card + .featured-action-card .fac-sub {
  color: var(--ink-2);
}

.fac-icon {
  color: var(--ink-inverse);
  flex-shrink: 0;
  line-height: 0;
}

.fac-title {
  font-weight: 700;
  font-size: 16px;
  color: inherit;
  margin: 0;
}

.fac-sub {
  font-size: 13px;
  color: color-mix(in srgb, var(--ink-inverse) 70%, transparent);
  margin-top: 2px;
}

/* Reference cards (solid) */
.reference-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
  cursor: pointer;
  margin-bottom: 12px;
  box-shadow: var(--shadow-1);
}

.reference-card:hover {
  border-color: var(--ink-3);
  border-left-color: var(--accent);
  box-shadow: var(--shadow-2);
}

.reference-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.reference-icon {
  color: var(--accent);
  flex-shrink: 0;
  line-height: 0;
}

.reference-title {
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
}

.reference-sub {
  font-size: 13px;
  color: var(--ink-2);
}

.reference-detail-btn {
  align-self: flex-start;
  padding: 6px 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--ink-2);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  transition: border-color var(--dur-fast), color var(--dur-fast);
}

.reference-detail-btn:hover {
  border-color: var(--ink-3);
  color: var(--ink);
}

/* Steps indicator */
.steps {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.step {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--ink-2);
}

.step-number {
  width: 24px;
  height: 24px;
  min-width: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 11px;
  background: var(--accent);
  color: var(--ink-inverse);
}

.step-text {
  flex: 1;
  min-width: 0;
}

/* PPE Grid */
.ppe-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 16px;
}

.ppe-cell {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: center;
}

.ppe-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
}

.ppe-items {
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.5;
}

/* Emergency call buttons (solid, semantic) */
.emergency-call-button {
  display: flex;
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 16px;
}

.emergency-call-911,
.emergency-call-office {
  flex: 1;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--ink);
  font-weight: 700;
  font-size: 15px;
  font-family: var(--font);
  cursor: pointer;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: var(--shadow-1);
  transition: border-color var(--dur-fast), transform var(--dur-fast) var(--ease-spring);
}

.emergency-call-911 {
  background: var(--danger-bg);
  border-color: color-mix(in srgb, var(--danger) 25%, transparent);
  color: var(--danger);
}

.emergency-call-911:hover {
  border-color: color-mix(in srgb, var(--danger) 45%, transparent);
  transform: translateY(-1px);
}

.emergency-call-office {
  background: var(--info-bg);
  border-color: color-mix(in srgb, var(--info) 25%, transparent);
  color: var(--info);
}

.emergency-call-office:hover {
  border-color: color-mix(in srgb, var(--info) 45%, transparent);
  transform: translateY(-1px);
}

.call-icon { line-height: 0; }

.call-label {
  font-size: 13px;
}

.call-number {
  font-family: monospace;
  font-size: 13px;
  font-weight: 700;
  margin-top: 4px;
}

.call-type {
  font-size: 11px;
  opacity: 0.7;
}

.emergency-calls-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 16px;
}
/* ============================================================
   INSPECTION FORM
   ============================================================ */

.insp-body {
  background: var(--bg);
}

.back-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 20px;
  font-weight: 700;
  text-decoration: none;
  margin-right: 4px;
  cursor: pointer;
  transition: all 0.15s;
}
.back-link:hover {
  background: var(--neutral-bg);
  border-color: var(--ink-3);
}
.back-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.autosave-badge {
  margin-left: 8px;
  display: inline-block;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  background: var(--ok-bg);
  color: var(--ok);
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--ok) 30%, transparent);
  opacity: 0;
  transition: opacity 0.4s;
}
.autosave-badge.visible { opacity: 1; }

.insp-main {
  max-width: 960px;
  margin: 0 auto;
  padding: 24px 16px 120px;
}

.insp-section {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  margin-bottom: 16px;
  overflow: hidden;
}

.insp-section-hdr {
  background: var(--surface-2);
  color: var(--ink);
  padding: 14px 18px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.3px;
  border-bottom: 1px solid var(--line);
}
.insp-section-hdr span { display: inline; }
.insp-section-sub {
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.2px;
  opacity: 0.7;
}

.insp-subhdr {
  background: var(--surface-2);
  color: var(--ink);
  padding: 10px 18px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.3px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.insp-fields {
  display: grid;
  gap: 14px 16px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  padding: 18px;
}

.insp-field { display: flex; flex-direction: column; gap: 6px; }
.insp-field-full { grid-column: 1 / -1; padding: 0 18px 18px; }

.insp-field label,
.insp-row-q {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

.insp-field input,
.insp-field select,
.insp-row-input,
.insp-section textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  font-size: 15px;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  outline: none;
  font-family: inherit;
  transition: all 0.15s;
}

.insp-section textarea {
  resize: vertical;
  min-height: 120px;
  margin: 18px;
  width: calc(100% - 36px);
}

.insp-field input:focus,
.insp-field select:focus,
.insp-row-input:focus,
.insp-section textarea:focus {
  background: var(--surface);
  border-color: var(--ink-3);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.insp-rows { padding: 4px 0; }

.insp-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 18px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.insp-row:first-child { border-top: 0; }
.insp-row[hidden] { display: none; }

.insp-row-q {
  flex: 1 1 260px;
  min-width: 240px;
  line-height: 1.4;
}

.insp-row-sub {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-2);
  margin-top: 2px;
}

.insp-row-ctrl {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}
.insp-row-input { max-width: 220px; }

/* Radio chip groups */
.radio-group {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
}

.radio-opt input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.radio-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink-2);
  border-radius: 10px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.12s;
  user-select: none;
}

.radio-opt:hover .radio-chip {
  background: var(--neutral-bg);
  border-color: var(--ink-3);
}
.radio-opt input:focus-visible + .radio-chip {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Selected states */
.radio-opt.r-y    input:checked + .radio-chip { background: var(--info); border-color: var(--info); color: var(--ink-inverse); }
.radio-opt.r-n    input:checked + .radio-chip { background: var(--warn); border-color: var(--warn); color: var(--ink-inverse); }
.radio-opt.r-na   input:checked + .radio-chip { background: var(--neutral); border-color: var(--neutral); color: var(--ink-inverse); }
.radio-opt.r-good input:checked + .radio-chip { background: var(--info); border-color: var(--info); color: var(--ink-inverse); }
.radio-opt.r-fair input:checked + .radio-chip { background: var(--accent); border-color: var(--accent); color: var(--ink-inverse); }
.radio-opt.r-poor input:checked + .radio-chip { background: var(--danger); border-color: var(--danger); color: var(--ink-inverse); }
.radio-opt.r-cu   input:checked + .radio-chip { background: var(--warn); border-color: var(--warn); color: var(--ink-inverse); }
.radio-opt.r-al   input:checked + .radio-chip { background: var(--neutral-bg); border-color: var(--ink-3); color: var(--ink-2); }

/* Recommended services grid */
.insp-help {
  padding: 14px 18px 0;
  margin: 0;
  font-size: 14px;
  color: var(--ink-2);
}

.upsell-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  padding: 14px 18px;
}

.upsell-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: all 0.12s;
}
.upsell-item:hover {
  background: var(--neutral-bg);
  border-color: var(--ink-3);
}
.upsell-item input {
  width: 20px;
  height: 20px;
  accent-color: var(--accent);
  flex-shrink: 0;
  cursor: pointer;
}
.upsell-item .upsell-label { flex: 1; }
.upsell-item .auto-badge {
  display: none;
  margin-left: 6px;
  padding: 2px 7px;
  background: var(--warn-bg);
  color: var(--warn);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}
.upsell-item.auto-checked {
  background: var(--warn-bg);
  border-color: color-mix(in srgb, var(--warn) 30%, transparent);
}
.upsell-item.auto-checked .auto-badge { display: inline-block; }

/* Photos */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  padding: 14px 18px 0;
}
.photo-thumb {
  position: relative;
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface-2);
}
.photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.photo-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0,0,0,0.6); /* overlay on the photo itself — stays literal */
  color: #fff;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  line-height: 0;
  transition: background 0.15s;
}
.photo-remove:hover {
  background: rgba(0,0,0,0.8);
}

.photo-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 14px 18px 18px;
  padding: 14px 22px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.15s;
}
.photo-add:hover {
  background: var(--neutral-bg);
  border-color: var(--ink-3);
}

/* Per-section photo blocks (mp/sp/svc/gw/sm/ac/hv) */
.section-photos {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.section-photo-hdr {
  padding: 0 18px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--ink);
  text-transform: uppercase;
}
.section-photo-prompts {
  padding: 4px 18px 0;
  margin: 0;
  font-size: 12px;
  font-style: italic;
  color: var(--ink-2);
}
.section-photo-prompts:empty { display: none; }
.photo-done {
  margin: 0 18px 18px;
  padding: 10px 14px;
  background: transparent;
  color: var(--ink-2);
  border: 0;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.photo-done:hover { color: var(--ink); }

/* Signatures */
.sig-pair {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
  padding: 0 18px 18px;
}
@media (min-width: 720px) {
  .sig-pair { grid-template-columns: 1fr 1fr; }
}

.sig-block { display: flex; flex-direction: column; gap: 8px; }
.sig-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.sig-canvas {
  width: 100%;
  height: 180px;
  background: var(--surface-2);
  border: 1px dashed var(--line);
  border-radius: 10px;
  touch-action: none;
}

.btn-text {
  align-self: flex-start;
  background: none;
  border: 0;
  padding: 4px 0;
  color: var(--accent);
  font-weight: 700;
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
  transition: color 0.15s;
}

.btn-text:hover {
  color: var(--accent-hover);
}

/* Action buttons at the bottom of the form. Reset is destructive, so it
   lives alone on its own row (v3 §3 — never adjacent to Save/Submit). */
.insp-reset-row {
  display: flex;
  margin-top: 8px;
}
.insp-reset-row #reset-btn {
  /* colors come from .btn-danger-soft (components.css); keep sizing only */
  min-height: 44px;
  font-size: 13px;
}
.insp-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.insp-actions .btn-primary,
.insp-actions .btn-secondary {
  flex: 1 1 240px;
  min-height: 56px;
}

/* ============================================================
   STICKY FORM ACTION BARS (mobile) — v3 §2 phone demo #2: the
   primary actions float in a glass-strong bar pinned to the
   viewport bottom, so Save/Submit is never a scroll away. sticky
   (not fixed) keeps desktop layout untouched and needs no JS.
   ============================================================ */
@media (max-width: 640px) {
  .insp-actions,
  .sv-footer-actions {
    position: sticky;
    bottom: 12px;
    z-index: 90; /* under the topbar (100), drawer (500), modals (1500) */
    background: var(--glass-bg-strong);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-line);
    box-shadow: var(--glass-shadow);
    border-radius: 18px;
    padding: 10px;
    margin-top: 16px;
  }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .insp-actions,
    .sv-footer-actions { background: var(--surface); border-color: var(--line); }
  }
  .insp-actions {
    gap: 10px;
    flex-wrap: nowrap; /* Save Draft + Submit share the one row */
  }
  .insp-actions .btn-primary,
  .insp-actions .btn-secondary {
    flex: 1 1 0;
    min-height: 46px;
    min-width: 0;
  }
  .sv-footer-actions {
    padding: 10px;
    margin-bottom: max(12px, env(safe-area-inset-bottom));
  }
}
@media print {
  .insp-actions,
  .sv-footer-actions { position: static; background: none; box-shadow: none; border: none; }
}

/* ============================================================
   TOP BAR WITH HAMBURGER
   ============================================================ */

.app-topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: max(12px, env(safe-area-inset-top)) 16px 12px;
  /* v3 glass chrome: sticky bar with a hairline bottom edge */
  background: var(--glass-bg);
  border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .app-topbar { background: var(--surface); }
}

.hamburger-btn,
.topbar-hamburger {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--ink);
  cursor: pointer;
  border-radius: var(--radius);
  transition: background 0.15s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  position: relative;
  z-index: 10;
}

/* Ensure SVGs inside buttons don't eat touch events */
.topbar-hamburger svg,
.topbar-signout svg,
.shared-drawer-close svg {
  pointer-events: none;
}

.hamburger-btn:active,
.topbar-hamburger:active {
  background: var(--accent-soft);
}

.topbar-signout {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--ink-2);
  cursor: pointer;
  border-radius: 10px;
  transition: background 0.15s, color 0.15s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  position: relative;
  z-index: 10;
}

.topbar-signout:active {
  background: var(--accent-soft);
  color: var(--ink);
}

.topbar-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.3px;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ============================================================
   Generator Care section tabs — shared segmented switcher across
   generator-care / metrics / accounting. Injected by shared-nav.js into
   [data-section-tabs] so the markup lives in one place. Theme-token based,
   so it's correct in light AND dark. Distinct from the .gc-tab filter pills
   (All Active / Overdue / …) on the dashboard — both can coexist.
   ============================================================ */
.section-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  padding: 4px;
  background: var(--neutral-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.section-tab {
  flex: 1 1 auto;
  text-align: center;
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.section-tab:hover { color: var(--ink); background: var(--accent-soft); }
.section-tab.active,
.section-tab.active:hover { background: var(--accent); color: var(--ink-inverse); }
/* Tab icons are hidden everywhere (the switcher is text-only); markup keeps
   them so a future variant can reveal them with CSS alone. */
.section-tab-icon { display: none; }

/* Phones keep the same top segmented switcher (the hamburger drawer is the
   single nav); the switcher just gets comfortable 44px targets. */
@media (max-width: 640px) {
  .section-tab { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
}

/* ============================================================
   DRAWER / SIDE NAVIGATION
   ============================================================ */

/* Drawer Overlay */
.shared-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  /* v3 scrim: navy tint + 6px blur (dark tint override at bottom of file) */
  background: rgba(19,31,63,0.28);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s;
}

.shared-drawer-overlay.open {
  opacity: 1;
  pointer-events: all;
}

/* Drawer Container */
.shared-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 260px;
  z-index: 501;
  display: flex;
  flex-direction: column;
  /* v3: drawer is a glass-strong panel floating over the blurred scrim */
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-right: 1px solid var(--glass-line);
  box-shadow: var(--glass-shadow);
  transform: translateX(-100%);
  transition: transform var(--dur-med) var(--ease-spring);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.shared-drawer.open {
  transform: translateX(0);
}

.shared-drawer-header {
  position: relative;
  padding: calc(max(16px, env(safe-area-inset-top)) + 16px) 18px 14px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}

.shared-drawer-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--ink);
}

.shared-drawer-subtitle {
  margin: 4px 0 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--ink-3);
}

.shared-drawer-close {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.shared-drawer-close:active {
  background: var(--neutral-bg);
}

.shared-drawer-nav {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
  -webkit-overflow-scrolling: touch;
}

.shared-drawer-section {
  margin-bottom: 8px;
}

.shared-drawer-section-label {
  margin: 0;
  padding: 12px 18px 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--ink-3);
}

.shared-drawer-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 18px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: all 0.12s;
  -webkit-tap-highlight-color: transparent;
}

.shared-drawer-item:active {
  background: var(--surface-2);
}

.shared-drawer-item.active {
  color: var(--accent);
  font-weight: 700;
  background: var(--accent-soft);
}

.shared-drawer-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  font-size: 16px;
  transition: all 0.12s;
}

.shared-drawer-item.active .shared-drawer-item-icon {
  background: var(--accent-soft);
  color: var(--accent);
}

.shared-drawer-item-label {
  flex: 1;
  min-width: 0;
}

/* Hide bottom nav */
.shared-bottom-nav {
  display: none !important;
}

.shared-nav-item {
  display: none !important;
}

/* Page layout adjustments */
.hub-main,
.insp-main,
.main {
  padding-bottom: max(100px, calc(80px + env(safe-area-inset-bottom)));
}

/* ============================================================
   DOCUMENTS PAGE
   ============================================================ */

.docs-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 8px;
}

.doc-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  text-decoration: none;
  color: var(--ink);
  transition: all 0.15s;
  cursor: pointer;
}

.doc-card:hover {
  border-color: var(--ink-3);
  box-shadow: var(--shadow-2);
  transform: translateY(-1px);
}

.doc-card:active {
  transform: translateY(0);
  box-shadow: var(--shadow-1);
}

.doc-card-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.doc-card-icon--manual {
  background: var(--accent-soft);
  color: var(--accent);
}

.doc-card-icon--sds {
  background: var(--danger-bg);
  color: var(--danger);
}

.doc-card-body {
  flex: 1;
}

.doc-card-title {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--ink);
}

.doc-card-desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
}

.doc-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.doc-card-badge {
  display: inline-block;
  padding: 4px 10px;
  background: var(--surface-2);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
}

.doc-card-arrow {
  color: var(--ink-3);
}

.docs-footer {
  margin-top: 24px;
  text-align: center;
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-3);
}

/* ── Safety Manual TOC ──────────────────────── */

.manual-open-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: var(--accent);
  color: var(--ink-inverse);
  border-radius: var(--radius);
  text-decoration: none;
  margin-bottom: 20px;
  transition: all 0.15s;
  box-shadow: var(--shadow-2);
  touch-action: manipulation;
}
.manual-open-btn:active {
  transform: scale(0.98);
  box-shadow: var(--shadow-1);
}
.manual-open-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.manual-open-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.manual-open-text strong {
  font-size: 16px;
  font-weight: 700;
}
.manual-open-text span {
  font-size: 13px;
  opacity: 0.8;
}
.manual-open-arrow {
  flex-shrink: 0;
  opacity: 0.7;
}

/* TOC search */
.toc-search-wrap {
  position: relative;
  margin-bottom: 20px;
}
.toc-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-3);
  pointer-events: none;
}
.toc-search-input {
  width: 100%;
  padding: 12px 14px 12px 40px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-family: var(--font);
  font-size: 15px;
  background: var(--surface);
  color: var(--ink);
  outline: none;
  transition: border-color 0.15s;
}
.toc-search-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.toc-search-input::placeholder {
  color: var(--ink-3);
}

/* TOC sections */
.toc-section {
  margin-bottom: 20px;
}
.toc-section-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ink-3);
  margin: 0 0 8px 4px;
}
.toc-list {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-1);
}
.toc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  transition: background 0.1s;
  touch-action: manipulation;
}
.toc-row:last-child {
  border-bottom: none;
}
.toc-row:active {
  background: var(--surface-2);
}
.toc-row-title {
  font-size: 15px;
  font-weight: 500;
  flex: 1;
  padding-right: 12px;
}
.toc-row-page {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-3);
  white-space: nowrap;
}

/* ── SDS Sheets ─────────────────────────────── */

.sds-count {
  margin: 0 0 14px 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-3);
}
.sds-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sds-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow-1);
}
.sds-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}
.sds-card-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}
.sds-signal {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
}
.sds-signal--danger {
  background: var(--danger-bg);
  color: var(--danger);
}
.sds-signal--warning {
  background: var(--warn-bg);
  color: var(--warn);
}
.sds-card-brand {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: 2px;
}
.sds-card-use {
  font-size: 13px;
  color: var(--ink-3);
  margin-bottom: 10px;
}
.sds-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.sds-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
}
.sds-tag svg {
  flex-shrink: 0;
}
.sds-tag--flame {
  background: var(--danger-bg);
  color: var(--danger);
}
.sds-tag--irritant {
  background: var(--warn-bg);
  color: var(--warn);
}
.sds-tag--health {
  background: rgba(168,85,247,0.10);
  color: #7C3AED;
}
.sds-tag--toxic {
  background: var(--danger-bg);
  color: var(--danger);
}
.sds-tag--corrosive {
  background: rgba(234,88,12,0.10);
  color: #C2410C;
}
.sds-tag--gas {
  background: var(--info-bg);
  color: var(--info);
}
.sds-tag--env {
  background: var(--ok-bg);
  color: var(--ok);
}
.sds-tag--minimal {
  background: var(--ok-bg);
  color: var(--ok);
}
.sds-card-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 10px;
  background: var(--surface-2);
  color: var(--accent);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  border: none;
  border-radius: 10px;
  text-decoration: none;
  transition: background 0.15s;
  touch-action: manipulation;
  cursor: pointer;
}
.sds-card-btn:active {
  background: var(--accent-soft);
}

/* ============================================================
   VIEWER TOP BAR (shared by pdf-viewer, safety-manual, sds-sheets)
   ============================================================ */
.viewer-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  padding-top: max(12px, env(safe-area-inset-top));
  background: var(--accent);
  color: var(--ink-inverse);
}
.viewer-back {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.15);
  color: var(--ink-inverse);
  border: none;
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.viewer-back:active {
  background: rgba(255,255,255,0.25);
}
.viewer-back svg {
  pointer-events: none;
}
.viewer-title {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Compact back link for in-page sub-navigation */
.compact-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--accent-soft);
  color: var(--accent);
  border: none;
  border-radius: 6px;
  padding: 5px 10px;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  margin-bottom: 10px;
}
.compact-back:active {
  background: var(--accent-soft);
}
.compact-back svg {
  pointer-events: none;
}

/* ============================================================
   CONTACTS PAGE
   Theme-aware: colors come from CSS variables, so a future theme
   change to --accent / --surface-* / --ink-* / --line flows
   through here automatically. The only hard-coded colors are the
   semantic emergency-red and copied-success-green palettes.
   ============================================================ */

.contacts-search {
  position: relative;
  display: flex;
  align-items: center;
  margin: 0 0 18px;
}

.contacts-search-icon {
  position: absolute;
  left: 14px;
  display: inline-flex;
  align-items: center;
  pointer-events: none;
  color: var(--ink-3);
  z-index: 1;
}

.contacts-search-input {
  width: 100%;
  height: 44px;
  padding: 0 14px 0 40px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  box-shadow: var(--shadow-1);
}
.contacts-search-input::placeholder { color: var(--ink-3); }
.contacts-search-input:focus-visible {
  border-color: var(--ink-3);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.contacts-empty {
  margin: 4px 2px 16px;
  padding: 14px 16px;
  background: var(--surface-2);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  text-align: center;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 500;
}

.contacts-section {
  margin-bottom: 22px;
  animation: contactsFadeIn 0.45s cubic-bezier(.2,.8,.2,1) both;
}
.contacts-section[hidden] { display: none; }
.contacts-section:nth-of-type(1) { animation-delay: 0.02s; }
.contacts-section:nth-of-type(2) { animation-delay: 0.06s; }
.contacts-section:nth-of-type(3) { animation-delay: 0.10s; }
.contacts-section:nth-of-type(4) { animation-delay: 0.14s; }
.contacts-section:nth-of-type(5) { animation-delay: 0.18s; }

@keyframes contactsFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.contacts-section-title {
  margin: 0 4px 10px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--ink-3);
}

.contact-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
  -webkit-tap-highlight-color: transparent;
}

a.contact-card { cursor: pointer; }

a.contact-card:hover,
a.contact-card:focus-visible {
  transform: translateY(-1px);
  border-color: var(--ink-3);
  box-shadow: var(--shadow-2);
  outline: none;
}

.contact-card--detail {
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
}

.contact-card-head {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.contact-card--emergency {
  background: var(--danger-bg);
  border-color: color-mix(in srgb, var(--danger) 30%, transparent);
  box-shadow: var(--shadow-1);
}
.contact-card--emergency:hover,
.contact-card--emergency:focus-visible {
  border-color: color-mix(in srgb, var(--danger) 30%, transparent);
  box-shadow: var(--shadow-1);
}
.contact-card--emergency .contact-name { color: var(--danger); }
.contact-card--emergency .contact-role { color: var(--danger); }

.contact-avatar {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius);
  background: var(--accent-soft);
  border: 1px solid var(--line);
  color: var(--accent);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.contact-avatar--brand {
  background: var(--surface);
  padding: 4px;
}

.contact-avatar--emergency {
  background: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 30%, transparent);
  color: var(--ink-inverse);
  box-shadow: var(--shadow-1);
}

.contact-body {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.contact-name {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: var(--ink);
}

.contact-role {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
}

.contact-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 12px;
  color: var(--ink-3);
  font-weight: 500;
  word-break: break-word;
}
.contact-meta svg { flex-shrink: 0; opacity: 0.8; }

.contact-cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--danger-bg);
  color: var(--danger);
}

.contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.contact-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.05s;
  -webkit-tap-highlight-color: transparent;
}
.contact-action svg { color: var(--accent); }
.contact-action:hover {
  background: var(--neutral-bg);
  border-color: var(--ink-3);
}
.contact-action:active { transform: scale(0.98); }
.contact-action:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.contact-action.copied {
  background: var(--ok-bg);
  border-color: color-mix(in srgb, var(--ok) 30%, transparent);
  color: var(--ok);
}
.contact-action.copied svg { color: var(--ok); }

.contacts-toast {
  position: fixed;
  left: 50%;
  bottom: max(96px, calc(76px + env(safe-area-inset-bottom)));
  transform: translateX(-50%) translateY(8px);
  padding: 10px 16px;
  background: var(--navy-900);
  color: var(--ink-inverse);
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-2);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 200;
}
.contacts-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (max-width: 380px) {
  .contact-name { font-size: 15px; }
  .contact-actions { gap: 6px; }
  .contact-action { padding: 7px 10px; font-size: 12px; }
}

/* ============================================================
   DARK MODE — only what the token swap can't express.
   tokens.css html.dark re-points every token (surfaces, ink, semantic
   pairs, glass, shadows), so component rules that read tokens theme
   automatically. The rules below are the true exceptions: brand glow,
   scrim tints, and hues that sit outside the token ramp.
   ============================================================ */

/* Logo glow reads better against the dark surface. */
html.dark .brand-mark img {
  filter:
    drop-shadow(0 0 16px rgba(143,176,255,0.35))
    drop-shadow(0 4px 12px rgba(0,0,0,0.45));
}

/* Dialog/drawer scrims: navy tint in light, deeper black in dark (v3 §4). */
html.dark .shared-drawer-overlay,
html.dark .modal-overlay {
  background: rgba(0,0,0,0.45);
}

/* SDS hazard tags use GHS-adjacent hues with no token equivalent. */
html.dark .sds-tag--health    { background: rgba(192,132,252,0.14); color: #C084FC; }
html.dark .sds-tag--corrosive { background: rgba(251,146,60,0.14);  color: #FB923C; }

/* ============================================================
   OFFICE DASHBOARD
   ============================================================ */

.dashboard-body {
  padding: 0;
}

.dashboard-main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 20px 80px;
}

.dashboard-main h1,
.dashboard-main h2 {
  color: var(--ink);
  margin: 0 0 8px;
}
.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.dashboard-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.result-count {
  font-size: 13px;
  color: var(--ink-2);
  font-weight: 600;
}

/* Generator Care sub-tab header (Customers / Metrics / Accounting). A 3-column
   grid (1fr auto 1fr) centers the H1 on the FULL container width instead of the
   leftover space between the side controls, so the title no longer shifts when
   the right-side actions differ per tab. min-width:0 lets the side groups shrink
   (and the title wrap) on narrow widths instead of colliding. Theme-agnostic —
   layout only; colors come from the shared header/body rules in both themes. */
.gc-page-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
}
.gc-page-header > a { justify-self: start; min-width: 0; }
/* Fluid title so it never clips/overflows: shrinks on phones, capped at the
   desktop 2rem (UA default) above ~640px so desktop is unchanged. */
.gc-page-header > h1 { justify-self: center; text-align: center; min-width: 0; margin: 0; font-size: clamp(1.25rem, 5vw, 2rem); }
.gc-page-header > .dashboard-header-actions { justify-self: end; min-width: 0; }

/* Phones: the 1fr|auto|1fr columns can't fit side-by-side, so stack the header
   vertically — Home, then the title, then the action buttons wrapping on their
   own row. Nothing overlaps. Desktop (>640px) keeps the centered grid above. */
@media (max-width: 640px) {
  .gc-page-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .gc-page-header > h1 { text-align: left; }
  .gc-page-header > .dashboard-header-actions { flex-wrap: wrap; }
  /* Comfortable thumb targets for the header action buttons on phones. */
  .gc-page-header .dashboard-header-actions .btn-secondary,
  .gc-page-header .dashboard-header-actions .btn-primary {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

.dashboard-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  margin: 8px 0 20px;
  box-shadow: var(--shadow-1);
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.filter-group label {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.filter-group input {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 14px;
  background: var(--surface);
  color: var(--ink);
}
.filter-group input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.dashboard-content { margin-top: 4px; }

.loading-state,
.empty-state,
.error-state {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 20px;
  text-align: center;
  color: var(--ink-2);
  box-shadow: var(--shadow-1);
}
.error-state {
  border-color: color-mix(in srgb, var(--danger) 30%, transparent);
  color: var(--danger);
  background: var(--danger-bg);
}

.inspections-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}

.insp-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow-1);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.insp-card:hover {
  transform: translateY(-1px);
  border-color: var(--ink-3);
  box-shadow: var(--shadow-2);
}

.insp-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.insp-card-date {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
/* Status pill colors come from .badge/.badge-ok/.badge-info (components.css);
   only the uppercase treatment is page-specific. */
.insp-card-status {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.insp-card-body h3 {
  margin: 0 0 6px;
  font-size: 17px;
  color: var(--ink);
  line-height: 1.25;
}
.insp-card-meta p {
  margin: 2px 0;
  font-size: 13px;
  color: var(--ink-2);
}
.insp-card-meta strong { color: var(--ink); }

.insp-card-footer {
  display: flex;
  gap: 8px;
  margin-top: auto;
  padding-top: 4px;
}
.insp-card-footer button { flex: 1; }

/* (.btn / .btn-sm / .btn-danger etc. come from components.css) */

/* ---------- Modal ---------- */
.modal[hidden] { display: none; }
.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 32px 16px;
  overflow-y: auto;
}
.modal-overlay {
  position: fixed;
  inset: 0;
  /* v3 scrim (dark tint override at bottom of file) */
  background: rgba(19,31,63,0.28);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.modal-content {
  position: relative;
  background: var(--surface);
  border-radius: var(--radius);
  max-width: 760px;
  width: 100%;
  box-shadow: var(--shadow-2);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 64px);
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}
.modal-header h2 {
  margin: 0;
  font-size: 18px;
  color: var(--ink);
}
.modal-close {
  background: none;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  line-height: 0;
  cursor: pointer;
  color: var(--ink-3);
  padding: 0;
  border-radius: var(--radius-sm);
}
.modal-close:hover { color: var(--ink); }

.modal-body {
  padding: 16px 20px;
  overflow-y: auto;
  flex: 1;
}
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 20px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}

/* ---------- Details content ---------- */
.details-content { font-size: 14px; }
.details-section-title {
  margin: 18px 0 8px;
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding-bottom: 4px;
  border-bottom: 2px solid var(--accent);
}
.details-section-title:first-child { margin-top: 0; }

.details-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 8px;
}
.details-table td {
  padding: 6px 8px;
  border: 1px solid var(--line);
  vertical-align: top;
  font-size: 13px;
}
.details-table td:first-child {
  width: 40%;
  background: var(--surface-2);
  color: var(--ink-2);
}

.sig-display-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 8px 0;
}
.sig-display-block { text-align: center; }
.sig-label {
  font-size: 11px;
  color: var(--ink-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

@media (max-width: 600px) {
  .modal-content { max-height: calc(100vh - 32px); }
  .sig-display-pair { grid-template-columns: 1fr; }
  .insp-card-footer { flex-direction: column; }
}

/* ---------- Office dashboard: report & photos ---------- */
.details-files { margin-top: 8px; }
.files-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.files-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
}
.files-photo {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--line);
  text-decoration: none;
}
.files-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.files-loading,
.files-empty,
.files-error {
  font-size: 13px;
  color: var(--ink-2);
  padding: 8px 0;
}
.files-error { color: var(--danger); }

/* ==========================================================
   Site Visit Form
   ========================================================== */

/* Tab navigation */
.sv-tab-form {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 18px;
}

/* .sv-tab-btn visuals come from the shared .filter pill (components.css). */

/* Sections — glass card pattern */
.sv-section {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  margin-bottom: 16px;
  overflow: hidden;
}

.sv-section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 16px 18px;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink-inverse);
  background: var(--accent);
  letter-spacing: -0.2px;
}

.sv-section-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  color: var(--ink-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}

/* Photo count badge in section header */
.sv-photo-count {
  margin-left: auto;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,0.7);
}

/* Form field grid */
.sv-field-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 18px;
}

@media (max-width: 600px) {
  .sv-field-group {
    grid-template-columns: 1fr;
  }
}

.sv-field {
  display: flex;
  flex-direction: column;
}

.sv-field--full {
  grid-column: 1 / -1;
}

.sv-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: 6px;
  letter-spacing: 0.1px;
}

.sv-input {
  width: 100%;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
}

.sv-input::placeholder {
  color: var(--ink-3);
}

.sv-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
  background: var(--surface);
}

.sv-textarea {
  width: 100%;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  min-height: 80px;
  resize: vertical;
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
}

.sv-textarea::placeholder {
  color: var(--ink-3);
}

.sv-textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
  background: var(--surface);
}

.sv-textarea--tall {
  min-height: 120px;
}

/* Chips (service type tags) */
.sv-chip {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
  user-select: none;
  transition: all 0.2s;
}

.sv-chip:hover {
  background: var(--accent-soft);
  border-color: var(--ink-3);
}

.sv-chip input {
  display: none;
}

.sv-chip.checked {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ink-inverse);
  box-shadow: var(--shadow-1);
}

.sv-chip.checked:hover {
  background: var(--accent-hover);
}

/* Chip container */
.sv-chip-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

/* Photo prompt cards */
.sv-photo-prompt {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: all 0.2s;
}

.sv-photo-prompt.has-file {
  background: var(--ok-bg);
  border-color: color-mix(in srgb, var(--ok) 30%, transparent);
}

.sv-prompt-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sv-prompt-icon.done {
  background: var(--ok-bg);
}

.sv-prompt-text {
  flex: 1;
  min-width: 0;
}

.sv-prompt-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.1px;
}

.sv-prompt-sub {
  font-size: 11px;
  color: var(--ink-3);
  line-height: 1.4;
  margin-top: 2px;
}

.sv-prompt-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--ok);
  margin-top: 3px;
}

.sv-prompt-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

.sv-prompt-btn {
  padding: 6px 14px;
  background: var(--accent-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  transition: all 0.15s;
}

.sv-prompt-btn:hover {
  background: var(--accent-soft);
}

.sv-prompt-btn.done {
  background: var(--ok-bg);
  border-color: color-mix(in srgb, var(--ok) 30%, transparent);
  color: var(--ok);
}

.sv-prompt-btn.done:hover {
  background: var(--ok-bg);
}

/* Upload progress */
.sv-upload-progress {
  width: 80px;
  height: 4px;
  background: var(--accent-soft);
  border-radius: 4px;
  overflow: hidden;
  display: none;
}

.sv-upload-bar {
  height: 100%;
  width: 0;
  background: var(--accent);
  border-radius: 4px;
  transition: width 0.3s ease;
}

/* Photo section info block */
.sv-photo-section-info {
  background: var(--surface-2);
  border-radius: 10px;
  padding: 10px 14px;
  margin: 14px;
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.6;
}

/* Photo prompts container */
.sv-photo-prompts-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 14px 14px;
}

/* Extra uploads area */
.sv-extra-section {
  margin: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.sv-extra-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: 8px;
}

.sv-extra-uploads-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sv-extra-add-btn {
  width: 100%;
  margin-top: 8px;
  padding: 12px;
  background: var(--surface);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  transition: all 0.15s;
}

.sv-extra-add-btn:hover {
  background: var(--surface-2);
  border-color: var(--ink-3);
  color: var(--accent);
}

/* Dashboard cards */
.sv-dash-card {
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.sv-dash-card:hover {
  transform: translateY(-1px);
  border-color: var(--ink-3);
  box-shadow: var(--shadow-2);
}

.sv-dash-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 6px;
}

.sv-dash-customer {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.2px;
}

.sv-dash-address {
  font-size: 12px;
  color: var(--ink-2);
  margin-top: 1px;
}

.sv-dash-meta {
  text-align: right;
  flex-shrink: 0;
  margin-left: 12px;
}

.sv-dash-date {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-3);
}

.sv-dash-tech {
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 1px;
}

.sv-dash-scopes {
  font-size: 12px;
  color: var(--ink-2);
  margin-bottom: 8px;
}

.sv-dash-thumbs {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-bottom: 8px;
  align-items: center;
}

.sv-dash-thumb-img {
  width: 56px;
  height: 46px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  display: block;
}

.sv-dash-thumb-vid {
  width: 56px;
  height: 46px;
  background: var(--accent);
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-inverse);
  font-size: 10px;
  font-weight: 600;
  text-decoration: none;
}

.sv-dash-thumb-more {
  width: 56px;
  height: 46px;
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--ink-2);
  font-weight: 600;
}

.sv-dash-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.sv-dash-file-count {
  font-size: 11px;
  color: var(--ink-3);
}

.sv-dash-followup {
  background: var(--warn-bg);
  border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent);
  color: var(--warn);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
}

/* Dashboard tab container */
.sv-dash-tab {
  padding-bottom: 60px;
}

.sv-dash-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.sv-dash-count {
  font-size: 13px;
  color: var(--ink-2);
}

/* .sv-dash-refresh-btn visuals come from .btn .btn-secondary .btn-sm. */

.sv-dash-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sv-dash-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--ink-3);
  font-size: 14px;
}

/* Submit area */
.sv-footer-actions {
  padding: 0 14px 60px;
  margin-top: 8px;
}

.sv-submit-btn {
  width: 100%;
  padding: 16px;
  background: var(--accent);
  border: none;
  border-radius: var(--radius);
  color: var(--ink-inverse);
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: -0.2px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all 0.2s;
}

.sv-submit-btn:hover {
  box-shadow: var(--shadow-2);
  transform: translateY(-1px);
}

.sv-submit-btn:active {
  transform: translateY(0);
}

.sv-submit-btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
}

/* Submit status messages */
.sv-submit-status {
  display: none;
  padding: 12px 16px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 12px;
}

.sv-status--error {
  display: block;
  background: var(--danger-bg);
  color: var(--danger);
  border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
}

.sv-status--info {
  display: block;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--line);
}

.sv-status--success {
  display: block;
  background: var(--ok-bg);
  color: var(--ok);
  border: 1px solid color-mix(in srgb, var(--ok) 30%, transparent);
}

/* Extra upload inline input override */
.sv-photo-prompt .sv-input--inline {
  margin-bottom: 0;
  font-size: 13px;
}

.sv-extra-status {
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 4px;
}