/* Dispatch board (direction D): the office Schedule as one column per
   tech, and the tech's My Schedule as a single route column. Tokens only. */

/* PLATFORM RULE: a horizontally scrolling region must fit the viewport,
   so its horizontal scrollbar is always ON SCREEN. The board caps its
   height; long columns scroll inside themselves (their header stays
   put). Apply the same pattern to any future wide board or lane view. */
.board {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  overflow-x: auto;
  overflow-y: hidden;
  max-height: calc(100vh - 165px);
  min-height: 260px;
  padding-bottom: var(--sp-2);
}

.board .col {
  flex: 0 0 330px;
  max-width: 330px;
  min-width: 0;
  /* Cap against the viewport directly, not the board: a percentage
     max-height would not resolve (the board has only a max-height, no
     fixed height), leaving the column uncapped so its stops overflow the
     board and get clipped with no scrollbar. */
  max-height: calc(100vh - 181px);
  overflow-y: auto;
  overflow-x: hidden;   /* the right-hand lane rule must not scroll away */
  scrollbar-width: thin;
  background: var(--board-col);
  border-radius: var(--radius-lg);
  padding: var(--sp-2);
}

.col-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-2) var(--sp-2);
  position: sticky;
  top: -8px;          /* cover the column's own padding while stuck */
  margin-top: -8px;
  padding-top: 12px;
  background: var(--board-col);
  z-index: 2;
}
.col-head .avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: var(--fs-xs);
  color: #fff;
  flex-shrink: 0;
}
.col-head .nm { font-weight: 800; font-size: var(--fs-md); color: var(--ink); }
.col-head .tech-phone { font-weight: 600; font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.col-head .tech-phone::before { content: " - "; }
.col-head .ct { font-size: var(--fs-xs); color: var(--muted); }
.col-head .ring {
  margin-left: auto;
  font-size: var(--fs-xs);
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--warn-soft);
  color: var(--warn);
  white-space: nowrap;
}
.col-head .ring.all-done { background: var(--ok-soft); color: var(--ok); }

.fac-line {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: var(--sp-3) var(--sp-1) 6px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .7px;
}
.fac-line::before { content: "◈"; color: var(--brand); opacity: .55; font-size: 10px; }

/* ---------- Schedule board look (office): white canvas, a rule under the
   date bar, vertical lanes between techs, and a modality-tinted tech header.
   Scoped to the office Schedule so My Schedule (tech) is untouched. ------- */
main[data-view="schedule"] { background: var(--board-canvas); }

main[data-view="schedule"] .board-toolbar {
  margin: 0 calc(-1 * var(--sp-5)) var(--sp-4);
  padding: var(--sp-1) var(--sp-5) var(--sp-3);
  border-bottom: 1px solid var(--card-line);
}

main[data-view="schedule"] .board { align-items: stretch; }
main[data-view="schedule"] .col {
  background: transparent; border-radius: 0; padding-top: 0;
  border-right: 1px solid var(--line);
}
main[data-view="schedule"] .col:last-child { border-right: 0; }

main[data-view="schedule"] .col-head {
  background: var(--ex-us-soft);
  border-radius: 8px;
  margin: 0 0 var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  top: 0; margin-top: 0;
}
main[data-view="schedule"] .board.xray .col-head { background: var(--warn-soft); }

/* ---------- stop cards ---------- */

.stop-card {
  position: relative;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--card-line);
  border-radius: 10px;
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-2);
  box-shadow: var(--card-shadow);
}

/* the actions menu floats in the top-right corner of an active card */
.stop-card > .dots { position: absolute; top: 3px; right: 5px; margin: 0; }

