/* Colors live only in these token blocks (UX spec E4). Dark is the default; Sunlight mode is
   <html data-theme="light">, set server-side from the `theme` cookie (no flash). The weather
   ticker and the map/photo viewer get the dark set back, so they stay dark in Sunlight mode. */
:root,
:root[data-theme="light"] .wx-ticker,
:root[data-theme="light"] .map-viewer {
  --bg: #0e1216;
  --bg-elevated: #161b21;
  --bg-elevated-2: #1d232b;
  --bg-subtle: #1a2027;
  --border: #2a323c;
  --text: #e6e9ec;
  --text-strong: #fff;
  --text-muted: #9aa4af;
  --blue: #3d8bd4;
  --blue-dim: #2a5f91;
  --green: #6bb644;
  --green-hover: #7cc855;
  --yellow: #d4a72c;
  --yellow-hover: #e0b845;
  --orange: #d97a2c;
  --red: #d4453f;
  --slate: #8f9bb3;
  /* Text on a tint of its own hue (badges, chips). */
  --blue-text: #8ec0ec;
  --green-text: #9fd87f;
  --red-text: #f0918d;
  --orange-text: #f0a56a;
  --slate-text: #b6c0d4;
  /* Text on filled backgrounds: on-accent sits on --blue-dim / --red, on-bright on --green / --yellow / --orange. */
  --on-accent: #fff;
  --on-accent-muted: #dbe7f3;
  --on-bright: #0e1216;
  --shadow: #00000066;
  --shadow-strong: #00000088;
  --scrim: rgba(0, 0, 0, 0.65);
  --dot-border: rgba(255, 255, 255, 0.2);
  --ok: var(--green); --warn: var(--yellow); --danger: var(--red); --info: var(--blue);
  /* Tells the browser the page is dark, so native parts (select popups, date
     pickers, file inputs, checkboxes, scrollbars) render dark too. */
  color-scheme: dark;
}

:root {
  /* Theme-independent: the viewer and ticker colors, paper behind maps/PDFs, equipment category colors. */
  --paper: #fff;
  --viewer-bg: #0b0e11f7;
  --wx-bg: #050607;
  --wx-amber: #f2a93b;
  --wx-red: #ff5a4f;
  --wx-dim: #ffffffb3;
  --cat-default: #9aa1a9;
  --cat-teal: #5fb8c9;
  --cat-violet: #8f8ff0;
  --cat-pink: #d96b9e;
  --radius: 10px;
  /* Design tokens (UX spec A1). New and touched rules use these; old ones move over gradually. */
  --fs-xs: 12px; --fs-sm: 14px; --fs-md: 16px; --fs-lg: 20px; --fs-xl: 26px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
  --tap: 44px; --tap-field: 48px;
}

/* Sunlight mode (account menu). Every text pair here is >= 4.5:1; see README. */
:root[data-theme="light"] {
  --bg: #eef1f4;
  --bg-elevated: #fff;
  --bg-elevated-2: #e3e8ed;
  --bg-subtle: #e9edf1;
  --border: #8d99a5;
  --text: #0d1318;
  --text-strong: #000;
  --text-muted: #3f4b57;
  --blue: #09539e;
  --blue-dim: #0b4f94;
  --green: #27600f;
  --green-hover: #1f4f0b;
  --yellow: #6f4e00;
  --yellow-hover: #5c4100;
  --orange: #8c3a00;
  --red: #9e1c17;
  --slate: #5d6a80;
  --blue-text: #0a4a8c;
  --green-text: #1f4f0b;
  --red-text: #8a1813;
  --orange-text: #8c3a00;
  --slate-text: #3d4757;
  --on-accent: #fff;
  --on-accent-muted: #dbe7f3;
  --on-bright: #fff;
  --shadow: #00000033;
  --shadow-strong: #00000044;
  --scrim: rgba(0, 0, 0, 0.55);
  --dot-border: rgba(0, 0, 0, 0.3);
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

/* The hidden attribute must win over component display rules (e.g.
   `.ticket-form label { display: flex }`) -- the ticket-type toggle relies on it. */
[hidden] {
  display: none !important;
}

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

a {
  color: var(--blue);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 24px;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
}

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

.topbar img.logo {
  height: 32px;
  width: auto;
}

.topbar nav {
  display: flex;
  flex-wrap: wrap; /* tablet widths: tabs wrap to a second row instead of overflowing */
  gap: 4px;
  min-width: 0;
}

.topbar nav a {
  color: var(--text-muted);
  text-decoration: none;
  padding: 8px 14px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
}

.topbar nav a:hover {
  background: var(--bg-elevated-2);
  color: var(--text);
}

.topbar nav a.active {
  background: var(--blue-dim);
  color: var(--on-accent);
}

.container {
  max-width: none;
  margin: 0 auto;
  padding: 18px 32px 48px;
}

h1 {
  font-size: 20px;
  margin: 0 0 3px;
}

h2 {
  font-size: 13px;
  margin: 0 0 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.subtitle {
  color: var(--text-muted);
  margin: 0 0 16px;
  font-size: 13px;
}

.grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 14px;
}

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

/* Tiles that wrap and sit side by side once there's room, instead of two
   rigid stacked columns -- used by the Winter Ops dashboard. Each tile is
   independently draggable (via .tile-drag-handle) and resizable (native CSS
   resize, bottom-right corner) -- see the layout script in pre_storm.html,
   which persists order/size per browser in localStorage. */
.tile-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-start;
}

.tile-grid .tile {
  /* flex-basis must stay auto -- per spec, an explicit flex-basis overrides
     `width` for main-axis sizing, which would silently ignore the native
     resize handle's width changes (only height would visibly respond). With
     flex-basis:auto, the `width` below is used instead, and both width and
     height stay resizable. */
  flex: 0 1 auto;
  width: 340px;
  min-width: 260px;
  min-height: 120px;
  max-width: 100%;
  resize: both;
  overflow: auto;
}

.tile-grid .tile-wide {
  width: 700px;
}

.tile-grid .tile.dragging {
  opacity: 0.4;
  outline: 2px dashed var(--blue);
}

.tile-drag-handle {
  float: right;
  margin-left: 8px;
  color: var(--text-muted);
  cursor: grab;
  padding: 2px 4px;
  border-radius: 4px;
}

.tile-drag-handle:hover {
  background: var(--bg-elevated-2);
  color: var(--text);
}

.tile-drag-handle:active {
  cursor: grabbing;
}

.tile-drag-handle circle {
  fill: currentColor;
}

.resource-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.resource-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-elevated-2);
  color: var(--text);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
}

.resource-btn:hover {
  background: var(--blue-dim);
  border-color: var(--blue-dim);
  color: var(--on-accent);
}

.resource-btn::after {
  content: "↗";
  color: var(--text-muted);
  margin-left: 10px;
}

.resource-btn:hover::after {
  color: var(--on-accent);
}

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

.tile-grid .card {
  margin-bottom: 0;
}

.table-scroll {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

th, td {
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
}

th {
  color: var(--text-muted);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

tr:last-child td {
  border-bottom: none;
}

.badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.badge.phase-pre_storm { background: color-mix(in srgb, var(--blue-dim) 19%, transparent); color: var(--blue); }
.badge.phase-active_ops { background: color-mix(in srgb, var(--red) 19%, transparent); color: var(--red); }
.badge.phase-recap { background: color-mix(in srgb, var(--green) 19%, transparent); color: var(--green); }
.badge.phase-cancelled { background: color-mix(in srgb, var(--text-muted) 19%, transparent); color: var(--text-muted); }

.row-elapsed-normal { }
.row-elapsed-yellow td { background: color-mix(in srgb, var(--yellow) 10%, transparent); }
.row-elapsed-orange td { background: color-mix(in srgb, var(--orange) 13%, transparent); }
.row-elapsed-red td { background: color-mix(in srgb, var(--red) 16%, transparent); }

.pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--on-bright);
}
.pill.yellow { background: var(--yellow); }
.pill.orange { background: var(--orange); }
.pill.red { background: var(--red); color: var(--on-accent); }

form.inline {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

input::placeholder, textarea::placeholder {
  color: var(--text-muted);
  opacity: 0.8;
}

input[type="file"]::file-selector-button {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  background: var(--blue-dim);
  color: var(--on-accent);
  border: none;
  border-radius: 6px;
  padding: 6px 12px;
  margin-right: 10px;
  cursor: pointer;
}

input, select, button, textarea {
  font-family: inherit;
  font-size: 14px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-elevated-2);
  color: var(--text);
}

button {
  background: var(--blue-dim);
  color: var(--on-accent);
  border: none;
  cursor: pointer;
  font-weight: 600;
}

button:hover {
  background: var(--blue);
}

button.secondary {
  background: var(--bg-elevated-2);
  color: var(--text);
  border: 1px solid var(--border);
}

.empty-state {
  color: var(--text-muted);
  font-style: italic;
  padding: 14px 0;
}

.flash {
  background: var(--blue-dim);
  color: var(--on-accent);
  padding: 10px 16px;
  border-radius: var(--radius);
  margin-bottom: 18px;
  font-size: 14px;
}

/* Message types (UX spec A3). .storage-warning below keeps its own look. */
.flash[data-flash] {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  background: var(--bg-elevated);
  color: var(--text);
  border: 1px solid var(--info);
  border-left-width: 5px;
  padding: 10px 8px 10px 12px;
  transition: opacity 0.3s;
}

.flash[data-flash].flash-hiding { opacity: 0; }
/* Old-style banners (.flash without data-flash) sit on --blue-dim: links take the banner's text color. */
.flash:not([data-flash]) a { color: inherit; }
.flash-success { border-color: var(--ok) !important; background: color-mix(in srgb, var(--green) 12%, transparent) !important; }
.flash-error { border-color: var(--danger) !important; background: color-mix(in srgb, var(--red) 15%, transparent) !important; }
.flash-warning { border-color: var(--warn) !important; background: color-mix(in srgb, var(--yellow) 12%, transparent) !important; }
.flash-info { border-color: var(--info) !important; background: color-mix(in srgb, var(--blue) 12%, transparent) !important; }

.flash-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-weight: 800;
  font-size: var(--fs-sm);
  color: var(--on-bright);
  background: var(--info);
}

.flash-success .flash-icon { background: var(--ok); }
.flash-error .flash-icon { background: var(--danger); color: var(--on-accent); }
.flash-warning .flash-icon { background: var(--warn); }

.flash-text {
  flex: 1 1 auto;
  min-width: 0;
  padding-top: 2px;
  overflow-wrap: anywhere;
}

button.flash-close {
  flex: none;
  background: none;
  color: var(--text-muted);
  border: 0;
  padding: 0;
  width: var(--tap);
  height: 28px;
  min-height: 0;
  margin: -3px -4px -3px 0;
  font-size: var(--fs-md);
  line-height: 1;
}

button.flash-close:hover { background: none; color: var(--text); }

@media (max-width: 700px) {
  button.flash-close { height: var(--tap); margin: -11px -8px -11px 0; }
}

.flash.storage-warning {
  background: color-mix(in srgb, var(--red) 15%, transparent);
  border: 1px solid var(--red);
  color: var(--text);
}

.stat-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.stat {
  background: var(--bg-elevated-2);
  border-radius: var(--radius);
  padding: 10px 12px;
  min-width: 100px;
  flex: 1;
}

.stat .value {
  font-size: 18px;
  font-weight: 700;
}

.stat .value .low {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
}

.stat .label {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  margin: 2px 0 3px;
}

.stat-row.compact .stat {
  padding: 8px 10px;
  min-width: 90px;
}

.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 36px;
  width: 320px;
  text-align: center;
}

.login-card.signup-card {
  width: 380px;
}

.login-card img.logo {
  height: 40px;
  margin-bottom: 20px;
}

.login-card input {
  width: 100%;
  margin-bottom: 10px;
}

.login-card button {
  width: 100%;
  padding: 10px;
}

.text-note {
  color: var(--text-muted);
  font-size: 13px;
}

iframe.embed {
  width: 100%;
  border: none;
  border-radius: var(--radius);
}

/* Radar: height tracks width 1:1 so the tile is square regardless of how wide
   the tile-stack column ends up (rather than a fixed height guess). */
.embed-square {
  aspect-ratio: 1 / 1;
  height: auto;
}

/* Winter Ops radar tile: a column where the map fills whatever the tile has
   left under the heading, so the whole map (and its controls) always fits and
   scales as the tile is resized -- no scroll bar. The default height roughly
   matches a square map; a resized tile keeps its saved height (inline style). */
.tile-grid .tile.tile-radar {
  display: flex;
  flex-direction: column;
  height: 460px;
  min-height: 300px;
  overflow: hidden;
}

.tile-grid .tile.tile-radar { position: relative; }

.tile-radar .tile-drag-handle {
  position: absolute;
  top: 14px;
  right: 14px;
}

.tile-radar .radar-embed {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
}

.tile-radar .text-note {
  flex: none;
  margin-bottom: 0;
}

.nav-user {
  color: var(--text-muted);
  font-size: 13px;
  padding: 8px 10px;
}

.row-inactive td {
  opacity: 0.5;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
  margin-bottom: 8px;
}

.employee-form textarea {
  width: 100%;
  margin-bottom: 10px;
  resize: vertical;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-muted);
}

.checkbox-label input {
  width: auto;
}

.sms-consent {
  align-items: flex-start;
  text-align: left;
  line-height: 1.4;
  margin-bottom: 14px;
}

.sms-consent input[type="checkbox"] {
  margin-top: 3px;
  flex-shrink: 0;
}

table input[type="text"], table input[type="tel"], table select {
  width: 100%;
  padding: 5px 7px;
  font-size: 13px;
}

table input[type="checkbox"] {
  width: auto;
}

/* --- Comms tab --- */

.nav-badge {
  display: inline-block;
  min-width: 16px;
  padding: 1px 5px;
  border-radius: 999px;
  background: var(--red);
  color: var(--on-accent);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  margin-left: 4px;
}

.comms-layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 14px;
  align-items: start;
}

.comms-back { display: none; }

@media (max-width: 800px) {
  .comms-layout { grid-template-columns: 1fr; }
  /* One column: put the open conversation first instead of below the list. */
  .comms-layout.has-thread .comms-thread { order: -1; }
  .comms-back { display: inline-flex; margin-bottom: 10px; }
}


.comms-sidebar {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.compose-panel summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
  list-style: none;
}

.compose-panel summary::-webkit-details-marker {
  display: none;
}

.compose-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

.compose-form textarea {
  width: 100%;
  resize: vertical;
}

.employee-picker {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--bg-elevated-2);
}

.employee-picker summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--text-muted);
  list-style: none;
}

.employee-picker summary::-webkit-details-marker {
  display: none;
}

.employee-picker-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
  max-height: 220px;
  overflow-y: auto;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.comms-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 70vh;
  overflow-y: auto;
}

.comms-row {
  position: relative;
  display: block;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 26px 10px 12px;
  text-decoration: none;
  color: var(--text);
}

.comms-row:hover {
  border-color: var(--blue-dim);
}

.comms-row.active {
  border-color: var(--blue);
  background: var(--bg-elevated-2);
}

.comms-row.unread .comms-row-name {
  color: var(--text-strong);
  font-weight: 700;
}

.comms-row-top {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  min-width: 0;
}

.comms-row-name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.comms-row-time {
  color: var(--text-muted);
  font-size: var(--fs-xs);
  flex-shrink: 0;
  margin-left: auto;
}

/* "Applicant" tag on Comms rows + thread title (job applicants who aren't employees). */
.badge.comms-applicant-tag {
  flex: none;
  background: color-mix(in srgb, var(--orange) 19%, transparent);
  color: var(--orange-text);
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 1px 7px;
}
.comms-thread-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.comms-thread-title .badge { font-size: var(--fs-xs); }
.comms-filter { margin-bottom: -4px; }

.comms-row-preview {
  color: var(--text-muted);
  font-size: 12px;
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.comms-unread-dot {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blue);
}

.comms-thread {
  display: flex;
  flex-direction: column;
  min-height: 480px;
}

.comms-messages {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 14px 0;
  overflow-y: auto;
  max-height: 55vh;
}

.comms-bubble {
  max-width: 70%;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 13px;
}

.comms-bubble.inbound {
  align-self: flex-start;
  background: var(--bg-elevated-2);
  border-bottom-left-radius: 2px;
}

.comms-bubble.outbound {
  align-self: flex-end;
  background: var(--blue-dim);
  color: var(--on-accent);
  border-bottom-right-radius: 2px;
}

.ios-safari-note { margin: var(--sp-3) 0; text-align: left; font-size: var(--fs-xs); }
.ios-safari-note[hidden] { display: none; }
.ios-safari-note p { margin: 0; }
.login-card .install-hint-close { width: 40px; padding: 0; }   /* the generic .login-card button is full width */
.comms-push-tag { background: color-mix(in srgb, var(--blue) 19%, transparent); color: var(--blue-text); }
.comms-bubble-body {
  white-space: pre-wrap;
  word-break: break-word;
}

.comms-bubble-meta {
  margin-top: 4px;
  font-size: var(--fs-xs);
  opacity: 0.7;
}

.comms-reply-form {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

.comms-reply-form textarea {
  flex: 1;
  resize: vertical;
}

/* --- Messenger (app/messenger): the Comms look, with its own classes so Comms changes can't break it --- */

.msgr-layout {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.msgr-sidebar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.msgr-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.msgr-actions { flex-wrap: nowrap; }
.msgr-actions .button-link { flex: 1 1 0; min-width: 0; text-align: center; white-space: nowrap; padding-left: 6px; padding-right: 6px; }
.msgr-search input { width: 100%; }

.msgr-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
}

h2.msgr-section {
  margin: 8px 2px 0;
  font-size: var(--fs-xs);
}
h2.msgr-section:first-child { margin-top: 0; }

.msgr-row {
  display: block;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  text-decoration: none;
  color: var(--text);
}
.msgr-row:hover { border-color: var(--blue-dim); }
.msgr-row.active { border-color: var(--blue); background: var(--bg-elevated-2); }

.msgr-row-top,
.msgr-row-bottom {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.msgr-row-top { font-size: 14px; }
.msgr-row-bottom { margin-top: 3px; }

.msgr-row-name {
  min-width: 0;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.msgr-row.unread .msgr-row-name { color: var(--text-strong); font-weight: 700; }
/* Ops Robot's avatar: a robot glyph on a blue tint (not an employee's initials). */
.msgr-robot {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--blue) 20%, transparent);
  border: 1px solid var(--border);
  font-size: 13px;
  line-height: 1;
}

.msgr-row-time {
  flex: none;
  margin-left: auto;
  color: var(--text-muted);
  font-size: var(--fs-xs);
}
.msgr-row.unread .msgr-row-time { color: var(--text); }

.msgr-muted-icon { flex: none; font-size: var(--fs-xs); }

.msgr-row-preview {
  flex: 1;
  min-width: 0;
  color: var(--text-muted);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.msgr-row.unread .msgr-row-preview { color: var(--text); font-weight: 600; }

.msgr-count {
  flex: none;
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--blue-dim);
  color: var(--on-accent);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}
.msgr-row.muted .msgr-count { background: var(--text-muted); color: var(--bg); }

/* The open conversation: a header, the scrolling messages, and the composer pinned under them. */
.msgr-thread {
  position: relative;          /* the reaction bar / who-reacted note are placed inside it */
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0;
  margin-bottom: 0;
  overflow: hidden;
}

.msgr-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.msgr-head-main { flex: 1; min-width: 0; }
.msgr-title {
  margin: 0;
  font-size: 16px;
  color: var(--text-strong);
  text-transform: none;
  letter-spacing: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.msgr-subtitle { margin: 2px 0 0; }
/* The ← back button on every page (same rounded square as the ⋯ menu button). Page backs sit alone in a
   .back-row above the page content. */
.back-row { margin: 0 0 12px; }
.back-row .back-btn { margin-right: 10px; }
.back-btn {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  border: 1px solid var(--blue);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  color: var(--text);
  text-decoration: none;
  vertical-align: middle;
}
.back-btn:hover { text-decoration: none; background: var(--blue-dim); }
.back-btn-arrow { font-size: 20px; line-height: 1.2; font-weight: 700; }
/* Back to the list (phones): the shared .back-btn, with the unread count of your other conversations when there is
   one. */
.msgr-back { display: none; gap: 6px; }
.msgr-fs-back { display: none; }
.msgr-back-count {
  min-width: 22px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--red);
  color: var(--on-accent);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}

.action-menu.msgr-menu summary {
  min-width: 0;
  padding: 4px 12px;
  font-size: 20px;
  line-height: 1.2;
}
.msgr-menu .action-menu-panel form { margin: 0; }
.msgr-menu-item {
  display: block;
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 8px;
  background: none;
  color: var(--text);
  font-size: 16px;
  font-weight: 400;
  text-align: left;
}
.msgr-menu-item:hover { background: var(--bg-elevated-2); }

.msgr-messages {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 14px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.msgr-messages > * { flex: none; }
.msgr-items { display: flex; flex-direction: column; margin-top: auto; }
.msgr-items > * { flex: none; }
.msgr-earlier { align-self: center; margin-bottom: 10px; }
.msgr-start, .msgr-pick { text-align: center; margin: auto 0; }
.msgr-pick { padding: 40px 14px; }

.msgr-day { align-self: center; margin: 14px 0 6px; text-align: center; }
.msgr-day span {
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--bg-elevated-2);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 600;
}
.msgr-system {
  align-self: center;
  max-width: 90%;
  margin: 8px 0;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  text-align: center;
}

.msgr-msg { display: flex; flex-direction: column; max-width: 78%; margin-top: 2px; }
.msgr-msg.mine { align-self: flex-end; align-items: flex-end; }
.msgr-msg.theirs { align-self: flex-start; align-items: flex-start; }
.msgr-msg.mine + .msgr-msg.theirs,
.msgr-msg.theirs + .msgr-msg.mine,
.msgr-msg.with-name { margin-top: 8px; }

.msgr-sender {
  margin: 0 4px 2px;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 600;
}

.msgr-bubble {
  max-width: 100%;
  padding: 8px 12px;
  border-radius: 16px;
  font-size: 15px;
}
.msgr-msg.theirs .msgr-bubble { background: var(--bg-elevated-2); border-bottom-left-radius: 4px; }
.msgr-msg.mine .msgr-bubble { background: var(--blue-dim); color: var(--on-accent); border-bottom-right-radius: 4px; }
.msgr-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.msgr-body a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.msgr-body a:hover { text-decoration-thickness: 2px; }
.msgr-time { margin-top: 3px; font-size: var(--fs-xs); opacity: 0.7; text-align: right; }

.msgr-msg.pending .msgr-bubble { opacity: 0.6; }
.msgr-msg.failed { cursor: pointer; }
.msgr-msg.failed .msgr-bubble {
  background: color-mix(in srgb, var(--red) 20%, transparent);
  color: var(--text);
  border: 1px solid var(--red);
}
.msgr-msg.failed .msgr-time { color: var(--red-text); opacity: 1; font-weight: 600; }

.msgr-composer {
  flex: none;
  display: flex;
  gap: 8px;
  align-items: flex-end;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border);
  background: var(--bg-elevated);
}
.msgr-composer textarea {
  flex: 1;
  min-width: 0;
  max-height: 140px;
  resize: none;
  line-height: 1.35;
}
.msgr-composer { flex-wrap: wrap; }
.msgr-chiprow { flex: 0 0 100%; display: flex; }
.msgr-chiprow[hidden] { display: none; }
.msgr-gif-chip { width: auto; min-height: var(--tap); padding: 0 14px; border-radius: 999px; font-size: 14px; }
.msgr-gif-chip[hidden] { display: none; }
.msgr-thread.dropping { outline: 2px dashed var(--blue); outline-offset: -4px; }
.msgr-previews { flex: 0 0 100%; display: flex; flex-wrap: wrap; gap: 8px; }
.msgr-previews[hidden] { display: none; }
.msgr-preview { position: relative; width: 64px; height: 64px; }
.msgr-preview img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); }
.msgr-preview button {
  position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; min-height: 0; padding: 0;
  border-radius: 50%; line-height: 1; font-size: 12px;
}
.msgr-attach {
  flex: none; display: inline-flex; align-items: center; justify-content: center; position: relative;
  min-width: 44px; min-height: 44px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg-elevated-2); cursor: pointer; font-size: 20px;
}
.msgr-attach:hover { border-color: var(--blue); }
.msgr-file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.msgr-notice { flex: 0 0 100%; margin: 0; color: var(--red-text); font-size: var(--fs-xs); }

