/* SAD prototypes: product-only components (SAD 19 UX1). Brand values come only from tokens.css and the kit's
   component tokens (ui.css §1). No hex colours here (05 G4b). Kit files are copied unedited. */

/* ---- Header extras: search, customer-safe switch ---- */
.bar-search { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: var(--r-pill);
  border: 2px solid var(--line); background: var(--surface); color: var(--muted); font: 600 14px var(--font-ui); cursor: pointer; }
.bar-search:hover { border-color: var(--accent); }
.kbd { display: inline-block; padding: 0 6px; border: 1px solid var(--line); border-radius: 6px; font: 600 12px var(--font-mono); color: var(--muted); background: var(--surface-2); }
.safe-switch { display: inline-flex; align-items: center; gap: 8px; }

/* ---- Customer-safe mode (PRIV1): hides private data and shows a banner ---- */
.safe-banner { display: none; background: var(--tint-amber); color: var(--amber-text); border-bottom: 1px solid var(--line); padding: 8px 32px; font-weight: 700; margin-top: 3px; }
body.safe .safe-banner { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
body.safe [data-private] { display: none !important; }
.callbar { display: none; }
body.safe .callbar.show { display: flex; }

/* ---- Queue rows (My work, triage): one record, one next action ---- */
.qrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-height: var(--head-card); padding: 10px var(--pad-card);
  background: var(--surface); border-radius: var(--r-card); border: 2px solid transparent; min-width: 0; }
.qrow:hover { border-color: var(--mint); }
.qrow .q-main { flex: 1 1 260px; min-width: 0; display: grid; gap: 2px; }
.qrow .q-title { font-weight: 700; color: var(--heading); overflow-wrap: anywhere; }
.qrow .q-meta { color: var(--muted); font-size: var(--t-small); overflow-wrap: anywhere; }
.qrow .q-act { display: flex; flex-wrap: wrap; gap: var(--gap-tight); align-items: center; }
.qlist { display: grid; gap: 8px; min-width: 0; }

/* ---- Timeline (ticket, contact) ---- */
.timeline { display: grid; gap: 10px; min-width: 0; }
.tl { border: 2px solid var(--line); border-radius: var(--r-box); padding: var(--pad-box); display: grid; gap: 6px; min-width: 0; background: var(--surface); }
.tl.internal { background: var(--tint-amber); border-color: transparent; }
.tl.out { border-left: 6px solid var(--teal); }
.tl-head { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; font-size: var(--t-small); color: var(--muted); }
.tl-head b { color: var(--heading); font-size: var(--t-body); }
.tl-sum { font-weight: 600; color: var(--heading); }
.tl-body { overflow-wrap: anywhere; }

