/* Broccolo Inc Shop Board
   Palette: Subaru Certified Collision Center branding - Subaru blue
   (#0e51a0, sampled from the certification badge) as the accent, a
   near-black header to match the badge's own black background, cool
   concrete neutrals elsewhere. Oswald for condensed industrial
   headings, IBM Plex Sans for body, IBM Plex Mono for VINs/plates/RO#s. */

:root {
  --bg: #eef0f2;
  --surface: #ffffff;
  --surface-2: #f8f9f7;
  /* Job/Parts board card background only - a clearly distinct medium
     grey so tiles read as tiles against the lighter --bg behind them,
     without repointing the shared --surface token used everywhere else
     (modals, inputs, nav). See .card and .column below. Now plain white
     rather than a grey tile - per Mike, the grey-on-grey board read as
     muddy and hard on the eyes; white cards on a light grey page plus
     the Subaru-blue RO badge below give the same "tile" separation with
     much better contrast and a cleaner, less visually tiring look. */
  --card-bg: #ffffff;
  --ink: #1c2126;
  --ink-soft: #5b6570;
  --line: #dde1e5;
  --accent: #0e51a0;
  --accent-ink: #ffffff;
  --steel: #0d1117;
  --steel-ink: #ffffff;
  --good: #3c8558;
  --good-bg: #e4f2e9;
  --warn: #c98a1e;
  --warn-bg: #faf0dc;
  --bad: #c1443a;
  --bad-bg: #fbe6e4;
  --shadow: 0 1px 2px rgba(28, 33, 38, 0.06), 0 4px 12px rgba(28, 33, 38, 0.06);
  --radius: 10px;
  --font-display: "Oswald", "Arial Narrow", sans-serif;
  --font-body: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14181c;
    --surface: #1c2126;
    --surface-2: #20262c;
    --card-bg: var(--surface);
    --ink: #edefef;
    --ink-soft: #9aa5ac;
    --line: #2c343b;
    --accent: #4a8ee0;
    --accent-ink: #0a1626;
    --steel: #05070a;
    --steel-ink: #ffffff;
    --good: #63bd85;
    --good-bg: #163524;
    --warn: #e2af51;
    --warn-bg: #3a2c0f;
    --bad: #e0776a;
    --bad-bg: #3a1a16;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.3);
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.45;
}
h1, h2, h3 { font-family: var(--font-display); text-wrap: balance; margin: 0; letter-spacing: 0.01em; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
[hidden] { display: none !important; }

/* ---------- Login ---------- */
.login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(circle at 20% 15%, color-mix(in srgb, var(--steel) 14%, transparent), transparent 45%),
    var(--bg);
}
.login-card {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 36px 32px;
  text-align: center;
}
.login-badge {
  display: block;
  width: 96px;
  height: auto;
  border-radius: 10px;
  margin: 0 auto 18px;
}
.login-logo {
  display: block;
  width: 220px;
  max-width: 100%;
  height: auto;
  margin: 0 auto 16px;
}
.login-card h1 { font-size: 22px; margin-bottom: 4px; }
.login-sub { color: var(--ink-soft); margin: 0 0 24px; font-size: 14px; }
.login-error {
  background: var(--bad-bg);
  color: var(--bad);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  margin-bottom: 16px;
  text-align: left;
}
.btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 11px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.btn-google:hover { border-color: var(--steel); background: var(--surface-2); }
.login-foot { margin: 20px 0 0; font-size: 12.5px; color: var(--ink-soft); }

