/* CPX Field Relay additions on top of the shared app.css. Tokens only. */

/* ---------- auth screens ---------- */

.auth-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5);
}

.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: var(--sp-6) var(--sp-5);
}

.auth-brand { display: block; margin-bottom: var(--sp-3); }

.auth-form { margin-top: var(--sp-4); }

.auth-form input {
  width: 100%;
  font: inherit;
  padding: var(--sp-3);
  min-height: var(--tap);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
}

.auth-form input:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

.btn.wide { width: 100%; justify-content: center; }

/* ---------- shell extras ---------- */

.who { font-weight: 600; }
.who.active { background: var(--brand-soft); color: var(--brand); border-color: var(--brand-soft); }

.lead { color: var(--muted); font-size: var(--fs-sm); line-height: 1.5; margin-bottom: var(--sp-3); }

.empty-state { text-align: center; padding: var(--sp-6) var(--sp-4); }

.kv {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
}
.kv b { color: var(--muted); font-weight: 600; }
.kv:last-child { border-bottom: none; }

/* ---------- forms and tables ---------- */

input[type=tel], input[type=number], input[type=date], input[type=email] {
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
  min-height: var(--tap);
}
.q .f-input { width: 100%; }
.q .fine { margin-top: var(--sp-1); }

/* two fields sharing one line (e.g. Date of birth + Room) */
.q-row { display: flex; gap: var(--sp-3); align-items: flex-start; }
.q-row > .q { flex: 1 1 0; min-width: 0; margin-bottom: 0; }
.settings-grid .q { margin-bottom: 0; }

.toolbar {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}

.btn.small { padding: 7px 12px; font-size: var(--fs-sm); min-height: 36px; }
.pin-gate { max-width: 360px; }
tr.dim td { opacity: .6; }
.modal .notice { margin-top: 0; }
.modal form.stack .q { margin-bottom: 0; }

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

@media (max-width: 640px) {
  .topbar {
    flex-wrap: wrap;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
  }
  .topbar .brand { font-size: var(--fs-md); margin-right: auto; }
  .topbar .nav {
    order: 3;
    flex: 0 0 100%;
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .topbar .nav::-webkit-scrollbar { display: none; }
  .topbar .nav button { white-space: nowrap; padding: var(--sp-2) var(--sp-3); }
  .topbar .btn { padding: 8px 12px; font-size: var(--fs-sm); }

  main { padding: var(--sp-3); }
  .page-title { font-size: var(--fs-lg); margin-bottom: var(--sp-3); }
  .step { padding: var(--sp-3); }

  /* tables become cards: each row a block, each cell a label/value line */
  table.responsive thead { display: none; }
  table.responsive, table.responsive tbody, table.responsive tr, table.responsive td { display: block; width: 100%; }
  table.responsive tr {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    margin-bottom: var(--sp-3);
    background: var(--surface);
  }
  table.responsive td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-3);
    border-bottom: 1px solid var(--line);
    padding: var(--sp-2) var(--sp-3);
    text-align: right;
  }
  table.responsive td:last-child { border-bottom: none; }
  table.responsive td[data-l]::before {
    content: attr(data-l);
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--muted);
    text-align: left;
    flex-shrink: 0;
  }
  table.responsive td.row-actions { justify-content: flex-end; flex-wrap: wrap; }
  .row-actions .btn { min-height: var(--tap); }

  .modal { padding: var(--sp-4); }
  .btn-row .btn { flex: 1 1 auto; justify-content: center; }
  .auth-card { padding: var(--sp-5) var(--sp-4); }
}

/* long modals scroll inside themselves on short screens */
.modal { max-height: 92vh; overflow-y: auto; }

/* ---------- schedule ---------- */

