/* Clinical Pharmacy Interventions — Dr. Samir Abbas Hospital theme.
   Same palette as the floor stock system: green #2b925d, ink #252525. */

@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 {
    --bg: #f6f8f7;
    --card: #ffffff;
    --ink: #252525;
    --muted: #6f7d75;
    --line: #e2e9e4;
    --primary: #2b925d;
    --primary-dark: #23744a;
    --primary-light: #a7e3c4;
    --primary-tint: #eaf6ef;
    --danger: #c72f28;
    --warn: #d98300;
    --info: #2a90ef;
    --shadow: 0 1px 3px rgba(37,37,37,.08), 0 1px 2px rgba(37,37,37,.04);
    --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); 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-dark); }
h3 { margin: 0; font-size: 1rem; font-weight: 600; }
.muted { color: var(--muted); }
.small { font-size: .82rem; }

/* ── Header ─────────────────────────────────────────────── */
.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: .92; }
.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-dark); }

.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); font-size: .87rem; font-weight: 600; cursor: pointer; font-family: inherit; }
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); }
.btn-light { color: var(--primary-dark); }
.btn-light:hover { background: var(--primary-tint); }
.btn-danger { color: var(--danger); border-color: #f0cfcd; }
.btn-danger:hover { background: var(--danger); color: #fff; }
.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(--primary); } .stat-card.ok .stat-num { color: var(--primary); }
.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); }

.section-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(20rem,100%),1fr)); }
.section-card { display: block; background: var(--card); border: 1px solid var(--line); border-radius: 14px;
    padding: 1.4rem; box-shadow: var(--shadow); color: inherit; border-top: 4px solid var(--primary); }
.section-card:hover { text-decoration: none; border-color: var(--primary-light); }
/* The stewardship card matches the blue its charts use, so the two halves of
   the platform read as the same two colours everywhere. */
.section-card.amber { border-top-color: #2a78d6; }
.section-card h3 { font-size: 1.1rem; margin-bottom: .1rem; }
.section-card .ar { color: var(--primary-dark); font-weight: 600; font-size: .95rem; }
.section-card p { color: var(--muted); font-size: .87rem; margin: .5rem 0 .9rem; }

/* ── Tables ─────────────────────────────────────────────── */
.table-scroll { overflow-x: auto; }
/* The records table earns its width back.
   It is read down, one row at a time, and a screen that has to be dragged
   sideways to reach the Open button is a screen that hides the button. The
   headings are short (see interventions.php), the type and the padding are a
   step tighter than the rest of the platform, and no single cell is allowed to
   set the width of its column on its own — a long medication name wraps inside
   its cell instead of stretching it to five hundred pixels. */
.data-table.records { font-size: .82rem; }
.data-table.records th, .data-table.records td { padding: .45rem .5rem; }
.data-table.records th { white-space: normal; line-height: 1.2; }
/* break-word rather than anywhere: a cell may break a word that genuinely
   cannot fit, but "Other" broken as "Othe / r" is a column doing it because it
   was allowed to, not because it had to. */
.data-table.records td { max-width: 13rem; overflow-wrap: break-word; }
/* A date, a number and the button are the three things that must never break
   across two lines: "2026-07-27" read as two lines is read twice, a file number
   broken as "503327 / 6" is a file number read wrong, and a button spelt
   "Ope / n" is a button somebody hesitates over. */
.data-table.records td.c-date, .data-table.records td.c-number,
.data-table.records td.c-open, .data-table.records td.k-mrn,
.data-table.records td.k-bud { white-space: nowrap; overflow-wrap: normal; max-width: none; }
.data-table.records td.c-open { text-align: right; }
/* The two columns that carry a single unbroken word longer than any column
   should be — METHYLPREDNISOLONE, SULFAMETHOXAZOLE — are allowed to break
   inside it, because the alternative is that one drug name sets the width of
   the whole table. Nothing else is. */
.data-table.records td.k-medication, .data-table.records td.k-drug,
.data-table.records td.k-preparation, .data-table.records td.k-antimicrobial {
    overflow-wrap: anywhere; }
.data-table.records .detail-row td { max-width: none; overflow-wrap: normal; }
.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; }
.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; }
.data-table td { padding: .55rem .7rem; border-top: 1px solid var(--line); vertical-align: top; }
.data-table tbody tr:hover { background: var(--primary-tint); }
.data-table .num { text-align: right; }