/* ---------- Top bar ---------- */
.topbar {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 10px 20px;
  background: var(--steel);
  color: var(--steel-ink);
  position: sticky;
  top: 0;
  z-index: 20;
}
.topbar-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; cursor: pointer; }
.topbar-brand:hover .brand-mark { color: var(--accent); }
.brand-badge { width: 34px; height: 34px; border-radius: 6px; flex: none; }
.topbar-brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-mark { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.08em; font-size: 16px; }
.brand-sub { font-size: 11px; opacity: 0.75; }
.topbar-stats { display: flex; gap: 8px; flex: 1; flex-wrap: wrap; }
.stat-chip {
  font-size: 12.5px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  white-space: nowrap;
}
.stat-chip strong { font-variant-numeric: tabular-nums; margin-right: 4px; }
.stat-chip.is-bad { background: var(--bad); color: #fff; }
.stat-chip.is-warn { background: var(--warn); color: #241a03; }
.stat-chip.is-good { background: var(--good); color: #fff; }
.topbar-nav { display: flex; gap: 4px; }
.nav-link {
  background: transparent;
  border: none;
  color: var(--steel-ink);
  opacity: 0.75;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
}
.nav-link:hover { opacity: 1; background: rgba(255, 255, 255, 0.1); }
.nav-link.is-active { opacity: 1; background: rgba(255, 255, 255, 0.18); }
a.nav-link { display: inline-block; text-decoration: none; } /* the TV View link is a real link (opens /tv in a new tab), not a view-switch button */
/* ---------- Quick Links (bookmark-bar style dropdown) ---------- */
.quick-links-wrap { position: relative; }
.quick-links-btn {
  background: transparent;
  border: none;
  color: var(--steel-ink);
  opacity: 0.75;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
}
.quick-links-btn:hover { opacity: 1; background: rgba(255, 255, 255, 0.1); }
.quick-links-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 220px;
  max-width: min(320px, calc(100vw - 32px));
  max-height: 400px;
  overflow-y: auto;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 6px;
  z-index: 30;
}
.quick-links-panel .quick-link-item {
  display: block;
  padding: 8px 10px;
  border-radius: 6px;
  color: inherit;
  text-decoration: none;
  font-size: 13.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.quick-links-panel .quick-link-item:hover { background: rgba(0, 0, 0, 0.06); }
.quick-links-panel .quick-links-empty { padding: 10px; color: var(--ink-soft); font-size: 13px; }

.quick-links-editor { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.quick-links-editor-row { display: flex; gap: 8px; align-items: center; }
.quick-links-editor-row input[type="text"] { flex: 1; min-width: 0; }
.quick-links-editor-row .quick-link-label-input { flex: 0 0 40%; }
.quick-links-editor-row .quick-link-remove-btn {
  flex: 0 0 auto;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
  color: var(--bad);
  padding: 4px 9px;
}

.topbar-user { display: flex; align-items: center; gap: 8px; }
.user-avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--ink-soft); object-fit: cover; }
.user-name-btn {
  font-size: 13.5px;
  white-space: nowrap;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 4px 2px;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
.user-name-btn:hover { opacity: 0.85; }
.clock-status-btn {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  background: var(--good-bg);
  color: var(--good);
  border: 1px solid var(--good);
  border-radius: 999px;
  padding: 4px 10px;
  cursor: pointer;
}
.clock-status-btn:hover { filter: brightness(0.97); }

/* ---------- Notifications (@mention bell) ---------- */
.notif-wrap { position: relative; }
.notif-bell-btn {
  position: relative;
  background: transparent;
  border: none;
  color: var(--steel-ink);
  opacity: 0.85;
  font-size: 16px;
  line-height: 1;
  padding: 6px 8px;
  border-radius: 999px;
  cursor: pointer;
}
.notif-bell-btn:hover { opacity: 1; background: rgba(255, 255, 255, 0.14); }
.notif-badge {
  position: absolute;
  top: 1px;
  right: 1px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--bad);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
}
.notif-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 340px;
  max-width: min(340px, calc(100vw - 32px));
  max-height: 420px;
  overflow-y: auto;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
  z-index: 30;
}
.notif-panel-head {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.notif-panel-head h3 { font-size: 14px; }
.notif-list { display: flex; flex-direction: column; }
.notif-empty { padding: 18px 14px; color: var(--ink-soft); font-size: 13px; text-align: center; }
.notif-row {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid var(--line);
  padding: 10px 12px;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
}
.notif-row:hover { background: var(--surface-2); }
.notif-row.is-unread { background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.notif-row-head { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; }
.notif-row-actor { font-weight: 600; }
.notif-row-time { color: var(--ink-soft); white-space: nowrap; }
.notif-row-job { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
.notif-row-snippet { font-size: 13px; margin-top: 3px; white-space: pre-wrap; word-break: break-word; }

/* ---------- @mention autocomplete ---------- */
.mention-suggest {
  position: fixed;
  /* Appended straight to <body> (src/public/app.js), a sibling of any
     open modal rather than a child of it - so its z-index has to beat
     .modal-backdrop's (50) too, not just other in-page elements, or the
     suggestion list renders behind an open modal like the quick-comment
     popover instead of on top of it. */
  z-index: 60;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  min-width: 160px;
  max-width: 260px;
  max-height: 200px;
  overflow-y: auto;
}
.mention-suggest-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 7px 10px;
  font-size: 13px;
  cursor: pointer;
  color: var(--ink);
  font-family: inherit;
}
.mention-suggest-item:hover, .mention-suggest-item.is-active { background: var(--surface-2); }
.mention-suggest-item.is-everyone { font-weight: 600; border-bottom: 1px solid var(--line); }
.mention-suggest-hint { display: block; font-weight: 400; font-size: 11px; color: var(--ink-soft); }

.time-clock-section { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.time-clock-section h3 { font-size: 14px; margin-bottom: 8px; }
.time-logged-total { font-weight: 400; color: var(--ink-soft); font-size: 12.5px; }

/* ---------- Cover sheet (print) ---------- */
/* Deliberately plain, paper-form styling rather than the app's own look -
   Times New Roman and no bold anywhere (readable but not shouty on a
   shop-floor printout), with hierarchy carried entirely by size instead
   of weight. */
.cover-sheet {
  font-family: 'Times New Roman', Times, serif;
  font-weight: 400;
  color: #000;
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 8px;
}
.cover-sheet-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 2px solid #000;
  padding-bottom: 8px;
  margin-bottom: 10px;
}
.cover-sheet-head h1 { font-size: 24px; font-weight: 400; margin: 0; }
/* Deliberately small and unbold - a reference number for whoever's
   stacking these, not the headline of the page. */
.cover-sheet-priority { font-size: 12px; font-weight: 400; color: #333; white-space: nowrap; }
.cover-sheet-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  font-size: 14px;
  margin-bottom: 10px;
}
.cover-sheet-columns { display: flex; gap: 22px; margin-top: 18px; }
.cover-sheet-col { flex: 1; min-width: 0; }
.cover-sheet-col h2 { font-size: 16px; font-weight: 400; margin: 0 0 10px; }
/* The dashed divider called for between the two checklists. */
.cover-sheet-divider { flex: none; width: 0; border-left: 1px dashed #000; }
.cover-sheet-checklist { list-style: none; margin: 0; padding: 0; }
.cover-sheet-checklist li {
  font-size: 13.5px;
  padding: 5px 0;
  border-bottom: 1px dotted #999;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.cover-sheet-checklist li:last-child { border-bottom: none; }
.cover-sheet-box { font-size: 15px; flex: none; }
.cover-sheet-empty { font-size: 13px; color: #555; font-style: italic; }
/* On-screen editing controls (add-item rows, remove buttons, the
   toolbar) use .no-print to disappear on the actual printout; the plain
   checked-box rendering is the reverse - hidden while editing on screen
   so it isn't shown twice, shown only once print's layout pass runs. */
.print-only { display: none; }
@media (max-width: 620px) {
  .cover-sheet-columns { flex-direction: column; }
  .cover-sheet-divider { width: auto; height: 0; border-left: none; border-top: 1px dashed #000; margin: 4px 0; }
}
.cover-sheet-toolbar {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
@media print {
  .cover-sheet { max-width: none; padding: 0; }
  .print-only { display: block; }
}

/* ---------- Sublet/Mechanical + Customer Pay checklists (job modal) ---------- */
.checklist-panel { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.checklist-panel h3 { font-size: 14px; margin-bottom: 10px; }
.checklist-panel .field-grid { margin-bottom: 12px; }
.readonly-field {
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-2);
  color: var(--ink-soft);
  font-size: 13.5px;
}
.checklist-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.checklist-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  padding: 4px 0;
}
.checklist-item-check { display: flex; align-items: center; gap: 8px; cursor: pointer; flex: 1; }
.checklist-item.is-done .checklist-item-check span { color: var(--ink-soft); text-decoration: line-through; }
.checklist-add-row { display: flex; gap: 8px; }
.checklist-add-row input {
  flex: 1;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 7px 10px;
  background: var(--surface);
  color: var(--ink);
  font-size: 13.5px;
}

.btn-ghost {
  background: transparent;
  border: 1px solid currentColor;
  opacity: 0.85;
  color: inherit;
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12.5px;
}
.btn-ghost:hover { opacity: 1; }
.btn-ghost-inverse {
  background: transparent;
  border: 1px solid var(--accent-ink);
  color: var(--accent-ink);
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12.5px;
}
.btn-accent {
  background: var(--accent);
  color: var(--accent-ink);
  border: none;
  padding: 9px 16px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.btn-accent:hover { filter: brightness(1.06); }
.btn-danger {
  background: transparent;
  color: var(--bad);
  border: 1px solid var(--bad);
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
}

/* ---------- Board toolbar ---------- */
.view { padding: 16px 20px 40px; }
.board-toolbar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 14px;
}
.input-search, .input-select {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 8px;
  padding: 8px 12px;
  color: var(--ink);
}
.input-search { flex: 1; min-width: 220px; }
.check-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 7px 12px;
  border-radius: 999px;
  cursor: pointer;
}

.sample-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--steel);
  color: var(--steel-ink);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13.5px;
  margin-bottom: 14px;
}

/* ---------- Board ---------- */
/* A second, thin horizontal scrollbar mirrored above the board itself
   (see wireBoardTopScrollbar in app.js) - the board's own native
   scrollbar sits below a tall column of cards, which can mean scrolling
   all the way down just to find something to grab. This strip is kept
   in sync with the real scroll position so it can be grabbed from the
   top just as well as the bottom. */
.board-scroll-top {
  overflow-x: auto;
  overflow-y: hidden;
  height: 16px;
  margin-bottom: 2px;
  /* Force a classic, always-visible track+thumb here rather than
     whatever overlay/auto-hiding scrollbar style the OS/browser
     defaults to - the whole point of this strip is that it's visibly
     grabbable without having to hover or start scrolling first. */
  scrollbar-width: auto;
  scrollbar-color: var(--ink-soft) var(--surface-2);
}
.board-scroll-top::-webkit-scrollbar {
  height: 14px;
}
.board-scroll-top::-webkit-scrollbar-track {
  background: var(--surface-2);
  border-radius: 7px;
}
.board-scroll-top::-webkit-scrollbar-thumb {
  background: var(--ink-soft);
  border-radius: 7px;
  border: 3px solid var(--surface-2);
}
.board-scroll-top::-webkit-scrollbar-thumb:hover {
  background: var(--ink);
}
.board-scroll-top-inner {
  height: 1px;
}
.board {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 8px;
}
.column {
  flex: 0 0 300px;
  /* Blends into the page background on purpose - see --bg/--card-bg
     above - so the cards inside are what visibly stand out as tiles,
     not the column tray itself. */
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 170px);
  transition: background-color 0.12s, border-color 0.12s;
}
.column.is-drop-target {
  background: color-mix(in srgb, var(--accent) 10%, var(--bg));
  border-color: var(--accent);
}
.column-head {
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.column-head h3 {
  font-size: 13.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  flex: 1;
}
.column-collapse-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-soft);
  font-size: 11px;
  padding: 2px 4px;
  line-height: 1;
}
.column-collapse-btn:hover { color: var(--ink); }
.column.is-collapsed { flex-basis: auto; }
.column.is-collapsed .column-body { display: none; }
.parts-ro-badge { font-size: 13px; font-weight: 600; }
.stage-phase-codes {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-soft);
  text-transform: none;
  letter-spacing: normal;
}

.column-priority-btn {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
}
.column-priority-btn:hover { color: var(--ink); border-color: var(--steel); }
.column-priority-btn.is-active { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.column-count {
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 1px 8px;
}
.column-body {
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.column-empty {
  color: var(--ink-soft);
  font-size: 13px;
  text-align: center;
  padding: 18px 8px;
  border: 1px dashed var(--line);
  border-radius: 8px;
}

/* ---------- Parts panel (Job Board + Production Meeting) ---------- */
.parts-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 14px;
}
.parts-panel-col h3, .parts-panel-col h4 {
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
}
.parts-list { display: flex; flex-direction: column; gap: 6px; }
.parts-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 7px 10px;
  cursor: pointer;
  font-size: 13px;
}
.parts-row:hover { border-color: var(--accent); }
.parts-row-stage {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--ink-soft);
}
.meeting-phase.parts-section { border-bottom: 1px solid var(--line); padding-bottom: 16px; }
@media (max-width: 720px) {
  .parts-panel { grid-template-columns: 1fr; }
}

