/* ══════════════════════════════════════════════════════════════════════
   Security Console — Dr. Samir Abbas Hospital.

   This screen is read when somebody is worried, or when somebody should be.
   So it is built round two things: a checklist that is either green or is
   not, and a list of what has happened, newest first.

   Slate and a single alarm red. There is deliberately less colour here than
   anywhere else on the platform — on a security screen, colour means
   something is wrong, and a page that is decorated in red has no way left to
   say "this one".
   ══════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Playfair+Display:wght@600;700&family=Tajawal:wght@400;500;700&display=swap');

:root {
    /* the room: cool slate, near-black chrome */
    --bg: #eef1f5;
    --bg-deep: #0f172a;
    --card: #ffffff;
    --card-raised: #f4f6f9;
    --ink: #121a26;
    --muted: #56616f;
    --line: #d3dae3;
    --line-soft: #e5eaf0;

    --primary: #263548;
    --primary-bright: #1f2c3d;
    --primary-deep: #16212f;
    --primary-line: #aab6c4;
    --primary-tint: #e6eaef;

    --house: #57c78c;

    --field: #ffffff;
    --field-ink: #111820;
    --field-muted: #56616f;
    --field-line: #b6c0cc;

    --danger: #a8271d;
    --danger-deep: #fbe3e0;
    --warn: #8a5800;
    --warn-deep: #fbeecf;
    --info: #1c5fa8;
    --info-deep: #e2eaf5;
    --ok: #1b6440;
    --ok-deep: #ddefe3;

    --shadow: 0 1px 3px rgba(18,26,38,.10), 0 1px 2px rgba(18,26,38,.06);
    --font-ui: 'Montserrat', 'Tajawal', 'Segoe UI', Arial, sans-serif;
    --font-head: 'Playfair Display', 'Tajawal', Georgia, serif;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-ui); color: var(--ink); background: var(--bg);
    font-size: 14.5px; line-height: 1.55; }
a { color: var(--primary-bright); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-family: var(--font-head); font-size: 1.6rem; margin: 0 0 .25rem; }
h2 { font-family: var(--font-head); font-size: 1.15rem; margin: 1.75rem 0 .7rem; color: var(--primary-bright); }
h3 { margin: 0; font-size: 1rem; font-weight: 600; }
.muted { color: var(--muted); }
.small { font-size: .82rem; }

/* ── Header ─────────────────────────────────────────────── */
/* Deeper than the page rather than brighter: a bar of saturated colour across
   the top of a dark screen is the one thing on it that would out-shout a
   hazard band. */