.msgr-photos { display: grid; gap: 4px; margin-bottom: 4px; width: 240px; max-width: 100%; }
.msgr-photos.n1 { grid-template-columns: minmax(0, 1fr); }
.msgr-photos.n2, .msgr-photos.n3, .msgr-photos.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.msgr-photo {
  display: block; padding: 0; min-height: 0; overflow: hidden; border: none; border-radius: 10px;
  background: var(--bg-subtle); aspect-ratio: 1 / 1; cursor: zoom-in;
}
.msgr-photos.n1 .msgr-photo { aspect-ratio: 4 / 3; }
.msgr-photos.n1 .msgr-photo.msgr-gif { aspect-ratio: auto; max-height: 320px; background: none; }
.msgr-photos.n1 .msgr-gif img { width: 100%; height: auto; max-height: 320px; object-fit: contain; }
.msgr-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
a.msgr-photo-file {
  display: flex; align-items: center; justify-content: center; padding: 8px; text-align: center;
  font-size: var(--fs-xs); color: var(--text); text-decoration: none; cursor: pointer;
}
.msgr-readonly {
  flex: none;
  margin: 0;
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border);
  text-align: center;
}

.msgr-people { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.msgr-people form { margin: 0; }
.msgr-person {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: var(--bg-elevated-2);
  color: var(--text);
  border: 1px solid var(--border);
  font-weight: 400;
}
.msgr-person:hover { background: var(--bg-elevated-2); border-color: var(--blue-dim); }
.msgr-person-name { font-weight: 600; }


.msgr-delay { width: 7rem; max-width: 100%; }

/* Groups: forms, the member popover, Manage groups. */
.msgr-who { position: relative; margin-top: 2px; }
.msgr-who summary { cursor: pointer; color: var(--blue-text); font-size: 13px; list-style: none; }
.msgr-who summary::-webkit-details-marker { display: none; }
.msgr-who-list {
  position: absolute;
  z-index: 40;
  left: 0;
  top: calc(100% + 6px);
  width: min(300px, calc(100vw - 32px));
  max-height: 50vh;
  overflow-y: auto;
  margin: 0;
  padding: 8px 12px;
  list-style: none;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px var(--shadow);
}
.msgr-who-list li { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--border); }
.msgr-who-list li:last-child { border-bottom: none; }
.msgr-manage-link { align-self: flex-start; font-size: 13px; color: var(--blue-text); }

.msgr-form { display: flex; flex-direction: column; gap: 10px; }
.msgr-form h2 { margin: 0; }
.msgr-form-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.msgr-form input[type="text"] { width: 100%; }
.msgr-filter { width: 100%; }
.msgr-checks {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 340px;
  overflow-y: auto;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-elevated-2);
}
.msgr-check { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 6px 4px; }
.msgr-confirm { color: var(--red-text); }

.msgr-manage-row { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-start; justify-content: space-between; }
.msgr-manage-main { flex: 1 1 260px; min-width: 0; }
.msgr-manage-people { margin: 4px 0 0; overflow-wrap: anywhere; }
.msgr-manage-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.msgr-manage-actions form { margin: 0; }
.msgr-archived { margin-top: 16px; }
.msgr-archived summary { cursor: pointer; color: var(--text-muted); margin-bottom: 10px; }

/* Fill the screen: the page itself never scrolls on the thread view (or the desktop two-pane view).
   body gets the visible height (--vvh follows the on-screen keyboard on phones); top bar and storm
   banner keep their size, the container takes what is left, and only the message list scrolls. */
body.msgr-fill {
  height: 100vh;
  height: var(--vvh, 100dvh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
body.msgr-fill > * { flex: none; }
body.msgr-fill > .container {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding-top: 12px;
  padding-bottom: 0;
}
body.msgr-fill .container > * { flex: none; }
body.msgr-fill .container > .msgr-layout {
  flex: 1 1 auto;
  min-height: 0;
  align-items: stretch;
  grid-template-rows: minmax(0, 1fr);
}
body.msgr-fill .msgr-sidebar { min-height: 0; }
body.msgr-fill .msgr-list { flex: 1 1 auto; min-height: 0; }
body.msgr-fill .msgr-thread { height: auto; }
@media (min-width: 801px) and (min-height: 501px), (min-width: 801px) and (hover: hover), (min-width: 801px) and (pointer: fine) {
  body.msgr-fill > .container { padding-bottom: 14px; }
  /* The two-pane page with no thread open fills the screen too. */
  body.msgr-page:not(.msgr-fill) {
    height: 100vh;
    height: var(--vvh, 100dvh);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  body.msgr-page:not(.msgr-fill) > * { flex: none; }
  body.msgr-page:not(.msgr-fill) > .container {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding-top: 12px;
    padding-bottom: 14px;
  }
  body.msgr-page:not(.msgr-fill) .container > * { flex: none; }
  body.msgr-page:not(.msgr-fill) .container > .msgr-layout {
    flex: 1 1 auto;
    min-height: 0;
    align-items: stretch;
    grid-template-rows: minmax(0, 1fr);
  }
  body.msgr-page:not(.msgr-fill) .msgr-sidebar { min-height: 0; }
  body.msgr-page:not(.msgr-fill) .msgr-list { flex: 1 1 auto; min-height: 0; }
}

@media (max-width: 800px), (hover: none) and (pointer: coarse) and (max-height: 500px) {
  /* One column: the list, or (with a thread open) the thread with a way back. */
  .msgr-layout { grid-template-columns: minmax(0, 1fr); }
  .msgr-layout:not(.has-thread) .msgr-thread { display: none; }
  .msgr-layout.has-thread .msgr-sidebar { display: none; }
  .msgr-back, .msgr-fs-back { display: inline-flex; }
  .msgr-list { overflow: visible; }
  body.msgr-fill .msgr-list { overflow-y: auto; }
  .msgr-msg { max-width: 88%; }

  /* The phone thread is a fixed app shell (messenger.js sizes it to the VISIBLE area and moves it down by
     visualViewport.offsetTop, so the on-screen keyboard and iOS's page panning can't carry the composer away).
     The document itself is locked: only .msgr-messages scrolls. Without JS the shell is simply 100dvh. */
  html.msgr-locked { overflow: hidden; overscroll-behavior: none; }
  body.msgr-fill {
    position: fixed;
    top: 0; left: 0; right: 0;
    width: 100%;
    height: 100%;
    display: block;
    overflow: hidden;
    overscroll-behavior: none;
    padding-left: 0;
    padding-right: 0;
  }
  /* The shell covers these anyway; hiding them means nothing peeks out when the shell is shifted. */
  body.msgr-fill > .topbar,
  body.msgr-fill > .storm-banner { display: none; }
  body.msgr-fill > .container {
    display: block;
    height: 0;
    padding: 0;
    overflow: visible;
  }
  body.msgr-fill .container > :not(.msgr-layout) { display: none; }
  body.msgr-fill .container > .msgr-layout { display: block; height: 0; }
  .msgr-layout.has-thread .msgr-thread {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 100vh;
    height: 100dvh;
    z-index: 90;               /* above the page, below the photo viewer (100) and the status-bar strip */
    box-sizing: border-box;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: var(--bg);
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    will-change: transform;
  }
  .msgr-layout.has-thread .msgr-head { padding-top: calc(10px + env(safe-area-inset-top, 0px)); }
  .msgr-layout.has-thread .msgr-messages { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .msgr-layout.has-thread .msgr-readonly { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  /* Keyboard open: the composer sits flush on it, so no home-bar padding (messenger.js sets .kb). */
  .msgr-layout.has-thread .msgr-thread.kb .msgr-composer,
  .msgr-layout.has-thread .msgr-thread.kb .msgr-readonly { padding-bottom: 10px; }
}

/* Reactions: chips under a bubble, the picker bar, the who-reacted note. Tokens only. */
.msgr-bubble-row { display: flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0; }
.msgr-bubble-row .msgr-bubble { min-width: 0; }
.msgr-react-btn {
  flex: none; min-height: 32px; min-width: 32px; padding: 0 8px; border-radius: 999px;
  background: var(--bg-elevated-2); border: 1px solid var(--border); color: var(--text-muted);
  font-size: 13px; line-height: 1; opacity: 0;
}
.msgr-msg:hover .msgr-react-btn, .msgr-react-btn:focus-visible { opacity: 1; }
.msgr-react-btn:hover { border-color: var(--blue); }
.msgr-reacts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.msgr-reacts[hidden] { display: none; }
.msgr-msg.mine .msgr-reacts { justify-content: flex-end; }
.msgr-chip {
  display: inline-flex; align-items: center; gap: 4px; min-height: 26px; padding: 0 8px; border-radius: 999px;
  background: var(--bg-elevated-2); border: 1px solid var(--border); color: var(--text); font-size: 13px; line-height: 1;
}
/* The global button:hover is solid blue, and on touch screens :hover sticks after a tap, so chips keep their own look. */
.msgr-chip:hover { background: var(--bg-elevated-2); color: var(--text); }
.msgr-chip.mine, .msgr-chip.mine:hover { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 18%, transparent); }
.msgr-chip, .msgr-bubble { -webkit-tap-highlight-color: transparent; }
.msgr-chip:focus { outline: none; }
.msgr-chip:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.msgr-chip:active { background: var(--bg-elevated-2); }
.msgr-chip.mine:active { background: color-mix(in srgb, var(--blue) 18%, transparent); }
.msgr-chip-n { font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.msgr-bar {
  position: absolute; z-index: 30; display: flex; align-items: center; gap: 2px; padding: 4px; max-width: calc(100% - 16px);
  border-radius: 999px; background: var(--bg-elevated-2); border: 1px solid var(--border); box-shadow: 0 2px 10px var(--shadow);
}
.msgr-bar button { min-width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 999px; background: none; color: var(--text); font-size: 22px; line-height: 1; }
.msgr-bar button:hover, .msgr-bar button:focus-visible { background: var(--bg-subtle); }
.msgr-bar button.on { background: color-mix(in srgb, var(--blue) 22%, transparent); }
.msgr-bar .msgr-bar-copy { font-size: 14px; padding: 0 12px; }
.msgr-whopop, .msgr-toast {
  position: absolute; z-index: 30; max-width: calc(100% - 16px); padding: 8px 12px; border-radius: 10px; font-size: 14px;
  background: var(--bg-elevated-2); border: 1px solid var(--border); color: var(--text); overflow-wrap: anywhere;
  box-shadow: 0 2px 10px var(--shadow);
}
.msgr-rx-editor { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.msgr-rx-editor li { display: flex; align-items: center; gap: 6px; }
.msgr-rx-editor .msgr-rx-emoji { font-size: 24px; min-width: 2.2em; }
.msgr-rx-add { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.msgr-rx-add input { width: 8rem; max-width: 100%; }
.msgr-toast { left: 50%; transform: translateX(-50%); bottom: 90px; }   /* messenger.js sets the real bottom, just above the composer */
@media (hover: none) {
  .msgr-react-btn { display: none; }            /* phones react with a long-press */
  .msgr-msg[data-mid] .msgr-bubble { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
}

/* ?vvdebug=1: a small readout of what the browser reports, for diagnosing keyboard behaviour on a real phone. */
.msgr-vvdebug {
  position: fixed;
  top: 90px; right: 4px;
  z-index: 1300;
  max-width: 96vw;
  margin: 0;
  padding: 4px 6px;
  border-radius: 6px;
  background: var(--bg-elevated-2);
  color: var(--text);
  border: 1px solid var(--border);
  font: 11px/1.3 ui-monospace, Menlo, monospace;
  white-space: pre;
  pointer-events: none;
}

/* --- Settings tab --- */

.section-heading {
  font-size: 13px;
  margin: 24px 0 4px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.section-heading:first-of-type {
  margin-top: 0;
}

code {
  background: var(--bg-elevated-2);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 12px;
}

/* Settings > Text Messages: plain grid (these tiles aren't draggable/resizable). */
.tile-grid.template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

.tile-grid.template-grid .tile {
  width: auto;
  resize: none;
}

.template-card:target {
  outline: 2px solid var(--blue);
}

.template-card textarea {
  width: 100%;
  resize: vertical;
  margin: 10px 0;
  font-size: 13px;
}

.template-actions {
  display: flex;
  gap: 8px;
}

/* --- Winter Ops dashboard extras --- */

.inline-form {
  display: inline;
  margin-left: 10px;
}

.link-button {
  background: none;
  border: none;
  padding: 0;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  text-decoration: underline;
  cursor: pointer;
}

.link-button:hover {
  color: var(--red);
}

.stacked-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stacked-form textarea {
  width: 100%;
  resize: vertical;
}

.roster-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.roster-count {
  font-size: 13px;
  font-weight: 600;
}

.roster-count.available { color: var(--green); }
.roster-count.unavailable { color: var(--red); }
.roster-count.unconfirmed { color: var(--text-muted); }
.roster-count.on-call { color: var(--yellow); }

/* ON CALL: under the active roster, above the people who declined. */
.roster-on-call {
  margin-top: 14px;
  width: 100%;
}

.roster-on-call th {
  color: var(--yellow);
}

.roster-on-call td.roster-activate {
  text-align: right;
  width: 1%;
}

.roster-on-call form,
.roster-table td.roster-save form {
  margin: 0;
}

.roster-table td.roster-save form + form {
  margin-top: 4px;
}

.delay-start {
  margin-top: 10px;
}

.roster-unavailable {
  margin-top: 14px;
  opacity: 0.7;
}

/* --- Equipment / Site-Route managed lists (Settings) --- */

input[type="color"] {
  padding: 2px;
  width: 40px;
  height: 36px;
  cursor: pointer;
  flex-shrink: 0;
}

.option-manager .inline {
  margin-bottom: 14px;
}

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

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

.option-row input[type="text"] {
  flex: 1;
  min-width: 120px;
}

/* Settings > Services: ↑ ↓ category order (DOM after Save so Enter saves; shown first). */
.option-row .cat-move {
  order: -1;
  display: inline-flex;
  gap: 4px;
}

.option-row .cat-move-btn {
  padding: 4px 9px;
  min-width: 34px;
}

.color-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid var(--dot-border);
}

/* --- Top bar: account menu (initials button, far right) --- */

.topbar nav {
  flex: 1;
  justify-content: flex-end;
  margin-right: 12px;
}

.user-menu {
  position: relative;
}

.user-menu summary {
  list-style: none;
}

.user-menu summary::-webkit-details-marker {
  display: none;
}

.user-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--blue-dim);
  color: var(--on-accent);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.03em;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  border: 2px solid transparent;
}

.user-avatar:hover, .user-menu[open] .user-avatar {
  border-color: var(--blue);
}

.user-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 220px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px var(--shadow);
  padding: 6px;
  z-index: 50;
}

.user-menu-who {
  padding: 8px 10px 10px;
  font-weight: 600;
  font-size: 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}

.user-menu-who span {
  display: block;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
}

.user-menu-panel a {
  display: block;
  padding: 9px 10px;
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
}

.user-menu-panel a:hover, .user-menu-panel a.active {
  background: var(--bg-elevated-2);
}

/* Sunlight mode switch (a POST form styled as a menu row with a toggle look). */
.user-menu-form {
  margin: 0;
}

.user-menu-panel button.user-menu-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 9px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-size: 14px;
  font-weight: 400;
  text-align: left;
}

.user-menu-panel button.user-menu-toggle:hover {
  background: var(--bg-elevated-2);
}

.user-menu-toggle small {
  display: block;
  color: var(--text-muted);
  font-size: var(--fs-xs);
}

.user-menu-toggle .switch-look {
  flex-shrink: 0;
  position: relative;
  width: 40px;
  height: 22px;
  border-radius: 999px;
  background: var(--bg-elevated-2);
  border: 1px solid var(--border);
}

.user-menu-toggle .switch-look::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--text-muted);
}

.user-menu-toggle[aria-checked="true"] .switch-look {
  background: var(--green);
  border-color: var(--green);
}

.user-menu-toggle[aria-checked="true"] .switch-look::after {
  left: 20px;
  background: var(--on-bright);
}

/* --- Top bar: phone page dropdown (hidden on computers, where the links show) --- */

.page-menu {
  display: none;
  position: relative;
  min-width: 0;
}

/* Field Service on phones: a Messenger shortcut between the page dropdown and the initials, the same rounded
   square as the back button. */
.topbar-msgr {
  display: none;
  position: relative;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--blue);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  color: var(--text);
  text-decoration: none;
}
.topbar-msgr:hover { text-decoration: none; background: var(--blue-dim); }
.topbar-msgr .nav-badge { position: absolute; top: -7px; right: -8px; margin: 0; }
/* "← FS": the back button with its two letters, 36px tall like the icon it replaces. */
.fs-back { gap: 3px; height: 36px; padding: 0 8px; font-weight: 700; }
.topbar-msgr.fs-back { width: auto; }

.page-menu summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  padding: 8px 8px;
  border: 1px solid var(--blue);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}

.page-menu summary::-webkit-details-marker {
  display: none;
}

.page-menu[open] summary {
  background: var(--blue-dim);
  color: var(--on-accent);
}

.page-menu-icon {
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1;
}

.page-menu[open] .page-menu-icon {
  color: var(--on-accent);
}

.page-menu-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-menu summary .nav-badge {
  margin-left: 0;
}

/* Chevron drawn with borders so it doesn't depend on a font glyph; flips when open. */
.page-menu-caret {
  flex: none;
  width: 7px;
  height: 7px;
  margin: -3px 2px 0 1px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

.page-menu[open] .page-menu-caret {
  margin-top: 3px;
  transform: rotate(-135deg);
}

.page-menu-panel {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(100% + 8px);
  width: min(260px, calc(100vw - 32px));
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px var(--shadow);
  padding: 6px;
  z-index: 50;
}

.page-menu-panel a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 12px;
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
  font-size: 16px;
}

.page-menu-panel a.active {
  background: var(--blue-dim);
  color: var(--on-accent);
}

.page-menu-check {
  font-weight: 700;
}

/* --- Winter Ops event actions --- */

/* Event name, then Start/End + Cancel right beside it, Reset tile layout at the far right. */
.event-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.event-bar-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.event-bar #reset-tile-layout {
  margin-left: auto;
}

.event-actions {
  display: inline-flex;
  gap: 8px;
}

.event-actions .inline-form {
  margin-left: 0;
}

button.start-button {
  background: var(--green);
  color: var(--on-bright);
}

button.start-button:hover {
  background: var(--green-hover);
}

button.end-button {
  background: var(--yellow);
  color: var(--on-bright);
}

button.end-button:hover {
  background: var(--yellow-hover);
}

button.danger-button {
  background: transparent;
  color: var(--red);
  border: 1px solid var(--red);
}

button.danger-button:hover {
  background: color-mix(in srgb, var(--red) 13%, transparent);
}

