/* AQcredix — styling for the three modules added together: Evidence, Training and
 * Accreditation.
 *
 * ONE FILE FOR THREE PAGES, because they were built together and share the same handful
 * of new pieces — a stat strip, a status pill, a filter row and a scrolling table wrapper.
 * Three near-identical stylesheets would have drifted apart within a month.
 *
 * Everything reuses the existing workspace classes where they exist: .ws-table, .ws-empty,
 * .ws-modal-in, .ws-form, .ws-f and .cal-tabs are all defined elsewhere and are not
 * redefined here. Only what is genuinely new is below.
 *
 * Palette tokens only — no literal colours — so all three follow light, dark and neon
 * without a second definition anywhere.
 */

/* ---------- shared: a horizontally scrolling table on a phone ----------
   A register with seven columns cannot shrink to 375px and stay readable. It scrolls
   inside its own box rather than making the whole page scroll sideways, which is the
   thing that makes a site feel broken on a phone. */
.ws-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.ws-tablewrap .ws-table{min-width:640px;}

/* ---------- shared: the stat strip ---------- */
.reg-stats{display:flex;gap:12px;flex-wrap:wrap;}
.reg-stat{flex:1 1 150px;border:1px solid var(--border);border-radius:var(--r-md);
  padding:14px 16px;background:var(--bg-elevated);}
.reg-stat b{display:block;font-family:var(--font-mono);font-size:26px;line-height:1.15;
  color:var(--fg);}
.reg-stat span{font-size:12px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--fg-faint);}
/* Only two states get a colour, and only when the number is not zero — a strip where
   everything is coloured tells you nothing about where to look. */
.reg-stat.bad b{color:var(--nc);}
.reg-stat.warn b{color:var(--warn);}
.reg-stat.ok b{color:var(--ok);}

/* ---------- shared: filter row ---------- */
.reg-filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:18px 0;}
.reg-filters select{background:var(--bg);border:1px solid var(--border);
  border-radius:var(--r-sm);padding:9px 12px;color:var(--fg);font:inherit;font-size:14px;}
.reg-filters select:focus{outline:2px solid var(--accent-bright);outline-offset:1px;}

/* ---------- training: status pills ---------- */
.tr-tag{display:inline-block;font-size:11.5px;font-weight:700;padding:2px 9px;
  border-radius:999px;letter-spacing:.02em;white-space:nowrap;
  background:var(--bg);color:var(--fg-faint);border:1px solid var(--border);}
.tr-tag.ok{background:var(--ok-tint,rgba(46,160,120,.16));color:var(--ok);border-color:transparent;}
.tr-tag.warn{background:var(--warn-tint);color:var(--warn);border-color:transparent;}
.tr-tag.bad{background:var(--nc-tint,rgba(190,60,60,.16));color:var(--nc);border-color:transparent;}
.tr-sub{display:block;font-size:12px;color:var(--fg-faint);margin-top:2px;}
.tr-hint,.ac-hint{font-size:12.5px;line-height:1.6;color:var(--fg-faint);margin:6px 0 0;}
.tr-edit{background:transparent;border:1px solid var(--border);color:var(--fg-muted);
  border-radius:var(--r-sm);padding:4px 11px;font:inherit;font-size:12.5px;cursor:pointer;}
.tr-edit:hover{color:var(--accent-text);border-color:var(--brand-2);}

/* ---------- evidence ---------- */
.ev-form{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;}
.ev-form label{font-size:12px;font-weight:700;color:var(--fg-muted);
  display:block;margin-bottom:5px;}
.ev-form input{background:var(--bg);border:1px solid var(--border);
  border-radius:var(--r-sm);padding:11px 14px;color:var(--fg);font:inherit;
  font-family:var(--font-mono);font-size:16px;letter-spacing:.04em;width:180px;}
.ev-form input:focus{outline:2px solid var(--accent-bright);outline-offset:1px;
  border-color:transparent;}
.ev-hint{font-size:12.5px;color:var(--fg-faint);margin:10px 0 0;}

.ev-head{margin:28px 0 18px;}
.ev-head h2{font-size:clamp(19px,2.2vw,25px);line-height:1.3;margin:8px 0 6px;
  max-width:70ch;}
.ev-ctx{font-size:13px;color:var(--fg-faint);margin:0;}
.ev-unknown{color:var(--fg-muted);}

/* The one-line answer, before any of the detail. Someone standing beside an assessor
   needs to know instantly whether there is anything to show at all. */
.ev-summary{padding:13px 16px;border-radius:var(--r-md);font-size:14.5px;
  border:1px solid var(--border);margin-bottom:22px;}