/* row 1: patient name (left) · DOB (center) · accession (right) */
.stop-card .r1 { display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: var(--sp-2); padding-right: 18px; }
.stop-card .pt { min-width: 0; font-weight: 700; font-size: var(--fs-md); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stop-card .dob { text-align: center; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.stop-card .acc { text-align: right; font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* row 2: room (left) · exams stacked, capped at 2 with +N more */
.stop-card .r2 { display: flex; align-items: flex-start; gap: 10px; margin-top: 6px; }
.stop-card .rm { font-family: var(--mono); font-size: 11px; color: var(--muted); white-space: nowrap; padding-top: 3px; min-width: 42px; }
.stop-card .exams { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.stop-card .more { font-size: 11px; font-weight: 700; color: var(--muted); cursor: default; }

.extag {
  align-self: flex-start;
  font-size: 11px; font-weight: 800; letter-spacing: .3px;
  padding: 3px 8px; border-radius: 5px; white-space: nowrap;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.extag.ven { background: var(--ex-ven-soft); color: var(--ex-ven); }
.extag.art { background: var(--ex-art-soft); color: var(--ex-art); }
.extag.echo { background: var(--ex-echo-soft); color: var(--ex-echo); }
.extag.us { background: var(--ex-us-soft); color: var(--ex-us); }
.extag.none { background: var(--surface-2); color: var(--muted); }

/* row 3: STAT / status, trip, flags ....... PACS pill (right) */
.stop-card .r3 { display: flex; align-items: center; gap: 6px; margin-top: 7px; flex-wrap: wrap; }
.stop-card .r3 .spacer { margin-left: auto; }
.flag { font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 5px; background: var(--brand-soft); color: var(--brand); white-space: nowrap; }
.statusbadge { font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 5px; background: var(--surface); color: var(--muted); border: 1px solid var(--line); white-space: nowrap; }

/* cancelled toggle group (cancelled/refused/rescheduled/facility closed/
   equipment down): grey and calm, not red; nobody needs to react */
.stop-card.grey { background: var(--surface-2); border-color: var(--line); }

/* STAT: red cell and a loud marker. The marker survives completion
   (tracked later in reports); the cell itself calms down when done. */
.stop-card.stat { background: var(--err-soft); border-color: light-dark(#f3cfcb, #4a2622); }
.stat-badge {
  font-size: 12px; font-weight: 900; letter-spacing: .8px;
  background: var(--err); color: #fff;
  padding: 3px 9px; border-radius: 5px; white-space: nowrap;
}
.stop-card.done .stat-mini {
  margin-left: auto;
  font-size: 11px; font-weight: 900; letter-spacing: .6px;
  color: var(--err); white-space: nowrap;
}
.stop-card.done .stat-mini + .tm { margin-left: 12px; }

/* done: compact, but the patient NAME is never clipped. Line 1 is the
   name (in full) with the done time and menu; line 2 is the exam and the
   image pill. */
.stop-card.done {
  background: light-dark(#f2f7f3, #14231a);
  border-color: light-dark(#dfeae1, #1e3527);
  padding: 8px var(--sp-3) 8px 12px;
}
.stop-card.done .dl1 { display: flex; align-items: center; gap: var(--sp-2); }
.stop-card.done .dl2 { display: flex; align-items: center; gap: var(--sp-2); margin-top: 3px; }
.stop-card.done .dl2:empty { display: none; }
.stop-card.done .chk { color: var(--ok); font-weight: 800; flex-shrink: 0; }
.stop-card.done .pt { flex: 1 1 auto; min-width: 0; font-weight: 700; font-size: var(--fs-sm); color: var(--ink); white-space: normal; overflow-wrap: anywhere; }
.stop-card.done .tm { font-size: 11px; font-weight: 700; color: var(--ok); white-space: nowrap; flex-shrink: 0; }
.stop-card.done .ex { font-size: 11px; color: var(--muted); opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stop-card.done .stat-mini { font-size: 10px; font-weight: 900; letter-spacing: .5px; color: var(--err); }
.stop-card.done .dl2 .imgchip { margin-left: auto; }

/* PACS-images pill: off (faint, nothing yet) vs lit (blue, with count).
   Lit + a viewer URL makes it a link into the study. */
.imgchip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 800; white-space: nowrap;
  padding: 2px 7px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--muted);
}
.imgchip .g { font-size: 12px; line-height: 1; }
.imgchip.off { opacity: .5; }
.imgchip.lit {
  background: var(--ex-us-soft); color: var(--ex-us); border-color: transparent;
  box-shadow: 0 0 0 2px light-dark(rgba(42,108,176,.12), rgba(143,184,221,.18));
}
.imgchip.link { cursor: pointer; }
.imgchip.link:hover { filter: brightness(1.05); text-decoration: underline; }
.imgchip .go { font-size: 10px; opacity: .7; }

/* Trip toggle (office). Neutral at Trip 1; highlighted on a return trip. */
.tripbtn {
  font: inherit; font-weight: 800; font-size: 11px; white-space: nowrap; cursor: pointer;
  padding: 2px 9px; border-radius: 6px;
  border: 1px solid var(--card-line); background: var(--surface-2); color: var(--muted);
}
.tripbtn:hover { color: var(--ink); }
.tripbtn.ret { background: var(--brand-soft); color: var(--brand); border-color: transparent; }

/* card actions: quiet dots menu; primary action full-width (tech view) */
.dots {
  font: inherit; border: 0; background: transparent;
  color: var(--muted); opacity: .55;
  font-weight: 800; font-size: var(--fs-md);
  padding: 2px 8px; margin: -2px -6px -2px 0;
  border-radius: 6px; cursor: pointer;
  flex-shrink: 0;
}
.dots:hover { opacity: 1; background: var(--surface-2); color: var(--ink); }
.stop-card .primary-row { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); }
.stop-card .primary-row .btn { flex: 1; justify-content: center; min-height: 40px; }

/* action sheet (menu modal) */
.sheet-menu { display: flex; flex-direction: column; gap: var(--sp-2); }
.sheet-menu .btn { justify-content: flex-start; min-height: var(--tap); font-size: var(--fs-md); }

/* ---------- my schedule route ---------- */

.route-wrap { max-width: 560px; }
.route-wrap .board .col { flex: 1 1 auto; width: 100%; max-width: none; }

/* ---------- phone ---------- */

@media (max-width: 700px) {
  /* one column under the thumb: the page scrolls, not the board */
  .board { flex-direction: column; overflow: visible; max-height: none; }
  .board .col { flex: 1 1 auto; width: 100%; max-width: none; max-height: none; overflow-y: visible; }
  .col-head { position: static; margin-top: 0; padding-top: var(--sp-1); }
  .dots { opacity: .8; padding: 6px 12px; }
}