/* --- Comms broadcast --- */

.broadcast-panel summary {
  color: var(--blue);
}

.broadcast-history-head {
  margin: 18px 0 6px;
}

.broadcast-entry {
  border-top: 1px solid var(--border);
  padding: 10px 0;
}

.broadcast-entry:first-of-type {
  border-top: none;
}

.broadcast-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.broadcast-body {
  margin: 6px 0;
}

.broadcast-recipients summary {
  cursor: pointer;
  color: var(--text-muted);
  font-size: 13px;
}

.broadcast-recipients ul {
  margin: 6px 0 0;
  padding-left: 18px;
  font-size: 13px;
  columns: 2 220px;
}

.pager {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 10px 0;
}

.role-picks {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 0 0 22px;
}

/* --- Add someone to this event --- */

details.add-person {
  border-top: 1px solid var(--border);
  padding: 10px 0 4px;
}

details.add-person summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 8px;
}

/* --- Send Weather Update --- */

.weather-form textarea {
  font-size: 15px;
}

.weather-preview .comms-bubble {
  max-width: 100%;
  margin: 6px 0;
}

fieldset.service-types,
fieldset.audience {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

fieldset.service-types legend,
fieldset.audience legend {
  color: var(--text-muted);
  font-size: 12px;
  padding: 0 4px;
}

fieldset.service-types { flex-direction: row; flex-wrap: wrap; gap: 4px 16px; min-width: 0; margin: 0; }

.picker-tools {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.picker-tools input[type="search"] {
  flex: 1;
  min-width: 160px;
}

.customer-list {
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
}

.customer-list.tall {
  max-height: 420px;
}

.customer-row {
  padding: 5px 0;
  color: var(--text);
}

.customer-row[hidden] {
  display: none;
}

.customer-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}

.customer-line:last-child {
  border-bottom: none;
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* --- Sites & service maps --- */

.req {
  color: var(--red);
}

fieldset.contacts {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

fieldset.contacts legend {
  color: var(--text-muted);
  font-size: 12px;
  padding: 0 4px;
}

.contact-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.contact-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 8px;
  align-items: center;
}

.site-info, .site-card-body {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  font-size: 14px;
}

.site-info {
  background: var(--bg-elevated-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
}

button.map-thumb {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 6px;
  background: var(--bg-elevated-2);
  border: 1px solid var(--border);
  color: var(--text);
  font-weight: 600;
  font-size: 12px;
}

button.map-thumb:hover {
  border-color: var(--blue);
  background: var(--bg-elevated-2);
}

button.map-thumb img {
  width: 140px;
  height: 100px;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}

.map-pdf {
  width: 140px;
  height: 100px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--red) 13%, transparent);
  color: var(--red);
  font-size: 22px;
  font-weight: 800;
}

.map-viewer {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--viewer-bg);
  color: var(--text);
  display: flex;
  flex-direction: column;
}

.map-viewer-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 16px;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
}

.map-viewer-tools {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

.map-viewer-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  padding: 12px;
}

/* margin:auto (not justify/align center) so a zoomed image scrolls fully
   instead of losing its left/top edge off-screen. */
.map-viewer-body img {
  margin: auto;
  max-width: 100%;
  max-height: 100%;
  cursor: zoom-in;
  background: var(--paper);
}

.map-viewer-body img.zoomed {
  cursor: zoom-out;
}

.map-viewer-body iframe {
  width: 100%;
  height: 100%;
  border: none;
  background: var(--paper);
  border-radius: 6px;
}

/* Zones & Routes */
.view-switch {
  margin-bottom: 12px;
}

.badge.zr-badge.zr-zone { background: color-mix(in srgb, var(--green) 19%, transparent); color: var(--green); }
.badge.zr-badge.zr-route { background: color-mix(in srgb, var(--blue) 19%, transparent); color: var(--blue); }

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

.zr-grid .card {
  margin-bottom: 0;
}

.zr-card h2 {
  display: flex;
  align-items: center;
  gap: 6px;
}

ol.route-stops, ul.route-stops, ul.zone-sites {
  list-style: none;
  margin: 0;
  padding: 0;
}

ol.route-stops li, ul.route-stops li, ul.zone-sites li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}

ol.route-stops li:last-child, ul.route-stops li:last-child, ul.zone-sites li:last-child {
  border-bottom: none;
}

ul.zone-sites li {
  flex-wrap: wrap;
  gap: 6px;
}

.stop-num {
  flex: 0 0 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--blue-dim);
  color: var(--on-accent);
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stop-name {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.stop-move {
  display: flex;
  gap: 4px;
}

.stop-move button {
  padding: 4px 9px;
}

.badge.ticket-maintenance { background: color-mix(in srgb, var(--orange) 19%, transparent); color: var(--orange); }

/* --- On/off switches (Settings > Winter Ops ticker) --- */

input[type="checkbox"].toggle {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 44px;
  height: 26px;
  margin: 0;
  padding: 0;
  border-radius: 13px;
  border: 1px solid var(--border);
  background: var(--bg-elevated-2);
  position: relative;
  cursor: pointer;
  transition: background 0.15s;
}

input[type="checkbox"].toggle::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--text-muted);
  transition: transform 0.15s, background 0.15s;
}

input[type="checkbox"].toggle:checked {
  background: var(--green);
  border-color: var(--green);
}

input[type="checkbox"].toggle:checked::after {
  transform: translateX(18px);
  background: var(--on-accent);
}

.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}

.toggle-row > span {
  min-width: 0;
}

.toggle-row .text-note {
  display: block;
  margin-top: 2px;
}

.ticker-switch-head {
  margin: 16px 0 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ticker-switch-body.is-off {
  opacity: 0.45;
}

.ticker-switch-save {
  margin-top: 14px;
}

/* --- Settings > Roles & Permissions: role list + detail panel (dropdown on phones) --- */

.roles-intro {
  margin: 0 0 14px;
}

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

.roles-layout > * {
  min-width: 0;
}

.roles-picker {
  display: none;
}

.roles-pills {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.roles-pills a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--radius);
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
}

.roles-pills a:hover {
  background: var(--bg-elevated-2);
}

.roles-pills a.active {
  background: var(--blue-dim);
  color: var(--on-accent);
}

.role-kind {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-muted);
  margin-left: 4px;
}

.roles-pills a.active .role-kind,
.roles-pills a.active .role-count {
  color: var(--on-accent-muted);
}

.role-row {
  display: flex;
  align-items: center;
  gap: 2px;
  border-radius: var(--radius);
}

.role-row > a {
  flex: 1 1 auto;
  min-width: 0;
}

.role-drag {
  padding: 4px 2px 4px 6px;
  font-size: 15px;
}

.role-row.dragging {
  outline: 1px dashed var(--blue);
  opacity: 0.85;
}

.roles-pills.reorder-failed::after {
  content: "Couldn't save the order -- refresh and try again.";
  color: var(--red);
  font-size: 12px;
  padding: 4px 12px;
}

.role-move {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 4px 0 8px;
}

.role-move button[disabled] {
  opacity: 0.4;
  cursor: default;
}

.role-count {
  color: var(--text-muted);
  font-size: 13px;
}

.role-add {
  margin-top: 12px;
}

.role-add summary {
  list-style: none;
  cursor: pointer;
  display: inline-block;
}

.role-add summary::-webkit-details-marker {
  display: none;
}

.role-add form {
  margin-top: 10px;
}

.role-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 8px;
}

.role-title {
  margin: 0;
  font-size: 18px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text);
}

.role-name,
.role-home {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--text-muted);
}

.role-name input {
  font-size: 16px;
  font-weight: 600;
}

.role-home {
  margin-top: 6px;
  max-width: 260px;
}

.role-detail input[type="checkbox"].toggle:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.role-delete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.role-delete button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (max-width: 700px) {
  .roles-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .roles-picker {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    color: var(--text-muted);
  }

  .roles-pills {
    display: none;
  }
}

.badge.vehicle-badge {
  background: color-mix(in srgb, var(--blue) 12%, transparent);
  color: var(--blue-text);
  border: 1px solid color-mix(in srgb, var(--blue) 33%, transparent);
  text-decoration: none;
  white-space: nowrap;
}

/* --- Settings > Equipment Configurations --- */

.cfg-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}

.cfg-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex: 1 1 260px;
  min-width: 0;
}

.cfg-chip {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px;
}

.cfg-edit {
  margin-top: 8px;
}

.cfg-edit > summary {
  list-style: none;
  cursor: pointer;
  display: inline-block;
}

.cfg-edit > summary::-webkit-details-marker {
  display: none;
}

.cfg-form {
  margin-top: 10px;
}

.cfg-top {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: flex-end;
}

.cfg-top label:first-child {
  flex: 1 1 220px;
}

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

.cfg-items-label {
  font-size: 13px;
  color: var(--text-muted);
}

.cfg-item-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.cfg-item-row select {
  flex: 1 1 auto;
  min-width: 0;
}

.cfg-add {
  align-self: flex-start;
}

.cfg-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

.photo-optional {
  color: var(--text-muted);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

.pay-fields-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 16px;
}

.pay-fields-row input[type="text"] {
  max-width: 140px;
}

/* --- Field Service time clock --- */

.clock-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  margin-bottom: 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-left: 4px solid var(--text-muted);
  border-radius: var(--radius);
}

.clock-card.clock-on { border-left-color: var(--green); }
.clock-card.clock-snow { border-left-color: var(--blue); }
.clock-card.clock-break { border-left-color: var(--yellow); }

.clock-status {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.clock-status strong {
  font-size: 16px;
}

.clock-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.clock-actions form {
  margin: 0;
}

button.clock-in-btn,
button.clock-resume-btn {
  background: var(--green);
  color: var(--on-bright);
  font-weight: 700;
}

button.clock-out-btn {
  background: var(--red);
  color: var(--on-accent);
  font-weight: 700;
}

@media (max-width: 700px) {
  .clock-actions,
  .clock-actions form {
    flex: 1 1 100%;
  }

  .clock-actions {
    flex-wrap: nowrap;
  }

  .clock-actions form {
    flex: 1 1 0;
  }

  .clock-actions button {
    width: 100%;
    min-height: 48px;
  }
}

/* --- Operations > Timesheets --- */

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

.ts-period {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.ts-period strong {
  font-size: 17px;
}

.seg-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.seg-toggle a {
  padding: 8px 14px;
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
}

.seg-toggle a.active {
  background: var(--blue-dim);
  color: var(--on-accent);
}

.ts-weeks {
  margin-bottom: 12px;
}

table.ts-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.ts-table th,
.ts-table td {
  padding: 6px 8px;
  text-align: right;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
}

.ts-table th:first-child,
.ts-table td:first-child {
  text-align: left;
}

.ts-day span {
  display: block;
  font-weight: 400;
  color: var(--text-muted);
}

.ts-today {
  background: color-mix(in srgb, var(--blue) 8%, transparent);
}

.ts-cell a {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  color: var(--text);
  text-decoration: none;
  padding: 2px 0;
}

.ts-cell a:hover .ts-reg,
.ts-cell a:hover .ts-empty {
  text-decoration: underline;
}

.ts-snow {
  color: var(--blue-text);
  font-weight: 600;
}

.ts-cell .ts-snow {
  background: color-mix(in srgb, var(--blue) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--blue) 33%, transparent);
  border-radius: 6px;
  padding: 0 5px;
  font-size: 12px;
}

.ts-empty {
  color: var(--text-muted);
}

.ts-total {
  border-left: 1px solid var(--border);
}

.ts-snow-head,
.ts-snow-total {
  color: var(--blue-text);
}

.ts-ot {
  color: var(--yellow);
  font-weight: 600;
}

.badge.salary-badge {
  background: var(--bg-elevated-2);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

.ts-legend {
  margin: 4px 0 16px;
}

.pay-period summary {
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
}

.pay-period-form {
  margin-top: 12px;
}

.seg-radio {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border: none;
  padding: 0;
  margin: 0;
}

.seg-radio legend {
  width: 100%;
  margin-bottom: 6px;
  color: var(--text-muted);
  font-size: 13px;
}

.stacked-form .seg-radio label {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
}

.period-chip {
  display: inline-block;
  margin: 4px 6px 0 0;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
}

.ts-entry-snow {
  border-left: 3px solid var(--blue);
}

.ts-entry-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  margin: 10px 0 4px;
}

.ts-entry-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--text-muted);
}

.ts-entry-form .ts-notes {
  flex: 1 1 200px;
}

.ts-breaks {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.ts-add-break summary {
  list-style: none;
  cursor: pointer;
  display: inline-block;
  margin-top: 6px;
}

.ts-add-break summary::-webkit-details-marker {
  display: none;
}

.ts-delete {
  margin-top: 12px;
  text-align: right;
}

.field-ticker {
  margin-bottom: 16px;
}

/* --- Storm roster: Zone / Route and Equipment pickers side by side, Save at the far right --- */

.roster-pick {
  display: flex;
  align-items: center;
  gap: 6px;
}

.roster-pick select {
  width: 100%;
  min-width: 0;
}

.roster-role {
  display: block;
}

.roster-table td.roster-save {
  text-align: right;
  width: 1%;
  white-space: nowrap;
}

/* --- Winter Ops sub-pages --- */

.history-layout {
  display: grid;
  grid-template-columns: minmax(220px, 280px) 1fr;
  gap: 14px;
  align-items: start;
}

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

.history-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.history-list a {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
}

.history-list a:hover {
  background: var(--bg-elevated-2);
}

.history-list a.active {
  background: var(--blue-dim);
}

button:not(.secondary) .text-note,
.history-list a.active .text-note {
  color: var(--on-accent-muted);
}

.history-name {
  font-weight: 600;
  font-size: 14px;
}

/* --- Equipment Log --- */

.eq-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  margin: 4px 0 16px;
  padding-bottom: 8px;
}

.eq-tabs a {
  color: var(--text-muted);
  text-decoration: none;
  padding: 7px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.eq-tabs a:hover {
  background: var(--bg-elevated-2);
  color: var(--text);
}

.eq-tabs a.active {
  background: var(--blue-dim);
  color: var(--on-accent);
}

.eq-tabs .count {
  font-size: var(--fs-xs);
  opacity: 0.7;
}

/* Each maintenance item type has its own color (--item-color, from
   app/equipment_log/catalog.py::ITEM_TYPES). Due items get a solid fill,
   upcoming a thicker outline. */
.item-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  margin: 1px 3px 1px 0;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--item-color);
  background: color-mix(in srgb, var(--item-color) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--item-color) 45%, transparent);
  white-space: nowrap;
}

.item-pill::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--item-color);
}

.item-pill.state-due {
  background: var(--item-color);
  color: var(--on-bright);
  border-color: var(--item-color);
}

.item-pill.state-due::before {
  background: var(--bg);
}

/* Sunlight mode: item colors are data (Settings > Maintenance), so darken them for text. */
:root[data-theme="light"] .item-pill { color: color-mix(in srgb, var(--item-color) 45%, var(--text-strong)); }
:root[data-theme="light"] .item-pill.state-due {
  background: color-mix(in srgb, var(--item-color) 55%, var(--text-strong));
  border-color: transparent;
  color: var(--on-accent);
}

.item-pill.state-upcoming {
  border-width: 2px;
  border-style: dashed;
}

.item-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.badge.state-due-badge { background: color-mix(in srgb, var(--red) 19%, transparent); color: var(--red); }

tr.row-due td {
  background: color-mix(in srgb, var(--red) 8%, transparent);
}

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

.item-row {
  border: 1px solid var(--border);
  border-left: 4px solid var(--item-color);
  border-radius: 8px;
  padding: 8px 10px;
}

.item-row.on {
  background: color-mix(in srgb, var(--item-color) 6%, transparent);
}

.ticket-form label.item-row-head {
  flex-direction: row;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.item-row-head input.custom-name {
  flex: 1;
  min-width: 0;
  font-weight: 600;
}

.time-suggestions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  align-items: baseline;
  font-size: 13px;
}

.time-suggestions .suggestion {
  color: var(--text);
}

.link-button.use-suggestion {
  color: var(--blue);
  font-weight: 600;
}

.category-hint {
  margin: -6px 0 12px;
}

details.optional-maintenance summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  color: var(--text-muted);
  margin: 6px 0;
}

.add-item-row {
  margin-top: 8px;
}

.add-item-row select {
  width: auto;
}

.item-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--item-color);
}

.item-row-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.interval-inputs {
  display: flex;
  gap: 6px;
  align-items: center;
}

.interval-inputs input {
  min-width: 0;
}

/* Equipment photos, registration, documents */
.unit-thumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-elevated-2);
  color: var(--text-muted);
  font-weight: 700;
  flex-shrink: 0;
}

button.unit-thumb:hover {
  border-color: var(--blue);
  background: var(--bg-elevated-2);
}

.unit-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.unit-thumb-sm { width: 44px; height: 44px; font-size: 16px; }
.unit-thumb-lg { width: 120px; height: 120px; font-size: 36px; }
/* No photo: a category icon on a tinted tile (--cat = the category's color). */
.unit-thumb-empty {
  --cat: var(--cat-default);
  background: color-mix(in srgb, var(--cat) 14%, transparent);
  border-color: color-mix(in srgb, var(--cat) 42%, transparent);
  color: color-mix(in srgb, var(--cat) 65%, var(--on-accent));
}
.unit-thumb-empty .cat-icon { width: 62%; height: 62%; }
.cat-vehicles { --cat: var(--blue); }
.cat-sidewalk_machines { --cat: var(--orange); }
.cat-mowers { --cat: var(--green); }
.cat-snow_plows_pushers { --cat: var(--cat-teal); }
.cat-snow_blowers { --cat: var(--cat-violet); }
.cat-ventrac_attachments { --cat: var(--yellow); }
.cat-small_engine_tools { --cat: var(--cat-pink); }
.cat-shop_tools { --cat: var(--cat-default); }

td.thumb-cell {
  width: 52px;
}

.unit-header {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 12px;
}

.unit-header .subtitle {
  margin-bottom: 0;
}

.badge.reg-current { background: color-mix(in srgb, var(--green) 19%, transparent); color: var(--green); }
.badge.reg-soon { background: color-mix(in srgb, var(--yellow) 19%, transparent); color: var(--yellow); }
.badge.reg-expired { background: color-mix(in srgb, var(--red) 19%, transparent); color: var(--red); }

.inline-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-muted);
}

.doc-slots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 10px;
}

.doc-slot {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
}

.doc-slot input[type="file"] {
  width: 100%;
}

.link-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.link-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.link-chip form {
  display: inline;
}

/* Blue outline so the Links / Documents buttons stand out from the gray cards. */
.link-chip a.button-link {
  border: 1.5px solid var(--blue);
  color: var(--blue-text);
  background: color-mix(in srgb, var(--blue) 8%, transparent);
}

.link-chip a.button-link:hover {
  background: color-mix(in srgb, var(--blue) 20%, transparent);
  color: var(--text);
}

button.link-remove {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 16px;
  padding: 2px 6px;
  line-height: 1;
}

button.link-remove:hover {
  color: var(--red);
  background: none;
}

.link-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) auto;
  gap: 8px;
}

/* File inputs have a wide intrinsic size; let them shrink to their column. */
.link-form input {
  min-width: 0;
  width: 100%;
}

@media (max-width: 600px) {
  .link-form { grid-template-columns: 1fr; }
}

ul.maint-log {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.maint-log li {
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 14px;
}

ul.maint-log li:last-child {
  border-bottom: none;
}

/* --- Employees --- */

/* Full-Time Staff: light blue tint + accent edge, listed first. */
tr.row-full-time td {
  background: color-mix(in srgb, var(--blue) 8%, transparent);
}

tr.row-full-time td:first-child {
  box-shadow: inset 3px 0 0 var(--blue);
}

.badge.full-time-badge {
  background: color-mix(in srgb, var(--blue) 19%, transparent);
  color: var(--blue);
  font-size: var(--fs-xs);
  padding: 1px 7px;
}

/* "Full-time" on a computer, "FT" on a phone (UX spec B2); title says Full-Time Staff. */
.full-time-badge .ft-short { display: none; }
@media (max-width: 700px) {
  .full-time-badge .ft-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .full-time-badge .ft-short { display: inline; }
}

.nowrap {
  white-space: nowrap;
}

a.button-link {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-elevated-2);
  color: var(--text);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
}

a.button-link:hover {
  border-color: var(--blue);
}

/* --- Login / SMS code --- */

.field-label {
  display: block;
  text-align: left;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.login-lede {
  font-size: 14px;
  margin: 0 0 14px;
}

.login-lede strong {
  white-space: nowrap;
}

.dev-note {
  background: color-mix(in srgb, var(--yellow) 12%, transparent);
  border: 1px dashed var(--yellow);
  color: var(--yellow);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  margin-bottom: 12px;
}

.login-card input.code-input {
  font-size: 26px;
  letter-spacing: 0.35em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.resend-form {
  margin-top: 12px;
}

.link-button:disabled {
  cursor: default;
  text-decoration: none;
  opacity: 0.7;
}

.link-button:disabled:hover {
  color: var(--text-muted);
}

/* --- Tickets --- */

.badge.ticket-open { background: color-mix(in srgb, var(--blue) 19%, transparent); color: var(--blue); }
.badge.ticket-unassigned { background: color-mix(in srgb, var(--yellow) 19%, transparent); color: var(--yellow); }
.badge.ticket-completed { background: color-mix(in srgb, var(--green) 19%, transparent); color: var(--green); }
.badge.ticket-cancelled { background: color-mix(in srgb, var(--text-muted) 19%, transparent); color: var(--text-muted); }

.ticket-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--text-muted);
}

