/* ══════════════════════════════════════════════════════════════════════
   Pharmacy Training Academy — Dr. Samir Abbas Hospital.

   The store's stylesheet, in the teaching department's own colour: the two
   systems are read by the same people on the same day and should not be
   mistaken for one another at a glance.

   A stock screen is read for one reason: to find what is not there. So the
   page is quiet and the exceptions are loud — an item that has run out, an
   item under its minimum, an item nobody has counted since the spring. Rows
   that are fine carry no colour at all, because a list where everything is
   coloured is a list where nothing stands out.

   Amber is the platform's warning colour and crimson its stop, the same as on
   the oncology and stewardship screens, so a pharmacist who works more than
   one of these reads them the same way. The room itself is beige — a warm,
   light paper ground with a deep coffee-brown for the chrome, so the store's
   screen is recognisable from across the room and is not the teal of oncology,
   the violet of compounding or the light blue of stewardship.

   Every pairing below was measured rather than judged: text on the page, text
   on a card, every badge on its own ground and white on the header all clear
   WCAG AA at 4.5:1 or better, and the warning washes stay warm so a coloured
   row still reads as part of the same paper.
   ══════════════════════════════════════════════════════════════════════ */

@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: light beige paper, deep brown chrome */
    --bg: #f2ebdd;
    --bg-deep: #332816;
    --card: #fffdf7;
    --card-raised: #f8f2e5;
    --ink: #2b2318;
    --muted: #6f6353;
    --line: #ddd2bc;
    --line-soft: #e9e0cd;

    /* the unit'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: #1f4e79;
    --primary-bright: #1b4568;
    --primary-deep: #15344f;
    --primary-line: #bcd2e6;
    --primary-tint: #e8f0f8;

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

    /* the boxes people write in — kept a shade lighter than the paper so a
       box is visibly a box and not a patch of the page */
    --field: #fffdf8;
    --field-ink: #241d13;
    --field-muted: #6f6353;
    --field-line: #c2b59a;

    --danger: #b3241b;
    --danger-deep: #f7e2dd;
    --warn: #8f5b00;
    --warn-deep: #f9edd3;
    --info: #1c5fa8;
    --info-deep: #e2eaf5;
    --ok: #1b6440;
    --ok-deep: #dcecdf;

    /* On a dark ground a drop shadow does nothing — depth comes from the
       surface being lighter than what is behind it. A hairline of light along
       the top edge is what separates a card from the page. */
    --shadow: 0 1px 3px rgba(60,45,22,.09), 0 1px 2px rgba(60,45,22,.05);
    --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: #ece4d5; color: #6f6353; }

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

/* ── The count sheet's pager ─────────────────────────────────────────────
   A long walk is cut into pages, and the row that moves between them sits
   above the table and again below it — because whoever has reached the last
   line of a page is at the bottom of it, and sending them back to the top to
   turn the page is the sort of thing that gets a system walked with paper
   instead. */
.sheet-pager { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center;
    justify-content: space-between; margin: .6rem 0; }