/* ---------- Card ---------- */
.card {
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 11px 12px;
  box-shadow: var(--shadow);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.card.is-sample { border-style: dashed; }
.card.is-mirror-matched { border-left: 3px solid var(--good); }
.card { cursor: grab; }
.mirror-match-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
}
.mirror-match-check input { cursor: pointer; }
.card.is-dragging { opacity: 0.4; }
.card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.card-customer { font-weight: 600; font-size: 14.5px; }
/* One or more people on a job (assigned system-user tech first, then any
   free-text "other techs") - stacked slightly so a full row of chips
   doesn't need much extra width. */
.tech-chips { display: flex; flex: none; }
.tech-chips .tech-chip:not(:first-child) { margin-left: -8px; }
.tech-chip {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--steel);
  color: var(--steel-ink);
  border: 2px solid var(--surface);
  font-size: 10.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-vehicle { color: var(--ink-soft); font-size: 13px; }
.parts-pct-row { display: flex; align-items: center; gap: 6px; }
.parts-pct-bar {
  flex: 1;
  height: 6px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.parts-pct-fill { height: 100%; background: var(--good); }
.parts-pct-label { font-size: 11px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.parts-pct-tag { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); flex: none; }
.card-codes { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-soft); letter-spacing: 0.02em; }
.ro-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 14px;
  color: #fff;
  /* Subaru blue (the same --accent used elsewhere, sampled from the
     Subaru Certified Collision Center badge) - flat and solid so it
     reads sharp and stays legible edge-to-edge, and clears WCAG AAA
     contrast (~7.8:1) against the white text. */
  background: var(--accent);
  padding: 3.5px 10px;
  border-radius: 5px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.card-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.badge.is-good { color: var(--good); background: var(--good-bg); }