.ticket-form label.checkbox-label {
  flex-direction: row;
}

.ticket-form input, .ticket-form select, .ticket-form textarea {
  width: 100%;
}

.ticket-form input[type="checkbox"] {
  width: auto;
}

.ticket-form .form-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.compose-panel .ticket-form {
  margin-top: 12px;
}

.form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.card-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
}

.filter-bar {
  justify-content: space-between;
  margin-bottom: 10px;
}

.segmented {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.segmented a {
  color: var(--text-muted);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 13px;
  border: 1px solid var(--border);
}

.segmented a.active {
  background: var(--blue-dim);
  border-color: var(--blue-dim);
  color: var(--on-accent);
}

.segmented .count {
  opacity: 0.75;
  font-size: 12px;
}

/* Ticket open-time clock: green < 1 hr, orange < 1.5 hr, red after
   (thresholds: TICKET_CLOCK_*_MINUTES in models.py). */
.ticket-clock {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ticket-clock.clock-green { background: color-mix(in srgb, var(--green) 19%, transparent); color: var(--green); }
.ticket-clock.clock-orange { background: color-mix(in srgb, var(--orange) 20%, transparent); color: var(--orange); }
.ticket-clock.clock-red { background: color-mix(in srgb, var(--red) 20%, transparent); color: var(--red); }
.ticket-clock.clock-stopped { opacity: 0.75; font-weight: 600; }

/* A wrapped title + badge makes the row taller; keep the pill its own height. */
.ticket-card-top .ticket-clock { align-self: flex-start; }

.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.photo-grid img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border);
  display: block;
}

.prewrap {
  white-space: pre-wrap;
  margin: 8px 0 0;
  font-size: 14px;
}

/* --- Field (mobile) --- */

.field-page {
  max-width: 640px;
  margin: 0 auto;
}

.field-page h1 {
  font-size: 22px;
}

.clock-status {
  color: var(--text-muted);
  font-size: 14px;
  margin: 4px 0 16px;
}

/* The one-line status under a field page title (My Tickets, Log Service). Plain text, not the
   clock card's flex column, so the inline link and timer stay on the line. */
p.clock-status {
  display: block;
}

.clock-status.on {
  color: var(--green);
  font-weight: 600;
}

.ticket-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}

.ticket-card {
  display: block;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-left: 4px solid var(--blue);
  border-radius: var(--radius);
  padding: 14px 16px;
  color: var(--text);
  text-decoration: none;
}

.ticket-card:active, .ticket-card:hover {
  background: var(--bg-elevated-2);
}

.ticket-card.done {
  border-left-color: var(--green);
  opacity: 0.8;
}

.ticket-card-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.ticket-card-title {
  font-weight: 600;
  font-size: 16px;
}

.ticket-card-id, .ticket-card-meta {
  color: var(--text-muted);
  font-size: 13px;
}

.ticket-card-meta {
  margin-top: 4px;
}

.ticket-facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 14px;
  margin: 0;
  font-size: 14px;
}

.ticket-facts dt {
  color: var(--text-muted);
}

.ticket-facts dd {
  margin: 0;
}

.photo-form, .field-page .stacked-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.field-page label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--text-muted);
}

.field-page input[type="file"] {
  width: 100%;
}

button.big-button {
  padding: 14px;
  font-size: 16px;
  background: var(--green);
  color: var(--on-bright);
}

button.big-button:hover {
  background: var(--green-hover);
}

/* --- Phone widths --- */

@media (max-width: 700px) {
  .topbar {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 16px;
  }

  .topbar nav {
    flex-wrap: wrap;
    width: 100%;
  }

  .topbar nav a {
    padding: 8px 10px;
  }

  .topbar-field nav {
    width: auto;
  }

  /* Logo and initials stay on the first row; the tabs wrap below. */
  .user-menu {
    order: 2;
    margin-left: auto;
  }

  .topbar nav {
    order: 3;
    /* flex-basis, not width: the desktop rule's `flex: 1` would otherwise
       win over width:100% and keep the tabs on the logo's row. */
    flex: 1 0 100%;
    justify-content: flex-start;
    margin-right: 0;
  }

  .event-actions button {
    padding: 6px 12px;
    font-size: 14px;
  }

  .topbar-field .nav-user {
    display: none;
  }

  /* One row: logo, page dropdown, initials. The link row is replaced by the dropdown. */
  .topbar {
    flex-wrap: nowrap;
  }

  .topbar nav.nav-links {
    display: none;
  }

  .page-menu {
    display: block;
    flex: 0 1 auto;
    margin: 0 auto;
  }

  .topbar-msgr { display: inline-flex; order: 2; margin-left: auto; }
  .topbar-msgr:not([hidden]) + .user-menu { margin-left: 0; }
  /* Room for the page name: the caret already says it's a menu. */
  .topbar:has(.topbar-msgr) .page-menu-icon { display: none; }
  .topbar:has(.topbar-msgr) { gap: 4px; }
  .topbar:has(.topbar-msgr) .page-menu summary { gap: 3px; padding: 8px 6px; }

  .topbar {
    gap: 6px;
  }

  .topbar img.logo {
    height: 28px;
  }

  .container {
    padding: 14px 16px 40px;
  }

  .login-wrap {
    min-height: calc(100vh - 40px);
  }

  .login-card, .login-card.signup-card {
    width: 100%;
    max-width: 380px;
    padding: 28px 20px;
  }

  /* 16px+ stops iOS Safari zooming the page when a field gets focus. */
  input, select, textarea {
    font-size: 16px;
  }

  .field-page button {
    min-height: 44px;
  }
}

/* --- Site services & Log Service --- */

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

a.button-link.log-service-btn {
  border: 1.5px solid var(--green);
  color: var(--green);
  background: color-mix(in srgb, var(--green) 8%, transparent);
  white-space: nowrap;
}

a.button-link.log-service-btn:hover {
  background: color-mix(in srgb, var(--green) 20%, transparent);
  color: var(--text);
}

a.button-link.log-service-btn {
  flex: none;
}

a.button-link.log-service-btn.small {
  padding: 3px 10px;
  font-size: 12px;
}

/* Sites list: Log Service gets its own tight column right after the name, so
   the buttons line up in a straight column on desktop. */
td.log-cell {
  width: 1%;
  white-space: nowrap;
}

.service-season + .service-season {
  border-top: 1px solid var(--border);
  margin-top: 14px;
  padding-top: 14px;
}

/* Site page: seasons as tabs, one shown at a time, so no divider between them. */
.service-season-tabs ~ .service-season {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}

.service-season h3 {
  font-size: 15px;
  margin: 0 0 10px;
}

.billing-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px 14px;
}

.billing-form label:not(.checkbox-label) {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--text-muted);
}

.service-group {
  margin: 10px 0;
}

.service-cat-head {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.service-picker {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
}

.service-picker-head {
  font-weight: 600;
  margin-bottom: 6px;
}

.qty-toggle {
  font-size: 13px;
  white-space: nowrap;
}

.ticket-notes .note {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.note-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: baseline;
}

.note-body {
  margin: 4px 0 0;
}

.note-edit summary {
  list-style: none;
  cursor: pointer;
  display: inline-block;
  margin-top: 4px;
}

.note-edit summary::-webkit-details-marker {
  display: none;
}

.note-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

.note-add {
  margin-top: 12px;
}

.ticket-complete-form {
  margin-bottom: 12px;
}

.drag-handle {
  flex: none;
  padding: 4px 6px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 18px;
  line-height: 1;
  cursor: grab;
  touch-action: none;  /* let a finger drag instead of scrolling the page */
}

.service-row.dragging {
  opacity: 0.85;
  outline: 1px dashed var(--blue);
  border-radius: var(--radius);
  background: var(--bg-elevated-2);
}

.service-row.dragging .drag-handle { cursor: grabbing; }

.service-group.reorder-saved .service-cat-head::after {
  content: " · order saved";
  color: var(--green);
  font-weight: 400;
  text-transform: none;
}

.service-group.reorder-failed .service-cat-head::after {
  content: " · couldn't save the order, refresh and try again";
  color: var(--red);
  font-weight: 400;
  text-transform: none;
}

.service-row {
  margin-bottom: 6px;
}

/* Three classes so it beats the phone rule that makes .option-row text
   inputs full width -- the price shares a line with Save / Remove. */
.option-row.service-row input.price-input {
  flex: 0 0 110px;
  width: 110px;
}

/* Site page Services card: the Invoice box shows Pricing + price only while it is ticked. */
.option-row.service-row { flex-wrap: wrap; }
.invoice-toggle { font-size: 13px; white-space: nowrap; }
.invoice-fields { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.option-row.service-row select.pricing-select { width: auto; flex: 0 0 auto; }
.billing-unset { color: var(--warn); font-weight: 600; }

.service-add-form {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.5fr) minmax(0, 0.8fr) auto;
  gap: 8px;
  margin-top: 10px;
}

.service-add-form > * {
  min-width: 0;
}

.defaults-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

ul.service-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}

ul.service-list li {
  display: flex;
  align-items: center;
  gap: 4px 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}

ul.service-list li:last-child {
  border-bottom: none;
}

ul.service-list li form {
  margin-left: auto;
}

ul.service-list li { flex-wrap: wrap; }
.service-edit > summary { list-style: none; cursor: pointer; }
.service-edit > summary::-webkit-details-marker { display: none; }
.service-edit[open] { flex-basis: 100%; order: 10; padding: 4px 0 6px; }
ul.service-list li .service-edit-form {
  margin: 6px 0 4px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
.service-edit-form input[type="text"] { flex: 1 1 160px; min-width: 0; }

.service-cat {
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  background: var(--bg-elevated-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 8px;
}

.service-name {
  flex: 1 1 auto;
  min-width: 0;
}

.service-price {
  color: var(--green);
  font-weight: 600;
  white-space: nowrap;
}

.service-cat {
  flex: none;
}

.service-switches .checkbox-label {
  font-size: 14px;
}

.service-picker summary {
  font-size: 15px;
  color: var(--text);
  font-weight: 600;
  padding: 4px 0;
}

.service-picker .employee-picker-list {
  max-height: 340px;
}

.stacked-form .service-picker label.checkbox-label {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  text-align: left;
  font-size: 15px;
  color: var(--text);
  padding: 6px 0;
}

.service-picker input[type="checkbox"] {
  width: 20px;
  height: 20px;
  flex: none;
  margin: 0;
}

.picker-group {
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  margin-top: 6px;
}

/* Log Service: the Hourly group starts collapsed (it can hold a lot of services). */
.picker-collapse > summary.picker-group {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: var(--tap, 44px);
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-subtle);
  cursor: pointer;
  list-style: none;
}

.picker-collapse > summary::-webkit-details-marker { display: none; }

.picker-collapse > summary::before {
  content: "▸";
  font-size: 12px;
  transition: transform 0.15s;
}

.picker-collapse[open] > summary::before { transform: rotate(90deg); }

.picker-collapse > summary .text-note {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}

.picker-collapse-count {
  margin-left: auto;
  color: var(--blue-text);
  text-transform: none;
  letter-spacing: 0;
}

.picker-collapse[open] {
  gap: 6px;
  display: flex;
  flex-direction: column;
}

.picker-collapse[open] > summary { margin-bottom: 4px; }

.crew-map {
  margin: 10px 0 4px;
}

.cancel-visit {
  margin-top: 12px;
}

/* Clock In / Finish: full width so they're easy to hit with a thumb. */
.field-page button.big-button {
  width: 100%;
}

.ticket-card.open-visit-card {
  border-left-color: var(--green);
  margin-bottom: 14px;
}

.site-card-row .ticket-card-top {
  align-items: flex-start;
}

.site-card-info {
  flex: 1 1 auto;
  min-width: 0;
}

/* Log Service with Service Map stacked under it, same width. */
.site-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: none;
  min-width: 118px;
}

.site-actions a.button-link.log-service-btn {
  justify-content: center;
  text-align: center;
}

button.map-btn {
  border: 1.5px solid var(--blue);
  color: var(--blue-text);
  background: color-mix(in srgb, var(--blue) 8%, transparent);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 12px;
  white-space: nowrap;
}

button.map-btn:hover {
  background: color-mix(in srgb, var(--blue) 20%, transparent);
  color: var(--text);
}

@media (max-width: 700px) {
  .service-add-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .option-row.service-row input.price-input {
    flex: 1 1 90px;
    width: auto;
  }
}

/* --- Field Service tab --- */

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: 18px 0 10px;
}

.section-head .section-heading {
  margin: 0;
}

.zr-picker select {
  min-width: 180px;
}

.stop-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--yellow);
  color: var(--on-bright);
  font-size: 13px;
  font-weight: 700;
  margin-right: 4px;
}

.field-banner {
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 10px;
  font-size: 15px;
  white-space: pre-wrap;
  border: 1px solid var(--blue);
  background: color-mix(in srgb, var(--blue) 12%, transparent);
}

.field-banner-alert {
  border-color: var(--red);
  background: color-mix(in srgb, var(--red) 15%, transparent);
  font-weight: 600;
}

.salt-qty,
.stacked-form label.salt-qty {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px 32px;
  font-size: 14px;
  color: var(--text-muted);
}

.salt-qty input {
  width: 110px;
}

.salt-unit {
  color: var(--text);
  font-weight: 600;
}

.salt-fields {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
}

.badge.salt-badge {
  background: color-mix(in srgb, var(--yellow) 15%, transparent);
  color: var(--yellow);
  white-space: nowrap;
}

/* Winter Event History: salt totals */

tr.total-row td {
  font-weight: 700;
  border-top: 2px solid var(--border);
}

/* Site search (Sites page + Field Service): static/js/site_search.js */

.site-search {
  position: relative;
  margin: 0 0 12px;
}

.site-search input[type="search"] {
  width: 100%;
  padding-right: 40px;
}

/* Our own ✕ clears it (and the server search); hide the browser's. */
.site-search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.site-search-clear {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  min-width: 32px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  text-decoration: none;
}

/* Collapsible cards (site page Details / Services): closed by default, chevron shows it opens. */
details.collapse-card > summary {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  cursor: pointer;
  list-style: none;
  min-height: var(--tap);
  align-content: center;
}

details.collapse-card > summary::-webkit-details-marker { display: none; }

details.collapse-card > summary h2 { margin: 0; }

details.collapse-card > summary::after {
  content: "";
  width: 9px;
  height: 9px;
  margin-left: auto;
  align-self: center;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: rotate(45deg);
  transition: transform 0.15s;
}

details.collapse-card[open] > summary::after { transform: rotate(-135deg); }

details.collapse-card[open] > summary { margin-bottom: 12px; }

.collapse-hint {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* Jobs to Invoice (Accounting + Winter Event History): _invoice_macros.html */

/* Jobs to Invoice, grouped by site: a header per site, then its job cards. */
.group-toggle { margin: 0 0 var(--sp-3); }
.group-toggle .button-link { width: auto; }
.job-group { margin-bottom: var(--sp-4); scroll-margin-top: var(--sp-3); }
.job-group-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-3); padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-2);
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elevated-2); }
.job-group-head h3 { margin: 0; font-size: 17px; min-width: 0; overflow-wrap: anywhere; }
.job-group-totals { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); margin-left: auto; font-size: 14px; }
.job-group-open strong { color: var(--orange); }
.job-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 8px 0;
}

.job-summary > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-subtle);
}

.job-summary strong {
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}

.job-summary .job-summary-open strong { color: var(--orange); }

.job-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-left: 4px solid var(--orange);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 12px;
}

.job-card.job-invoiced { border-left-color: var(--green); }

.job-card.job-invoiced .job-lines,
.job-card.job-invoiced .job-crew { opacity: 0.75; }

.job-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px 16px;
  flex-wrap: wrap;
}

.job-title { min-width: 0; }

.job-title h3 {
  margin: 0 0 2px;
  font-size: 16px;
}

.badge.job-event { background: color-mix(in srgb, var(--blue) 18%, transparent); color: var(--blue-text); }

.job-side {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
}

.job-total {
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.job-invoice-form { margin: 0; }

.job-invoice-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  white-space: nowrap;
}

.job-invoice-check input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 0;
}

.job-invoiced .job-invoice-check {
  border-color: color-mix(in srgb, var(--green) 50%, transparent);
  background: color-mix(in srgb, var(--green) 14%, transparent);
  color: var(--green-text);
}

.job-lines {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

.job-lines td {
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.job-lines td.job-price {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  padding-left: 12px;
}

.job-unbill { margin: 2px 0 0; text-align: right; }

.job-lines tr.job-total-row td {
  font-weight: 700;
  border-bottom: none;
}

.job-crew {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--bg-subtle);
  font-size: 14px;
}

.job-crew-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-weight: 600;
  margin-bottom: 4px;
}

.job-crew-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  padding: 2px 0;
}

.job-crew-time {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  min-width: 80px;
  text-align: right;
}

.job-notes { margin: 8px 0 4px; }
.job-links { display: flex; gap: 14px; flex-wrap: wrap; }

/* Edit times & notes on a finished visit (service_visit_edit.html) */
.visit-edit-row { border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px 6px; margin: 0 0 10px; min-width: 0; }
.visit-edit-row legend { padding: 0 4px; }
.visit-edit-times { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.visit-edit-times label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--text-muted); min-width: 0; }
.visit-edit-times input { width: 100%; min-width: 0; }

/* Accounting > Jobs to Invoice > Edit services */
.job-locked { padding: 8px 12px; border-radius: 8px; background: color-mix(in srgb, var(--yellow) 14%, transparent); color: var(--text); }
.job-edit-item {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px 10px;
  margin: 0 0 12px;
  min-width: 0;
}
.job-edit-item legend { padding: 0 4px; }
.job-edit-item legend .badge { margin-left: 4px; }
.job-billable { background: color-mix(in srgb, var(--green) 18%, transparent); color: var(--green-text); }
.job-contracted { background: var(--bg-subtle); color: var(--text-muted); }
.job-edit-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.job-edit-fields label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--text-muted); min-width: 0; }
.job-edit-fields input { width: 100%; }
.input-with-unit { display: flex; align-items: center; gap: 6px; }
.job-edit-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; font-size: 14px; }
.job-edit-line { color: var(--text-muted); }
.job-edit-line strong { color: var(--text); }
.job-edit-remove { color: var(--red-text); }
.job-edit-removed .job-edit-fields, .job-edit-removed .job-edit-line { opacity: 0.4; }
.job-add-row { display: flex; gap: 8px; flex-wrap: wrap; }
.job-add-row select { flex: 1 1 220px; min-width: 0; }

.job-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 6px 0 10px;
}

@media (max-width: 700px) {
  .job-side { width: 100%; justify-content: space-between; }
  .job-crew-row { grid-template-columns: minmax(0, 1fr) auto; }
  .job-crew-row > .nowrap { grid-column: 1; grid-row: 2; }
  .job-crew-time { grid-row: 1 / span 2; align-self: center; }
}

/* Settings > Field Service banners */

.banner-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-bottom: 8px;
}

.banner-audience {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px 12px;
}

.banner-card.banner-off .field-banner {
  opacity: 0.5;
}

.badge.banner-expires {
  background: color-mix(in srgb, var(--yellow) 18%, transparent);
  color: var(--yellow);
}

.banner-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.banner-edit summary {
  cursor: pointer;
  color: var(--blue);
  font-size: 13px;
  margin-top: 8px;
}

/* --- Winter Ops Resources tile editing --- */

.tile-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.resource-edit-row {
  border-bottom: 1px solid var(--border);
  padding: 8px 0;
}

.resource-edit-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.resource-edit-form input {
  width: 100%;
}

.resource-edit-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.resource-edit-actions button[disabled] {
  opacity: 0.35;
  cursor: default;
}

.resource-add {
  margin-top: 12px;
}

/* --- Service progress (Active Ops) + Done to completion --- */

.progress-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.progress-stat {
  background: var(--bg-elevated-2);
  border-radius: 8px;
  padding: 8px 10px;
}

.progress-stat .n {
  font-size: 18px;
  font-weight: 700;
}

.progress-stat .l {
  font-size: 12px;
  color: var(--text-muted);
}

.progress-zone {
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 8px;
  overflow: hidden;
}

.progress-zone summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  padding: 9px 12px;
  background: var(--bg-subtle);
  cursor: pointer;
  list-style: none;
  font-size: 14px;
}

.progress-zone summary::-webkit-details-marker {
  display: none;
}

.progress-zone summary::before {
  content: "▸";
  color: var(--text-muted);
}

.progress-zone[open] summary::before {
  content: "▾";
}

.progress-bar {
  flex: 1 1 60px;
  min-width: 60px;
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}

.progress-bar i {
  display: block;
  height: 100%;
  background: var(--green);
}

.progress-row {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.5fr) auto;
  gap: 8px 10px;
  align-items: center;
  padding: 8px 12px;
  border-top: 1px solid var(--border);
  font-size: 14px;
}

.progress-status {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
}

.progress-live {
  color: var(--yellow);
}

.salt-amount {
  color: var(--yellow);
}

.badge.done-badge { background: var(--green); color: var(--on-bright); }
.badge.serviced-badge { background: color-mix(in srgb, var(--blue) 18%, transparent); color: var(--blue-text); }
.badge.progress-badge { background: color-mix(in srgb, var(--yellow) 18%, transparent); color: var(--yellow); }
.badge.not-yet-badge { background: var(--border); color: var(--text-muted); }
:root[data-theme="light"] .badge.not-yet-badge { background: var(--bg-elevated-2); box-shadow: inset 0 0 0 1px var(--border); }

.ticket-card.site-done {
  border-left-color: var(--green);
}