.topbar { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
    background: var(--primary); color: #fff; padding: .7rem 1.25rem; }
.brand { display: flex; align-items: center; gap: .7rem; }
.brand img { height: 38px; }
.brand strong { display: block; font-size: 1rem; }
.brand span { display: block; font-size: .68rem; letter-spacing: .08em; opacity: .85; }
.mainnav { display: flex; gap: 1.1rem; flex: 1; flex-wrap: wrap; }
.mainnav a { color: #fff; font-weight: 500; font-size: .92rem; opacity: .88; }
.mainnav a:hover { opacity: 1; text-decoration: none; border-bottom: 2px solid #fff; }
.who { text-align: right; font-size: .8rem; line-height: 1.35; }
.who strong { display: block; }
.who span { display: block; opacity: .85; }
.who a { color: #fff; text-decoration: underline; font-size: .78rem; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }
.pagefoot { text-align: center; padding: 1.5rem; border-top: 1px solid var(--line);
    background: var(--card); font-size: .78rem; color: var(--muted); }
.pagefoot strong { display: block; color: var(--primary); }

.page-head { margin-bottom: 1.25rem; display: flex; justify-content: space-between;
    align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.back { font-size: .85rem; }
.head-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

/* ── Buttons ────────────────────────────────────────────── */
.btn { display: inline-block; padding: .5rem 1rem; border-radius: 999px; border: 1px solid var(--line);
    background: var(--card-raised); color: var(--ink);
    font-size: .87rem; font-weight: 600; cursor: pointer; font-family: inherit; }
.btn:hover { text-decoration: none; border-color: var(--primary-line); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn[disabled]:hover { border-color: var(--line); }
.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-deep); border-color: var(--primary-deep); }
.btn-light { color: var(--primary-bright); }
.btn-light:hover { background: var(--primary-tint); }
/* A shade lighter than --danger itself: the crimson that reads as a warning
   band on a dark card does not have the contrast to be small button type on
   one. Measured, not judged — 3.5:1 before, 5.4:1 now. */
.btn-danger { color: var(--danger); border-color: #e6c6bf; }
.btn-danger:hover { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn-sm { padding: .3rem .7rem; font-size: .78rem; }

/* ── Cards & stats ──────────────────────────────────────── */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px;
    padding: 1.25rem; box-shadow: var(--shadow); margin-bottom: 1.25rem; }
.stat-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(13rem,100%),1fr));
    margin-bottom: 1.5rem; }
.stat-card { background: var(--card); border: 1px solid var(--line); border-left-width: 5px;
    border-radius: 12px; padding: 1rem 1.2rem; box-shadow: var(--shadow); }
/* Stat figures stay in the UI sans — a display face on a number reads as
   decoration — and keep proportional digits, which tabular-nums would loosen. */
.stat-card .stat-num { font-size: 2rem; font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.stat-card .stat-sub { color: var(--muted); font-size: .72rem; margin-top: .3rem; }
.stat-card .stat-label { color: var(--muted); font-size: .8rem; margin-top: .35rem; font-weight: 500; }
.stat-card.ok { border-left-color: var(--ok); }         .stat-card.ok .stat-num { color: var(--ok); }
.stat-card.warn { border-left-color: var(--warn); }     .stat-card.warn .stat-num { color: var(--warn); }
.stat-card.danger { border-left-color: var(--danger); } .stat-card.danger .stat-num { color: var(--danger); }
.stat-card.info { border-left-color: var(--info); }     .stat-card.info .stat-num { color: var(--info); }

/* ── Tables ─────────────────────────────────────────────── */
.table-scroll { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--line);
    border-radius: 10px; overflow: hidden; box-shadow: var(--shadow); font-size: .87rem; margin-bottom: 1.25rem; }
.data-table th { background: var(--primary); color: #fff; text-align: left; padding: .6rem .7rem;
    font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
    border-bottom: 1px solid var(--line); }
.data-table td { padding: .55rem .7rem; border-top: 1px solid var(--line-soft); vertical-align: top; }
.data-table tbody tr:hover { background: var(--primary-tint); }
.data-table .num { text-align: right; }

/* Badges are the tinted-block kind, so they carry on a grey card without
   becoming five more bright spots on a screen whose bright spots mean
   something. */
.badge { display: inline-block; padding: .18rem .55rem; border-radius: 999px;
    font-size: .72rem; font-weight: 600; white-space: nowrap; }
.badge-ok { background: var(--ok-deep); color: var(--ok); }
.badge-warn { background: var(--warn-deep); color: var(--warn); }
.badge-danger { background: var(--danger-deep); color: var(--danger); }
.badge-info { background: var(--info-deep); color: var(--info); }
.badge-unknown { background: #e4e8ee; color: #56616f; }

/* ── Forms ──────────────────────────────────────────────── */
.grid-form { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(16rem,100%),1fr)); }
.grid-form label { display: block; font-size: .82rem; font-weight: 600; color: var(--primary-bright); }
/* The boxes stay white on the grey page.

   Everything else here is dark because it is being read; a box is being
   written in, and a dark box on a dark page does not look like somewhere to
   write. White is also what the paper order form is, and this screen is
   transcribed from that form — the pharmacist's eye moves between the two, and
   the boxes on both should be the same colour. It picks the empty fields out
   of the page as the only things waiting on anybody. */
.grid-form input, .grid-form select, .grid-form textarea {
    width: 100%; margin-top: .3rem; padding: .5rem .6rem; border: 1px solid var(--field-line);
    border-radius: 8px; font-family: inherit; font-size: .9rem;
    background: var(--field); color: var(--field-ink);
    /* Back to light for the boxes only, so a native date picker and a number
       spinner draw their own glyphs dark on the white rather than white on it. */
    color-scheme: light; }
/* A box nobody can type in has to look like one, or it is a box people type
   into and wonder why nothing happens. It is the figure being corrected, shown
   beside the correction, not something to fill in. */
.grid-form input:disabled { background: var(--card-raised); color: var(--muted);
    border-style: dashed; cursor: not-allowed; }

/* A tick box is not a text box: the width rule above would stretch it across
   half the row and leave its label stranded on the far side. */
.grid-form input[type=checkbox] { width: auto; margin: 0; flex: 0 0 auto;
    accent-color: var(--primary); }
.grid-form input:focus, .grid-form select:focus, .grid-form textarea:focus {
    outline: 2px solid var(--primary-bright); outline-offset: 1px; border-color: var(--primary); }
.grid-form input::placeholder, .grid-form textarea::placeholder { color: var(--field-muted); }
.grid-form textarea { min-height: 4.5rem; resize: vertical; }
.grid-form .wide { grid-column: 1 / -1; }
.req { color: var(--danger); }
.form-actions { grid-column: 1 / -1; display: flex; gap: .6rem; justify-content: flex-end; }
/* Boxes that are not inside a .grid-form — a reason typed beside a button, a
   date on a filter bar. Same white, so every box on the screen is one thing. */
input[type=text], input[type=search], input[type=date], input[type=number],
input[type=password], select, textarea {
    background: var(--field); color: var(--field-ink); border: 1px solid var(--field-line);
    border-radius: 8px; font-family: inherit; font-size: .9rem; color-scheme: light; }
input::placeholder, textarea::placeholder { color: var(--field-muted); }
input:focus, select:focus, textarea:focus {
    outline: 2px solid var(--primary-bright); outline-offset: 1px; }
textarea { padding: .5rem .6rem; }
input[type=checkbox] { accent-color: var(--primary); color-scheme: light; }

.flash { padding: .7rem 1rem; border-radius: 10px; margin-bottom: 1rem; font-size: .88rem; font-weight: 500; }
.flash.success { background: var(--ok-deep); color: var(--ok); }
.flash.error { background: var(--danger-deep); color: var(--danger); }

.entry-card { border-top: 4px solid var(--primary); }

/* ── Login ──────────────────────────────────────────────── */
.login-wrap { max-width: 24rem; margin: 8vh auto; }
.login-wrap .card { padding: 1.75rem; }
.login-wrap h1 { text-align: center; font-size: 1.3rem; margin-bottom: 1.25rem; }
.login-wrap .logo { display: block; height: 48px; margin: 0 auto 1rem; }

/* ── Small pieces ───────────────────────────────────────── */
ul.plain { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .35rem; }
ul.plain li { border-left: 3px solid var(--primary-line); padding: .25rem .7rem; font-size: .88rem; }
.ctx-head { font-size: .84rem; font-weight: 700; color: var(--primary-bright); margin: .6rem 0 0;
    text-transform: uppercase; letter-spacing: .04em; }
.filter-bar { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; align-items: center; }
.filter-bar input[type=search], .filter-bar input[type=date], .filter-bar select {
    flex: 0 1 14rem; padding: .5rem .7rem; border: 1px solid var(--field-line); border-radius: 8px;
    font-family: inherit; font-size: .9rem; background: var(--field); color: var(--field-ink);
    color-scheme: light; }
.two-col { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(20rem,100%),1fr)); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: .25rem 1rem; font-size: .88rem; margin: 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; font-weight: 600; }
.record-grid { display: grid; gap: .9rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(15rem,100%),1fr)); }
.record-grid .item .k { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
    color: var(--muted); font-weight: 600; }
