/* ══════════════════════════════════════════════════════════════════════
   Antimicrobial Stewardship — Dr. Samir Abbas Hospital.

   This screen is read by somebody standing on a ward with a drug chart in
   their hand, deciding whether to change it. So it is built round one shape:
   a list of findings, worst first, each one a sentence that says what is
   wrong and what to do instead. Nothing is coloured unless it means
   something, because a page where everything is coloured is a page where
   nothing is.

   Four levels, and only four. Crimson stops a prescription — a gap in cover,
   a drug that cannot reach the site, an allergy. Amber says look again today.
   Blue is for information the prescriber needs and does not have to act on.
   Green marks the things that are already right, which matter: a programme
   that only ever says no is a programme people stop reading.

   The room is a light clinical blue — the platform's other applications are
   the green of the ward, the violet of compounding, the teal of oncology and
   the beige of the store, and a pharmacist who works more than one of them
   should know which is in front of them from across the room.

   Every pairing here was measured rather than judged: body text, text on a
   card, each badge on its own ground and white on the header all clear
   WCAG AA at 4.5:1 or better.
   ══════════════════════════════════════════════════════════════════════ */

@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: a light clinical blue paper, deep navy chrome */
    --bg: #eef3f8;
    --bg-deep: #10243a;
    --card: #ffffff;
    --card-raised: #f3f7fb;
    --ink: #16222f;
    --muted: #566676;
    --line: #cfdbe6;
    --line-soft: #e2ebf3;

    /* the service's colour. --primary fills chrome, --primary-bright is the
       one that has to stay legible as type on the paper, and --primary-tint
       is the faintest wash a row can take and still read as picked out. */
    --primary: #1d4f7c;
    --primary-bright: #17456e;
    --primary-deep: #143a5c;
    --primary-line: #a9c4dc;
    --primary-tint: #e3edf7;

    /* the house green, kept for the footer's hospital line only */
    --house: #57c78c;

    /* the boxes people write in — white on the blue paper, so a box is
       visibly a box and not a patch of the page */
    --field: #ffffff;
    --field-ink: #121c27;
    --field-muted: #566676;
    --field-line: #b4c6d6;

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

    --shadow: 0 1px 3px rgba(20,45,75,.10), 0 1px 2px rgba(20,45,75,.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: #e4ebf2; color: #566676; }

/* ── 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; }
}