.completion-note {
  border: 1px solid var(--green);
  background: color-mix(in srgb, var(--green) 12%, transparent);
  border-radius: var(--radius);
  padding: 10px 12px;
  margin-bottom: 12px;
  font-size: 14px;
}

.stacked-form label.done-complete {
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  border: 1.5px solid var(--green);
  background: color-mix(in srgb, var(--green) 8%, transparent);
  border-radius: 8px;
  padding: 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.done-complete input[type="checkbox"] {
  width: 22px;
  height: 22px;
  flex: none;
  margin: 0;
}

.done-complete-note,
.done-complete-photo {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: var(--text-muted);
  margin-top: 3px;
}

.done-complete-photo {
  color: var(--yellow);
}

@media (max-width: 700px) {
  .progress-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .progress-services {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

/* --- Salt Run (Field Service) --- */

.salt-run-toggle {
  margin: 0 0 12px;
}

.salt-run-toggle button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px 14px;
  text-align: left;
}

.salt-run-toggle.on button {
  border-color: var(--yellow);
  background: color-mix(in srgb, var(--yellow) 12%, transparent);
}

.salt-run-toggle .switch {
  position: relative;
  width: 44px;
  height: 26px;
  border-radius: 999px;
  background: var(--border);
  flex: none;
  transition: background 0.15s;
}

.salt-run-toggle .switch span {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--text);
  transition: left 0.15s;
}

.salt-run-toggle.on .switch {
  background: var(--yellow);
}

.salt-run-toggle.on .switch span {
  left: 21px;
}

.salt-run-toggle .switch-label {
  font-size: 16px;
  font-weight: 700;
}

.salt-run-toggle .text-note {
  margin-left: auto;
}

details.salt-me {
  margin-top: 10px;
}

details.salt-me summary {
  list-style: none;
  cursor: pointer;
  text-align: center;
  background: var(--yellow);
  color: var(--on-bright);
  font-size: 18px;
  font-weight: 800;
  border-radius: 10px;
  padding: 14px;
  letter-spacing: 0.01em;
}

details.salt-me summary::-webkit-details-marker {
  display: none;
}

details.salt-me[open] summary {
  border-radius: 10px 10px 0 0;
}

.salt-me-form {
  border: 1.5px solid var(--yellow);
  border-top: none;
  border-radius: 0 0 10px 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.salt-me-form label {
  font-weight: 600;
}

.salt-me-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.salt-me-head > label {
  min-width: 0;
  line-height: 1.2;
}

.salt-areas {
  display: flex;
  gap: 5px;
  flex: none;
}

.salt-area input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.salt-area span {
  display: inline-block;
  border: 1.5px solid var(--yellow);
  color: var(--yellow);
  border-radius: 8px;
  padding: 7px 7px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
}

.salt-area input:checked + span {
  background: var(--yellow);
  color: var(--on-bright);
}

.salt-area input:focus-visible + span {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

.salt-me-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.salt-me-row input {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 18px;
}

/* --- Active Ops: clocked out --- */

.clocked-out {
  border-top: 1px solid var(--border);
  margin-top: 14px;
  padding-top: 12px;
}

.more-work {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
}

/* --- Winter Ops weather ticker (_winter_tabs.html, static/js/wx_ticker.js) ---
   Full width at the top of the Winter Ops tabs, tabs underneath. 45px tall on
   computers; 66px two-row layout on phones. */

.winter-tabs-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-bottom: 1px solid var(--border);
  margin: 0 0 16px;
  padding-bottom: 8px;
}

.winter-tabs-row .eq-tabs {
  border-bottom: none;
  margin: 0;
  padding-bottom: 0;
}

.wx-ticker {
  height: 45px;
  color: var(--text);
  display: flex;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.wx-ticker.alert {
  border-color: var(--red);
  box-shadow: 0 0 0 1px var(--red);
}

.wx-fixed {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 12px;
  background: var(--bg-elevated-2);
  white-space: nowrap;
  font-weight: 600;
  flex: none;
}

.wx-ticker.alert .wx-fixed {
  background: var(--red);
  color: var(--on-accent);
}

/* Fixed-width digits and fields so nothing shifts as numbers change. Time and
   temperature read as one unit ("11:24:28 PM – 68°F"): time right-aligned,
   temperature left-aligned around a fixed dash. */
.wx-time,
.wx-temp,
.wx-clock,
.wx-dash {
  display: inline-block;
  font-family: "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-variant-numeric: tabular-nums;
  font-size: 18px; /* computer: large text inside the 45px box; phones override below */
}

.wx-now {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

.wx-dash {
  color: var(--text-muted);
  font-weight: 400;
}

.wx-ticker.alert .wx-dash { color: var(--wx-dim); }
.wx-time { width: 11.2ch; text-align: right; }
.wx-temp { width: 4.6ch; text-align: left; }
.wx-clock { min-width: 10ch; }
.wx-clock.minus { color: var(--yellow); }
.wx-clock.plus { color: var(--green); }
.wx-clock.late { color: var(--red); }
.wx-ticker.alert .wx-clock { color: var(--on-accent); }

.wx-scroll {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  background: var(--wx-bg);
  display: flex;
  align-items: center;
}

.wx-track {
  display: inline-flex;
  white-space: nowrap;
  animation: wx-roll var(--wx-dur, 40s) linear infinite;
}

.wx-ticker:hover .wx-track,
.wx-ticker.paused .wx-track {
  animation-play-state: paused;
}

@keyframes wx-roll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.wx-item {
  font-family: "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  color: var(--wx-amber);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 20px;
  line-height: 1;
  padding: 0 16px;
}

.wx-item.warn {
  color: var(--wx-red);
  font-weight: 700;
}

.wx-item.progress {
  color: var(--green);
  font-weight: 700;
}

.wx-item.custom {
  color: var(--blue-text);
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  .wx-track { animation: none; }
  .wx-scroll { overflow-x: auto; }
}

@media (max-width: 700px) {
  .wx-ticker {
    flex-direction: column;
    height: 66px;
  }

  .wx-fixed {
    justify-content: space-between;
    gap: 8px;
    padding: 0 12px;
    height: 30px;
  }

  .wx-time, .wx-temp, .wx-clock, .wx-dash { font-size: 14px; }
  .wx-time { width: 8ch; }
  .wx-now { gap: 5px; }

  .wx-item {
    font-size: 15px;
    padding: 0 14px;
  }
}

/* Submit button of a form whose file input has a file picked (script in base.html). */
button.upload-ready,
button.secondary.upload-ready {
  background: var(--green);
  border-color: var(--green);
  color: var(--on-bright);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 33%, transparent), 0 0 14px color-mix(in srgb, var(--green) 60%, transparent);
  animation: upload-ready-pulse 1.6s ease-in-out infinite;
}

button.upload-ready:hover {
  background: var(--green-hover);
}

@keyframes upload-ready-pulse {
  50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--green) 20%, transparent), 0 0 20px color-mix(in srgb, var(--green) 80%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
  button.upload-ready { animation: none; }
}

/* --- Mobile pass: layout that works at 375px on every page --- */

/* Grid columns must be allowed to shrink below their content's width, or a
   wide table / long word blows the column (and the whole page) out sideways. */
.grid > *,
.comms-layout > *,
.msgr-layout > *,
.history-layout > * {
  min-width: 0;
}

@media (max-width: 700px) {
  /* Sub-tabs (Winter Ops, Equipment categories, Settings): one swipeable row
     instead of three or four wrapped rows. The active tab is scrolled into view
     by the script in base.html. */
  .eq-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
  }

  .eq-tabs::-webkit-scrollbar {
    display: none;
  }

  .eq-tabs a {
    flex: none;
    white-space: nowrap;
  }

  /* Winter Ops tiles: full width, stacked. !important beats the width/height a
     desktop drag-resize saved inline (localStorage). No resizing or dragging on
     a phone -- touch doesn't support either. */
  .tile-grid .tile,
  .tile-grid .tile-wide {
    width: 100% !important;
    height: auto !important;
    min-width: 0;
    resize: none;
  }

  .tile-drag-handle {
    display: none;
  }

  /* table.stack-mobile: each row becomes a labeled card (labels come from the
     header row via the script in base.html). Other tables keep scrolling
     sideways inside .table-scroll. */
  table.stack-mobile,
  table.stack-mobile tbody {
    display: block;
    width: 100%;
  }

  table.stack-mobile tr.stack-head {
    display: none;
  }

  table.stack-mobile tr {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 6px 16px;
    padding: 12px 4px;
    border-bottom: 1px solid var(--border);
  }

  table.stack-mobile tr:last-child {
    border-bottom: none;
  }

  table.stack-mobile td {
    display: block;
    padding: 0;
    border: none;
    font-size: 14px;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  table.stack-mobile td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 1px;
  }

  table.stack-mobile td.stack-title {
    order: -1;
    flex-basis: 100%;
    font-size: 15px;
    font-weight: 600;
  }

  table.stack-mobile td.stack-title::before,
  table.stack-mobile td.stack-empty {
    display: none;
  }

  /* A row action marked .stack-action sits at the right end of the card's
     title line (e.g. Log Service on the Sites list). */
  table.stack-mobile td.stack-action {
    order: -1;
    flex: none;
    width: auto;
    margin-left: auto;
    align-self: center;
  }

  table.stack-mobile tr:has(td.stack-action) td.stack-title {
    flex: 1 1 0;
    align-self: center;
  }

  /* Line break after the title line: a full-width flex item that sorts with
     the title/action (order -1) but comes after them in DOM order. */
  table.stack-mobile tr:has(td.stack-action)::after {
    content: "";
    order: -1;
    flex-basis: 100%;
    height: 0;
  }

  /* Site page: title left, Log Service right. */
  .title-row {
    flex-wrap: nowrap;
    justify-content: space-between;
  }

  .title-row h1 {
    min-width: 0;
  }

  /* Unlabeled cells (row actions) take their own full-width line. */
  table.stack-mobile td:not([data-label]):not(.stack-title):not(.thumb-cell):not(.stack-action) {
    flex-basis: 100%;
  }

  /* Equipment thumbnails sit beside the name. */
  table.stack-mobile td.thumb-cell {
    order: -2;
  }

  table.stack-mobile td.thumb-cell + td.stack-title {
    flex: 1 1 60%;
    align-self: center;
  }

  table.stack-mobile td.nowrap {
    white-space: normal;
  }

  /* Row highlights are painted on the cells on desktop; paint the whole card here. */
  table.stack-mobile tr td,
  table.stack-mobile tr.row-full-time td:first-child {
    background: none;
    box-shadow: none;
  }

  table.stack-mobile tr.row-elapsed-yellow { background: color-mix(in srgb, var(--yellow) 10%, transparent); }
  table.stack-mobile tr.row-elapsed-orange { background: color-mix(in srgb, var(--orange) 13%, transparent); }
  table.stack-mobile tr.row-elapsed-red { background: color-mix(in srgb, var(--red) 16%, transparent); }
  table.stack-mobile tr.row-due { background: color-mix(in srgb, var(--red) 8%, transparent); }
  table.stack-mobile tr.row-full-time { background: color-mix(in srgb, var(--blue) 8%, transparent); box-shadow: inset 3px 0 0 var(--blue); }

  table.stack-mobile tr[class*="row-"] {
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 8px;
  }

  /* No control wider than its container (file inputs have a wide intrinsic
     size and would otherwise push forms off the right edge). */
  input, select, textarea {
    max-width: 100%;
    min-width: 0;
  }

  .link-form {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Settings list rows: name on its own line, controls wrap below it. */
  .option-row {
    flex-wrap: wrap;
  }

  .option-row input[type="text"] {
    flex: 1 1 calc(100% - 30px);
  }

  /* Service categories: ↑ ↓ share the name's line. */
  .option-row.cat-row input[type="text"] {
    flex: 1 1 calc(100% - 110px);
    min-width: 0;
  }

  /* Bigger tap targets. Text-style buttons (.link-button) stay inline. */
  button:not(.link-button):not(.link-remove),
  a.button-link {
    min-height: var(--tap);
  }

  a.button-link {
    display: inline-flex;
    align-items: center;
  }

  button.link-remove {
    min-width: var(--tap);
    min-height: var(--tap);
  }

  .eq-tabs a,
  .topbar nav a {
    padding-top: 9px;
    padding-bottom: 9px;
  }
}

/* --- Small outline icons (_icons.html) --- */

.ui-icon {
  width: 18px;
  height: 18px;
  flex: none;
  vertical-align: -3px;
}

button.small {
  padding: 5px 10px;
  font-size: 13px;
}

/* --- Field Service: clock card + crew action menu --- */

.field-top {
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin-bottom: 16px;
}

.field-top .clock-card {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
}

/* Same height as the clock card beside it. */
.action-menu {
  position: relative;
  flex: none;
  display: flex;
}

.action-menu summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 150px;
  padding: 14px 18px;
  border: 1px solid var(--blue);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  color: var(--text);
  cursor: pointer;
  user-select: none;
}

.action-menu summary .ui-icon {
  width: 26px;
  height: 26px;
}

.action-menu summary::-webkit-details-marker {
  display: none;
}

.action-menu[open] summary {
  background: var(--blue-dim);
}

.action-menu[open] .page-menu-caret {
  margin-top: 3px;
  transform: rotate(-135deg);
}

.action-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: min(270px, calc(100vw - 32px));
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px var(--shadow);
  padding: 6px;
  z-index: 50;
}

.action-menu-panel a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
  font-size: 16px;
}

.action-menu-panel a:hover {
  background: var(--bg-elevated-2);
}

.action-menu-panel .ui-icon {
  color: var(--blue);
  width: 20px;
  height: 20px;
}

/* --- View Team --- */

.team-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.team-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 12px 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.team-row.team-same {
  border-left: 4px solid var(--green);
}

.team-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.team-name {
  font-weight: 600;
  font-size: 16px;
}

.team-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  color: var(--text-muted);
  font-size: 13px;
}

a.button-link.team-call {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border-color: var(--green);
  font-weight: 600;
  white-space: nowrap;
}

a.button-link.team-call .ui-icon {
  color: var(--green);
}

.badge.crew-leader-badge {
  background: color-mix(in srgb, var(--yellow) 15%, transparent);
  color: var(--yellow);
  border: 1px solid color-mix(in srgb, var(--yellow) 33%, transparent);
  font-size: var(--fs-xs);
  padding: 1px 7px;
}

.badge.team-break-badge {
  background: color-mix(in srgb, var(--yellow) 15%, transparent);
  color: var(--yellow);
  font-size: var(--fs-xs);
}

/* --- Crews (Field Service card, My Crew, crew on site) --- */

a.crew-card,
div.crew-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 12px;
  padding: 10px 14px;
  margin-bottom: 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-left: 4px solid var(--yellow);
  border-radius: var(--radius);
  color: var(--text);
  text-decoration: none;
}

.crew-card-edit {
  color: var(--blue);
  font-weight: 600;
  white-space: nowrap;
}

.crew-picker {
  display: flex;
  flex-direction: column;
}

.stacked-form label.crew-pick {
  display: flex;
  flex-direction: row;
  font-size: 15px;
  color: var(--text);
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.stacked-form label.crew-pick input {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  flex: none;
}

.crew-pick .text-note {
  display: block;
}

.crew-pick-name {
  font-weight: 600;
}

.crew-on-site {
  margin-bottom: 10px;
}

.crew-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.crew-row form {
  margin: 0 0 0 auto;
}

.crew-time {
  margin-left: auto;
  color: var(--text-muted);
  font-size: 13px;
}

.crew-row form + .crew-time,
.crew-row .crew-time + form {
  margin-left: 8px;
}

.crew-row.crew-left {
  color: var(--text-muted);
}

.crew-add {
  display: flex;
  gap: 8px;
  margin: 8px 0;
}

.crew-add select {
  flex: 1;
  min-width: 0;
}

.crew-rejoin {
  border-left: 4px solid var(--green);
}

/* --- Receipts (crew form + Accounting) --- */

/* Fuel tags: blue = a vehicle, red = Ag Fuel, green = Diesel. */
.badge.fuel-tag {
  font-size: var(--fs-xs);
  padding: 2px 8px;
  white-space: nowrap;
}

.badge.fuel-vehicle { background: color-mix(in srgb, var(--blue) 19%, transparent); color: var(--blue-text); border: 1px solid color-mix(in srgb, var(--blue) 40%, transparent); }
.badge.fuel-ag_fuel { background: color-mix(in srgb, var(--red) 19%, transparent); color: var(--red-text); border: 1px solid color-mix(in srgb, var(--red) 40%, transparent); }
.badge.fuel-diesel { background: color-mix(in srgb, var(--green) 19%, transparent); color: var(--green-text); border: 1px solid color-mix(in srgb, var(--green) 40%, transparent); }

.receipts-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
  gap: 16px;
  align-items: start;
}

.receipts-totals {
  position: sticky;
  top: 12px;
  margin: 0;
}

.receipt-filters {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.receipt-filters label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--text-muted);
}

.receipt-custom {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
}

.receipt-custom label {
  flex: 1 1 120px;
}

.receipt-range {
  margin: 12px 0 6px;
}

.receipt-totals-table {
  width: 100%;
  border-collapse: collapse;
}

.receipt-totals-table td {
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}

.receipt-totals-table td:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.receipt-totals-table tr.fuel-split td {
  padding: 3px 0;
  border-bottom: none;
  font-size: 13px;
}

.receipt-totals-table tr.fuel-split td:first-child {
  padding-left: 14px;
}

.receipt-totals-table tr.receipt-total-row td {
  font-weight: 700;
  border-bottom: none;
  padding-top: 10px;
}

.receipt-status-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
}

.receipt-status-tabs a {
  padding: 6px 12px;
  border-radius: 8px;
  color: var(--text-muted);
  text-decoration: none;
  border: 1px solid transparent;
}

.receipt-status-tabs a.active {
  color: var(--text);
  background: var(--bg-elevated-2);
  border-color: var(--border);
}

.receipt-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.receipt-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 10px 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.receipt-row.receipt-new {
  border-left: 4px solid var(--yellow);
}

button.receipt-thumb {
  width: 64px;
  height: 80px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-elevated-2);
}