.badge.is-warn { color: var(--warn); background: var(--warn-bg); }
.badge.is-bad { color: var(--bad); background: var(--bad-bg); }
.badge.is-sample { color: var(--ink-soft); background: var(--surface-2); border: 1px dashed var(--line); }
.card-insurance { font-size: 12px; color: var(--ink-soft); }
.card-move-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 2px; }
.move-btn {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  width: 28px;
  height: 24px;
  cursor: pointer;
  color: var(--ink-soft);
  font-size: 13px;
}
.move-btn:hover:not(:disabled) { color: var(--ink); border-color: var(--steel); }
.move-btn:disabled { opacity: 0.3; cursor: default; }
.card-comment-btn {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  height: 24px;
  padding: 0 8px;
  cursor: pointer;
  color: var(--ink-soft);
  font-size: 12px;
  flex: 1;
}
.card-comment-btn:hover { color: var(--ink); border-color: var(--steel); }

/* Sublet/Mechanical: green once the checklist's mechanical work is marked
   done, red once a sublet vehicle's due-back date has passed and nobody's
   checked it done yet - a left accent bar plus a faint tint so it reads
   at a glance without fighting the card's own text/badge colors. */
.card.is-mechanical-done { border-left: 5px solid var(--good); background: color-mix(in srgb, var(--good) 28%, var(--card-bg)); }
.card.is-sublet-overdue { border-left: 3px solid var(--bad); background: color-mix(in srgb, var(--bad) 10%, var(--card-bg)); }
/* Manual drag-order number, shown only in "Sort: Priority" mode. */
.priority-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1px 6px;
  cursor: grab;
  flex: none;
}
.mechanical-done-checkbox { font-size: 12px; align-self: flex-start; }

