/* OPT-292: Ordering page — iPad + desktop responsive. Uses the app's design
   tokens (--surface/--border/--accent/...) from style.css. */

/* The page shell (div.page, style.css) is `height:100vh; overflow:hidden`, so
   every page root must claim the leftover height and allow itself to shrink
   (flex:1 + min-height:0) or its content simply grows past the viewport and is
   clipped with NO scrollbar — which is exactly what happened here: a two-pair
   dispense put ~550px of the order widget below the fold, unreachable. The
   page root now owns the viewport height and the detail pane scrolls inside
   its own card. Same failure mode as div.admin's flex:1/min-height:0. */
.ord-page {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.ord-workspace {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 16px;
  padding: 16px;
  align-items: stretch;   /* both columns share the row's full height */
  flex: 1;
  min-height: 0;
}

/* ── sidebar ─────────────────────────────────────────────────────────────── */
.ord-sidebar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md, 10px);
  overflow: hidden;
  /* was position:sticky — a workaround for the unconstrained-height layout
     above; now the grid row is viewport-bounded, so it's a plain flex column
     whose list scrolls internally. */
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.ord-side-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; font-weight: 600; font-size: 13px;
  text-transform: uppercase; letter-spacing: .04em; color: var(--text-secondary);
  background: var(--surface-2); border-bottom: 1px solid var(--border);
}
.ord-count {
  background: var(--accent-soft); color: var(--accent-ink, var(--accent));
  border-radius: 40px; padding: 1px 9px; font-size: 12px; font-weight: 700;
}
/* OPT-296: red indicator when orders are awaiting */
.ord-count.has-orders {
  background: var(--danger, #d6453d); color: #fff;
  box-shadow: 0 0 0 3px rgba(214, 69, 61, .18);
}
.ord-side-empty { padding: 16px 14px; color: var(--text-secondary); font-size: 13px; }
.ord-side-list { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto; }
.ord-side-item {
  text-align: left; background: none; border: none; cursor: pointer;
  padding: 11px 14px; border-bottom: 1px solid var(--border);
  border-left: 3px solid transparent; transition: background .12s;
}
.ord-side-item:hover { background: var(--surface-2); }
.ord-side-item.active { background: var(--accent-soft); border-left-color: var(--accent); }
.ord-side-name { font-weight: 600; font-size: 14px; color: var(--ink); }
.ord-side-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* ── detail panel ────────────────────────────────────────────────────────── */
.ord-detail {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md, 10px);
  padding: 16px 18px;
  /* scrolls within the card rather than off the bottom of the page — the
     safety net for the tallest dispenses (several pairs); a single pair fits
     without scrolling thanks to the compacted workflow steps below. */
  min-height: 0;
  overflow-y: auto;
}
.ord-detail-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 14px; padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.ord-detail-name { font-family: var(--serif); font-size: 22px; font-weight: 500; margin: 0; color: var(--ink); }
.ord-detail-phone { font-size: 13px; color: var(--muted); margin-top: 2px; }

.ord-pairs { display: flex; flex-direction: column; gap: 14px; }

/* ── one pair ────────────────────────────────────────────────────────────── */
.ord-pair {
  border: 1px solid var(--border); border-radius: var(--r-sm, 7px);
  background: var(--surface-2); padding: 14px;
}
.ord-pair-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 10px;
}
.ord-pair-title { font-weight: 600; font-size: 14.5px; color: var(--ink); }
.ord-check { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-size: 13px; color: var(--ink); }
.ord-check input { width: 18px; height: 18px; accent-color: var(--accent); }

.ord-tols { display: flex; flex-direction: column; gap: 6px; }
.ord-eye {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-sm, 6px); padding: 8px 10px;
}
.ord-eye-lbl {
  font-weight: 700; font-size: 13px; color: var(--on-accent);
  background: var(--accent); border-radius: 50%;
  width: 24px; height: 24px; display: grid; place-items: center; flex: none;
}
.ord-cell { display: inline-flex; align-items: baseline; gap: 5px; font-family: var(--mono); }
.ord-k { font-size: 10.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; }
.ord-v { font-size: 14px; font-weight: 600; color: var(--ink); }
.ord-tol { font-size: 12px; color: var(--accent-ink, var(--accent)); font-weight: 600; }
.ord-range { font-size: 11px; color: var(--muted); }