button.receipt-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.receipt-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.receipt-title {
  font-weight: 600;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.receipt-desc {
  font-size: 14px;
  overflow-wrap: anywhere;
}

.receipt-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.receipt-side form {
  margin: 0;
}

.receipt-amount {
  font-weight: 700;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

.receipt-edit-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

button.receipt-photo-full {
  display: block;
  width: 100%;
  padding: 0;
  background: none;
  border: none;
}

button.receipt-photo-full img {
  display: block;
  width: 100%;
  max-height: 75vh;
  object-fit: contain;
  border-radius: 8px;
}

.receipt-edit-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
}

@media (max-width: 900px) {
  .receipts-layout,
  .receipt-edit-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Phones: totals and filters above the log. */
  .receipts-totals {
    position: static;
    order: -1;
  }
}

@media (max-width: 700px) {
  .team-row {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Phones: icons stacked so the button fills the clock card's height without crowding it. */
  .action-menu summary {
    flex-direction: column;
    min-width: 0;
    padding: 10px 14px;
    gap: 8px;
  }

  .action-menu summary .ui-icon {
    width: 24px;
    height: 24px;
  }

  .receipt-row {
    grid-template-columns: 56px minmax(0, 1fr);
  }

  button.receipt-thumb {
    width: 56px;
    height: 70px;
  }

  .receipt-side {
    grid-column: 2;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
  }
}

/* Equipment operating status: green Operational, orange Service Needed Soon, red DOWN. */
.badge.op-badge { font-weight: 700; }
.badge.op-operational { background: var(--green); color: var(--on-bright); }
.badge.op-service_soon { background: var(--orange); color: var(--on-bright); }
.badge.op-down { background: var(--red); color: var(--on-accent); }
.op-status-block {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--green);
  border-radius: var(--radius);
  background: var(--bg-elevated);
}
.op-block-service_soon { border-left-color: var(--orange); }
.op-block-down { border-left-color: var(--red); }
.op-status-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.op-status-reason { margin: 8px 0 0; }
.op-update { margin-top: 8px; }
.op-update > summary { display: inline-block; cursor: pointer; padding: 8px 14px; border: 1px solid var(--blue); border-radius: var(--radius); color: var(--blue); font-weight: 600; list-style: none; }
.op-update > summary::-webkit-details-marker { display: none; }
.op-status-form { margin-top: 8px; max-width: 460px; }
.status-updates { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.status-update {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--green);
  border-radius: var(--radius);
  background: var(--bg-elevated-2);
}
.status-update-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.status-update-reason { margin: 4px 0; }

/* Service ticket priority: Normal yellow, High orange, IMMEDIATE red. */
.badge.prio-normal { background: color-mix(in srgb, var(--yellow) 19%, transparent); color: var(--yellow); }
.badge.prio-high { background: var(--orange); color: var(--on-bright); font-weight: 700; }
.badge.prio-immediate { background: var(--red); color: var(--on-accent); font-weight: 700; }
.ticket-card.prio-normal { border-left-color: var(--yellow); }
.ticket-card.prio-high { border-left-color: var(--orange); }
.ticket-card.prio-immediate { border-left-color: var(--red); }

/* Done to Completion by area, and Sites to Review. */
.ticket-card.site-failed { border-left-color: var(--red); }
.badge.failed-badge { background: var(--red); color: var(--on-accent); font-weight: 700; }
.badge.part-badge { background: color-mix(in srgb, var(--green) 19%, transparent); color: var(--green); }
.failed-notes { color: var(--red); margin-top: 4px; }
/* Log Service: the site's Service notes, above Services completed. */
.service-notes {
  margin-bottom: 14px;
  padding: 10px 12px;
  border-radius: 8px;
  border-left: 3px solid var(--blue);
  background: color-mix(in srgb, var(--blue) 12%, transparent);
}
.service-notes h3 { margin: 0 0 4px; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.03em; color: var(--blue-text); }
.review-form { display: grid; gap: 8px; margin-top: 8px; }
.review-form .review-choice { display: flex; flex-wrap: wrap; gap: 14px; }
.review-form .review-choice label { display: flex; flex-direction: row; align-items: center; gap: 8px; }
.review-form .review-choice input { width: auto; }
.cfg-location { display: block; margin: 8px 0; }
.completion-note.failed-note { border-color: var(--red); background: color-mix(in srgb, var(--red) 12%, transparent); }

.badge.as-needed-badge { background: color-mix(in srgb, var(--slate) 19%, transparent); color: var(--slate-text); }
.item-row-fields .as-needed-row { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 8px; margin-bottom: 4px; }
.item-row-fields .as-needed-row input { width: auto; }
.mt-type-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mt-type-row input[type="text"] { flex: 1 1 200px; width: auto; min-width: 0; }
.mt-type-row input[type="color"] { width: 44px; padding: 2px; }
.mt-type-row.dragging { opacity: 0.85; outline: 1px dashed var(--blue); border-radius: var(--radius); background: var(--bg-elevated-2); }
.mt-type-list.reorder-saved { outline: 1px solid var(--green); }
.mt-type-list.reorder-failed { outline: 1px solid var(--red); }

.badge.reimb-tag { background: color-mix(in srgb, var(--green) 19%, transparent); color: var(--green); cursor: help; padding: 0 7px; font-weight: 700; }
.receipt-form .receipt-reimb, .ticket-form .receipt-reimb { flex-direction: row; align-items: center; gap: 8px; }
.receipt-reimb input { width: auto; }

/* Draggable sub-tabs (static/js/tab_order.js): vertical page scroll still works, sideways drags reorder. */
.eq-tabs[data-reorder-group] a { touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.eq-tabs[data-reorder-group] a.tab-dragging { opacity: 0.85; outline: 1px dashed var(--blue); cursor: grabbing; position: relative; z-index: 2; }

/* Equipment page: Log Maintenance button beside the status box (salt-run yellow), and its pop-up. */
.unit-status-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; margin-top: 10px; }
.unit-status-row .op-status-block { flex: 1 1 260px; margin-top: 0; }
.log-maint-btn {
  flex: 0 1 240px;
  min-height: 64px;
  background: var(--yellow);
  color: var(--on-bright);
  border: none;
  border-radius: 10px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.01em;
  cursor: pointer;
}
.log-maint-btn:hover { filter: brightness(1.08); }
.log-dialog {
  width: min(560px, calc(100% - 24px));
  max-height: calc(100% - 24px);
  padding: 16px;
  background: var(--bg-elevated);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: auto;
}
.log-dialog::backdrop { background: var(--scrim); }
.log-dialog-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.log-dialog-head h2 { margin: 0; font-size: 18px; }
.log-dialog .form-grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .log-dialog .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.fuel-by-vehicle { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.fuel-by-vehicle h3 { margin: 0 0 4px; font-size: 15px; }

/* --- Jobs (Operations > Jobs) ------------------------------------------------ */
.jobs-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 4px 0 10px; }
.badge.season-badge { background: var(--bg-elevated-2); color: var(--text-muted); border: 1px solid var(--border); }
.job-banner { border-left: 3px solid var(--yellow); }
.job-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; align-items: center; }
.job-filters input[type="search"], .job-filters select { width: 100%; min-width: 0; }
.job-filters .segmented, .job-filters .filter-actions { min-width: 0; }
.job-group h2 { font-size: 16px; margin: 0; }
.job-title { display: block; }
.job-svc.retired { text-decoration: line-through; color: var(--text-muted); }
.job-actions { white-space: nowrap; }
.job-actions > a, .job-actions > details { margin-right: 10px; display: inline-block; }
.row-menu { position: relative; }
.row-menu summary { list-style: none; cursor: pointer; }
.row-menu summary::-webkit-details-marker { display: none; }
.row-menu-panel {
  position: absolute; right: 0; z-index: 20; min-width: 240px; margin-top: 4px; padding: 10px;
  background: var(--bg-elevated-2); border: 1px solid var(--border); border-radius: var(--radius);
  display: flex; flex-direction: column; gap: 8px; white-space: normal;
}
.row-menu-form { display: flex; flex-direction: column; gap: 6px; }
.link-button.danger { color: var(--red); }

.job-form { max-width: 720px; }
.job-form .job-step { font-size: 14px; margin: 14px 0 0; color: var(--text); }
.job-form .job-step:first-of-type { margin-top: 0; }
.job-form .field-label { font-size: 12px; color: var(--text-muted); display: block; margin-bottom: 4px; }
.job-services { display: flex; flex-direction: column; gap: 4px; }
.job-services label.retired span:first-of-type { text-decoration: line-through; }
.seg-radio { display: flex; flex-wrap: wrap; gap: 4px; }
.ticket-form .seg-radio label.seg-opt { flex-direction: row; font-size: 13px; }
.seg-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg-opt span { display: inline-block; padding: 7px 14px; border: 1px solid var(--border); border-radius: 8px; color: var(--text-muted); cursor: pointer; }
.seg-opt input:checked + span { background: var(--blue-dim); border-color: var(--blue-dim); color: var(--on-accent); }
.seg-opt input:focus-visible + span, .chip-toggle input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ticket-form .chip-row label.chip-toggle { flex-direction: row; }
.chip-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip-toggle span { display: inline-block; min-width: 46px; text-align: center; padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; color: var(--text-muted); cursor: pointer; font-size: 13px; }
.chip-toggle input:checked + span { background: var(--blue-dim); border-color: var(--blue-dim); color: var(--on-accent); }
.chip-btn { width: auto; padding: 6px 12px; border-radius: 8px; background: var(--bg-elevated-2); border: 1px solid var(--border); color: var(--text-muted); cursor: pointer; font-size: 13px; }
.chip-btn:hover { color: var(--text); }
.est-row { display: grid; grid-template-columns: minmax(0, 140px) minmax(0, 1fr); gap: 10px; align-items: end; }
.job-preview { background: var(--bg-elevated-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; font-size: 14px; }
.job-warning { margin: 6px 0 0; color: var(--yellow); font-size: 13px; }
.lawn-season-form .season-row { display: flex; align-items: center; gap: 8px; }
.lawn-season-form .season-label { width: 52px; font-size: 13px; color: var(--text-muted); }
@media (max-width: 700px) {
  .est-row { grid-template-columns: minmax(0, 1fr); }
  /* On phones the menu opens in place (in the row's card) so it can't run off the screen. */
  .job-actions { white-space: normal; }
  .job-actions > details.row-menu { display: block; margin-top: 4px; }
  .row-menu-panel { position: static; min-width: 0; }
}

/* the form's general label box (border/padding) doesn't apply to the toggle chips */
.job-form label.seg-opt, .job-form label.chip-toggle { border: 0; padding: 0; background: none; border-radius: 0; }

/* Field Service: Check In is a button (posts straight to check-in) styled like the old Log Service link. */
button.log-service-btn {
  border: 1.5px solid var(--green);
  color: var(--green);
  background: color-mix(in srgb, var(--green) 8%, transparent);
  white-space: nowrap;
  width: 100%;
}

button.log-service-btn:hover {
  background: color-mix(in srgb, var(--green) 20%, transparent);
  color: var(--text);
}

.site-actions form.inline {
  display: block;
}

/* Site page: the per-season "Add default services" checklist. */
.defaults-pick {
  margin-top: 8px;
}

.defaults-pick summary {
  display: inline-block;
  cursor: pointer;
}

.defaults-pick form {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

/* --- Dispatch Board (Operations > Dispatch Board) ------------------------------------ */
.dispatch-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 4px 0 10px; }
.dispatch-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dispatch-nav .week-label { font-size: 16px; }
.dispatch-nav a.chip-btn { text-decoration: none; display: inline-block; }
.copy-menu .row-menu-panel { left: 0; right: auto; min-width: 220px; }
.copy-menu summary.secondary-link { background: var(--bg-elevated-2); border: 1px solid var(--border); color: var(--text); }

.dispatch-phone { display: none; }
.board-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elevated); }
.board-grid {
  display: grid;
  grid-template-columns: 150px repeat(var(--cols, 5), minmax(0, 1fr));
  min-width: calc(150px + var(--cols, 5) * 168px);
}
.board-grid > * { min-width: 0; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); }
.bcorner, .bname {
  position: sticky; left: 0; z-index: 2; background: var(--bg-elevated);
  padding: 8px 10px; font-size: 13px;
}
.bcorner { color: var(--text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
.bname-leader { cursor: grab; background: var(--bg-elevated-2); }
.bname-person { cursor: grab; }
.bname .leader-tag, .bname .off-list, .leader-card .off-list, .others-list .off-list { color: var(--text-muted); font-size: var(--fs-xs); font-weight: 400; }
.bname .off-list { display: block; }
.bhead { padding: 8px 10px; background: var(--bg-elevated-2); display: flex; flex-direction: column; gap: 2px; }
.bhead small { color: var(--text-muted); font-size: 12px; }
.bhead .ro-note, .ro-note { color: var(--yellow); font-size: 12px; }
.bhead.today, .bcell.today { background: color-mix(in srgb, var(--blue) 8%, transparent); }
.bhead.today { box-shadow: inset 0 -2px 0 var(--blue); }
.bhead.past { opacity: 0.7; }
.bcell { padding: 6px; display: flex; flex-direction: column; gap: 6px; min-height: 44px; }
.bcell.readonly { background-image: none; }
.bcell.readonly:not(.today) { opacity: 0.85; }
.bcell-unassigned { background: var(--bg); }
/* Week / Day toggle; the Day view: one day, a column per person (stops below the name). Computer only. */
.board-view-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.desk-day-chips { flex-wrap: wrap; }
.desk-day-chips a.today:not(.active) { border-color: var(--blue); }
.desk-day-chips small { color: var(--text-muted); margin-left: 4px; }
.board-day {
  display: grid; grid-template-columns: repeat(var(--cols, 1), minmax(200px, 1fr));
  min-width: calc(var(--cols, 1) * 200px);
}
.board-day > * { min-width: 0; border-right: 1px solid var(--border); }
.dcol-head { position: sticky; top: 0; z-index: 1; padding: 8px 10px; background: var(--bg-elevated-2); border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 2px; }
.dcol-head small { color: var(--text-muted); font-size: 12px; }
.dcol-head.dcol-empty { opacity: 0.75; }
.board-day .bcell { min-height: 120px; }
/* Day view: columns on the left, a narrow "No jobs today" list on the right (each name a drop target). */
.board-day-wrap { display: flex; gap: var(--sp-3); align-items: flex-start; }
.board-day-wrap > .board-scroll { flex: 1; min-width: 0; }
.day-side { flex: none; width: 170px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elevated); padding: var(--sp-2); }
.day-side h3 { margin: 0 0 var(--sp-2); font-size: 13px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.day-side-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.day-side-item { display: flex; flex-direction: column; padding: 4px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-elevated-2); font-size: 13px; }
.day-side-item[data-pick] { cursor: grab; }
.day-side-item.leader { font-weight: 600; }
.day-side-item small { color: var(--text-muted); font-size: var(--fs-xs); font-weight: 400; }
.day-side-item .crew-of-note { color: var(--blue-text); }
/* Unscheduled work: a visit tied to no stop (dashed edge, not draggable). */
.stop-unsched { border-left-style: dashed; cursor: pointer; }
.badge.unsched-tag { background: var(--bg-elevated); color: var(--text-muted); border: 1px solid var(--border); }
@media (max-width: 700px) { .board-day-wrap { display: none; } }
/* Visit on a stop card: crew on site now, or the done visit's in / out / total; $ = billable services logged. */
.stop-visit { font-size: 12px; color: var(--text-muted); }
.stop-visit.onsite, .onsite-text { color: var(--green-text); font-weight: 600; }
.stop.stop-onsite { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 55%, transparent); }
.onsite-dot { display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 50%; background: var(--green); vertical-align: 1px; animation: onsite-pulse 1.6s ease-in-out infinite; }
@keyframes onsite-pulse { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .onsite-dot { animation: none; } }
.stop-billable { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 4px;
  background: color-mix(in srgb, var(--green) 20%, transparent); color: var(--green-text); font-size: 12px; font-weight: 700; }
/* The visit in the stop panel (_dispatch_visit.html). */
.stop-visit-panel { margin: 10px 0; padding-top: 8px; border-top: 1px solid var(--border); }
.dvisit h4 { margin: 10px 0 4px; }
.dvisit-crew, .dvisit-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.dvisit-items li { display: flex; flex-direction: column; }
.dvisit-msg { padding: 6px 8px; border-radius: 6px; background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--green-text); }
.dvisit-msg.error { background: color-mix(in srgb, var(--red) 14%, transparent); color: var(--red-text); }
.dvisit-edit { margin-top: 10px; }
.dvisit-edit > summary { cursor: pointer; color: var(--blue-text); font-weight: 600; }
.dvisit-edit form { margin-top: 8px; }
.dvisit-edit fieldset { border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px; margin: 0; min-width: 0; }
.dvisit-edit input, .dvisit-edit select, .dvisit-edit textarea { width: 100%; min-width: 0; box-sizing: border-box; }
.dvisit-add-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.dvisit-links { margin-top: 10px; font-size: 13px; }
/* A collapsed person row: no stop cards, just the route names (cell-head) and a count of jobs not on a route. */
.cell-summary { display: none; font-size: 12px; color: var(--text-muted); }
.board-grid .bcell.collapsed .stop, .board-grid .bcell.collapsed .stop-unsched { display: none; }
.board-grid .bcell.collapsed .cell-summary { display: block; }
.board-grid .bcell.collapsed { min-height: 0; }
.row-collapse {
  width: auto; min-width: 0; margin: 0 4px 0 0; padding: 0 4px; border: 0; background: none; color: var(--text-muted);
  font-size: 13px; line-height: 1; cursor: pointer; vertical-align: middle;
}
.row-collapse span { display: inline-block; transition: transform 0.15s; }
.row-collapse[aria-expanded="false"] span { transform: rotate(-90deg); }
.crew-members { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.crew-of { font-size: 12px; color: var(--blue); padding: 2px 4px; }
.crew-of.faded { opacity: 0.5; }

.chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 8px;
  background: var(--bg-elevated-2); border: 1px solid var(--border); border-radius: 999px; font-size: 12px;
  cursor: grab; user-select: none; -webkit-user-select: none;
}
.chip.seasonal { border-style: dashed; }
.chip.faded { opacity: 0.45; cursor: default; }
.chip:not([data-pick]) { cursor: default; }
.chip .seasonal-tag { font-size: var(--fs-xs); color: var(--yellow); }
.chip-x { width: auto; min-width: 0; padding: 0 6px; border: 0; background: transparent; color: var(--text-muted); cursor: pointer; line-height: 1.4; }
.chip-x:hover { color: var(--red); }
.picked, .dragging { outline: 2px solid var(--blue); outline-offset: 1px; }
.dragging { opacity: 0.4; }
.drag-ghost { position: fixed; z-index: 1000; pointer-events: none; box-shadow: 0 4px 14px var(--shadow-strong); background: var(--bg-elevated-2); border: 1px solid var(--blue); border-radius: 8px; padding: 4px 8px; }
.picking .drop-ok { outline: 2px dashed var(--green); outline-offset: -2px; }
.picking .drop-hover, .drop-hover { background: color-mix(in srgb, var(--green) 15%, transparent); outline: 2px solid var(--green); outline-offset: -2px; }

.stop {
  border: 1px solid var(--border); border-left: 4px solid var(--border); border-radius: 8px;
  background: var(--bg-elevated-2); padding: 5px 7px; font-size: 12px; cursor: pointer; min-width: 0;
}
.stop:hover { border-color: var(--blue-dim); }
.stop:focus-visible { outline: 2px solid var(--blue); }
.stop-line { display: flex; gap: 6px; align-items: baseline; min-width: 0; }
.dstop-num { color: var(--text-muted); font-variant-numeric: tabular-nums; flex: none; }
.dstop-name { font-weight: 600; overflow-wrap: anywhere; flex: 1; min-width: 0; }
.stop-state.done { color: var(--green); flex: none; white-space: nowrap; }
.stop-svcs { color: var(--text-muted); margin-top: 2px; overflow-wrap: anywhere; }
.stop-svcs .retired, .detail-svcs .retired { text-decoration: line-through; }
.stop-done { border-color: color-mix(in srgb, var(--green) 40%, transparent); background: color-mix(in srgb, var(--green) 10%, transparent); }
.stop-skipped { opacity: 0.7; }
.stop-skipped .dstop-name { text-decoration: line-through; }
.stop-skip { color: var(--yellow); margin-top: 2px; }

.stop-panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(380px, 100vw); z-index: 900; overflow-y: auto;
  background: var(--bg-elevated); border-left: 1px solid var(--border); padding: 16px; box-shadow: -6px 0 24px var(--shadow-strong);
}
.stop-panel h3 { margin: 0 0 6px; font-size: 18px; }
.stop-panel h4 { margin: 14px 0 4px; font-size: 13px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.stop-panel-close { float: right; width: auto; }
.detail-svcs { margin: 0; padding-left: 18px; }
.detail-notes { white-space: pre-wrap; }
.done-text { color: var(--green); }

.dispatch-toast {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 1100; max-width: calc(100vw - 32px);
  display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--radius);
  background: var(--bg-elevated-2); border: 1px solid var(--border); box-shadow: 0 6px 24px var(--shadow-strong); font-size: 14px;
}
.dispatch-toast.error { border-color: var(--red); }
.dispatch-toast .toast-undo { width: auto; padding: 4px 12px; background: var(--blue-dim); border-color: var(--blue-dim); color: var(--on-accent); }
.dispatch-toast { flex-wrap: wrap; justify-content: center; }
.dispatch-toast .toast-actions { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.dispatch-toast .toast-actions:empty { display: none; }
.dispatch-toast .toast-action { width: auto; padding: 4px 12px; }

/* Stops: drag, Not done / rolled tags, the panel's actions and sheets. */
.stop[data-stop-drag] { cursor: grab; }
.stop-dragging [data-stop-drop] { outline: 2px dashed var(--green); outline-offset: -2px; }
.stop.drop-before { box-shadow: 0 -3px 0 0 var(--green); }
.bcell.drop-end { box-shadow: inset 0 -3px 0 0 var(--green); }
.stop-notdone { border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red); }
.stop-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.stop-tag { font-size: var(--fs-xs); font-weight: 600; }
.badge.notdone-tag { background: color-mix(in srgb, var(--red) 19%, transparent); color: var(--red-text); }
.badge.rolled-tag { background: color-mix(in srgb, var(--blue) 19%, transparent); color: var(--blue-text); }
.badge.not-done-tag { background: color-mix(in srgb, var(--red) 16%, transparent); color: var(--red-text); }
.badge.last-serviced-tag { background: var(--bg-elevated-2); color: var(--text-muted); border: 1px solid var(--border); }
/* Field Service: a crew leader hands one stop to someone else. Above the card's tap link. */
.stop-reassign { position: relative; z-index: 2; margin-top: 6px; }
.stop-reassign > summary { display: inline-block; cursor: pointer; color: var(--blue-text); font-size: 14px; font-weight: 600; padding: 4px 0; }
.stop-reassign form { margin-top: 6px; max-width: 360px; }
.stop-reassign select { width: 100%; min-width: 0; }
.other-day-note { margin: 8px 0 12px; }
.notdone-text { color: var(--red-text); }
.stop-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.stop-actions > * { width: auto; }
.stop-actions a.button-link { display: inline-flex; align-items: center; justify-content: center; }
.move-sheet, .skip-sheet { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.move-sheet label, .skip-sheet label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--text-muted); text-align: left; }
.move-sheet select, .move-sheet input, .skip-sheet input { width: 100%; min-width: 0; }
.move-sheet-row { display: flex; flex-wrap: wrap; gap: 8px; }
/* Mark complete (_dispatch_complete.html): a row per person (who / in / out / ✕), then the services. */
.complete-sheet { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.complete-sheet fieldset { border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px 8px; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.complete-sheet label:not(.checkbox-label) { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--text-muted); text-align: left; min-width: 0; }
.complete-sheet input:not([type="checkbox"]), .complete-sheet select, .complete-sheet textarea { width: 100%; min-width: 0; box-sizing: border-box; }
.complete-sheet .checkbox-label { color: var(--text); font-size: 14px; flex-wrap: wrap; }
.person-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: end; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.person-row > label:first-child { grid-column: 1 / -1; }
.person-row:last-child { border-bottom: 0; padding-bottom: 0; }
.person-row .person-x { grid-row: 1; grid-column: 2; }
.person-row:has(.person-x) > label:first-child { grid-column: 1; }
.person-row > label:nth-of-type(2), .person-row > label:nth-of-type(3) { grid-column: 1 / -1; }
.person-x { width: auto; min-width: 0; padding: 4px 10px; }
.complete-svc { display: flex; flex-direction: column; gap: 4px; }
.svc-extra { padding-left: 24px; }
.svc-extra > p { grid-column: 1 / -1; margin: 0; }
.dvisit-crew li { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dvisit-crew form { margin: 0; }
.move-sheet-row button { width: auto; }

@media (max-width: 700px) {
  .dispatch-desktop { display: none; }
  .dispatch-phone { display: block; }
  .day-chips { flex-wrap: nowrap; overflow-x: auto; margin-bottom: 10px; }
  .day-chips a { flex: none; }
  .day-chips a.today:not(.active) { border-color: var(--blue); }
  .day-panel h2 { font-size: 17px; margin: 4px 0 8px; }
  .leader-card { display: flex; flex-direction: column; gap: 8px; }
  .leader-card h3, .others-card h3 { margin: 0; font-size: 15px; }
  .leader-card select.add-person { width: 100%; }
  .chip { padding: 4px 4px 4px 10px; font-size: 14px; }
  .chip-x { padding: 4px 10px; }
  .others-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
  .others-list li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px; font-size: 14px; }
  .others-list li .stop { flex-basis: 100%; }
  .stop-panel { top: auto; width: 100vw; max-height: 75vh; border-left: 0; border-top: 1px solid var(--border); }
}
@media (min-width: 701px) {
  .board-grid [data-pick], .board-grid [data-stop-drag] { touch-action: none; }
  .day-panel { display: none; }
}

/* --- Thumb-sized targets (UX spec A1): 44px everywhere on phones, 48px for the
   main field actions, 16px text on field pages. Tick boxes, radios and file
   pickers keep their own size. --- */
@media (max-width: 700px) {
  button:not(.link-button),
  select,
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="range"]):not([type="color"]) {
    min-height: var(--tap);
  }

  a.button-link {
    min-height: var(--tap);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .field-page {
    font-size: var(--fs-md);
  }

  /* :is(button, a) keeps this ahead of the general button rule above. */
  .field-page :is(button, a):is(.big-button, .clock-in-btn, .clock-resume-btn, .clock-out-btn, .log-service-btn) {
    min-height: var(--tap-field);
  }

  /* Tick rows (Log Service services, "I'll fix it myself", "Need Reimbursement"):
     the whole label is the target. */
  .field-page label.checkbox-label,
  .stacked-form .service-picker label.checkbox-label {
    min-height: var(--tap);
    font-size: var(--fs-md);
  }
  .field-page label.checkbox-label input[type="checkbox"] {
    width: 20px;
    height: 20px;
    flex: none;
  }

  /* Top bar (every page) and the Field Service -> My Tickets link. */
  .page-menu summary {
    min-height: var(--tap);
  }
  .section-head .section-link {
    min-height: var(--tap);
    display: inline-flex;
    align-items: center;
  }
  .user-avatar {
    width: var(--tap);
    height: var(--tap);
  }
  .page-menu-panel a,
  .user-menu-panel a,
  .action-menu-panel a {
    min-height: var(--tap);
    display: flex;
    align-items: center;
  }
}