/* ---------- CCC Import (general nav page, PIN-gated) ---------- */
.ccc-import-gate { display: flex; justify-content: center; padding-top: 40px; }
.ccc-import-gate input#ccc-import-pin-input {
  font-size: 22px;
  letter-spacing: 8px;
  text-align: center;
  width: 100%;
}
.ccc-import-tool { max-width: 640px; }
.ccc-import-tool > .admin-hint { display: flex; align-items: center; gap: 8px; }

/* ---------- Admin ---------- */
.admin-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.admin-card-wide { grid-column: 1 / -1; }
.admin-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
}
.admin-card h2 {
  font-size: 16px;
  margin-bottom: 4px;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.admin-card h2::before {
  content: '▾';
  font-size: 12px;
  color: var(--ink-soft);
  transition: transform 0.15s ease;
}
/* Collapsed: hide everything in the card except its clickable heading. */
.admin-card.is-collapsed h2 { margin-bottom: 0; }
.admin-card.is-collapsed h2::before { transform: rotate(-90deg); }
/* !important since a few cards' direct children carry their own inline
   display:flex/block styles that would otherwise win over this. */
.admin-card.is-collapsed > :not(h2) { display: none !important; }
.admin-hint { color: var(--ink-soft); font-size: 12.5px; margin: 0 0 14px; }
.add-email-form { display: flex; gap: 8px; margin-bottom: 14px; }
.add-email-form input { flex: 1; border: 1px solid var(--line); border-radius: 7px; padding: 7px 10px; background: var(--surface); }
.add-email-form select { border: 1px solid var(--line); border-radius: 7px; padding: 7px 10px; background: var(--surface); }
#tv-settings-form label { font-size: 13px; color: var(--ink-soft); }
#tv-settings-form input, #tv-settings-form select {
  display: block;
  width: 100%;
  margin-top: 4px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 7px 10px;
  background: var(--surface);
}
.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.admin-table th {
  text-align: left;
  color: var(--ink-soft);
  font-weight: 500;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 6px 8px;
  border-bottom: 1px solid var(--line);
}
.admin-table td { padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.admin-table tr:last-child td { border-bottom: none; }
.role-select { border: 1px solid var(--line); border-radius: 6px; padding: 3px 6px; background: var(--surface); }
.link-btn { background: none; border: none; color: var(--bad); cursor: pointer; font-size: 12.5px; padding: 0; }
.mono-cell { font-family: var(--font-mono); font-size: 12px; }
.wide-overflow { overflow-x: auto; }
.clickable-row { cursor: pointer; }
.clickable-row:hover { background: var(--surface-2); }
.phase-color-row { display: flex; align-items: center; gap: 8px; }
.phase-move-btn {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  width: 24px;
  height: 22px;
  cursor: pointer;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1;
}
.phase-move-btn:hover:not(:disabled) { color: var(--ink); border-color: var(--steel); }
.phase-move-btn:disabled { opacity: 0.3; cursor: default; }
.stage-label-input {
  width: 100%;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 4px 6px;
  background: transparent;
  color: inherit;
  font-size: 13px;
  font-family: inherit;
}
.stage-label-input:hover, .stage-label-input:focus { border-color: var(--line); background: var(--surface); }
#add-stage-form { margin-top: 12px; margin-bottom: 0; }
.is-good-text { color: var(--good); font-weight: 600; }
.monthly-goal-input {
  width: 110px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 4px 6px;
  background: var(--surface);
  color: inherit;
  font-size: 13px;
  font-family: inherit;
}
.admin-table input[type="color"] {
  width: 44px;
  height: 26px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 2px;
  background: var(--surface);
  cursor: pointer;
}
.phase-dot {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex: none;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08) inset;
}

