/* Additions for the parts the prototype stubbed out.
 *
 * Every rule here reuses the prototype's own custom properties and visual
 * vocabulary (--takeda, --line, --muted, .card, .row, .hint, .chip metrics).
 * No new colours, no framework, no second design language. If a rule below
 * needs a colour that is not already a variable in ecrf.css, that is a signal
 * the design is drifting, not that a new colour is needed.
 */

/* ---- app chrome: site/patient selector in the existing header ---------- */
header.top .appnav { display:flex; gap:4px; margin-left:24px; }
header.top .appnav a {
  color:var(--muted); text-decoration:none; font-size:13px; font-weight:600;
  padding:6px 11px; border-radius:16px;
}
header.top .appnav a:hover { background:var(--bg); color:var(--ink); }
header.top .appnav a.on { background:var(--newbg); color:var(--new); }
header.top .who { font-size:12px; color:var(--muted); }
header.top .who b { color:var(--ink); }
header.top .signout { color:var(--muted); font-size:12px; text-decoration:none; }
header.top .signout:hover { color:var(--takeda); }
.patchip {
  background:var(--newbg); color:var(--new); border:1px solid #cfe0f5;
  padding:4px 11px; border-radius:20px; font-size:12.5px; font-weight:700;
}
.patchip.locked { background:#eef1f5; color:var(--muted); border-color:var(--line); }

/* ---- record navigation: the prototype's .repeat-bar, made functional ---- */
.repeat-bar .recsel {
  border:1px solid #cfd6de; border-radius:6px; padding:4px 8px;
  font-size:12.5px; font-family:inherit; background:#fff; max-width:280px;
}
.repeat-bar .add:disabled { opacity:.45; cursor:not-allowed; }
.repeat-bar .del {
  background:#fff; color:var(--takeda); border:1px solid #f3b9b3;
  padding:6px 11px; border-radius:6px; font-size:12.5px; font-weight:600; cursor:pointer;
}
.repeat-bar .del:disabled { opacity:.4; cursor:not-allowed; }

/* ---- save state, in the same chip idiom as .verchip ------------------- */
.savebar {
  position:sticky; top:56px; z-index:15; display:flex; align-items:center; gap:10px;
  background:#fff; border:1px solid var(--line); border-radius:8px;
  padding:8px 14px; margin-bottom:14px; font-size:12.5px;
}
.savebar .state { color:var(--muted); }
.savebar .state.saving { color:var(--new); }
.savebar .state.saved  { color:var(--ok); font-weight:600; }
.savebar .state.error  { color:var(--takeda); font-weight:600; }
.savebar .spacer { margin-left:auto; }
.savebar button {
  border:none; border-radius:7px; padding:7px 14px;
  font-size:12.5px; font-weight:600; cursor:pointer; font-family:inherit;
}
.savebar .complete { background:var(--ok); color:#fff; }
.savebar .reopen   { background:#eef1f5; color:var(--ink); }
.savebar .sign     { background:var(--takeda); color:#fff; }
.savebar button:disabled { opacity:.45; cursor:not-allowed; }
.statuspill {
  border-radius:12px; padding:2px 10px; font-size:11.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.4px;
}
.statuspill.empty       { background:#eef1f5; color:var(--muted); }
.statuspill.in_progress { background:var(--newbg); color:var(--new); }
.statuspill.complete    { background:#eef7f0; color:var(--ok); }
.statuspill.signed      { background:var(--takeda); color:#fff; }

/* ---- validation, in the prototype's .hint idiom ------------------------ */
.field .err {
  font-size:11.5px; color:var(--reqs); margin-top:3px; font-weight:600;
}
.field .warnmsg {
  font-size:11.5px; color:#8a6400; margin-top:3px; font-weight:600;
}
.row.has-error { background:#fdf4f3; outline:2px solid #f3b9b3; outline-offset:-2px; border-radius:6px; }
.row.has-warn  { background:#fffaf0; outline:2px solid #ffe2a8; outline-offset:-2px; border-radius:6px; }
.row.has-query { box-shadow:inset 3px 0 0 var(--new); }
.field input.invalid, .field select.invalid { border-color:var(--reqs); background:#fffbfb; }

.issuebox {
  border-radius:8px; padding:10px 14px; margin-bottom:14px; font-size:12.5px;
}
.issuebox.hard { background:var(--exclbg); border:1px solid #f3b9b3; border-left:4px solid var(--excl); color:var(--excl); }
.issuebox.soft { background:#fff7e6; border:1px solid #ffe2a8; border-left:4px solid #e0a800; color:#8a6400; }
.issuebox ul { margin:6px 0 0; padding-left:20px; }
.issuebox li { margin:2px 0; }
.issuebox .ackall {
  background:var(--ok); color:#fff; border:none; padding:5px 12px;
  border-radius:7px; font-weight:600; cursor:pointer; font-size:12px; margin-top:8px;
}

/* ---- query badge on a field, sized like the prototype's .cmt-btn ------- */
.q-btn {
  cursor:pointer; border:none; background:#eef1f5; color:#6b7785; border-radius:14px;
  font-size:11px; padding:1px 8px; margin-left:6px; vertical-align:middle;
  font-weight:600; white-space:nowrap;
}
.q-btn:hover { background:var(--newbg); color:var(--new); }
.q-btn.open { background:var(--new); color:#fff; }

/* ---- tables (dashboard, patients, queries, audit) --------------------- */
table.grid { width:100%; border-collapse:collapse; font-size:13px; background:#fff; }
table.grid th {
  text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.5px;
  color:var(--muted); font-weight:700; padding:9px 10px;
  border-bottom:2px solid var(--line); white-space:nowrap; position:sticky; top:0; background:#fff;
}
table.grid td { padding:8px 10px; border-bottom:1px solid #f1f4f7; vertical-align:top; }
table.grid tr:hover td { background:#fafbfc; }
table.grid td.mono, table.grid th.mono { font-family:monospace; font-size:12px; }
table.grid a { color:var(--new); text-decoration:none; font-weight:600; }
table.grid a:hover { text-decoration:underline; }
.tablewrap { overflow-x:auto; border:1px solid var(--line); border-radius:10px; background:#fff; }

.cellstate { display:inline-block; width:22px; height:22px; border-radius:5px; text-align:center;
  line-height:22px; font-size:11px; font-weight:700; }
.cellstate.empty       { background:#f4f6f9; color:#c3ccd6; }
.cellstate.in_progress { background:var(--newbg); color:var(--new); }
.cellstate.complete    { background:#eef7f0; color:var(--ok); }
.cellstate.signed      { background:var(--takeda); color:#fff; }

/* ---- KPI tiles, using .card metrics ---------------------------------- */
.kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:18px; }
.kpi { background:#fff; border:1px solid var(--line); border-radius:10px; padding:14px 16px;
  box-shadow:0 1px 2px rgba(20,30,50,.04); }
.kpi .n { font-size:26px; font-weight:800; color:var(--ink); line-height:1.1; }
.kpi .l { font-size:11.5px; color:var(--muted); text-transform:uppercase;
  letter-spacing:.5px; font-weight:700; margin-top:4px; }
.kpi.alert .n { color:var(--takeda); }

/* ---- toolbar ---------------------------------------------------------- */
.toolbar { display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.toolbar input[type=text], .toolbar input[type=date], .toolbar select {
  padding:7px 9px; border:1px solid #cfd6de; border-radius:6px;
  font-size:13px; font-family:inherit; background:#fff;
}
.btn {
  background:var(--takeda); color:#fff; border:none; padding:8px 15px; border-radius:7px;
  font-size:12.5px; font-weight:600; cursor:pointer; font-family:inherit; text-decoration:none;
  display:inline-block;
}
.btn:hover { background:var(--takeda-d); }
.btn.ghost { background:#eef1f5; color:var(--ink); }
.btn.ghost:hover { background:#e2e7ee; }
.btn:disabled { opacity:.45; cursor:not-allowed; }

/* ---- dialogs, reusing the prototype's .modal ------------------------- */
.modal .mb label { display:block; font-size:12.5px; font-weight:600; margin:10px 0 4px; }
.modal .mb input[type=text], .modal .mb input[type=password], .modal .mb select, .modal .mb textarea {
  width:100%; padding:8px 10px; border:1px solid #cfd6de; border-radius:6px;
  font-size:13px; font-family:inherit;
}
.modal .mb .note { font-size:12px; color:var(--muted); margin-top:8px; }
.modal .mb .legal {
  background:#f7f9fb; border:1px solid #e2e8ef; border-radius:8px;
  padding:10px 12px; font-size:12px; color:var(--ink); margin-top:12px; line-height:1.5;
}
.modal .mf .err { color:var(--takeda); font-size:12.5px; font-weight:600; margin-right:auto; }

/* ---- misc ------------------------------------------------------------- */
.empty-state { color:var(--muted); font-style:italic; padding:26px; text-align:center; }
.pagehead { display:flex; align-items:baseline; gap:12px; margin-bottom:14px; }
.pagehead h1 { font-size:21px; margin:0; }
.pagehead .sub { color:var(--muted); font-size:13px; }
.lockbanner {
  background:#eef1f5; border:1px solid var(--line); border-left:4px solid var(--muted);
  border-radius:8px; padding:9px 14px; margin-bottom:14px; font-size:12.5px; color:var(--muted);
}
@media (max-width:900px) {
  nav.side { display:none; }
  main { padding:16px; }
  .row { grid-template-columns:1fr; }
}