/* --- Shared UI pieces (templates/_ui.html, UX spec A2) --- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-4);
  margin: 0 0 var(--sp-3);
}

.page-header-text {
  min-width: 0;
}

/* Compact on purpose: the size of a section heading, not a banner. */
.page-header h1,
.field-page .page-header h1 {
  font-size: var(--fs-lg);
  margin: 0;
}

.page-header .subtitle {
  margin: var(--sp-1) 0 0;
}

.page-header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.badge.badge-ok { background: color-mix(in srgb, var(--green) 19%, transparent); color: var(--ok); }
.badge.badge-warn { background: color-mix(in srgb, var(--yellow) 19%, transparent); color: var(--warn); }
.badge.badge-danger { background: color-mix(in srgb, var(--red) 19%, transparent); color: var(--danger); }
.badge.badge-info { background: color-mix(in srgb, var(--blue) 19%, transparent); color: var(--info); }
.badge.badge-muted { background: color-mix(in srgb, var(--text-muted) 19%, transparent); color: var(--text-muted); }

.ui-field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  margin-bottom: var(--sp-3);
}

.ui-field .req { color: var(--danger); }
.field-help { color: var(--text-muted); font-size: var(--fs-sm); }
.field-error { color: var(--danger); font-size: var(--fs-sm); font-weight: 600; }
.ui-field.has-error input,
.ui-field.has-error textarea { border-color: var(--danger); }

.ui-empty {
  padding: var(--sp-5) var(--sp-4);
  text-align: center;
  color: var(--text-muted);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}

.ui-empty p { margin: 0 0 var(--sp-3); }

@media (max-width: 700px) {
  .page-header-actions { width: 100%; }
  .page-header-actions > * { flex: 1 1 auto; }
}

/* --- Photo picker (templates/_ui.html photo_picker, ui.js; UX spec E3) --- */
.photo-picker {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 0;
}

.photo-picker-label { font-weight: 600; }

/* ui.js took over: the plain input stays in the form (it's what gets sent) but out of sight. */
.photo-picker.is-enhanced .photo-picker-fallback { display: none; }

.photo-picker-buttons {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-2);
}

button.photo-pick-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--tap-field);
  padding: var(--sp-2) var(--sp-3);
  border: 2px dashed var(--blue);
  border-radius: var(--radius);
  background: var(--bg-elevated-2);
  color: var(--text);
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: 1.2;
}

button.photo-pick-btn:hover { background: var(--bg-elevated); border-color: var(--text-muted); }
.photo-pick-btn .ui-icon { width: 22px; height: 22px; flex: none; color: var(--blue); }
.photo-picker-big button.photo-pick-btn { min-height: 64px; }
.photo-picker.has-error button.photo-pick-btn { border-color: var(--danger); }

.photo-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.photo-thumbs:empty, .photo-picker-status:empty { display: none; }

.photo-thumb {
  position: relative;
  width: 96px;
  height: 96px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-elevated-2);
  overflow: hidden;
}

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

.photo-thumb.no-preview {
  display: flex;
  align-items: flex-end;
  padding: var(--sp-1) var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

/* One photo (a receipt): big enough to check it's readable. */
.photo-picker-single .photo-thumb { width: auto; height: auto; max-width: 100%; }
.photo-picker-single .photo-thumb img { max-height: 260px; width: auto; max-width: 100%; object-fit: contain; }

/* A 44px hit area in the corner with a smaller visible circle. */
button.photo-thumb-remove {
  position: absolute;
  top: 0;
  right: 0;
  width: var(--tap);
  height: var(--tap);
  min-height: var(--tap);
  padding: 4px;
  border: 0;
  background: transparent;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}

.photo-thumb-remove span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--scrim);
  color: var(--on-accent);
  font-size: var(--fs-sm);
  line-height: 1;
}

.photo-thumb-remove:hover span { background: var(--danger); }

.photo-picker-status { margin: 0; color: var(--text-muted); font-size: var(--fs-sm); }
.photo-picker .field-error, [data-inline-error] { margin: 0; }

/* --- Log Service steps + Finish bar (service_log.html; UX spec E3 + A4) --- */
.visit-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-1);
  margin: 0 0 var(--sp-4);
  padding: 0;
  counter-reset: step;
}

.visit-steps li { counter-increment: step; min-width: 0; }

.visit-steps a, .visit-steps span.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
  min-height: var(--tap);
  padding: var(--sp-1) 2px;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
}

.visit-steps a::before, .visit-steps span.step::before {
  content: counter(step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--bg-elevated);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.visit-steps li.done a::before, .visit-steps li.done span.step::before {
  content: "✓";
  border-color: var(--green);
  background: var(--green);
  color: var(--on-bright);
}

.visit-steps li.current a, .visit-steps li.current span.step { color: var(--text); font-weight: 700; }
.visit-steps li.current a::before { border-color: var(--blue); color: var(--blue); }

.service-picker.has-error, .salt-qty.has-error input, .has-error > input { border-color: var(--danger); }
.service-picker > [data-inline-error] { padding: var(--sp-2) var(--sp-3) 0; }
.salt-qty[data-inline-host] { flex-wrap: wrap; }
.salt-qty > [data-inline-error] { flex-basis: 100%; }

#step-before, #step-services, #step-finish { scroll-margin-top: 80px; }
.visit-steps li.optional a::before { border-style: dashed; }

.finish-bar {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.finish-bar-count { color: var(--text-muted); font-size: var(--fs-sm); text-align: center; }
.finish-bar-count strong { color: var(--text); }
.finish-bar [data-finish-msg] { text-align: center; }

/* Phones: Finish stays on screen at the bottom while the form is in view. */
@media (max-width: 700px) {
  .finish-bar {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin: var(--sp-2) -16px 0;
    padding: var(--sp-2) 16px calc(var(--sp-2) + env(safe-area-inset-bottom, 0px));
    background: var(--bg-elevated);
    border-top: 1px solid var(--border);
    box-shadow: 0 -6px 16px var(--shadow-strong);
  }
}

/* --- Storm banner (templates/_storm_banner.html; UX spec C4): under the top bar on staff
   pages, at the top of Field Service for crew, only while an event is open. --- */
.storm-banner {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--tap);
  padding: var(--sp-2) 24px;
  background: color-mix(in srgb, var(--blue) 12%, transparent);
  border-bottom: 1px solid var(--blue-dim);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
}

.storm-banner-active_ops { background: color-mix(in srgb, var(--green) 12%, transparent); border-bottom-color: color-mix(in srgb, var(--green) 40%, transparent); }
.storm-banner-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.storm-banner-go { color: var(--blue); font-size: var(--fs-md); }
a.storm-banner:hover { background: color-mix(in srgb, var(--blue) 20%, transparent); }

/* Inside Field Service it's a card, not a full-width strip. */
.field-page .storm-banner {
  margin: 0 0 var(--sp-4);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--blue-dim);
  border-radius: var(--radius);
  font-size: var(--fs-md);
}

.field-page .storm-banner-active_ops { border-color: color-mix(in srgb, var(--green) 40%, transparent); }

/* --- Field Service: More menu label, "See all" link, Working on switch (UX spec B2, C3, E2) --- */
.action-menu-label { font-weight: 700; font-size: var(--fs-md); }

.section-head .section-link { font-size: var(--fs-sm); white-space: nowrap; }

/* Working on: a group at the bottom of the More menu, plus a quiet label on the Sites heading. */
.action-menu-group {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}

.action-menu-heading {
  padding: 6px 12px 4px;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.action-menu-panel a.mode-option { justify-content: space-between; }
.action-menu-panel a.mode-option.active { color: var(--blue); font-weight: 700; }
.mode-check { font-weight: 700; }

.section-heading-mode {
  color: var(--text-muted);
}

/* --- Whole-card tap targets (UX spec E5): the card's title link stretches over the card;
   the buttons, links and salt box inside sit on top of it. --- */
.card-tap { position: relative; }
.card-tap a.card-tap-link { color: var(--text); text-decoration: none; }
.card-tap a.card-tap-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card-tap a.card-tap-link:focus-visible { outline: none; }
.card-tap:has(a.card-tap-link:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; }
.card-tap .ticket-card-meta a,
.card-tap .site-actions,
.card-tap .salt-me { position: relative; z-index: 1; }
.card-tap:hover { border-color: var(--blue-dim); }

@media (max-width: 700px) {
  .storm-banner { padding-left: 16px; padding-right: 16px; }
  .field-page .ticket-card-title { font-size: var(--fs-md); }
  .field-page .ticket-card-meta { font-size: var(--fs-sm); }
  .field-page .ticket-card { min-height: var(--tap-field); }
}

/* Login: the app name under the logo (UX spec B1). */
.login-card h1.login-app-name { margin: var(--sp-2) 0 var(--sp-4); font-size: var(--fs-lg); letter-spacing: 0.04em; text-align: center; }

/* --- "Install the app" card (templates/_install_hint.html, static/js/install_hint.js) --- */
.install-hint {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  padding-right: 44px;
  border-color: var(--blue-dim);
  background: color-mix(in srgb, var(--blue) 10%, var(--bg-elevated));
}
.install-hint-icon { flex: none; border-radius: 9px; }
.install-hint-body { min-width: 0; font-size: var(--fs-sm); }
.install-hint-body p { margin: 4px 0 0; color: var(--text-muted); }
.install-hint-body p strong { color: var(--text); }
.install-hint-share { white-space: nowrap; color: var(--text); font-weight: 600; }
.install-hint-share svg { vertical-align: -2px; }
.install-hint-btn { margin-top: var(--sp-2); width: auto; background: var(--blue-dim); border-color: var(--blue-dim); color: var(--on-accent); }
.install-hint-close {
  position: absolute; top: 4px; right: 4px; width: 40px; height: 40px; padding: 0;
  background: none; border: none; color: var(--text-muted); font-size: 16px;
}

/* Notifications card + page (templates/_push_card.html, notifications.html, static/js/push.js) reuse the install card look. */
.push-card .install-hint-body p { max-width: 60ch; }
.notif-card { max-width: 640px; }
.notif-state { font-size: var(--fs-md); }
.notif-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-3) 0; }

/* --- Installed app (PWA): viewport-fit=cover lets the page run under the iPhone notch /
   status bar and home indicator. Every inset is 0 in a normal browser tab. --- */
body {
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}
/* A fixed strip under the status bar, so scrolled content never sits behind the clock. */
body::before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0;
  height: env(safe-area-inset-top, 0px);
  background: var(--bg-elevated);
  z-index: 1200;
  pointer-events: none;
}
.topbar { padding-top: calc(14px + env(safe-area-inset-top, 0px)); }
/* Pages with no top bar (login, verify, offline) start below the status bar too. */
body > .container:first-child { padding-top: calc(18px + env(safe-area-inset-top, 0px)); }
.container { padding-bottom: calc(48px + env(safe-area-inset-bottom, 0px)); }
.map-viewer {
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
           env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}
.stop-panel {
  padding-top: calc(16px + env(safe-area-inset-top, 0px));
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  padding-left: calc(16px + env(safe-area-inset-left, 0px));
  padding-right: calc(16px + env(safe-area-inset-right, 0px));
}
.dispatch-toast { bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 700px) {
  .topbar { padding-top: calc(10px + env(safe-area-inset-top, 0px)); }
  body > .container:first-child { padding-top: calc(14px + env(safe-area-inset-top, 0px)); }
  .container { padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)); }
}

/* --- Job Applications (Operations > Job Applications; public /apply/<token>) --- */
.badge.app-badge.app-new { background: color-mix(in srgb, var(--blue) 19%, transparent); color: var(--blue-text); }
.badge.app-badge.app-contacted { background: color-mix(in srgb, var(--yellow) 19%, transparent); color: var(--yellow); }
.badge.app-badge.app-interview_scheduled { background: color-mix(in srgb, var(--orange) 19%, transparent); color: var(--orange-text); }
.badge.app-badge.app-interviewed { background: color-mix(in srgb, var(--slate) 19%, transparent); color: var(--slate-text); }
.badge.app-badge.app-hired { background: color-mix(in srgb, var(--green) 19%, transparent); color: var(--green-text); }
.badge.app-badge.app-declined { background: color-mix(in srgb, var(--text-muted) 19%, transparent); color: var(--text-muted); }
.badge.app-badge.app-not_hired { background: color-mix(in srgb, var(--red) 19%, transparent); color: var(--red-text); }
.badge.app-badge.app-sent { background: color-mix(in srgb, var(--text-muted) 19%, transparent); color: var(--text-muted); }
.app-new-row td:first-child { border-left: 3px solid var(--blue); }

.app-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 170px));
  gap: var(--sp-3);
  align-items: end;
}
.app-filters label { display: flex; flex-direction: column; gap: var(--sp-1); font-size: var(--fs-sm); color: var(--text-muted); min-width: 0; }
.app-filters label.checkbox-label { flex-direction: row; align-items: center; color: var(--text); }
.app-filters input[type="search"], .app-filters input[type="date"], .app-filters select { width: 100%; min-width: 0; }
.app-filter-actions { display: flex; gap: var(--sp-2); align-items: center; }

.app-detail-layout, .app-builder-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.app-answers { margin: var(--sp-3) 0 0; }
.app-answers dt { color: var(--text-muted); font-size: var(--fs-sm); margin-top: var(--sp-3); }
.app-answers dd { margin: 2px 0 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.app-status-form { display: grid; gap: var(--sp-3); }
.app-status-form label, .app-field-form label, .app-form-settings label, .app-new-form label, .app-hire-form .form-grid label {
  display: flex; flex-direction: column; gap: var(--sp-1); font-size: var(--fs-sm); color: var(--text-muted); min-width: 0;
}
.app-status-form input, .app-status-form select, .app-field-form input[type="text"], .app-field-form select, .app-field-form textarea,
.app-form-settings input[type="text"], .app-form-settings textarea, .app-new-form input, .app-new-form select,
.app-hire-form input[type="text"], .app-hire-form input[type="tel"], .app-hire-form input[type="email"], .app-hire-form select { width: 100%; min-width: 0; }
.app-field-form, .app-form-settings, .app-new-form { display: grid; gap: var(--sp-3); }
.app-field-form label.checkbox-label, .app-form-settings label.checkbox-label { flex-direction: row; align-items: center; color: var(--text); }
.app-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin-top: var(--sp-4); }
.app-actions form { margin: 0; }
.app-hire-btn { background: var(--green); color: var(--on-bright); border-color: var(--green); }
.app-history { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.app-history li { border-left: 2px solid var(--border); padding-left: var(--sp-3); }
.app-existing { border-color: var(--yellow); }
.app-warning { border-left: 3px solid var(--yellow); padding-left: var(--sp-3); }
.app-test-link { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; margin-top: var(--sp-3); }
.app-field-row { border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-2) var(--sp-3); margin-bottom: 6px; background: var(--bg-subtle); }
.app-field-row > summary { display: flex; align-items: center; gap: var(--sp-2); cursor: pointer; list-style: none; flex-wrap: wrap; min-height: var(--tap); }
.app-field-row > summary::-webkit-details-marker { display: none; }
.app-field-row[open] > summary { margin-bottom: var(--sp-3); }
.app-field-title { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.app-fields.reorder-saved { outline: 1px solid var(--green); }
.app-fields.reorder-failed { outline: 1px solid var(--red); }
.app-field-row.dragging { opacity: 0.85; outline: 1px dashed var(--blue); }
.app-preview { position: sticky; top: var(--sp-4); }

/* The page the applicant sees: a centered card, phone first. */
.apply-page { display: flex; justify-content: center; min-height: 100vh; }
.apply-card {
  width: 100%; max-width: 560px; min-width: 0;
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--sp-5); align-self: flex-start;
}
.apply-card img.logo { height: 40px; width: auto; margin-bottom: var(--sp-4); }
.apply-card h1 { font-size: var(--fs-lg); margin: 0 0 var(--sp-2); }
.apply-intro { color: var(--text-muted); margin: 0 0 var(--sp-4); overflow-wrap: anywhere; white-space: pre-line; }
.apply-form { display: grid; gap: var(--sp-4); }
.apply-q { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.apply-q > label, .apply-q legend { font-weight: 600; font-size: var(--fs-md); padding: 0; }
.apply-q input:not([type="radio"]):not([type="checkbox"]), .apply-q textarea { width: 100%; min-width: 0; font-size: var(--fs-md); padding: 12px; }
.apply-q input.apply-locked { opacity: 0.75; }
.apply-q .req { color: var(--red-text); }
.apply-choices { border: none; margin: 0; padding: 0; min-width: 0; display: grid; gap: var(--sp-2); }
.apply-choice { display: flex; align-items: center; gap: var(--sp-3); min-height: var(--tap); padding: 0 var(--sp-3); border: 1px solid var(--border); border-radius: 8px; background: var(--bg-elevated-2); font-weight: 400; cursor: pointer; }
.apply-choice input { width: 20px; height: 20px; margin: 0; flex: none; }
.apply-q.has-error input:not([type="radio"]):not([type="checkbox"]), .apply-q.has-error textarea, .apply-q.has-error .apply-choice { border-color: var(--red); }
.apply-error { color: var(--red-text); font-size: var(--fs-sm); }
.apply-help, .apply-fine { color: var(--text-muted); font-size: var(--fs-sm); margin: 0; }
.apply-alert { background: color-mix(in srgb, var(--red) 19%, transparent); color: var(--red-text); border: 1px solid var(--red); border-radius: 8px; padding: var(--sp-3); margin-bottom: var(--sp-4); }
.apply-submit { width: 100%; min-height: var(--tap-field); font-size: var(--fs-md); }
.apply-card-preview { max-width: none; padding: var(--sp-3); background: var(--bg-subtle); }
.apply-preview-title { margin: 0 0 var(--sp-2); font-size: var(--fs-md); }

@media (max-width: 900px) {
  .app-detail-layout, .app-builder-layout { grid-template-columns: minmax(0, 1fr); }
  .app-preview { position: static; }
}
@media (max-width: 700px) {
  .apply-page { padding-left: 16px; padding-right: 16px; }
  .apply-card { padding: var(--sp-4); }
  .app-filters { grid-template-columns: minmax(0, 1fr); }
  .app-actions > *, .app-actions button { width: 100%; text-align: center; }
}

.page-header-actions.app-header-actions > * { flex: 0 0 auto; }
.app-filters-note { margin: 0; }

.badge.app-badge.app-resume { background: color-mix(in srgb, var(--blue) 19%, transparent); color: var(--blue-text); }
.app-interview-line { font-size: var(--fs-sm); color: var(--text-muted); margin-top: var(--sp-1); }
.app-upcoming { border-left: 3px solid var(--orange); }
.app-upcoming-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1); }
.app-upcoming-list li { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); justify-content: space-between; padding: var(--sp-1) var(--sp-2); border-radius: 6px; min-width: 0; }
.app-upcoming-list li.app-today { background: color-mix(in srgb, var(--orange) 19%, transparent); font-weight: 600; }
.app-upcoming-list a { overflow-wrap: anywhere; }
.app-when { color: var(--text); font-size: var(--fs-sm); }
.app-sub { font-size: var(--fs-sm); margin: var(--sp-4) 0 var(--sp-2); color: var(--text-muted); }
.app-ask { display: grid; gap: var(--sp-2); }
.app-ask-box, .app-hire-text { border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-2) var(--sp-3); background: var(--bg-subtle); }
.app-ask-box > summary, .app-hire-text > summary { cursor: pointer; font-weight: 600; min-height: var(--tap); display: flex; align-items: center; }
.app-ask-box textarea, .app-hire-text textarea, .app-schedule textarea, .app-schedule input[type="datetime-local"] { width: 100%; min-width: 0; margin-top: var(--sp-2); }
.app-schedule { display: grid; gap: var(--sp-3); }
.app-schedule label { display: flex; flex-direction: column; gap: var(--sp-1); font-size: var(--fs-sm); color: var(--text-muted); }
.app-schedule label.checkbox-label { flex-direction: row; align-items: center; color: var(--text); }
.app-radio-row { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.app-resume-name { overflow-wrap: anywhere; margin: 0 0 var(--sp-2); }

.app-awaiting-head { margin-top: var(--sp-4); }

.app-detail-layout textarea { width: 100%; min-width: 0; }

/* The applicant's text thread on their application page (same bubbles as Comms). */
.app-texts .comms-messages { max-height: 420px; margin: var(--sp-3) 0; }
.app-texts .comms-bubble { max-width: 85%; }
.app-texts .comms-reply-form { flex-direction: column; align-items: stretch; }
.app-texts .comms-reply-form button { align-self: flex-end; }
.app-texts-foot { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); justify-content: space-between; align-items: center; }

