:root {
  --bg: #f3f6f9;
  --card: #ffffff;
  --ink: #17212b;
  --muted: #64748b;
  --line: #dde4ec;
  --brand: #0b6fb8;
  --brand-dark: #08528a;
  --brand-soft: #e3f0fa;
  --ok: #15803d;
  --warn: #b45309;
  --danger: #b91c1c;
  --water: #0b6fb8;
  --mold: #4d7c0f;
  --fire: #c2410c;
  --radius: 10px;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.45;
}
a { color: var(--brand); }
h1 { font-size: 1.5rem; margin: 0; }
h2 { font-size: 1.15rem; margin: 0 0 12px; }
h3 { font-size: 1rem; margin: 0 0 8px; }
.muted { color: var(--muted); }
.small { font-size: 0.85rem; }
.pad { padding: 16px; }

/* Top bar */
.topbar {
  background: var(--brand-dark);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 20px;
  position: sticky;
  top: 0;
  z-index: 10;
}
.brand { font-weight: 700; font-size: 1.1rem; white-space: nowrap; padding: 14px 0; }
#nav { display: flex; gap: 4px; overflow-x: auto; }
#nav a {
  color: #d6e7f5;
  text-decoration: none;
  padding: 14px 12px;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
}
#nav a.active { color: #fff; border-bottom-color: #7cc4f5; font-weight: 600; }

main { max-width: 1400px; margin: 0 auto; padding: 20px; }

.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 16px;
}