.ev-summary.has{background:var(--ok-tint,rgba(46,160,120,.12));border-color:transparent;}
.ev-summary.none{background:var(--warn-tint);border-color:transparent;color:var(--warn);}

.ev-actions{margin-bottom:20px;}
.ev-block{margin-bottom:24px;}
.ev-block h3{font-size:14px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--fg-faint);margin:0 0 10px;font-weight:650;}
.ev-count{display:inline-block;margin-left:6px;font-family:var(--font-mono);
  font-size:12px;color:var(--fg-muted);background:var(--bg-elevated);
  border:1px solid var(--border);border-radius:999px;padding:1px 8px;letter-spacing:0;}
.ev-rows{border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;}
.ev-row{display:flex;align-items:center;gap:12px;padding:11px 14px;
  border-bottom:1px solid var(--border);background:var(--bg-elevated);}
.ev-row:last-child{border-bottom:0;}
.ev-main{flex:1 1 auto;min-width:0;font-size:14.5px;color:var(--fg);}
.ev-sub{color:var(--fg-faint);font-size:13px;}
.ev-meta{flex:0 1 auto;font-size:12.5px;color:var(--fg-faint);text-align:right;}
.ev-tag{flex:none;font-size:11px;font-weight:700;padding:2px 9px;border-radius:999px;
  background:var(--bg);color:var(--fg-faint);border:1px solid var(--border);}
.ev-tag.ok{background:var(--ok-tint,rgba(46,160,120,.16));color:var(--ok);border-color:transparent;}
.ev-tag.warn{background:var(--warn-tint);color:var(--warn);border-color:transparent;}
.ev-tag.nc{background:var(--nc-tint,rgba(190,60,60,.16));color:var(--nc);border-color:transparent;}
.ev-none{font-size:13.5px;color:var(--fg-faint);margin:0;padding:10px 0;line-height:1.6;}

@media (max-width:620px){
  .ev-row{flex-wrap:wrap;}
  .ev-meta{text-align:left;flex-basis:100%;}
  .ev-form input{width:100%;}
}

/* Printed straight from the page during an assessment, so the chrome goes and the
   evidence stays. Nobody is going to export a PDF while somebody waits. */
@media print{
  .ws-nav,.ws-topbar,.ev-form,.ev-hint,.ev-actions,#site-header,#site-footer{display:none !important;}
  .ev-rows{border-color:#999;}
  .ev-row{background:#fff;break-inside:avoid;}
  .ev-block{break-inside:avoid;}
}

/* ---------- accreditation ---------- */
.ac-hero{border:1px solid var(--border);border-radius:var(--r-lg);
  padding:clamp(22px,3vw,34px);background:var(--bg-elevated);}
.ac-hero h2{font-size:clamp(24px,3vw,34px);margin:6px 0 6px;letter-spacing:-.02em;}
.ac-desc{color:var(--fg-muted);font-size:14.5px;margin:0 0 16px;}
.ac-next{font-size:clamp(15px,1.8vw,19px);margin:0;color:var(--fg);}
.ac-cert{font-family:var(--font-mono);font-size:12.5px;color:var(--fg-faint);margin:12px 0 0;}
.ac-hero.ok .ac-next{color:var(--ok);}
.ac-hero.warn .ac-next{color:var(--warn);}
.ac-hero.bad .ac-next{color:var(--nc);}
.ac-hero.none{border-style:dashed;}

/* A vertical line rather than a horizontal one: seven stages will not fit across a phone,
   and a timeline that has to scroll sideways is a timeline nobody reads to the end. */
.ac-timeline{margin:8px 0 30px;padding-left:6px;}
.ac-step{display:flex;gap:14px;align-items:flex-start;padding:12px 0 12px 18px;
  position:relative;border-left:2px solid var(--border);}
.ac-step:last-child{border-left-color:transparent;}
.ac-dot{position:absolute;left:-7px;top:16px;width:12px;height:12px;border-radius:50%;
  background:var(--bg);border:2px solid var(--border);}
.ac-step.past .ac-dot{background:var(--ok);border-color:var(--ok);}
.ac-step.soon .ac-dot{background:var(--warn);border-color:var(--warn);}
.ac-step.future .ac-dot{background:var(--bg);border-color:var(--fg-faint);}
.ac-step.empty{opacity:.55;}
.ac-step b{display:block;font-size:14.5px;color:var(--fg);}
.ac-when{display:block;font-size:12.5px;color:var(--fg-faint);margin-top:2px;}

.ac-editor{border:1px solid var(--border);border-radius:var(--r-lg);
  padding:clamp(20px,2.6vw,30px);background:var(--bg-elevated);}
.ac-editor h3{font-size:17px;margin:0 0 16px;}

/* ---------- team: module permissions ---------- */
.tm-modhint{font-size:12.5px;color:var(--fg-faint);margin:4px 0 8px;line-height:1.55;}
.tm-modgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px;}
.tm-modgrid .tm-check{display:flex;align-items:center;gap:8px;font-size:13.5px;
  padding:5px 8px;border-radius:var(--r-sm);cursor:pointer;}
.tm-modgrid .tm-check:hover{background:var(--bg);}
.tm-modgrid input{flex:none;}

/* ---------- incidents: the response thread ---------- */
.inc-thread-to{font-size:12px;font-weight:600;text-transform:none;letter-spacing:0;
  margin-left:8px;padding:2px 9px;border-radius:999px;
  background:var(--warn-tint);color:var(--warn);}
.inc-thread-empty{font-size:13.5px;color:var(--fg-faint);margin:6px 0 14px;}

.inc-msg{border-left:2px solid var(--border);padding:8px 0 8px 14px;margin-bottom:14px;}
.inc-msg-head{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-bottom:3px;}
.inc-msg-head b{font-size:14px;color:var(--fg);}
.inc-msg-dept{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--fg-faint);border:1px solid var(--border);border-radius:999px;padding:1px 8px;}
.inc-msg-when{font-size:12px;color:var(--fg-faint);margin-left:auto;}
.inc-msg-body{margin:0;font-size:14.5px;line-height:1.6;color:var(--fg-muted);}

