/* ══════════════════════════════════════════════════════════════════════
   Oncology Preparations — Dr. Samir Abbas Hospital.

   Dark grey, and it earns it. This screen is read in a compounding room
   under a hood, for one purpose: to find the dose, the hazard and the check
   that has not been signed. On a white page every card competes with every
   other for the eye. On a grey one only the coloured things carry — and the
   only coloured things here are a dose, a warning, and the button that
   moves the bag to the next pair of hands.

   Three colours mean something and nothing else does:

     teal    the unit's own colour, and the figure the arithmetic produced
     amber   something to put to the prescriber before the bag is made
     crimson cytotoxic, and a stop that has to be answered before verifying

   Violet is the extemporaneous compounding sheet and light blue is
   antimicrobial stewardship, on this same platform; neither appears here, so
   a pharmacist who works all three can tell from the far side of the room
   which one is on screen.

   The label is not in this file. apps/oncology/label.php carries its own
   stylesheet and prints black on white, because a sticker goes on a bag.
   ══════════════════════════════════════════════════════════════════════ */

@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 */
    --bg: #23262a;
    --bg-deep: #1a1d20;
    --card: #2c3034;
    --card-raised: #34383d;
    --ink: #e9ecef;
    --muted: #9aa3ac;
    --line: #3d4248;
    --line-soft: #33383d;

    /* the unit's colour. --primary fills chrome, --primary-bright is the one
       that has to stay legible as type on a dark card, and --primary-tint is
       the faintest wash a row can take and still read as picked out. */
    --primary: #14818c;
    --primary-bright: #4ecad6;
    --primary-deep: #0e5f68;
    --primary-line: #2f6b72;
    --primary-tint: #2a3538;

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

    /* the boxes people write in — white on the grey page, and their own ink */
    --field: #ffffff;
    --field-ink: #1c1f22;
    --field-muted: #6b7378;
    --field-line: #b9c1c6;

    --danger: #ef5a52;
    --danger-deep: #7d2622;
    --warn: #e9a33c;
    --warn-deep: #6d4a12;
    --info: #63a9f0;
    --info-deep: #234a70;
    --ok: #4fbb84;
    --ok-deep: #1f4d38;

    /* 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 0 rgba(255,255,255,.035), 0 2px 10px rgba(0,0,0,.35);
    --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(--bg-deep); color: var(--ink); padding: .7rem 1.25rem;
    border-bottom: 1px solid var(--line); }
.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; color: var(--muted); }
.mainnav { display: flex; gap: 1.1rem; flex: 1; flex-wrap: wrap; }
.mainnav a { color: var(--ink); font-weight: 500; font-size: .92rem; opacity: .88; }
.mainnav a:hover { opacity: 1; text-decoration: none; border-bottom: 2px solid var(--primary-bright); }
.who { text-align: right; font-size: .8rem; line-height: 1.35; }
.who strong { display: block; }
.who span { display: block; color: var(--muted); }
.who a { color: var(--primary-bright); 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(--bg-deep); font-size: .78rem; color: var(--muted); }
.pagefoot strong { display: block; color: var(--house); }

.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: #ff9089; border-color: #5c2d2a; }
.btn-danger:hover { background: var(--danger); color: #1a1d20; 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(--bg-deep); color: var(--muted); 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: #b6e7cd; }
.badge-warn { background: var(--warn-deep); color: #f6d69c; }
.badge-danger { background: var(--danger-deep); color: #f6b8b3; }
.badge-info { background: var(--info-deep); color: #bcd9f6; }
.badge-unknown { background: #3a3f45; color: #b6bdc4; }

/* ── 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; }
.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: #c7edd9; }
.flash.error { background: var(--danger-deep); color: #f8c8c4; }

.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; }

/* ---------------------------------------------------------------- oncology */

/* Findings. Three levels, and none of them shares a colour with anything that
   is not a finding: crimson stops the order, amber asks a question of the
   prescriber, grey is something to know. */
.findings { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: .55rem; }
.finding { border: 1px solid var(--line); border-left-width: 5px; border-radius: 10px;
    background: var(--card); padding: .65rem .85rem; box-shadow: var(--shadow); }