.ord-meas { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; }
.ord-meas-item { font-size: 12.5px; color: var(--text-secondary); display: inline-flex; gap: 5px; }

.ord-status { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }

/* OPT-299: per-component order date / from-stock + Glasses/CL tabs */
.ord-orders { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; }
.ord-orderfield { display: inline-flex; align-items: center; gap: 6px; }
.ord-of-lbl { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.ord-orderfield input[type=date] {
  border: 1px solid var(--border-2); border-radius: var(--r-sm, 6px);
  padding: 4px 8px; font-size: 12.5px; color: var(--ink);
  background: var(--surface); font-family: var(--sans);
}
.ord-of-stock { font-size: 12px; font-weight: 700; color: var(--accent-ink, var(--accent)); }

/* ── OPT-327: chronological Frame/Lens workflow table (glasses jobs) ─────── */
.ord-wf {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 18px;
  margin-top: 12px;
}
.ord-wf-head {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); padding-bottom: 6px; margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
/* Compact steps: each step used to be a ~73px block (label line + roomy
   padding above a single checkbox), so the 5-step Lens column alone ran ~365px
   and a pair card ~660px. Putting the label inline with its control and
   trimming the padding/gap roughly halves a step, which is what lets a
   one-pair dispense fit the viewport without scrolling. */
.ord-wf-col { display: flex; flex-direction: column; gap: 5px; }
.ord-wf-step {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm, 6px);
  padding: 5px 10px; transition: opacity .12s;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  min-height: 34px;
}
.ord-wf-step.disabled { opacity: .45; pointer-events: none; }
.ord-wf-step-lbl {
  font-size: 10.5px; font-weight: 700; color: var(--muted); text-transform: uppercase;
  letter-spacing: .03em; margin-bottom: 0; flex: none;
}
.ord-wf-locked { font-size: 12.5px; color: var(--muted); font-style: italic; }

.ord-wf-check { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-size: 13px; color: var(--ink); }
.ord-wf-check input { width: 18px; height: 18px; accent-color: var(--accent); }
.ord-wf-check input:disabled { cursor: not-allowed; }
.ord-wf-check.disabled { cursor: not-allowed; color: var(--muted); }
.ord-wf-check-lbl { font-weight: 500; }
.ord-wf-note {
  font-size: 11px; font-weight: 700; color: var(--accent-ink, var(--accent));
  background: var(--accent-soft); border-radius: 40px; padding: 1px 8px;
}

.ord-wf-final {
  grid-column: 1 / -1;
  margin-top: 4px; padding: 7px 14px;
  background: var(--accent-soft); border: 1px solid var(--accent);
  border-radius: var(--r-sm, 6px); display: flex; justify-content: center;
}
.ord-wf-final.disabled {
  background: var(--surface); border-color: var(--border); opacity: .6; pointer-events: none;
}
.ord-wf-final-check { font-size: 14.5px; font-weight: 700; }
.ord-wf-final-check input { width: 20px; height: 20px; accent-color: var(--accent); }

.ord-tabs { display: flex; gap: 6px; margin-bottom: 14px; }
.ord-tab {
  border: 1px solid var(--border); background: var(--surface);
  border-radius: 40px; padding: 5px 14px; font-size: 13px; font-weight: 600;
  color: var(--text-secondary); cursor: pointer; font-family: var(--sans);
}
.ord-tab:hover { border-color: var(--border-strong); }
.ord-tab.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink, var(--accent)); }

/* ── OPT-329: page-level Glasses / Contact Lenses tabs ────────────────────── */
.ord-page-tabs { display: flex; gap: 6px; padding: 16px 16px 0; }

/* ── OPT-329: Contact Lenses tab — cross-patient, grouped by manufacturer ── */
.ord-cl-page { padding: 16px; }

