:root {
  --bg: #f4f6f8;
  --card: #ffffff;
  --ink: #1a2330;
  --muted: #6b7785;
  --line: #e3e8ee;
  --brand: #1f3a5f;
  --brand-ink: #ffffff;
  --primary: #2563eb;
  --success: #16a34a;
  --warn: #d97706;
  --danger: #dc2626;
  --danger-bg: #fde2e2;
  --danger-line: #f5a5a5;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.45;
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
.muted { color: var(--muted); }
.small { font-size: 12px; }

.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--brand);
  color: var(--brand-ink);
  padding: 10px 20px;
  position: sticky;
  top: 0;
  z-index: 10;
}
.topbar .brand { color: white; font-weight: 900; font-size: 28px; letter-spacing: 1px; }
.topbar .topbar-back {
  display: inline-flex; align-items: center; gap: 4px;
  color: #fff; text-decoration: none; font-weight: 800; font-size: 14px;
  padding: 4px 11px; border: 1px solid rgba(255,255,255,0.4); border-radius: 8px;
  white-space: nowrap;
}
.topbar .topbar-back:hover { background: rgba(255,255,255,0.15); text-decoration: none; }
@media print { .topbar .topbar-back { display: none; } }
.topbar nav { display: flex; gap: 14px; flex: 1; margin-left: 20px; }
.topbar nav a { color: rgba(255,255,255,0.85); padding: 4px 6px; border-radius: 4px; }
.topbar nav a:hover { background: rgba(255,255,255,0.1); text-decoration: none; }
.topbar nav a.primary { background: var(--primary); color: white; padding: 6px 12px; }
.topbar nav a.nav-installers-dashboard {
  background: #f59e0b;
  color: #1f2937;
  padding: 6px 14px;
  font-weight: 700;
  border-radius: 6px;
}
.topbar nav a.nav-installers-dashboard:hover { background: #fbbf24; }
.topbar nav a.nav-drivers-dashboard {
  background: #0d9488;
  color: #ffffff;
  padding: 6px 14px;
  font-weight: 700;
  border-radius: 6px;
}
.topbar nav a.nav-drivers-dashboard:hover { background: #14b8a6; }
/* Highlight the dashboard you're on; fade the ones not in use. When a
   dashboard is active, the other two nav buttons dim and desaturate, while
   the active button stays full-color and gets a white ring so it pops. */
.topbar nav.nav-dim-others a.nav-installers-dashboard,
.topbar nav.nav-dim-others a.nav-drivers-dashboard,
.topbar nav.nav-dim-others a.nav-fab-dashboard {
  opacity: 0.62;
  filter: saturate(0.72);
  transition: opacity 140ms, filter 140ms, box-shadow 140ms, transform 140ms;
}
.topbar nav.nav-dim-others a.nav-dash-active {
  opacity: 1;
  filter: none;
  box-shadow: 0 3px 10px rgba(0,0,0,0.35);
  transform: translateY(-1px);
}
.topbar nav.nav-dim-others a.nav-installers-dashboard:hover,
.topbar nav.nav-dim-others a.nav-drivers-dashboard:hover,
.topbar nav.nav-dim-others a.nav-fab-dashboard:hover {
  opacity: 1;
  filter: none;
}
.topbar .logout { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.topbar .logout-form { margin: 0; }
.topbar .who { color: rgba(255,255,255,0.85); font-size: 13px; }
.topbar .nav-right-link {
  color: rgba(255,255,255,0.85);
  padding: 4px 6px;
  border-radius: 4px;
}
.topbar .nav-right-link:hover { background: rgba(255,255,255,0.1); text-decoration: none; }
.topbar .nav-todo-dashboard {
  background: linear-gradient(135deg, #f59e0b, #f97316);
  color: #fff !important;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(249,115,22,0.4);
}
.topbar .nav-todo-dashboard:hover { background: linear-gradient(135deg, #fbbf24, #fb923c); text-decoration: none; box-shadow: 0 3px 10px rgba(249,115,22,0.5); }
.topbar .logout button {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.5);
  color: white;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
}

.container { max-width: 1100px; margin: 0 auto; padding: 24px 20px 60px; }
/* Morgik dashboard pages use the FULL screen width (Joseph's call) — they all
   share the morgik-page bodyClass. Printable sheets are standalone (no .container). */
body.morgik-page main.container { max-width: none; padding-left: 22px; padding-right: 22px; }
.installer-page .container { max-width: 640px; padding: 16px; }
/* Job detail + edit pages use more of the screen so there's less scrolling. */
.wide-page .container { max-width: 1500px; }
/* The edit page also carries .new-job-page, whose container cap (1060px) is
   more specific — override it so the edit page matches the job page width.
   New Job (without .wide-page) stays at its tighter width. */
body.new-job-page.wide-page main.container { max-width: 1500px; }

h1 { font-size: 24px; margin: 0 0 14px; }
h2 { font-size: 17px; margin: 0 0 12px; }
h3 { font-size: 14px; margin: 16px 0 6px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px 18px;
  margin-bottom: 18px;
}
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.grid-3 { display: grid; grid-template-columns: 2fr 2fr 1fr; gap: 18px; }
@media (max-width: 960px) { .grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .grid-2 { grid-template-columns: 1fr; } .grid-3 { grid-template-columns: 1fr; } }

.invoice-drop-compact {
  border: 2px dashed #cbd5e1;
  background: #f8fafc;
  border-radius: 8px;
  padding: 12px 10px;
  text-align: center;
  font-size: 12px;
  cursor: pointer;
  margin: 6px 0;
  transition: background 0.15s, border-color 0.15s;
}
.invoice-drop-compact.drag-over { background: #e0f2fe; border-color: #0891b2; }
.invoice-drop-compact .invoice-drop-icon { font-size: 20px; line-height: 1; }
.invoice-drop-compact .invoice-drop-sub { color: #6b7785; margin-top: 4px; }
.invoice-drop-compact .invoice-drop-sub a { color: #0891b2; font-weight: 600; }

.kpis {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
  align-items: stretch;
  justify-content: flex-start;
}
.kpis > * { flex: 1 1 0; min-width: 80px; }
.kpis .kpi { width: auto; }
.kpi-refresh {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 68px;
  padding: 6px 8px;
  background: var(--primary);
  color: white;
  border: 1px solid var(--primary);
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  transition: background 120ms, box-shadow 120ms, transform 120ms;
}
.kpi-refresh:hover {
  background: #1d4ed8;
  color: white;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
  transform: translateY(-1px);
  text-decoration: none;
}
.kpi-refresh:active { transform: translateY(0); }

.kpi-toggle {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 68px;
  padding: 6px 8px;
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  transition: background 120ms, border-color 120ms, box-shadow 120ms, transform 120ms;
}
.kpi-toggle:hover {
  border-color: var(--primary);
  color: var(--primary);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.15);
  transform: translateY(-1px);
}
.kpi-toggle:active { transform: translateY(0); }
.kpi-toggle-icon { font-size: 16px; line-height: 1; }
.kpi-toggle-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  line-height: 1.15;
  text-align: center;
}

/* When the Unscheduled panel is hidden, give the calendar the full width */
body.unscheduled-hidden .unscheduled-panel { display: none !important; }
body.unscheduled-hidden .schedule-layout { gap: 0; }
body.unscheduled-hidden .main-col { width: 100%; }

/* Stat-card hover spotlight: dim everything, then un-dim matching jobs */
body[data-hl] .job-card {
  opacity: 0.18;
  transition: opacity 150ms, box-shadow 150ms;
}
body[data-hl="returned"] .job-card.is-returned {
  opacity: 1;
  box-shadow: 0 0 0 2px var(--danger);
}
body[data-hl="partial"] .job-card.is-partial {
  opacity: 1;
  box-shadow: 0 0 0 2px #d97706;
}
body[data-hl="unscheduled"] .unscheduled-panel .job-card {
  opacity: 1;
  box-shadow: 0 0 0 2px #d97706;
}
body[data-hl="out_today"] .cal-day.today .job-card {
  opacity: 1;
  box-shadow: 0 0 0 2px var(--success);
}
/* Never spotlight jobs on PAST days — the hover highlight is about what still
   needs attention going forward, so keep history dimmed and un-ringed even
   when a past card would otherwise match. */
body[data-hl] .cal-day-past .job-card {
  opacity: 0.18 !important;
  box-shadow: none !important;
}

/* Calendar scroll mode: only active when the body has `.browse-mode` (toggled by
   the "Browse History" button). */
body.browse-mode .calendar-wrapper {
  overflow-y: auto;
  padding-right: 4px;
  position: relative;
}
body.browse-mode .calendar-wrapper::-webkit-scrollbar { width: 12px; }
body.browse-mode .calendar-wrapper::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 6px; }
body.browse-mode .calendar-wrapper::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 6px; }
body.browse-mode .calendar-wrapper::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
body .kpi-toggle-active {
  background: var(--ink);
  color: white;
  border-color: var(--ink);
}
body .kpi-toggle-active:hover { background: #0f172a; color: white; border-color: #0f172a; }
.kpi-refresh-icon {
  font-size: 22px;
  line-height: 1;
  font-weight: 400;
  display: inline-block;
}
.kpi-refresh:hover .kpi-refresh-icon { animation: kpi-spin 0.6s ease-out; }
@keyframes kpi-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.kpi-refresh-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
}
@media (max-width: 720px) {
  .kpis .kpi { width: calc(50% - 5px); }
}
.kpi {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--ink);
  text-decoration: none;
  transition: border-color 120ms, box-shadow 120ms, transform 120ms;
  font-size: 10.5px;
  line-height: 1.15;
}
a.kpi:hover {
  border-color: var(--primary);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.15);
  text-decoration: none;
  transform: translateY(-1px);
}
.kpi.kpi-danger {
  background: var(--danger);
  color: white;
  border-color: var(--danger);
}
.kpi.kpi-danger .kpi-n { color: white; }
a.kpi.kpi-danger:hover {
  background: #b91c1c;
  border-color: #991b1b;
  color: white;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.30);
}
.kpi.kpi-success {
  background: var(--success);
  color: white;
  border-color: var(--success);
}
.kpi.kpi-success .kpi-n { color: white; }
a.kpi.kpi-success:hover {
  background: #15803d;
  border-color: #166534;
  color: white;
  box-shadow: 0 2px 8px rgba(22, 163, 74, 0.30);
}
.kpi.kpi-warn {
  background: #facc15;
  color: var(--ink);
  border-color: #eab308;
}
.kpi.kpi-warn .kpi-n { color: var(--ink); }
a.kpi.kpi-warn:hover {
  background: #eab308;
  border-color: #ca8a04;
  color: var(--ink);
  box-shadow: 0 2px 8px rgba(234, 179, 8, 0.30);
}
.kpi.kpi-multiday {
  background: #6366f1;
  color: white;
  border-color: #6366f1;
}
.kpi.kpi-multiday .kpi-n { color: white; }
a.kpi.kpi-multiday:hover {
  background: #4f46e5;
  border-color: #4338ca;
  color: white;
  box-shadow: 0 2px 8px rgba(217, 119, 6, 0.35);
}
.kpi.kpi-ongoing {
  background: #7c3aed;
  color: white;
  border-color: #7c3aed;
}
.kpi.kpi-ongoing .kpi-n { color: white; }
a.kpi.kpi-ongoing:hover {
  background: #6d28d9;
  border-color: #5b21b6;
  color: white;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.35);
}
.ongoing-badge {
  background: #7c3aed;
  color: white;
  font-size: 12px;
  padding: 2px 10px;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: 0.5px;
  margin-left: 4px;
  vertical-align: middle;
}
.visit-badge {
  background: #4338ca;
  color: white;
  font-size: 12px;
  padding: 2px 10px;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: 0.5px;
  margin-left: 4px;
  vertical-align: middle;
}
.ongoing-card {
  background: #faf5ff;
  border-color: #c4b5fd;
}
.ongoing-card h2 { color: #6d28d9; }
.kpi-n { font-size: 18px; font-weight: 700; line-height: 1.05; }
.kpi.danger { border-color: var(--danger-line); background: var(--danger-bg); }
.kpi.danger .kpi-n { color: var(--danger); }

/* ---- Bright themed stat cards (Installers dashboard) -------------------
   Every card gets its own vivid color + a corner icon so the board reads at
   a glance. White text on the colored cards; the number is enlarged. The
   "kpi-hot" modifier adds a soft glowing ring when an actionable card has a
   non-zero count (out today / unscheduled / issues / unpaid). */
.kpi.kpi-th {
  position: relative;
  color: #fff;
  border: none;
  overflow: hidden;
}
.kpi.kpi-th .kpi-n { color: #fff; }
.kpi-ico {
  position: absolute;
  top: 5px;
  right: 6px;
  font-size: 15px;
  line-height: 1;
  opacity: 0.9;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.25));
}
a.kpi.kpi-th:hover {
  filter: brightness(1.08);
  box-shadow: 0 4px 12px rgba(2, 6, 23, 0.25);
  transform: translateY(-2px);
  color: #fff;
}
/* Per-card colors — a fun, distinct spread across the board. */
.kpi.kpi-th-history  { background: linear-gradient(135deg, #6366f1, #4f46e5); }
.kpi.kpi-th-today    { background: linear-gradient(135deg, #22c55e, #16a34a); }
.kpi.kpi-th-done     { background: linear-gradient(135deg, #14b8a6, #0d9488); }
.kpi.kpi-th-sched    { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.kpi.kpi-th-hold     { background: linear-gradient(135deg, #fb923c, #ea580c); }
.kpi.kpi-th-unsched  { background: linear-gradient(135deg, #facc15, #eab308); color: #422006; }
.kpi.kpi-th-unsched .kpi-n { color: #422006; }
.kpi.kpi-th-unsched .kpi-ico { filter: none; }
.kpi.kpi-th-multiday { background: linear-gradient(135deg, #a78bfa, #8b5cf6); }
.kpi.kpi-th-issue    { background: linear-gradient(135deg, #f87171, #ef4444); }
.kpi.kpi-th-ongoing  { background: linear-gradient(135deg, #c084fc, #9333ea); }
.kpi.kpi-th-unpaid   { background: linear-gradient(135deg, #fbbf24, #d97706); color: #422006; }
.kpi.kpi-th-unpaid .kpi-n { color: #422006; }
.kpi.kpi-th-unpaid .kpi-ico { filter: none; }
/* Glowing ring + gentle pulse when an actionable card isn't empty. */
.kpi.kpi-th.kpi-hot {
  box-shadow: 0 0 0 3px rgba(255,255,255,0.6), 0 4px 14px rgba(2,6,23,0.30);
  animation: kpiPulse 2.2s ease-in-out infinite;
}
@keyframes kpiPulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(255,255,255,0.55), 0 3px 10px rgba(2,6,23,0.25); }
  50%      { box-shadow: 0 0 0 4px rgba(255,255,255,0.85), 0 5px 16px rgba(2,6,23,0.35); }
}
@media (prefers-reduced-motion: reduce) { .kpi.kpi-th.kpi-hot { animation: none; } }

table.jobs { width: 100%; border-collapse: collapse; }
table.jobs th, table.jobs td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); font-size: 14px; }
table.jobs th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; }

.row-returned, table.returned tbody tr {
  background: var(--danger-bg);
  color: #7f1d1d;
}
.row-returned a, table.returned tbody a { color: #991b1b; font-weight: 600; }

.status {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  background: #e5e7eb;
  color: #374151;
}
.status-scheduled { background: #dbeafe; color: #1e40af; }
.status-in_progress { background: #fef3c7; color: #92400e; }
.status-completed { background: #dcfce7; color: #166534; }
.status-returned { background: var(--danger); color: white; }
.status-partial { background: #d97706; color: white; }
.status-backlog { background: #e5e7eb; color: #374151; }
.status-on_hold { background: #fde68a; color: #78350f; }

.returned-card { border-color: var(--danger-line); background: #fff7f7; }
.returned-card h2 { color: var(--danger); }

.alert-banner {
  background: var(--danger);
  color: white;
  border-radius: 8px;
  padding: 16px 18px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.25);
}
.alert-banner h2 {
  color: white;
  margin: 0 0 10px;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.alert-banner .alert-icon { font-size: 20px; }
.alert-banner table.alert-table { background: transparent; }
.alert-banner table.alert-table th {
  color: rgba(255,255,255,0.85);
  border-bottom-color: rgba(255,255,255,0.3);
}
.alert-banner table.alert-table td {
  border-bottom-color: rgba(255,255,255,0.2);
  color: white;
}
.alert-banner table.alert-table tr { background: transparent; }
.alert-banner table.alert-table a { color: white; text-decoration: underline; font-weight: 600; }

.flash { padding: 10px 14px; border-radius: 6px; margin-bottom: 14px; border: 1px solid; }
.flash-success { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.flash-error { background: var(--danger-bg); border-color: var(--danger-line); color: #7f1d1d; }
.flash-warn { background: #fffbeb; border-color: #fde68a; color: #92400e; }

form label { display: block; margin-bottom: 12px; font-size: 13px; color: var(--ink); }
form input, form select, form textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 15px;
  margin-top: 4px;
  background: white;
  color: var(--ink);
  font-family: inherit;
}
form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 600px) { form .row { grid-template-columns: 1fr; } }

button, .btn-link {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid var(--line);
  background: white;
  color: var(--ink);
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
}
button.primary { background: var(--primary); color: white; border-color: var(--primary); }
button.success { background: var(--success); color: white; border-color: var(--success); }
button.danger { background: var(--danger); color: white; border-color: var(--danger); }
button.danger-outline { background: white; color: var(--danger); border-color: var(--danger); }
button.big { font-size: 18px; padding: 14px 20px; width: 100%; margin-top: 8px; }
.btn-link { background: transparent; border-color: transparent; color: var(--muted); }

.actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }
.action-row { display: flex; gap: 14px; flex-wrap: wrap; }
form.inline { display: flex; gap: 8px; align-items: center; }
form.inline input { width: auto; flex: 1; margin-top: 0; }

.form-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
}

dl.kv { display: grid; grid-template-columns: 110px 1fr; gap: 4px 12px; margin: 0; }
dl.kv dt { color: var(--muted); font-size: 13px; }
dl.kv dd { margin: 0; font-size: 14px; }

.job-header { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.job-header-meta { display: flex; align-items: center; gap: 14px; }
.job-header-block { margin-bottom: 16px; }
.job-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}
.job-header-left { flex: 1 1 auto; min-width: 280px; }
.job-header-h1 { margin: 0 0 10px 0; }
.job-header-info { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 0; }
.job-info-pill {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 13px;
  color: #1f2937;
}
.job-info-label { color: #6b7785; font-weight: 600; margin-right: 4px; text-transform: uppercase; font-size: 11px; letter-spacing: 0.4px; }
.job-info-pill.pill-warn { background: #fde68a; border-color: #f59e0b; color: #78350f; }
.job-info-pill.pill-warn .job-info-label { color: #78350f; }
.job-info-pill.pill-multiday { background: #fed7aa; border-color: #d97706; color: #7c2d12; }
.job-info-pill.pill-multiday .job-info-label { color: #7c2d12; }
.job-info-pill.pill-danger { background: #fecaca; border-color: #dc2626; color: #7f1d1d; }
.job-info-pill.pill-danger .job-info-label { color: #7f1d1d; }
.job-header-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
}
.btn-edit {
  display: inline-block;
  padding: 8px 18px;
  background: #f59e0b;
  color: white !important;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.btn-edit:hover { background: #d97706; color: white; text-decoration: none; box-shadow: 0 2px 6px rgba(0,0,0,0.15); }

.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.photo-grid figure { margin: 0; background: #fafafa; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.photo-grid img { width: 100%; height: 140px; object-fit: cover; display: block; }
.photo-grid figcaption { padding: 6px 8px; font-size: 12px; }
.photo-grid figcaption .small { display: block; margin-top: 2px; }
.photo-grid figcaption .photo-geo-addr { color: #334155; font-weight: 600; }

.auth-page { background: var(--brand); min-height: 100vh; }
.auth-page .topbar { display: none; }
.auth-page main.container { max-width: 380px; margin: 80px auto; padding: 0 20px; }
.auth-card { background: white; border-radius: 10px; padding: 28px 26px; box-shadow: 0 10px 40px rgba(0,0,0,0.15); }
.auth-card h1 { margin-top: 0; font-size: 22px; }
.installer-greeting { font-size: 20px; font-weight: 700; color: #1f2937; text-align: center; margin: 8px 0 4px; }
.back-to-dashboard {
  display: inline-block;
  padding: 8px 16px;
  background: #1e3a8a;
  color: white !important;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.back-to-dashboard:hover { background: #1e40af; box-shadow: 0 2px 6px rgba(0,0,0,0.15); }
.edit-page-btn {
  display: inline-block;
  padding: 8px 16px;
  background: #fde4e4;
  color: #b91c1c !important;
  border: 1px solid #f3a6a6;
  border-radius: 8px;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.edit-page-btn:hover { background: #fbcaca; border-color: #e98a8a; box-shadow: 0 2px 6px rgba(0,0,0,0.15); }
.history-nav-row { display: flex; gap: 10px; flex-wrap: wrap; }

.my-jobs-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.my-jobs-head h1 { margin: 0; }
.kaufman-refresh-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: #1e3a8a;
  color: white !important;
  border-radius: 10px;
  font-weight: 700;
  font-size: 18px;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  white-space: nowrap;
}
.kaufman-refresh-btn:hover { background: #1e40af; box-shadow: 0 3px 10px rgba(0,0,0,0.2); }
.kaufman-refresh-btn:active { transform: translateY(1px); }
.kaufman-refresh-icon { font-size: 22px; line-height: 1; }
.installer-name-top { color: rgba(255,255,255,0.9); font-size: 14px; font-weight: 600; }
.crew-link { font-size: 12px; background: #f3f4f6; padding: 4px 8px; border-radius: 4px; user-select: all; word-break: break-all; }
.dashboard-link-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 12px 0 8px 0; }

.history-timeline {
  list-style: none;
  padding: 0;
  margin: 16px 0;
  border-top: 1px solid #e5e7eb;
}
.history-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 10px;
  border-bottom: 1px solid #e5e7eb;
  border-left: 3px solid #cbd5e1;
  background: white;
  font-size: 13px;
  line-height: 1.4;
}
.history-row:nth-child(even) { background: #f8fafc; }
.history-row-created { border-left-color: #3b82f6; }
.history-row-edited { border-left-color: #94a3b8; }
.history-row-scheduled, .history-row-rescheduled, .history-row-reassigned { border-left-color: #6366f1; }
.history-row-unscheduled { border-left-color: #f59e0b; }
.history-row-on_hold { border-left-color: #fde68a; }
.history-row-arrived { border-left-color: #10b981; }
.history-row-multi_day { border-left-color: #d97706; }
.history-row-returned { border-left-color: #dc2626; }
.history-row-completed { border-left-color: #16a34a; }
.history-row-reopened { border-left-color: #0891b2; }
.history-time {
  flex: 0 0 auto;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 11px;
  color: #6b7785;
  white-space: nowrap;
  min-width: 140px;
}
.history-summary {
  flex: 1 1 auto;
  font-weight: 600;
  color: #1f2937;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.history-actor {
  flex: 0 0 auto;
  font-size: 12px;
  color: #6b7785;
  white-space: nowrap;
  font-style: italic;
}

/* On a phone, drop the actor onto a second line if needed and shrink
   the timestamp so the summary still gets most of the width. */
@media (max-width: 540px) {
  .history-row {
    flex-wrap: wrap;
    gap: 4px 10px;
    padding: 6px 8px;
  }
  .history-time {
    font-size: 10px;
    min-width: 0;
    width: 100%;
    order: 1;
  }
  .history-summary {
    width: 100%;
    white-space: normal;
    font-size: 13px;
    order: 2;
  }
  .history-actor {
    font-size: 11px;
    order: 3;
  }
}

/* Print button on the history page — teal, matches the Job sheet button. */
.history-print-btn {
  background: #0d9488 !important;
  border-color: #0d9488 !important;
  color: white !important;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
}
.history-print-btn:hover { background: #0f766e !important; border-color: #0f766e !important; }

/* When the history page prints, render the timeline tight and let it
   span the full page. Color stripes still encode event type. */
@media print {
  body.history-page .topbar,
  body.history-page .history-nav-row { display: none !important; }
  body.history-page main.container { max-width: none !important; padding: 0 !important; margin: 0 !important; }
  body.history-page h1 { font-size: 18pt; margin: 0 0 4pt; color: black; }
  body.history-page .muted { color: #444 !important; }
  body.history-page .history-timeline { margin: 8pt 0 0; border-top: 1px solid #888; }
  body.history-page .history-row {
    page-break-inside: avoid;
    border-bottom: 1px solid #ccc;
    background: white !important;
    font-size: 10pt;
    padding: 4pt 6pt;
    border-left-width: 4px;
  }
  body.history-page .history-row:nth-child(even) { background: #f4f4f4 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body.history-page .history-time { font-size: 9pt; min-width: 130pt; }
  body.history-page .history-summary { font-size: 10pt; }
  body.history-page .history-actor { font-size: 9pt; }
}

.plain-password {
  background: #fef9c3;
  border: 1px solid #fde047;
  padding: 3px 8px;
  border-radius: 4px;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 13px;
  color: #713f12;
  user-select: all;
}
.reset-pw-form { display: flex; flex-direction: column; gap: 4px; align-items: stretch; max-width: 220px; }
.reset-pw-form input { width: 100%; }
.reset-pw-form > button[type="submit"] { align-self: flex-start; margin-top: 2px; }
.pw-input-wrap { position: relative; }
.pw-input-wrap .pw-input { padding-right: 36px; width: 100%; box-sizing: border-box; }
.pw-eye {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px 6px;
  font-size: 16px;
  opacity: 0.5;
  line-height: 1;
}
.pw-eye:hover { opacity: 0.85; }
.pw-eye.pw-eye-on { opacity: 1; color: #1e3a8a; }

.jobs-list-search {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.jobs-list-search input {
  flex: 1 1 320px;
  max-width: 480px;
  padding: 8px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 14px;
}

.customer-search-box {
  width: 100%;
  max-width: 400px;
  padding: 8px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 14px;
  margin-bottom: 12px;
  display: block;
}
.customer-scroll {
  max-height: 500px;
  overflow-y: auto;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
}
.customer-scroll table { margin-bottom: 0; }

.accounting-section {
  margin-top: 18px;
  padding: 16px 18px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}
.accounting-section-title {
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 700;
  color: #1f3a5f;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.accounting-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.accounting-field { display: flex; flex-direction: column; gap: 4px; }
.accounting-field-label { font-weight: 600; }
.accounting-field input,
.accounting-field select {
  padding: 6px 8px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: white;
}
.accounting-payment-row { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; padding-top: 4px; }
.accounting-pay-pick { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.accounting-pay-pick input[type="radio"] {
  width: 22px;
  height: 22px;
  cursor: pointer;
  accent-color: #16a34a;
}

.invoice-drop {
  border: 2px dashed #cbd5e1;
  background: white;
  border-radius: 10px;
  padding: 18px;
  text-align: center;
  transition: background 0.15s, border-color 0.15s;
  cursor: pointer;
}
.invoice-drop.drag-over { background: #e0f2fe; border-color: #0891b2; }
.invoice-drop-icon { font-size: 24px; }
.invoice-drop-title { font-weight: 700; color: #1f3a5f; margin-top: 4px; }
.invoice-drop-sub { font-size: 12px; color: #6b7785; margin-top: 4px; }
.invoice-drop-sub a { color: #0891b2; font-weight: 600; }

/* Auto-fill-from-proposal card at the top of the New Job form. */
.nj-autofill-card {
  border: 1px solid #bae6fd;
  background: #f0f9ff;
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.nj-autofill-card .invoice-drop { background: #ffffff; border-color: #7dd3fc; }
.nj-autofill-status {
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
}
.nj-autofill-working { background: #fef9c3; color: #854d0e; }
.nj-autofill-ok { background: #dcfce7; color: #166534; }
.nj-autofill-error { background: #fee2e2; color: #991b1b; }

.invoice-file-list { list-style: none; padding: 0; margin: 10px 0 0; }
.invoice-file-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  margin-bottom: 4px;
  font-size: 13px;
}
.invoice-file-name { flex: 1 1 auto; }
.invoice-file-remove {
  border: none;
  background: transparent;
  color: #dc2626;
  font-size: 18px;
  cursor: pointer;
  padding: 0 6px;
}
.invoice-file-name { flex: 1; }
.invoice-file-read {
  border: 1px solid #0891b2;
  background: #0891b2;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  border-radius: 6px;
  padding: 5px 10px;
  cursor: pointer;
  white-space: nowrap;
}
.invoice-file-read:hover { background: #0e7490; border-color: #0e7490; }
.invoice-file-read:disabled { opacity: 0.6; cursor: default; }

@media (max-width: 700px) {
  .accounting-grid { grid-template-columns: 1fr; }
}

.nj-notes-full-width {
  display: block;
  margin-top: 14px;
}
.nj-notes-full-width textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 90px;
  padding: 8px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  margin-top: 4px;
}

.past-customer-row {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 10px 12px;
  display: block;
  margin-bottom: 4px;
}
.repeat-customer-label { margin-bottom: 6px; font-weight: 600; }
.repeat-customer-controls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.repeat-customer-select {
  flex: 0 1 320px;
  max-width: 320px;
  padding: 6px 8px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
}
.add-customer-btn {
  padding: 6px 14px;
  background: #0891b2;
  color: white;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}
.add-customer-btn:hover { background: #0e7490; }
.add-customer-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.add-customer-form input { flex: 1 1 220px; max-width: 320px; padding: 6px 8px; border: 1px solid #cbd5e1; border-radius: 6px; }

.multi-day-box {
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  border-radius: 8px;
  padding: 14px 16px;
  margin: 14px 0;
}
.job-card.is-record {
  opacity: 0.65;
  background: repeating-linear-gradient(
    -45deg,
    #f8fafc,
    #f8fafc 6px,
    #f1f5f9 6px,
    #f1f5f9 12px
  );
  cursor: default;
}
.job-card.is-record:hover { opacity: 0.9; }
.record-badge {
  display: inline-block;
  background: #475569;
  color: white;
  font-size: 9px;
  padding: 1px 6px;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: 0.5px;
  margin-left: 4px;
  text-transform: uppercase;
}

.multi-day-box-compact { padding: 10px 12px; margin: 4px 0 0 0; }
.multi-day-box-compact .checkbox-label { font-size: 14px; }
.multi-day-box-compact .multi-day-dates { gap: 8px; }
.multi-day-box-compact .multi-day-date { min-width: 110px; }
.multi-day-box .checkbox-label { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; }
.multi-day-box .checkbox-label input { margin-top: 4px; }
.multi-day-details { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.multi-day-dates { display: flex; flex-wrap: wrap; gap: 12px; }
.multi-day-date { display: flex; flex-direction: column; gap: 4px; min-width: 130px; }
.multi-day-date span { font-weight: 600; font-size: 12px; color: #6b7785; text-transform: uppercase; letter-spacing: 0.4px; }
.multi-day-date input { padding: 6px 8px; border: 1px solid #cbd5e1; border-radius: 6px; }

.multi-day-badge {
  display: inline-block;
  background: #ea580c;
  color: white;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.4px;
  margin-left: 6px;
}
.callback-badge {
  display: inline-block;
  background: var(--danger);
  color: white;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: 0.4px;
  margin-left: 6px;
  text-transform: uppercase;
}
/* Callback cards on the calendar + Unscheduled panel get the same red-tint
   treatment as install-issue cards so they read as "this is an issue". */
.job-card.is-callback {
  border-left-color: var(--danger);
  border-left-width: 5px;
  background: var(--danger-bg);
}
.unscheduled-panel .job-card.is-callback {
  border-left-color: var(--danger);
  background: var(--danger-bg);
}
.callback-details > summary {
  list-style: none;
  cursor: pointer;
  display: inline-block;
  padding: 8px 18px;
  background: #be123c;
  color: white;
  border-radius: 8px;
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.callback-details > summary::-webkit-details-marker { display: none; }
.callback-details > summary:hover { background: #9f1239; }
.callback-form {
  margin-top: 10px;
  padding: 14px;
  background: #fff1f2;
  border: 1px solid #fda4af;
  border-radius: 8px;
  width: 100%;
  flex-basis: 100%;
  max-width: 520px;
}
.callback-form label { display: block; margin-bottom: 10px; font-weight: 600; }
.callback-form input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 4px;
  padding: 8px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
}
.callback-submit-btn {
  padding: 8px 18px;
  background: #be123c;
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
}
.callback-submit-btn:hover { background: #9f1239; }

.unpaid-table .followup-col { width: 170px; }
.unpaid-table .followup-col input.followup-edit {
  width: 100%;
  padding: 8px 10px;
  font-size: 15px;
  font-weight: 600;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: white;
  box-sizing: border-box;
}
.followup-edit:focus { outline: none; border-color: #0891b2; }
.followup-saving { border-color: #f59e0b; background: #fffbeb; }
.followup-saved { border-color: #16a34a; background: #f0fdf4; }
.followup-error { border-color: #dc2626; background: #fef2f2; }

.unpaid-table .notes-col { min-width: 260px; max-width: 360px; }
.followup-notes-list {
  list-style: none;
  padding: 0;
  margin: 0 0 6px 0;
  max-height: 130px;
  overflow-y: auto;
}
.followup-note {
  padding: 4px 6px;
  border-left: 3px solid #cbd5e1;
  margin-bottom: 4px;
  background: #f8fafc;
  border-radius: 0 4px 4px 0;
  font-size: 12px;
}
.followup-note-when {
  display: block;
  color: #6b7785;
  font-size: 11px;
  font-weight: 600;
}
.followup-note-text { display: block; color: #1f3a5f; margin-top: 1px; }
.followup-note-input {
  width: 100%;
  padding: 6px 8px;
  border: 1px dashed #cbd5e1;
  border-radius: 6px;
  font-size: 13px;
  box-sizing: border-box;
}
.followup-note-input:focus { outline: none; border-style: solid; border-color: #0891b2; }

.mark-paid-btn {
  display: inline-block;
  padding: 8px 18px;
  background: #16a34a;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.mark-paid-btn:hover { background: #15803d; box-shadow: 0 2px 6px rgba(0,0,0,0.15); }

.kpi.kpi-unpaid {
  background: #fef3c7;
  border-color: #f59e0b;
  color: #78350f;
}
.unpaid-badge {
  display: inline-block;
  background: #f59e0b;
  color: white;
  font-size: 11px;
  padding: 2px 10px;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: 0.5px;
  margin-left: 6px;
  text-transform: uppercase;
}
.unpaid-details > summary {
  list-style: none;
  cursor: pointer;
  display: inline-block;
  padding: 8px 18px;
  background: #f59e0b;
  color: white;
  border-radius: 8px;
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.unpaid-details > summary::-webkit-details-marker { display: none; }
.unpaid-details > summary:hover { background: #d97706; }
.unpaid-form {
  margin-top: 10px;
  padding: 14px;
  background: #fffbeb;
  border: 1px solid #f59e0b;
  border-radius: 8px;
  width: 100%;
  flex-basis: 100%;
  max-width: 520px;
}
.unpaid-form label { display: block; margin-bottom: 10px; font-weight: 600; }
.unpaid-form input, .unpaid-form select {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 6px 8px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
}

.customer-photo-pick { margin: 10px 0; padding: 10px; background: white; border: 1px solid #e2e8f0; border-radius: 6px; }
.customer-photo-pick-hdr { font-size: 13px; margin-bottom: 8px; }
.customer-photo-pick-actions { float: right; }
.customer-photo-pick-actions .btn-link { padding: 0 4px; }
.customer-photo-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.customer-photo-pick-card { position: relative; cursor: pointer; border: 2px solid transparent; border-radius: 6px; overflow: hidden; }
.customer-photo-pick-card img { display: block; width: 100%; height: 90px; object-fit: cover; }
.customer-photo-pick-card .customer-photo-pick-check {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 22px;
  height: 22px;
  cursor: pointer;
  accent-color: #0891b2;
}
.customer-photo-pick-card:has(input:checked) { border-color: #0891b2; box-shadow: 0 0 0 1px #0891b2; }
.customer-photo-pick-card:has(input:not(:checked)) img { opacity: 0.4; }

/* Pink wash only on days the office explicitly marked as no-work. */
.cal-day.cal-day-closed { background: #fce7f3; }
.cal-day.cal-day-closed.today { background: #fbcfe8; }

/* Past calendar days — historical record, locked from drag/drop. Cards
   keep their normal coloring (so completed jobs still read as green,
   issues still read as red) but get the default cursor and the day cell
   ignores drop highlights. */
.cal-day-past {
  opacity: 0.85;
}
.cal-day-past .job-card,
.cal-day-past .job-card.is-frozen {
  cursor: default;
}
.cal-day-past .job-card[draggable="false"]:hover {
  /* Subtle hint that these can't be dragged. */
  outline: none;
}
.cal-day-past.drag-target {
  /* No drop indication on past days, no matter what. */
  outline: none !important;
  background: inherit !important;
}
.cal-day-past .cal-day-header::after {
  content: "🔒";
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 11px;
  opacity: 0.4;
}
.cal-day-past .cal-day-header { position: relative; }

/* Drivers & Fabrication boards: past days are clearly "history" —
   desaturated and dimmed — so TODAY stands out bright and obvious. Past days
   stay fully clickable (open a stop's photo/PDF, or a fab job) and hovering
   brings their full color back to make lookups easy. The day is locked for
   editing (cards can't be dragged) but never hidden. */
.drivers-page .cal-day-past,
.fab-page .cal-day-past {
  filter: grayscale(0.9);
  opacity: 0.8;
  background: #eef1f4;
  transition: filter .15s ease, opacity .15s ease;
}
.drivers-page .cal-day-past:hover,
.fab-page .cal-day-past:hover {
  filter: grayscale(0);
  opacity: 1;
}
/* Keep today crisp and unmistakable next to the grayed history. */
.drivers-page .cal-day.today,
.fab-page .cal-day.today {
  box-shadow: 0 0 0 2px #2563eb;
  background: #f5f9ff;
}

/* "Needs install appointment call" card on the job detail page. Mirrors
   the lock card's two-state layout (strong when on, muted when off). */
.needs-call-card { padding: 12px 16px; }
.needs-call-on {
  background: #f1f5f9;
  border: 2px solid #0f172a;
}
.needs-call-off {
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
}
.needs-call-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.needs-call-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 240px;
}
.needs-call-icon { font-size: 26px; line-height: 1; }
.needs-call-icon-muted { font-size: 24px; line-height: 1; opacity: 0.4; }
.needs-call-title {
  font-weight: 800;
  color: #0f172a;
  font-size: 16px;
}
.needs-call-title-muted {
  font-weight: 600;
  color: #475569;
  font-size: 14px;
}
.needs-call-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.needs-call-add-btn {
  background: white;
  border: 1.5px solid #0f172a;
  color: #0f172a;
  padding: 8px 14px;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
  font-size: 14px;
}
.needs-call-add-btn:hover { background: #f1f5f9; }
.needs-call-clear-btn {
  background: white;
  border: 1.5px solid #94a3b8;
  color: #475569;
  padding: 8px 14px;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
  font-size: 14px;
}
.needs-call-clear-btn:hover { background: #f1f5f9; }

/* Black ring on a job card when the appointment-call flag is set —
   applies on the calendar, unscheduled list, today view, and installer
   list. Independent of any other status. */
.job-card.needs-call,
.today-card.needs-call,
.installer-job-list li.needs-call > a,
.installer-job-list li.needs-call > .ij-locked-card {
  outline: 3px solid #0f172a !important;
  outline-offset: -3px;
}
.jc-needs-call-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #0f172a;
  color: white;
  font-size: 10px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 4px;
}

/* Schedule lock card on the job detail page. Strong color when on,
   muted when off (just a hint to lock). */
.lock-card { padding: 12px 16px; }
.lock-card-on {
  background: #fef3c7;
  border: 2px solid #f59e0b;
}
.lock-card-off {
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
}
.lock-card-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.lock-card-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 240px;
}
.lock-card-icon { font-size: 26px; line-height: 1; }
.lock-card-icon-muted { font-size: 24px; line-height: 1; opacity: 0.4; }
.lock-card-title {
  font-weight: 800;
  color: #92400e;
  font-size: 16px;
}
.lock-card-title-muted {
  font-weight: 600;
  color: #475569;
  font-size: 14px;
}
.lock-card-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.lock-add-btn, .lock-edit-btn {
  background: white;
  border: 1.5px solid #f59e0b;
  color: #92400e;
  padding: 8px 14px;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
  font-size: 14px;
}
.lock-add-btn:hover, .lock-edit-btn:hover { background: #fef3c7; }
.lock-unlock-btn {
  background: white;
  border: 1.5px solid #94a3b8;
  color: #475569;
  padding: 8px 14px;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
  font-size: 14px;
}
.lock-unlock-btn:hover { background: #f1f5f9; }
.lock-add-form, .lock-edit-form {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 12px;
  margin-top: 8px;
  min-width: 240px;
}
.lock-add-form label, .lock-edit-form label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #475569;
}
.lock-add-form input[type=time], .lock-edit-form input[type=time] {
  display: block;
  width: 100%;
  padding: 6px 8px;
  border: 1px solid #cbd5e1;
  border-radius: 5px;
  font-size: 14px;
  margin-top: 4px;
}

/* Job card lock indicator on the calendar */
.job-card.is-locked {
  outline: 2px solid #f59e0b;
  outline-offset: -2px;
}
.jc-lock-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #fef3c7;
  color: #92400e;
  font-size: 10px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 4px;
  margin-left: 4px;
  border: 1px solid #f59e0b;
}
.jc-arrival-window {
  font-size: 11px;
  color: #92400e;
  font-weight: 700;
  padding: 2px 6px;
  background: #fef3c7;
  border-radius: 3px;
  margin-top: 3px;
  display: inline-block;
}

/* 🚫 No-work day toggle button in the day's top bar. Off = grayscale.
   On = bright red circle-with-slash, day cell turns pink. */
.cal-nowork-btn {
  background: transparent;
  border: none;
  padding: 0 4px;
  margin: 0 4px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  opacity: 0.25;
  filter: grayscale(1);
  transition: opacity 0.15s ease, filter 0.15s ease, transform 0.05s ease;
}
.cal-nowork-btn:hover { opacity: 0.7; filter: grayscale(0); }
.cal-nowork-btn.is-on {
  opacity: 1;
  filter: none;
  background: #fee2e2;
  border-radius: 50%;
  padding: 2px 4px;
}
.cal-nowork-btn:active { transform: scale(0.95); }

/* Compact day pad at the bottom of each calendar cell. Notes textarea
   is collapsed to one line by default and expands on focus. Reason
   dropdown only appears when the 🚫 button is on. */
.cal-day-pad {
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.cal-day-reason {
  width: 100%;
  font-size: 11px;
  padding: 3px 6px;
  border: 1px solid #f9a8d4;
  border-radius: 4px;
  background: #fff1f5;
  color: #9d174d;
  font-weight: 600;
  font-family: inherit;
}
.cal-day-reason:focus { outline: none; border-color: #ec4899; background: white; }

.cal-day-note {
  width: 100%;
  box-sizing: border-box;
  padding: 4px 8px;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.7);
  font-family: inherit;
  font-size: 12px;
  color: #1f3a5f;
  resize: none;
  height: 24px;
  line-height: 16px;
  overflow: hidden;
  transition: height 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}
.cal-day-note:focus {
  outline: none;
  border-color: #1e3a8a;
  background: white;
  height: 80px;
  white-space: pre-wrap;
  overflow: auto;
  resize: vertical;
}
.cal-day-pad.is-closed .cal-day-note {
  border-color: #f9a8d4;
  background: rgba(255, 241, 245, 0.9);
}
.cal-day-pad.is-closed .cal-day-note:focus {
  border-color: #ec4899;
  background: white;
}
.cal-day-save-status {
  font-size: 10px;
  color: #16a34a;
  font-weight: 600;
  min-height: 0;
  text-align: right;
}

.attachment-list { list-style: none; padding: 0; margin: 8px 0 0; }
.attachment-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  margin-bottom: 6px;
}
.attachment-link {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #1f3a5f;
  text-decoration: none;
  font-weight: 600;
}
.attachment-link:hover { color: #0e7490; }
.attachment-icon { font-size: 22px; }
.attachment-name { word-break: break-all; }

.office-photo-phase-label {
  margin-top: 12px;
  padding: 0 12px;
  font-weight: 600;
}
.office-photo-phase-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px 10px;
  margin: 6px 0 8px 0;
  padding: 12px;
  background: #f8fafc;
  border: 1px solid #eef2f6;
  border-radius: 12px;
  font-size: 13px;
}
/* Each photo tag is a colorful pill; the chosen one fills solid and lifts. */
.office-phase-pick {
  --c: #475569;
  --tint: #eef2f6;
  --bd: #cbd5e1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--c);
  background: var(--tint);
  border: 1.5px solid var(--bd);
  border-radius: 999px;
  padding: 7px 15px;
  transition: transform .08s ease, box-shadow .15s ease, background .15s ease,
    color .15s ease, border-color .15s ease;
}
.office-phase-pick input[type="radio"] {
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--c);
  flex: 0 0 auto;
}
.office-phase-pick:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 7px rgba(15, 23, 42, .12);
}
.office-phase-pick:has(input:checked) {
  background: var(--c);
  color: #fff;
  border-color: var(--c);
  box-shadow: 0 5px 14px rgba(15, 23, 42, .22);
  transform: translateY(-1px);
}
.office-phase-pick:has(input:checked) input[type="radio"] { accent-color: #fff; }

/* Per-tag colors — matched to the photo badge colors used elsewhere. */
.office-phase-pick:has(input[value="pre_arrival"]) { --c: #7c3aed; --tint: #f3effe; --bd: #c4b5fd; }
.office-phase-pick:has(input[value="arrival"])     { --c: #2563eb; --tint: #eaf1fe; --bd: #bfdbfe; }
.office-phase-pick:has(input[value="completion"])  { --c: #16a34a; --tint: #e7f7ed; --bd: #bbf7d0; }
.office-phase-pick:has(input[value="issue"])       { --c: #dc2626; --tint: #fdeaea; --bd: #fecaca; }
.office-phase-pick:has(input[value="partial"])     { --c: #d97706; --tint: #fdf1e1; --bd: #fed7aa; }
.office-phase-pick:has(input[value="callback"])    { --c: #db2777; --tint: #fdeaf3; --bd: #fbcfe8; }

.office-photo-drop {
  border: 2px dashed #cbd5e1;
  background: #f8fafc;
  border-radius: 10px;
  padding: 22px 18px;
  text-align: center;
  margin: 12px 0 16px 0;
  transition: background 0.15s, border-color 0.15s;
  cursor: pointer;
}
.office-photo-drop.drag-over {
  background: #e0f2fe;
  border-color: #0891b2;
}
.office-photo-drop-icon { font-size: 28px; line-height: 1; }
.office-photo-drop-title { font-weight: 700; margin-top: 6px; color: #1f3a5f; }
.office-photo-drop-sub { font-size: 13px; color: #6b7785; margin-top: 4px; }
.office-photo-drop-sub a { color: #0891b2; font-weight: 600; }
.office-photo-drop-status { margin-top: 8px; font-size: 13px; font-weight: 600; min-height: 18px; }

.customer-report-details { display: inline-block; vertical-align: middle; }
.customer-report-details > summary {
  list-style: none;
  cursor: pointer;
  display: inline-block;
  padding: 8px 18px;
  background: #0891b2;
  color: white;
  border-radius: 8px;
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.customer-report-details > summary::-webkit-details-marker { display: none; }
.customer-report-details > summary:hover { background: #0e7490; }
.customer-report-form {
  margin-top: 10px;
  padding: 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  width: 100%;
  flex-basis: 100%;
  max-width: 520px;
}
.customer-report-form label { display: block; margin-bottom: 10px; font-weight: 600; }
.customer-report-form input,
.customer-report-form textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 4px;
  padding: 8px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 14px;
}
.customer-report-form textarea { resize: vertical; min-height: 60px; }


.visit-list { list-style: none; padding: 0; margin: 8px 0 0; }
.visit-list li { margin-bottom: 6px; }
.visit-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  text-decoration: none;
  color: #1f2937;
}
.visit-link:hover { background: #f1f5f9; }
.visit-row { display: flex; align-items: center; gap: 8px; }
.visit-row .visit-link { flex: 1; min-width: 0; }
.visit-remove { margin: 0; }
.visit-remove button.small { padding: 6px 10px; font-size: 13px; white-space: nowrap; }

.back-to-progress-btn {
  display: inline-block;
  padding: 8px 18px;
  background: #0891b2;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.back-to-progress-btn:hover { background: #0e7490; box-shadow: 0 2px 6px rgba(0,0,0,0.15); }

.site-visit-btn {
  display: inline-block;
  padding: 8px 18px;
  background: #0891b2;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.site-visit-btn:hover { background: #0e7490; box-shadow: 0 2px 6px rgba(0,0,0,0.15); }

/* "Ready for install" toggle button (fabrication done). */
.ready-btn {
  display: inline-block;
  padding: 8px 18px;
  background: #10b981;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.ready-btn:hover { background: #059669; box-shadow: 0 2px 6px rgba(0,0,0,0.15); }
.ready-btn.ready-on { background: #047857; }
.ready-btn.ready-on:hover { background: #065f46; }

/* ── Fabrication (foreman) board ──────────────────────────────────────────── */
.fab-head { margin: 4px 0 14px; }
.fab-head h1 { margin: 0 0 2px; }
.fab-kpis { margin-bottom: 18px; }
.nav-fab-dashboard { background: #7c3aed; color: #fff; padding: 6px 14px; font-weight: 700; border-radius: 6px; }
a.nav-fab-dashboard:hover { background: #8b5cf6; text-decoration: none; }

.fab-li { list-style: none; }
.fab-card { display: block; text-decoration: none; color: inherit; cursor: pointer !important; }
.fab-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
.fab-ready-pill { background: #16a34a; color: #fff; font-size: 10px; font-weight: 800; padding: 1px 7px; border-radius: 10px; letter-spacing: .04em; margin-left: 4px; }
.fab-due { color: #7c3aed; font-weight: 600; font-size: 11px; }
/* Unscheduled panel cards on the fab board fill the narrow side panel. */
.unscheduled-panel .fab-li { list-style: none; margin-bottom: 8px; }
.unscheduled-panel .fab-card { width: 100%; }

.fab-job { max-width: 760px; margin: 0 auto; }
.fab-back { display: inline-block; margin-bottom: 10px; font-weight: 600; }
.fab-job-h1 { font-size: 22px; margin: 0 0 14px; }
.fab-action-card { text-align: center; background: #f0fdf4; border: 1px solid #bbf7d0; }
.fab-action-card.is-ready { background: #ecfdf5; }
.fab-action-msg { margin: 0 0 12px; font-size: 15px; }
.fab-detail { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 20px; }
.fab-detail .lbl { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: #6b7785; }
.fab-detail .val { font-weight: 600; }
.fab-notes { margin: 10px 0 0; }
.fab-photos { display: flex; flex-wrap: wrap; gap: 8px; }
.fab-photos img { width: 120px; height: 120px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
@media (max-width: 560px) { .fab-detail { grid-template-columns: 1fr; } }

/* Fabrication filtered report (behind each stat card) */
.fab-list-wrap { max-width: 1100px; margin: 0 auto; }
.fab-list-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 14px; }
.fab-tab { padding: 7px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-weight: 600; font-size: 13px; color: var(--ink); text-decoration: none; }
.fab-tab:hover { background: #f1f5f9; text-decoration: none; }
.fab-tab.on { background: #7c3aed; color: #fff; border-color: #7c3aed; }
.fab-list-wrap .table-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.fab-list-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.fab-list-table th, .fab-list-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line); }
.fab-list-table th { background: #f8fafc; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: #6b7785; }
.fab-list-table tbody tr:last-child td { border-bottom: none; }
.fab-list-row { cursor: pointer; }
.fab-list-row:hover { background: #f9fafb; }
.fab-list-table .row-link { font-weight: 600; color: var(--primary); }

.history-btn {
  display: inline-block;
  padding: 4px 10px;
  background: #f1f5f9;
  color: #1f2937 !important;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid #cbd5e1;
}
.history-btn:hover { background: #e2e8f0; }
.copy-link-btn { font-size: 12px; padding: 4px 10px; margin-left: 6px; cursor: pointer; }

.settings-table { width: 100%; border-collapse: collapse; margin-bottom: 8px; }
.settings-table th, .settings-table td { padding: 6px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.settings-table th { text-align: left; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
.settings-table .actions-col { width: 120px; text-align: right; }
.settings-table td:last-child { text-align: right; }
.inline-edit { display: flex; gap: 8px; align-items: center; margin: 0; }
.inline-edit input { flex: 1; margin-top: 0; }
.inline-edit button { background: white; border: 1px solid var(--line); padding: 6px 10px; font-size: 13px; white-space: nowrap; }
.inline-add { display: flex; gap: 8px; align-items: center; max-width: 480px; }
.inline-add input { flex: 1; margin-top: 0; }
.pin-display { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 16px; background: #f1f5f9; padding: 4px 10px; border-radius: 4px; letter-spacing: 2px; }

.badge { display: inline-block; padding: 2px 8px; font-size: 11px; border-radius: 999px; background: #e5e7eb; color: #374151; text-transform: uppercase; letter-spacing: 0.4px; font-weight: 600; }
.badge-admin { background: var(--brand); color: white; }
.row-self { background: #f8fafc; }
.settings-table td .inline { display: inline; margin-left: 6px; }
.checkbox-label { display: flex !important; align-items: center; gap: 8px; margin-top: 22px; }
.checkbox-label input { width: auto !important; margin: 0 !important; }
.add-staff { background: #f8fafc; }

.subscribers-table input[type="text"],
.subscribers-table input[type="email"],
.subscribers-table input:not([type]) {
  width: 100%;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 13px;
  font-family: inherit;
}
.subscribers-table input[type="checkbox"] { transform: scale(1.3); cursor: pointer; }
.subscribers-table td { padding: 6px 4px; }
.subscribers-table th { font-size: 11px; }
.subscribers-table .actions-col { white-space: nowrap; }
.subscribers-table .actions-col button { padding: 4px 10px; font-size: 12px; margin-left: 2px; }

body.schedule-wide main.container { max-width: none; padding-left: 12px; padding-right: 12px; }

/* ===== New job page: two-column compact layout ===== */
body.new-job-page main.container {
  max-width: 1200px;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 14px;
  padding-bottom: 14px;
}
body.new-job-page h1 { font-size: 20px; margin-bottom: 10px; }

.nj-form {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
}

.nj-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-areas:
    "left right"
    "notes notes";
  gap: 14px 22px;
}
.nj-left  { grid-area: left;  display: flex; flex-direction: column; gap: 10px; }
.nj-right { grid-area: right; display: flex; flex-direction: column; gap: 10px; }
.nj-notes-full { grid-area: notes; }

.nj-sub { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.nj-sub > label { flex: 1 1 auto; min-width: 0; }

.nj-grid label {
  margin-bottom: 0;
  font-size: 13px;
  display: flex;
  flex-direction: column;
}
.nj-grid input,
.nj-grid select,
.nj-grid textarea {
  margin-top: 4px;
  padding: 6px 9px;
  font-size: 14px;
}
.nj-grid textarea { resize: vertical; }

/* Specific widths so the boxes match the data they hold */
.nj-w-invoice  { flex: 0 0 130px; }
.nj-w-customer { flex: 1 1 auto; }
.nj-w-city     { flex: 1 1 auto; }
.nj-w-state    { flex: 0 0 90px; }
.nj-w-zip      { flex: 0 0 130px; }
.nj-w-full     { width: 100%; }

.nj-notes textarea {
  width: 100%;
  min-height: 110px;
  resize: vertical;
}

.nj-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.nj-hint { margin: 0; }
.nj-footer .actions { margin-top: 0; }
.nj-save { min-width: 220px; padding: 10px 28px; font-size: 15px; font-weight: 600; }

@media (max-width: 900px) {
  .nj-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "left"
      "right"
      "notes";
  }
  .nj-sub { flex-direction: column; align-items: stretch; }
  .nj-w-invoice, .nj-w-state, .nj-w-zip { flex: 1 1 auto; }
}

.dashboard-sticky {
  position: sticky;
  top: 0; /* sticks to top of the main-col scrollable area */
  z-index: 5;
  background: var(--bg);
  padding: 8px 0;
  margin-bottom: 8px;
  box-shadow: 0 6px 8px -8px rgba(15, 23, 42, 0.18);
}
.dashboard-sticky .kpis { margin-bottom: 10px; }
.dashboard-sticky .alert-banner { margin-bottom: 0; }

.orphan-alert {
  background: var(--danger);
  color: white;
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 10px;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.25);
}
.orphan-alert-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.orphan-alert-icon { font-size: 16px; }
.orphan-alert-sub { font-size: 12px; color: rgba(255,255,255,0.9); font-weight: 400; }
.orphan-alert-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.orphan-alert-item {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 6px 10px;
  background: rgba(255,255,255,0.1);
  border-radius: 6px;
  color: white;
  text-decoration: none;
  font-size: 13px;
  border-left: 3px solid white;
}
.orphan-alert-item:hover {
  background: rgba(255,255,255,0.2);
  text-decoration: none;
  color: white;
}
.orphan-days {
  background: white;
  color: var(--danger);
  font-weight: 700;
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 4px;
  white-space: nowrap;
}
.orphan-invoice {
  font-family: ui-monospace, Consolas, monospace;
  font-weight: 600;
  color: rgba(255,255,255,0.95);
}
.orphan-name { font-weight: 600; }
.orphan-addr, .orphan-inst { color: rgba(255,255,255,0.85); font-size: 12px; }

/* Two independent scroll panes: calendar (left) and unscheduled (right).
   Each can be scrolled without moving the other. height set at runtime to
   fill viewport minus the topbar. */
.schedule-layout {
  display: flex;
  gap: 12px;
  align-items: stretch;
  height: calc(100vh - 48px); /* overridden in JS to match real topbar height */
  overflow: hidden;
}
.main-col {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  overflow-y: auto;
  padding-right: 4px;
}
.calendar-wrapper { padding-bottom: 8px; margin-bottom: 16px; }
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  gap: 6px;
}

.unscheduled-panel {
  flex: 0 0 306px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.unscheduled-panel .job-card-list {
  flex: 1 1 auto;
  /* "scroll" instead of "auto" so the track is always visible even when
     everything fits — keeps the visual hint that this is a scroll area
     and stops the layout from jumping when items are added/removed. */
  overflow-y: scroll;
  min-height: 0;
  scrollbar-gutter: stable;
  /* Force the scrollbar to render on Windows where overlay scrollbars
     are common in modern Edge/Chrome. */
  scrollbar-width: thin;
  scrollbar-color: #94a3b8 #f1f5f9;
}
.unscheduled-panel .job-card-list::-webkit-scrollbar {
  width: 10px;
}
.unscheduled-panel .job-card-list::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 6px;
}
.unscheduled-panel .job-card-list::-webkit-scrollbar-thumb {
  background: #94a3b8;
  border-radius: 6px;
  border: 2px solid #f1f5f9;
}
.unscheduled-panel .job-card-list::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}
.unscheduled-panel.eligible { border-style: dashed; border-color: #94a3b8; }
.unscheduled-panel.drag-target { border-color: var(--primary); border-style: solid; background: #eef4ff; }
.up-header h2 { margin: 0 0 6px; }
.up-header { margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.up-search {
  width: 100%;
  margin-top: 4px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  box-sizing: border-box;
}
.up-search:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15); }
.up-search::-webkit-search-cancel-button { cursor: pointer; }

.up-drop-hint {
  flex: 0 0 auto;
  padding: 18px 12px;
  margin-bottom: 10px;
  min-height: 70px;
  border: 2px dashed #cbd5e1;
  border-radius: 6px;
  background: #f0fdf4;
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: border-color 120ms, background-color 120ms, color 120ms;
}
.up-drop-hint-icon { font-size: 14px; line-height: 1; opacity: 0.55; transform: rotate(-90deg); }
.up-drop-hint-text { line-height: 1.2; }
.unscheduled-panel.drag-target .up-drop-hint {
  border-color: var(--primary);
  background: rgba(37, 99, 235, 0.10);
  color: var(--primary);
  font-style: normal;
  font-weight: 600;
}
.unscheduled-panel.drag-target .up-drop-hint-icon { opacity: 1; }
.unscheduled-panel .jc-num { display: none; }
.unscheduled-panel .jc-top { margin: 0; padding: 0; min-height: 0; }
/* jc-top visibility for returned + moved badges is defined below */
.unscheduled-panel .job-card { border-left-color: #94a3b8; padding: 8px 10px; }
.unscheduled-panel .job-card-list { gap: 6px; }

.up-card-link { display: block; color: var(--ink); }
.up-card-link:hover { text-decoration: none; }
.up-card-line {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  min-width: 0;
}
.up-card-line + .up-card-line { margin-top: 4px; }
.up-card-line-2 {
  gap: 10px;
  font-size: 12px;
  color: var(--ink);
  line-height: 1.35;
  flex-wrap: nowrap;
  overflow: hidden;
}
.up-card-line-2 > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.up-card-line-2 > span:first-child { flex: 1 1 auto; }
.up-card-customer {
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
  min-width: 0;
}
/* Pills (🔒 lock + 📞 CALL) sit hard-right on the customer line. The
   customer name shrinks via ellipsis to make room for them. */
.up-card-pills {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  flex-shrink: 0;
}
.up-card-invoice {
  font-size: 12px;
  color: var(--ink);
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  white-space: nowrap;
}
.up-card-type { color: var(--ink); }
.cal-dow-header {
  font-size: 11px;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  text-align: center;
  padding: 6px 0 4px;
  letter-spacing: 0.6px;
}
.cal-day {
  background: white;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px;
  min-height: 170px;
  display: flex;
  flex-direction: column;
  transition: background-color 120ms, border-color 120ms;
}
.cal-day.weekend { background: #f1f5f9; }
.cal-day.holiday { background: #fef3c7; border-color: #fde68a; }
.cal-day.month-alt .cal-day-header {
  background: #dbeafe;
  margin: -8px -8px 8px -8px;
  padding: 8px 8px 6px 8px;
  border-bottom-color: #93c5fd;
  border-radius: 6px 6px 0 0;
}
.cal-day.today {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}
.cal-day.today .job-card { background: #f0fdf4; }
.cal-day.today .job-card.is-returned { background: var(--danger-bg); }
.cal-day-header {
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.cal-dow-cell {
  font-size: 10px;
  text-transform: uppercase;
  color: var(--muted);
  letter-spacing: 0.5px;
  font-weight: 600;
}
.cal-date { font-size: 14px; font-weight: 500; margin-top: 1px; }
.cal-date-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.cal-weather {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  white-space: nowrap;
  cursor: help;
}
.cal-weather-icon { font-size: 20px; line-height: 1; }
.cal-weather-temp { color: var(--ink); font-size: 12px; font-weight: 600; }
.cal-weather-rain { color: #2563eb; font-size: 11px; font-weight: 600; }
.cal-day.today .cal-date { font-weight: 800; color: var(--primary); }
.cal-holiday-name {
  font-size: 11px;
  color: #92400e;
  font-style: italic;
  margin-top: 2px;
  line-height: 1.2;
}
.cal-day .job-card-list { flex: 1; gap: 6px; }
.cal-day .job-card { padding: 5px 7px; line-height: 1.2; }
.cal-day .jc-top {
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 3px;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.cal-day .jc-num { font-size: 10px; }
.cal-day .status { font-size: 9px; padding: 1px 6px; }
.cal-day .cc-row {
  font-size: 12px;
  color: var(--ink);
  line-height: 1.25;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-day .cc-row:first-child { margin-top: 0; }
.cal-day .cc-row-name {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px;
}
.cal-day .cc-customer { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.cal-day .cc-invoice {
  font-size: 11px;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  color: var(--muted);
  flex-shrink: 0;
}
.cal-day .cc-addr { color: var(--ink); }
.cal-day .cc-type { color: var(--muted); font-size: 11px; }

.moved-badge {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 999px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.moved-badge.warn { background: #fed7aa; color: #9a3412; }
.moved-badge.yellow { background: #facc15; color: #713f12; }
.moved-badge.danger { background: var(--danger); color: white; }

.returned-badge {
  background: var(--danger);
  color: white;
  font-size: 10px;
  padding: 1px 7px;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: 0.5px;
  white-space: nowrap;
  text-transform: uppercase;
}
.returned-badge-lg { font-size: 12px; padding: 2px 10px; margin-left: 4px; vertical-align: middle; }
/* "TRIES: N" pill — how many install attempts a job has had (shows at 2+). */
.tries-badge {
  display: inline-block;
  background: #b45309;
  color: white;
  font-size: 10px;
  padding: 1px 7px;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
/* "Previous attempts" history on a troubled job's page — the full story. */
.attempts-history { border: 1px solid #fed7aa; background: #fff7ed; border-radius: 10px; padding: 12px 14px; margin: 12px 0; }
.attempts-history h2 { margin: 0 0 2px; font-size: 1.02rem; }
.attempt-row { border-top: 1px solid #fde2c4; padding: 10px 0; }
.attempt-row:first-of-type { border-top: 0; }
.attempt-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.attempt-num { background: #b45309; color: #fff; font-weight: 800; font-size: 11px; padding: 1px 8px; border-radius: 999px; }
.attempt-date { font-weight: 700; }
.attempt-reason { margin: 4px 0 6px; }
.attempt-photos { display: flex; gap: 6px; flex-wrap: wrap; }
.attempt-photos img { width: 84px; height: 84px; object-fit: cover; border-radius: 6px; border: 1px solid #e3e3e8; }
.attempt-vid { display: inline-flex; align-items: center; justify-content: center; width: 84px; height: 84px; background: #111; color: #fff; border-radius: 6px; font-size: 22px; }
.job-card.is-returned {
  border-left-color: var(--danger);
  border-left-width: 5px;
  background: var(--danger-bg);
}
.unscheduled-panel .job-card.is-returned {
  border-left-color: var(--danger);
  background: var(--danger-bg);
}

/* Job list rows for returned jobs */
tr.is-returned td { background: var(--danger-bg); color: #7f1d1d; }
tr.is-returned td a { color: #991b1b; font-weight: 600; }

/* Re-show jc-top in panel cards when a RETURNED badge is present */

.cal-day.eligible { border-style: dashed; border-color: #94a3b8; }
.cal-day.drag-target { border-color: var(--primary); border-style: solid; background: #eef4ff; }
.cal-day.holiday.drag-target { background: #fff8e1; }
.cal-day.weekend.drag-target { background: #e2e8f0; }
.job-card-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; min-height: 24px; }
.job-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px;
  cursor: grab;
  position: relative;
  border-left: 4px solid #d1d5db;
}
.job-card.status-bar-in_progress { border-left-color: #f59e0b; }
.job-card.status-bar-scheduled { border-left-color: #3b82f6; }
/* Mirrored delivery stop on the installers board: a driver who is also an
   install crew. Tinted + truck badge so it reads as a delivery, not an install. */
.job-card.is-delivery { background: #f0f9ff; border-left-color: #0ea5e9; }
.cal-day.today .job-card.is-delivery { background: #e0f4ff; }
.job-card.is-delivery .jc-delivery-body { cursor: grab; }
.delivery-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  background: #0ea5e9;
  border-radius: 4px;
  padding: 1px 6px;
  white-space: nowrap;
}
.delivery-orders {
  font-size: 10px;
  font-weight: 600;
  color: #0c4a6e;
  background: #e0f2fe;
  border: 1px solid #7dd3fc;
  border-radius: 4px;
  padding: 0 5px;
  white-space: nowrap;
}
/* Fabrication done — ready to install. Very light green so the office sees it
   at a glance on the schedule. Selectors match the calendar/unscheduled cards
   so this wins over the pale "today" background. */
.job-card.ready-for-install,
.cal-day .job-card.ready-for-install,
.cal-day.today .job-card.ready-for-install,
.unscheduled-panel .job-card.ready-for-install {
  background: #e6f9ed;
  border-color: #86efac;
}
/* Ready AND still an install issue: green body, but keep the red left bar and a
   red header band so the install-issue warning still stands out. The INSTALL
   ISSUE pill is unchanged (it sits inside the red header band). */
.job-card.is-returned.ready-for-install,
.cal-day .job-card.is-returned.ready-for-install,
.cal-day.today .job-card.is-returned.ready-for-install,
.unscheduled-panel .job-card.is-returned.ready-for-install {
  border-left-color: var(--danger);
  border-left-width: 5px;
}
.job-card.is-returned.ready-for-install .jc-top {
  background: var(--danger-bg);
  border: 1px solid #f1a9a9;
  border-radius: 5px;
  padding: 2px 6px;
  margin: 0 -2px 5px -2px;
}
.job-card[draggable="true"]:active { cursor: grabbing; }
.job-card.dragging { display: none; }
.drop-placeholder {
  list-style: none;
  border: 2px dashed var(--primary);
  background: #eef4ff;
  border-radius: 6px;
  margin: 0;
}
.jc-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.jc-num { font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--muted); font-weight: 600; }
.jc-link { display: block; color: var(--ink); }
.jc-link:hover { text-decoration: none; }
.jc-invoice { font-weight: 700; font-size: 14px; }
.jc-customer { font-size: 13px; margin-top: 2px; }
.jc-type { margin-top: 4px; }
.wrap { white-space: pre-wrap; word-break: break-word; }
button.warn { background: var(--warn); color: white; border-color: var(--warn); }

.installer-bar { background: #0f172a; }
.installer-page { background: #f8fafc; }
.installer-job-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.installer-job-list li a {
  display: block;
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  color: var(--ink);
}
.installer-job-list li a:hover { text-decoration: none; border-color: var(--primary); }
/* Mirrored delivery stop (crew that also drives). Display-only — no tap target,
   so it's a styled card on its own rather than a link, tinted like the office
   board's delivery card. */
.installer-job-list li.ij-delivery {
  display: block;
  background: #f0f9ff;
  border: 1px solid #7dd3fc;
  border-left: 4px solid #0ea5e9;
  border-radius: 8px;
  padding: 14px;
  color: var(--ink);
}
.installer-job-list li.ij-delivery .ij-jobnum {
  background: #0ea5e9;
  color: #fff;
}
.camera-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  background: var(--primary);
  color: white;
  font-size: 20px;
  font-weight: 600;
  padding: 22px 18px;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  user-select: none;
  margin: 0;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
  transition: background 120ms, transform 80ms, box-shadow 120ms;
}
.camera-btn:active {
  background: #1d4ed8;
  transform: translateY(1px);
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.25);
}
.camera-hint { text-align: center; margin: 8px 0 0; }

.camera-btn-danger { background: var(--danger); box-shadow: 0 2px 6px rgba(220, 38, 38, 0.25); }
.camera-btn-danger:active { background: #b91c1c; }
.camera-btn-warn { background: #d97706; box-shadow: 0 2px 6px rgba(217, 119, 6, 0.25); }
.camera-btn-warn:active { background: #b45309; }
.video-btn { background: #7c3aed; box-shadow: 0 2px 6px rgba(124, 58, 237, 0.25); }
.video-btn:active { background: #6d28d9; }
.cant-finish-form .camera-btn, .partial-done-form .camera-btn {
  margin-bottom: 12px;
  font-size: 16px;
  padding: 14px 16px;
}

.cant-finish { margin-top: 16px; }
.cant-finish-btn {
  display: block;
  width: 100%;
  background: var(--danger);
  color: white;
  font-size: 17px;
  font-weight: 600;
  padding: 16px 18px;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  list-style: none;
  user-select: none;
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.25);
}
.cant-finish-btn::-webkit-details-marker { display: none; }
.cant-finish[open] .cant-finish-btn { border-radius: 10px 10px 0 0; }
.cant-finish-form {
  padding: 14px;
  border: 1px solid var(--danger);
  border-top: 0;
  border-radius: 0 0 10px 10px;
  background: #fff7f7;
}
.cant-finish-form label { margin-bottom: 10px; display: block; }
.cant-finish-form .big.danger { width: 100%; margin-top: 4px; }

.action-details { margin-bottom: 10px; }
.mark-complete-details { }
.mark-complete-btn {
  display: block;
  width: 100%;
  background: var(--success);
  color: white;
  font-size: 18px;
  font-weight: 600;
  padding: 16px 18px;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  list-style: none;
  user-select: none;
  box-shadow: 0 2px 6px rgba(22, 163, 74, 0.25);
}
.mark-complete-btn::-webkit-details-marker { display: none; }
.mark-complete-details[open] .mark-complete-btn { border-radius: 10px 10px 0 0; }
.mark-complete-form {
  padding: 14px;
  border: 1px solid var(--success);
  border-top: 0;
  border-radius: 0 0 10px 10px;
  background: #ecfdf5;
}
.mark-complete-form label { margin-bottom: 10px; display: block; }
.mark-complete-form .big.success { width: 100%; margin-top: 4px; }

.partial-done { margin-top: 0; }
.partial-done-btn {
  display: block;
  width: 100%;
  background: #d97706;
  color: white;
  font-size: 17px;
  font-weight: 600;
  padding: 16px 18px;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  list-style: none;
  user-select: none;
  box-shadow: 0 2px 6px rgba(217, 119, 6, 0.25);
}
.partial-done-btn::-webkit-details-marker { display: none; }
.partial-done[open] .partial-done-btn { border-radius: 10px 10px 0 0; }
.partial-done-form {
  padding: 14px;
  border: 1px solid #d97706;
  border-top: 0;
  border-radius: 0 0 10px 10px;
  background: #fffbeb;
}
.partial-done-form label { margin-bottom: 10px; display: block; }
.partial-done-form .big.warn { width: 100%; margin-top: 4px; }

/* Put-on-hold disclosure: a date is required so the job auto-returns. */
.hold-details { }
.hold-details .warn-btn {
  display: block;
  width: 100%;
  background: var(--warn);
  color: white;
  font-size: 16px;
  font-weight: 600;
  padding: 14px 18px;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  list-style: none;
  user-select: none;
}
.hold-details .warn-btn::-webkit-details-marker { display: none; }
.hold-details[open] .warn-btn { border-radius: 10px 10px 0 0; }
.hold-form-wrap {
  padding: 14px;
  border: 1px solid var(--warn);
  border-top: 0;
  border-radius: 0 0 10px 10px;
  background: #fffbeb;
}
.hold-form-wrap label { margin-bottom: 10px; display: block; font-weight: 600; }
.hold-form-wrap input { width: 100%; }
.hold-form-wrap .warn { width: 100%; margin-top: 4px; }
.hold-until-field { display: block; margin: 8px 0; font-weight: 600; }

/* Unscheduled panel: yellow tint for "coming back" jobs */
.job-card.is-partial {
  border-left-color: #d97706;
  border-left-width: 5px;
  background: #fffbeb;
}
.job-card.is-visit {
  border-left-color: #7c3aed;
  border-left-width: 5px;
  background: #faf5ff;
}
.visit-card-badge {
  background: #7c3aed;
  color: white;
  font-size: 10px;
  padding: 1px 7px;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: 0.5px;
  white-space: nowrap;
  text-transform: uppercase;
}
.unscheduled-panel .jc-top:not(:has(.returned-badge)):not(:has(.partial-badge)):not(:has(.visit-card-badge)):not(:has(.callback-badge)):not(:has(.jc-lock-pill)):not(:has(.jc-needs-call-pill)):not(:has(.jc-installer)):not(:has(.fab-ready-pill)):not(:has(.fab-mini-pill)) { display: none; }
.partial-badge {
  background: #d97706;
  color: white;
  font-size: 10px;
  padding: 1px 7px;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: 0.5px;
  white-space: nowrap;
  text-transform: uppercase;
}
.unscheduled-panel .jc-top:has(.partial-badge) { display: flex; }
.unscheduled-panel .jc-top:has(.callback-badge) { display: flex; }
.unscheduled-panel .jc-top:has(.jc-lock-pill) { display: flex; }
.unscheduled-panel .jc-top:has(.jc-needs-call-pill) { display: flex; }
.unscheduled-panel .jc-top:has(.fab-ready-pill) { display: flex; }
.unscheduled-panel .jc-top:has(.fab-mini-pill) { display: flex; }

.badge-pre_arrival { background: #ede9fe; color: #5b21b6; }
.badge-arrival { background: #dbeafe; color: #1e40af; }
.badge-completion { background: #dcfce7; color: #166534; }
.badge-issue { background: #fee2e2; color: #991b1b; }
.badge-partial { background: #fef3c7; color: #92400e; }
.badge-callback { background: #fee2e2; color: #991b1b; }
.photo-grid figcaption a.small {
  display: inline-block;
  margin-top: 4px;
  color: var(--primary);
  font-size: 12px;
}

.ij-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.ij-jobnum {
  font-weight: 800;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--brand);
  background: #eef2ff;
  padding: 3px 10px;
  border-radius: 6px;
}
.ij-meta { margin-left: auto; }
.ij-name { font-size: 16px; font-weight: 600; }
.phone-link { font-size: 18px; }
.onsite-contact {
  background: #eef2ff;
  border-left: 4px solid #4338ca;
  padding: 10px 12px;
  border-radius: 6px;
  margin: 8px 0;
  font-size: 15px;
}
.ij-onsite {
  background: #eef2ff;
  border-left: 3px solid #4338ca;
  padding: 6px 10px;
  border-radius: 5px;
  margin-top: 6px;
  font-size: 13px;
  color: var(--ink);
}
.onsite-contact .phone-link {
  display: inline-block;
  margin-left: 6px;
  font-weight: 600;
}

@media (max-width: 600px) {
  .topbar { flex-wrap: wrap; }
  .topbar nav { order: 3; flex-basis: 100%; margin-left: 0; overflow-x: auto; }
  .container { padding: 16px; }
  table.jobs th, table.jobs td { padding: 6px 4px; font-size: 13px; }
}

/* ===== Job list page: print button + print-only meta ===== */
.page-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.page-title-row h1 { margin: 0; }
.btn-print {
  background: var(--primary);
  color: white;
  border: 1px solid var(--primary);
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 120ms, box-shadow 120ms;
}
.btn-print:hover {
  background: #1d4ed8;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3);
}
.btn-print-icon { font-size: 16px; line-height: 1; }
.print-only { display: none; }
.print-meta { font-size: 13px; color: var(--muted); margin: 0 0 14px; }

/* ===== Print: hide UI chrome, render clean B&W report ===== */
@media print {
  @page { margin: 0.5in; }

  .topbar, .no-print { display: none !important; }
  .print-only { display: block !important; }

  body { background: white !important; color: black !important; font-size: 11pt; }
  main.container { max-width: none !important; padding: 0 !important; margin: 0 !important; }
  body.schedule-wide main.container { padding: 0 !important; }

  h1 { font-size: 20pt; margin: 0 0 4pt; color: black; }
  h1 .muted { color: #555; font-weight: 400; }
  .print-meta { font-size: 10pt; color: #555; margin: 0 0 14pt; }
  .page-title-row { display: block; margin: 0 0 4pt; }

  a { color: black; text-decoration: none; }

  table.print-table {
    width: 100%;
    border-collapse: collapse;
    page-break-inside: auto;
  }
  table.print-table thead { display: table-header-group; }
  table.print-table tr { page-break-inside: avoid; page-break-after: auto; background: white !important; color: black !important; }
  table.print-table th,
  table.print-table td {
    padding: 5pt 6pt;
    border: 1px solid #888;
    text-align: left;
    vertical-align: top;
    font-size: 10pt;
    background: white !important;
    color: black !important;
  }
  table.print-table th { font-weight: 700; background: #eee !important; }

  /* Status pill rendered as plain text in print so colors don't bleed */
  .status {
    background: transparent !important;
    color: black !important;
    padding: 0 !important;
    border: none !important;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.4px;
  }
  /* Suppress alert-banner / sticky shadows / etc. in case other pages get printed */
  .dashboard-sticky, .alert-banner { box-shadow: none !important; background: white !important; }
}

/* New Job: top uploads strip (PDFs + Pre-arrival photos) */
.nj-top-uploads {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 16px;
}
.nj-upload-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 14px;
}
.nj-upload-h {
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 4px;
  color: #1f3a5f;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
@media (max-width: 760px) {
  .nj-top-uploads { grid-template-columns: 1fr; }
}

/* "Add to Home Screen" hint banner shown on iOS Safari only */
.today-install-hint {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #ecfdf5;
  border: 1.5px solid #6ee7b7;
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.today-install-hint-icon { font-size: 28px; line-height: 1; }
.today-install-hint-body { flex: 1; font-size: 14px; }
.today-install-hint-body strong { color: #065f46; }
.today-install-hint-body p { margin: 4px 0 0; color: #1f3a5f; }
.today-install-share {
  display: inline-block;
  background: #1e3a8a;
  color: white;
  padding: 0 4px;
  border-radius: 3px;
  font-weight: 700;
}
.today-install-hint-close {
  background: transparent;
  border: none;
  font-size: 22px;
  color: #065f46;
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
}

/* ============================================================
   General mobile responsiveness — applies to ALL pages, not
   just /today. Targets ~iPhone width and below.
   ============================================================ */
@media (max-width: 760px) {
  /* Topbar: stack into one tighter row and let buttons wrap */
  .topbar {
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 8px 10px !important;
  }
  .topbar .brand { font-size: 22px !important; }
  .topbar nav {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    width: 100%;
    order: 3;
  }
  .topbar nav a {
    font-size: 13px !important;
    padding: 6px 8px !important;
  }
  .topbar .logout {
    flex-wrap: wrap;
    gap: 6px !important;
    margin-left: auto;
  }
  .topbar .logout .who { font-size: 12px; }
  .topbar .logout form button { font-size: 12px !important; padding: 6px 10px !important; }

  main.container { padding: 10px !important; }

  /* Pages built with the new job-header-block (job-detail, edit, new) */
  .job-header-row {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .job-header-nav {
    width: 100%;
    flex-wrap: wrap;
    gap: 6px !important;
  }
  .job-header-nav a, .job-header-nav .btn-edit {
    font-size: 13px !important;
    padding: 6px 10px !important;
  }
  .job-header-h1 { font-size: 22px !important; flex-wrap: wrap; }

  /* The 3-column top card row on job-detail stacks */
  .grid-3 {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* New Job form: collapse the 2-column grid */
  .nj-grid {
    grid-template-columns: 1fr !important;
  }
  .nj-w-invoice, .nj-w-customer, .nj-w-city, .nj-w-state, .nj-w-zip, .nj-w-full {
    width: 100% !important;
  }
  .nj-sub { flex-wrap: wrap !important; gap: 10px !important; }

  /* Tables that can blow out viewport — let them scroll horizontally */
  table.jobs, table.print-table, .staff-perm-table-wrap {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Action buttons: let them wrap and breathe */
  .action-row {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .action-row button, .action-row a, .action-row summary {
    font-size: 14px !important;
    padding: 8px 12px !important;
  }

  /* Dashboard schedule layout: stack calendar above unscheduled */
  .schedule-layout {
    grid-template-columns: 1fr !important;
    height: auto !important;
  }
  .main-col, .unscheduled-panel {
    height: auto !important;
    max-height: none !important;
  }

  /* Stat row buttons get a bit smaller */
  .stat-row {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .stat-button {
    flex: 1 1 calc(50% - 6px) !important;
    min-width: 140px !important;
  }

  /* Settings tables stack more breathing room */
  .form-card { padding: 12px !important; }
}

/* ===== "Today" mobile tracker — phone-friendly, read-only ===== */
body.today-page {
  background: #f1f5f9;
  -webkit-tap-highlight-color: rgba(30, 58, 138, 0.1);
}
body.today-page .topbar { display: none; }
body.today-page main.container {
  max-width: 720px;
  padding: 12px 10px 40px;
}
.today-shell { padding-bottom: 60px; }
.today-header {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 14px 14px 12px;
  margin-bottom: 12px;
  position: sticky;
  top: 6px;
  z-index: 5;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.today-header-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.today-back {
  color: #1e3a8a;
  font-weight: 700;
  text-decoration: none;
  font-size: 14px;
  padding: 6px 10px;
  background: #eff6ff;
  border-radius: 8px;
}
.today-back:hover { background: #dbeafe; }
.today-header-date {
  font-size: 13px;
  color: #475569;
  font-weight: 600;
  margin-left: auto;
}

/* Date navigator: prev arrow | Today pill | next arrow. Tappable on a
   phone, plus the entire page supports left/right swipe gesture. */
.today-date-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 10px 0 8px;
  padding: 6px 0;
}
.today-date-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 22px;
  background: #eff6ff;
  color: #1e3a8a;
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid #bfdbfe;
}
.today-date-arrow:hover, .today-date-arrow:active { background: #dbeafe; }
.today-date-pill {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 8px 18px;
  border-radius: 20px;
  background: white;
  border: 2px solid #cbd5e1;
  color: #475569;
  text-decoration: none;
  cursor: pointer;
}
.today-date-pill-current {
  background: #1e3a8a;
  color: white;
  border-color: #1e3a8a;
  cursor: default;
}
/* When the user is viewing a non-today date, the pill becomes an
   actionable "jump to today" button — different color so it's clear
   it's a button and not the current state. */
.today-date-pill-action {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1e3a8a;
}
.today-date-pill-action:hover { background: #dbeafe; }

/* Big red "Move to Unscheduled" button at the bottom of the office
   phone job view. Easy to tap, hard to mistap. */
.today-unschedule-card {
  border: 2px solid #fecaca;
  background: #fef2f2;
}
.today-unschedule-btn {
  display: block;
  width: 100%;
  background: #dc2626;
  color: white;
  border: 2px solid #b91c1c;
  border-radius: 12px;
  padding: 16px 18px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.3px;
}
.today-unschedule-btn:hover, .today-unschedule-btn:active { background: #b91c1c; }
.today-h1 {
  font-size: 26px;
  margin: 0;
  color: #1f3a5f;
  display: flex;
  align-items: center;
  gap: 8px;
}
.today-h1-count {
  background: #1e3a8a;
  color: white;
  font-size: 14px;
  padding: 2px 10px;
  border-radius: 999px;
  font-weight: 700;
}
.today-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.today-chip {
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: 0.3px;
}
.chip-in_progress { background: #dbeafe; color: #1e40af; }
.chip-scheduled   { background: #f1f5f9; color: #475569; }
.chip-completed   { background: #dcfce7; color: #166534; }
.chip-issue       { background: #fee2e2; color: #991b1b; }
.chip-partial     { background: #fef3c7; color: #92400e; }
.today-refresh {
  margin-top: 10px;
  background: #1e3a8a;
  color: white;
  border: none;
  padding: 8px 14px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  width: 100%;
}
.today-refresh:hover { background: #1e40af; }

.today-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.today-card {
  display: block;
  background: white;
  border: 1px solid #e2e8f0;
  border-left: 4px solid #94a3b8;
  border-radius: 12px;
  padding: 12px 14px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.05s ease, box-shadow 0.1s ease;
}
.today-card:active { transform: scale(0.99); }
.today-card.progress-in_progress { border-left-color: #2563eb; background: #eff6ff; }
.today-card.progress-completed   { border-left-color: #16a34a; background: #f0fdf4; }
.today-card.progress-issue       { border-left-color: #dc2626; background: #fef2f2; }
.today-card.progress-partial     { border-left-color: #f59e0b; background: #fffbeb; }
.today-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.today-card-status {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 10px;
  border-radius: 999px;
}
.status-in_progress { background: #1e40af; color: white; }
.status-scheduled   { background: #e2e8f0; color: #1e293b; }
.status-completed   { background: #16a34a; color: white; }
.status-issue       { background: #dc2626; color: white; }
.status-partial     { background: #f59e0b; color: white; }
.status-on_hold     { background: #64748b; color: white; }
.today-card-invoice {
  font-weight: 700;
  font-size: 14px;
  color: #475569;
}
.today-card-customer {
  font-size: 16px;
  color: #1f3a5f;
  margin-bottom: 2px;
}
.today-card-addr {
  font-size: 14px;
  color: #475569;
  margin-bottom: 8px;
}
.today-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.meta-pill {
  font-size: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  padding: 3px 8px;
  border-radius: 999px;
  color: #475569;
}
.meta-crew { background: #ede9fe; border-color: #c4b5fd; color: #5b21b6; }
.meta-time { background: #eff6ff; border-color: #93c5fd; color: #1e40af; }
.meta-photos { background: #f0fdf4; border-color: #86efac; color: #166534; }
.meta-window { background: #fef3c7; border-color: #f59e0b; color: #92400e; font-weight: 700; }

/* Installer arrival window banner (mobile job detail) */
.ij-arrival-banner {
  background: #fef3c7;
  border: 2px solid #f59e0b;
  border-radius: 8px;
  padding: 10px 14px;
  margin: 8px 0;
  font-size: 16px;
  color: #92400e;
}
.ij-arrival-window {
  background: #fef3c7;
  color: #92400e;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 5px;
  margin-top: 6px;
  font-size: 14px;
  display: inline-block;
}

.today-empty {
  text-align: center;
  padding: 40px 20px;
  background: white;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
}
.today-empty-icon { font-size: 48px; margin-bottom: 10px; }
.today-empty h2 { margin: 0 0 6px; color: #1f3a5f; }

.today-foot {
  text-align: center;
  margin-top: 16px;
  padding: 0 10px;
}

/* Read-only job page */
.today-info-card {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 12px;
}
.today-card-issue { border-color: #fca5a5; background: #fef2f2; }
.today-card-partial { border-color: #fcd34d; background: #fffbeb; }
.today-info-row {
  display: flex;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid #f1f5f9;
}
.today-info-row:last-child { border-bottom: none; }
.today-info-label {
  font-weight: 700;
  color: #475569;
  font-size: 13px;
  min-width: 90px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.today-info-value { color: #1f3a5f; flex: 1; word-break: break-word; }
.today-info-value.link { color: #1e3a8a; text-decoration: underline; font-weight: 600; }
.today-section-h {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #475569;
  margin: 0 0 8px;
}
.today-notes-block {
  white-space: pre-wrap;
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 15px;
  line-height: 1.4;
}
.today-timeline {
  list-style: none;
  padding: 0;
  margin: 0;
}
.today-timeline-row {
  border-left: 3px solid #cbd5e1;
  padding: 8px 0 8px 12px;
  margin-left: 4px;
}
.today-timeline-row.tl-kind-arrived  { border-left-color: #2563eb; }
.today-timeline-row.tl-kind-completed { border-left-color: #16a34a; }
.today-timeline-row.tl-kind-returned  { border-left-color: #dc2626; }
.today-timeline-row.tl-kind-partial   { border-left-color: #f59e0b; }
.tl-time {
  font-size: 12px;
  color: #475569;
  font-weight: 600;
}
.tl-summary {
  font-size: 14px;
  color: #1f3a5f;
  margin-top: 2px;
}
.today-photo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.today-photo {
  display: block;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
}
.today-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.today-photo-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
}

/* Clear moves counter button */
.clear-moves-btn {
  background: #fef3c7;
  color: #78350f;
  border: 1.5px solid #f59e0b;
  padding: 8px 14px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}
.clear-moves-btn:hover { background: #fde68a; }

/* Settings: per-staff button access matrix */
.staff-perm-table-wrap {
  overflow-x: auto;
  margin-top: 10px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}
.staff-perm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  background: white;
}
.staff-perm-table th,
.staff-perm-table td {
  padding: 8px 10px;
  border-bottom: 1px solid #e5e7eb;
  text-align: center;
}
.staff-perm-table thead th {
  background: #f1f5f9;
  color: #1e293b;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border-bottom: 2px solid #cbd5e1;
  position: sticky;
  top: 0;
}
.staff-perm-table .sp-name-col {
  text-align: left;
  white-space: nowrap;
}
.staff-perm-table thead .sp-name-col {
  position: sticky;
  left: 0;
  background: #f1f5f9;
  z-index: 2;
}
.staff-perm-table tbody .sp-name-col {
  background: white;
  position: sticky;
  left: 0;
  z-index: 1;
  border-right: 1px solid #e5e7eb;
  min-width: 180px;
}
.staff-perm-table tbody tr:hover .sp-name-col { background: #f8fafc; }
.staff-perm-table tbody tr:hover { background: #f8fafc; }
.staff-perm-table .sp-action-col {
  min-width: 78px;
}
.staff-perm-table .sp-cell-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: 100%;
  height: 100%;
  padding: 4px;
}
.staff-perm-table input[type=checkbox] {
  width: 20px;
  height: 20px;
  cursor: pointer;
}
.staff-perm-table tbody td .muted { display: block; font-weight: 400; }

/* ===== Job sheet: printable crew handout ===== */
.js-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 4px 0 16px;
}
.js-toolbar .primary.big {
  background: #0d9488;
  border-color: #0d9488;
  font-size: 16px;
  padding: 10px 18px;
}
.js-toolbar .primary.big:hover { background: #0f766e; border-color: #0f766e; }
.js-toolbar .back-to-dashboard { margin: 0; }

.job-sheet {
  background: white;
  color: #111;
  padding: 22px 26px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  max-width: 980px;
  margin: 0 auto;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
.js-header {
  border-bottom: 2px solid #1f3a5f;
  padding-bottom: 10px;
  margin-bottom: 14px;
}
.js-logo-row {
  text-align: center;
  margin-bottom: 10px;
}
.js-logo-img {
  display: inline-block;
  max-width: 460px;
  width: 100%;
  height: auto;
}
.js-title-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}
.js-title {
  margin: 0;
  font-size: 22px;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.js-sub { font-size: 12px; }
.js-tag {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1.5px solid;
}
.js-tag-callback { color: #991b1b; border-color: #991b1b; background: #fee2e2; }
.js-tag-issue    { color: #991b1b; border-color: #991b1b; background: #fee2e2; }
.js-tag-multi    { color: #4338ca; border-color: #4338ca; background: #e0e7ff; }

.js-section { margin: 0 0 18px; }
.js-section h2 {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #1f3a5f;
  border-bottom: 1px solid #cbd5e1;
  padding-bottom: 4px;
  margin: 0 0 8px;
}
.js-kv {
  width: 100%;
  border-collapse: collapse;
}
.js-kv th, .js-kv td {
  text-align: left;
  vertical-align: top;
  padding: 6px 8px;
  border-bottom: 1px solid #e5e7eb;
  font-size: 14px;
}
.js-kv th {
  width: 30%;
  font-weight: 600;
  color: #475569;
  background: #f8fafc;
}
.js-notes {
  white-space: pre-wrap;
  font-size: 14px;
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  background: #fffbeb;
  border-radius: 6px;
  min-height: 60px;
}
.js-photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.js-photo {
  margin: 0;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  overflow: hidden;
  background: white;
  page-break-inside: avoid;
  break-inside: avoid;
}
.js-photo img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}
.js-photo figcaption {
  padding: 6px 8px;
  font-size: 11px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.js-phase {
  display: inline-block;
  width: fit-content;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 1px 6px;
  border-radius: 999px;
  background: #e2e8f0;
  color: #1e293b;
}
.js-phase-pre_arrival { background: #ede9fe; color: #5b21b6; }
.js-phase-arrival    { background: #dbeafe; color: #1e40af; }
.js-phase-completion { background: #dcfce7; color: #166534; }
.js-phase-issue      { background: #fee2e2; color: #991b1b; }
.js-phase-partial    { background: #fef3c7; color: #92400e; }
.js-phase-callback   { background: #fee2e2; color: #991b1b; }

.js-footer {
  border-top: 1px solid #cbd5e1;
  padding-top: 8px;
  text-align: center;
}

/* Print rules: full-bleed sheet, portrait, no shadows, photos 2-up */
@media print {
  @page { size: letter portrait; margin: 0.5in; }
  .js-toolbar { display: none !important; }
  body { background: white !important; }
  .job-sheet {
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    max-width: none !important;
    width: 100% !important;
  }
  .js-logo-img { max-width: 4.2in; }
  .js-photo-grid { grid-template-columns: repeat(2, 1fr); gap: 8pt; }
  .js-photo img { height: 2.2in; }
  .js-section { page-break-inside: auto; }
  .js-photos-section { page-break-before: auto; }
  .js-kv th { background: #f3f4f6 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .js-tag, .js-phase { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .js-notes { background: #fffbeb !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Installer: Back to my jobs button */
.back-to-jobs {
  display: inline-block;
  padding: 14px 22px;
  font-size: 1.15rem;
  font-weight: 600;
  color: #1d4ed8;
  background: #fff;
  border: 2px solid #1d4ed8;
  border-radius: 10px;
  text-decoration: none;
  margin: 6px 0 14px;
}
.back-to-jobs:hover, .back-to-jobs:active {
  background: #1d4ed8;
  color: #fff;
}

/* Hide Dashlane password-manager popups on this app */
iframe[id^="dashlane"],
iframe[src*="dashlane"],
div[class*="dashlane"],
div[id*="dashlane"] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Out-today drag-to-reorder */
table.reorderable .drag-col { width: 32px; text-align: center; }
table.reorderable .drag-handle {
  cursor: grab;
  color: #94a3b8;
  font-size: 18px;
  user-select: none;
  padding: 4px 6px;
  display: inline-block;
}
table.reorderable .drag-handle:hover { color: #1d4ed8; }
table.reorderable tbody tr { transition: background-color 0.15s ease; }
table.reorderable tbody tr.dragging { opacity: 0.4; }
table.reorderable tbody tr.drag-over { background: #eff6ff !important; }

/* Admin: select-and-delete photos */
.photo-selectable { position: relative; }
.photo-select-label {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 2;
  background: rgba(255,255,255,0.92);
  border-radius: 6px;
  padding: 4px 6px;
  display: inline-flex;
  align-items: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
  cursor: pointer;
}
.photo-select-check { width: 18px; height: 18px; cursor: pointer; margin: 0; }
.photo-selectable.is-selected { outline: 3px solid #dc2626; outline-offset: -2px; border-radius: 6px; }
.photo-selectable.is-selected img { opacity: 0.75; }
.photo-admin-bar .btn-link {
  background: none;
  border: none;
  color: #1d4ed8;
  cursor: pointer;
  font-size: 0.95rem;
  padding: 4px 6px;
}
.photo-admin-bar .btn-link:hover { text-decoration: underline; }

/* Jobs list pages: wider container + tighter column alignment */
body.jobs-list-page .container { max-width: 1500px; }
body.jobs-list-page table.jobs { table-layout: auto; }
body.jobs-list-page table.jobs th,
body.jobs-list-page table.jobs td { padding: 8px 10px; vertical-align: middle; }
body.jobs-list-page table.jobs th { white-space: nowrap; }
body.jobs-list-page table.jobs td:nth-last-child(1),
body.jobs-list-page table.jobs td:nth-last-child(2),
body.jobs-list-page table.jobs td:nth-last-child(3) {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
body.jobs-list-page table.jobs th:nth-last-child(1),
body.jobs-list-page table.jobs th:nth-last-child(2),
body.jobs-list-page table.jobs th:nth-last-child(3) {
  white-space: nowrap;
}
body.jobs-list-page table.jobs td:last-child,
body.jobs-list-page table.jobs th:last-child { text-align: right; padding-right: 16px; }

/* Installer "My jobs" � gray out finished items but keep them visible & tappable */
.installer-job-list li.ij-done a,
.installer-job-list li.ij-issue a {
  background: #f3f4f6;
  color: #6b7785;
}
.installer-job-list li.ij-done .ij-name,
.installer-job-list li.ij-issue .ij-name {
  color: #6b7785;
  text-decoration: line-through;
  text-decoration-color: #9ca3af;
}
.installer-job-list li.ij-done .ij-jobnum {
  background: #d1d5db;
  color: #4b5563;
}
/* Faded "record" cards: an install issue logged today (going back another day)
   or a multi-day "done for today" — history, not today's active work. */
.installer-job-list li.ij-record a { background: #f3f4f6; color: #6b7785; }
.installer-job-list li.ij-record .ij-jobnum { background: #d1d5db; color: #4b5563; }
.ij-record-badge { background: #9ca3af !important; }
/* Small "+ camera" hint chip on completed cards so the crew sees they
   can still tap to add photos if the office asks. */
.ij-add-photos-hint {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: #dcfce7;
  color: #166534;
  border: 1px solid #86efac;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  margin-left: 4px;
}
.installer-job-list li.ij-issue .ij-jobnum {
  background: #fee2e2;
  color: #991b1b;
}

/* Installer "My jobs" — install-issue job that's been rescheduled: tappable,
   highlighted in light pink with a red badge so it's clearly different from
   a fresh job. */
.installer-job-list li.ij-issue-returning a {
  background: #fef2f2;
  border: 2px solid #fca5a5;
  border-radius: 10px;
  padding: 12px 14px;
  display: block;
  text-decoration: none;
  color: inherit;
}
.installer-job-list li.ij-issue-returning .ij-jobnum {
  background: #fee2e2;
  color: #991b1b;
}
.ij-issue-reason {
  background: white;
  border-left: 3px solid #dc2626;
  padding: 8px 10px;
  margin-top: 8px;
  border-radius: 4px;
  font-size: 14px;
}
.ij-issue-reason strong { color: #991b1b; display: block; margin-bottom: 2px; font-size: 12px; text-transform: uppercase; }

/* Installer job detail: "going back to finish" banner card */
.ij-card-returning {
  background: #fef2f2;
  border: 2px solid #fca5a5;
}
.ij-card-returning h2 { color: #991b1b; }

/* Installer "My jobs" — locked card (not tappable) */
.installer-job-list li.ij-locked .ij-locked-card {
  display: block;
  padding: 12px 14px;
  background: #f3f4f6;
  border-radius: 8px;
  cursor: not-allowed;
  pointer-events: none;
  user-select: none;
  color: #6b7785;
}
.installer-job-list li.ij-locked.ij-issue .ij-locked-card { background: #fef2f2; }
.ij-lock-icon {
  margin-left: auto;
  font-size: 14px;
  opacity: 0.75;
}
.ij-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Stat-card hover spotlight for Ongoing visits */
body[data-hl="ongoing"] .job-card.is-visit {
  opacity: 1;
  box-shadow: 0 0 0 2px #7c3aed;
}

/* ===================== DRIVERS DASHBOARD ===================== */

/* Import dropzone */
.drv-import { margin-bottom: 16px; }
.drv-dropzone {
  border: 2px dashed #0d9488; border-radius: 12px; background: #f0fdfa;
  padding: 20px; text-align: center; transition: background 0.15s, border-color 0.15s;
}
.drv-dropzone.drag-over { background: #ccfbf1; border-color: #0f766e; }
.drv-drop-title { font-weight: 700; font-size: 16px; color: #0f766e; }
.drv-drop-sub { font-size: 13px; color: var(--muted); margin: 2px 0 10px; }
.drv-browse-btn {
  background: #0d9488; color: #fff; border: none; border-radius: 8px;
  padding: 8px 16px; font-weight: 600; cursor: pointer;
}
.drv-browse-btn:hover { background: #14b8a6; }
.drv-import-panel {
  margin-top: 10px; background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; padding: 12px; display: flex; align-items: center;
  flex-wrap: wrap; gap: 12px;
}
.drv-import-file { font-weight: 600; flex: 1 1 200px; }
.drv-import-daylabel { font-size: 14px; display: flex; align-items: center; gap: 6px; }
.drv-import-daylabel input { padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; }
.drv-import-btn {
  background: #0d9488; color: #fff; border: none; border-radius: 8px;
  padding: 8px 16px; font-weight: 700; cursor: pointer;
}
.drv-import-btn:hover { background: #14b8a6; }
.drv-import-btn:disabled { opacity: 0.6; cursor: default; }
.drv-import-cancel {
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 14px; cursor: pointer;
}
.drv-review { flex-basis: 100%; margin-top: 8px; }
.drv-review-intro { font-size: 14px; margin: 0 0 10px; }
.drv-review-row { font-size: 14px; padding: 8px 0; border-bottom: 1px solid #eef2f7; }
.drv-review-row.dup { background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; }
.drv-review-new { margin-bottom: 2px; }
.drv-review-match { color: #b45309; font-size: 13px; margin-bottom: 6px; }
.drv-review-opt { display: block; font-size: 13px; padding: 3px 0; cursor: pointer; }
.drv-review-opt input { margin-right: 6px; }
.drv-import-status { flex-basis: 100%; font-size: 14px; padding: 6px 2px; }
.drv-import-status.working { color: var(--warn); }
.drv-import-status.ok { color: var(--success); }
.drv-import-status.error { color: var(--danger); font-weight: 600; }


/* ===== Add New Job + Enter PDFs stat-card buttons ===== */
.kpi.kpi-addjob {
  background: var(--success);
  color: #fff;
  border-color: var(--success);
  align-items: center;
  justify-content: center;
  font-weight: 700;
  text-align: center;
}
a.kpi.kpi-addjob:hover {
  background: #15803d;
  border-color: #166534;
  color: #fff;
  box-shadow: 0 2px 8px rgba(22, 163, 74, 0.30);
}
.kpi-addjob-icon { font-size: 20px; line-height: 1; font-weight: 700; }

.kpi.kpi-enter-pdfs {
  background: #0d9488;
  color: #fff;
  border-color: #0d9488;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  font-family: inherit;
}
.kpi.kpi-enter-pdfs:hover {
  background: #14b8a6;
  border-color: #0f766e;
  box-shadow: 0 2px 8px rgba(13, 148, 136, 0.30);
  transform: translateY(-1px);
}
.kpi-enter-icon { font-size: 20px; line-height: 1; }

/* "Add stop" — manual single-stop entry, set apart from the teal Enter PDFs. */
.kpi.kpi-add-stop { background: #6366f1; border-color: #6366f1; }
.kpi.kpi-add-stop:hover {
  background: #818cf8;
  border-color: #4f46e5;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.30);
}

/* Driver stat cards are read-only (spans) — no pointer lift. */
.kpi.kpi-static { cursor: default; }

/* Per-driver filter cards — click to see one driver's schedule. Each driver
   gets their own color (--drv); inactive cards show a colored left edge, the
   selected card fills with that color. */
.kpi.kpi-driver {
  cursor: pointer; text-decoration: none; color: inherit;
  border-left: 5px solid var(--drv, #1f3a5f);
}
.kpi.kpi-driver:hover {
  border-color: var(--drv, #1f3a5f);
  box-shadow: 0 2px 8px rgba(31, 58, 95, 0.18);
  transform: translateY(-1px);
}
.kpi.kpi-driver-active {
  background: var(--drv, #1f3a5f); color: #fff; border-color: var(--drv, #1f3a5f);
}
.kpi.kpi-driver-active .kpi-n { color: #fff; }

/* ===== Driver stop cards (on the weekly board) ===== */
.drv-stop-card .jc-top { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.drv-stop-card.status-delivered { background: #f0fdf4 !important; border-left-color: var(--success) !important; }
.drv-stop-card.status-skipped { background: #fffbeb !important; border-left-color: #d97706 !important; }
.drv-badge {
  font-size: 9.5px; font-weight: 700; padding: 1px 5px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: 0.3px;
}
.drv-badge.ok { background: var(--success); color: #fff; }
.drv-badge.skip { background: #d97706; color: #fff; }
/* Driver name pill at the top of each stop */
.drv-driver-pill {
  font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  background: #1f3a5f; color: #fff; white-space: nowrap;
}
/* PDF + delete grouped at the right edge of the top row */
.jc-top-actions { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; }
.jc-pdf {
  font-size: 14px; line-height: 1; text-decoration: none; padding: 0 2px;
  opacity: 0.75; cursor: pointer;
}
.jc-pdf:hover { opacity: 1; }
.drv-card-del button {
  background: transparent; border: none; color: #b91c1c; font-size: 15px;
  line-height: 1; cursor: pointer; padding: 0 2px;
}
.drv-card-del button:hover { color: #7f1d1d; }
.drv-stop-card .jc-body { margin-top: 4px; }
.drv-phone-row { font-weight: 600; color: var(--ink); }

/* ===== Enter PDFs modal ===== */
.drv-modal {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(15, 23, 42, 0.55);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 16px; overflow-y: auto;
}
.drv-modal-box {
  background: #fff; border-radius: 14px; width: 100%; max-width: 560px;
  padding: 18px 20px 22px; box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.drv-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.drv-modal-head h2 { margin: 0; font-size: 18px; }
.drv-modal-close {
  background: transparent; border: none; font-size: 26px; line-height: 1;
  cursor: pointer; color: var(--muted); padding: 0 4px;
}
.drv-modal-close:hover { color: var(--ink); }
.drv-import-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.drv-import-daylabel select { padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; font-family: inherit; }

/* "Best order" route optimizer */
.drv-best-order {
  margin-top: 6px; width: 100%;
  background: #eef2ff; color: #3730a3; border: 1px solid #c7d2fe;
  border-radius: 6px; padding: 3px 6px; font-size: 11px; font-weight: 700;
  cursor: pointer; line-height: 1.3;
}
.drv-best-order:hover { background: #e0e7ff; }
/* "Routing" button — sits under "Best order"; warm amber to set it apart. */
.drv-routing {
  margin-top: 4px; width: 100%;
  background: #fff7ed; color: #9a3412; border: 1px solid #fed7aa;
  border-radius: 6px; padding: 3px 6px; font-size: 11px; font-weight: 700;
  cursor: pointer; line-height: 1.3;
}
.drv-routing:hover { background: #ffedd5; }
/* Quantity column on the job lists — narrow, centered, no wrapping. */
.qty-col { text-align: center; white-space: nowrap; width: 48px; }

/* Fab-status mini pill shown on job cards across the dashboards */
.fab-mini-pill { display: inline-block; font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 999px; }
.fab-mini-pill.fmp-not_started { background: #e2e8f0; color: #475569; }
.fab-mini-pill.fmp-in_fab { background: #dbeafe; color: #1e40af; }
.fab-mini-pill.fmp-in_paint { background: #ede9fe; color: #6d28d9; }
.fab-mini-pill.fmp-ready { background: #dcfce7; color: #15803d; }

/* Committed delivery date/window callout */
.cc-row.drv-commit { color: #b45309; font-weight: 700; font-size: 12px; }
.drv-app-commit { color: #b45309; font-weight: 700; margin-top: 4px; }
.cc-row.drv-orders { color: #0d9488; font-weight: 700; font-size: 12px; }
.drv-opt-body { font-size: 14px; }
/* Start/End yard chooser at the top of the Best-order popup. */
.drv-yard-pick { display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 8px 12px; margin-bottom: 12px; }
.drv-yard-pick label { font-size: 13px; font-weight: 600; color: #334155; display: inline-flex; align-items: center; gap: 6px; }
.drv-yard-pick select { font-family: inherit; font-size: 13px; padding: 4px 8px; border: 1px solid #cbd5e1; border-radius: 6px; background: #fff; }
.drv-opt-status { padding: 10px 2px; color: var(--muted); }
.drv-opt-status.error { color: var(--danger); font-weight: 600; }
.drv-opt-summary { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 8px; padding: 10px 12px; margin-bottom: 12px; }
.drv-opt-summary.good { background: #eff6ff; border-color: #bfdbfe; }
.drv-opt-sub { color: var(--muted); font-size: 13px; }
.drv-opt-cols { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.drv-opt-col { flex: 1; min-width: 220px; }
.drv-opt-col h3 { margin: 0 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.4px; color: #334155; }
.drv-opt-col-muted { opacity: 0.7; }
.drv-opt-list { list-style: none; margin: 0; padding: 0; }
.drv-opt-list li { display: flex; align-items: baseline; gap: 8px; padding: 5px 0; border-bottom: 1px solid #f1f5f9; }
.drv-opt-n {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  background: #4f46e5; color: #fff; font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.drv-opt-col-muted .drv-opt-n { background: #94a3b8; }
.drv-opt-name { font-weight: 600; }
.drv-opt-addr { color: var(--muted); font-size: 12px; }
/* New/Edit Job: the Style + footage fields that appear only for job types
   (like Tree Guards) that ask for a style. Grouped in a subtle box. */
.nj-style-fields { background: #f0f9ff; border: 1px solid #bae6fd; border-radius: 8px; padding: 10px 12px; margin-bottom: 12px; }
.nj-style-fields > label { margin-bottom: 8px; }
.nj-style-fields > label:last-child { margin-bottom: 0; }
/* Settings: the small inline "Asks for a style?" toggle on the job-types table. */
.toggle-inline { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 13px; }
.toggle-inline input { width: auto; margin: 0; }

/* Multi-driver day: a separate route block per driver. */
.drv-opt-multi-note { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; border-radius: 8px; padding: 8px 12px; margin-bottom: 12px; font-size: 13px; font-weight: 600; }
.drv-opt-route { border: 1px solid #e2e8f0; border-radius: 10px; padding: 12px; margin-bottom: 14px; }
.drv-opt-driverhead { margin-bottom: 8px; }

/* =====================================================================
   DRIVER PHONE APP (/d) — big, simple, mobile-first
   ===================================================================== */
body.driver-app { background: #f1f5f9; }
body.driver-app .container { max-width: 640px; padding: 12px; }

/* Login: tap your name */
.drv-app-login { text-align: center; }
.drv-app-pick { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.drv-app-pick-btn {
  display: block; width: 100%; padding: 18px; font-size: 20px; font-weight: 800;
  border: 2px solid #1f3a5f; border-radius: 14px; background: #1f3a5f; color: #fff;
  cursor: pointer; font-family: inherit;
}
.drv-app-pick-btn:active { transform: scale(0.99); }

/* Top bar */
.drv-app-bar {
  display: flex; align-items: center; justify-content: space-between;
  background: #1f3a5f; color: #fff; border-radius: 14px; padding: 14px 16px; margin-bottom: 14px;
}
.drv-app-hello { font-size: 20px; font-weight: 800; }
.drv-app-sub { font-size: 13px; opacity: 0.85; margin-top: 2px; }
.drv-app-signout {
  background: rgba(255,255,255,0.15); color: #fff; border: 1px solid rgba(255,255,255,0.4);
  border-radius: 8px; padding: 8px 12px; font-size: 14px; cursor: pointer; font-family: inherit;
}
.drv-app-empty { text-align: center; color: var(--muted); font-size: 18px; margin-top: 40px; line-height: 1.5; }

/* Stop list */
.drv-app-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.drv-app-card {
  position: relative; display: block; background: #fff; border: 1px solid var(--line);
  border-left: 6px solid #1f3a5f; border-radius: 14px; padding: 14px 36px 14px 14px;
  text-decoration: none; color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.drv-app-card.status-delivered { border-left-color: var(--success); background: #f0fdf4; }
.drv-app-card.status-skipped { border-left-color: #d97706; background: #fffbeb; }
.drv-app-card-top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.drv-app-num { font-size: 12px; font-weight: 800; text-transform: uppercase; color: var(--muted); letter-spacing: 0.4px; }
.drv-app-badge { font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; }
.drv-app-badge.ok { background: var(--success); color: #fff; }
.drv-app-badge.skip { background: #d97706; color: #fff; }
.drv-app-name { font-size: 19px; font-weight: 800; line-height: 1.2; }
.drv-app-name.big { font-size: 24px; }
.drv-app-addr { font-size: 16px; color: #334155; margin-top: 3px; }
.drv-app-phone { font-size: 16px; font-weight: 700; color: #1f3a5f; margin-top: 3px; }
.drv-app-go { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 28px; color: #cbd5e1; }

/* Stop detail */
.drv-app-back { display: inline-block; margin-bottom: 12px; font-size: 16px; color: #1f3a5f; text-decoration: none; font-weight: 700; }
.drv-app-detail { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px; margin-bottom: 16px; }
.drv-app-addr-link { display: block; font-size: 17px; color: #1d4ed8; margin-top: 4px; text-decoration: underline; }
.drv-app-site { font-size: 15px; color: var(--muted); margin-top: 6px; }
.drv-app-call { display: inline-block; margin-top: 10px; font-size: 18px; font-weight: 800; color: #fff; background: #16a34a; padding: 10px 16px; border-radius: 10px; text-decoration: none; }
.drv-app-status-done { margin-top: 12px; font-size: 16px; font-weight: 800; padding: 8px 12px; border-radius: 10px; }
.drv-app-status-done.ok { background: #dcfce7; color: #166534; }
.drv-app-status-done.skip { background: #fef3c7; color: #92400e; }
.drv-app-photos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.drv-app-photos img { width: 80px; height: 80px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }

/* Action cards */
.drv-app-action { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px; margin-bottom: 16px; }
.drv-app-action.ok { border-top: 5px solid var(--success); }
.drv-app-action.danger { border-top: 5px solid #d97706; }
.drv-app-action h2 { margin: 0 0 4px; font-size: 18px; }
.drv-app-field { display: block; font-size: 15px; font-weight: 700; margin-bottom: 12px; }
.drv-app-field select { display: block; width: 100%; margin-top: 6px; padding: 12px; font-size: 16px; border: 1px solid var(--line); border-radius: 10px; font-family: inherit; }
.drv-app-camera { display: block; margin: 12px 0; }
.drv-app-camera input[type="file"] { display: block; width: 100%; font-size: 15px; }
.drv-app-camera-face { display: inline-block; margin-bottom: 6px; font-size: 16px; font-weight: 700; color: #1f3a5f; }
.drv-app-done, .drv-app-close {
  display: block; width: 100%; padding: 16px; font-size: 18px; font-weight: 800;
  border: none; border-radius: 12px; cursor: pointer; font-family: inherit; color: #fff;
}
.drv-app-done { background: #16a34a; }
.drv-app-done:disabled { background: #86efac; }
.drv-app-close { background: #d97706; }
.drv-app-close:disabled { background: #fcd34d; }

.drv-skip-reason { font-size: 11px; font-weight: 700; color: #92400e; margin-top: 2px; }

/* Driver app: take-photo-first flow */
.drv-app-camera-btn {
  display: block; width: 100%; padding: 16px; font-size: 18px; font-weight: 800;
  border: 2px dashed #1f3a5f; border-radius: 12px; background: #eef2ff; color: #1f3a5f;
  cursor: pointer; font-family: inherit;
}
.drv-app-camera-btn:active { transform: scale(0.99); }
.drv-app-previews { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.drv-app-thumb { position: relative; }
.drv-app-thumb img { width: 84px; height: 84px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); display: block; }
.drv-app-thumb-x {
  position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; border-radius: 50%;
  background: #b91c1c; color: #fff; border: 2px solid #fff; font-size: 15px; line-height: 1;
  cursor: pointer; padding: 0;
}
.drv-app-savemsg { text-align: center; font-weight: 700; color: #1f3a5f; padding: 8px; }

/* 🚦 Live drive-time bubble on the schedule */
.jc-eta { cursor: pointer; font-size: 13px; line-height: 1; margin-left: 2px; user-select: none; }
.jc-eta:hover { filter: brightness(1.1); }
.eta-bubble {
  position: absolute; z-index: 1200; max-width: 240px;
  background: #1f2937; color: #fff; font-size: 12.5px; line-height: 1.35;
  padding: 8px 10px; border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,0.28);
  border-left: 4px solid #94a3b8; pointer-events: none;
}
.eta-bubble .eta-sub { color: #cbd5e1; font-size: 11px; }
.eta-bubble strong { font-size: 14px; }
.eta-bubble.eta-green { border-left-color: #16a34a; }
.eta-bubble.eta-yellow { border-left-color: #f59e0b; }
.eta-bubble.eta-red { border-left-color: #dc2626; }

/* Edit stop (office board) */
.jc-edit {
  background: transparent; border: none; cursor: pointer; padding: 0 2px;
  font-size: 13px; line-height: 1; color: #475569;
}
.jc-edit:hover { color: #1f3a5f; }
.drv-edit-form { display: flex; flex-direction: column; gap: 10px; }
.drv-edit-label { display: flex; flex-direction: column; font-size: 13px; font-weight: 700; color: #334155; gap: 4px; }
.drv-edit-label input, .drv-edit-label select {
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-family: inherit; font-size: 14px; font-weight: 400;
}
.drv-edit-delform { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.drv-edit-del {
  background: transparent; border: 1px solid #fca5a5; color: #b91c1c;
  padding: 8px 14px; border-radius: 8px; cursor: pointer; font-family: inherit; font-weight: 700;
}
.drv-edit-del:hover { background: #fef2f2; }

/* Driver card top bar: a bit taller with slightly larger, clearer icons */
.drv-stop-card .jc-top { padding: 4px 2px; min-height: 28px; gap: 6px; }
.drv-stop-card .jc-pdf { font-size: 18px; opacity: 1; }
.drv-stop-card .jc-edit { font-size: 16px; }
.drv-stop-card .drv-card-del button { font-size: 18px; }
/* Crisp, dark PDF icon (the emoji was too faint to see) */
.jc-pdf-doc { display: inline-flex; align-items: center; color: #1f3a5f; }
.jc-pdf-doc svg { width: 18px; height: 18px; display: block; }
.jc-pdf-doc:hover { color: #0d2440; }

/* Bigger, lower drive-time bubble (cursor shouldn't cover the text) */
.eta-bubble { font-size: 14px; padding: 10px 12px; max-width: 270px; }
.eta-bubble strong { font-size: 16px; }
.eta-bubble .eta-sub { font-size: 12.5px; }

/* Traffic light icon ~25% bigger, and the "back to the yard" row */
.jc-eta { font-size: 16px; padding: 0 2px; }
.jc-return-row {
  display: flex; align-items: center; justify-content: flex-end; gap: 4px;
  padding: 3px 6px 2px; margin-top: 2px; border-top: 1px dashed var(--line);
}
.jc-return-lbl { font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.3px; }
.jc-eta-return { line-height: 1; }

/* Collapsible Settings sections */
.card-toggle { cursor: pointer; user-select: none; display: flex; align-items: center; gap: 8px; }
.card-toggle:hover { color: #1f3a5f; }
.card-arrow { font-size: 13px; color: #64748b; width: 14px; display: inline-block; }
.card-collapse { margin-top: 10px; }

/* Email test-mode block */
.email-testmode { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; }
.email-testmode h3 { margin: 0 0 4px; font-size: 15px; }
.email-testmode.is-on { background: #fffbeb; border: 1px solid #fcd34d; border-radius: 10px; padding: 12px 14px; }
.email-testmode form { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.email-testmode-state { font-size: 13px; color: var(--muted); }
.email-testmode .danger { background: #d97706; border-color: #d97706; color: #fff; }

/* Bigger collapse arrow (2x) */
.card-arrow { font-size: 26px; width: auto; line-height: 1; }

/* ===== New Job page: tighter so it fits on one screen ===== */
body.new-job-page main.container { max-width: 1060px; padding-top: 8px; padding-bottom: 8px; }
body.new-job-page h1 { font-size: 18px; margin-bottom: 6px; }
.new-job-page .nj-form { padding: 12px 14px; }
.new-job-page .nj-top-uploads { gap: 10px; margin-bottom: 10px; }
.new-job-page .nj-upload-card { padding: 9px 11px; }
.new-job-page .nj-upload-h { font-size: 12px; margin-bottom: 2px; }
.new-job-page .nj-upload-card > p.muted { margin: 0 0 5px !important; font-size: 11.5px; }
.new-job-page .invoice-drop, .new-job-page .office-photo-drop { padding: 9px 12px; margin: 5px 0; }
.new-job-page .invoice-drop-icon, .new-job-page .office-photo-drop-icon { font-size: 17px; }
.new-job-page .invoice-drop-title, .new-job-page .office-photo-drop-title { font-size: 13px; margin-top: 1px; }
.new-job-page .invoice-drop-sub, .new-job-page .office-photo-drop-sub { font-size: 11px; margin-top: 1px; }
.new-job-page .office-photo-phase-row { margin-bottom: 4px !important; }
.new-job-page .nj-grid { gap: 8px 18px; }
.new-job-page .nj-left, .new-job-page .nj-right { gap: 7px; }
.new-job-page .nj-grid input, .new-job-page .nj-grid select, .new-job-page .nj-grid textarea { padding: 5px 8px; font-size: 13.5px; }
.new-job-page .nj-left input, .new-job-page .nj-left select { max-width: 470px; }
.new-job-page .nj-notes textarea { min-height: 64px; }
.new-job-page .past-customer-row { margin-bottom: 2px; }
.new-job-page .accounting-section { margin-top: 8px; padding-top: 8px; }
.new-job-page .accounting-section-title { font-size: 13px; margin: 0 0 6px; }
.new-job-page .nj-footer { margin-top: 10px; padding-top: 8px; }
.new-job-page .nj-save { min-width: 160px; padding: 8px 20px; font-size: 14px; }

/* "Mark as invoice" control + badge (New Job list and Job detail) */
.invoice-tag {
  display: inline-block; margin-left: 6px; font-size: 9.5px; font-weight: 800;
  background: #16a34a; color: #fff; padding: 1px 6px; border-radius: 999px;
  letter-spacing: 0.4px; vertical-align: middle;
}
.invoice-file-mark, .invoice-mark-btn {
  font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 6px;
  border: 1px solid #16a34a; background: #fff; color: #16a34a; cursor: pointer; font-family: inherit;
}
.invoice-file-mark:hover, .invoice-mark-btn:hover { background: #f0fdf4; }
.invoice-file-mark.on, .invoice-mark-btn.on { background: #16a34a; color: #fff; }
.invoice-file-row.is-invoice, .attachment-row.is-invoice { background: #f0fdf4; border-radius: 6px; }

/* Two side-by-side notes boxes (Job notes / Installer notes), not too wide */
.nj-notes-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin-top: 6px; max-width: 920px;
}
.nj-notes-row .nj-notes { display: flex; flex-direction: column; font-size: 13px; }
.nj-notes-row .nj-notes textarea {
  margin-top: 4px; width: 100%; min-height: 90px; resize: vertical;
  padding: 6px 9px; font-size: 13.5px;
}
@media (max-width: 760px) {
  .nj-notes-row { grid-template-columns: 1fr; }
}

/* Compact accounting row tucked under On-site contact */
.nj-acct-row { align-items: flex-end; }
.nj-acct-status { display: flex; flex-direction: column; gap: 4px; }
.nj-acct-label { font-size: 13px; font-weight: 600; color: var(--ink); }
.nj-acct-row .accounting-payment-row { display: flex; gap: 14px; align-items: center; padding-bottom: 4px; }
.nj-acct-row .accounting-pay-pick { display: flex; align-items: center; gap: 5px; font-size: 13.5px; white-space: nowrap; }
.new-job-page .nj-acct-row input[type="email"] { max-width: 320px; }

/* Keep Payment status right next to the Payable email box (not floating right) */
.nj-acct-row { gap: 16px; }
.new-job-page .nj-acct-row .nj-w-customer { flex: 0 0 320px; max-width: 320px; }

/* Street + "Call customer" box side by side */
.new-job-page .nj-w-street { flex: 0 0 300px; max-width: 300px; }
.nj-call-box {
  display: flex; align-items: center; gap: 8px; align-self: flex-end;
  border: 1px solid #cbd5e1; border-radius: 8px; padding: 7px 12px;
  font-size: 13.5px; font-weight: 600; color: #1f3a5f; cursor: pointer; background: #fff;
}
.nj-call-box input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }
.nj-call-box:hover { border-color: #1f3a5f; }
.nj-call-box:has(input:checked) { background: #fff7ed; border-color: #f59e0b; color: #92400e; }

/* Center the email box and payment status against each other (was bottom-aligned) */
.nj-acct-row { align-items: center; }
.nj-acct-row .accounting-payment-row { padding-bottom: 0; }
.nj-acct-row .nj-acct-status { padding-top: 14px; }

/* Notes boxes: fill the full width evenly and sit a little higher */
.nj-notes-row { max-width: none; margin-top: 0; }
.new-job-page .nj-grid { margin-bottom: 2px; }

/* Balance the two top upload cards so the drop boxes line up evenly */
.new-job-page .nj-upload-card { display: flex; flex-direction: column; }
.new-job-page .nj-upload-desc {
  margin: 0 0 8px !important;
  min-height: 32px;          /* reserve 2 lines so 1- and 2-line cards match */
}
.new-job-page .nj-upload-card .invoice-drop,
.new-job-page .nj-upload-card .office-photo-drop {
  flex: 1 1 auto;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 120px;
}
.new-job-page .nj-upload-card .invoice-file-list { margin-top: 8px; }

/* Keep calendar day headers on ONE line so the blue bars stay equal height */
.cal-date-row { flex-wrap: nowrap; gap: 4px; min-width: 0; }
.cal-date { white-space: nowrap; flex: 0 1 auto; font-size: 13px; overflow: hidden; text-overflow: ellipsis; }
.cal-nowork-btn { flex: 0 0 auto; }
.cal-weather { flex: 0 0 auto; gap: 3px; }
.cal-weather-icon { font-size: 16px; }
.cal-weather-temp { font-size: 11px; }
.cal-weather-rain { font-size: 10.5px; }

/* Needs-call + Lock cards side by side (not stacked, no taller) */
.lock-needs-row { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.lock-needs-row > .card { flex: 1 1 320px; margin: 0; }
@media (max-width: 700px) { .lock-needs-row > .card { flex: 1 1 100%; } }

/* Uniform needs-call / lock boxes: equal height, content vertically centered */
.lock-needs-row { align-items: stretch; }
.lock-needs-row > .card { display: flex; flex-direction: column; }
.lock-needs-row > .card > .needs-call-row,
.lock-needs-row > .card > .lock-card-row { flex: 1; align-items: center; }
.lock-needs-row .needs-call-left,
.lock-needs-row .lock-card-left { align-items: center; }
.lock-needs-row .needs-call-actions,
.lock-needs-row .lock-card-actions { display: flex; align-items: center; }

/* Tappable address -> Google Maps on the crew job screen */
.ij-map-link { color: #1d4ed8; text-decoration: underline; font-weight: 600; }
.ij-map-link:active { opacity: 0.7; }


/* Inline box edit on the job page */
.card-head-row { display: flex; align-items: center; justify-content: space-between; }
.card-head-row h2 { margin: 0; }
.box-edit-btn {
  font-size: 12.5px; font-weight: 700; padding: 4px 10px; border-radius: 6px;
  border: 1px solid #cbd5e1; background: #fff; color: #1f3a5f; cursor: pointer;
}
.box-edit-btn:hover { background: #f1f5f9; border-color: #1f3a5f; }
.box-edit-form { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.box-edit-form label { display: flex; flex-direction: column; font-size: 13px; font-weight: 600; gap: 3px; }
.box-edit-form input, .box-edit-form select, .box-edit-form textarea {
  padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; font-family: inherit; font-size: 14px; font-weight: 400;
}
.box-edit-row { display: flex; gap: 8px; }
.box-edit-row label:nth-child(1) { flex: 1 1 auto; }
.box-edit-row label:nth-child(2) { flex: 0 0 70px; }
.box-edit-row label:nth-child(3) { flex: 0 0 90px; }
.box-edit-actions { display: flex; align-items: center; gap: 12px; margin-top: 4px; }

/* Make multi-day convert in the schedule box */
.md-convert { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; }
.md-convert summary { cursor: pointer; font-weight: 700; color: #1f3a5f; font-size: 14px; }
.md-convert form { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }

/* Tighter inline job-box edit form */
.box-edit-form { gap: 5px; margin-top: 8px; }
.box-edit-form label { font-size: 12px; gap: 2px; }
.box-edit-form input, .box-edit-form select, .box-edit-form textarea { padding: 4px 7px; font-size: 13px; }
.box-edit-form textarea { min-height: 34px; }
.box-edit-form h3 { margin: 2px 0 0; }
.box-edit-actions { margin-top: 3px; }
/* Even split by default; address row keeps fixed state/zip widths */
.box-edit-row { gap: 6px; }
.box-edit-row > label { flex: 1 1 0; }
.box-edit-row-addr > label:nth-child(1) { flex: 1 1 auto; }
.box-edit-row-addr > label:nth-child(2) { flex: 0 0 62px; }
.box-edit-row-addr > label:nth-child(3) { flex: 0 0 78px; }

/* Non-address pair rows (Invoice/Customer, On-site/Phone) split evenly */
.box-edit-row:not(.box-edit-row-addr) > label:nth-child(1),
.box-edit-row:not(.box-edit-row-addr) > label:nth-child(2) { flex: 1 1 0 !important; }

/* Add-another-day form on the multi-day parent card */
.md-add-day { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.md-add-day h3 { margin: 0 0 6px; font-size: 14px; }
.md-add-day label { display: flex; flex-direction: column; gap: 3px; font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.md-add-day input { padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; }

.visit-link.is-current { outline: 2px solid #6366f1; border-radius: 6px; }

/* Multi-day DAY badge uses the multi-day color (not the ongoing purple) */
.visit-card-badge.md-day { background: #6366f1; }

/* Secondary "extra photos" camera button at the bottom of the actions list */
.extra-photo-form { margin-top: 14px; }
.camera-btn.camera-btn-extra {
  background: #f1f5f9; color: #475569; border: 1px solid #cbd5e1;
}
.camera-btn.camera-btn-extra:hover { background: #e2e8f0; }

/* Big camera icon that doesn't grow the button height */
.camera-btn .cam-ico {
  font-size: 2.6em;
  line-height: 0;
  vertical-align: -0.45em;
  margin-right: 6px;
}

/* Destructive job actions grouped on their own row at the bottom */
/* Keep the Actions buttons in a tidy column so they stack into 3 lines:
   Mark complete + Create site visit + Mark as Ongoing /
   Install issue + reason /
   Put on hold + Reset + Delete. */
.action-row-compact {
  max-width: 480px;
  align-items: flex-start;
}

/* Buttons on the left, Payment status panel filling the space on the right. */
.actions-split {
  display: flex;
  gap: 28px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.actions-split > .action-row-compact { flex: 0 1 480px; margin: 0; }
.payment-status-panel {
  flex: 1 1 240px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: flex-start;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f9fafb;
}
.payment-status-panel .ps-label {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}
.payment-status-panel .ps-pills { gap: 26px; padding-top: 0; }
.payment-status-panel .accounting-pay-pick { font-size: 15px; font-weight: 600; }
.payment-status-panel .ps-form { display: flex; gap: 26px; align-items: center; }
.payment-status-panel .ps-note { line-height: 1.35; }

/* Billing email shown under the radios; add/edit inline. */
.ps-email { display: flex; flex-direction: column; gap: 4px; margin-top: 2px; }
.ps-email-label { font-size: 12.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.ps-email-edit summary { list-style: none; cursor: pointer; }
.ps-email-edit summary::-webkit-details-marker { display: none; }
.ps-email-shown { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--ink); font-weight: 600; }
.ps-email-shown .ps-email-text { word-break: break-all; }
.ps-email-pencil { color: var(--muted); font-size: 13px; }
.ps-email-add {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  color: #2563eb;
  border: 1px dashed #93c5fd;
  border-radius: 8px;
  padding: 5px 12px;
  background: #eff6ff;
}
.ps-email-add:hover { background: #dbeafe; }
.ps-email-form { display: flex; gap: 8px; margin-top: 8px; align-items: center; flex-wrap: wrap; }
.ps-email-form input {
  flex: 1 1 180px;
  min-width: 160px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 14px;
}
.ps-email-form button { padding: 7px 14px; }
.action-danger-group {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

/* "Mark install issue" button + its reason dropdown sit side by side. */
.install-issue-form {
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.install-issue-reason {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  background: #fff;
  font-size: 0.95em;
  color: #374151;
}

/* Install-issue expanding panel (office "Mark install issue"). */
.install-issue-details { display: inline-block; }
.install-issue-summary {
  display: inline-block;
  cursor: pointer;
  list-style: none;
  padding: 8px 14px;
  border-radius: 8px;
  background: #dc2626;
  color: #fff;
  font-weight: 600;
  border: 1px solid #dc2626;
}
.install-issue-summary::-webkit-details-marker { display: none; }
.install-issue-details[open] .install-issue-summary { border-radius: 8px 8px 0 0; }
.install-issue-panel {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 360px;
  padding: 14px;
  border: 1px solid #f1c0c0;
  border-top: none;
  border-radius: 0 8px 8px 8px;
  background: #fff5f5;
  margin-top: -1px;
}
.install-issue-panel .ii-label {
  font-weight: 600;
  font-size: 0.9em;
  color: #7f1d1d;
  margin-top: 4px;
}
.install-issue-panel .ii-req { color: #dc2626; }
.install-issue-panel .ii-opt { font-weight: 400; color: #9ca3af; }
.install-issue-note {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 0.95em;
  font-family: inherit;
  resize: vertical;
}
.install-issue-panel button { margin-top: 6px; align-self: flex-start; }

/* Stack the lock + needs-call boxes: Lock job on top, needs-call directly
   under it (column-reverse keeps the HTML order but flips the display). */
.lock-needs-row { flex-direction: column-reverse; flex-wrap: nowrap; }
.lock-needs-row > .card { flex: 0 0 auto; width: 100%; }

/* Keep the stacked lock + needs-call boxes at their original width and pushed
   to the right, leaving room on the left for other content. */
.lock-needs-row { width: 100%; max-width: 100%; margin-left: auto; }
/* Commitment date box sits above the lock/needs boxes in the right column. */
.commit-card { width: 100%; margin-bottom: 14px; border-color: #c4b5fd; background: #f5f3ff; }
.commit-row { display: flex; gap: 12px; align-items: flex-start; }
.commit-icon { font-size: 22px; line-height: 1; }
.commit-title { font-weight: 700; }
.commit-form { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.commit-form input[type="date"] { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; }
.commit-clear { background: none; border: none; color: var(--danger); cursor: pointer; font-size: 13px; }
.commit-has { margin-top: 6px; font-weight: 700; color: #6d28d9; }

/* "Make this a multi-day install" — thin colored box so it stands out */
details.md-convert {
  border: 1px solid #6366f1;
  border-radius: 8px;
  padding: 9px 12px;
  margin-top: 14px;
  background: #eef2ff;
}
details.md-convert > summary { color: #4338ca; }

/* Actions card sits to the left of the lock/needs-call column */
.job-lower-row { display: flex; gap: 18px; align-items: flex-start; }
.job-lower-main { flex: 1 1 auto; min-width: 0; }
.job-lower-side { flex: 0 0 400px; max-width: 400px; }
@media (max-width: 900px) {
  .job-lower-row { flex-direction: column; }
  .job-lower-side { flex: 1 1 auto; max-width: 100%; width: 100%; }
}

/* Call / email notes — compact button + popup (Unpaid list). */
.notes-open-btn {
  padding: 5px 10px; font-size: 12px; font-weight: 600;
  border: 1px solid #cbd5e1; border-radius: 6px; background: #fff;
  color: #475569; cursor: pointer; white-space: nowrap;
}
.notes-open-btn:hover { background: #f1f5f9; }
.notes-open-btn.has-notes { background: #eff6ff; border-color: #93c5fd; color: #1d4ed8; }
.notes-modal-overlay {
  position: fixed; inset: 0; background: rgba(15,23,42,.45);
  display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 16px;
}
.notes-modal {
  background: #fff; border-radius: 12px; width: 100%; max-width: 480px;
  max-height: 80vh; display: flex; flex-direction: column; box-shadow: 0 18px 50px rgba(0,0,0,.3);
}
.notes-modal-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid #e5e7eb;
}
.notes-modal-title { font-size: 15px; font-weight: 700; color: #1f3a5f; }
.notes-modal-sub { font-size: 12px; color: #64748b; margin-top: 2px; }
.notes-modal-x { background: none; border: none; font-size: 24px; line-height: 1; color: #94a3b8; cursor: pointer; padding: 0 4px; }
.notes-modal-x:hover { color: #475569; }
.notes-modal-list { list-style: none; margin: 0; padding: 10px 16px; overflow-y: auto; flex: 1 1 auto; }
.notes-modal-empty { color: #94a3b8; font-size: 13px; padding: 14px 2px; }
.notes-modal-item {
  position: relative; padding: 8px 30px 8px 10px; margin-bottom: 8px;
  background: #f8fafc; border: 1px solid #eef2f7; border-radius: 8px;
}
.notes-modal-when { font-size: 11px; color: #64748b; margin-bottom: 2px; }
.notes-modal-text { font-size: 14px; color: #1a2330; white-space: pre-wrap; word-break: break-word; }
.notes-modal-del {
  position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; padding: 0;
  border: 1px solid #fca5a5; background: #fff; color: #dc2626; border-radius: 5px;
  font-size: 14px; line-height: 1; cursor: pointer;
}
.notes-modal-del:hover { background: #fef2f2; }
.notes-modal-add { padding: 12px 16px; border-top: 1px solid #e5e7eb; }
.notes-modal-add input {
  width: 100%; padding: 9px 11px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 14px;
}

/* Job detail page — New-Job-style two-column main area. Wraps existing cards
   without imposing form-field styling on them (unlike .nj-grid). */
.jd-main {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 18px;
  align-items: start;
  margin-bottom: 18px;
}
.jd-main .jd-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.jd-actions-full { margin-bottom: 18px; }
@media (max-width: 960px) {
  .jd-main { grid-template-columns: 1fr; }
}

/* ---- Driver stop editor: schedule/lock fieldset, photo & PDF chips ---- */
.drv-edit-fieldset {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px 12px;
  margin: 10px 0 0;
}
.drv-edit-fieldset > legend {
  font-size: 12px;
  font-weight: 800;
  color: #475569;
  padding: 0 6px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.drv-edit-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 8px;
  font-size: 13px;
  cursor: pointer;
}
.drv-edit-check input { margin-top: 2px; }
.drv-edit-files {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}
.drv-edit-file {
  position: relative;
  display: inline-flex;
  align-items: center;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #f8fafc;
  overflow: hidden;
}
.drv-edit-file.is-img img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  display: block;
}
.drv-edit-file.is-doc a {
  padding: 6px 22px 6px 8px;
  font-size: 12px;
  color: #1e3a8a;
  text-decoration: none;
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.drv-edit-file-del {
  position: absolute;
  top: 1px;
  right: 1px;
  width: 18px;
  height: 18px;
  line-height: 16px;
  text-align: center;
  border: none;
  border-radius: 4px;
  background: rgba(15, 23, 42, 0.75);
  color: #fff;
  font-size: 13px;
  cursor: pointer;
  padding: 0;
}
.drv-edit-file-del:hover { background: #b91c1c; }
/* Small count badge on the card's photo icon when there's more than one. */
.jc-file-count {
  font-size: 9px;
  font-weight: 800;
  vertical-align: super;
  margin-left: 1px;
}
.drv-locked-line { color: #92400e; font-weight: 700; }

/* ---- Wide, single-page Edit-stop modal -------------------------------
   The editor has a lot of fields; give it a wide box and lay them out in a
   grid (3 fields per row, the three fieldsets side-by-side) so nothing needs
   scrolling. Scoped to #drvEditModal so the other driver modals are unchanged. */
#drvEditModal .drv-modal { align-items: center; }
#drvEditModal .drv-modal-box {
  max-width: 1040px;
  max-height: 92vh;
  overflow-y: auto;
}
#drvEditForm {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px 18px;
  align-items: start;
}
/* Top single fields: 2 of 6 columns each → three across a row. A hidden
   (display:none) Reason field is removed from the grid, so it leaves no gap. */
#drvEditForm > .drv-edit-label { grid-column: span 2; }
/* The three fieldsets sit in their own row, side by side. */
#drvEditForm > .drv-edit-fieldset {
  grid-column: span 2;
  margin: 0;
  display: grid;
  gap: 8px;
  align-content: start;
}
#drvEditForm > .drv-import-actions { grid-column: 1 / -1; margin-top: 2px; }
@media (max-width: 880px) {
  #drvEditForm { grid-template-columns: repeat(2, 1fr); }
  #drvEditForm > .drv-edit-label,
  #drvEditForm > .drv-edit-fieldset { grid-column: span 1; }
}

/* ---- Drag-and-drop zones inside the Edit-stop modal (Photos / PDFs) ---- */
.drv-edit-drop {
  border: 2px dashed #94a3b8;
  border-radius: 10px;
  background: #f8fafc;
  padding: 12px;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.drv-edit-drop:hover { border-color: #64748b; }
.drv-edit-drop.drag-over { background: #ccfbf1; border-color: #0f766e; }
.drv-edit-drop-title { font-weight: 700; font-size: 13px; color: #334155; }
.drv-edit-drop-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
.drv-edit-droplist { list-style: none; margin: 8px 0 0; padding: 0; text-align: left; display: flex; flex-direction: column; gap: 4px; }
.drv-edit-dropitem {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 6px;
  padding: 3px 4px 3px 8px; font-size: 12px;
}
.drv-edit-dropitem span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drv-edit-dropitem-del {
  flex: none; border: none; background: #e2e8f0; color: #475569;
  width: 18px; height: 18px; border-radius: 4px; cursor: pointer; font-size: 13px; line-height: 16px; padding: 0;
}
.drv-edit-dropitem-del:hover { background: #fecaca; color: #b91c1c; }