.inc-reply{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-top:14px;}
.inc-reply textarea{flex:1 1 260px;min-width:0;background:var(--bg);
  border:1px solid var(--border);border-radius:var(--r-sm);padding:11px 13px;
  color:var(--fg);font:inherit;font-size:14.5px;line-height:1.55;resize:vertical;}
.inc-reply textarea:focus{outline:2px solid var(--accent-bright);outline-offset:1px;
  border-color:transparent;}
@media (max-width:560px){ .inc-reply .btn{flex:1 1 100%;} }

/* ---------- role pills for the two master roles ---------- */
.role-pill.role-quality_manager,.role-pill.role-director{
  background:var(--accent-bright-tint);color:var(--accent-text);}

/* ---------- short expiry calendar (crash carts) ----------
   Palette tokens only, as everywhere else here. */
.cc-policybar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  border:1px solid var(--border);border-radius:var(--r-md);
  padding:12px 16px;background:var(--bg-elevated);margin-bottom:18px;}
.cc-policy{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:600;
  color:var(--fg);white-space:nowrap;}
.cc-policy select{background:var(--bg);border:1px solid var(--border);
  border-radius:var(--r-sm);padding:8px 12px;color:var(--fg);font:inherit;font-size:14px;}
.cc-policy select:focus{outline:2px solid var(--accent-bright);outline-offset:1px;}
.cc-policybar .tr-hint{margin:0;flex:1 1 240px;}

.cc-actions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px;}
.cc-cartactions{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 10px;}

/* The code blue picker. One row per item: tick it, then say how many went and what the
   replacement expires. The two fields stay disabled until the tick, so nobody fills in a
   date for stock nobody touched. */
.cc-used{display:flex;flex-direction:column;gap:2px;max-height:320px;overflow-y:auto;
  border:1px solid var(--border);border-radius:var(--r-sm);padding:6px;}
.cc-used-row{display:flex;align-items:center;gap:10px;padding:8px 9px;
  border-radius:var(--r-sm);cursor:pointer;}
.cc-used-row:hover{background:var(--bg);}
.cc-used-row input[type=checkbox]{flex:none;}
.cc-used-name{flex:1 1 auto;min-width:0;font-size:14px;color:var(--fg);}
.cc-used-name small{display:block;font-size:12px;color:var(--fg-faint);margin-top:1px;}
.cc-used-fields{flex:none;display:flex;gap:6px;}
.cc-used-fields input{background:var(--bg);border:1px solid var(--border);
  border-radius:var(--r-sm);padding:6px 8px;color:var(--fg);font:inherit;font-size:13px;}
.cc-used-fields input[type=number]{width:64px;}
.cc-used-fields input:disabled{opacity:.4;}
.cc-used-fields input:focus{outline:2px solid var(--accent-bright);outline-offset:1px;}

/* On a phone the fields drop under the item name rather than squeezing it to nothing. */
@media (max-width:620px){
  .cc-used-row{flex-wrap:wrap;}
  .cc-used-fields{flex-basis:100%;padding-left:26px;}
  .cc-used-fields input[type=date]{flex:1 1 auto;}
  .cc-actions .btn{flex:1 1 100%;}
}