.finding strong { display: block; font-size: .9rem; }
.finding span { color: var(--muted); font-size: .82rem; }
.finding.stop { border-left-color: var(--danger); background: #33262a; border-color: #4d3034; }
.finding.stop strong { color: #f9a9a3; }
.finding.warn { border-left-color: var(--warn); background: #33302a; border-color: #4c4433; }
.finding.warn strong { color: #f0c37c; }
.finding.note { border-left-color: #6a737b; }

/* The order itself: one row per drug, the arithmetic beside the answer. */
.orders { display: grid; gap: .8rem; }
.order-line { border: 1px solid var(--line); border-radius: 12px; background: var(--card);
    box-shadow: var(--shadow); overflow: hidden; }
.order-line > header { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem;
    padding: .6rem .9rem; background: var(--primary-tint); border-bottom: 1px solid var(--line); }
.order-line > header .drug { font-weight: 700; font-size: .98rem; color: var(--primary-bright); }
.order-line > header .ordered { color: var(--muted); font-size: .84rem; }
.order-line > header .ctx { margin-left: auto; font-size: .74rem; color: var(--muted);
    border: 1px solid var(--line); border-radius: 999px; padding: .1rem .55rem; background: var(--bg-deep); }
.order-line .body { padding: .75rem .9rem; display: grid; gap: .6rem;
    grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
.order-line .verbatim { font-size: .8rem; color: var(--muted); grid-column: 1 / -1;
    border-top: 1px dashed var(--line); padding-top: .5rem; }
.order-line .final { text-align: right; white-space: nowrap; }
/* The one number on the screen that is the answer, in the one colour that is
   the unit's own. Nothing else on a card is set in it. */
.order-line .final b { display: block; font-size: 1.45rem; color: var(--primary-bright); line-height: 1.1; }
.order-line .final span { font-size: .76rem; color: var(--muted); }
.order-line .working { font-size: .82rem; color: var(--muted); }
.order-line .admin { font-size: .84rem; }
.order-line.hazard { border-color: #55322f; }
.order-line.hazard > header { background: #33262a; border-bottom-color: #55322f; }
.order-line.hazard > header .drug { color: #f9a9a3; }
.pill-hazard { font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    background: var(--danger); color: #1a1d20; border-radius: 999px; padding: .1rem .5rem; }

/* Patient block: the numbers the whole form is built on, always in sight. */
.bodybar { display: flex; flex-wrap: wrap; gap: 1.4rem; padding: .75rem 1rem; margin-bottom: 1.25rem;
    background: var(--primary-deep); color: #eafafb; border-radius: 12px;
    border: 1px solid var(--primary-line); }
.bodybar div { line-height: 1.25; }
.bodybar b { display: block; font-size: 1.15rem; }
.bodybar span { font-size: .72rem; opacity: .78; text-transform: uppercase; letter-spacing: .05em; }

/* The signature chain the paper order form prints at the foot of every page. */
.stages { display: grid; gap: .5rem; }
.stage { display: flex; align-items: center; gap: .7rem; padding: .55rem .8rem;
    border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.stage .who { margin-left: auto; text-align: right; font-size: .82rem; }
.stage .who b { display: block; }
.stage.done { border-color: var(--primary-line); background: var(--primary-tint); }
.stage .tick { width: 1.35rem; height: 1.35rem; border-radius: 50%; border: 2px solid var(--line);
    display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; }
.stage.done .tick { background: var(--primary); border-color: var(--primary); color: #fff; }

/* Protocol library. */
.protocol-list { display: grid; gap: .6rem; }
.protocol { display: block; border: 1px solid var(--line); border-radius: 10px; background: var(--card);
    padding: .65rem .9rem; color: inherit; box-shadow: var(--shadow); }
.protocol:hover { border-color: var(--primary-line); background: var(--card-raised); text-decoration: none; }
.protocol .code { font-weight: 700; color: var(--primary-bright); }
.protocol .t { display: block; font-size: .85rem; color: var(--muted); }
.protocol .drugs { display: block; font-size: .78rem; color: var(--muted); margin-top: .25rem; }
.group-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.group-tabs a { border: 1px solid var(--line); border-radius: 999px; padding: .3rem .85rem;
    background: var(--card); font-size: .84rem; font-weight: 600; color: var(--primary-bright); }
.group-tabs a:hover { text-decoration: none; border-color: var(--primary-line); }
.group-tabs a.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.group-tabs a.on .muted { color: #cfeff2; }