/* --- Shop Inventory (Equipment Log) --- */
.badge.inv-badge { font-size: var(--fs-xs); }
.badge.inv-low { background: color-mix(in srgb, var(--yellow) 19%, transparent); color: var(--yellow); }
.badge.inv-out { background: color-mix(in srgb, var(--red) 19%, transparent); color: var(--red-text); }
.badge.inv-count { background: color-mix(in srgb, var(--orange) 19%, transparent); color: var(--orange-text); }
.inv-low-card { border-left: 3px solid var(--red); }
.inv-quick { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin: 0; min-width: 0; }
.inv-quick input[type="number"] { width: 5.5em; min-width: 0; }
.inv-quick input[type="text"] { flex: 1 1 10em; min-width: 0; }
.inv-add-type { margin-top: var(--sp-3); }
.inv-filters { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 14em); gap: var(--sp-2); margin-bottom: var(--sp-3); }
.inv-filters input, .inv-filters select { width: 100%; min-width: 0; }
.inv-group-title { font-size: var(--fs-md); margin: var(--sp-4) 0 var(--sp-2); color: var(--text-muted); }
.inv-total { margin: 0 0 var(--sp-3); }
.inv-onhand { font-size: var(--fs-lg); margin: var(--sp-2) 0; }
.inv-onhand strong { font-size: var(--fs-xl); }
.inv-price { margin: var(--sp-1) 0; }
.inv-warning { color: var(--orange-text); margin: var(--sp-2) 0 0; }
.inv-price-row, .inv-qty-row { display: flex; gap: var(--sp-2); align-items: center; min-width: 0; }
.inv-price-row input, .inv-qty-row input { flex: 1 1 6em; min-width: 0; }
.inv-unit-fixed { color: var(--text-muted); font-size: var(--fs-sm); }
.inv-recount { margin-top: var(--sp-3); }
.inv-removed { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
@media (max-width: 700px) {
  .inv-filters { grid-template-columns: minmax(0, 1fr); }
}

/* Parts & fluids picker and panels */
.parts-editor { display: grid; gap: var(--sp-2); min-width: 0; }
.parts-rows { display: grid; gap: var(--sp-2); }
.parts-row { display: grid; gap: var(--sp-2); min-width: 0; padding-bottom: var(--sp-2); border-bottom: 1px solid var(--border); }
.parts-pick, .parts-amt { display: flex; gap: var(--sp-2); align-items: center; min-width: 0; }
.parts-row input, .parts-row select { width: 100%; min-width: 0; }
.parts-pick .parts-search { flex: 1 1 30%; }
.parts-pick select { flex: 2 1 60%; }
.parts-amt input[name="part_qty"] { flex: 0 0 6em; width: 6em; }
.parts-amt select[name="part_unit"] { flex: 0 0 8em; width: 8em; }
.parts-amt .parts-cost { flex: 1 1 auto; }
.parts-amt .parts-remove { flex: none; margin-left: auto; }
.parts-cost { font-size: var(--fs-sm); color: var(--text-muted); white-space: nowrap; min-width: 4em; text-align: right; }
.parts-foot { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; justify-content: space-between; }
.parts-panel { border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-2); background: var(--bg-subtle); min-width: 0; }
.parts-panel > summary { cursor: pointer; min-height: var(--tap); display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.parts-also { border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-2) var(--sp-3); min-width: 0; }
.parts-also legend { padding: 0 var(--sp-1); font-weight: 600; }
@media (max-width: 700px) {
  /* Item picker on its own full-width lines; qty, unit, cost and remove share the next one. */
  .parts-pick { flex-wrap: wrap; }
  .parts-pick .parts-search, .parts-pick select { flex: 1 1 100%; }
  .parts-amt input[name="part_qty"] { flex: 1 1 4.5em; width: auto; }
  .parts-amt select[name="part_unit"] { flex: 1 1 6em; width: auto; }
  .parts-amt .parts-cost { text-align: left; min-width: 0; flex: 0 1 auto; }
}

/* Cost of Ownership card (machine page) */
.cost-total { margin: var(--sp-2) 0; font-size: var(--fs-lg); }
.cost-total strong { font-size: var(--fs-xl); }
.cost-lines { margin: 0 0 var(--sp-3); display: grid; gap: var(--sp-1); }
.cost-lines > div { display: flex; justify-content: space-between; gap: var(--sp-3); border-bottom: 1px solid var(--border); padding: var(--sp-1) 0; min-width: 0; }
.cost-lines dt { color: var(--text-muted); }
.cost-lines dd { margin: 0; font-variant-numeric: tabular-nums; }
.cost-average { margin: var(--sp-2) 0; }
.cost-by-year, .cost-add { border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-2) var(--sp-3); margin: var(--sp-3) 0; background: var(--bg-subtle); min-width: 0; }
.cost-by-year > summary, .cost-add > summary { cursor: pointer; min-height: var(--tap); display: flex; align-items: center; font-weight: 600; }
.cost-card table input, .cost-card table select { width: 100%; min-width: 0; }
@media (max-width: 900px) {
  /* Single-column layout: Cost of ownership comes right under the header, ahead of the left column. */
  .unit-grid { grid-template-columns: minmax(0, 1fr); }
  .unit-grid > div:last-child { display: contents; }
  /* display: contents makes these grid items, but `.grid > *` no longer matches them. */
  .unit-grid > div:last-child > * { min-width: 0; }
  .unit-grid .cost-card { order: -1; }
}

/* Registration form: the extra cost field wraps instead of pushing the card wider than a phone. */
#registration .inline-label { flex-wrap: wrap; max-width: 100%; min-width: 0; }
#registration .inline-label input { flex: 1 1 8em; width: auto; min-width: 0; }
/* "Also attach to..." checkboxes: one size, never squeezed by long names. */
.parts-also .checkbox-label { align-items: flex-start; }
.parts-also input[type="checkbox"] { flex: none; width: 1.1em; height: 1.1em; margin-top: 0.2em; }
/* Low Inventory quick Receive: qty, unit and button stay on one line. */
.inv-receive { flex-wrap: nowrap; }
.inv-receive input[type="number"] { flex: 0 0 5em; width: 5em; }
.inv-receive select { flex: 0 0 auto; width: auto; min-width: 0; }
.inv-receive button { flex: none; }
/* Inventory list: every type group shares one column layout so the columns line up. */
@media (min-width: 701px) {
  .inv-group table { table-layout: fixed; width: 100%; }
  .inv-group th.c-name { width: 30%; } .inv-group th.c-part { width: 16%; } .inv-group th.c-qty { width: 12%; }
  .inv-group th.c-alert { width: 11%; } .inv-group th.c-cost { width: 11%; } .inv-group th.c-value { width: 12%; }
  .inv-group th.c-loc { width: 14%; }
  .inv-group td { overflow-wrap: anywhere; }
}
.history-parts { margin-top: var(--sp-1); }
/* Machine page header: the text block may shrink beside the photo instead of pushing past a phone's edge. */
.unit-header > div { min-width: 0; flex: 1 1 0; }
.unit-header .log-maint-btn { max-width: 100%; }
.unit-status-row > * { min-width: 0; max-width: 100%; }

/* Accounting > Reports and the Equipment Insurance Report. */
.report-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: var(--sp-4); }
.report-card { margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); min-width: 0; }
.report-card .section-heading { margin: 0; }
.report-controls { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.report-filters { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); align-items: flex-start; }
.report-filters fieldset { border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-2) var(--sp-3); margin: 0; min-width: 0; flex: 1 1 100%; }
.report-filters legend { font-size: var(--fs-xs); color: var(--text-muted); padding: 0 var(--sp-1); }
.report-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: var(--sp-1) var(--sp-3); }
.report-filters .checkbox-label input { flex: none; }
.report-actions, .report-edit-bar { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.report-edit-bar { margin: var(--sp-3) 0; }
.report-sheet { min-width: 0; }
.report-header { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-3); flex-wrap: wrap; }
.report-logo { height: 44px; width: auto; }
.report-header h1 { margin: 0 0 3px; }
.report-note { margin: 0 0 var(--sp-3); }
.report-summary { margin-bottom: var(--sp-5); }
.report-totals { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); margin: 0 0 var(--sp-3); }
.report-totals > div { min-width: 0; }
.report-totals dt { font-size: var(--fs-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.report-totals dd { margin: 0; font-size: var(--fs-lg); font-weight: 600; font-variant-numeric: tabular-nums; }
.report-section { margin-bottom: var(--sp-5); }
.report-subheading { font-size: var(--fs-sm); margin: var(--sp-3) 0 0; color: var(--text-muted); }
.report-table td, .report-table th { vertical-align: top; }
.report-table .num, .report-summary-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.report-subtotal td { font-weight: 600; border-top: 2px solid var(--border); border-bottom: none; }
.report-subrow td { border-bottom: none; padding-bottom: 0; }
.report-missing, .report-asof, .report-tag { display: block; font-size: var(--fs-xs); color: var(--text-muted); }
.report-missing { color: var(--orange-text); }
.report-tag { display: inline; border: 1px solid var(--border); border-radius: 4px; padding: 0 4px; }
.report-error { display: block; font-size: var(--fs-xs); color: var(--red-text); }
.report-table td input { width: 100%; min-width: 0; text-align: right; }
.report-table td input.invalid { border-color: var(--red); }
@media (max-width: 700px) {
  .report-table .num, .report-summary-table .num { text-align: left; }
  .report-table td input { text-align: left; }
  table.stack-mobile.report-table .report-subrow { padding-bottom: 0; }
}

/* --- Site page Jobs card + job form --------------------------------------------- */
.badge.one-time-tag { background: color-mix(in srgb, var(--orange) 19%, transparent); color: var(--orange-text); font-size: var(--fs-xs); font-weight: 600; }
.jobs-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; }
.job-item { border-top: 1px solid var(--border); padding: 12px 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.job-item:first-of-type { border-top: 0; }
.job-item-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.job-repeat { overflow-wrap: anywhere; }
.job-svcs { overflow-wrap: anywhere; }
.job-svc.retired { text-decoration: line-through; color: var(--text-muted); }
.job-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px 12px; margin: 0; font-size: 14px; }
.job-facts dt { color: var(--text-muted); }
.job-facts dd { margin: 0; overflow-wrap: anywhere; }
.job-actions-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; }
.job-actions-row form.inline { display: inline-block; margin: 0; }
/* Edit / Skip next / Resume / End: one row of equal-height small buttons (a link, a summary and buttons alike). */
.job-actions-row .job-act, .job-skip summary {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; width: auto; min-height: 34px;
  margin: 0; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-elevated-2);
  color: var(--text); font: inherit; font-size: 13px; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer;
}
.job-actions-row .job-act.danger-act { border-color: color-mix(in srgb, var(--red) 55%, transparent); background: color-mix(in srgb, var(--red) 12%, transparent); color: var(--red-text); }
.job-skip summary { list-style: none; }
.job-skip summary::-webkit-details-marker { display: none; }
@media (max-width: 700px) {
  .job-actions-row .job-act, .job-skip summary { min-height: var(--tap); }
}
.job-skip[open] { flex-basis: 100%; }
.ended-jobs { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 8px; }
.ended-jobs > summary { cursor: pointer; color: var(--text-muted); }
.job-ended { opacity: 0.8; }
.job-form .job-svc-row, .ticket-form label.job-svc-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 150px); gap: 10px; align-items: center; text-align: left; }
.job-svc-row .job-svc-name { overflow-wrap: anywhere; text-align: left; }
.job-svc-row select { width: 100%; min-width: 0; }

/* --- Routes on the Dispatch Board, the route editor, Jobs & Routes overview ------------------ */
.cell-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; }
.route-label {
  display: inline-flex; align-items: center; gap: 5px; width: auto; max-width: 100%; min-width: 0; padding: 2px 8px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--bg-elevated-2); color: var(--text);
  font-size: 12px; font-weight: 600; cursor: pointer;
}
.route-label:hover { border-color: var(--blue-dim); }
.route-label .route-label-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.route-label small { color: var(--text-muted); font-weight: 400; font-size: var(--fs-xs); }
.cell-menu-btn {
  width: auto; min-width: 28px; margin-left: auto; padding: 0 8px; line-height: 1.5; border: 1px solid transparent;
  background: transparent; color: var(--text-muted); font-size: 16px; cursor: pointer;
}
.cell-menu-btn:hover { color: var(--text); border-color: var(--border); }
.leader-card h3 .cell-menu-btn, .others-list .cell-menu-btn { margin-left: 8px; }
.route-sheet .field-label { font-size: 12px; color: var(--text-muted); }
.route-sheet label.chip-toggle, .route-form label.chip-toggle { display: inline-block; flex-direction: row; position: relative; }
.route-sheet .chip-row, .route-form .chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.route-check { display: flex !important; flex-direction: row !important; align-items: center; gap: 8px; color: var(--text); font-size: 14px; text-align: left; }
.route-check input[type="checkbox"] { flex: none; width: 1.1em; height: 1.1em; }
.route-color { width: 64px; height: 36px; padding: 2px; }
.sheet-error { color: var(--red-text); font-size: 13px; padding: 8px 10px; border: 1px solid var(--red); border-radius: 8px; background: color-mix(in srgb, var(--red) 10%, transparent); overflow-wrap: anywhere; }
.route-editor { min-width: 0; }
.route-editor h3 { margin: 16px 0 6px; font-size: 15px; }
.route-editor-title { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 18px; overflow-wrap: anywhere; }
.route-form { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; max-width: 520px; }
.route-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--text-muted); text-align: left; }
.route-form input[type="text"], .route-form select { width: 100%; min-width: 0; }
.route-form .field-label { font-size: 12px; color: var(--text-muted); }
.route-form button[type="submit"] { width: auto; align-self: flex-start; }
.route-jobs li { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; }
.route-jobs .stop-name { flex: 1 1 12em; min-width: 0; display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.route-jobs .stop-name > .badge, .route-jobs .stop-name > form { align-self: flex-start; }
.route-job-actions { display: inline-flex; gap: 4px; flex: none; }
.route-job-actions form.inline { margin: 0; display: inline-block; }
.route-arrow { width: auto; min-width: 34px; padding: 4px 8px; }
.route-page { max-width: 760px; }
.jobs-filter { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 200px)); gap: 10px 14px; align-items: end; margin-bottom: 12px; }
.jobs-filter label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--text-muted); }
.jobs-filter select { width: 100%; min-width: 0; }
.jobs-filter-actions { display: flex; gap: 8px; align-items: center; }
.jobs-filter-actions button { width: auto; }
tr.job-ended td { opacity: 0.75; }
.template-item { border-top: 1px solid var(--border); padding: 12px 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.template-item:first-of-type { border-top: 0; }
.template-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.template-edit > summary { list-style: none; cursor: pointer; display: inline-flex; width: auto; min-height: 34px; align-items: center; padding: 6px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-elevated-2); font-size: 13px; font-weight: 600; }
.template-edit > summary::-webkit-details-marker { display: none; }
.template-edit[open] > summary { margin-bottom: 8px; }
.template-edit .route-form { padding-bottom: 8px; }
.template-edit .job-svc-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 150px); gap: 10px; align-items: center; }
@media (max-width: 700px) {
  .cell-menu-btn { min-height: var(--tap); min-width: var(--tap); }
  .route-label { min-height: 34px; font-size: 13px; }
  .route-arrow { min-height: var(--tap); min-width: var(--tap); }
  .template-edit > summary { min-height: var(--tap); }
}
.job-svc-missing { opacity: 0.55; }
.job-errors ul { margin: 6px 0 0; padding-left: 20px; }
.job-confirm { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.job-template-pick { margin-bottom: 12px; max-width: 420px; }
.quick-days { margin: 6px 0 10px; }
.job-warning.job-preview { color: var(--yellow); }

/* Print / PDF (the report's Print button): black on white whatever the theme, no app chrome, landscape-friendly.
   Named colors only; the tokens are overridden so everything that reads them goes black on white. */
/* Named page: only the report prints landscape; other pages keep the browser default. */
@page report { size: landscape; margin: 12mm; }
@media print {
  :root, :root[data-theme="light"], :root[data-theme="dark"] {
    --bg: white; --bg-elevated: white; --bg-elevated-2: white; --bg-subtle: white;
    --border: gray; --text: black; --text-strong: black; --text-muted: black;
    --blue-text: black; --green-text: black; --red-text: black; --orange-text: black; --slate-text: black;
    color-scheme: light;
  }
  body, .container { background: var(--bg); color: var(--text); }
  .report-sheet { page: report; }
  body::before { display: none; }
  .topbar, .storm-banner, .eq-tabs, .no-print, .flash, .install-hint, .map-viewer, .stop-panel { display: none !important; }
  .container { padding: 0; max-width: none; }
  .report-sheet table { font-size: 12px; }
  .report-sheet thead { display: table-header-group; }
  .report-sheet tr { break-inside: avoid; }
  .report-sheet h1, .report-sheet h2, .report-sheet h3 { break-inside: avoid; break-after: avoid; }
  .report-sheet a { color: var(--text); text-decoration: none; }
  .report-sheet .badge { border: 1px solid var(--text); background: var(--bg); color: var(--text); }
  .report-section { margin-bottom: 12px; }
  .report-missing { display: none; }
  .report-sheet.show-flags .report-missing { display: block; }
  .report-asof, .report-tag { color: var(--text); }
}

/* Field Service: Today's route (the person's Dispatch Board row for today). */
.today-route-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; margin: 0 0 10px; }
.today-route-head .text-note { margin: 0; }
.today-route-head a.button-link { width: auto; }
.today-route .stop-num { flex: none; }
.today-route .stop-num-done { background: var(--green); color: var(--on-bright); }
.today-route .stop-num-skip { background: var(--border); color: var(--text-muted); }
.ticket-card.stop-next { box-shadow: inset 0 0 0 1px var(--blue); }
.ticket-card.stop-skipped .ticket-card-title { color: var(--text-muted); }
.today-route .stop-tags { margin-top: 6px; }
/* Swipe a stop: left = Skip (red), right = Move to the next business day (blue). stop_swipe.js. */
.stop-swipe { position: relative; border-radius: var(--radius); }
.stop-swipe > .ticket-card { position: relative; touch-action: pan-y; transition: transform 0.2s ease; }
.stop-swipe.swiping > .ticket-card { transition: none; }
.stop-swipe-act { position: absolute; inset: 0; display: none; align-items: center; padding: 0 18px; border-radius: var(--radius); font-weight: 700; color: var(--on-accent); opacity: 0.75; }
.stop-swipe-move { justify-content: flex-start; background: var(--blue-dim); }
.stop-swipe-skip { justify-content: flex-end; background: var(--red); }
.stop-swipe.swipe-right .stop-swipe-move, .stop-swipe.swipe-left .stop-swipe-skip { display: flex; }
.stop-swipe.swipe-armed .stop-swipe-act { opacity: 1; }
.stop-swipe-links { position: relative; z-index: 2; display: flex; gap: 16px; margin-top: 6px; }
.stop-swipe-hint { margin: 0 0 10px; display: none; }
@media (hover: none) and (pointer: coarse) {
  .stop-swipe-links { display: none; }
  .stop-swipe-hint { display: block; }
}
.stop-dialog h2 { margin: 0 0 6px; font-size: 18px; }
.stop-dialog textarea { width: 100%; }
.danger-link { color: var(--red-text); }
.dvisit-delete { margin-top: var(--sp-3); }
.visit-delete-form { margin: 4px 0 0; }
.others-dialog h2 { margin: 0 0 6px; font-size: 18px; }
.others-dialog .form-actions { display: flex; gap: var(--sp-3); }
.others-dialog .form-actions button { flex: 1; }
.others-question { margin: 0 0 var(--sp-3); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border); border-radius: var(--radius); }
.others-question legend { padding: 0 4px; }

/* Weekly Jobs Report: week buttons and the in-progress banner (reuses the report-* classes above). */
.week-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.week-nav .button-link { width: auto; }
.week-nav-label { min-width: 0; overflow-wrap: anywhere; }
.report-banner { margin: 0 0 var(--sp-3); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border); border-radius: var(--radius); background: color-mix(in srgb, var(--yellow) 12%, transparent); color: var(--text); }
@media print {
  .report-banner { background: var(--bg); border-color: var(--text); }
}