/* ---- Record header line ---- */
.recline { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.recline .big { font: 800 22px var(--font-ui); color: var(--heading); font-variant-numeric: tabular-nums; }

/* ---- Supplier invoice: PDF beside the form ---- */
.pdf { background: var(--paper); color: var(--paper-text); border-radius: var(--r-box); border: 2px solid var(--line); padding: 22px; display: grid; gap: 10px; font-size: 13px; min-width: 0; }
.pdf h3 { margin: 0; color: var(--paper-heading); font-size: 18px; }
.pdf .pdf-meta { display: grid; grid-template-columns: max-content 1fr; gap: 2px 14px; }
.pdf table { width: 100%; border-collapse: collapse; }
.pdf th, .pdf td { text-align: left; padding: 4px 6px; border-bottom: 1px solid var(--line); }
.pdf .num { text-align: right; font-variant-numeric: tabular-nums; }
.pdf .hl { background: var(--tint-info); }
.from { font-size: 12px; font-style: italic; color: var(--accent-text); font-weight: 600; }
.saved { font-size: 12px; color: var(--ok-text); font-weight: 700; }
table.t td input, table.t td select { height: 38px; padding: 0 10px; }
table.t td.ctl-cell { padding: 4px 6px; }
.sumbox { }
.sum-row { display: flex; justify-content: space-between; gap: 12px; font-variant-numeric: tabular-nums; }
.sum-row.total { font-weight: 800; color: var(--heading); border-top: 2px solid var(--mint); padding-top: 6px; }
.match { color: var(--ok-text); font-weight: 700; }
.mismatch { color: var(--danger); font-weight: 700; }

/* ---- Checks list (billing run) ---- */
.checks-list { display: grid; gap: 8px; }
.check-row { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; padding: 10px var(--pad-box); border-radius: var(--r-box); border: 2px solid var(--line); background: var(--surface); }
.check-row .grow { flex: 1 1 240px; min-width: 0; }

/* ---- Command bar (Ctrl+K, SAD 19 UX3) ---- */
dialog.cmd { border: 0; border-radius: var(--r-card); padding: 14px; width: min(640px, calc(100% - 24px)); background: var(--surface); color: var(--text);
  box-shadow: var(--shadow-pop); margin-top: 10vh; }
dialog.cmd::backdrop { background: rgba(31, 42, 48, .45); }
.cmd-list { display: grid; gap: 4px; max-height: 50vh; overflow: auto; margin-top: 10px; }
.cmd-item { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: var(--r-control); cursor: pointer; border: 0; background: none; text-align: left; font: 600 15px var(--font-ui); color: var(--text); width: 100%; }
.cmd-item small { color: var(--muted); font-weight: 500; margin-left: auto; }
.cmd-item.on, .cmd-item:hover { background: var(--tint-info); }

/* ---- Prototype note ---- */
.proto-note { font-size: var(--t-small); color: var(--muted); border: 2px dashed var(--line); border-radius: var(--r-box); padding: 8px 12px; }

@media (max-width: 599px) { .safe-banner { padding: 8px 12px; } .bar-search .kbd, .bar-search .lbl { display: none; } }
@media (min-width: 600px) and (max-width: 999px) { .safe-banner { padding: 8px 16px; } }

/* ---- Line entry table: room for codes and descriptions ---- */
table.t.entry td.ctl-cell input { min-width: 90px; }
table.t.entry td.ctl-cell:nth-child(2) input { min-width: 240px; }
table.t.entry td.ctl-cell:nth-child(6) input { min-width: 170px; }
.safe-lbl { font-size: 14px; color: var(--muted); }
@media (max-width: 999px) { .safe-lbl, .bar-user { display: none; } }
table.t.entry td.ctl-cell:nth-child(3) input { min-width: 70px; max-width: 90px; }
table.t.entry td.ctl-cell:nth-child(4) input { min-width: 90px; max-width: 120px; }
table.t.entry td { vertical-align: middle; }

/* ---- Split panes (SCR-PDF1): document beside the entry, each scrolling on its own, resizable. Kit candidate ---- */
.split { display: grid; grid-template-columns: minmax(320px, 1fr) 14px minmax(360px, calc(var(--split, 60) * 1%)); gap: 0; min-width: 0; align-items: start; }
.split-pane { min-width: 0; overflow: auto; max-height: calc(100vh - 140px); overscroll-behavior: contain; padding-bottom: 8px; }
.split-a { padding-right: 4px; }
.split-handle { align-self: stretch; cursor: col-resize; border-radius: var(--r-pill); margin: 0 4px; background: var(--line); min-height: 120px; touch-action: none; }
.split-handle:hover, .split-handle:focus-visible, .split-handle.drag { background: var(--accent); outline: none; }
.split.dragging { user-select: none; }
.split-b .card { min-height: calc(100vh - 160px); }
.pdf-wrap { overflow: auto; min-width: 0; }
.pdf-wrap .pdf { zoom: var(--pdf-zoom, 1); }
@media (max-width: 999px) {
  .split { grid-template-columns: minmax(0, 1fr); gap: var(--gap); }
  .split-handle { display: none; }
  .split-b { order: -1; }
  .split-pane { max-height: none; overflow: visible; }
  .split-b .card { min-height: 0; }
}

/* ---- Application (0.8.0): a POST form that sits inline, like a button (Sign out, End step-up) ---- */
.inline-form { display: inline-flex; margin: 0; }

/* ---- 0.10.0 (session 4): customers, the customer hub, the address book ---- */
/* List rows open a record: the title is the link (List pattern, UX1). */
.lrow a.q-title { color: var(--heading); text-decoration: none; }
.lrow a.q-title:hover, .lrow a.q-title:focus-visible { color: var(--accent-text); text-decoration: underline; }
/* A list's search: the box takes the room, the button sits at its foot. */
.list-search { display: flex; flex-wrap: wrap; gap: var(--gap-tight, 8px) 12px; align-items: flex-end; margin: 0; min-width: 0; }
.list-search .field { flex: 1 1 260px; min-width: 0; }
.filters { margin-top: 10px; }
/* Autosave state beside a field: saving, saved, or why not. */
.saved.busy { color: var(--muted); }
.saved.err { color: var(--danger); }
input.conflict, select.conflict, textarea.conflict, [aria-invalid="true"] { border-color: var(--danger); }
td.ctl-cell .saved { display: block; }
.cmd-foot { margin: 8px 2px 0; font-size: var(--t-small); color: var(--muted); }
.flash { margin-bottom: var(--gap, 16px); }
@media (max-width: 599px) { .bar-until { display: none; } .bar-search { padding: 0 10px; } }