.record-grid .item .v { margin-top: .15rem; }
.record-grid .wide { grid-column: 1 / -1; }

/* --------------------------------------------------------------- inventory */

/* The row's state, said in the row. Only the exceptions carry colour: a shelf
   that is fine is the ordinary case and does not need pointing at. */
.data-table tr.st-out td, .data-table tr.st-below td { background: #faeae6; }
.data-table tr.st-reorder td { background: #faf1de; }
.data-table tr.st-out:hover td, .data-table tr.st-below:hover td { background: #f5ded8; }
.data-table tr.st-reorder:hover td { background: #f6e9cd; }
.qty { font-weight: 700; }
.qty.low { color: var(--danger); }
.qty.warn { color: var(--warn); }

/* The count sheet and the adjustment sheet: one row per item, a box beside the
   system figure and the difference working itself out as it is typed. They are
   different acts — one walks the shelf, the other corrects the record — but the
   same thing to use, so they are the same thing to look at. */
.count-table input[type=number], .adjust-table input[type=number] {
    width: 6.5rem; padding: .35rem .45rem; text-align: right;
    border: 1px solid var(--field-line); border-radius: 7px; font-family: inherit; font-size: .9rem;
    background: var(--field); color: var(--field-ink); color-scheme: light; }
.count-table input[type=number]:focus, .adjust-table input[type=number]:focus {
    outline: 2px solid var(--primary); outline-offset: 1px; }

/* A difference reads the same wherever it appears — on a count sheet, in an
   item's history, in the adjustments register. */
td.diff { font-weight: 700; white-space: nowrap; }
td.diff.short { color: var(--danger); }
td.diff.over { color: var(--info); }
td.diff.zero { color: var(--muted); font-weight: 400; }
.count-table tr.done td { background: #eef3e9; }

/* The save button on a long sheet, kept where the hand is rather than a
   thousand rows below it. */
.sticky-actions { position: sticky; bottom: 0; display: flex; gap: 1rem; align-items: center;
    justify-content: flex-end; padding: .7rem 1rem; margin-top: .5rem;
    background: var(--card); border: 1px solid var(--line); border-radius: 12px;
    box-shadow: 0 -2px 12px rgba(20, 24, 60, .07); }
.sticky-actions .muted { margin-right: auto; font-size: .86rem; }

.filter-bar .grow-2 { flex: 0 1 22rem; display: flex; flex-direction: column; gap: .2rem;
    font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
    font-weight: 600; }
.filter-bar .grow-2 select { flex: 1 1 auto; }
.grid-form .wide-2 { grid-column: span 2; }
@media (max-width: 40rem) { .grid-form .wide-2 { grid-column: 1 / -1; } }

/* A figure that has not been entered yet reads as blank, not as zero — the
   difference between "we counted none" and "nobody has been down there". */
.pending { color: var(--muted); font-style: italic; }

.filter-bar .grow { flex: 1 1 18rem; }
.summary { display: flex; flex-wrap: wrap; gap: 1.2rem; padding: .75rem 1rem; margin-bottom: 1.25rem;
    background: var(--primary); color: #fff; border-radius: 12px; }
.summary div { line-height: 1.25; }
.summary b { display: block; font-size: 1.2rem; }
.summary span { font-size: .72rem; opacity: .8; text-transform: uppercase; letter-spacing: .05em; }

/* A standing note rather than a warning: the opening balances came from the
   warehouse export and have not been counted yet. */
.card.note { border-left: 4px solid var(--info); background: var(--card-raised);
    color: var(--ink); padding: .8rem 1rem; margin-bottom: 1.25rem; }
.card.note p { font-size: .86rem; line-height: 1.55; }

/* The price column. A little wider than a quantity box because a price carries
   halalas, and the value beside it goes from grey to ink the moment either
   figure on the row is touched — so a line that will change looks changed. */
.adjust-table input.price-box, .count-table input.price-box { width: 7.5rem; }
.adjust-table td.value { white-space: nowrap; }
.adjust-table td.value.pending-value { color: var(--ink); font-weight: 700; }

/* Expiry. A date on a screen nobody is warned about is decoration, and expired
   stock is the one thing a hospital's stock system exists to catch — so the
   cell carries the warning rather than the reader having to do the arithmetic. */
td.exp-gone { color: var(--danger); font-weight: 700; }
td.exp-soon { color: var(--warn); font-weight: 700; }
td.exp-gone .small, td.exp-soon .small { font-weight: 600; }
.data-table td .small { font-size: .76rem; opacity: .85; }

/* A batch number is a short code, not prose. */
input.batch-box { width: 7rem; padding: .35rem .45rem; border: 1px solid var(--field-line);
    border-radius: 7px; font-family: inherit; font-size: .85rem;
    background: var(--field); color: var(--field-ink); }
.count-table input[type=date], .adjust-table input[type=date] {
    padding: .3rem .4rem; border: 1px solid var(--field-line); border-radius: 7px;
    font-family: inherit; font-size: .82rem;
    background: var(--field); color: var(--field-ink); color-scheme: light; }

/* ---------------------------------------------------------- the count sheet

   Nine columns have to be on the screen at once, because the one that gets cut
   off is the one nobody fills in. So the sheet is set tighter than the rest of
   the platform: smaller type, less padding, and every box only as wide as the
   number it holds. */
.count-table { font-size: .82rem; }
.count-table th, .count-table td { padding: .45rem .45rem; vertical-align: top; }
.count-table th { font-size: .66rem; letter-spacing: .02em; }
.count-table td:first-child { min-width: 13rem; max-width: 22rem; }
.count-table td:first-child strong { font-size: .84rem; line-height: 1.3; display: block; }
.count-table td:first-child .muted.small { display: block; margin-top: .1rem; }
.count-table input[type=number] { width: 4.6rem; padding: .3rem .35rem; font-size: .84rem; }
.count-table input.price-box { width: 5.4rem; }
.count-table input[type=date] { width: 8.2rem; font-size: .76rem; padding: .28rem .3rem; }
.count-table input.batch-box { width: 5.6rem; padding: .3rem .35rem; font-size: .8rem; }
.count-table td.diff, .count-table td[data-worth] { white-space: nowrap; }

/* Which lines are in the record and which are still only on the screen. A walk
   that gets interrupted should not leave anybody believing ten items are safely
   down when they were never sent. */
.saved-mark { display: inline-block; font-size: .66rem; font-weight: 700;
    margin-left: .5rem; text-transform: uppercase; letter-spacing: .04em; }
.saved-mark:empty { display: none; }
.saved-mark.is-saved { color: var(--ok); }
.saved-mark.is-draft { color: var(--warn); }

/* Tabs. They had never been given a shape, so a row of them read as one long
   sentence of links and the one you were on was not apparent. */
.group-tabs { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .9rem; }
.group-tabs a { display: inline-block; padding: .35rem .7rem; border-radius: 999px;
    font-size: .8rem; font-weight: 600; color: var(--primary-bright);
    background: var(--card); border: 1px solid var(--line); text-decoration: none; }
.group-tabs a:hover { background: var(--primary-tint); text-decoration: none; }
.group-tabs a.on { background: var(--primary); border-color: var(--primary);
    color: #fff; }

/* The sheet's own search and tabs, above the table. */
.sheet-tools { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center;
    margin-bottom: .6rem; }
.sheet-tools input[type=search] { flex: 1 1 20rem; padding: .5rem .7rem;
    border: 1px solid var(--field-line); border-radius: 8px; font-family: inherit;
    font-size: .9rem; background: var(--field); color: var(--field-ink); }
.sheet-tabs { margin: 0; }
.sheet-tabs a { cursor: pointer; }

/* Whether the sheet has got what you typed. A walk is an hour with a trolley;
   the one thing the screen owes you is a straight answer about that. */
.sheet-saved { display: inline-block; margin-left: .6rem; font-size: .74rem;
    font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.sheet-saved.is-ok { color: var(--ok); }
.sheet-saved.is-busy { color: var(--muted); }
.sheet-saved.is-bad { color: var(--danger); }

/* The picker. A thousand rows are rendered once and searched in the browser, so
   the box is given a height of its own rather than running the page to a mile. */
.pick-scroll { max-height: 26rem; overflow-y: auto; }
.pick-table td:first-child { width: 2.4rem; text-align: center; }
.pick-table input[type=checkbox] { width: auto; accent-color: var(--primary); }
.pick-table td:nth-child(2) .muted.small { display: block; }

/* ══════════════════════════════════════════════════════════════════════
   Stewardship-specific components
   ══════════════════════════════════════════════════════════════════════ */

/* ── The findings list ──────────────────────────────────── */
/* The whole screen exists for this list. A finding is a card with a coloured
   spine, a one-line claim as its heading, the reasoning under it, and — where
   there is one — the action in bold at the foot. Worst first, always. */
.findings { display: grid; gap: .7rem; margin-bottom: 1.5rem; }
.finding { background: var(--card); border: 1px solid var(--line); border-left: 5px solid var(--line);
    border-radius: 10px; padding: .85rem 1rem; box-shadow: var(--shadow); }
.finding h3 { font-size: .98rem; margin-bottom: .25rem; display: flex; gap: .5rem;
    align-items: baseline; flex-wrap: wrap; }
.finding p { margin: .3rem 0 0; font-size: .88rem; }
.finding .act { margin-top: .45rem; font-size: .86rem; font-weight: 600; }
.finding .rule { margin-left: auto; font-size: .68rem; color: var(--muted); font-weight: 400;
    font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; }
.finding.stop { border-left-color: var(--danger); }
.finding.stop h3 { color: var(--danger); }
.finding.stop .act { color: var(--danger); }
.finding.warn { border-left-color: var(--warn); }
.finding.warn h3 { color: var(--warn); }
.finding.info { border-left-color: var(--info); }
.finding.good { border-left-color: var(--ok); }
.finding.good h3 { color: var(--ok); }

/* Levels collapse to a tally at the top of a worklist row. */
.tally { display: inline-flex; gap: .3rem; }
.tally span { display: inline-block; min-width: 1.6rem; text-align: center; border-radius: 999px;
    font-size: .72rem; font-weight: 700; padding: .12rem .4rem; }
.tally .t-stop { background: var(--danger-deep); color: var(--danger); }
.tally .t-warn { background: var(--warn-deep); color: var(--warn); }
.tally .t-info { background: var(--info-deep); color: var(--info); }
.tally .t-good { background: var(--ok-deep); color: var(--ok); }

/* ── Coverage ───────────────────────────────────────────── */
/* One row per organism: is it covered, and by what. The verdict is the only
   coloured thing in the row, so the eye lands on the gaps. */
.cov { width: 100%; border-collapse: collapse; font-size: .87rem; }
.cov th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
    color: var(--muted); padding: .3rem .5rem; border-bottom: 1px solid var(--line); }
.cov td { padding: .45rem .5rem; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.verdict { display: inline-block; padding: .15rem .55rem; border-radius: 999px;
    font-size: .72rem; font-weight: 700; white-space: nowrap; }
.verdict.covered { background: var(--ok-deep); color: var(--ok); }
.verdict.partial { background: var(--warn-deep); color: var(--warn); }
.verdict.not { background: var(--danger-deep); color: var(--danger); }

/* ── Pickers: risks, allergies, agents ──────────────────── */
/* A tick box in a box. The label is the hit area, so a pharmacist on a tablet
   is not aiming at a 13-pixel square. */
.picks { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(min(15rem,100%),1fr)); }
.pick { display: flex; gap: .55rem; align-items: flex-start; background: var(--card-raised);
    border: 1px solid var(--line); border-radius: 9px; padding: .5rem .65rem; cursor: pointer;
    font-size: .86rem; }
.pick:hover { border-color: var(--primary-line); }
.pick input { margin: .18rem 0 0; accent-color: var(--primary); flex: 0 0 auto; }
.pick:has(input:checked) { background: var(--primary-tint); border-color: var(--primary-line); }
.pick strong { display: block; font-weight: 600; }
.pick span { display: block; font-size: .76rem; color: var(--muted); line-height: 1.35; }
.pick .restricted { color: var(--warn); font-weight: 600; }

/* The agent picker is long — it scrolls inside its own box rather than
   pushing the rest of the form off the screen. */
.pick-scroll { max-height: 21rem; overflow-y: auto; border: 1px solid var(--line);
    border-radius: 10px; padding: .6rem; background: var(--card); }
.pick-scroll .picks { grid-template-columns: repeat(auto-fill, minmax(min(13rem,100%),1fr)); }
.pick-group { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--muted); font-weight: 700; margin: .7rem 0 .35rem; }
.pick-group:first-child { margin-top: 0; }

/* ── Severity, as three buttons rather than a dropdown ──── */
.sev { display: flex; gap: .5rem; flex-wrap: wrap; }
.sev label { flex: 1 1 12rem; background: var(--card-raised); border: 1px solid var(--line);
    border-radius: 9px; padding: .55rem .7rem; cursor: pointer; font-size: .86rem; }
.sev label:has(input:checked) { background: var(--primary-tint); border-color: var(--primary);
    box-shadow: inset 0 0 0 1px var(--primary); }
.sev input { margin-right: .4rem; accent-color: var(--primary); }

/* ── The recommendation panel ───────────────────────────── */
.rec { background: var(--primary-tint); border: 1px solid var(--primary-line);
    border-radius: 12px; padding: 1.1rem 1.25rem; margin-bottom: 1.25rem; }
.rec .label { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--primary-bright); font-weight: 700; }
.rec .regimen { font-family: var(--font-head); font-size: 1.45rem; line-height: 1.25;
    margin: .2rem 0 .5rem; color: var(--primary-deep); }
.rec ul { margin: .4rem 0 0; padding-left: 1.1rem; font-size: .86rem; }
.rec .alt { margin-top: .8rem; font-size: .84rem; color: var(--muted); }

/* ── Pharmacokinetics ───────────────────────────────────── */
.pk-grid { display: grid; gap: .8rem;
    grid-template-columns: repeat(auto-fit, minmax(min(9rem,100%),1fr)); margin-bottom: 1rem; }
.pk { background: var(--card); border: 1px solid var(--line); border-radius: 10px;
    padding: .7rem .85rem; box-shadow: var(--shadow); }
.pk b { display: block; font-size: 1.5rem; line-height: 1.1; letter-spacing: -.02em; }
.pk span { display: block; font-size: .74rem; color: var(--muted); margin-top: .2rem; }
.pk.on b { color: var(--ok); }
.pk.off b { color: var(--danger); }

/* The AUC band, drawn: 400 to 600 shaded, the patient's value marked on it.
   A number in a box does not show how close to the edge somebody is. */
.auc-bar { position: relative; height: 2.2rem; background: var(--card-raised);
    border: 1px solid var(--line); border-radius: 8px; margin: .4rem 0 1rem; overflow: hidden; }
.auc-bar .target { position: absolute; top: 0; bottom: 0; background: var(--ok-deep); }
.auc-bar .mark { position: absolute; top: 0; bottom: 0; width: 3px; background: var(--primary-deep); }
.auc-bar .mark.out { background: var(--danger); }
.auc-bar .tick { position: absolute; bottom: .15rem; font-size: .66rem; color: var(--muted);
    transform: translateX(-50%); }

/* ── The consult note ───────────────────────────────────── */
/* What gets pasted into the patient's record or read down the telephone. It
   is monospaced because it is a document, and selectable in one click
   because that is what it is for. */
.note-box { font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: .82rem; line-height: 1.5; white-space: pre-wrap; background: var(--card-raised);
    border: 1px solid var(--line); border-radius: 10px; padding: 1rem; }

/* ── Reference screen ───────────────────────────────────── */
.kb-list { display: grid; gap: .7rem;
    grid-template-columns: repeat(auto-fill, minmax(min(19rem,100%),1fr)); }
.kb-card { background: var(--card); border: 1px solid var(--line); border-radius: 10px;
    padding: .8rem 1rem; box-shadow: var(--shadow); }
.kb-card h3 { font-size: .95rem; margin-bottom: .2rem; }
.kb-card p { margin: .25rem 0 0; font-size: .82rem; color: var(--muted); }
.tags { display: flex; gap: .3rem; flex-wrap: wrap; margin-top: .4rem; }
.tag { background: var(--primary-tint); color: var(--primary-bright); border-radius: 999px;
    padding: .1rem .5rem; font-size: .7rem; font-weight: 600; }

/* ── The safety line that sits under every recommendation ─ */
.disclaimer { font-size: .78rem; color: var(--muted); border-top: 1px solid var(--line);
    padding-top: .7rem; margin-top: 1.25rem; }

@media print {
    .topbar, .pagefoot, .btn, .head-actions, form { display: none !important; }
    body { background: #fff; }
    .wrap { max-width: none; padding: 0; }
    .card, .finding, .note-box { box-shadow: none; break-inside: avoid; }
}


/* ══════════════════════════════════════════════════════════════════════
   Console components
   ══════════════════════════════════════════════════════════════════════ */

/* The checklist. A line is green or it is red; there is no third state,
   because "partially configured" is a way of not answering the question. */
.check { display: flex; gap: .8rem; align-items: flex-start; background: var(--card);
    border: 1px solid var(--line); border-left: 5px solid var(--ok); border-radius: 10px;
    padding: .85rem 1rem; margin-bottom: .7rem; box-shadow: var(--shadow); }
.check.bad { border-left-color: var(--danger); }
.check .mark { font-size: 1.1rem; line-height: 1.3; font-weight: 700; color: var(--ok); }
.check.bad .mark { color: var(--danger); }
.check h3 { font-size: .96rem; margin-bottom: .2rem; }
.check.bad h3 { color: var(--danger); }
.check p { margin: 0; font-size: .87rem; color: var(--muted); }

/* The activity list. A monospaced time column so the eye can run down it. */
.events td.when { font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: .78rem; white-space: nowrap; }
.events tr.alarming td { background: var(--danger-deep); }
.events tr.alarming td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
.events .detail { font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: .74rem; color: var(--muted); word-break: break-all; }

/* An account row that needs attention. */
.acct-bad { color: var(--danger); font-weight: 600; }