/* ══════════════════════════════════════════════════════════════════════
   Pharmacy Inventory — Dr. Samir Abbas Hospital.

   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: #4a3b26;
    --primary-bright: #3d301e;
    --primary-deep: #332816;
    --primary-line: #cdbfa2;
    --primary-tint: #f0e7d3;

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