/* The running count while stocking a cart item by item. Quiet — it is a receipt, not an
   announcement, and it appears in a dialog somebody is typing into at speed. */
.cc-added{font-size:12.5px;line-height:1.55;color:var(--ok);margin:2px 0 0;}

/* ---------- crash carts: batches, tags, and the opening record ---------- */

/* THE DATE PICKER ICON.
   Chrome draws it as a near-black glyph, which on a dark field is invisible — the field
   looked like it had no picker at all. invert() flips it to white; the theme guard means a
   light theme keeps the dark glyph it needs. */
input[type="date"]::-webkit-calendar-picker-indicator{
  filter:invert(1) brightness(1.6);cursor:pointer;opacity:.9;
}
input[type="date"]:hover::-webkit-calendar-picker-indicator{opacity:1;}
:root[data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator{filter:none;}

.cc-tag{display:inline-block;margin-left:8px;font-size:11.5px;font-weight:600;
  letter-spacing:.03em;padding:2px 9px;border-radius:999px;
  background:var(--bg);color:var(--fg-muted);border:1px solid var(--border);}

/* One batch of one item, while it is being entered. */
.cc-batch{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;position:relative;
  border:1px solid var(--border);border-radius:var(--r-sm);padding:12px 14px 12px 74px;
  margin-bottom:8px;background:var(--bg);}
.cc-batch-n{position:absolute;left:14px;top:14px;font-size:11.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;color:var(--fg-faint);}
.cc-batch .ws-f{margin:0;flex:1 1 150px;}
.cc-batch-x{background:transparent;border:1px solid var(--border);color:var(--fg-faint);
  border-radius:var(--r-sm);padding:6px 11px;font:inherit;font-size:12px;cursor:pointer;
  align-self:flex-end;}
.cc-batch-x:hover{color:var(--nc);border-color:var(--nc);}

/* A second or third batch of the same item, in the register table. The name column is
   blank on those rows, so a rule ties them to the item above rather than leaving them
   looking like separate items with a missing name. */
.cc-batchrow td:first-child{border-left:2px solid var(--accent-bright);}

.cc-section{font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--fg-faint);margin:18px 0 8px;padding-top:14px;border-top:1px solid var(--border);}

.cc-tagline{font-size:13px;color:var(--fg-muted);margin:-6px 0 12px;}
.cc-tagline-none{color:var(--fg-faint);}

.cc-used-item{border:1px solid var(--border);border-radius:var(--r-md);padding:14px;
  margin-bottom:12px;background:var(--bg-elevated);}
.cc-used-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-bottom:8px;font-size:13.5px;}

/* What is in the cart right now, shown before anything is chosen. The nurse is answering
   "which of these did we use", and cannot answer it from a dropdown they must open. */
.cc-stockshow{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-sm);
  padding:10px 13px;margin:0 0 10px;font-size:13px;color:var(--fg-muted);}
.cc-stockshow b{color:var(--fg);font-size:12.5px;}
.cc-stockshow ul{margin:6px 0 0;padding-left:18px;}
.cc-stockshow li{margin:3px 0;}

.cc-usedrow{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:8px;}
.cc-usedrow .ws-f{margin:0;flex:1 1 150px;}

.cc-repl{border-top:1px dashed var(--border);margin-top:12px;padding-top:12px;}
.cc-repl-head{font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--accent-text);margin-bottom:8px;}

@media (max-width:620px){
  .cc-batch{padding:34px 12px 12px;}
  .cc-batch-n{top:10px;}
  .cc-batch .ws-f,.cc-usedrow .ws-f{flex:1 1 100%;}
  .cc-batch-x{width:100%;}
}

/* ---- copying an item list from one crash cart to another ----
   The rows reuse .cc-batch, so a copied row and a batch row look like the same kind of thing,
   which they are. Only the two controls that have no equivalent there are new. */
.cc-copy-take{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;
  color:var(--fg-muted);white-space:nowrap;align-self:center;}
.cc-copy-take input{width:15px;height:15px;accent-color:var(--accent-solid);}
/* The bulk-fill row. Laid out on one line because it is one thought — "they all expire on
   this date" — and stacking it made it read as three unrelated fields. */
.cc-copy-all{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;
  border:1px dashed var(--border);border-radius:var(--r-sm);padding:12px 14px;margin-bottom:12px;}
.cc-copy-all label{flex:0 0 auto;align-self:center;font-size:12px;font-weight:600;
  color:var(--fg-muted);}
.cc-copy-all input{flex:1 1 150px;}
/* Copied names are not editable here: the point is that the list matches the other cart. */
.cc-batch input[readonly]{opacity:.75;cursor:default;}