/* Buttons */
.btn {
  font: inherit;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  border-radius: 8px;
  padding: 9px 14px;
  cursor: pointer;
  min-height: 40px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn[hidden] { display: none; }   /* a hidden button stays hidden (.btn sets display) */
.btn:hover { background: #f6f8fa; }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.btn.primary:hover { background: var(--brand-dark); }
.btn.ghost { background: transparent; }
.btn.danger { color: var(--danger); border-color: #f0c4c4; }
.btn.small { padding: 4px 10px; min-height: 32px; font-size: 0.85rem; }
.btn:disabled { opacity: 0.4; cursor: default; }

/* Tables / lists */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); }
tr.clickable { cursor: pointer; }
tr.clickable:hover { background: #f7fafc; }
.search { font: inherit; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; min-width: 220px; }

/* Badges */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  background: #eef2f6;
  color: var(--muted);
  white-space: nowrap;
}
.badge.Water { background: #e0effa; color: var(--water); }
.badge.Mold { background: #ecf5dc; color: var(--mold); }
.badge.Fire { background: #fdeadf; color: var(--fire); }
.badge.stage { background: var(--brand-soft); color: var(--brand-dark); }

/* Dashboard */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin-bottom: 16px; }
.tile {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  text-decoration: none;
  color: inherit;
}
.tile .num { font-size: 1.8rem; font-weight: 700; color: var(--brand-dark); }
.tile .lbl { color: var(--muted); font-size: 0.85rem; }

/* Kanban board */
.board { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 12px; align-items: flex-start; }
.col {
  background: #e8eef4;
  border-radius: var(--radius);
  min-width: 240px;
  width: 240px;
  flex-shrink: 0;
  padding: 10px;
}
.col.drag-over { outline: 2px dashed var(--brand); }
.col-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.col-head strong { font-size: 0.95rem; }
.col-owner { font-size: 0.75rem; color: var(--muted); margin-bottom: 8px; }
.jcard {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 8px;
  cursor: pointer;
}
.jcard:hover { border-color: #b6c7d8; }
.jcard .t { font-weight: 600; }
.jcard .moves { display: flex; justify-content: space-between; margin-top: 8px; }
.empty-col { font-size: 0.8rem; color: var(--muted); padding: 8px 2px; }

/* Stage stepper */
.stepper { display: flex; gap: 4px; overflow-x: auto; margin: 4px 0 16px; }
.step {
  flex: 1;
  min-width: 90px;
  text-align: center;
  font: inherit;
  font-size: 0.8rem;
  padding: 8px 4px;
  border: none;
  background: #e8eef4;
  color: var(--muted);
  cursor: pointer;
  border-radius: 6px;
}
.step.done { background: #cfe5f5; color: var(--brand-dark); }
.step.current { background: var(--brand); color: #fff; font-weight: 700; }

.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
dl.info { display: grid; grid-template-columns: 140px 1fr; gap: 6px 12px; margin: 0; }
dl.info dt { color: var(--muted); }
dl.info dd { margin: 0; word-break: break-word; }

.note { border-left: 3px solid var(--brand-soft); padding: 6px 10px; margin-bottom: 10px; white-space: pre-wrap; }
.note .meta { font-size: 0.75rem; color: var(--muted); }
textarea, input, select { font: inherit; }
.add-note textarea { width: 100%; min-height: 70px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; }

/* Job page photos: newest first, two rows tall; scroll inside the box for the rest */
.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); grid-auto-rows: 118px; gap: 8px; margin-top: 10px; max-height: calc(2 * 118px + 8px); overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; }
.photos img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; cursor: pointer; border: 1px solid var(--line); }
.file-btn input { display: none; }

/* Org board */
.org-wrap { overflow-x: auto; padding: 10px 0 20px; }
.tree, .tree ul { list-style: none; margin: 0; padding: 0; }
.tree { display: flex; justify-content: center; min-width: max-content; }
.tree ul { display: flex; justify-content: center; padding-top: 20px; position: relative; }
.tree li { position: relative; padding: 20px 8px 0; display: flex; flex-direction: column; align-items: center; }
.tree > li { padding-top: 0; }
/* connectors */
.tree ul::before { content: ""; position: absolute; top: 0; left: 50%; border-left: 2px solid #b6c7d8; height: 20px; }
.tree li::before, .tree li::after {
  content: ""; position: absolute; top: 0; width: 50%; height: 20px; border-top: 2px solid #b6c7d8;
}
.tree li::before { right: 50%; }
.tree li::after { left: 50%; border-left: 2px solid #b6c7d8; }
.tree li:only-child::before, .tree li:only-child::after { display: none; }
.tree li:only-child { padding-top: 0; }
.tree li:first-child::before, .tree li:last-child::after { border: 0 none; }
.tree li:last-child::before { border-right: 2px solid #b6c7d8; border-radius: 0 6px 0 0; }
.tree li:first-child::after { border-radius: 6px 0 0 0; }
.tree > li::before, .tree > li::after { display: none; }

.role {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 4px solid var(--brand);
  border-radius: 8px;
  padding: 10px 12px;
  width: 210px;
  text-align: left;
  cursor: pointer;
}
.role:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.role .title { font-weight: 700; }
.role .person { color: var(--muted); font-size: 0.9rem; }
.role .stages { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px; }
.role .kpis { margin-top: 8px; font-size: 0.8rem; border-top: 1px solid var(--line); padding-top: 6px; }
.role .kpi { display: flex; justify-content: space-between; gap: 6px; }
.kpi .hit { color: var(--ok); font-weight: 600; }
.kpi .miss { color: var(--warn); font-weight: 600; }

/* Dialog forms */
dialog {
  border: none;
  border-radius: 12px;
  padding: 20px;
  width: min(560px, calc(100vw - 24px));
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}
dialog::backdrop { background: rgba(15, 23, 42, 0.45); }
#photoDialog { width: min(900px, calc(100vw - 24px)); }
#photoFull { width: 100%; max-height: 75vh; object-fit: contain; }
.field { margin-bottom: 12px; }
.field label { display: block; font-weight: 600; font-size: 0.85rem; margin-bottom: 4px; }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.field textarea { min-height: 80px; }
.field .checks { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.field .checks label { font-weight: 400; display: flex; gap: 6px; align-items: center; }
.field .checks input { width: auto; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.dialog-actions .dialog-del { margin-right: auto; }

.kpi-edit { display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: 6px; margin-bottom: 6px; }
.kpi-edit input { padding: 7px 8px; border: 1px solid var(--line); border-radius: 6px; width: 100%; }

/* Phones */
@media (max-width: 700px) {
  .topbar { flex-direction: column; align-items: stretch; gap: 0; padding: 0 8px; }
  .brand { padding: 10px 8px 2px; }
  #nav a { padding: 10px 10px; }
  main { padding: 12px; }
  .hide-sm { display: none; }
  dl.info { grid-template-columns: 1fr; gap: 0; }
  dl.info dd { margin-bottom: 8px; }
  .field-row { grid-template-columns: 1fr; }
  .search { min-width: 0; width: 100%; }
  .col { min-width: 82vw; width: 82vw; }
}

/* ---------- Schedule board ---------- */
body.wide main { max-width: none; padding: 12px 16px 0; }
.sched-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.sched-toolbar h1 { margin-right: 6px; }
.sched-range { font-weight: 600; color: var(--muted); }

/* Tile colors: one per thing that needs to happen */
.c-green  { --tc: #16a34a; --tb: #dcfce7; --tl: #86efac; }
.c-yellow { --tc: #ca8a04; --tb: #fef9c3; --tl: #fde047; }
.c-red    { --tc: #dc2626; --tb: #fee2e2; --tl: #fca5a5; }
.c-purple { --tc: #7c3aed; --tb: #ede9fe; --tl: #c4b5fd; }
.c-orange { --tc: #ea580c; --tb: #ffedd5; --tl: #fdba74; }
.c-gray   { --tc: #475569; --tb: #e2e8f0; --tl: #94a3b8; }
.c-blue   { --tc: #2563eb; --tb: #dbeafe; --tl: #93c5fd; }   /* Do Work */
.c-teal   { --tc: #0d9488; --tb: #ccfbf1; --tl: #5eead4; }   /* Other */
.c-pink   { --tc: #db2777; --tb: #fce7f3; --tl: #f9a8d4; }   /* Follow Up Estimate */

.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 0.85rem; margin-right: 6px; }
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.swatch { width: 14px; height: 14px; border-radius: 4px; background: var(--tb); border: 2px solid var(--tc); }

.sched {
  --colw: 180px;
  overflow: auto;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
}
.sched-head, .day-row { display: grid; grid-template-columns: repeat(var(--days), var(--colw)); width: max-content; }
.sched-head { position: sticky; top: 0; z-index: 3; background: #fff; border-bottom: 1px solid var(--line); }
.day-row { flex: 1; }
.day-h { padding: 8px 6px; text-align: center; border-right: 1px solid var(--line); font-weight: 600; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.day-h.wkend { background: #f8fafc; }
.day-h.today { background: var(--brand-soft); color: var(--brand-dark); }
.today-pill { background: var(--brand); color: #fff; border-radius: 999px; font-size: 0.7rem; padding: 1px 8px; }

.day-col { border-right: 1px solid var(--line); padding: 8px 6px 40px; position: relative; min-height: 100%; }
.day-col.today { background: #f5faff; }
.day-col.drag-over { outline: 2px dashed var(--brand); outline-offset: -3px; background: var(--brand-soft); }
.cell-add {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 30px; margin-top: 4px; flex: 0 0 auto;
  border: 0; background: var(--brand); color: #fff; border-radius: 6px; cursor: pointer;
  font-size: 1.25rem; font-weight: 600; line-height: 1;
}
.cell-add:hover { background: var(--brand-dark); }
.cell-add:focus-visible { outline: 2px solid var(--brand-dark); outline-offset: 2px; }

.tile-appt {
  background: var(--tb);
  border: 1px solid var(--tl);
  border-left: 5px solid var(--tc);
  border-radius: 6px;
  padding: 6px 8px;
  margin-bottom: 6px;
  font-size: 0.8rem;
  line-height: 1.3;
  cursor: pointer;
}
.tile-appt:hover { box-shadow: 0 1px 5px rgba(0,0,0,0.15); }
.appt-time { font-size: 0.72rem; color: var(--muted); white-space: nowrap; }
.appt-title { font-weight: 700; color: var(--tc); }
.appt-who { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile-appt.done { opacity: 0.5; }
.tile-appt.done .appt-title { text-decoration: line-through; }

@media (max-width: 700px) {
  body.wide main { padding: 8px 8px 0; }
}

/* ---------- Call sheet ---------- */
dialog.call-dialog { width: min(820px, calc(100vw - 24px)); padding: 0; }
#callForm { padding: 18px 20px 20px; }
.cs-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.cs-head h2 { margin: 0; font-size: 1.3rem; }

/* Section / box colors */
.cs-c-gray   { --cs: #cbd5e1; --cs-ink: #475569; --cs-bg: #f8fafc; }
.cs-c-blue   { --cs: #93c5fd; --cs-ink: #1d4ed8; --cs-bg: #f5f9ff; }
.cs-c-purple { --cs: #a78bfa; --cs-ink: #6d28d9; --cs-bg: #faf8ff; }
.cs-c-orange { --cs: #fdba74; --cs-ink: #c2410c; --cs-bg: #fffaf5; }
.cs-c-green  { --cs: #86efac; --cs-ink: #15803d; --cs-bg: #f6fdf8; }
.cs-c-red    { --cs: #fca5a5; --cs-ink: #b91c1c; --cs-bg: #fff8f8; }
.cs-c-yellow { --cs: #fde047; --cs-ink: #a16207; --cs-bg: #fffdf0; }
.cs-c-teal   { --cs: #5eead4; --cs-ink: #0f766e; --cs-bg: #f3fdfb; }
.cs-c-pink   { --cs: #f9a8d4; --cs-ink: #be185d; --cs-bg: #fff7fb; }

.cs-sec { border: 1.5px solid var(--cs, var(--line)); border-radius: 10px; padding: 14px 16px; margin-bottom: 12px; }
.cs-sec-title { color: var(--cs-ink); margin: 0 0 12px; }
.cs-row { display: grid; grid-template-columns: 210px 1fr; gap: 10px; align-items: start; margin-bottom: 12px; }
.cs-row:last-child { margin-bottom: 0; }
.cs-row > label { font-weight: 600; padding-top: 9px; }
#callForm b { color: var(--danger); }
#callForm [hidden] { display: none !important; }
#callForm input, #callForm select, #callForm textarea {
  font: inherit; width: 100%; padding: 9px 11px; border: 1px solid #cfd8e3; border-radius: 8px; background: #fff;
}
#callForm input:focus, #callForm select:focus, #callForm textarea:focus { outline: 2px solid var(--brand-soft); border-color: var(--brand); }
#callForm textarea { min-height: 76px; resize: vertical; }
#callForm input[type=checkbox] { width: auto; }
#callForm .cs-short { max-width: 260px; }
.cs-locked { display: inline-flex; gap: 10px; align-items: center; padding: 9px 12px; background: #eef2f6; border: 1px solid #cfd8e3; border-radius: 8px; color: var(--muted); width: fit-content; }
.cs-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 360px; }
.cs-addr .small { margin-top: 4px; }
.cs-suggest { border: 1px solid #cfd8e3; border-radius: 8px; margin-top: 4px; background: #fff; box-shadow: 0 6px 16px rgba(0,0,0,0.08); overflow: hidden; }
.cs-sug { padding: 8px 12px; cursor: pointer; }
.cs-sug:hover, .cs-sug.on { background: var(--brand-soft); }
.cs-checks { display: flex; flex-wrap: wrap; gap: 6px 18px; padding-top: 8px; }
.cs-checks label { display: flex; gap: 6px; align-items: center; font-weight: 400; }
.cs-box { border: 1.5px solid var(--cs, var(--line)); background: var(--cs-bg); border-radius: 8px; padding: 12px; margin-top: 12px; }
.cs-box-title { font-weight: 700; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.03em; margin-bottom: 10px; color: var(--cs-ink); }
.cs-contacts { display: grid; grid-template-columns: 28px repeat(var(--cols), 1fr); gap: 8px; align-items: center; }
.cs-colh { font-weight: 600; font-size: 0.85rem; }
.cs-num { width: 24px; height: 24px; border-radius: 50%; background: var(--cs-ink, #6d28d9); color: #fff; font-size: 0.8rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.cs-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 12px; }
.cs-grid3 > label { font-weight: 600; font-size: 0.85rem; display: flex; flex-direction: column; gap: 4px; }
.cs-grid3 > label.cs-span { grid-column: 1 / -1; }
.cs-grid3 .cs-two { max-width: none; }
.cs-toggle { display: inline-flex; border: 1px solid #cfd8e3; border-radius: 8px; overflow: hidden; width: fit-content; }
.cs-toggle button { font: inherit; border: 0; background: #fff; padding: 9px 26px; cursor: pointer; min-width: 140px; }
.cs-toggle button + button { border-left: 1px solid #cfd8e3; }
.cs-toggle button.on { background: #1d4ed8; color: #fff; font-weight: 600; }
.cs-error { background: #fef2f2; border: 1px solid #fca5a5; color: var(--danger); padding: 10px 12px; border-radius: 8px; margin-bottom: 12px; }
.cs-actions { display: flex; justify-content: center; gap: 12px; }
.cs-actions .btn { min-width: 150px; justify-content: center; font-weight: 600; }

/* Call sheet settings page */
.cs-set { background: #fff; border: 1.5px solid var(--cs, var(--line)); border-left-width: 6px; border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; }
.cs-set-box { background: var(--cs-bg); margin: 12px 0 0 18px; }
.cs-set-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.cs-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--cs-ink); margin-right: 8px; }
.cs-set-table { table-layout: fixed; }
.cs-set-table td { padding: 7px 6px; vertical-align: middle; }
.cs-set-table td:nth-child(2) { width: 170px; }
.cs-set-table td:nth-child(3), .cs-set-table td:nth-child(4) { width: 115px; }
.cs-set-table td:nth-child(5) { width: 175px; }
.cs-tools { white-space: nowrap; text-align: right; }
.cs-tools .btn { margin-left: 2px; }
.cs-off td:first-child { opacity: 0.5; }
.btn.cs-on { background: #fef2f2; border-color: #fca5a5; color: var(--danger); font-weight: 600; }
.cs-rule { color: #6d28d9; margin-top: 2px; }
.field [hidden], .field-row[hidden] { display: none; }

@media (max-width: 700px) {
  .cs-row { grid-template-columns: 1fr; gap: 4px; }
  .cs-row > label { padding-top: 0; }
  .cs-grid3 { grid-template-columns: 1fr; }
  .cs-contacts { grid-template-columns: 24px 1fr; }
  .cs-contacts .cs-colh, .cs-contacts > span:first-child { display: none; }
  .cs-contacts input { grid-column: 2; }
  .cs-toggle button { min-width: 0; padding: 9px 16px; }
  .cs-set-box { margin-left: 6px; }
  .cs-set-table, .cs-set-table tbody, .cs-set-table tr, .cs-set-table td { display: block; }
  .cs-set-table tr { border-bottom: 1px solid var(--line); padding: 6px 0; }
  .cs-set-table td { border: 0; padding: 3px 0; display: inline-block; }
  .cs-set-table td:first-child { display: block; }
}

/* Bottom row on call sheet settings: Add section (left), Save (right) */
.cs-bottom { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 30px; }
.cs-savebar { display: flex; align-items: center; gap: 10px; }
.cs-savestate { font-size: 0.85rem; color: var(--ok); font-weight: 600; }
.cs-savebar.dirty .cs-savestate { color: #b45309; }
.cs-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 50;
  background: var(--ok); color: #fff; padding: 10px 18px; border-radius: 999px; font-weight: 600;
  box-shadow: 0 6px 18px rgba(0,0,0,0.2);
}

/* Call sheet view / edit modes */
.cs-jobno { font-size: 0.9rem; font-weight: 600; margin-left: 4px; }
.cs-mode { font-size: 0.75rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; vertical-align: middle; margin-left: 6px; }
.cs-mode-view { background: #eef2f6; color: var(--muted); }
.cs-mode-edit { background: #fef3c7; color: #92400e; }
.cs-edit-note { background: #fffbeb; border: 1px solid #fcd34d; color: #92400e; padding: 8px 12px; border-radius: 8px; margin: 0 0 12px; font-size: 0.9rem; }
/* Locked: inputs read like filled-in text, not like boxes waiting for typing */
#callForm.cs-locked-form input:disabled, #callForm.cs-locked-form select:disabled, #callForm.cs-locked-form textarea:disabled {
  background: #f8fafc; color: var(--ink); opacity: 1; -webkit-text-fill-color: var(--ink); border-color: #e2e8f0; cursor: default;
}
#callForm.cs-locked-form select:disabled { appearance: none; }
#callForm.cs-locked-form input::placeholder, #callForm.cs-locked-form textarea::placeholder { color: transparent; -webkit-text-fill-color: transparent; }
#callForm.cs-locked-form .cs-addr .small { display: none; }
#callForm.cs-locked-form .cs-toggle button:disabled { cursor: default; }
#callForm.cs-locked-form .cs-toggle button:disabled:not(.on) { color: var(--muted); }
#callForm.cs-locked-form input[type=checkbox]:disabled + * { color: var(--ink); }
.cs-actions .cs-left { margin-right: auto; }
.cs-actions:has(.cs-left) { justify-content: flex-end; }

/* Safety pop-up */
dialog.cs-ask { width: min(560px, calc(100vw - 24px)); border-radius: 14px; padding: 20px 22px; }
dialog.cs-ask h3 { font-size: 1.15rem; margin: 0 0 8px; }
.cs-ask-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.cs-ask-actions.three #csAskNo { order: 0; }
.cs-ask-actions.three #csAskYes { order: 1; }
.cs-ask-actions.three #csAskFirst { order: 2; }
.btn.danger-solid { background: #dc2626; border-color: #dc2626; color: #fff; font-weight: 700; }
.btn.danger-solid:hover { background: #991b1b; }
.cs-diff { font-size: 0.88rem; margin-top: 6px; }
.cs-diff th, .cs-diff td { padding: 6px 8px; }
.cs-diff .cs-was { color: #b91c1c; text-decoration: line-through; }
.cs-diff .cs-now { color: #15803d; font-weight: 600; }

/* Tile screen */
.cs-head-btns { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.tl-dot { display: inline-block; width: 14px; height: 14px; border-radius: 4px; background: var(--tb); border: 2px solid var(--tc); margin-right: 8px; vertical-align: -1px; }
.tl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tl-grid > label { display: flex; flex-direction: column; gap: 5px; font-weight: 600; font-size: 0.9rem; }
.tl-grid > .cs-span { grid-column: 1 / -1; }
.tl-jobinfo { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); color: var(--muted); }
.cs-actions .cs-left { margin-right: auto; }
@media (max-width: 700px) {
  .tl-grid { grid-template-columns: 1fr; }
  .cs-head { flex-wrap: wrap; gap: 8px; }
}
.tl-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.tl-title h2 { margin: 0 6px 0 0; }
.tl-grid .cs-addr { display: block; font-weight: 400; }
.cs-sheet-warn { background: #fff7ed; border: 1px solid #fdba74; color: #9a3412; padding: 8px 10px; border-radius: 8px; }

/* Move tile screen */
.mv-route { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin-bottom: 12px; }
.mv-route > div { display: flex; flex-direction: column; gap: 2px; background: #f8fafc; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.mv-route > .mv-arrow { background: none; border: 0; font-size: 1.4rem; color: var(--brand); padding: 0; }
.mv-route .mv-to { background: #eef7ff; border-color: #93c5fd; }
.mv-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mv-pick label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: 0.9rem; }
#callForm .mv-pick input[readonly] { background: #f1f5f9; }
.mv-slots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; max-height: 300px; overflow-y: auto; padding: 2px; position: relative; }
.mv-slot { font: inherit; display: flex; gap: 8px; align-items: center; text-align: left; padding: 6px 10px; border: 1px solid #e2e8f0; border-radius: 6px; background: #fff; cursor: pointer; min-height: 34px; color: var(--ink); }
.mv-slot.hour { border-top: 2px solid #cbd5e1; }
.mv-slot:hover { border-color: var(--brand); }
.mv-slot .mv-time { font-weight: 600; font-size: 0.85rem; white-space: nowrap; min-width: 70px; }
.mv-slot .mv-who { font-size: 0.75rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mv-slot.busy { background: #e2e8f0; }
.mv-slot.picked { background: var(--brand); border-color: var(--brand); color: #fff; }
.mv-slot.picked .mv-who { color: #dbeafe; }
.mv-slot.clash { background: #dc2626; border-color: #dc2626; }
.mv-warn { margin: 10px 0 0; background: #fef2f2; border: 1px solid #fca5a5; color: #b91c1c; padding: 8px 10px; border-radius: 8px; font-size: 0.88rem; }
.mv-next { display: flex; flex-direction: column; gap: 6px; font-weight: 600; }
#callForm .mv-next textarea { min-height: 80px; }
.appt-next { margin-top: 3px; font-size: 0.72rem; color: var(--ink); background: rgba(255,255,255,0.65); border-radius: 4px; padding: 2px 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#callForm .tl-next { min-height: 56px; }
@media (max-width: 700px) {
  .mv-route { grid-template-columns: 1fr; }
  .mv-route > .mv-arrow { transform: rotate(90deg); justify-self: center; }
  .mv-pick { grid-template-columns: 1fr 1fr; }
  .mv-slots { grid-template-columns: 1fr; }
}
.mv-window { display: flex; flex-direction: column; gap: 6px; font-weight: 600; }
#callForm .mv-window select { font-size: 1rem; padding: 11px 12px; }

/* Move screen time dropdowns */
.mv-times { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mv-times label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; }
#callForm .mv-times select { font-size: 1rem; padding: 11px 12px; }

/* Task bubbles */
.tk-box { margin-bottom: 12px; }
.tk-box:last-child { margin-bottom: 0; }
.tk-label { font-weight: 700; margin-bottom: 6px; display: flex; align-items: baseline; gap: 6px; }
.tk-label b { color: var(--danger); }
.tk-count { font-weight: 400; font-size: 0.8rem; color: var(--muted); margin-left: auto; }
.tk-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.tk-chips:empty { display: none; }
.tk-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 5px; border-radius: 999px; border: 1px solid; font-size: 0.88rem; line-height: 1.2; max-width: 100%; }
.tk-tech .tk-chip { background: #eff6ff; border-color: #93c5fd; }
.tk-admin .tk-chip { background: #faf5ff; border-color: #c4b5fd; }
.tk-check { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #94a3b8; background: #fff; cursor: pointer; padding: 0; font-size: 0.75rem; font-weight: 700; color: #fff; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.tk-check:hover { border-color: var(--ok); }
.tk-text { cursor: pointer; overflow-wrap: anywhere; }
.tk-meta { font-size: 0.72rem; color: var(--muted); }
.tk-x { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 2px; }
.tk-x:hover { color: var(--danger); }
.tk-chip.done { background: #f0fdf4; border-color: #86efac; }
.tk-chip.done .tk-check { background: var(--ok); border-color: var(--ok); }
.tk-chip.done .tk-text { text-decoration: line-through; color: var(--muted); }
.tk-input, #callForm .tk-input { width: 100%; font: inherit; padding: 9px 11px; border: 1px dashed #94a3b8; border-radius: 8px; background: #fff; }
.tk-input:focus { border-style: solid; }
#jobTasks .tk-box { padding: 10px 12px; border-radius: 8px; background: #f8fafc; }
.appt-next.all-done { color: var(--ok); font-weight: 600; }
@media (max-width: 700px) { .mv-times { grid-template-columns: 1fr; } }

/* Tile settings page */
.ts-opt { display: flex; gap: 12px; align-items: flex-start; padding: 10px 4px; border-bottom: 1px solid var(--line); cursor: pointer; }
.ts-opt:last-child { border-bottom: 0; }
.ts-opt input { width: 20px; height: 20px; margin-top: 1px; flex: 0 0 auto; accent-color: var(--brand); }
.ts-opt span { display: flex; flex-direction: column; gap: 1px; }
.ts-preview { max-width: 260px; padding: 14px; background: #f8fafc; border: 1px dashed var(--line); border-radius: 10px; }
.ts-preview .tile-appt { cursor: default; margin: 0; }

/* Job page info cards (call sheet order) */
.ji-card { border-left: 4px solid var(--cs, var(--line)); }
.ji-box { margin-top: 10px; padding: 10px 12px; border-radius: 8px; background: var(--cs-bg); border: 1px solid var(--cs); }
.ji-box-title { font-weight: 700; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.03em; color: var(--cs-ink); margin-bottom: 6px; }
dl.info dd.ji-solo { grid-column: 1 / -1; }
dl.info .ji-wide { grid-column: 1 / -1; }
.ji-table th, .ji-table td { padding: 6px 8px; }

/* Job page: the call sheet, editable */
.job-sheet { margin-bottom: 16px; }
.job-sheet .cs-sec { background: #fff; }
.job-sheet b { color: var(--danger); }
.job-sheet [hidden] { display: none !important; }
.job-sheet input, .job-sheet select, .job-sheet textarea {
  font: inherit; width: 100%; padding: 9px 11px; border: 1px solid #cfd8e3; border-radius: 8px; background: #fff;
}
.job-sheet input:focus, .job-sheet select:focus, .job-sheet textarea:focus { outline: 2px solid var(--brand-soft); border-color: var(--brand); }
.job-sheet textarea { min-height: 70px; resize: vertical; }
.job-sheet input[type=checkbox] { width: auto; }
.job-sheet .cs-short { max-width: 260px; }
.job-sheet .cs-row { grid-template-columns: 170px 1fr; }
.job-sheet .cs-grid3 { grid-template-columns: repeat(2, 1fr); }
.js-savebar { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; box-shadow: 0 -2px 10px rgba(15, 23, 42, 0.06); }
.js-savebar .cs-savestate { margin-right: auto; }
.js-savebar.dirty { border-color: #f59e0b; }
.js-savebar.dirty .cs-savestate { color: #b45309; }
@media (max-width: 700px) { .job-sheet .cs-row { grid-template-columns: 1fr; } .job-sheet .cs-grid3 { grid-template-columns: 1fr; } }

/* Notes on the tile screen */
.tl-notes { display: flex; flex-direction: column; gap: 6px; }
.tl-notes-label { font-weight: 600; font-size: 0.9rem; }
.tl-note-list { max-height: 170px; overflow-y: auto; background: #f8fafc; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.tl-note-list .note { margin-bottom: 6px; font-size: 0.88rem; }
#callForm .tl-notes textarea { min-height: 60px; }


/* Event tiles (Schedule Event) */
.tile-appt.is-event { border-style: dashed; border-left-style: solid; }
.tile-appt.is-event .appt-title { color: #334155; }

/* Finished / Lost */
.js-status { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 0.9rem; }
.js-status select { font: inherit; font-weight: 400; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; min-height: 40px; }
.status-banner { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; border-radius: 10px; margin-bottom: 12px; border: 1px solid; }
.status-banner.st-finished { background: #f0fdf4; border-color: #86efac; color: #166534; }
.status-banner.st-lost { background: #fef2f2; border-color: #fca5a5; color: #991b1b; }
.lost-label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; margin-top: 6px; }
.lost-label b { color: var(--danger); }
.lost-label textarea { font: inherit; font-weight: 400; min-height: 80px; padding: 9px 11px; border: 1px solid #cfd8e3; border-radius: 8px; resize: vertical; }
#lostErr { margin-top: 8px; }
.tk-paper .tk-chip { background: #fffbeb; border-color: #fcd34d; }
.pw-left { font-weight: 700; color: #b45309; }
.pw-done { font-weight: 700; color: var(--ok); }
.col.col-paper { background: #fef9e7; }
.col.col-lost { background: #fef2f2; }
.col.col-collect { background: #ecfdf5; }
.col-collect .col-head { color: var(--ok); }
/* In Production cards: which status the job is in */
.st-pill { display: inline-block; margin: 4px 0 2px; padding: 1px 8px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; border: 1px solid; }
.st-pill.c-green { color: #15803d; background: #dcfce7; border-color: #86efac; }
.st-pill.c-yellow { color: #a16207; background: #fef9c3; border-color: #fde047; }
.st-pill.c-purple { color: #6d28d9; background: #ede9fe; border-color: #c4b5fd; }
.st-pill.c-red { color: #b91c1c; background: #fee2e2; border-color: #fca5a5; }
.st-pill.c-orange { color: #c2410c; background: #ffedd5; border-color: #fdba74; }
.st-pill.c-blue { color: #1d4ed8; background: #dbeafe; border-color: #93c5fd; }
.st-pill.c-teal { color: #0f766e; background: #ccfbf1; border-color: #5eead4; }
.st-pill.c-pink { color: #be185d; background: #fce7f3; border-color: #f9a8d4; }
.coll-late { color: var(--danger); font-weight: 700; }
.col-lost .col-head { color: var(--danger); }
.job-del-row { display: flex; justify-content: flex-end; margin: 18px 0 8px; padding-top: 12px; border-top: 1px dashed var(--line); }
body.field-mode .job-del-row { display: none; }
/* Lost column per dispatcher board (2026-10-22): its own board switch; "All boards" = one small column per board side by side */
.lost-owner { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.lost-owner .board-switch select { font-size: 0.8rem; padding: 3px 6px; min-height: 0; }
.board-jobs > .col.lost-wide { flex: 2 1 0; min-width: 380px; }
.lost-split { display: flex; gap: 8px; align-items: stretch; }
.lost-sub { flex: 1 1 0; min-width: 0; background: rgba(255,255,255,0.55); border: 1px dashed #fca5a5; border-radius: 8px; padding: 6px; min-height: 80px; }
.lost-sub.drag-over { background: #fee2e2; border-style: solid; }
.lost-sub-head { font-weight: 700; font-size: 0.82rem; color: #991b1b; margin-bottom: 6px; display: flex; justify-content: space-between; align-items: center; }
.lost-board { display: flex; align-items: center; gap: 4px; font-size: 0.78rem; margin: 0 0 6px; }
.lost-board select { font: inherit; padding: 2px 4px; border: 1px solid var(--line); border-radius: 6px; background: #fff; max-width: 100%; }
.lost-why { font-size: 0.82rem; margin: 4px 0 6px; padding: 5px 8px; border-left: 3px solid #fca5a5; background: #fff; border-radius: 4px; white-space: pre-wrap; }

/* Paperwork page tiles */
.pw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(400px, 100%), 1fr)); gap: 18px; }
.pw-tile { background: var(--card); border: 1px solid var(--line); border-top: 5px solid var(--ok); border-radius: 12px; padding: 20px 22px; cursor: pointer; display: flex; flex-direction: column; gap: 12px; }
.pw-tile:hover { box-shadow: 0 4px 14px rgba(15, 23, 42, 0.1); border-color: #b6c7d8; border-top-color: var(--ok); }
.pw-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.pw-head h2 { font-size: 1.5rem; margin: 0; }
.pw-finished { color: var(--ok); font-weight: 600; font-size: 0.9rem; margin-top: -6px; }
.pw-money { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pw-money > div { background: #f8fafc; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; }
.pw-money span { font-size: 0.78rem; color: var(--muted); }
.pw-money strong { font-size: 1.2rem; }
.pw-section { border-top: 1px solid var(--line); padding-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.pw-row { display: grid; grid-template-columns: 150px 1fr; gap: 8px; font-size: 0.95rem; }
.pw-row > span:first-child { color: var(--muted); }
.pw-row a { word-break: break-all; }

/* Money box on the job page: Estimate · Sent? · Estimate file · Money received */
.money-box { display: grid; grid-template-columns: 120px 120px 104px 1fr; gap: 10px 12px; padding: 12px 14px; align-items: start; }
.money-box .mb-amt, .money-box .mb-sent, .money-box .mb-file { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.money-box .mb-amt > span, .money-box .mb-sent > span, .money-box .mb-file > span { font-weight: 600; font-size: 0.8rem; }
.money-box input[type=number] { font: inherit; font-size: 1rem; width: 100%; height: 38px; box-sizing: border-box; padding: 0 9px; border: 1px solid #cfd8e3; border-radius: 8px; }
.money-box input:focus { outline: 2px solid var(--brand-soft); border-color: var(--brand); }
.sent-toggle { font: inherit; font-size: 0.85rem; font-weight: 600; height: 38px; border-radius: 8px; border: 1px dashed #94a3b8; background: #f8fafc; color: var(--muted);
  cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; padding: 0 6px; }
.sent-toggle small { font-size: 0.68rem; font-weight: 400; }
.sent-toggle.on { border: 1px solid #86efac; background: #f0fdf4; color: var(--ok); }
.est-row { display: flex; gap: 8px; align-items: flex-start; }
.est-drop { flex: 0 0 64px; height: var(--mb-h, 38px); box-sizing: border-box; border: 2px dashed #94a3b8; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; font-weight: 300; color: var(--muted); cursor: pointer; background: #fff; }
.est-drop:hover, .est-drop:focus { border-color: var(--brand); color: var(--brand); outline: none; }
.est-drop.over { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.est-files { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; min-height: var(--mb-h, 38px); min-width: 0; }
.est-files:empty { display: none; }
.est-chip { display: inline-flex; align-items: center; gap: 2px; background: #eff6ff; border: 1px solid #93c5fd; border-radius: 999px; padding: 2px 4px 2px 8px; font-size: 0.8rem; max-width: 100%; }
.est-chip a { text-decoration: none; color: var(--brand-dark); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px; }
.est-chip button { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 0.95rem; padding: 0 3px; }
.est-chip button:hover { color: var(--danger); }
@media (max-width: 700px) { .money-box { grid-template-columns: 1fr 1fr; } .money-box .mb-file { grid-column: 1 / -1; order: 3; } }

/* Paperwork tile header: Estimate sent + Files */
.pw-head-btns { display: flex; gap: 6px; align-items: stretch; flex: 0 0 auto; }
.pw-head-btns .sent-toggle { height: 38px; min-width: 112px; font-size: 0.8rem; }
.pw-head-btns .btn.small { min-height: 38px; }

/* Job folder window */
.jf-sec { padding: 10px 14px; }
.jf-title { margin: 0 0 6px; font-size: 0.95rem; }
.jf-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.jf-item { display: flex; align-items: center; gap: 10px; padding: 4px 0; border-bottom: 1px dashed var(--line); }
.jf-item:last-child { border-bottom: 0; }
.jf-item a { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jf-del { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 1.05rem; }
.jf-del:hover { color: var(--danger); }

/* Jobs board columns follow the status colors */
.col.col-st { border-top: 4px solid var(--tc); background: color-mix(in srgb, var(--tb) 45%, #e8eef4); }
.col.col-st .col-head strong { color: var(--tc); }

/* Schedule: Admin Tasks panel (left) + days */
.sched-wrap { display: flex; gap: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--card); }
.sched-wrap .sched { flex: 1; min-width: 0; height: 100%; border: 0; border-radius: 0; }
.side-panel { flex: 0 0 var(--sidew, 220px); width: var(--sidew, 220px); display: flex; flex-direction: column; border-left: 2px solid #c4b5fd; min-height: 0; }
/* Admin Tasks (top half) and Paperwork (bottom half), each exactly half the height, each scrolls on its own */
.admin-panel { flex: 1 1 0; display: flex; flex-direction: column; background: #faf5ff; min-height: 0; overflow: hidden; }
.ap-head { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 10px 10px; border-bottom: 1px solid #ddd6fe; background: #f3e8ff; color: #5b21b6; position: sticky; top: 0; }
.ap-list { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 8px 6px 14px; display: flex; flex-direction: column; gap: 6px; }
.ap-card { background: #fff; border: 1px solid #ddd6fe; border-left: 5px solid #7c3aed; border-radius: 6px; padding: 7px 9px; cursor: pointer; font-size: 0.8rem; line-height: 1.3; }
.ap-card:hover { box-shadow: 0 1px 6px rgba(0,0,0,0.12); }
.ap-name { font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-card ul { list-style: none; margin: 4px 0 0; padding: 0; }
.ap-card li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #334155; }
.ap-empty { padding: 8px; }
/* 🔧 Technician Task button: a blue bar at the bottom of the Admin Tasks panel (blue = tech, so it stands apart from the purple admin column) */
.ap-foot { display: flex; justify-content: space-between; align-items: center; gap: 6px; width: 100%; padding: 8px 10px; border: 0; border-top: 2px solid #0a5c99; background: #0b6fb8; color: #fff; font: inherit; cursor: pointer; text-align: left; flex: 0 0 auto; }
.ap-foot:hover { background: #0a5c99; }
.ap-foot-plus { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 26px; border-radius: 6px; background: #fff; color: #0b6fb8; font-size: 1.2rem; font-weight: 800; line-height: 1; box-shadow: 0 1px 3px rgba(0,0,0,0.25); }
.ap-foot:hover .ap-foot-plus { background: #e0f0ff; }
.at-contact { padding: 10px 14px; }
.at-add { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 10px; }
#callForm .at-add textarea { min-height: 44px; flex: 1; }
.at-notes { max-height: 220px; overflow-y: auto; }
.at-notes .note { font-size: 0.88rem; }
@media (max-width: 700px) { .sched-wrap { flex-direction: column; height: auto !important; } .side-panel { width: 100%; flex-basis: auto; border-left: 0; border-bottom: 2px solid #c4b5fd; } .admin-panel { flex: 0 0 auto; max-height: 220px; } }

/* Choice at the top of the day + pop-up */
.day-switch { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: -2px 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.day-switch button { font: inherit; font-weight: 600; padding: 9px 16px; border: 2px solid var(--brand); border-radius: 8px; background: #fff; color: var(--brand); cursor: pointer; }
.day-switch button:hover { background: var(--brand-soft); }
.day-switch button.on { background: var(--brand); color: #fff; cursor: default; }
.day-switch-date { color: var(--muted); font-size: 0.9rem; margin-left: 4px; }

/* Due times on tasks (subtle) */
.due-mini { font-size: 0.72rem; color: var(--muted); white-space: nowrap; }
.due-mini.soon { color: #b45309; font-weight: 600; }
.due-mini.overdue { color: #b91c1c; font-weight: 600; }
.tk-chip.soon { border-color: #fcd34d; }
.tk-chip.overdue { border-color: #fca5a5; background: #fff5f5; }
.ap-card li.overdue { color: #b91c1c; }
.due-pill { font-size: 0.72rem; font-weight: 600; padding: 1px 7px; border-radius: 999px; }
.due-pill.overdue { background: #fee2e2; color: #b91c1c; }
.due-notices { position: fixed; right: 16px; bottom: 16px; z-index: 60; display: flex; flex-direction: column; gap: 8px; max-width: 360px; }
.due-notice { display: flex; align-items: flex-start; gap: 8px; background: #fff; border: 1px solid #fca5a5; border-left: 4px solid #dc2626; border-radius: 8px;
  padding: 8px 10px; font-size: 0.85rem; box-shadow: 0 4px 14px rgba(15,23,42,0.12); cursor: pointer; transition: opacity 0.8s; animation: dueIn 0.3s ease-out; }
.due-notice button { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 1rem; margin-left: auto; }
.due-notice.fade { opacity: 0; }
@keyframes dueIn { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
.ap-head { flex-wrap: wrap; row-gap: 4px; }
.ap-head strong { white-space: nowrap; }
.ap-head > span { display: inline-flex; gap: 4px; align-items: center; margin-left: auto; }


/* ⏰ Time sensitive button inside each "type a task" box */
.tk-input-wrap { position: relative; }
.tk-input-wrap .tk-input, #callForm .tk-input-wrap .tk-input { padding-right: 140px; }
.tk-ts-btn { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); font: inherit; font-size: 0.78rem; padding: 4px 9px;
  border: 1px solid #cbd5e1; border-radius: 999px; background: #fff; color: var(--muted); cursor: pointer; white-space: nowrap; }
.tk-ts-btn:hover { border-color: var(--brand); color: var(--brand); }
.tk-ts-btn.on { background: #fef3c7; border-color: #f59e0b; color: #92400e; font-weight: 600; }
.tk-ts-fields { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 0.82rem; color: #92400e; font-weight: 600; flex-wrap: wrap; }
.tk-ts-fields[hidden] { display: none; }
.tk-ts-fields input, .tk-ts-fields select, #callForm .tk-ts-fields input, #callForm .tk-ts-fields select, .field .tk-ts-fields input, .field .tk-ts-fields select {
  width: auto; font: inherit; font-weight: 400; font-size: 0.85rem; padding: 4px 6px; border: 1px solid #f59e0b; border-radius: 6px; background: #fffbeb; cursor: pointer; }
.tk-ts-time { display: inline-flex; align-items: center; gap: 3px; }
.tk-ts-date { cursor: pointer; caret-color: transparent; }
.field .tk-ts-fields { color: #92400e; }
@media (max-width: 700px) { .tk-input-wrap .tk-input, #callForm .tk-input-wrap .tk-input { padding-right: 46px; } .tk-ts-btn { font-size: 0; padding: 4px 8px; } .tk-ts-btn::before { content: '⏰'; font-size: 0.9rem; } }
.tk-ts-fields .tk-save { margin-left: 6px; min-height: 30px; padding: 4px 12px; border: 0; background: var(--brand); color: #fff; font-weight: 600; }
.tk-ts-fields .tk-save:hover { background: var(--brand-dark); }

/* Two-line task box (New task window) */
textarea.tk-input.tk-multi { min-height: 0; height: auto; resize: vertical; line-height: 1.6; padding-top: 6px; padding-bottom: 6px;
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(1.6em - 1px), #e2e8f0 calc(1.6em - 1px), #e2e8f0 1.6em);
  background-position: 0 6px; background-attachment: local; font: inherit; width: 100%; border: 1px dashed #94a3b8; border-radius: 8px; }
.tk-input-wrap textarea.tk-multi ~ .tk-ts-btn { top: 8px; transform: none; }
.nt-tasks .tk-box { background: #f8fafc; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; }
.nt-tasks .tk-input-wrap .tk-input { padding-right: 140px; }

/* Task lines: each typing line has its own ⏰ and Due by row */
.tk-line { margin-top: 6px; }
.tk-multi-lines .tk-line + .tk-line { margin-top: 12px; }
.nt-tasks .tk-box { padding: 14px 14px 16px; margin-bottom: 18px; border-radius: 10px; }
.nt-tasks .tk-box.tk-admin { background: #faf5ff; border-color: #ddd6fe; }
.nt-tasks .tk-box.tk-tech { background: #f5f9ff; border-color: #bfdbfe; }
.nt-tasks .tk-label { font-size: 1rem; margin-bottom: 8px; }
.nt-tasks .tk-input { background: #fff; }
.mv-times .mv-status { grid-column: 1 / -1; }
#callForm .mv-times .mv-status select { max-width: 340px; }

/* Paperwork box on the Schedule (bottom half of the right panel) */
.pw-panel { background: #f0fdf4; }
.pw-panel .ap-head { background: #dcfce7; color: #166534; border-bottom-color: #bbf7d0; border-top: 2px solid #86efac; }
.pw-panel .ap-head a { color: #166534; font-weight: 600; }
.pw-panel .ap-card { border-color: #bbf7d0; border-left-color: var(--ok); }
.pw-mini { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.pw-pill { font-size: 0.72rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: #e2e8f0; color: #334155; white-space: nowrap; }
.pw-pill-paperwork { background: #fef3c7; color: #92400e; }
.pw-pill-invoice { background: #dbeafe; color: #1e40af; }

/* Paperwork board (kanban) */
.pw-board { display: grid; grid-template-columns: repeat(4, minmax(260px, 1fr)); gap: 14px; overflow-x: auto; padding-bottom: 12px; align-items: start; }
.pw-board.pw-board-2 { grid-template-columns: repeat(2, minmax(300px, 1fr)); }
.pw-col { background: #eef2f6; border-radius: 12px; padding: 12px; min-height: 260px; display: flex; flex-direction: column; gap: 10px; border-top: 4px solid #94a3b8; }
.pw-col .col-owner { margin: -6px 0 0; }
.pw-col.drag-over { outline: 2px dashed var(--brand); outline-offset: -3px; background: var(--brand-soft); }
.pw-col-paperwork { border-top-color: #f59e0b; background: #fffbeb; }
.pw-col-invoice { border-top-color: #3b82f6; background: #eff6ff; }
.pw-col-sent { border-top-color: #8b5cf6; background: #f5f3ff; }
.pw-col-followup { border-top-color: var(--ok); background: #f0fdf4; }
.pw-card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; cursor: grab; display: flex; flex-direction: column; gap: 8px; }
.pw-card:hover { box-shadow: 0 3px 12px rgba(15, 23, 42, 0.1); }
.pw-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; }
.pw-card-name { font-size: 1.1rem; line-height: 1.25; }
.pw-card-dates { color: var(--ok); font-weight: 600; margin-top: -4px; }
.pw-card .pw-money strong { font-size: 1rem; }
.pw-card .pw-row { grid-template-columns: 80px 1fr; font-size: 0.86rem; }
.pw-card-btns { display: flex; gap: 6px; align-items: stretch; }
.pw-card-btns .sent-toggle { flex: 1; height: 36px; font-size: 0.78rem; }
.pw-card-btns .btn.small { min-height: 36px; }
.pw-step { display: inline-flex; gap: 3px; flex: 0 0 auto; }
.pw-arrow { border: 1px solid var(--line); background: #fff; border-radius: 6px; width: 28px; height: 26px; cursor: pointer; color: var(--brand); font-size: 0.75rem; }
.pw-arrow:hover:not(:disabled) { background: var(--brand-soft); border-color: var(--brand); }
.pw-arrow:disabled { opacity: 0.35; cursor: default; }

/* Paperwork card: customer info (blue) and insurance info (purple) in their own boxes */
.pw-box { border-radius: 8px; padding: 7px 10px 8px; display: flex; flex-direction: column; gap: 3px; border: 1px solid; border-left-width: 4px; }
.pw-box-title { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 2px; }
.pw-box-cust { background: #eff6ff; border-color: #bfdbfe; border-left-color: #2563eb; }
.pw-box-cust .pw-box-title { color: #1d4ed8; }
.pw-box-ins { background: #f5f3ff; border-color: #ddd6fe; border-left-color: #7c3aed; }
.pw-box-ins .pw-box-title { color: #6d28d9; }
.pw-card .pw-box .pw-row { grid-template-columns: 78px 1fr; font-size: 0.84rem; }
/* Started / Finished dates on the Schedule's Paperwork cards */
.pw-dates { display: grid; grid-template-columns: auto 1fr; gap: 0 8px; margin-top: 4px; color: #334155; }
.pw-dates > span:nth-child(odd) { color: var(--muted); }

/* This week's call sheets / landed / land rate in the Schedule toolbar */
.week-tally { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; padding: 4px 6px; background: #fff; border: 1px solid var(--line); border-radius: 10px; flex-wrap: wrap; cursor: default; }
.wt-item { display: inline-flex; align-items: baseline; gap: 4px; padding: 3px 10px; border-radius: 7px; background: #f1f5f9; font-size: 0.85rem; color: #334155; white-space: nowrap; }
.wt-item strong { font-size: 1.05rem; color: var(--ink); }
.wt-landed { background: #dcfce7; } .wt-landed strong { color: #166534; }
.wt-rate { background: var(--brand-soft); } .wt-rate strong { color: var(--brand-dark); }
.wt-week { font-size: 0.75rem; color: var(--muted); padding: 0 4px; white-space: nowrap; }
.wt-landed input { width: 3.2em; font: inherit; font-size: 1.05rem; font-weight: 700; color: #166534; text-align: center; padding: 1px 2px; border: 1px solid #86efac; border-radius: 5px; background: #fff; }
.wt-landed input:focus { outline: 2px solid #22c55e; outline-offset: 0; }

/* Schedule toolbar stays on one line: title + week tally on the left, color key + buttons on the right.
   If space runs short, the color key folds onto two lines instead of pushing the buttons down. */
.sched-toolbar { flex-wrap: nowrap; }
.sched-toolbar > .row { flex-wrap: nowrap; }
.sched-toolbar > .row:first-child { flex: 0 0 auto; }
.sched-toolbar > .row:last-child { flex: 0 1 auto; min-width: 0; justify-content: flex-end; }
.sched-toolbar .legend { flex: 0 1 auto; min-width: 0; justify-content: flex-end; }
.sched-toolbar .btn { white-space: nowrap; flex: 0 0 auto; }
.week-tally { flex-wrap: nowrap; }
@media (max-width: 1100px) { .sched-toolbar, .sched-toolbar > .row { flex-wrap: wrap; } }

/* Trucks column: far left of the Schedule, stays put, scrolls on its own */
.truck-panel { flex: 0 0 var(--trw, 260px); width: var(--trw, 260px); display: flex; flex-direction: column; min-height: 0; border-right: 2px solid #93c5fd; background: #f0f7ff; }
.tr-head { padding: 8px 10px; background: #dbeafe; color: #1e3a8a; border-bottom: 1px solid #bfdbfe; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.tr-head strong { white-space: nowrap; }
.tr-saved { font-size: 0.72rem; color: var(--ok); font-weight: 600; margin-left: auto; }
.tr-day { display: flex; align-items: center; gap: 4px; width: 100%; }
.tr-date { flex: 1; text-align: center; font-weight: 600; font-size: 0.85rem; white-space: nowrap; }
.tr-date.is-today { color: var(--brand-dark); }
.tr-list { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 8px 7px 14px; display: flex; flex-direction: column; gap: 9px; }
.tr-tile { background: #fff; border: 1px solid #bfdbfe; border-left: 5px solid #2563eb; border-radius: 8px; padding: 7px 7px; display: flex; flex-direction: column; gap: 5px; font-size: 0.8rem; }
.tr-top { display: flex; align-items: center; gap: 6px; font-weight: 700; color: #1e40af; }
.tr-field, .tr-job { display: grid; grid-template-columns: 58px 1fr; align-items: center; gap: 5px; }
.tr-field > span { white-space: nowrap; font-size: 0.74rem; }
.tr-field > span { color: var(--muted); }
.tr-jobs { display: flex; flex-direction: column; gap: 3px; border-top: 1px dashed #cbd5e1; padding-top: 5px; margin-top: 1px; }
.tr-job { grid-template-columns: 16px 1fr; }
.tr-job > span:first-child { color: #2563eb; font-weight: 700; text-align: center; font-size: 0.75rem; }
.tr-in { width: 100%; min-width: 0; font: inherit; font-size: 0.8rem; padding: 3px 6px; border: 1px solid #e2e8f0; border-radius: 5px; background: #f8fafc; }
.tr-in:hover { border-color: #93c5fd; }
.tr-in:focus { outline: none; border-color: #2563eb; background: #fff; box-shadow: 0 0 0 2px #dbeafe; }
.tr-in.tr-no { width: 4.5em; font-weight: 700; color: #1e40af; text-align: center; }
/* Weekend On Call: a different color */
.tr-oncall { background: #fdf4ff; border-color: #f0abfc; border-left-color: #a21caf; margin-top: 4px; }
.tr-oc-title { font-weight: 700; color: #86198f; font-size: 0.85rem; }
.tr-oc-dates { color: #a21caf; margin-top: -3px; }
.tr-oncall .tr-in { background: #fff; }
.tr-oncall .tr-in:focus { border-color: #a21caf; box-shadow: 0 0 0 2px #fae8ff; }
/* Day headers: click to show that day's trucks; the shown day is underlined in blue */
.day-h[data-action=truckDay] { cursor: pointer; }
.day-h[data-action=truckDay]:hover { background: #eef6ff; }
.day-h.truck-day { box-shadow: inset 0 -3px 0 #2563eb; }
@media (max-width: 700px) { .truck-panel { width: 100%; flex-basis: auto; border-right: 0; border-bottom: 2px solid #93c5fd; } .tr-list { max-height: 420px; } }
.tr-add { align-self: flex-start; margin: 2px 0 0 22px; font: inherit; font-size: 0.74rem; font-weight: 600; color: #2563eb; background: none; border: 1px dashed #93c5fd; border-radius: 5px; padding: 2px 8px; cursor: pointer; }
.tr-add:hover { background: #eff6ff; border-style: solid; }
/* Job picker under a truck's job box (our own drop-down, follows the box) */
.tr-pick { position: fixed; z-index: 80; background: #fff; border: 1px solid #93c5fd; border-radius: 7px; box-shadow: 0 6px 18px rgba(15,23,42,0.16); overflow-y: auto; padding: 3px; font-size: 0.82rem; max-width: 320px; }
.tr-pick-item { padding: 6px 9px; border-radius: 5px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-pick-item:hover, .tr-pick-item.on { background: #dbeafe; color: #1e3a8a; }
.tr-pick-empty { padding: 6px 9px; color: var(--muted); font-size: 0.78rem; }
/* + between the last truck and Weekend On Call */
.tr-list .tr-add-truck { flex: 0 0 auto; margin: 0; }
.tr-remove { margin-left: auto; border: 0; background: none; color: #94a3b8; font-size: 0.8rem; cursor: pointer; padding: 2px 5px; border-radius: 4px; }
.tr-remove:hover { color: #b91c1c; background: #fee2e2; }
.tr-oncall .tr-field { grid-template-columns: 70px 1fr; }

/* Top-right of a job tile: ✓ = on a truck that day, empty orange box = still needs a truck */
.tile-appt { position: relative; }
.tile-appt:has(.truck-mark) { padding-right: 24px; }
.truck-mark { position: absolute; top: 5px; right: 5px; width: 16px; height: 16px; border-radius: 4px; border: 2px solid #f97316; background: #fff; box-sizing: border-box; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 800; line-height: 1; }
.truck-mark.on { border-color: #16a34a; background: #16a34a; color: #fff; }
.tr-pick-item { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.tr-pick-item > span:first-child { overflow: hidden; text-overflow: ellipsis; }
.tr-pick-when { flex: 0 0 auto; font-size: 0.7rem; color: var(--muted); }
.tr-pick-when.is-today { color: #2563eb; font-weight: 700; }
/* Little ✕ inside the right of a truck's job box (shows once something is typed) */
.tr-job-box { position: relative; display: block; min-width: 0; }
.tr-job-box .tr-in { padding-right: 20px; }
.tr-job-x { position: absolute; right: 3px; top: 50%; transform: translateY(-50%); border: 0; background: none; color: #94a3b8; font-size: 0.68rem; line-height: 1; padding: 2px 3px; border-radius: 3px; cursor: pointer; }
.tr-job-x:hover { color: #b91c1c; background: #fee2e2; }
.tr-job-box:has(.tr-in:placeholder-shown) .tr-job-x { display: none; }
/* A filled (locked) job box on a truck: looks like plain text, the ✕ takes it off */
.tr-in[readonly] { background: #fff; cursor: default; }
.tr-in[readonly]:focus { box-shadow: none; border-color: #e2e8f0; }
/* "Or change the schedule date instead" in the take-off window */
.tr-resched { margin-top: 12px; padding: 10px 12px; border: 1px solid #bfdbfe; background: #eff6ff; border-radius: 8px; display: flex; flex-direction: column; gap: 8px; }
.tr-resched-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.tr-resched-row input[type=date] { font: inherit; padding: 7px 9px; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; }
/* The day shown in the Trucks column: a blue border around that whole day, down the full column */
.day-col.truck-day::after { content: ''; position: absolute; inset: 0; border: 3px solid #2563eb; border-top: 0; pointer-events: none; z-index: 2; }

/* Drag handles on the lines beside Trucks and Admin Tasks / Paperwork */
.col-resizer { flex: 0 0 6px; margin: 0 -3px; position: relative; z-index: 5; cursor: col-resize; touch-action: none; }
.col-resizer::after { content: ''; position: absolute; top: 0; bottom: 0; left: 2px; width: 2px; background: transparent; transition: background 0.15s; }
.col-resizer:hover::after, .col-resizer.dragging::after { background: #2563eb; }
body.col-resizing, body.col-resizing * { cursor: col-resize !important; user-select: none !important; }
@media (max-width: 700px) { .col-resizer { display: none; } }

/* Drag line between Admin Tasks (top) and Paperwork (bottom) */
.row-resizer { flex: 0 0 8px; margin: -4px 0; position: relative; z-index: 5; cursor: row-resize; touch-action: none; }
.row-resizer::after { content: ''; position: absolute; left: 0; right: 0; top: 3px; height: 2px; background: transparent; transition: background 0.15s; }
.row-resizer:hover::after, .row-resizer.dragging::after { background: #2563eb; }
body.row-resizing, body.row-resizing * { cursor: row-resize !important; user-select: none !important; }
@media (max-width: 700px) { .row-resizer { display: none; } }

/* Referrals board */
.ref-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.ref-card { background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--brand); border-radius: 10px; padding: 12px 14px; cursor: pointer; display: flex; flex-direction: column; gap: 8px; }
.ref-card:hover { box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
.ref-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.ref-name { font-weight: 700; font-size: 1.05rem; }
.ref-kind { display: inline-block; font-size: 0.72rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-dark); white-space: nowrap; vertical-align: middle; }
.ref-nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; text-align: center; background: #f8fafc; border-radius: 8px; padding: 6px 4px; }
.ref-nums strong { display: block; font-size: 1.05rem; }
.ref-nums.big strong { font-size: 1.5rem; color: var(--brand-dark); }
/* Call sheet: which referral partner this is linked to */
.ref-status { margin-top: 8px; color: var(--muted); }
.ref-status:empty { display: none; }
.ref-status a { font-weight: 700; }
.cs-sug .ref-kind { margin-left: 4px; }
/* Partner page: referral payout boxes and the Referral paid checkbox */
.ref-pay { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.ref-pay-box { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 1px solid #bbf7d0; background: #f0fdf4; border-radius: 8px; padding: 8px; text-align: center; font-weight: 400; }
.ref-pay-box > span:first-child { font-size: 0.75rem; color: var(--muted); }
.ref-pay-box strong { font-size: 1.5rem; color: var(--ok); }
.ref-pay-money { display: inline-flex; align-items: center; gap: 2px; font-size: 1.3rem; font-weight: 700; color: var(--ok); }
.ref-pay-money input { width: 110px; font-size: 1.3rem; font-weight: 700; color: var(--ok); text-align: center; padding: 2px 6px; border: 1px solid #86efac; border-radius: 6px; background: #fff; }
.ref-paid-cell { white-space: nowrap; }
.ref-paid { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 6px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--muted); font-size: 0.8rem; font-weight: 600; cursor: pointer; }
.ref-paid input { margin: 0; width: 16px; height: 16px; pointer-events: none; accent-color: var(--ok); }
.ref-paid.on { background: #dcfce7; border-color: #86efac; color: var(--ok); }
.ref-paid small { font-weight: 400; }
/* Referrals: one tab per "How did you hear about us?" answer, All first */
.ref-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
.ref-tab { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; }
.ref-tab:hover { border-color: var(--brand); color: var(--brand-dark); }
.ref-tab.empty { color: var(--muted); font-weight: 500; }
.ref-tab.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.ref-tab-n { min-width: 20px; padding: 0 6px; border-radius: 999px; background: #eef2f7; color: var(--muted); font-size: 0.75rem; text-align: center; }
.ref-tab.on .ref-tab-n { background: rgba(255,255,255,0.25); color: #fff; }
/* ☁ Google Drive button in the top bar */
.drive-pill { order: 3; margin-left: auto; border: 1px solid rgba(255,255,255,0.35); background: rgba(255,255,255,0.12); color: #fff; font: inherit; font-size: 0.8rem; font-weight: 600; padding: 4px 12px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.drive-pill:hover { background: rgba(255,255,255,0.22); }
.drive-pill.ok { background: rgba(34,197,94,0.25); border-color: rgba(134,239,172,0.7); }
.drive-pill.waiting { background: rgba(245,158,11,0.3); border-color: rgba(253,230,138,0.8); }
/* Not connected to Google Drive: bright red so it can't be missed (click = Google Drive page to reconnect) */
.drive-pill.off { background: #dc2626; border-color: #fecaca; color: #fff; font-weight: 700; animation: drive-pulse 2s ease-in-out infinite; }
@keyframes drive-pulse { 50% { box-shadow: 0 0 0 4px rgba(254,202,202,0.45); } }
.drive-pill.busy { opacity: 0.85; cursor: progress; }
/* Files window: "+ Add" on each folder */
.jf-title { display: flex; align-items: center; gap: 8px; }
.jf-title a { color: inherit; }
.jf-add { margin-left: auto; font-size: 0.8rem; }
/* Files window: folder description, drop target, tiny photo thumbnails (about 12-13 across) */
.jf-hint { margin: -2px 0 8px; }
.jf-empty { margin: 0; }
.jf-sec[data-jf-drop] { transition: background 0.12s, outline-color 0.12s; outline: 2px dashed transparent; outline-offset: -4px; }
.jf-sec.jf-over { background: var(--brand-soft); outline-color: var(--brand); }
.jf-thumbs { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)) auto; gap: 5px; align-items: center; }
.jf-more { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 6px; font-size: 1.2rem; font-weight: 800; line-height: 1; color: var(--brand-dark); text-decoration: none; }
.jf-more small { font-size: 0.7rem; font-weight: 700; color: var(--muted); }
.jf-thumb { position: relative; aspect-ratio: 1; border-radius: 5px; overflow: hidden; background: #e2e8f0; }
.jf-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: pointer; }
.jf-thumb.waiting img { opacity: 0.6; }
.jf-thumb-del { position: absolute; top: 1px; right: 1px; width: 16px; height: 16px; padding: 0; border: 0; border-radius: 50%; background: rgba(0,0,0,0.6); color: #fff; font-size: 11px; line-height: 16px; cursor: pointer; display: none; }
.jf-thumb:hover .jf-thumb-del { display: block; }

/* Job page: main content + a right column (Technician Tasks, Admin Tasks, Notes) that stays put while the page scrolls */
.job-layout { display: flex; align-items: flex-start; }
.job-main { flex: 1; min-width: 0; padding-right: 10px; }
.job-layout > .col-resizer { align-self: stretch; }
.job-side { flex: 0 0 var(--jsidew, 360px); width: var(--jsidew, 360px); position: sticky; top: 66px; height: calc(100vh - 78px);
  display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--card); margin-left: 6px; }
.jside-panel { flex: 1 1 0; min-height: 60px; display: flex; flex-direction: column; }
.jside-panel .ap-head { position: static; }
.jside-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px; }
.jside-body .tk-box { margin: 0; }
.jside-tech .ap-head { background: #0b6fb8; color: #fff; border-bottom-color: #0a5c99; }
.jside-tech .ap-head .badge { background: rgba(255,255,255,0.25); color: #fff; }
.jside-tech .jside-body { background: #f0f7fd; }
.jside-admin .ap-head { border-top: 2px solid #c4b5fd; }
.jside-admin .jside-body { background: #faf5ff; }
.jside-notes .ap-head { background: #dcfce7; color: #166534; border-bottom-color: #bbf7d0; border-top: 2px solid #86efac; }
.jside-notes .jside-body { background: #f0fdf4; }
.jside-notes textarea { width: 100%; min-height: 60px; }
.job-side > .row-resizer { margin: -4px 0; }
@media (max-width: 900px) {
  .job-layout { flex-direction: column; align-items: stretch; }
  .job-layout > .col-resizer, .job-side > .row-resizer { display: none; }
  .job-side { position: static; width: auto; height: auto; margin: 16px 0 0; }
  .jside-panel { flex: 0 0 auto !important; }
  .jside-body { max-height: 320px; }
}
.jside-body .tk-label { display: none; }
/* Job page: the Job file box. Each folder scrolls on its own; drag its bottom-right corner to make it taller or shorter. */
.jf-panel .jf-sec { margin-bottom: 10px; }
.jf-panel .jf-body { overflow-y: auto; overscroll-behavior: contain; resize: vertical; min-height: 44px; padding-right: 4px; }
.jf-panel .jf-body:not([style*="height"]) { max-height: 170px; }
.jf-thumbs.jf-thumbs-all { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
.jf-checklist { margin-bottom: 8px; }
.jf-checklist .tk-label { display: none; }

/* Job pop-up over the Paperwork / Collections boards (app.js jobPopupHtml): the full job page in a big window */
.job-pop { position: fixed; inset: 0; z-index: 45; background: rgba(15, 23, 42, 0.55); display: flex; align-items: flex-start; justify-content: center; padding: 18px; }
.job-pop-box { width: min(1700px, 100%); height: calc(100vh - 36px); overflow-y: auto; overscroll-behavior: contain; background: var(--bg, #f3f6fa); border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,0.35); padding: 0 14px 14px; }
.job-pop-bar { position: sticky; top: 0; z-index: 8; display: flex; justify-content: flex-end; align-items: center; gap: 14px; margin: 0 -14px 6px; padding: 8px 14px; background: inherit; border-bottom: 1px solid var(--line); }
.job-pop .job-back { display: none; }
.job-pop .job-side { top: 54px; height: calc(100vh - 110px); }
body.job-pop-open { overflow: hidden; }

/* Job page: checked sections (✓ / ✗) and sections that fold up to one line (jobsheet.js jsCheckedHtml) */
.js-sec { position: relative; }
.js-check { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; font-weight: 800; font-size: 0.85rem; flex: 0 0 auto; cursor: default; }
.js-check.ok { background: #dcfce7; color: #15803d; }
.js-check.bad { background: #fee2e2; color: #dc2626; }
.js-sec-tools { position: absolute; top: 8px; right: 10px; z-index: 1; display: flex; align-items: center; gap: 6px; }
.js-fold-up { opacity: 0.75; }
.js-fold-up:hover { opacity: 1; }
.js-fold-bar { display: none; align-items: center; gap: 10px; border: 1.5px solid var(--cs, var(--line)); border-radius: 10px; padding: 9px 14px; margin-bottom: 12px; background: #fff; cursor: pointer; }
.js-fold-bar:hover { background: #f8fafc; }
.js-fold-name { white-space: nowrap; }
.js-fold-sum { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted, #64748b); font-size: 0.9rem; }
.js-sec.folded .js-fold-bar { display: flex; }
.js-sec.folded > .js-sec-tools, .js-sec.folded > .cs-sec { display: none; }
/* Board cards: what's not filled in yet (jobMissingHtml) */
.job-missing { margin-top: 4px; font-size: 0.75rem; font-weight: 600; color: #dc2626; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Phone (techs): Technician Tasks move above Admin Tasks everywhere (desktop keeps Admin Tasks first) */
@media (max-width: 700px) {
  #tlTasks, #mvTasks, #atTasks { display: flex; flex-direction: column; }
  .tk-box.tk-tech { order: -1; }
  .job-side .jside-tech { order: -1; }
}
/* Customer page: Job files card, one file per job (app.js customerFilesCard) */
.cust-files { display: flex; flex-wrap: wrap; gap: 10px; }
.cust-file { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 110px; padding: 10px 6px 8px; border: 1px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer; font: inherit; color: inherit; }
.cust-file .cf-icon { font-size: 2.2rem; line-height: 1; }
.cust-file strong { font-size: 0.85rem; }
.cust-file span { font-size: 0.75rem; color: var(--muted, #64748b); }
.cust-file .cf-status { font-weight: 600; color: #0b6fb8; }
.cust-file:hover { border-color: #93c5fd; background: #eff6ff; }
.cust-file.closed { opacity: 0.6; }
/* Insurance page: the carrier's main line and each contact's title */
.ins-main { margin-top: 2px; }
.ins-title { display: inline-block; padding: 2px 8px; border-radius: 999px; background: #e0f2fe; color: #075985; font-size: 0.8rem; font-weight: 600; }
/* Type-in boxes with suggestions (app.js wireSuggest): the list sits right under the box */
.sugg-holder { position: relative; }
.sugg-box { position: absolute; z-index: 90; background: #fff; border: 1px solid #93c5fd; border-radius: 7px; box-shadow: 0 6px 18px rgba(15,23,42,0.16); padding: 3px; max-height: 260px; overflow-y: auto; }
.sugg-item { padding: 7px 10px; border-radius: 5px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sugg-item:hover, .sugg-item.on { background: #dbeafe; color: #1e3a8a; }
/* Insurance page: every carrier's contact table uses the same column widths, so the columns line up down the page */
.ins-table { table-layout: fixed; width: 100%; }
.ins-table .c-name { width: 20%; }
.ins-table .c-title { width: 15%; }
.ins-table .c-phone { width: 16%; }
.ins-table .c-email { width: 25%; }
.ins-table .c-jobs { width: 8%; }
.ins-table .c-edit { width: 16%; }
.ins-table td, .ins-table th { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.ins-table .ins-edit { text-align: right; }
/* Insurance page: each contact table is a closed box with clear lines between rows and columns */
.ins-table { border: 1.5px solid #b6c3d1; border-collapse: separate; border-spacing: 0; border-radius: 8px; overflow: hidden; margin-top: 4px; }
.ins-table th { background: #eef3f8; border-bottom: 1.5px solid #b6c3d1; }
.ins-table td { border-bottom: 1px solid #cdd7e1; }
.ins-table tr:last-child td { border-bottom: 0; }
.ins-table th + th, .ins-table td + td { border-left: 1px solid #dde4ec; }
.ins-table .ins-edit, .ins-table th:last-child { border-left: 1.5px solid #b6c3d1; text-align: center; }
.ins-table tr:hover td { background: #f8fafc; }
/* Jobs board: the columns share the whole screen width, however big it is (still 240px minimum, then scrolls) */
.board-jobs > .col { flex: 1 1 0; width: auto; min-width: 240px; }
/* Jobs board: Estimate column (app.js estimateColumn) */
.col-estimate { background: #eef2ff; }
.col-estimate .col-head strong { color: #3730a3; }
.col-estimate .moves .btn { width: 100%; justify-content: center; }
.est-wait { color: #3730a3; font-weight: 600; }
.est-wait.late { color: #dc2626; }

/* ---------- Field view: the technician's phone screen (field.js, #/field) ---------- */
body.field-mode main { padding: 0; }
.fd { max-width: 560px; margin: 0 auto; padding: 14px 14px 40px; }
.fd-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.fd-hello { font-size: 1.35rem; font-weight: 700; }
.fd-link { background: none; border: 0; padding: 4px 0; color: var(--brand); font: inherit; font-size: 0.85rem; cursor: pointer; }
.fd-daybar { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.fd-daybar .btn { min-width: 46px; min-height: 44px; }
.fd-daylabel { flex: 1; min-height: 44px; border: 1px solid var(--line); background: var(--card); border-radius: var(--radius); font: inherit; font-weight: 700; cursor: pointer; }
.fd-list { display: flex; flex-direction: column; gap: 10px; }
.fd-row { display: block; background: var(--card); border: 1px solid var(--line); border-left: 6px solid var(--tc, var(--brand)); border-radius: var(--radius); padding: 12px 14px; color: var(--ink); text-decoration: none; }
.fd-row.mine { box-shadow: 0 0 0 2px #93c5fd; }
.fd-row-top { display: flex; justify-content: space-between; gap: 8px; font-size: 1.05rem; }
.fd-time { color: var(--muted); font-weight: 600; white-space: nowrap; }
.fd-row-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.fd-row-tags:empty { display: none; }
.fd-tag { font-size: 0.75rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: #e2e8f0; color: #334155; }
.fd-tag.mine { background: #dbeafe; color: #1d4ed8; }
.fd-tag.tech { background: #e0f2fe; color: #0b6fb8; }
.fd-empty { margin: 4px 0; }
.fd-h { margin: 22px 0 8px; }
.fd-search { width: 100%; font: inherit; font-size: 16px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 10px; }
.fd-back { display: inline-block; padding: 6px 0 10px; font-weight: 600; text-decoration: none; }
.fd-job-head { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; margin-bottom: 14px; }
.fd-job-head h1 { font-size: 1.4rem; margin-bottom: 4px; }
.fd-contact { display: block; margin-top: 8px; padding: 10px 12px; background: var(--brand-soft); border-radius: 8px; text-decoration: none; font-weight: 600; }
.fd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.fd-btn { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 96px;
  background: var(--card); border: 2px solid var(--line); border-radius: 14px; font: inherit; font-weight: 700; font-size: 1rem; color: var(--ink); cursor: pointer; }
.fd-btn:active { background: var(--brand-soft); border-color: var(--brand); }
.fd-ico { font-size: 1.9rem; line-height: 1; }
.fd-count { position: absolute; top: 8px; right: 10px; min-width: 22px; padding: 1px 6px; border-radius: 999px; background: var(--brand); color: #fff; font-size: 0.75rem; text-align: center; }
.fd-tasks { display: flex; flex-direction: column; gap: 12px; }
.fd-tasks .jside-panel { flex: 0 0 auto; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--card); }
.fd-tasks .jside-body { max-height: none; }
.fd-tasks .ap-head .small { margin-left: 6px; font-weight: 400; opacity: 0.8; margin-right: auto; }
/* The list of choices that slides up from the bottom */
.fd-sheet { position: fixed; inset: 0; z-index: 50; background: rgba(15, 23, 42, 0.45); display: flex; align-items: flex-end; justify-content: center; }
.fd-sheet[hidden] { display: none; }
.fd-sheet-box { width: 100%; max-width: 560px; max-height: 85vh; overflow-y: auto; background: var(--card); border-radius: 16px 16px 0 0; padding: 14px 14px 28px; display: flex; flex-direction: column; gap: 10px; }
.fd-sheet-head { display: flex; justify-content: space-between; align-items: center; font-size: 1.1rem; }
.fd-opt { display: flex; flex-direction: column; justify-content: center; min-height: 52px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: #f8fafc;
  font-weight: 600; color: var(--ink); text-decoration: none; cursor: pointer; }
.fd-opt:active { background: var(--brand-soft); }
.fd-opt.off { color: #94a3b8; cursor: default; background: #f1f5f9; }
.fd-opt small { font-weight: 400; font-size: 0.78rem; }
.fd-contract { display: flex; flex-direction: column; gap: 6px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.fd-contract:last-child { border-bottom: 0; }
.fd-steps { margin: 0; padding-left: 22px; line-height: 1.6; }

/* Phone only (user, 2026-10-20): no "Restoration CRM" title or Connect Drive button in the top bar, and no Schedule
   toolbar (title, Today, dates, color key, + Schedule Event, + New Call Sheet). Desktop is unchanged. */
@media (max-width: 700px) {
  .topbar .brand, .topbar .drive-pill { display: none !important; }
  .sched-toolbar { display: none; }
}

/* Phone only: the Trucks column shows one truck at a time, picked with buttons (trucks.js, trPicked). Desktop shows them all. */
.tr-trucksel { display: none; }
@media (max-width: 700px) {
  .tr-trucksel { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; margin-top: 4px; }
  .tr-trucksel button { flex: 1 1 auto; min-height: 40px; padding: 6px 12px; border: 1px solid #93c5fd; border-radius: 999px; background: #fff; color: #1e3a8a; font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; }
  .tr-trucksel button.on { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }
  .truck-panel .tr-tile:not(.picked), .truck-panel .tr-add-truck { display: none; }
  .truck-panel .tr-list { max-height: none; }
  .truck-panel .tr-head { flex-shrink: 0; }
}

/* Phone only: one day at a time (user, 2026-10-20). No "Trucks" title or truck date (the truck shows today),
   no Weekend On Call, no Admin Tasks / Technician Task / Paperwork column. The bar above the board
   (◀ 📅 date ▶, schedule.js schedDayBarHtml) picks the board's day only. Desktop is unchanged. */
.sched-daybar { display: none; }
@media (max-width: 700px) {
  .truck-panel .tr-head strong, .truck-panel .tr-day { display: none; }
  .sched-daybar { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: #dbeafe; border-bottom: 1px solid #bfdbfe; }
  .sched-daybar .pw-arrow { min-width: 44px; min-height: 40px; }
  .sd-date { position: relative; flex: 1; text-align: center; padding: 8px 6px; border: 1px solid #93c5fd; border-radius: 8px; background: #fff; color: #1e3a8a; font-weight: 600; cursor: pointer; white-space: nowrap; }
  .sd-date.is-today { color: var(--brand-dark); }
  .sd-pick { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
  .sched-wrap .side-panel, .sched-wrap .col-resizer { display: none !important; }
  .sched { overflow-x: hidden; }
  .sched .sched-head { display: none; }
  .sched .sched-head, .sched .day-row { grid-template-columns: 1fr !important; width: 100% !important; }
  .sched .day-col:not(.phone-day) { display: none; }
  .sched .day-col.truck-day::after { display: none; }
  .sched.past-day .day-row::before { content: "Past days aren't on the schedule. Pick today or a later day."; padding: 16px; color: var(--muted); }
}


/* Technician list window (crew.js) and the Head tech / Helper drop-downs */
.te-list { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 10px; }
.te-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 6px; align-items: center; }
.te-row input { font: inherit; padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px; min-width: 0; }
select.tr-in { width: 100%; min-width: 0; cursor: pointer; }

/* Tech view: My jobs / All jobs switch (field.js) */
.fd-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-bottom: 12px; background: #e2e8f0; border-radius: 12px; }
.fd-toggle button { min-height: 42px; border: 0; border-radius: 9px; background: transparent; font: inherit; font-weight: 700; color: #475569; cursor: pointer; }
.fd-toggle button.on { background: #fff; color: var(--brand-dark); box-shadow: 0 1px 3px rgba(15, 23, 42, 0.15); }
.fd-toggle button span { display: inline-block; min-width: 20px; margin-left: 4px; padding: 0 6px; border-radius: 999px; background: #cbd5e1; color: #334155; font-size: 0.75rem; }
.fd-toggle button.on span { background: var(--brand); color: #fff; }
.fd-tag.none { background: #ffedd5; color: #c2410c; }
/* My jobs / All jobs sits next to the name at the top (small, to save room) */
.fd-top { align-items: center; }
.fd-top .fd-toggle { flex: 0 0 auto; margin: 0; padding: 3px; gap: 3px; border-radius: 10px; }
.fd-top .fd-toggle button { min-height: 36px; padding: 0 10px; font-size: 0.85rem; white-space: nowrap; }
.fd-top .fd-toggle button span { margin-left: 3px; padding: 0 5px; min-width: 18px; }

/* ---------- Phone header (user, 2026-10-20) ----------
   Left: 📱 Tech view (admin view) or 💻 Admin view (tech view). Right: ☰ <page> ▾ opens the page menu as a drop-down.
   The tech view has no page menu. On a computer none of this shows and the top menu is unchanged. */
.view-switch, .nav-menu-btn { display: none; }
@media (max-width: 700px) {
  .topbar { flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; min-height: 50px; }
  .view-switch { display: flex; }
  .view-switch a { display: flex; flex-direction: column; align-items: center; padding: 4px 6px 3px; color: #d6e7f5; text-decoration: none; line-height: 1.1; font-size: 1rem; }
  .view-switch small { font-size: 0.6rem; font-weight: 600; white-space: nowrap; }
  body:not(.field-mode) .view-switch .nav-admin, body.field-mode .view-switch .nav-tech { display: none; }
  .nav-menu-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid rgba(255,255,255,0.35); border-radius: 8px;
    background: rgba(255,255,255,0.12); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
  body.field-mode .nav-menu-btn { display: none; }
  /* The menu itself: hidden until ☰ is tapped, then a list under the button on the right */
  #nav { display: none; }
  body.nav-open:not(.field-mode) #nav { display: flex; flex-direction: column; gap: 0; position: absolute; top: 100%; right: 8px; min-width: 210px; max-height: 75vh; overflow-y: auto;
    background: #fff; border-radius: 10px; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.25); padding: 6px; z-index: 60; }
  body.nav-open #nav a { color: var(--ink); padding: 12px 14px; border-bottom: 0; border-radius: 7px; }
  body.nav-open #nav a.active { background: var(--brand-soft); color: var(--brand-dark); }
}

/* ---------- Search anything (search.js; user, 2026-10-21) ----------
   A box in the blue top bar on every screen (computer, phone admin view, tech view). Matches drop down under it;
   a match opens in a pop-up over the screen you're on (✕ to go back). */
.gs-bar { order: 2; display: flex; align-items: center; gap: 4px; margin-left: auto; width: 240px; min-width: 0; padding: 0 4px 0 10px;
  background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.35); border-radius: 999px; transition: width 0.15s; }
.gs-bar:focus-within { width: 380px; background: #fff; border-color: #fff; }
.gs-glass { font-size: 0.85rem; opacity: 0.85; }
.gs-bar input { flex: 1; min-width: 0; font: inherit; font-size: 0.9rem; color: #fff; padding: 6px 4px; border: 0; background: transparent; outline: 0; }
.gs-bar input::placeholder { color: rgba(255,255,255,0.8); }
.gs-bar:focus-within input { color: var(--ink); }
.gs-bar:focus-within input::placeholder { color: var(--muted); }
.gs-clear { flex: 0 0 auto; width: 26px; height: 26px; border: 0; border-radius: 50%; background: rgba(0,0,0,0.08); color: inherit; cursor: pointer; font-size: 0.8rem; }
.gs-bar:not(:focus-within) .gs-clear { color: #fff; background: rgba(255,255,255,0.18); }
.topbar .drive-pill { margin-left: 0; }
#gsInput::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.gs-results { display: none; }
body.gs-open .gs-results:not([hidden]) { display: block; position: fixed; right: 16px; width: min(560px, calc(100vw - 32px)); z-index: 1100;
  max-height: 70vh; overflow-y: auto; background: #fff; border-radius: 12px; box-shadow: 0 12px 32px rgba(15, 23, 42, 0.28); padding: 6px; }
.gs-hit { display: grid; grid-template-columns: 28px 1fr; gap: 2px 8px; width: 100%; text-align: left; padding: 9px 8px; border: 0; border-bottom: 1px solid var(--line);
  background: none; font: inherit; color: var(--ink); cursor: pointer; border-radius: 6px; }
.gs-hit:last-of-type { border-bottom: 0; }
.gs-hit:hover, .gs-hit:active, .gs-hit.on { background: var(--brand-soft); }
.gs-ico { grid-row: span 2; font-size: 1.2rem; line-height: 1.4; text-align: center; }
.gs-main { display: flex; flex-direction: column; min-width: 0; }
.gs-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-match { font-size: 0.82rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-match strong { color: var(--ink); }
.gs-where { grid-column: 2; justify-self: start; margin-top: 3px; padding: 1px 8px; border-radius: 999px; background: #e0f2fe; color: #075985; font-size: 0.72rem; font-weight: 700; }
.gs-none, .gs-more { margin: 10px; }
@media (max-width: 700px) {
  /* Phone (admin and tech view): between the left button and the view switch, as wide as there's room for */
  .topbar .gs-bar { order: 1; flex: 1 1 auto; width: auto; margin: 0; }
  .topbar .gs-bar:focus-within { width: auto; }
  .gs-bar input { font-size: 16px; }   /* 16px: iPhone doesn't zoom in */
  body.gs-open .gs-results:not([hidden]) { left: 8px; right: 8px; width: auto; }
}
/* Pop-up for a search match that isn't a job (customer, referral partner, insurance, technician): that page in a window */
.sp-pop { position: fixed; inset: 0; z-index: 1050; background: rgba(15, 23, 42, 0.5); display: flex; align-items: center; justify-content: center; padding: 20px; }
.sp-box { width: min(1200px, 100%); height: min(88vh, 100%); background: var(--bg); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 20px 50px rgba(0,0,0,0.35); }
.sp-bar { display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: var(--card); border-bottom: 1px solid var(--line); }
.sp-bar strong { margin-right: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-box iframe { flex: 1; width: 100%; border: 0; }
@media (max-width: 700px) { .sp-pop { padding: 0; } .sp-box { height: 100%; border-radius: 0; } }

/* Customer page: job files at the top on a phone (app.js customerTopFiles; user, 2026-10-20). Desktop unchanged. */
.cust-top { margin: 1em 0; }   /* same spacing the old <p> line had */
.cust-top-files { display: none; }
@media (max-width: 700px) {
  .cust-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
  .cust-top > a { padding-top: 8px; }
  .cust-top-files { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
  .cust-top-file { display: flex; flex-direction: column; align-items: flex-start; padding: 7px 12px; border: 1px solid #93c5fd; border-radius: 10px; background: var(--brand-soft);
    color: var(--brand-dark); font: inherit; font-size: 0.9rem; text-align: left; cursor: pointer; }
  .cust-top-file span { font-size: 0.72rem; color: var(--muted); }
  .cust-top-file.closed { opacity: 0.65; }
  .cust-files-card { display: none; }
}

/* Tech view job screen: 📁 Job file in the header opens the whole job file (user, 2026-10-20).
   Opened from the tech view it has no 🗑 Delete job and no "Open as full page" (that would leave the tech view). */
.fd-head-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.fd-file-btn { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 12px; border: 2px solid var(--line); border-radius: 12px;
  background: var(--card); color: var(--ink); font-size: 1.6rem; line-height: 1; text-decoration: none; }
.fd-file-btn span { font-size: 0.8rem; font-weight: 700; }
.fd-file-btn:active { background: var(--brand-soft); border-color: var(--brand); }
.fd-grid > .fd-btn:last-child:nth-child(odd) { grid-column: 1 / -1; min-height: 72px; }
body.field-mode #jobPop [data-action="deleteJob"], body.field-mode #jobPop .job-pop-bar a[href^="#/job/"] { display: none; }

/* Tech view: 👥 Alt contact next to the phone, with its drop-down list / editor (field.js; user, 2026-10-20) */
.fd-phone-row { display: flex; align-items: stretch; gap: 6px; margin-top: 8px; }
.fd-phone-row .fd-contact { flex: 1; margin-top: 0; }
.fd-alt-btn { flex: 0 0 auto; padding: 6px 10px; border: 1px solid #c4b5fd; border-radius: 8px; background: #f5f3ff; color: #6d28d9; font: inherit; font-size: 0.82rem; font-weight: 700; cursor: pointer; white-space: nowrap; }
.fd-alt-btn span { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 999px; background: #7c3aed; color: #fff; font-size: 0.72rem; text-align: center; }
.fd-alt-btn[aria-expanded="true"] { background: #ede9fe; }
.fd-alt { margin-top: 8px; padding: 10px; border: 1px solid #c4b5fd; border-radius: 10px; background: #faf5ff; display: flex; flex-direction: column; gap: 8px; }
.fd-alt[hidden] { display: none; }
.fd-alt > .btn { align-self: flex-start; }
.fd-alt-row { display: flex; flex-direction: column; gap: 4px; padding-bottom: 8px; border-bottom: 1px solid #e9d5ff; }
.fd-alt-call { align-self: flex-start; padding: 6px 10px; border-radius: 8px; background: #fff; border: 1px solid #ddd6fe; font-weight: 600; text-decoration: none; }
.fd-alt-elist { display: flex; flex-direction: column; gap: 8px; }
.fd-alt-erow { display: grid; grid-template-columns: 1fr 1fr auto; gap: 6px; padding-bottom: 8px; border-bottom: 1px solid #e9d5ff; }
.fd-alt-erow input { min-width: 0; font: inherit; font-size: 16px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.fd-alt-erow input:nth-of-type(3) { grid-column: 1 / 3; }
.fd-alt-erow .btn { grid-row: 1; grid-column: 3; }
.fd-alt-actions { display: flex; justify-content: flex-end; gap: 6px; }

/* Tech view: Admin Tasks folded to the newest task (field.js fdAdminFold) */
.fd-fold { margin-left: 6px; padding: 3px 9px; border: 1px solid #c4b5fd; border-radius: 999px; background: #fff; color: #6d28d9; font: inherit; font-size: 0.75rem; font-weight: 700; cursor: pointer; white-space: nowrap; }
.fd-tasks #sideAdmin.fd-folded .tk-chip:not(.fd-newest) { display: none; }

/* Tech view: Estimate and Money received in the job's header box (field.js; user, 2026-10-20) */
.fd-money { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.fd-money label { display: flex; flex-direction: column; gap: 3px; font-size: 0.8rem; font-weight: 700; color: var(--muted); }
.fd-money input { font: inherit; font-size: 16px; font-weight: 600; color: var(--ink); padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; min-width: 0; }
.fd-money label { min-width: 0; } .fd-money input { width: 100%; box-sizing: border-box; }
/* Phone header, swapped (user, 2026-10-20): ☰ page menu on the left, the 📱 / 💻 view switch on the right (both views) */
@media (max-width: 700px) {
  .topbar .nav-menu-btn { order: -1; }
  .topbar .view-switch { order: 2; margin-left: auto; }
  body.nav-open:not(.field-mode) #nav { right: auto; left: 8px; }
}
/* Tech view: ‹ Back, top left of the blue bar, on every tech screen except My Day itself (field.js fdBack) */
.fd-back-btn { display: none; }
@media (max-width: 700px) {
  body.field-mode.fd-sub .fd-back-btn { display: inline-flex; align-items: center; order: -1; padding: 7px 12px; border: 1px solid rgba(255,255,255,0.35); border-radius: 8px;
    background: rgba(255,255,255,0.12); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
}
@media (max-width: 700px) {
  /* Tech view: the job file opens under the blue bar, so ‹ Back stays in the same spot (it closes the job file) */
  body.field-mode .job-pop { top: var(--fd-bar, 50px); }
  body.field-mode .topbar { z-index: 1001; }
}
@media (max-width: 700px) {
  body.field-mode .job-pop-box { height: calc(100vh - var(--fd-bar, 50px) - 36px); }
}

/* Tech view buttons (2026-10-20): Before / During / After choice, and Review & Send */
.fd-phases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fd-phase { align-items: center; min-height: 64px; font-size: 1.05rem; }
.fd-btn.fd-review { border-color: #93c5fd; background: var(--brand-soft); color: var(--brand-dark); }
.fd-rv-row { display: grid; grid-template-columns: 22px 100px 1fr; gap: 6px; align-items: baseline; padding: 8px 4px; border-bottom: 1px solid var(--line); }
.fd-rv-row.ok > span:first-child { color: var(--ok); font-weight: 700; }
.fd-rv-row.miss > span:first-child { color: #c2410c; font-weight: 700; }
.fd-rv-row.miss .small { color: #c2410c; }
.fd-rv-note { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; font-weight: 700; font-size: 0.85rem; }
.fd-rv-note textarea { font: inherit; font-size: 16px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; }
.fd-rv-send { min-height: 48px; font-size: 1rem; }

/* Tech view: ⭐ Review Send sheet (field.js fdDrawReviewSend) */
.fd-rv-via { margin: 4px 0 8px; }
.fd-rv-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; font-weight: 700; font-size: 0.85rem; }
.fd-rv-field input, .fd-rv-field textarea { font: inherit; font-size: 16px; font-weight: 400; padding: 10px; border: 1px solid var(--line); border-radius: 8px; }
.fd-rv-last { color: var(--ok); margin: 0 0 6px; }
.fd-rv-warn { color: #c2410c; margin: 0 0 6px; }
.fd-btn.fd-review { border-color: #fcd34d; background: #fffbeb; color: #92400e; }

/* Job page: what's in the job folder (✓ Contract …), under the job's name (jobfiles.js jobFolderChecksHtml) */
.jf-checks { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 12px; }
.jf-checks:empty { display: none; }
.jfc-title { font-size: 0.82rem; font-weight: 700; color: var(--muted); margin-right: 2px; }
.jfc { font-size: 0.8rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; border: 1px solid; }
.jfc.ok { color: #15803d; background: #dcfce7; border-color: #86efac; }
.jfc.no { color: #94a3b8; background: #f8fafc; border-color: #e2e8f0; }
.jfc small { font-size: 0.7rem; opacity: 0.8; }

/* Job page: "🗓 Schedule a visit" under Status / Delete job, and the 🗓 Visits log card (app.js jobScheduleHtml / jobVisitsHtml) */
.job-head-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.job-visits { padding: 12px 16px; }
.jv-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.jv-list { display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow-y: auto; }
.jv-row { display: grid; grid-template-columns: 10px 140px 100px minmax(60px, 1fr); row-gap: 5px; align-items: center; column-gap: 10px; text-align: left;
  font: inherit; font-size: 13px; cursor: pointer; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; }
.jv-row:hover { border-color: #3b82c4; background: #eef6ff; }
.jv-row.past { color: #5b6673; background: #fafbfc; }
.jv-row.today { border-color: #3b82c4; box-shadow: 0 0 0 1px #3b82c4 inset; }
.jv-row .tl-dot { width: 9px; height: 9px; }
.jv-tag { font-size: 11px; font-weight: 700; color: #0b6fb8; background: #e3f0fb; border-radius: 999px; padding: 2px 8px; }
.jv-row.today .jv-tag { color: #fff; background: #0b6fb8; }
.job-sched-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.js-now { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 14px; background: #fff; border: 1px solid var(--line);
  border-radius: 8px; padding: 7px 12px; cursor: pointer; }
button.js-now:hover { border-color: #3b82c4; background: #eef6ff; }
.js-now.none { color: #8a6d1d; background: #fff8e1; border-color: #f1d27a; cursor: default; }
.js-pill { font-size: 12px; font-weight: 700; color: var(--tc); background: var(--tb); border: 1px solid var(--tl); border-radius: 999px; padding: 2px 9px; }
body.field-mode .job-sched-row, body.field-mode .job-visits { display: none; }
@media (max-width: 700px) {
  .job-head-right { align-items: stretch; }
  .jv-row { grid-template-columns: 10px 1fr; row-gap: 3px; }
  .jv-row > :not(.tl-dot) { grid-column: 2; }
}

/* Visits log: who went + ✓ / ✗ per item, and the review window (visits.js) */
.jv-who { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jv-checks { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 4px; }
.jv-checks:empty { display: none; }
.jv-check { font-size: 11px; font-weight: 600; border-radius: 999px; padding: 1px 7px; color: #b91c1c; background: #fee2e2; white-space: nowrap; }
.jv-check.on { color: #15803d; background: #dcfce7; }
#csAskDialog.jvr-wide { width: min(760px, 94vw); max-width: none; }
.jvr { max-height: 62vh; overflow-y: auto; text-align: left; }
.jvr-sub { margin: 0 0 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.jvr-sec { border: 1px solid var(--line); border-left: 4px solid #dc2626; border-radius: 8px; padding: 8px 12px; margin-bottom: 8px; }
.jvr-sec.on { border-left-color: #16a34a; }
.jvr-sec h3 { margin: 0; font-size: 15px; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.jvr-sec summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 6px; }
.jvr-sec summary::-webkit-details-marker { display: none; }
.jvr-sec summary::before { content: "▸"; color: #64748b; font-size: 13px; }
.jvr-sec[open] summary::before { content: "▾"; }
.jvr-sec[open] summary { margin-bottom: 8px; }
.jvr-desc { font-size: 13px; font-weight: 400; color: #334155; }
.jvr-phases { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(96px, 1fr); gap: 10px; }
.jvr-col { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.jvr-col img { width: 100%; max-width: 140px; aspect-ratio: 1; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); cursor: pointer; }
.jvr-col img:hover, .jvr-file:hover { outline: 2px solid #3b82c4; }
.jvr-files { display: flex; flex-wrap: wrap; gap: 10px; }
.jvr-file { margin: 0; width: 120px; cursor: pointer; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: #f8fafc; }
.jvr-file img, .jvr-file .jvr-icon { display: flex; align-items: center; justify-content: center; width: 100%; height: 110px; object-fit: cover; font-size: 40px; }
.jvr-file figcaption { font-size: 11px; padding: 4px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: #fff; }
.jvr-none { color: #b91c1c; }
.jvr-line { margin: 2px 0; font-size: 13px; }
.jvr-phase { font-size: 12px; font-weight: 700; color: #475569; }

/* ✏️ Edit visit window (visits.js openVisitEdit) */
.ve-h { margin: 0 0 8px; font-size: 15px; }
.ve-people { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.ve-person { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; background: #fff; cursor: pointer; font-weight: 500; }
.ve-person:has(input:checked) { border-color: #16a34a; background: #dcfce7; }
.ve-other { width: 100%; max-width: 320px; }
.ve-row { display: grid; grid-template-columns: 110px 54px 1fr; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); }
.ve-row:first-child { border-top: 0; }
.ve-count { font-size: 12px; font-weight: 700; color: #b91c1c; background: #fee2e2; border-radius: 999px; padding: 2px 8px; text-align: center; }
.ve-count.on { color: #15803d; background: #dcfce7; }
.ve-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ve-add { cursor: pointer; }
/* Visit marks: ↪ = needed here but sent on another visit; not needed = grey (visits.js visitMarks) */
.jv-check.later, .ve-count.later { color: #475569; background: #e2e8f0; }
.ve-count.skip { color: #64748b; background: #f1f5f9; }
.jvr-sec.later { border-left-color: #94a3b8; }
/* "In the folder" row: not there yet = empty box waiting to turn green */
.jfc.no { color: #64748b; background: #fff; border-style: dashed; border-color: #cbd5e1; }
.jfc-box { display: inline-block; width: 10px; height: 10px; border: 1.5px solid #94a3b8; border-radius: 3px; vertical-align: -1px; }

/* Follow Up Estimate tile (schedule.js): grey, see-through, under the day's +; 3 Follow up boxes instead of tasks / truck box */
.tile-appt.is-followup { background: #f1f5f9; border: 1px dashed #94a3b8; border-left: 5px solid #94a3b8; color: #475569; opacity: 0.7; }
.tile-appt.is-followup:hover { opacity: 1; }
.tile-appt.is-followup .appt-title { color: #475569; }
.fu-boxes { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.fu-box { font: inherit; font-size: 0.75rem; text-align: left; background: #fff; border: 1px solid #cbd5e1; border-radius: 4px; padding: 1px 6px; color: #475569; cursor: pointer; }
.fu-box:hover { border-color: #64748b; }
.fu-box.on { background: #e2e8f0; color: #1e293b; font-weight: 600; }
.fu-lost { margin-top: 4px; width: 100%; font: inherit; font-size: 0.75rem; font-weight: 700; color: #b91c1c; background: #fff; border: 1px solid #fca5a5; border-radius: 4px; padding: 2px 6px; cursor: pointer; }
.fu-lost:hover { background: #fee2e2; }
.day-col .cell-add + .tile-appt.is-followup { margin-top: 8px; }
.fu-reset { margin-top: 3px; width: 100%; font: inherit; font-size: 0.75rem; font-weight: 600; color: #334155; background: #fff; border: 1px solid #cbd5e1; border-radius: 4px; padding: 2px 6px; cursor: pointer; }
.fu-reset:hover { background: #e2e8f0; }
/* Visits log: estimate follow-up calls (visits.js jobVisitsHtml) */
.jv-row.jv-fu { cursor: default; background: #f8fafc; color: #475569; border-style: dashed; }
.jv-row.jv-fu:hover { border-color: var(--line); background: #f8fafc; }
.jv-fu-icon { width: 10px; font-size: 12px; line-height: 1; color: #475569; }
/* Move window: Follow up notes for Follow Up Estimate tiles (move.js followNotesHtml) */
.mv-fu-past { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; max-height: 180px; overflow-y: auto; }
.mv-fu-note { width: 100%; min-height: 90px; font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; box-sizing: border-box; }
.jv-see { padding: 1px 8px; font-size: 12px; }
.fu-note-text { white-space: pre-wrap; text-align: left; background: #f8fafc; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }

/* Tech view job screen = one screen of buttons (user, 2026-10-21): 8 buttons incl. Technician Tasks + Admin Tasks */
body.field-mode .fd-grid { gap: 8px; margin-bottom: 8px; }
body.field-mode .fd-btn { min-height: 74px; gap: 2px; padding-top: 6px; padding-bottom: 6px; }
body.field-mode .fd-ico { font-size: 1.6rem; }
.fd-sheet .fd-tasks .jside-panel { border: 0; }
.fd-sheet .fd-tasks .ap-head { display: none; }   /* the sheet has its own title */

/* 📋 Dispatcher boards (boards.js) */
.board-switch { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; }
.board-switch select { font: inherit; font-weight: 700; color: #0b4f8a; padding: 4px 8px; border: 2px solid #0b6fb8; border-radius: 8px; background: #eef6ff; cursor: pointer; }
.board-switch-phone { display: none; }
@media (max-width: 700px) { .board-switch-phone { display: flex; margin: 0 0 8px; } .board-switch-phone select { flex: 1; font-size: 16px; padding: 8px; } }
.tr-board { display: flex; align-items: center; gap: 6px; font-size: 0.75rem; color: var(--muted); margin-bottom: 4px; }
.tr-board select { flex: 1; font: inherit; font-size: 0.78rem; padding: 2px 4px; border: 1px solid var(--line); border-radius: 6px; background: #f8fafc; }
.tr-tile[hidden], .tr-trucksel button[hidden] { display: none !important; }
.board-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.board-row input { font: inherit; font-weight: 600; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; width: 220px; }

/* "All boards" = side by side (boards.js boardsSideHtml); inside each column the page runs embedded (body.embed) */
.boards-side-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.boards-side-head h1 { margin: 0; }
.boards-side { display: flex; gap: 0; }
.board-col { flex: 1 1 0; min-width: 0; }
.board-split { flex: 0 0 14px; cursor: col-resize; display: flex; align-items: center; justify-content: center; touch-action: none; }
.board-split span { width: 6px; height: 60px; border-radius: 3px; background: #94a3b8; }
.board-split:hover span, .boards-side.splitting .board-split span { background: #0b6fb8; }
.boards-side.splitting iframe { pointer-events: none; }
.boards-side.splitting { cursor: col-resize; user-select: none; }
.board-col { display: flex; flex-direction: column; border: 2px solid #0b6fb8; border-radius: 10px; overflow: hidden; background: var(--card); }
.board-col-head { background: #0b6fb8; color: #fff; font-weight: 800; padding: 6px 12px; font-size: 1.05rem; }
.board-col iframe { width: 100%; height: calc(100vh - 150px); border: 0; display: block; }
body.boards-side-on main { max-width: none; }
@media (max-width: 700px) { .boards-side { flex-direction: column; gap: 10px; } .board-split { display: none; } .board-col iframe { height: 85vh; } }
body.embed .topbar, body.embed #gsBar, body.embed .board-switch { display: none !important; }
body.embed main { padding: 8px; max-width: none; }
/* Boards side by side: drag a truck by ⠿ to the other board (trucks.js) */
.tr-drag { cursor: grab; color: #64748b; font-size: 16px; padding: 0 4px 0 0; user-select: none; }
.tr-drag:hover { color: #0b6fb8; }
.truck-panel.tr-drop { outline: 3px dashed #0b6fb8; outline-offset: -3px; }

/* Everything fits when a board is made narrow (boards side by side, user 2026-10-21): the job page's parts follow the
   width they actually get (container queries on .job-main), not just the screen width */
.money-box { display: flex; flex-wrap: wrap; }
.money-box > * { flex: 1 1 110px; }
.money-box .mb-file { flex: 1 1 140px; }
.grid2 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.job-main { container-type: inline-size; }
@container (max-width: 620px) {
  .cs-row { grid-template-columns: 1fr; gap: 4px; }
  .page-head { flex-direction: column; align-items: stretch; }
  .page-head .row, .job-head-right, .job-sched-row { justify-content: flex-start; align-items: flex-start; }
}
.job-main input, .job-main select, .job-main textarea { max-width: 100%; min-width: 0; }
.grid2 > * { container-type: inline-size; min-width: 0; }
@container (max-width: 440px) { .cs-row { grid-template-columns: 1fr; gap: 4px; } }
.cs-toggle { flex-wrap: wrap; max-width: 100%; }
.cs-toggle > * { flex: 1 1 auto; min-width: 0; }
.jv-row { grid-template-columns: 10px minmax(0, max-content) minmax(0, max-content) minmax(0, 1fr); max-width: 100%; box-sizing: border-box; }
.jv-row > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jv-row > .jv-checks { white-space: normal; overflow: visible; }
.sched-toolbar { flex-wrap: wrap; row-gap: 6px; } .sched-toolbar > .row { min-width: 0; }
.week-tally { flex-wrap: wrap; } .sched-toolbar > .row { flex: 1 1 auto; max-width: 100%; }
.fd-back-btn, .nav-menu-btn { white-space: nowrap; flex: 0 0 auto; }
@media (max-width: 700px) { .tr-trucksel .tr-oc-btn { border-color: #f0abfc; color: #86198f; } .tr-trucksel .tr-oc-btn.on { background: #a21caf; border-color: #a21caf; color: #fff; } }
.tr-trucksel .tr-oc-first { order: -1; }   /* weekends: 🌙 On Call is the first button */
.nb-pick { display: flex; flex-direction: column; gap: 8px; margin: 6px 0; }
.nb-opt { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 2px solid var(--line); border-radius: 10px; font-weight: 700; font-size: 1.05rem; cursor: pointer; }
.nb-opt:has(input:checked) { border-color: #0b6fb8; background: #eef6ff; color: #0b4f8a; }

/* Phone admin view Schedule: "+ Schedule" fixed at the bottom (schedule.js) instead of each day's + */
.sched-phone-add { display: none; }
@media (max-width: 700px) {
  body:not(.field-mode):not(.embed) .sched-phone-add { display: block; position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 30;
    min-height: 52px; border: 0; border-radius: 12px; background: var(--brand); color: #fff; font: inherit; font-size: 1.15rem; font-weight: 800;
    box-shadow: 0 6px 18px rgba(11, 111, 184, 0.4); cursor: pointer; }
  body:not(.field-mode):not(.embed) .sched-phone-add:active { background: var(--brand-dark); }
  body:not(.field-mode) .day-col > .cell-add { display: none; }
  body:not(.field-mode) #sched { padding-bottom: 80px; }
}

/* Phone admin view: Paperwork, Collections and Jobs boards as one vertical list, columns fold (app.js applyPhoneFolds) */
.ph-more { display: none; }
@media (max-width: 700px) {
  body:not(.field-mode) #main .board, body:not(.field-mode) #main .pw-board { display: flex; flex-direction: column; align-items: stretch; gap: 10px; overflow-x: visible; }
  body:not(.field-mode) #main .board > .col, body:not(.field-mode) #main .pw-board > .pw-col { width: auto; min-width: 0; flex: none; min-height: 0; }
  body:not(.field-mode) #main .board > .col > .col-head, body:not(.field-mode) #main .pw-board > .pw-col > .col-head { cursor: pointer; user-select: none; align-items: center; }
  body:not(.field-mode) #main .board > .col > .col-head::after, body:not(.field-mode) #main .pw-board > .pw-col > .col-head::after { content: "▾"; margin-left: 8px; color: var(--muted); }
  body:not(.field-mode) #main .col.ph-folded > .col-head::after, body:not(.field-mode) #main .pw-col.ph-folded > .col-head::after { content: "▸"; }
  body:not(.field-mode) #main .col.ph-folded > :not(.col-head), body:not(.field-mode) #main .pw-col.ph-folded > :not(.col-head) { display: none; }
  body:not(.field-mode) #main .col-head .badge { margin-left: auto; }
  /* Paperwork / Collections cards: compact until ▾ */
  body:not(.field-mode) .ph-more { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 30px; margin-left: auto; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); cursor: pointer; font-size: 0.9rem; }
  body:not(.field-mode) .pw-card:not(.ph-open) > .pw-money, body:not(.field-mode) .pw-card:not(.ph-open) > .pw-box,
  body:not(.field-mode) .pw-card:not(.ph-open) > .pw-card-btns, body:not(.field-mode) .pw-card:not(.ph-open) > .job-missing { display: none; }
}

/* Phone admin view: Insurance, Referrals and Lost cleaned up (user, 2026-10-21) — folded at first, compact rows, ▾ for more */
.ph-only { display: none; }
@media (max-width: 700px) {
  body:not(.field-mode) .ph-only { display: block; }
  /* Any ph-fold section: tap its ph-fold-head line (app.js) */
  body:not(.field-mode) #main .ph-fold-head { cursor: pointer; user-select: none; position: relative; padding-right: 22px; }
  body:not(.field-mode) #main .ph-fold-head::after { content: "▾"; position: absolute; right: 2px; top: 2px; color: var(--muted); }
  body:not(.field-mode) #main .ph-folded .ph-fold-head::after { content: "▸"; }
  /* Insurance: a carrier folds to its name + main line; contacts are stacked rows, not a table */
  body:not(.field-mode) .ins-car { padding: 12px; margin-bottom: 10px; }
  body:not(.field-mode) .ins-car > .page-head { flex-direction: column; align-items: stretch; gap: 8px; margin-bottom: 0 !important; }
  body:not(.field-mode) .ins-car.ph-folded > :not(.page-head), body:not(.field-mode) .ins-car.ph-folded > .page-head > .row { display: none; }
  body:not(.field-mode) .ins-car .ins-table, body:not(.field-mode) .ins-car .ins-table tbody { display: block; width: 100%; }
  body:not(.field-mode) .ins-car .ins-table colgroup, body:not(.field-mode) .ins-car .ins-table tr:has(th) { display: none; }
  body:not(.field-mode) .ins-car .ins-table tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: center;
    border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; margin-top: 8px; background: #fff; }
  body:not(.field-mode) .ins-car .ins-table td { display: block; padding: 0; border: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  body:not(.field-mode) .ins-car .ins-table td.ins-name { font-weight: 700; }
  body:not(.field-mode) .ins-car .ins-table td.ins-edit { grid-column: 2; grid-row: 1 / span 3; }
  body:not(.field-mode) .ins-car .ins-table td:nth-child(5)::before { content: "Jobs: "; color: var(--muted); }
  /* Referrals: the type filters fold into one line; partner cards compact until ▾ */
  body:not(.field-mode) .ref-filter { margin-bottom: 10px; }
  body:not(.field-mode) .ref-filter .ph-fold-head { padding: 10px 34px 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
  body:not(.field-mode) .ref-filter .ph-fold-head::after { right: 12px; top: 10px; }
  body:not(.field-mode) .ref-filter:not(.ph-folded) .ref-tabs { margin-top: 8px; }
  body:not(.field-mode) .ref-filter.ph-folded .ref-tabs { display: none; }
  body:not(.field-mode) .ref-card .ref-top { align-items: center; }
  body:not(.field-mode) .ref-card .ph-more { margin-left: 6px; flex: 0 0 auto; }
  body:not(.field-mode) .ref-card:not(.ph-open) .ref-nums, body:not(.field-mode) .ref-card:not(.ph-open) .ref-last { display: none; }
  /* Lost: each job a compact card (name + date); ▾ shows category, why and ↩ Reinstate */
  body:not(.field-mode) #main table:has(.ph-item), body:not(.field-mode) #main table:has(.ph-item) tbody { display: block; width: 100%; }
  body:not(.field-mode) #main table:has(.ph-item) tr:has(th) { display: none; }
  body:not(.field-mode) #main tr.ph-item { display: grid; grid-template-columns: 1fr; gap: 4px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; background: #fff; }
  body:not(.field-mode) #main tr.ph-item > td { display: block; padding: 0; border: 0; }
  body:not(.field-mode) #main tr.ph-item > td.ph-item-name { display: flex; align-items: center; gap: 8px; }
  body:not(.field-mode) #main tr.ph-item .ph-more { margin-left: auto; }
  body:not(.field-mode) #main tr.ph-item > td.ph-item-date { color: var(--muted); font-size: 0.85rem; }
  body:not(.field-mode) #main tr.ph-item > td.ph-item-date::before { content: "Lost "; }
  body:not(.field-mode) #main tr.ph-item:not(.ph-open) > td:not(.ph-item-name):not(.ph-item-date) { display: none; }
  body:not(.field-mode) #main tr.ph-item > td:last-child { text-align: left !important; }
}
/* Phone admin view: referral partner's "Jobs they sent" = just the paid checkbox, date and customer (user, 2026-10-21) */
@media (max-width: 700px) {
  body:not(.field-mode) #main .ph-hide, body:not(.field-mode) #main .ref-paid-txt { display: none; }
  body:not(.field-mode) #main .ref-paid { padding: 6px; min-width: 0; }
  body:not(.field-mode) #main .ref-paid input { width: 20px; height: 20px; margin: 0; }
  /* Nothing on a page may make it wider than the phone (a too-wide page pushed pop-ups past the right edge) */
  body:not(.field-mode) #main { overflow-x: clip; }
}
/* Phone admin view: a referral partner's Contact and Their numbers start folded; Jobs they sent stays open (user, 2026-10-21) */
@media (max-width: 700px) {
  body:not(.field-mode) #main .ref-fold.ph-folded > :not(.ph-fold-head) { display: none; }
  body:not(.field-mode) #main .ref-fold.ph-folded > .ph-fold-head { margin: 0; }
  body:not(.field-mode) #main .ref-fold.ph-folded { padding-top: 12px; padding-bottom: 12px; }
}
/* Customers board: pick which job file when a customer has several (app.js openCustomerJob) */
.cj-list { display: flex; flex-direction: column; gap: 8px; }
.cj-job { display: grid; grid-template-columns: 24px auto 1fr auto; gap: 8px; align-items: center; text-align: left; width: 100%; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font: inherit; cursor: pointer; }
.cj-job:hover { border-color: var(--brand); background: var(--brand-soft); }
.cj-job.closed { opacity: 0.6; }
.cj-status { font-size: 0.8rem; font-weight: 700; color: #075985; background: #e0f2fe; border-radius: 999px; padding: 2px 8px; }
/* Referral partner page: 📝 Notes as bubbles (referrals.js wireRefNotes) — one title, a roomy box */
.ref-notes-card .tk-label { display: none; }
.ref-notes-card #refNotes { min-height: 160px; }
.ref-notes-card .tk-box { border: 0; padding: 0; background: none; }
/* Boards side by side: "‹ Back" at the left of each board's name bar (boards.js wireBoardBacks) */
.board-col-head { display: flex; align-items: center; gap: 10px; }
.bc-back { font: inherit; font-size: 0.8rem; font-weight: 700; color: #fff; background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.45); border-radius: 6px; padding: 1px 10px; cursor: pointer; }
.bc-back:hover:not(:disabled) { background: rgba(255,255,255,0.32); }
.bc-back:disabled { opacity: 0.4; cursor: default; }
.bc-fwd { margin-left: auto; }   /* Forward sits at the right end of the board name bar */
/* Phone admin view truck card (user, 2026-10-21): Truck # and the head tech / helper boxes on one line, no labels;
   an empty box says "Head tech" / "Helper" (crew.js techSelectHtml placeholder) */
@media (max-width: 700px) {
  body:not(.field-mode) .truck-panel .tr-tile[data-truck].picked { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); gap: 6px; align-items: center; }
  body:not(.field-mode) .truck-panel .tr-tile[data-truck] > .tr-board, body:not(.field-mode) .truck-panel .tr-tile[data-truck] > .tr-jobs { grid-column: 1 / -1; }
  body:not(.field-mode) .truck-panel .tr-tile[data-truck] > .tr-field { display: block; min-width: 0; }
  body:not(.field-mode) .truck-panel .tr-tile[data-truck] > .tr-field > span { display: none; }
  body:not(.field-mode) .truck-panel .tr-tile[data-truck] > .tr-field select { width: 100%; min-width: 0; }
  body:not(.field-mode) .truck-panel .tr-tile[data-truck] .tr-top .tr-no { width: 46px; }
}
@media (max-width: 700px) {
  body:not(.field-mode) .truck-panel .tr-tile[data-truck] { position: relative; }
  body:not(.field-mode) .truck-panel .tr-tile[data-truck] .tr-remove { position: absolute; top: 8px; right: 6px; }
  body:not(.field-mode) .truck-panel .tr-tile[data-truck] > .tr-board { padding-right: 26px; }
}
/* Schedule tiles: the customer's name leads (bold, bigger, dark); the status second, a bit smaller (user, 2026-10-21) */
.tile-appt .appt-name { font-weight: 800; font-size: 0.95rem; color: var(--ink); }
.tile-appt .appt-where { font-size: 0.75rem; color: var(--muted); }
.tile-appt .appt-title { font-size: 0.75rem; }
.tile-appt .appt-who:has(.appt-name) { white-space: normal; }
.tile-appt .appt-name { display: block; line-height: 1.2; overflow-wrap: anywhere; }
.tile-appt .appt-where { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Tile names a little smaller; status and town side by side on one line (user, 2026-10-21) */
.tile-appt .appt-name { font-size: 0.86rem; font-weight: 700; }
.tile-appt .appt-meta { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0; font-size: 0.75rem; line-height: 1.25; }
.tile-appt .appt-meta .appt-title { font-size: 0.75rem; }
.tile-appt .appt-meta .appt-where { display: inline; font-size: 0.75rem; }
.tile-appt .appt-dot { color: var(--muted); margin: 0 4px; }

/* Tasks on tiles (user, 2026-10-21) */
/* Tech view: a job row lists its open technician tasks */
.fd-row-tasks { list-style: none; margin: 6px 0 0; padding: 6px 8px; background: rgba(255,255,255,0.7); border-radius: 8px; font-size: 0.9rem; color: var(--ink); }
.fd-row-tasks li { padding: 2px 0; }
.fd-row-tasks li.overdue { color: #b91c1c; font-weight: 600; }
/* Phone admin view: the tile's task line opens / folds the full list (▸ / ▾) */
.appt-tasklist { display: none; }
@media (max-width: 700px) {
  body:not(.field-mode) .tile-appt .appt-next { cursor: pointer; }
  body:not(.field-mode) .tile-appt .appt-next::after { content: " ▸"; color: var(--muted); }
  body:not(.field-mode) .tile-appt.tasks-open .appt-next::after { content: " ▾"; }
  body:not(.field-mode) .tile-appt.tasks-open .appt-tasklist { display: block; list-style: none; margin: 4px 0 0; padding: 6px 8px; background: rgba(255,255,255,0.75); border-radius: 6px; font-size: 0.82rem; }
  body:not(.field-mode) .tile-appt .appt-tasklist li { padding: 2px 0; }
  body:not(.field-mode) .tile-appt .appt-tasklist li.done { color: var(--muted); text-decoration: line-through; }
  body:not(.field-mode) .tile-appt .appt-tasklist li.overdue { color: #b91c1c; font-weight: 600; }
}
/* + Create task on tiles: phone admin view only (schedule.js tileAddTask) */
.appt-addonly { display: none; }
@media (max-width: 700px) {
  body:not(.field-mode) .tile-appt .appt-addonly { display: block; font-weight: 700; color: var(--brand); background: rgba(255,255,255,0.75); }
  body:not(.field-mode) .tile-appt .appt-addonly::after { content: none; }
  body:not(.field-mode) .tile-appt .appt-tasklist .tl-add { padding-top: 6px; }
  body:not(.field-mode) .tile-appt .appt-tasklist .tl-add .btn { width: 100%; }
}
/* Tech view: tap a task on a My Day row to tick it off (field.js fdTaskTick) */
.fd-row-tasks li[data-action] { cursor: pointer; padding: 6px 4px; border-radius: 6px; }
.fd-row-tasks li[data-action]:active { background: rgba(37, 99, 235, 0.12); }
.fd-row-tasks li.done { color: var(--muted); text-decoration: line-through; }
/* Tech view: the tasks on a My Day row sit in their own box so a tap meant for the job doesn't tick a task (user, 2026-10-21) */
.fd-row-tasks { border: 2px dashed #93c5fd; background: #f5f9ff; padding: 6px; margin-top: 8px; display: flex; flex-direction: column; gap: 6px; cursor: default; }
.fd-row-tasks .fd-tasks-label { font-size: 0.75rem; font-weight: 700; color: #1d4ed8; padding: 0 2px; cursor: default; }
.fd-row-tasks li[data-action] { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #bfdbfe; border-radius: 8px; padding: 9px 10px; font-size: 0.95rem; }
/* Tech view My Day row: "Open ›" under the time (field.js fieldJobRow) */
.fd-row-top { align-items: flex-start; }
.fd-row-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: 0 0 auto; }
.fd-open-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 84px; min-height: 38px; padding: 0 14px;
  border-radius: 10px; background: var(--brand); color: #fff; font-weight: 800; font-size: 0.95rem; box-shadow: 0 2px 6px rgba(11, 111, 184, 0.3); }
.fd-row:active .fd-open-btn { background: var(--brand-dark); }
.fd-row-top { display: flex; justify-content: space-between; gap: 10px; }
.fd-row-left { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.fd-row-left .fd-row-tags { margin-top: 2px; }
/* Tech job screen: who this phone is set to, a small bubble by the job name (field.js) */
.fd-me-pill { display: inline-flex; align-items: center; gap: 3px; vertical-align: middle; margin-left: 4px; padding: 2px 8px;
  border-radius: 999px; background: #eef2ff; border: 1px solid #c7d2fe; color: #3730a3; font-size: 0.72rem; font-weight: 700; white-space: nowrap; }

/* Phone (admin and tech view): the job file scrolls as ONE page (user, 2026-10-21). Its inner boxes (tasks, notes,
   Documents / Pictures, photo grid) grow to full height instead of scrolling on their own, which caught the swipe and
   made it pause; the pop-up is sized to the visible screen (dvh) so the bottom is always reachable. */
@media (max-width: 700px) {
  .job-layout .jside-body, .job-layout .jf-panel .jf-body, .job-layout .photos, .job-layout .jv-list {
    max-height: none !important; height: auto !important; overflow: visible; overscroll-behavior: auto; resize: none; }
  .job-pop-box { height: calc(100dvh - 36px); overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  body.field-mode .job-pop-box { height: calc(100dvh - var(--fd-bar, 50px) - 36px); }
  .job-layout .job-side { height: auto; overflow: visible; }
}


/* Tech view sheets: "📂 Already uploaded" (field.js fdDrawPrev; user, 2026-10-21), folded at the top of each sheet */
.fd-prev { border: 1px solid var(--line); border-radius: 10px; background: #f8fafc; }
.fd-prev > summary { cursor: pointer; padding: 9px 12px; font-weight: 600; font-size: 0.9rem; list-style: none; display: flex; align-items: center; gap: 6px; }
.fd-prev > summary::-webkit-details-marker { display: none; }
.fd-prev > summary::after { content: '▾'; margin-left: auto; color: var(--muted); }
.fd-prev[open] > summary::after { content: '▴'; }
.fd-prev-n { background: #e2e8f0; border-radius: 999px; padding: 0 7px; font-size: 0.78rem; }
.fd-prev-body { display: flex; flex-direction: column; gap: 6px; padding: 0 10px 10px; }
.fd-prev-file { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; width: 100%; padding: 8px 10px; border: 1px solid var(--line);
  border-radius: 8px; background: #fff; font: inherit; font-size: 0.88rem; color: var(--ink); cursor: pointer; }
.fd-prev-file span { font-weight: 600; word-break: break-word; }
.fd-prev-file small { color: var(--muted); font-size: 0.76rem; }
div.fd-prev-file { cursor: default; }
.fd-prev-phase { font-weight: 600; font-size: 0.82rem; margin-top: 4px; }
.fd-prev-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.fd-prev-thumbs img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; cursor: pointer; background: #e2e8f0; }
.fd-prev-none { margin: 0; }
/* Upload bubble (drive.js upPillDraw / upPillPaint; user, 2026-10-21). Top bar (#upPill): phone only (tech view and phone
   admin view; the computer has its "☁ Drive" button there), only while files wait. In the job file pop-up's bar and the
   search pop-up's bar (`.up-steady`): every page, computer and phone, always showing ("☁ ✓" when everything is up). */
.up-pill { display: none; align-items: center; flex: 0 0 auto; padding: 3px 9px; border-radius: 999px; font: inherit; font-size: 0.75rem;
  font-weight: 700; line-height: 1.2; white-space: nowrap; cursor: pointer; }
@media (max-width: 700px) {
  .topbar .up-pill:not([hidden]) { display: inline-flex; order: 1; border: 1px solid rgba(253,230,138,0.8); background: rgba(245,158,11,0.35); color: #fff; }
  .topbar .up-pill.busy { opacity: 0.85; }
  .topbar .up-pill.ok { background: rgba(34,197,94,0.3); border-color: rgba(134,239,172,0.8); }
}
.up-pill.up-steady:not([hidden]) { display: inline-flex; margin-right: auto; border: 1px solid #fcd34d; background: #fef3c7; color: #92400e; }
.up-pill.up-steady.ok { border-color: #86efac; background: #dcfce7; color: #166534; }
.up-pill.up-steady.busy { border-color: #93c5fd; background: #dbeafe; color: #1e40af; }
/* Computer (user, 2026-10-21): the pop-ups' upload bubble sits top right, next to ✕ Close, where the top bar's "☁ Drive" button is */
@media (min-width: 701px) {
  .up-pill.up-steady:not([hidden]) { margin-right: 0; margin-left: auto; }
}

/* Phone day bars (tech view My Day, phone admin Schedule; user, 2026-10-21): tap the date = calendar; a small
   "Today" button shows only when another day is picked and jumps back to today */
.fd-daylabel { position: relative; display: flex; align-items: center; justify-content: center; white-space: nowrap; }
.fd-pick { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.day-today { flex: 0 0 auto; padding: 6px 10px; border: 1px solid #93c5fd; border-radius: 999px; background: #eff6ff; color: #1d4ed8;
  font: inherit; font-size: 0.8rem; font-weight: 700; cursor: pointer; }

/* 🚦 Visit & follow-up rules (Settings, #/visitrules; 2026-10-22) */
.vr-page { max-width: 880px; }
.vr-card h2 { margin-top: 0; }
.vr-card.vr-off { opacity: 0.5; }
.vr-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.vr-card .vr-row:first-of-type, .vr-master { border-top: 0; }
.vr-name { min-width: 0; flex: 1; }
.vr-group { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin: 14px 0 2px; }
.vr-switch { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; min-width: 78px; padding: 6px 12px 6px 6px; border: 1px solid var(--line); border-radius: 999px; background: #f1f5f9; font: inherit; font-weight: 700; font-size: 0.85rem; color: var(--muted); cursor: pointer; }
.vr-switch span { width: 22px; height: 22px; border-radius: 50%; background: #cbd5e1; }
.vr-switch.on { background: #dcfce7; border-color: #86efac; color: #15803d; }
.vr-switch.on span { background: #16a34a; }
.vr-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.vr-chip { font: inherit; font-size: 0.75rem; font-weight: 600; padding: 3px 9px; border-radius: 999px; border: 1px dashed #cbd5e1; background: #fff; color: #94a3b8; cursor: pointer; }
.vr-chip.on { border-style: solid; border-color: #93c5fd; background: #dbeafe; color: #1d4ed8; }
.vr-miss { margin: 6px 0 10px; padding-left: 20px; }
.vr-miss li { font-weight: 600; margin: 2px 0; }

/* 💧 Readings sheet (readings.js; 2026-10-22) — tech view: folding cards */
.rd-tech { display: flex; flex-direction: column; gap: 10px; }
.rd-daybar { position: relative; display: flex; align-items: center; gap: 6px; padding: 10px 12px; border: 2px solid var(--brand); border-radius: 12px; background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.rd-daypick { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; }
.rd-sec { border: 1px solid var(--line); border-radius: 12px; background: #fff; overflow: hidden; }
.rd-sec-head, .rd-card-head { width: 100%; display: flex; align-items: center; gap: 8px; border: 0; background: #f1f5f9; font: inherit; font-weight: 700; text-align: left; padding: 12px; cursor: pointer; color: inherit; }
.rd-sec-head { background: #1e293b; color: #fff; }
.rd-arrow { width: 14px; flex: 0 0 auto; }
.rd-count { margin-left: auto; font-size: 0.78rem; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,0.18); }
.rd-count.all { background: #16a34a; }
.rd-sec-body { padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.rd-card { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.rd-card.open { border-color: #93c5fd; }
.rd-card-head { background: #fff; padding: 10px 12px; flex-wrap: wrap; }
.rd-sum { margin-left: auto; font-size: 0.8rem; font-weight: 600; }
.rd-done { color: #15803d; }
.rd-todo { color: #b45309; }
.rd-card-body { padding: 4px 12px 12px; display: flex; flex-direction: column; gap: 8px; background: #f8fafc; }
.rd-in { display: flex; flex-direction: column; gap: 3px; font-size: 0.78rem; font-weight: 600; color: var(--muted); min-width: 0; }
.rd-in input { font: inherit; font-size: 1.05rem; font-weight: 600; color: var(--text, #0f172a); padding: 9px 10px; border: 1px solid #cfd8e3; border-radius: 8px; background: #fff; width: 100%; box-sizing: border-box; }
.rd-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); gap: 8px; }
.rd-gpp strong { font-size: 1.05rem; padding: 9px 10px; border-radius: 8px; background: #e2e8f0; color: #0f172a; min-height: 1.3em; }
.rd-earlier { font-size: 0.78rem; color: var(--muted); border-top: 1px dashed var(--line); padding-top: 6px; }
.rd-earlier span { display: inline-block; min-width: 92px; font-weight: 600; }
.rd-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rd-save { min-width: 46%; min-height: 44px; font-weight: 700; }
.rd-del { align-self: flex-start; border: 0; background: none; color: var(--danger); font: inherit; font-size: 0.8rem; padding: 4px 0; cursor: pointer; }
.rd-add { border: 2px dashed #93c5fd; background: #eff6ff; color: #1d4ed8; font: inherit; font-weight: 700; padding: 10px; border-radius: 10px; cursor: pointer; }
.rd-or { margin-top: 6px; }

/* Office: the readings card on the job page and the whole sheet as a grid (like the paper sheet) */
.rd-job-card .jv-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rd-dialog { width: min(1400px, 96vw); max-height: 92vh; padding: 0; border: 0; border-radius: 14px; box-shadow: 0 20px 60px rgba(15,23,42,0.35); }
.rd-dialog::backdrop { background: rgba(15, 23, 42, 0.5); }
.rd-dlg-head { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; background: #fff; border-bottom: 1px solid var(--line); }
.rd-dlg-head h2 { margin: 0; font-size: 1.15rem; }
.rd-dlg-head [data-rd-close] { margin-left: auto; }
.rd-addday { position: relative; overflow: hidden; }
.rd-addday input { position: absolute; inset: 0; opacity: 0; }
.rd-dlg-body { padding: 12px 16px 20px; display: flex; flex-direction: column; gap: 18px; }
.rd-block-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #000; color: #fff; padding: 6px 10px; border-radius: 6px 6px 0 0; }
.rd-scroll { overflow-x: auto; border: 1px solid #94a3b8; border-top: 0; }
.rd-grid { border-collapse: collapse; font-size: 0.82rem; }
.rd-grid th, .rd-grid td { border: 1px solid #94a3b8; padding: 0; text-align: center; }
.rd-grid .rd-h1 th, .rd-grid .rd-h2 th { background: #fff; padding: 3px 4px; min-width: 150px; }
.rd-grid .rd-sub th { background: #334155; color: #fff; font-size: 0.72rem; padding: 3px 6px; }
.rd-grid th.rd-day { position: sticky; left: 0; z-index: 1; background: #e2e8f0; color: #0f172a; text-align: left; padding: 4px 8px; white-space: nowrap; min-width: 110px; font-weight: 600; }
.rd-grid th.rd-day.today { background: #dbeafe; color: #1d4ed8; }
.rd-c input { width: 100%; min-width: 50px; box-sizing: border-box; border: 0; padding: 6px 4px; font: inherit; text-align: center; background: transparent; }
.rd-c input:focus { outline: 2px solid var(--brand); background: #eff6ff; }
.rd-g { background: #d1d5db; font-weight: 700; min-width: 50px; vertical-align: middle; }
.rd-hrow { display: flex; align-items: center; gap: 4px; }
.rd-hin { width: 100%; min-width: 0; box-sizing: border-box; border: 1px dashed transparent; border-radius: 4px; padding: 3px 4px; font: inherit; font-weight: 700; text-align: center; background: transparent; }
.rd-hin:hover, .rd-hin:focus { border-color: #94a3b8; background: #fff; }
.rd-x { border: 0; background: none; color: #94a3b8; cursor: pointer; font-size: 0.8rem; padding: 2px 4px; }
.rd-x:hover { color: var(--danger); }
/* Readings, tech view: dehus and materials inside each room (2026-10-22) */
.rd-room { border-width: 2px; }
.rd-room > .rd-card-head { background: #1e293b; color: #fff; }
.rd-room > .rd-card-head .rd-done { color: #86efac; }
.rd-room > .rd-card-head .rd-todo { color: #fcd34d; }
.rd-room-sub { flex-basis: 100%; padding-left: 22px; font-size: 0.75rem; font-weight: 600; }
.rd-room-sub:empty { display: none; }
.rd-group { border-top: 1px solid var(--line); padding-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.rd-group-head { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.rd-sub-card { border: 1px solid var(--line); border-radius: 8px; background: #fff; overflow: hidden; }
.rd-sub-card.open { border-color: #93c5fd; }
.rd-sub-head { width: 100%; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; border: 0; background: #fff; font: inherit; font-size: 0.9rem; text-align: left; padding: 9px 10px; cursor: pointer; color: inherit; }
.rd-sub-body { padding: 2px 10px 10px; display: flex; flex-direction: column; gap: 8px; }
.rd-add-sm { padding: 7px; font-size: 0.85rem; border-width: 1px; }
.rd-room-pick { font-weight: 600; cursor: pointer; }
/* Room header: ▸ name · 📅 date (tap = small calendar) · ✓ reading (2026-10-22) */
.rd-room-head { display: flex; align-items: center; gap: 8px; background: #1e293b; color: #fff; padding-right: 10px; }
.rd-room-head .rd-card-head { width: auto; flex: 0 1 auto; min-width: 0; background: transparent; color: #fff; padding-right: 0; }
.rd-room-head .rd-card-head strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-date { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.3); font-size: 0.8rem; font-weight: 700; cursor: pointer; }
.rd-date .rd-daypick { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; }
.rd-sum-btn { flex: 1 1 auto; min-height: 40px; border: 0; background: none; color: inherit; font: inherit; font-size: 0.78rem; text-align: right; cursor: pointer; padding: 0; }
.rd-room-head .rd-done { color: #86efac; }
.rd-sum-btn { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 2px; padding: 6px 0; }
.rd-mat-sum { font-size: 0.74rem; opacity: 0.95; }
/* Two choices side by side (Readings sheet: 📸 Take picture · 📎 Add file; 2026-10-22) */
.fd-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fd-pair .fd-opt { align-items: center; text-align: center; }
/* Readings, tech view (2026-10-22): the open / close arrow = a round button pointing down (tap to open), up when open */
.rd-tech .rd-arrow { width: 28px; height: 28px; flex: 0 0 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 0.72rem; line-height: 1; }
.rd-room-head .rd-arrow { background: #fff; color: #1e293b; box-shadow: 0 0 0 2px rgba(255,255,255,0.35); }
.rd-sub-head .rd-arrow { width: 24px; height: 24px; flex-basis: 24px; background: #1e293b; color: #fff; font-size: 0.62rem; }
/* The Add box: + Add room, Take picture, Add file — set apart from the rooms so they aren't hit by mistake */
.rd-actions { margin-top: 22px; padding: 12px; border: 1px solid #cbd5e1; border-radius: 14px; background: #f1f5f9; display: flex; flex-direction: column; gap: 10px; position: relative; }
.rd-actions::before { content: ''; position: absolute; left: 0; right: 0; top: -12px; border-top: 2px solid #e2e8f0; }
.rd-actions-title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.rd-actions .fd-opt { background: #fff; }
/* Readings: "+ Add" next to the DEHUS / MATERIALS title (2026-10-22) */
.rd-group-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rd-add-head { border: 2px solid #93c5fd; background: #eff6ff; color: #1d4ed8; font: inherit; font-size: 0.85rem; font-weight: 700; text-transform: none; letter-spacing: 0; padding: 6px 14px; border-radius: 999px; cursor: pointer; min-height: 36px; }
.rd-add-head:active { background: #dbeafe; }
.rd-save-sm { min-width: 40%; min-height: 38px; font-size: 0.9rem; }   /* Save on a dehu / material card: saves and folds just that card */
/* Smaller Save (dehu / material cards) and + Add buttons (user, 2026-10-22) */
.rd-save.rd-save-sm { min-width: 0; min-height: 32px; padding: 5px 16px; font-size: 0.82rem; }
.rd-add-head { min-height: 30px; padding: 3px 12px; font-size: 0.78rem; border-width: 1.5px; }
/* Readings day after day (2026-10-22): + Add day in the room header, Day N line with ✏️ Edit, Previous / New reading */
.rd-head-right { flex: 1 1 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; padding: 6px 0; min-width: 0; }
.rd-head-right .rd-sum-btn { min-height: 0; padding: 0; }
.rd-head-right .rd-sum-btn:empty { display: none; }
.rd-newday { border: 1px solid #86efac; background: rgba(22,163,74,0.18); color: #bbf7d0; font: inherit; font-size: 0.75rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.rd-newday.big { background: #16a34a; border-color: #16a34a; color: #fff; font-size: 0.85rem; padding: 6px 14px; }
.rd-dayline { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 8px; font-size: 0.85rem; font-weight: 700; color: #1d4ed8; }
.rd-edit { border: 1px solid #cbd5e1; background: #fff; color: #334155; font: inherit; font-size: 0.8rem; font-weight: 700; padding: 4px 12px; border-radius: 999px; cursor: pointer; }
.rd-edit.on { background: #fef3c7; border-color: #fcd34d; color: #92400e; }
.rd-last { font-size: 0.78rem; color: var(--muted); }
.rd-last strong { color: #334155; }
.rd-prev strong { font-size: 1.05rem; padding: 9px 10px; border-radius: 8px; background: #e2e8f0; color: #475569; min-height: 1.3em; }
/* Room header v2 (2026-10-22): name typed in the header, real date on the right with "tap to change" */
.rd-room-head { flex-wrap: wrap; gap: 6px 8px; padding: 8px 10px 8px 0; }
.rd-room-head .rd-card-head { flex: 0 0 auto; padding: 4px 0 4px 10px; }
.rd-name-box { flex: 1 1 120px; min-width: 0; display: flex; align-items: center; gap: 6px; padding: 0 10px; height: 40px; border: 2px dashed rgba(255,255,255,0.55); border-radius: 10px; background: rgba(255,255,255,0.1); cursor: text; }
.rd-name-box:focus-within { border-style: solid; border-color: #93c5fd; background: rgba(255,255,255,0.18); }
.rd-name-box span { font-size: 0.85rem; opacity: 0.9; }
.rd-name-box input { flex: 1; min-width: 0; border: 0; background: transparent; color: #fff; font: inherit; font-size: 1.05rem; font-weight: 700; padding: 0; outline: none; }
.rd-name-box input::placeholder { color: rgba(255,255,255,0.65); font-weight: 600; }
.rd-room-name { flex: 1 1 120px; min-width: 0; text-align: left; border: 0; background: none; color: #fff; font: inherit; font-size: 1.05rem; padding: 0; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-date { flex-direction: column; align-items: flex-end; gap: 0; margin-left: auto; padding: 4px 10px; border-radius: 10px; line-height: 1.15; }
.rd-date-top { white-space: nowrap; }
.rd-date small { font-size: 0.66rem; font-weight: 600; opacity: 0.8; text-decoration: underline; }
.rd-head-row2 { flex-basis: 100%; display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; padding-left: 10px; }
.rd-head-row2 .rd-sum-btn { min-height: 0; padding: 0; flex: 1 1 auto; }
.rd-head-row2 .rd-sum-btn:empty { display: none; }
.rd-head-row2:has(> .rd-sum-btn:empty):not(:has(.rd-newday)) { display: none; }   /* nothing to show yet: no second line */
/* Dehu / material header (2026-10-22): name typed in the header, like the room's */
.rd-sub-head { cursor: default; padding: 6px 8px; gap: 6px; flex-wrap: wrap; }
.rd-sub-fold { flex: 0 0 auto; border: 0; background: none; padding: 2px; cursor: pointer; display: flex; }
.rd-sub-icon { flex: 0 0 auto; }
.rd-name-box.rd-name-sm { flex: 1 1 110px; height: 36px; border-color: #cbd5e1; background: #f8fafc; }
.rd-name-box.rd-name-sm:focus-within { border-color: #3b82f6; background: #fff; }
.rd-name-box.rd-name-sm input { color: #0f172a; font-size: 0.95rem; }
.rd-name-box.rd-name-sm input::placeholder { color: #94a3b8; }
.rd-sub-name { color: #0f172a; font-size: 0.95rem; flex: 1 1 80px; }
.rd-sub-sum { flex: 0 1 auto; border: 0; background: none; font: inherit; font-size: 0.8rem; text-align: right; cursor: pointer; padding: 0; margin-left: auto; }
.rd-sub-sum:empty { display: none; }
/* Readings: one bar per visit day (2026-10-22). Older days are a lighter bar with "Day N" under the date. */
.rd-room.rd-past .rd-room-head { background: #475569; }
button.rd-date { color: #fff; font: inherit; font-size: 0.8rem; font-weight: 700; }
.rd-date-past small { text-decoration: none; }
/* Readings: room = main header (Day 1: name, start date "10/22", starting readings, + Add day) + one bar per later day (2026-10-22) */
.rd-room-group { display: flex; flex-direction: column; gap: 6px; }
.rd-date-simple { margin-left: auto; flex: 0 0 auto; font-weight: 700; font-size: 0.95rem; color: #cbd5e1; padding: 0 4px; }
.rd-room.rd-day { margin-left: 18px; border-width: 1px; }
.rd-room.rd-day .rd-room-head { background: #475569; padding-top: 4px; padding-bottom: 4px; }
.rd-room.rd-day .rd-arrow { width: 24px; height: 24px; flex-basis: 24px; }
.rd-day-name { font-size: 0.92rem; font-weight: 700; }
/* Room header only shows / hides its days; days (Day 1 first) sit indented under it (2026-10-22) */
.rd-days { display: flex; flex-direction: column; gap: 6px; }
.rd-room.rd-main .rd-head-row2 { flex-basis: auto; padding-left: 0; }
/* "+ Add day": thin tile at the bottom of a room's days (2026-10-22) */
.rd-add.rd-add-day { margin-left: 18px; padding: 6px 10px; font-size: 0.88rem; border-width: 1.5px; border-color: #86efac; background: #f0fdf4; color: #15803d; }
.rd-add.rd-add-day:active { background: #dcfce7; }
.rd-edit.rd-edit-sm { flex: 0 0 auto; padding: 3px 10px; font-size: 0.75rem; }   /* ✏️ Edit on an equipment / moisture content card (2026-10-22) */
.rd-edit.rd-edit-sm.on { background: var(--brand, #0b6fb8); border-color: var(--brand, #0b6fb8); color: #fff; }   /* 💾 Save while editing a name */
/* Every ✏️ Edit in the same spot (user 2026-10-22): top right of its card header; the day's reading goes on its own line below */
.rd-sub-head .rd-edit-sm { margin-left: auto; order: 2; }
.rd-sub-head .rd-sub-sum { order: 3; flex-basis: 100%; margin-left: 0; padding-left: 34px; text-align: left; }
/* Day bar: one straight line across the bottom, "Room … · Equip … · MC …"; ✗ = not filled out (2026-10-22) */
.rd-room.rd-day .rd-head-row2 { flex-basis: 100%; justify-content: flex-start; padding-left: 10px; }
.rd-room.rd-day .rd-sum-btn { flex: 1 1 auto; min-width: 0; align-items: stretch; text-align: left; }
.rd-line { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.72rem; color: #86efac; font-weight: 600; }
.rd-line b { color: #e2e8f0; font-weight: 700; }
.rd-line i { font-style: normal; color: #94a3b8; padding: 0 2px; }
.rd-miss { color: #fdba74; font-weight: 800; }
.rd-none { color: #94a3b8; }
/* Day bar: Room / Equip / MC in fixed columns so every day lines up; tech's name top right (2026-10-22) */
.rd-line { display: grid; grid-template-columns: auto 12.5ch auto 12.5ch auto minmax(0, 1fr); column-gap: 5px; align-items: baseline; font-variant-numeric: tabular-nums; }
.rd-v { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #86efac; }
.rd-v-mc { min-width: 0; }
.rd-by { margin-left: auto; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.74rem; font-weight: 700; color: #e2e8f0; background: rgba(255,255,255,0.12); padding: 2px 8px; border-radius: 999px; }
.rd-by:empty { display: none; }
/* Newest day: no arrows on its cards (always open); ✏️ Edit sits where the arrow was (2026-10-22) */
.rd-lead { flex: 0 0 auto; display: flex; }
.rd-lead:empty { display: none; }
.rd-sub-head .rd-lead .rd-edit-sm { margin-left: 0; order: 0; }
/* "+ Add" right next to its title, so it's clear what it adds (user 2026-10-22) */
.rd-group-head { justify-content: flex-start; gap: 10px; }
/* New room: 💾 Save inside the name box, shown once a name is typed (2026-10-22) */
.rd-name-save { flex: 0 0 auto; border: 0; border-radius: 999px; background: var(--brand, #0b6fb8); color: #fff; font: inherit; font-size: 0.78rem; font-weight: 700; padding: 4px 12px; cursor: pointer; }
.rd-name-box input:placeholder-shown ~ .rd-name-save { display: none; }
/* Readings: the small ✏️ next to a saved room's name (brings its name box + 💾 Save back) */
.rd-rename { flex: 0 0 auto; border: 0; background: transparent; color: #fff; font-size: 0.9rem; padding: 4px 6px; border-radius: 8px; cursor: pointer; opacity: 0.75; }
.rd-rename:hover { opacity: 1; background: rgba(255,255,255,0.12); }
/* Office readings window: one box per room, side by side (user 2026-10-22). Room name once at the top; going down:
   Room Reading, Equipment (one Temp/RH/G.P.P. group per dehu), Moisture Content (one column per material). */
.rdg-top { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.rdg-rooms { display: flex; gap: 14px; align-items: flex-start; overflow-x: auto; padding-bottom: 8px; }
.rdg-room { flex: 0 0 auto; min-width: 300px; border: 2px solid #94a3b8; border-radius: 10px; overflow: hidden; background: #fff; }
.rdg-room:nth-child(4n+1) { border-color: #ef4444; }
.rdg-room:nth-child(4n+2) { border-color: #22c55e; }
.rdg-room:nth-child(4n+3) { border-color: #3b82f6; }
.rdg-room:nth-child(4n+4) { border-color: #f59e0b; }
.rdg-room-head { display: flex; align-items: center; gap: 6px; padding: 8px 10px; background: #f1f5f9; border-bottom: 1px solid #cbd5e1; }
.rdg-room-head .rd-hin { flex: 1; font-size: 1.05rem; font-weight: 800; text-align: center; }
.rdg-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: #000; color: #fff; padding: 6px 10px; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.03em; }
.rdg-add { border: 0; border-radius: 999px; background: #fff; color: #0b6fb8; font: inherit; font-size: 0.75rem; font-weight: 700; text-transform: none; padding: 2px 10px; cursor: pointer; }
.rdg-table { width: 100%; margin: 0; }
.rdg-table .rd-day { white-space: nowrap; }
.rdg-empty { margin: 0; padding: 10px; color: var(--muted); font-size: 0.85rem; }
.rdg-table th.rd-day { min-width: 74px; } .rdg-table .rd-h1 th { min-width: 120px; }
/* Office readings: three bands across all rooms (user 2026-10-22). Each room's columns carry its color; a thick colored
   line starts each room so the rooms stand apart. */
.rdg-table .rd-h1 th.rdg-rh { font-weight: 800; }
.rdg-table .rd-h1 th.rdg-rh .rd-hin { font-weight: 800; text-align: center; }
.rdg-rname { flex: 1; font-weight: 800; }
.rdg-muted { color: var(--muted); font-weight: 400; font-style: italic; }
.rdg-none { background: #f8fafc; }
.rdg-table th.rdg-c0, .rdg-table .rd-h1 th.rdg-c0 { background: #fef2f2; }
.rdg-table th.rdg-c1, .rdg-table .rd-h1 th.rdg-c1 { background: #f0fdf4; }
.rdg-table th.rdg-c2, .rdg-table .rd-h1 th.rdg-c2 { background: #eff6ff; }
.rdg-table th.rdg-c3, .rdg-table .rd-h1 th.rdg-c3 { background: #fffbeb; }
.rdg-table .rd-sub th.rdg-c0 { background: #b91c1c; color: #fff; }
.rdg-table .rd-sub th.rdg-c1 { background: #15803d; color: #fff; }
.rdg-table .rd-sub th.rdg-c2 { background: #1d4ed8; color: #fff; }
.rdg-table .rd-sub th.rdg-c3 { background: #b45309; color: #fff; }
.rdg-table .rd-h1 th.rdg-rh { border-left: 4px solid #334155; }
/* Office readings, one row per room (user 2026-10-22): the room's name on the black bar */
.rdg-room-bar .rd-hin { background: transparent; color: #fff; border: 1px dashed rgba(255,255,255,0.4); font-weight: 800; font-size: 1rem; text-align: left; max-width: 320px; }
.rdg-room-bar .rd-x { color: #fff; }
.rdg-row .rdg-table { width: auto; min-width: 100%; }
/* Office readings, medium size (user 2026-10-22: tight, then "meet in the middle"); "By" (who took the readings) on the far left */
.rdg-row .rdg-table { width: auto; min-width: 0; font-size: 0.9rem; }
.rdg-table .rd-h1 th, .rdg-table .rd-h2 th { min-width: 0; padding: 4px 6px; }
.rdg-table .rd-sub th { padding: 4px 6px; font-size: 0.74rem; }
.rdg-table .rd-c input { width: 68px; min-width: 0; padding: 6px 4px; }
.rdg-table .rdg-w-air input { width: var(--rdg-w-air, 68px); } .rdg-table .rdg-w-dehus input { width: var(--rdg-w-dehus, 68px); } .rdg-table .rdg-w-mats input { width: var(--rdg-w-mats, 68px); }
.rdg-table .rd-g { min-width: 0; padding: 0 6px; box-sizing: border-box; }
.rdg-table .rd-g.rdg-w-air { width: var(--rdg-w-air, 68px); } .rdg-table .rd-g.rdg-w-dehus { width: var(--rdg-w-dehus, 68px); }
.rdg-table th.rd-day { min-width: 0; width: var(--rdg-dw, 84px); padding: 5px 10px; box-sizing: border-box; }
.rdg-table .rd-hin { width: 13ch; padding: 3px 5px; }
.rdg-table .rd-h1 th .rd-hrow { gap: 6px; white-space: nowrap; }
.rdg-by-h, .rdg-by { background: #f1f5f9; color: #334155; font-weight: 600; padding: 5px 10px !important; white-space: nowrap; text-align: left; font-size: 0.85rem; }
.rdg-table .rd-sub th.rdg-by-h { background: #334155; color: #fff; }
.rdg-by-h, .rdg-by { width: var(--rdg-byw, 70px); box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; max-width: var(--rdg-byw, 70px); }
/* The drag handle on the right edge of a readings column title (left / right only) */
.rdg-table .rd-sub th { position: relative; }
.rdg-grip { position: absolute; top: 0; right: -3px; width: 7px; height: 100%; cursor: col-resize; z-index: 2; touch-action: none; }
.rdg-grip:hover, body.col-resizing .rdg-grip { background: rgba(255,255,255,0.55); }
/* Office readings: thick black lines between the sections (user 2026-10-22); grab a line to pull its section wider / narrower */
.rdg-table td, .rdg-table th { position: relative; }
.rdg-table .rdg-s { border-left: 4px solid #000 !important; }
.rdg-table .rdg-e { border-right: 4px solid #000 !important; }
.rdg-line { position: absolute; top: 0; bottom: 0; width: 12px; cursor: col-resize; z-index: 3; touch-action: none; }
.rdg-line-s { left: -8px; }
.rdg-line-e { right: -8px; }
.rdg-line:hover { background: rgba(11,111,184,0.25); }
body.col-resizing, body.col-resizing * { cursor: col-resize !important; user-select: none !important; }
/* Office readings, clean-up (user 2026-10-22: "just have everything be adjustable"). Every column has a fixed width set
   by the window (<col> + table-layout: fixed), so all rooms line up, empty ones too. A column's right edge drags it
   (.rdg-grip, in every row); the thick black lines are the right edges of Date and of each section's last column. */
.rdg-row .rdg-table, .rdg-table { table-layout: fixed; width: 1px; min-width: 0; }
.rdg-table .rd-c input, .rdg-table .rdg-w-air input, .rdg-table .rdg-w-dehus input, .rdg-table .rdg-w-mats input { width: 100%; box-sizing: border-box; }
.rdg-table .rd-g, .rdg-table th.rd-day, .rdg-by-h, .rdg-by { width: auto; max-width: none; }
.rdg-table .rd-hin { width: 100%; }
.rdg-table td, .rdg-table th { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rdg-table .rd-h1 th, .rdg-table .rd-h2 th { overflow: visible; }
.rdg-table .rdg-end { border-right: 4px solid #000 !important; }
.rdg-table .rdg-grip { position: absolute; top: 0; right: -5px; width: 10px; height: 100%; cursor: col-resize; z-index: 3; touch-action: none; }
.rdg-table .rdg-grip:hover { background: rgba(11, 111, 184, 0.3); }
.rdg-table .rd-h1 .rd-hrow .rd-hin { flex: 1; min-width: 40px; } .rdg-table .rdg-add { white-space: nowrap; flex: 0 0 auto; }
.rdg-top { gap: 8px; }
.rd-notdone { color: #c2410c; font-weight: 700; } .rd-notdone .rd-miss { color: #ea580c; }
/* Office readings: each room's own "+ Add day" on its black bar (user 2026-10-23) */
.rdg-room-bar { display: flex; align-items: center; gap: 8px; }
.rdg-room-bar .rdg-addday { margin-left: auto; position: relative; overflow: hidden; background: #fff; color: #0b6fb8; border-color: #fff; font-weight: 700; }
.rdg-room-bar .rdg-addday input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
/* Office readings: the By name and the Date can be changed right in the row (user 2026-10-23) */
.rdg-by .rdg-by-in { width: 100%; box-sizing: border-box; border: 1px dashed transparent; border-radius: 4px; background: transparent; font: inherit; font-weight: 600; color: #334155; padding: 2px 4px; text-align: left; }
.rdg-by .rdg-by-in:hover, .rdg-by .rdg-by-in:focus { border-color: #94a3b8; background: #fff; outline: none; }
.rdg-table th.rd-day { cursor: pointer; }
.rdg-table th.rd-day:hover .rdg-date-txt { text-decoration: underline; }
.rdg-date-in { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.rdg-savecrm { background: #15803d; border-color: #15803d; color: #fff; font-weight: 700; } .rdg-savecrm:hover { background: #166534; }

/* ---------- Online database (cloud.js, 2026-10-23): sign-in screen and the status bubble ---------- */
body.cloud-gate .topbar > :not(.brand) { display: none !important; }
body.cloud-gate .topbar .brand { display: block !important; }
.cloud-login { max-width: 420px; margin: 40px auto; padding: 24px; }
.cloud-login h1 { font-size: 1.3rem; margin: 0 0 6px; }
.cloud-login h2 { margin: 14px 0 10px; }
.cloud-login form { display: grid; gap: 12px; }
.cloud-login label { display: grid; gap: 4px; font-weight: 600; font-size: 0.9rem; }
.cloud-login input { font: inherit; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 1rem; }
.cloud-login .btn.primary { padding: 11px; font-size: 1rem; }
.cloud-err { color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca; border-radius: 8px; padding: 8px 10px; margin: 0; }
.cloud-test { display: inline-block; background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; border-radius: 999px; padding: 2px 10px; font-weight: 700; font-size: 0.8rem; margin: 0; }
.db-pill { order: 3; flex: 0 0 auto; border: 1px solid rgba(255,255,255,0.35); background: rgba(255,255,255,0.12); color: #fff; font: inherit;
  font-size: 0.78rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.db-pill.waiting { background: rgba(245,158,11,0.35); border-color: rgba(253,230,138,0.8); }
.db-pill.test { background: #f59e0b; border-color: #fde68a; color: #1f2937; }
.db-pill[hidden] { display: none !important; }

/* Readings sheet ✏️ Edit (user 2026-10-23): the button next to ✕, and each room's 🗑 while editing */
.fd-sheet-btns { display: inline-flex; gap: 8px; align-items: center; }
.rd-names-btn { white-space: nowrap; }
.rd-room-del { flex: 0 0 auto; border: 1px solid rgba(254,202,202,0.7); background: rgba(220,38,38,0.25); color: #fff; font-size: 1rem;
  padding: 6px 10px; border-radius: 10px; cursor: pointer; margin-left: auto; }
.rd-room-del:hover { background: rgba(220,38,38,0.45); }
.rd-card-foot .rd-del[data-rd-delday] { align-self: center; }

/* ---------- 📄 Paperwork form (tech view, pwform.js, user 2026-10-23) ---------- */
.pw-start { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; min-height: 60px; padding: 12px; border: 0; border-radius: 14px;
  background: #2563eb; color: #fff; font-size: 1.05rem; font-weight: 700; cursor: pointer; }
.pw-start small { font-weight: 500; opacity: 0.9; }
.pw-list { display: flex; flex-direction: column; gap: 6px; }
.pw-list-title, .pw-q { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-top: 6px; }
.pw-row { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; }
.pw-notdone { color: #c2410c; font-weight: 600; }
.pw-form { display: flex; flex-direction: column; gap: 10px; }
.pw-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pw-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.pw-step { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border: 1px solid var(--line); border-radius: 10px; background: #f8fafc;
  font-size: 0.75rem; color: var(--muted); cursor: pointer; }
.pw-step b { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #e2e8f0; color: #334155; font-size: 0.8rem; }
.pw-step.past b { background: #16a34a; color: #fff; }
.pw-step.on { border-color: #2563eb; color: #1e3a8a; font-weight: 700; background: #eff6ff; }
.pw-step.on b { background: #2563eb; color: #fff; }
.pw-step:disabled { opacity: 0.5; cursor: default; }
.pw-body { display: flex; flex-direction: column; gap: 10px; }
.pw-days { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pw-day { display: flex; flex-direction: column; align-items: center; padding: 8px 4px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font-weight: 700; cursor: pointer; }
.pw-day small { font-weight: 500; color: var(--muted); }
.pw-day.on { border-color: #2563eb; background: #2563eb; color: #fff; }
.pw-day.on small { color: #dbeafe; }
.pw-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pw-chip { padding: 9px 12px; border: 1px solid #cbd5e1; border-radius: 999px; background: #fff; font-size: 0.95rem; cursor: pointer; }
.pw-chip.on { border-color: #16a34a; background: #dcfce7; color: #14532d; font-weight: 700; }
.pw-addroom { display: flex; gap: 6px; }
.pw-addroom input { flex: 1; min-width: 0; padding: 10px; border: 1px dashed #94a3b8; border-radius: 10px; font-size: 1rem; }
.pw-room { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: #f8fafc; }
.pw-room-name { font-weight: 800; font-size: 1.05rem; }
.pw-num { display: grid; grid-template-columns: 1fr 72px 76px; align-items: center; gap: 6px; font-size: 0.9rem; }
.pw-num input { width: 100%; padding: 8px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 1rem; }
.pw-num em { font-style: normal; color: var(--muted); font-size: 0.8rem; min-width: 60px; }
.pw-other, #pwNotes { width: 100%; box-sizing: border-box; padding: 10px; border: 1px solid #cbd5e1; border-radius: 10px; font-size: 1rem; font-family: inherit; }
.pw-eq { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; padding: 6px 0; border-top: 1px solid #e2e8f0; }
.pw-eq:first-of-type { border-top: 0; }
.pw-eq-name { font-weight: 700; display: flex; flex-direction: column; }
.pw-eq-name small { font-weight: 500; color: #1d4ed8; }
.pw-eq-btns { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.pw-eq-l { font-size: 0.75rem; color: var(--muted); }
.pw-count { display: inline-flex; align-items: center; border: 1px solid #cbd5e1; border-radius: 10px; background: #fff; overflow: hidden; }
.pw-count button { width: 40px; height: 38px; border: 0; background: #f1f5f9; font-size: 1.3rem; cursor: pointer; }
.pw-count button:disabled { opacity: 0.35; cursor: default; }
.pw-count b { min-width: 30px; text-align: center; }
.pw-sum-head { font-weight: 700; }
.pw-sum { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font-size: 0.9rem; }
.pw-sum span { display: inline-block; min-width: 92px; color: var(--muted); font-size: 0.8rem; }
.pw-ask .pw-sum { margin-top: 6px; }
.pw-nav { display: flex; justify-content: space-between; gap: 8px; position: sticky; bottom: -28px; padding: 8px 0 4px; background: var(--card); }
.pw-nav .btn { min-height: 46px; padding: 0 16px; font-size: 1rem; }
#fdPwExtra[hidden], .fd-prev-wrap[hidden] { display: none; }
.pw-why { padding: 7px 10px; font-size: 0.95rem; border-left: 4px solid #2563eb; border-radius: 10px; background: #eff6ff; color: #1e3a8a; }
.pw-working { padding: 5px 10px; border-radius: 10px; border: 1px dashed #cbd5e1; color: var(--muted); font-size: 0.9rem; }
.pw-working.on { border: 1px solid #86efac; background: #f0fdf4; color: #14532d; }
/* Paperwork Day 1: add the rooms where work is needed (user 2026-10-23) */
.pw-title { font-weight: 800; font-size: 1.05rem; }
.pw-roomrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border: 1px solid #86efac; border-radius: 12px; background: #f0fdf4; color: #14532d; font-size: 1rem; }
.pw-x { border: 1px solid #fecaca; background: #fff; color: #b91c1c; border-radius: 8px; width: 34px; height: 34px; font-size: 1rem; cursor: pointer; }
.pw-addbtn { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 2px dashed #2563eb; border-radius: 14px; background: #eff6ff; color: #1e3a8a; text-align: left; cursor: pointer; }
.pw-addbtn strong { display: block; font-size: 1.05rem; }
.pw-addbtn small { display: block; font-size: 0.85rem; color: #1d4ed8; }
.pw-plus { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #2563eb; color: #fff; font-size: 1.6rem; font-weight: 700; line-height: 1; }
.pw-addbox { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 2px solid #2563eb; border-radius: 14px; background: #eff6ff; }
.pw-addbox-t { font-weight: 700; color: #1e3a8a; }
.pw-addbox > .btn { align-self: flex-start; }
.pw-addroom input { border-style: solid; }
.pw-titlerow { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pw-titleedit { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; padding: 10px; border: 1px solid #cbd5e1; border-radius: 12px; background: #f8fafc; }
.pw-titleedit label { display: flex; flex-direction: column; gap: 3px; font-size: 0.8rem; color: var(--muted); }
.pw-titleedit input, .pw-titleedit select { width: 100%; box-sizing: border-box; padding: 9px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 1rem; color: var(--ink, #0f172a); }
.pw-roomedit { padding: 6px 8px; border-color: #2563eb; background: #eff6ff; }
.pw-roomedit input { flex: 1; min-width: 0; box-sizing: border-box; padding: 9px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 1rem; }
/* Paperwork Day drop-down: 7 days showing, swipe for more (user 2026-10-23) */
.pw-ddwrap { display: flex; flex-direction: column; gap: 3px; font-size: 0.8rem; color: var(--muted); }
.pw-dd { position: relative; }
.pw-dd-btn { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 9px; border: 1px solid #cbd5e1; border-radius: 8px; background: #fff; font-size: 1rem; color: #0f172a; cursor: pointer; text-align: left; }
.pw-dd-btn i { font-style: normal; color: var(--muted); }
.pw-dd-list { margin-top: 4px; width: 100%; box-sizing: border-box; max-height: calc(7 * 40px); overflow-y: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain; background: #fff; border: 1px solid #cbd5e1; border-radius: 10px; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18); }
.pw-dd-list button { display: block; width: 100%; height: 40px; padding: 0 12px; border: 0; border-bottom: 1px solid #f1f5f9; background: #fff; font-size: 1rem; text-align: left; cursor: pointer; }
.pw-dd-list button.on { background: #2563eb; color: #fff; font-weight: 700; }
/* Paperwork: ✏️ Draw button and room pictures (user 2026-10-23) */
.pw-drawbtn { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 14px; border: 2px solid #f59e0b; border-radius: 14px; background: #fffbeb; color: #78350f; text-align: left; cursor: pointer; }
.pw-drawbtn strong { display: block; font-size: 1.15rem; }
.pw-drawbtn small { display: block; font-size: 0.85rem; color: #92400e; }
.pw-drawico { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: #f59e0b; font-size: 1.3rem; }
.pw-shape { display: inline-flex; align-items: center; gap: 6px; color: #1e3a8a; }
.pw-shape small { font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
.pw-drawsm { display: grid; place-items: center; padding: 0; border-color: #bfdbfe; }
/* The drawing screen: graph paper over everything (roomdraw.js) */
.rdw { position: fixed; inset: 0; z-index: 3000; background: rgba(15, 23, 42, 0.55); display: flex; }
.rdw-box { flex: 1; display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 10px 10px calc(10px + env(safe-area-inset-bottom)); background: #fff; height: 100dvh; box-sizing: border-box; }
.rdw-head { display: flex; justify-content: space-between; align-items: center; font-size: 1.05rem; }
.rdw-hint { font-size: 0.9rem; color: #1e3a8a; background: #eff6ff; border-radius: 8px; padding: 6px 10px; }
.rdw-stage { flex: 1; min-height: 0; border: 1px solid #cbd5e1; border-radius: 10px; overflow: hidden; background: #fdfefe; }
.rdw-svg { width: 100%; height: 100%; display: block; touch-action: none; user-select: none; -webkit-user-select: none; }
.rdw-grid .g1 { stroke: #dbeafe; stroke-width: 1; vector-effect: non-scaling-stroke; }
.rdw-grid .g5 { stroke: #93c5fd; stroke-width: 1; vector-effect: non-scaling-stroke; }
.rdw-ink { fill: none; stroke: #f59e0b; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.rdw-room { fill: rgba(37, 99, 235, 0.12); stroke: #1d4ed8; stroke-width: 3; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.rdw-hit { stroke: transparent; stroke-width: 30; vector-effect: non-scaling-stroke; cursor: move; }
.rdw-hit.on { stroke: rgba(245, 158, 11, 0.35); }
.rdw-dot { fill: #2563eb; stroke: #fff; stroke-width: 2; vector-effect: non-scaling-stroke; cursor: move; }
.rdw-dot.on { fill: #f59e0b; }
.rdw-len { fill: #0f172a; font-weight: 700; text-anchor: middle; dominant-baseline: middle; paint-order: stroke; stroke: #fff; pointer-events: none; }
.rdw-info { text-align: center; font-weight: 700; color: #1e3a8a; }
.rdw-foot { display: flex; justify-content: space-between; gap: 8px; }
.rdw-foot .btn { min-height: 48px; padding: 0 18px; font-size: 1rem; }
.rdw-info { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.rdw-info label { display: flex; align-items: center; gap: 5px; font-size: 0.85rem; }
.rdw-info input { width: 74px; padding: 8px; border: 1px solid #93c5fd; border-radius: 8px; font-size: 1rem; font-weight: 700; color: #0f172a; text-align: center; }
.rdw-area { font-size: 0.9rem; }
.rdw-move { cursor: grab; }
.rdw-move circle { fill: #fff; stroke: #1d4ed8; stroke-width: 2; vector-effect: non-scaling-stroke; }
.rdw-move text { fill: #1d4ed8; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.rdw-move.on circle { fill: #f59e0b; stroke: #b45309; }
.rdw-move.on text { fill: #fff; }
/* Room drawing, step 2: highlight the work (roomdraw.js, user 2026-10-24) */
.rdw-panel { display: flex; flex-direction: column; gap: 6px; }
.rdw-colors { display: flex; align-items: center; gap: 10px; }
.rdw-color { width: 36px; height: 36px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px #cbd5e1; cursor: pointer; }
.rdw-color.on { box-shadow: 0 0 0 3px #0f172a; }
.rdw-colors .rdw-area { margin-left: auto; font-weight: 700; color: #1e3a8a; font-size: 0.85rem; }
.rdw-marks { display: flex; flex-direction: column; gap: 4px; max-height: 96px; overflow-y: auto; }
.rdw-mark { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; text-align: left; font-size: 0.9rem; cursor: pointer; }
.rdw-sw { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; color: #fff; font-size: 0.75rem; font-weight: 800; vertical-align: middle; }
.rdw-ask { display: flex; flex-direction: column; gap: 6px; }
.rdw-ask-t { font-weight: 800; display: flex; align-items: center; gap: 8px; }
.rdw-ask input { width: 100%; box-sizing: border-box; padding: 10px; border: 1px solid #93c5fd; border-radius: 10px; font-size: 1rem; }
.rdw-chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.rdw-chips button { flex: 0 0 auto; padding: 7px 11px; border: 1px solid #cbd5e1; border-radius: 999px; background: #fff; font-size: 0.85rem; cursor: pointer; white-space: nowrap; }
.rdw-badge circle { stroke: #fff; stroke-width: 2; vector-effect: non-scaling-stroke; }
.rdw-badge text { fill: #fff; font-weight: 800; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.rdw-badge { pointer-events: none; }
.rdw-foot .btn:disabled { opacity: 0.45; }
.pw-roomrow .pw-work { display: block; font-size: 0.78rem; font-weight: 500; color: #475569; margin-top: 2px; }
/* The question panel must never get wider than the phone: the quick-pick row scrolls sideways inside it (user 2026-10-24) */
.rdw-box { min-width: 0; max-width: 100vw; overflow: hidden; }
.rdw-panel, .rdw-ask, .rdw-colors, .rdw-marks { min-width: 0; max-width: 100%; }
.rdw-chips { max-width: 100%; min-width: 0; }
.rdw-stage { position: relative; }
.rdw-mend { fill: #fff; stroke-width: 4; vector-effect: non-scaling-stroke; cursor: grab; }
.rdw-mbody { fill: transparent; stroke: transparent; cursor: move; }
.rdw-mbody-line { fill: none; stroke-width: 26; vector-effect: non-scaling-stroke; }
/* The paper takes only the space that's left: the size boxes and Lock / Save buttons always stay on screen (user 2026-10-24) */
.rdw-stage { flex: 1 1 0; min-height: 120px; }
.rdw-stage .rdw-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.rdw-head, .rdw-hint, .rdw-panel { flex: 0 0 auto; }
/* A room row is a button: tap it to open it for changes (user 2026-10-24) */
button.pw-roomrow { width: 100%; text-align: left; font: inherit; cursor: pointer; }
.pw-ok { background: #0b6fb8; border-color: #0b6fb8; font-size: 1.05rem; }
.pw-delbtn { display: grid; place-items: center; background: #dc2626; border-color: #dc2626; }
/* Marking step: colors + list of marks above the paper, ✕ deletes a mark (user 2026-10-24) */
.rdw-top { flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rdw-top[hidden] { display: none; }
.rdw-markrow { display: flex; gap: 6px; align-items: stretch; }
.rdw-markrow .rdw-mark { flex: 1; min-width: 0; }
.rdw-markx { flex: 0 0 auto; width: 36px; border: 1px solid #fecaca; border-radius: 8px; background: #fff; color: #b91c1c; font-size: 1rem; font-weight: 700; cursor: pointer; }
/* Marking step (user 2026-10-24): no tip box, 8 smaller color dots, marks as chips side by side with a small ✕ */
.rdw-hint[hidden] { display: none; }
.rdw-colors { gap: 6px; flex-wrap: nowrap; }
.rdw-color { width: 32px; height: 32px; flex: 0 0 auto; }
.rdw-marks { flex-direction: row; flex-wrap: wrap; gap: 6px; max-height: 110px; }
.rdw-markrow { display: inline-flex; align-items: center; gap: 0; max-width: 100%; border: 1px solid #e2e8f0; border-radius: 999px; background: #fff; }
.rdw-markrow .rdw-mark { flex: 0 1 auto; border: 0; background: transparent; padding: 4px 4px 4px 5px; gap: 6px; min-width: 0; }
.rdw-markrow .rdw-mark span:last-child { overflow-wrap: anywhere; }
.rdw-markx { width: 22px; height: 22px; margin-right: 5px; padding: 0; border: 0; border-radius: 50%; background: #fee2e2; color: #b91c1c; font-size: 0.7rem; line-height: 22px; }
/* 📝 Notes for a room, on the drawing screen (user 2026-10-24) */
.rdw-notes-btn { position: absolute; top: 8px; right: 8px; z-index: 2; padding: 8px 12px; border: 1px solid #cbd5e1; border-radius: 999px; background: #fff; font-size: 0.9rem; font-weight: 700; color: #334155; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.15); cursor: pointer; }
.rdw-notes-btn b { color: #16a34a; }
.rdw-notes-btn.on { background: #2563eb; color: #fff; border-color: #2563eb; }
.rdw-notes { position: absolute; left: 8px; right: 8px; top: 52px; z-index: 3; display: flex; flex-direction: column; gap: 8px; padding: 10px; background: #fff; border: 1px solid #cbd5e1; border-radius: 12px; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.2); }
.rdw-notes[hidden] { display: none; }
.rdw-notes-t { font-weight: 800; }
.rdw-notes textarea { width: 100%; box-sizing: border-box; padding: 10px; border: 1px solid #93c5fd; border-radius: 10px; font: inherit; font-size: 1rem; resize: vertical; }
/* Paperwork room rows: 👁 View / ✏️ Edit (user 2026-10-24) */
.pw-rr { gap: 8px; }
.pw-rr-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pw-rr-main small { display: block; }
.pw-rr-size { font-size: 0.75rem; font-weight: 600; color: #1e3a8a; }
.pw-rr-thumb { flex: 0 0 auto; padding: 2px; border: 1px solid #bfdbfe; border-radius: 8px; background: #fff; cursor: pointer; line-height: 0; }
.pw-rr-btns { display: flex; flex-direction: column; gap: 4px; flex: 0 0 auto; }
.pw-rr-btn { padding: 5px 9px; border: 1px solid #cbd5e1; border-radius: 8px; background: #fff; font-size: 0.8rem; font-weight: 600; color: #334155; cursor: pointer; white-space: nowrap; }
.rdw-foot .btn { white-space: nowrap; justify-content: center; }
/* Drawing screen: every bottom button the same blue with white writing (user 2026-10-24) */
.rdw-foot .btn, .rdw-foot .btn.primary { background: #0b6fb8; border-color: #0b6fb8; color: #fff; }
.rdw-foot .btn:disabled { background: #0b6fb8; color: #fff; opacity: 0.45; }
/* Drawing screen bottom buttons: identical (user 2026-10-24) — equal widths, one font, one size, no icons */
.rdw-foot { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.rdw-foot .btn { width: 100%; min-height: 48px; padding: 0 8px; font-family: inherit; font-size: 1rem; font-weight: 600; letter-spacing: 0; line-height: 1; }
.rdw-foot > span { align-self: center; font-size: 0.8rem; }
.rdw-info input { width: 64px; } .rdw-info { gap: 6px; }
/* Room drawing step 3: equipment placement (user 2026-10-24) */
.rdw-eqtypes { display: flex; flex-wrap: wrap; gap: 6px; }
.rdw-eqtype { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 5px; border: 1px solid #cbd5e1; border-radius: 999px; background: #fff; font-size: 0.85rem; cursor: pointer; }
.rdw-eqtype b { display: inline-grid; place-items: center; min-width: 26px; height: 22px; padding: 0 4px; border-radius: 6px; background: #334155; color: #fff; font-size: 0.72rem; }
.rdw-eqtype span { font-weight: 800; color: #0b6fb8; }
.rdw-eqtype.on { border-color: #0b6fb8; box-shadow: 0 0 0 2px #0b6fb8; }
.rdw-eqtype.on b { background: #0b6fb8; }
.rdw-eqtip { font-size: 0.78rem; color: var(--muted); }
.rdw-eq rect { fill: #334155; stroke: #fff; stroke-width: 2; vector-effect: non-scaling-stroke; }
.rdw-eq text { fill: #fff; font-weight: 800; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.rdw-eq.on rect { fill: #0b6fb8; stroke: #f59e0b; stroke-width: 3; }
.rdw-foot:has(> .btn:nth-child(4)) .btn { font-size: 0.88rem; padding: 0 4px; }
.rdw-eqother b { background: #16a34a; }
.rdw-eqotherbox { display: flex; gap: 6px; }
.rdw-eqotherbox input { flex: 1; min-width: 0; padding: 9px; border: 1px solid #93c5fd; border-radius: 10px; font-size: 1rem; }
.rdw-eqotherbox .btn { background: #0b6fb8; border-color: #0b6fb8; color: #fff; min-height: 42px; }

/* Tech view sheets (Paperwork, Readings, Contracts…) open like the job file (user 2026-10-24): under the blue bar,
   sized to the visible screen, the title + ✕ Close stay fixed at the top while the rest scrolls under it.
   (They used to sit at the bottom at 85vh, and on an iPhone their top went under the blue bar.) */
body.field-mode .fd-sheet { top: var(--fd-bar, 50px); align-items: flex-start; padding: 10px 8px 0; }
body.field-mode .fd-sheet-box { height: calc(100dvh - var(--fd-bar, 50px) - 10px); max-height: none; border-radius: 12px 12px 0 0;
  padding: 0 14px 28px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
body.field-mode .fd-sheet-head { position: sticky; top: 0; z-index: 8; margin: 0 -14px; padding: 10px 14px; background: var(--card);
  border-bottom: 1px solid var(--line); flex-shrink: 0; }
.fd-sheet-head .fd-close-btn { font-weight: 700; }
/* Paperwork list: the day just saved is lit up with ✓ Saved (pwJustSaved) (user 2026-10-24) */
#fdPw .pw-row.pw-row-new { border-color: #16a34a; background: #f0fdf4; box-shadow: 0 0 0 2px #86efac; }
#fdPw .pw-saved { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: 0.74rem; font-weight: 700; vertical-align: middle; }
#fdPw .pw-saved { background: #dcfce7; color: #15803d; }

/* ✨ Assistant (assistant.js, user 2026-10-24): round button bottom left on every screen, a wave across the screen when
   it's tapped, a glowing edge while it listens, and a panel at the bottom (search first, ✨ Do it for tasks) */
/* (2026-10-24, user: on the right on every view, a bit smaller, "noticeable but subtle", one star, more blue than purple) */
.ai-fab { position: fixed; right: 14px; bottom: calc(34px + env(safe-area-inset-bottom)); z-index: 60; width: 46px; height: 46px; border: 0; border-radius: 50%;
  background: linear-gradient(145deg, #38bdf8, #0b6fb8 70%); color: #fff; cursor: pointer; opacity: 0.94;
  box-shadow: 0 4px 14px rgba(11, 111, 184, 0.35), inset 0 0 0 1.5px rgba(255,255,255,0.45); display: grid; place-items: center; }
.ai-fab svg { width: 22px; height: 22px; display: block; filter: drop-shadow(0 0 3px rgba(255,255,255,0.6)); }
.ai-fab:hover { opacity: 1; }
.ai-fab:active { transform: scale(0.94); }
body.ai-on .ai-fab { display: none; }   /* the panel has its own ✕ Close and 🎤 */
@media (max-width: 700px) {
  .ai-fab { right: 10px; bottom: calc(28px + env(safe-area-inset-bottom)); }   /* a bit up from the edge (user 2026-10-24) */
  /* above the job file's Save bar and the phone Schedule's "+ Schedule" bar */
  body.job-pop-open .ai-fab, body:not(.field-mode):has(.sched-phone-add) .ai-fab { bottom: calc(110px + env(safe-area-inset-bottom)); }
  /* room at the end of every page so the last row can scroll up past the button */
  #main { padding-bottom: 72px; }
}
body.embed .ai-fab, body.cloud-gate .ai-fab { display: none; }
/* The wave: one thin blue ring from the button out past the corners of the screen */
@property --ai-r { syntax: '<length>'; inherits: false; initial-value: 0px; }
.ai-wave { position: fixed; inset: 0; z-index: 3400; pointer-events: none;
  background: radial-gradient(circle at var(--x) var(--y), transparent calc(var(--ai-r) - 34px), rgba(56, 189, 248, 0.22) calc(var(--ai-r) - 8px),
    rgba(11, 111, 184, 0.6) var(--ai-r), transparent calc(var(--ai-r) + 2px));
  animation: ai-wave 0.85s cubic-bezier(.22,.75,.3,1) forwards; }
@keyframes ai-wave { from { --ai-r: 0px; opacity: 1; } 70% { opacity: 0.9; } to { --ai-r: var(--far, 1200px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ai-wave { display: none; } }
/* The panel */
.ai-panel { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 70;
  width: min(620px, calc(100vw - 16px)); max-height: min(70dvh, 640px); display: flex; flex-direction: column; gap: 8px;
  background: var(--card); border: 1px solid #bae6fd; border-radius: 16px; padding: 10px 12px 12px; box-shadow: 0 18px 50px rgba(15, 23, 42, 0.35); }
.ai-panel[hidden] { display: none; }
@media (max-width: 700px) { .ai-panel { bottom: calc(8px + env(safe-area-inset-bottom)); } }
.ai-head { display: flex; align-items: center; gap: 8px; }
.ai-head strong { color: #0b6fb8; font-size: 1.05rem; }
.ai-status { flex: 1; font-size: 0.82rem; color: #0284c7; font-weight: 600; }
.ai-row { display: flex; gap: 8px; }
.ai-row input { flex: 1; min-width: 0; padding: 11px 12px; border: 2px solid #7dd3fc; border-radius: 12px; font: inherit; font-size: 1rem; }
.ai-row input:focus { outline: none; border-color: #0b6fb8; }
.ai-hits { overflow-y: auto; display: flex; flex-direction: column; gap: 4px; min-height: 0; }
.ai-hits .gs-hit { width: 100%; }
.ai-do { display: block; width: 100%; text-align: left; padding: 10px 12px; border: 1px dashed #7dd3fc; border-radius: 12px; background: #f0f9ff; color: #075985;
  font: inherit; font-weight: 700; cursor: pointer; }
.ai-do span { font-weight: 400; color: var(--text, #0f172a); }
.ai-do.strong { border-style: solid; background: linear-gradient(90deg, #e0f2fe, #ecfeff); }
.ai-none { margin: 4px 2px; font-size: 0.88rem; }
.ai-out:empty { display: none; }
.ai-msg { margin: 0; padding: 9px 12px; border-radius: 12px; background: #e0f2fe; color: #0c4a6e; font-size: 0.93rem; }
.ai-think { display: flex; gap: 5px; }
.ai-think span { width: 8px; height: 8px; border-radius: 50%; background: #0ea5e9; animation: ai-dot 1s infinite ease-in-out; }
.ai-think span:nth-child(2) { animation-delay: 0.15s; } .ai-think span:nth-child(3) { animation-delay: 0.3s; }
@keyframes ai-dot { 0%, 100% { opacity: 0.25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
.ai-choices { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; max-height: 40dvh; overflow-y: auto; }
.ai-choice { display: flex; flex-direction: column; align-items: flex-start; text-align: left; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font: inherit; cursor: pointer; }
.ai-confirm { display: flex; flex-direction: column; gap: 6px; font-size: 1rem; }