/* ---------- Modal ---------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 24, 28, 0.5);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px;
  overflow-y: auto;
  z-index: 50;
}
.modal-card {
  background: var(--surface);
  border-radius: 14px;
  width: 100%;
  max-width: 640px;
  box-shadow: var(--shadow);
}
.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}
.modal-close { background: none; border: none; font-size: 22px; color: var(--ink-soft); cursor: pointer; line-height: 1; }

/* Job modal's Communication/Details tabs - see the HTML comment above
   #job-modal-tabs for why Communication is the default. */
.modal-tabs {
  display: flex;
  gap: 4px;
  padding: 10px 20px 0;
  border-bottom: 1px solid var(--line);
}
.modal-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 8px 6px 10px;
  font: inherit;
  font-weight: 600;
  font-size: 13px;
  color: var(--ink-soft);
  cursor: pointer;
}
.modal-tab.is-active { color: var(--accent); border-bottom-color: var(--accent); }
.modal-tab:disabled { color: var(--line); cursor: not-allowed; }

/* Job modal: keep the header/tabs and the Save/Cancel/Delete footer
   fixed in place, and let only the active tab's content scroll inside
   the box - so opening a long job never means scrolling the whole page
   to reach Save, just scrolling within the modal itself. #job-form is
   display:contents so it doesn't add its own box between .modal-card
   and #job-panel-details - the Save button still submits it fine via
   its form="job-form" attribute, which works by id regardless of DOM
   position. */
#job-modal .modal-card {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 80px);
}
#job-form { display: contents; }
#job-modal .modal-tab-panel {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.modal-tab-panel[hidden] { display: none; }
.modal-body { padding: 18px 20px; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.phone-field-row { display: flex; gap: 6px; align-items: center; }
.phone-field-row input { flex: 1; min-width: 0; }
.btn-icon { flex-shrink: 0; padding: 8px 10px; border-radius: 7px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; font-size: 14px; line-height: 1; }
.btn-icon:hover { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }

/* "Search Quo contacts" results panel under the phone field - see
   quo-contact-search-btn in app.js. */
.quo-lookup-panel {
  margin-top: -4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface);
  max-height: 220px;
  overflow-y: auto;
}
.quo-lookup-panel-head {
  padding: 8px 12px;
  font-size: 12px;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
  position: sticky;
  top: 0;
}
.quo-lookup-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
}
.quo-lookup-row:last-child { border-bottom: none; }
.quo-lookup-row-name { font-weight: 600; font-size: 13.5px; }
.quo-lookup-row-phone { color: var(--ink-soft); font-size: 12.5px; font-family: 'IBM Plex Mono', monospace; }

/* Admin > Unmatched Texts row's job-search + attach control. */
.unmatched-attach { display: flex; gap: 6px; min-width: 220px; }
.unmatched-attach input { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px; font-size: 12.5px; background: var(--surface); }
.field { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--ink-soft); }
.field-span2 { grid-column: span 2; }
.field input, .field select, .field textarea {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px 10px;
  background: var(--surface);
  color: var(--ink);
  font-size: 14px;
}
.field textarea { resize: vertical; font-family: var(--font-body); }
.mono-input { font-family: var(--font-mono); }
.modal-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--line);
}
.modal-foot-spacer { flex: 1; }

/* ---------- Chat ---------- */
.chat-layout {
  display: flex;
  gap: 14px;
  height: min(680px, calc(100vh - 160px));
  max-width: 1100px;
  margin: 0 auto;
}
.chat-sidebar {
  flex: 0 0 240px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.chat-sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}
.chat-sidebar-head h2 { font-size: 15px; }
.chat-sidebar-head .btn-accent { padding: 5px 10px; font-size: 12.5px; }
.chat-list { flex: 1; overflow-y: auto; }
.chat-list-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid var(--line);
  padding: 10px 14px;
  cursor: pointer;
  color: var(--ink);
}
.chat-list-item:hover { background: var(--surface-2); }
.chat-list-item.is-active { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.chat-list-item-title { font-weight: 600; font-size: 13.5px; display: flex; align-items: center; gap: 6px; }
.chat-list-item-preview { font-size: 12px; color: var(--ink-soft); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-badge {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 1px 6px;
}
.chat-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  min-width: 0;
}
.chat-main-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  font-weight: 600;
}
.chat-thread {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.chat-row {
  max-width: 70%;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 12px;
}
.chat-row.is-mine { align-self: flex-end; background: color-mix(in srgb, var(--accent) 12%, var(--surface-2)); }
.chat-author { font-weight: 600; font-size: 12.5px; margin-right: 8px; }
.chat-time { font-size: 11px; color: var(--ink-soft); }
.chat-body { margin-top: 3px; font-size: 14px; white-space: pre-wrap; word-break: break-word; }
.chat-form {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
}
.chat-form input {
  flex: 1;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 12px;
  background: var(--surface);
  color: var(--ink);
}

.people-picker {
  border: 1px solid var(--line);
  border-radius: 8px;
  max-height: 220px;
  overflow-y: auto;
}
.people-picker-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 13.5px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.people-picker-row:last-child { border-bottom: none; }
.people-picker-row:hover { background: var(--surface-2); }
.people-picker-empty { padding: 12px; color: var(--ink-soft); font-size: 13px; }
.modal-card-sm { max-width: 420px; }
.oversight-thread { height: 420px; }

.sync-review-section h3 { font-size: 14px; margin: 18px 0 8px; }
.sync-review-section:first-child h3 { margin-top: 0; }
.sync-review-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-bottom: 6px;
  font-size: 13px;
  cursor: pointer;
}
.sync-review-row input { margin-top: 3px; }
.sync-review-diff { color: var(--ink-soft); margin-top: 3px; }
.sync-review-flat { padding: 6px 10px; font-size: 13px; color: var(--ink-soft); }