.badge { display: inline-block; padding: .18rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 600; white-space: nowrap; }
.badge-ok { background: #d3efdf; color: #1d6b43; }
.badge-warn { background: #fdeecd; color: #9a6a00; }
.badge-danger { background: #f7dedc; color: #a02c26; }
.badge-info { background: #dceafd; color: #1c5fa8; }
.badge-unknown { background: #e6e9e7; color: #55605a; }

/* ── 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-dark); }
.grid-form input, .grid-form select, .grid-form textarea {
    width: 100%; margin-top: .3rem; padding: .5rem .6rem; border: 1px solid var(--line);
    border-radius: 8px; font-family: inherit; font-size: .9rem; background: #fff; color: var(--ink); }
.grid-form input:focus, .grid-form select:focus, .grid-form textarea:focus {
    outline: 2px solid var(--primary-light); border-color: var(--primary); }
.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; }

.flash { padding: .7rem 1rem; border-radius: 10px; margin-bottom: 1rem; font-size: .88rem; font-weight: 500; }
.flash.success { background: #d3efdf; color: #1d6b43; }
.flash.error { background: #f7dedc; color: #a02c26; }
/* What was typed but not yet saved. Amber rather than green: it is a rescued
   draft, not a recorded intervention, and the difference matters — nothing is
   on the record until Save has been pressed and answered. */
/* The whole screen in the colour of the work being recorded, not just the card
   in the middle of it — somebody who came to record one kind of work should be
   able to tell which sheet is in front of them from across the room. Tinted
   rather than coloured: it sits behind a form people read for ten minutes, so
   it is the faintest wash that still says which sheet this is, and every label
   and figure on it keeps its contrast.

   The tint is set on the body, so the page, the panel of section cards and the
   sheet itself all move together and the screen reads as one thing. */
body.tone-violet { background: #f4f0fd; }
/* Stewardship wears the blue its own cards and charts have always used. */
body.tone-amber { background: #eef5fe; }
body.tone-amber .page-head h1 { color: #1c5fa8; }
body.tone-amber .card { border-color: #d5e4f8; }
body.tone-amber .section-card { background: #fbfdff; }
.entry-card.amber { background: #f7fbff; border-color: #d5e4f8; }
.entry-card.amber .grid-form label { color: #1c5fa8; }
.entry-card.amber label > span.muted { color: #5b7ba5; }
.entry-card.amber input, .entry-card.amber select, .entry-card.amber textarea { background: #fff; }
/* On the dashboard all three kinds of work are on one page, so the colour
   belongs to the block rather than the screen: tinting the whole page violet
   there would say the page was about one of them. */
.tone-violet-head { color: #4b3a72; }
.tone-violet-block { background: #f4f0fd; border: 1px solid #e4dbf8; border-radius: 14px;
    padding: 1rem; margin-bottom: 1.4rem; }
.tone-violet-block > .card, .tone-violet-block .two-col > .card { border-color: #e4dbf8; }
.tone-violet-block h3 { color: #4b3a72; }
.section-card.violet { background: #faf8ff; }
body.tone-violet .page-head h1 { color: #4b3a72; }
body.tone-violet .card { border-color: #e4dbf8; }
body.tone-violet .section-card { background: #fdfcff; }

.entry-card { border-top: 4px solid var(--primary); }
.entry-card.violet {
    background: #faf8ff;
    border-color: #ded2f7;
    border-top-color: #7a52c7;
}
/* The whole sheet reads as one thing: a green heading on a violet card is two
   colours arguing about which section you are in. */
.entry-card.violet .grid-form label { color: #4b3a72; }
.entry-card.violet label > span.muted { color: #6b5a8a; }
.entry-card.violet input, .entry-card.violet select, .entry-card.violet textarea { background: #fff; }
.entry-card.violet .computed-box { background: #f1ebff; border-color: #ded2f7; color: #4b3a72; }
.entry-card.amber { border-top-color: #2a78d6; }

/* The formulary, dropped open under the box it fills. Tall enough to show that
   there is a great deal in it, short enough not to bury the rest of the form. */
.grid-form label { position: relative; }
.picklist { position: absolute; z-index: 30; inset-inline: 0; top: 100%; margin-top: 2px;
    max-height: 17rem; overflow-y: auto; background: #fff; border: 1px solid var(--line);
    border-radius: 8px; box-shadow: 0 12px 28px rgba(20,40,30,.16); }
.picklist .pick { display: block; width: 100%; text-align: start; padding: .45rem .6rem;
    border: 0; background: none; font: inherit; font-weight: 500; font-size: .85rem;
    color: var(--ink); cursor: pointer; }
.picklist .pick:hover, .picklist .pick.on { background: #f1ebff; color: #4b3a72; }
.picklist .pick-none { padding: .5rem .6rem; font-size: .82rem; color: var(--muted); }

/* The guideline's own page for whatever was chosen, beside the order. */
.formula-card { border-top: 4px solid #7a52c7; }
.formula-card h2 { font-size: 1.05rem; margin: 0 0 .1rem; }
.formula-card h3 { font-size: .82rem; text-transform: uppercase; letter-spacing: .04em;
    color: var(--muted); margin: 1rem 0 .4rem; }
.formula-method { margin: 0; padding-inline-start: 1.1rem; font-size: .85rem; line-height: 1.5; }
.formula-method li { margin-bottom: .25rem; }
#formulaKeep { margin-top: 1rem; padding-top: .6rem; border-top: 1px solid var(--line);
    color: var(--muted); }

/* A figure the system worked out rather than a box somebody fills in: it reads
   as an answer, not as an empty field waiting for one. */
.computed-box { display: block; padding: .55rem .7rem; border: 1px dashed var(--line);
    border-radius: 8px; background: #f6f9f7; font-weight: 600; color: var(--primary-dark);
    font-size: .9rem; min-height: 1.2em; }
.grid-form .hint { display: block; margin-top: .2rem; }
/* The third kind of work this log keeps. */
.section-card.violet { border-top-color: #7a52c7; }
/* The card you are on is outlined in its own section's colour rather than in
   the app's green — a green ring around the violet section is the interface
   disagreeing with itself about which one you picked. */
.section-card[aria-current] { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-light); }
.section-card.amber[aria-current] { border-color: #2a78d6; box-shadow: 0 0 0 2px #bcd8f7; }
.section-card.violet[aria-current] { border-color: #7a52c7; box-shadow: 0 0 0 2px #ded2f7; }

.flash.draft-flash {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    background: #fffaf2; border-inline-start: 4px solid #d98324; color: #7a4a00;
}
.draft-state { margin-inline-start: auto; font-size: .78rem; color: var(--muted, #6b7280); }

.filters { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(min(11rem,100%),1fr)); align-items: end; }
.filters label { font-size: .78rem; font-weight: 600; color: var(--primary-dark); }
.filters input, .filters select { width: 100%; margin-top: .25rem; padding: .45rem .55rem;
    border: 1px solid var(--line); border-radius: 8px; font-family: inherit; font-size: .85rem; }

/* ── Charts ─────────────────────────────────────────────────
   Thin marks, hairline chrome, and the value at the mark's tip so no chart
   needs a second axis. Labels and values are always ink, never the series
   colour — the coloured mark beside them carries the identity. */

/* Ranked horizontal bars — one hue per chart; length carries the magnitude. */
.ranked { display: grid; gap: .5rem; }
.ranked-row { display: grid; grid-template-columns: minmax(6rem, 15rem) 1fr auto; gap: .7rem;
    align-items: center; font-size: .83rem; }
.ranked-row:hover .ranked-fill { filter: brightness(.93); }
.ranked-label { color: var(--ink); overflow-wrap: anywhere; }
.ranked-track { background: #f1f5f2; border-radius: 3px; height: 10px; }
.ranked-fill { display: block; height: 100%; border-radius: 0 3px 3px 0; min-width: 3px; }
.ranked-value { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 2.6rem; text-align: right; }
.chart-note { margin: .7rem 0 0; }

/* One 100% bar split into its parts. White does the separating — a 2px gap,
   never a stroke drawn around a segment. */
.prop { display: flex; gap: 2px; background: var(--card); height: 34px; margin-bottom: .8rem; border-radius: 4px; overflow: hidden; }
.prop-seg { display: flex; align-items: center; justify-content: center; min-width: 3px;
    color: #fff; font-size: .76rem; font-weight: 600; white-space: nowrap; }
.prop-seg:first-child { border-radius: 4px 0 0 4px; }
.prop-seg:last-child { border-radius: 0 4px 4px 0; }

.legend { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; font-size: .8rem; color: var(--ink); }
.legend-top { margin-bottom: .8rem; }
.legend-item { display: inline-flex; align-items: center; gap: .4rem; }
.legend-item i { width: 11px; height: 11px; border-radius: 3px; flex: none; }

/* Monthly trend. */
.chart-scroll { overflow-x: auto; }
.trend { width: 100%; min-width: 420px; height: auto; display: block; }
.trend .tick { font-size: 11px; fill: var(--muted); font-family: var(--font-ui); font-variant-numeric: tabular-nums; }

/* Every chart's numbers, in full, for anyone the picture does not serve. */
.chart-table { margin-top: .9rem; }
.chart-table summary { cursor: pointer; font-size: .78rem; color: var(--muted); font-weight: 600; }
.chart-table summary:hover { color: var(--primary-dark); }
.chart-table .data-table { margin-top: .6rem; font-size: .8rem; }

.two-col { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(22rem,100%),1fr)); }
.card > h3 { margin-bottom: .9rem; }
.card > h3 + .muted.small { margin-top: -.7rem; }

/* The dashboard reads as a report, so it opens like one. */
.report-head { text-align: center; margin-bottom: 1.5rem; }
.report-head .hospital { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
    color: var(--primary-dark); font-weight: 600; }
.report-head h1 { margin: .3rem 0 .2rem; }
.report-head .period { color: var(--muted); font-size: .86rem; margin: 0; }

.quick-periods { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center;
    margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.chip { display: inline-block; padding: .3rem .85rem; border-radius: 999px; border: 1px solid var(--line);
    font-size: .8rem; font-weight: 600; color: var(--ink); background: var(--card); }
.chip:hover { border-color: var(--primary); text-decoration: none; }
.chip.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-sm { padding: .3rem .85rem; font-size: .8rem; }

.data-table tfoot th { background: var(--primary-tint); color: var(--primary-dark); text-align: left;
    padding: .55rem .7rem; border-top: 2px solid var(--primary-light); text-transform: none;
    font-size: .82rem; letter-spacing: 0; white-space: nowrap; }
.data-table tfoot th.num { text-align: right; }
.crosstab td, .crosstab th { white-space: nowrap; }
.crosstab tbody td:first-child { position: sticky; left: 0; background: var(--card); }

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

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

@media (max-width: 700px) {
    .topbar { gap: .75rem; }
    .who { text-align: left; }
}

/* ── Expandable description row ─────────────────────────────
   A description runs to a paragraph. As a column it would set the width of
   every row and push the rest off the screen, so it opens underneath instead. */
.data-table th.expander, .data-table td.expander { width: 2.2rem; padding-inline: .45rem; }
.expand { border: 1px solid var(--line); background: var(--card); color: var(--primary-dark);
    width: 1.6rem; height: 1.6rem; border-radius: 6px; cursor: pointer; font-size: .8rem;
    line-height: 1; padding: 0; font-family: inherit; }
.expand:hover { border-color: var(--primary); background: var(--primary-tint); }
.expand[aria-expanded="true"] { background: var(--primary); border-color: var(--primary); color: #fff; }
.detail-row > td { background: var(--primary-tint); padding: .85rem 1.1rem; }
.data-table tbody tr.detail-row:hover > td { background: var(--primary-tint); }
.detail + .detail { margin-top: .7rem; }
.detail .k { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em;
    color: var(--primary-dark); font-weight: 700; margin-bottom: .2rem; }
.detail .v { display: block; font-size: .87rem; line-height: 1.6; }

/* The marker lives inside the first cell, so it needs a little air after it,
   and rows without a description keep the text aligned with the ones that
   have one. */
.expand + * { margin-inline-start: .45rem; }
.expand-gap { display: inline-block; width: 1.6rem; }
/* Coming back from a record lands on its own row and says which one. */
.data-table tbody tr:target > td { background: #fdeecd; box-shadow: inset 3px 0 0 var(--warn); }
.data-table td:first-child { white-space: nowrap; }
.sec-tag { display: inline-block; font-size: .74rem; color: var(--primary-dark);
    background: var(--primary-tint); border-radius: 999px; padding: .12rem .5rem; }

/* A date this system worked out rather than read off the sheet. Said on the
   record itself, because a reconstructed date that looks like any other is a
   date somebody will quote back as if it were written down. */
.date-note {
    margin-top: 1rem;
    padding: .55rem .8rem;
    border-inline-start: 3px solid var(--warn, #d98300);
    background: #fffaf2;
    border-radius: 6px;
    font-size: 13px;
    color: #7a4a00;
}