.daynav { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.daynav-label { font-size: var(--fs-md); min-width: 120px; text-align: center; }
.daynav input[type=date] { min-height: 36px; padding: 6px 8px; }

/* the board sits at the top now (no page title); give the toolbar a little
   breathing room from the top bar */
.board-toolbar { margin-top: var(--sp-1); }

/* US / XRAY board switch: a segmented pill, the active board lit. US lights
   blue (ultrasound), X-ray lights amber, so staff can tell boards apart at
   a glance and never add to the wrong one. */
.modtoggle {
  display: inline-flex;
  border: 1px solid var(--card-line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface-2);
}
.modbtn {
  font: inherit; font-weight: 800; font-size: var(--fs-sm);
  letter-spacing: .4px; cursor: pointer;
  padding: 7px 16px; min-height: 36px;
  border: 0; background: transparent; color: var(--muted);
}
.modbtn + .modbtn { border-left: 1px solid var(--card-line); }
.modbtn:hover { color: var(--ink); }
.modbtn.on { color: #fff; }
.modbtn.us.on { background: var(--ex-us); }
.modbtn.xray.on { background: var(--warn); }

.temp-chip {
  background: var(--brand-soft);
  color: var(--brand);
  border-radius: var(--radius);
  padding: 2px 8px;
  font-weight: 700;
}
.temp-chip.big { font-size: var(--fs-lg); padding: 4px 10px; }

.progress { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; margin: var(--sp-2) 0 var(--sp-4); }
.progress-fill { height: 100%; background: var(--ok); transition: width var(--dur-med) var(--ease-out); }

.btn.ok-btn { background: var(--ok); border-color: var(--ok); color: #fff; }
.btn.ok-btn:hover { filter: brightness(1.06); background: var(--ok); }

.preview-scroll { max-height: 40vh; overflow-y: auto; }

@media (max-width: 640px) {
  .toolbar .btn { flex: 1 1 auto; }
  .daynav { width: 100%; }
  .daynav-label { flex: 1; }
}

/* ---------- study modifier ---------- */

.modify-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2) var(--sp-5);
  align-items: center;
}
.modify-grid .q { margin-bottom: 0; }
.modify-grid .q label { font-size: var(--fs-xs); color: var(--muted); margin-bottom: 2px; }
.confirm-row input.mono { width: 140px; }

@media (max-width: 640px) {
  .modify-grid { grid-template-columns: 1fr; }
  .modify-grid .screen-label:nth-child(2) { display: none; }
}

main { max-width: 1560px; }

/* ---------- theme toggle ---------- */

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

.theme-btn {
  font-size: var(--fs-lg);
  line-height: 1;
  padding: 6px 12px;
  min-width: var(--tap);
}

/* ---------- small toggle chips (order form problem statuses) ---------- */

.tgl-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.tgl {
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: 5px 12px;
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
}
.tgl:hover { color: var(--ink); }
.tgl.on {
  background: var(--err-soft);
  border-color: var(--err);
  color: var(--err);
  font-weight: 800;
}
.tgl-row.brand .tgl.on {
  background: var(--brand-soft);
  border-color: var(--brand);
  color: var(--brand);
}

/* ---------- type-ahead combo (facility field) ---------- */

.combo { position: relative; }
.combo-list {
  position: absolute;
  top: calc(100% + 4px); left: 0; right: 0;
  z-index: 40;
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  max-height: 250px;
  overflow-y: auto;
}
.combo-opt {
  font: inherit;
  text-align: left;
  border: 0;
  background: transparent;
  color: var(--ink);
  padding: 10px 12px;
  cursor: pointer;
}
.combo-opt:hover, .combo-opt.on { background: var(--surface-2); }
.combo-opt.add { color: var(--brand); font-weight: 700; }

/* exam-type picker: the field is a button that opens a catalog modal */
.exampick-btn {
  width: 100%; text-align: left; font: inherit; cursor: pointer;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px 12px; min-height: var(--tap);
  white-space: normal; overflow-wrap: anywhere; line-height: 1.4;
}
.exampick-btn:hover { border-color: var(--brand); }
.exampick-btn.placeholder { color: var(--muted); }
.modal.exampick { max-width: 560px; }
.exampick .search {
  width: 100%; font: inherit; color: var(--ink); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 9px 11px; min-height: 40px; margin-bottom: var(--sp-2);
}
.exampick-body { max-height: 52vh; overflow-y: auto; }
.exampick-cat {
  font-size: var(--fs-xs); font-weight: 800; text-transform: uppercase; letter-spacing: .6px;
  color: var(--muted); margin: var(--sp-3) 0 var(--sp-1);
}
.exampick-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.exampick-opt {
  font: inherit; font-size: var(--fs-sm); cursor: pointer;
  padding: 8px 12px; min-height: 38px; border-radius: 999px;
  border: 1px solid var(--card-line); background: var(--card); color: var(--ink);
}
.exampick-opt:hover { border-color: var(--brand); color: var(--brand); }
.exampick-opt.sel { background: var(--brand-soft); color: var(--brand); border-color: transparent; font-weight: 700; }
/* laterality: an extremity exam shows its name plus a left / right / both chooser */
.exampick-lat { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; width: 100%; padding: 2px 0; }
.exampick-lat-name { font-size: var(--fs-sm); color: var(--ink); flex: 1 1 120px; }
.exampick-sides { display: inline-flex; gap: 4px; }
.exampick-side {
  font: inherit; font-size: var(--fs-sm); cursor: pointer;
  padding: 7px 12px; min-height: 36px; border-radius: 999px;
  border: 1px solid var(--card-line); background: var(--card); color: var(--muted);
}
.exampick-side:hover { border-color: var(--brand); color: var(--brand); }
.exampick-side.sel { background: var(--brand-soft); color: var(--brand); border-color: transparent; font-weight: 700; }
/* edit mode: a small remove control beside each exam */
.exampick-optwrap { display: inline-flex; align-items: center; gap: 2px; }
.exampick-x {
  font: inherit; line-height: 1; cursor: pointer;
  width: 26px; height: 26px; border-radius: 999px;
  border: 1px solid var(--card-line); background: var(--card); color: var(--err);
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.exampick-x:hover { background: var(--err-soft); border-color: var(--err); }
.btn.on { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }

.sheet-menu .sheet-hint { margin: -4px 0 6px; text-align: center; }