@media (max-width: 900px) {
  .chat-layout { flex-direction: column; height: auto; }
  .chat-sidebar { flex: none; max-height: 220px; }
  .chat-main { height: 60vh; }
}

/* ---------- Text Customer (job modal, via Quo) ---------- */
.customer-comm-section {
  padding: 14px 20px;
  border-top: 1px solid var(--line);
  /* A subtle tint distinguishes this from the internal-only Team Notes
     box right below it - this thread is customer-facing texts/calls via
     Quo, not internal shop notes, so it shouldn't look like just another
     comment field. */
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
}
.customer-comm-section h3 { font-size: 14px; margin: 0 0 10px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.customer-comm-section .comments-thread { margin-bottom: 10px; }
.comm-caution {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--bad-ink, #b42318);
  background: color-mix(in srgb, var(--bad) 16%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--bad) 45%, var(--line));
  border-radius: 5px;
  padding: 2px 7px;
}

/* ---------- Comments (job modal + meeting notes) ---------- */
.comments-section {
  padding: 0 20px 18px;
  border-top: 1px solid var(--line);
}
.comments-section h3 { margin-top: 16px; }
.comments-section h3 { font-size: 14px; margin-bottom: 10px; }
.comments-thread {
  max-height: 220px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10px;
}
.comments-empty { color: var(--ink-soft); font-size: 13px; }
.comment-row { font-size: 13px; }
.comment-row-head { display: flex; align-items: baseline; gap: 6px 8px; flex-wrap: wrap; }
.comment-author { font-weight: 600; margin-right: 0; }
.comment-time { font-size: 11px; color: var(--ink-soft); }
.source-tag {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  border-radius: 999px;
  padding: 1px 7px;
  white-space: nowrap;
}
.comment-body { margin-top: 2px; white-space: pre-wrap; word-break: break-word; }
.comment-actions { margin-left: auto; display: flex; gap: 4px; }
.icon-btn {
  border: none;
  background: none;
  color: var(--ink-soft);
  font-size: 11px;
  cursor: pointer;
  padding: 1px 4px;
  border-radius: 4px;
}
.icon-btn:hover { color: var(--accent); background: var(--surface-2); }
.comment-edit-form { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }
.comment-edit-form textarea {
  width: 100%;
  min-height: 56px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 6px 8px;
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
}
.comment-edit-actions { display: flex; gap: 6px; }
.btn-sm { padding: 4px 10px; font-size: 12px; }
.comment-row.is-deleted { opacity: 0.6; }
.history-prior { font-size: 12px; color: var(--ink-soft); margin-top: 4px; padding-left: 10px; border-left: 2px solid var(--line); }
.history-deleted-tag { margin-top: 4px; font-size: 12px; color: var(--bad); font-weight: 600; }
.comment-form { display: flex; gap: 8px; }
.comment-form input {
  flex: 1;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 7px 10px;
  background: var(--surface);
  color: var(--ink);
  font-size: 13.5px;
}

/* ---------- Production meeting ---------- */
.meeting-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.meeting-toolbar h2 { font-size: 19px; }
/* Each section is tinted with its board column's color (--stage-color,
   set inline per section - src/public/app.js phaseSectionHtml) so a
   glance down the page (or the printed sheet) shows where one column
   ends and the next begins, without having to read every header. */