.ord-cl-boxes { display: flex; flex-direction: column; gap: 16px; margin-top: 4px; }
.ord-cl-box {
  border: 1px solid var(--border); border-radius: var(--r-md, 10px);
  background: var(--surface); overflow: hidden;
}
.ord-cl-box-scroll { overflow-x: auto; }
.ord-cl-box-head {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 10px; padding: 12px 14px; background: var(--surface-2); border-bottom: 1px solid var(--border);
}
.ord-cl-box-title {
  display: flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 14.5px; color: var(--ink);
}
.ord-cl-box-apply { display: flex; align-items: center; gap: 8px; }
.ord-cl-box-apply input[type=text] {
  border: 1px solid var(--border-2); border-radius: var(--r-sm, 6px);
  padding: 5px 9px; font-size: 12.5px; color: var(--ink);
  background: var(--surface); font-family: var(--sans); width: 150px;
}
.ord-cl-box-apply .btn[disabled] { opacity: .5; cursor: not-allowed; }

.ord-cl-table { width: 100%; min-width: 640px; border-collapse: collapse; }
.ord-cl-table th {
  text-align: left; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; color: var(--muted); padding: 8px 12px; border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.ord-cl-table td {
  padding: 8px 12px; font-size: 13px; color: var(--ink);
  border-bottom: 1px solid var(--border); vertical-align: middle;
}
.ord-cl-row:last-child td { border-bottom: none; }
.ord-cl-row.ordered { opacity: .55; }
.ord-cl-px { font-weight: 600; white-space: nowrap; }
.ord-cl-pow { font-family: var(--mono); font-size: 12.5px; white-space: nowrap; }
.ord-cl-num {
  border: 1px solid var(--border-2); border-radius: var(--r-sm, 6px);
  padding: 4px 8px; font-size: 12.5px; color: var(--ink);
  background: var(--surface); font-family: var(--sans); width: 110px;
}

.ord-empty { text-align: center; padding: 40px 16px; }
.ord-empty-t { font-size: 16px; font-weight: 600; color: var(--ink); }
.ord-empty-s { font-size: 13px; color: var(--muted); margin-top: 4px; }

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

/* ── OPT-293: printable lab sheet (hidden on screen, shown only in print) ─── */
.ord-labsheet { display: none; }

/* OPT-373: the `body * { visibility: hidden }` hide-everything rule is now
   declared once, in style.css's "Print foundation" block — style.css and
   ordering.css are always loaded together (see index.html), so it already
   covers this page. This block only restores the lab sheet's own reveal.
   OPT-407: the lab sheet now mounts practice-letterhead (optos.print-views)
   and the shared .print-section / .print-section-lbl / .print-num classes
   from style.css at its top and inside each pair block. The
   `.ord-labsheet *` reveal below is a universal descendant selector, so it
   already un-hides those nested elements along with everything else in this
   print area — no separate rule was needed to extend the reveal to them. */
@media print {
  .ord-labsheet {
    display: block !important; visibility: visible;
    position: fixed; top: 0; left: 0; width: 100%;
    padding: 28px; color: #000; background: #fff;
    font-family: var(--sans);
  }
  .ord-labsheet * { visibility: visible; }
}

.ls-head { margin-bottom: 16px; }
.ls-titlerow { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 10px; }
.ls-title {
  font-family: var(--sans); font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.6px; color: #000;
}
.ls-meta { font-size: 12px; color: #555; }
.ls-patient { font-size: 13px; }
.ls-name { font-weight: 700; font-size: 15px; }
.ls-pair { border: 1px solid #000; border-radius: 4px; padding: 12px; page-break-inside: avoid; }
.ls-pair-h { font-size: 12px; color: #333; }
.ls-rx { width: 100%; border-collapse: collapse; margin-bottom: 10px; font-family: var(--mono); }
.ls-rx th, .ls-rx td { border: 1px solid #000; padding: 4px 8px; text-align: center; font-size: 13px; }
.ls-rx th { background: #eee; }
.ls-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; font-size: 13px; }
.ls-grid > div { display: flex; gap: 6px; }
.ls-k { font-weight: 700; min-width: 64px; }
.ls-tol { margin-top: 8px; font-family: var(--mono); font-size: 12px; }

/* ── iPad portrait / narrow: stack sidebar above detail ──────────────────── */
@media (max-width: 900px) {
  .ord-workspace { grid-template-columns: 1fr; }
  .ord-sidebar { position: static; }
  .ord-side-list { max-height: 280px; }
  /* larger touch targets */
  .ord-side-item { padding: 14px; }
  .ord-status .btn { padding: 9px 14px; }
  .ord-check input { width: 22px; height: 22px; }
  /* OPT-327: stack the Frame/Lens workflow columns (each self-contained with
     its own head, so Frame's head+steps stay together above Lens's) */
  .ord-wf { grid-template-columns: 1fr; gap: 14px; }
  .ord-wf-check input { width: 22px; height: 22px; }
  .ord-wf-final-check input { width: 24px; height: 24px; }
  /* OPT-329: page-level tabs + CL ordering tab — larger touch targets, box
     header controls stack instead of wrapping awkwardly, table scrolls
     horizontally within its own box rather than squeezing columns. */
  .ord-page-tabs .ord-tab { padding: 9px 16px; }
  .ord-cl-box-head { flex-direction: column; align-items: stretch; }
  .ord-cl-box-apply { flex-direction: column; align-items: stretch; }
  .ord-cl-box-apply input[type=text] { width: 100%; }
  .ord-cl-box-apply .btn { padding: 9px 14px; }
  .ord-cl-num { width: 100%; }
}

/* ── OPT-831: the ordering page on a phone ───────────────────────────────────
   This file had exactly ONE breakpoint, at 900px, and nothing below it — so the
   page was never adapted to a phone at all.

   The reported symptom was CL job rows hanging over their card. Confirmed by
   measuring and screenshotting the running app at 375px: the page itself does
   NOT overflow (.ord-cl-box-scroll is doing its job), but .ord-cl-table's
   640px min-width means only three of eight columns fit, and the rest are
   clipped dead against the card's inner edge with nothing to suggest they are
   there. It reads as broken rather than scrollable.

   Three changes, in order of how much they help:

   1. STICKY PATIENT COLUMN. Scrolling a job table sideways is useless if you
      lose track of whose job it is. The first column stays put; everything else
      moves under it. This is the fix that makes the scroll usable rather than
      merely present.
   2. LET THE HEADERS AND POWERS WRAP. Lowering min-width alone does nothing and
      was measured doing nothing: min-width is a floor, and this table's natural
      content width is 881px because the header cells and .ord-cl-pow are
      white-space: nowrap. Releasing that on a phone is what actually narrows
      it; the floor comes down too so the release can take effect.
   3. Page and card gutters cut to phone proportions; 16px + 18px of nested
      padding was eating a tenth of the screen.

   NOT THE REAL ANSWER, and deliberately so: an eight-column table is the wrong
   shape for a phone entirely, and the product direction is that lists become
   expandable previews (OPT-822's .acc-list pattern, already applied to
   Collections in OPT-823). That needs ordering_views.cljs, which is outside
   this ticket's file scope — filed separately. This makes the current shape
   usable in the meantime. */
@media (max-width: 640px) {
  .ord-cl-page { padding: 12px; }
  .ord-detail  { padding: 12px 12px; }

  .ord-cl-table { min-width: 480px; }
  .ord-cl-table th {
    padding: 8px 10px;
    white-space: normal;        /* the nowrap is what pins this table at 881px */
  }
  .ord-cl-table td { padding: 8px 10px; }
  /* Powers are the widest free-form cell; let them wrap rather than run. The
     patient name keeps its nowrap — it is the sticky anchor column. */
  .ord-cl-pow { white-space: normal; }

  /* Anchor the patient column. Needs an opaque background or the scrolling
     cells show through, and a z-index above them. */
  .ord-cl-table th:first-child,
  .ord-cl-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--surface);
    box-shadow: 1px 0 0 var(--border);
  }
  /* The header row's own background must win over the body cells' when both
     are sticky, or the corner cell reads as a body cell. */
  .ord-cl-table th:first-child { background: var(--surface-2); z-index: 2; }
}