.sheet-pager-find { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.sheet-pager-find input { padding: 7px 10px; border-radius: 8px; border: 1px solid var(--line);
    font: inherit; min-width: 14rem; }
.sheet-pager-moves { display: flex; gap: .4rem; align-items: center; margin-inline-start: auto; }

/* ── Picking the items for a count ───────────────────────────────────────
   Ten items out of three thousand are found one search at a time, so what
   has been chosen is shown as a tray of chips that survives each search —
   and the button that opens the sheet sits in it, counting them. */
.pick-search { display: flex; flex-wrap: wrap; gap: .8rem 1rem; align-items: flex-end; }
.pick-search label { flex: 1 1 22rem; }
.pick-search-actions { display: flex; gap: .5rem; }
.pick-tray { border: 1px solid var(--line); border-radius: 12px; padding: .9rem 1rem;
    margin-bottom: 1rem; background: var(--tint, #faf7f3); }
.pick-tray-head { display: flex; justify-content: space-between; align-items: center;
    gap: 1rem; margin-bottom: .6rem; }
.pick-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.pick-chip { display: inline-flex; align-items: center; gap: .4rem; background: #fff;
    border: 1px solid var(--line); border-radius: 999px; padding: .25rem .4rem .25rem .7rem;
    font-size: .82rem; font-weight: 600; max-width: 22rem; }
.pick-chip button { border: 0; background: #ece6df; border-radius: 50%; width: 1.3rem;
    height: 1.3rem; line-height: 1; cursor: pointer; font-size: .95rem; color: #6b4423; }
.pick-chip button:hover { background: #d8cec3; }
.pick-tray-go { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: .8rem; }
.pick-note { flex: 1 1 18rem; padding: .55rem .7rem; border: 1px solid var(--line);
    border-radius: 10px; font: inherit; }
.sheet-walker { display: block; font-size: 12.5px; font-weight: 700; color: var(--brand-dark, #6b4423);
    margin: 0 0 .8rem; max-width: 26rem; }
.sheet-walker input { width: 100%; margin-top: .3rem; padding: .5rem .7rem; font: inherit;
    border: 1px solid var(--line); border-radius: 10px; }

/* ── Adding to a sheet that is already being walked ──────────────────── */
.sheet-add { border: 1px solid var(--line); border-radius: 12px; padding: .7rem 1rem;
    margin: 0 0 1rem; background: #fff; }
.sheet-add > summary { cursor: pointer; font-weight: 700; font-size: 13.5px;
    color: var(--brand-dark, #6b4423); }
.sheet-add-find { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.sheet-add-find input[type=search] { flex: 1 1 20rem; padding: .5rem .7rem; font: inherit;
    border: 1px solid var(--line); border-radius: 10px; }
.sheet-add-list { margin-top: .8rem; }

/* ══════════════════════════════════════════════════════════════════════
   The academy's own parts: the months a register is read in, the bar that
   shows how far through a training somebody is, and the register itself.
   ══════════════════════════════════════════════════════════════════════ */

/* A training is read a month at a time, and the months are its index. */
.month-bar { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1rem; }
.month-chip { display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .8rem;
    border: 1px solid var(--line); border-radius: 999px; background: #fff;
    font-size: .84rem; font-weight: 600; color: inherit; text-decoration: none; }
.month-chip span { background: var(--primary-tint); border-radius: 999px; padding: 0 .45rem;
    font-size: .76rem; font-weight: 700; color: var(--primary-bright); }
.month-chip:hover { border-color: var(--primary-line); text-decoration: none; }
.month-chip.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.month-chip.on span { background: rgba(255,255,255,.22); color: #fff; }

/* How far through the training somebody is. Thin, because it is one fact. */
.meter { display: block; height: 7px; border-radius: 999px; background: var(--primary-tint);
    overflow: hidden; max-width: 11rem; }
.meter span { display: block; height: 100%; background: var(--primary); border-radius: 999px; }

/* The register: a row to a day, and today's row marked so the eye lands on
   it without being told where to look. */
.data-table.register td { vertical-align: middle; }
.data-table.register select { padding: .35rem .5rem; font: inherit; border-radius: 8px;
    border: 1px solid var(--line); background: #fff; min-width: 9.5rem; }
.data-table.register input[type=text] { width: 100%; padding: .35rem .5rem; font: inherit;
    border-radius: 8px; border: 1px solid var(--line); }
.data-table tr.is-today td { background: var(--primary-tint); }
.data-table tr.row-quiet td { background: #fbfbfa; color: var(--muted); }

/* A list of names that is a list, not a set of bullets. */
.plain-list { list-style: none; margin: .4rem 0 0; padding: 0; }
.plain-list li { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
    padding: .5rem 0; border-top: 1px solid var(--line); }
.plain-list li:first-child { border-top: 0; }
.plain-list li .btn { margin-inline-start: auto; }

/* The card that is saying something is wrong. */
.alert-card { border-color: #f0c9c6; background: #fffaf9; }

/* Tick boxes in a row — the days of the week a trainee is expected. */
.checks { display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; margin-top: .4rem; }
.check { display: inline-flex; align-items: center; gap: .4rem; font-weight: 500;
    font-size: .86rem; }
.check input { width: auto; margin: 0; accent-color: var(--primary); }

/* The line under a label that explains it. */
.hint { display: block; font-weight: 400; font-size: .76rem; color: var(--muted);
    margin-top: .15rem; }

/* The fifth badge the academy needs: a fact that is neither good nor bad —
   a training that has finished, a day that was a holiday. */
.badge-quiet { background: #eceff2; color: #51606f; }

/* The browser's own rule for [hidden] is weaker than any class of ours, so a
   field or a button the page hides would stay on screen. This says it once. */
[hidden] { display: none !important; }

/* ── The trainee's own screen ─────────────────────────────────────────────
   One card, one button, and it has to be findable on a phone held in one
   hand at eight in the morning. */
.checkin { border-color: var(--primary); }
.checkin-form { display: grid; gap: .75rem; margin-top: .75rem; }
.checkin-form label { display: block; font-weight: 500; font-size: .86rem; }
.checkin-form input[type=text] { width: 100%; margin-top: .25rem; padding: .55rem .7rem;
    font: inherit; border-radius: 9px; border: 1px solid var(--line); }
.btn-big { font-size: 1.05rem; padding: .9rem 1.4rem; width: 100%; }

/* Once it is pressed, the time is the headline: it is the fact they came
   here to check. */
.checkin-done { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
    margin-top: .75rem; padding: .9rem 1rem; border-radius: 12px;
    background: var(--primary-tint); border: 1px solid var(--line); }
.checkin-done .checkin-time { font-size: 2.1rem; font-weight: 700; line-height: 1;
    color: var(--primary); font-variant-numeric: tabular-nums; }
.checkin-done form { margin-inline-start: auto; }

@media (min-width: 640px) {
    .btn-big { width: auto; }
}

/* The day column of a register reads as one line or not at all: "Sun 11 Oct
   2026" broken over four lines on a phone is not a date. */
.data-table.register td:first-child { white-space: nowrap; }