.meeting-phase {
  margin-bottom: 26px;
  padding: 4px 0 4px 14px;
  border-left: 4px solid var(--stage-color, var(--line));
  border-radius: 0 8px 8px 0;
  background: color-mix(in srgb, var(--stage-color, var(--line)) 6%, transparent);
}
.meeting-phase h3 {
  font-size: 14.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.meeting-jobs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.meeting-job {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--stage-color, var(--line));
  border-radius: 9px;
  padding: 11px 12px;
  box-shadow: var(--shadow);
}
.meeting-job { cursor: grab; }
.meeting-job.is-dragging { opacity: 0.4; }
.meeting-job-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.drag-handle { color: var(--ink-soft); font-size: 13px; margin-right: 5px; cursor: grab; }
.meeting-job-meta { font-size: 12px; color: var(--ink-soft); margin: 4px 0 8px; }
.supplement-phase-row { display: flex; align-items: center; gap: 6px; margin: 6px 0; }
.supplement-phase-row select {
  flex: 1;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 3px 6px;
  background: var(--surface);
  color: inherit;
  font-size: 12.5px;
  font-family: inherit;
}
.meeting-notes-thread { max-height: 140px; margin-top: 6px; }

/* Only shown when printing (see @media print below) - a plain on-screen
   heading would be redundant with the Weekly Production Meeting title
   above it, which itself is hidden on print (.no-print). */
.print-header { display: none; }

@media print {
  @page { margin: 0.5in; }
  .no-print, .topbar, .board-toolbar, .sample-banner { display: none !important; }
  body, .bg { background: #fff !important; }

  /* Printed for a shop-floor meeting to read from, so this reads like a
     typed report on paper - not a printout of the web app - and goes
     easy on toner while it's at it: screen-only "app chrome" (gradient
     badges, colored pill chips, drop shadows, rounded corners, a filled
     progress bar) all flatten to plain black text and thin rules. The
     one color left is a slim per-column accent bar plus a small dot
     next to each heading - enough to tell columns apart at a glance
     without covering any real area in ink. */
  .meeting-phase, .phase-dot {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    color-adjust: exact;
  }
  .print-header {
    display: block;
    margin-bottom: 18px;
    padding-bottom: 10px;
    border-bottom: 2px solid #000;
  }
  .print-header h1 { font-size: 17px; letter-spacing: 0.06em; }
  .print-header h2 { font-size: 13px; font-weight: 500; color: #444; margin-top: 3px; }

  .meeting-phase {
    break-before: auto;
    margin-bottom: 16px;
    padding: 2px 0 2px 10px;
    background: none !important;
    border-left-width: 3px;
  }
  .meeting-phase h3 {
    font-size: 13.5px;
    color: #000;
    margin-bottom: 8px;
    padding-bottom: 5px;
    border-bottom: 1px solid #999;
  }
  /* Stack jobs one under the other on paper instead of the on-screen
     multi-column grid - easier to read down a printed page, and each
     job gets the full page width for its notes rather than a cramped
     280px column. */
  .meeting-jobs { display: block; }
  .meeting-job {
    break-inside: avoid;
    box-shadow: none;
    border-radius: 0;
    border-color: #ccc;
    border-left-color: var(--stage-color, #999);
    border-width: 0 0 1px 3px; /* just a bottom rule + the accent bar - no boxed card on paper */
    padding: 7px 0;
    margin-bottom: 2px;
  }
  .meeting-job:last-child { border-bottom: none; }
  .meeting-job-head, .card-vehicle, .meeting-job-meta { padding-left: 10px; }
  .view { padding: 0; }

  /* Flatten every pill/chip/badge to plain text - a colored gradient RO
     badge or a rounded status pill reads as a web app, not a report,
     and each one is a small filled shape multiplied by every vehicle on
     the sheet. */
  .ro-badge {
    background: none !important;
    color: #000 !important;
    padding: 0;
    border-radius: 0;
    font-weight: 700;
  }
  .badge {
    background: none !important;
    color: #000 !important;
    border: none !important;
    padding: 0;
    border-radius: 0;
    font-weight: 600;
  }
  .badge:not(:last-child)::after { content: " · "; font-weight: 400; color: #666; }
  .column-count {
    background: none !important;
    border: none;
    font-family: inherit;
    font-size: 12px;
    padding: 0;
  }
  .tech-chip { display: none; } /* initials-only avatar; the full name already prints in the meta line */
  /* The little colored fill bar doesn't scan well in black and white -
     the percentage text next to it already says the same thing. */
  .parts-pct-bar { display: none; }
  .parts-pct-label { font-size: 12px; color: #000; }

  /* On screen these threads are height-capped with a scrollbar so they
     fit in a card/modal. Print has no scrolling, so left as-is any notes
     past that height would be silently cut off the page. Remove the cap
     and bump the text up a touch so a printed sheet of several notes
     stays fully readable. */
  .comments-thread, .meeting-notes-thread {
    max-height: none;
    overflow: visible;
  }
  .comment-body { font-size: 13px; line-height: 1.4; }
  .comment-time { color: #555 !important; }
  .source-tag { color: #333 !important; background: none !important; border: 1px solid #999; }
}

@media (max-width: 720px) {
  .field-grid { grid-template-columns: 1fr; }
  .field-span2 { grid-column: span 1; }
  .admin-grid { grid-template-columns: 1fr; }
  .topbar { flex-wrap: wrap; }
  .topbar-stats { order: 3; width: 100%; }
}