/* ══════════════════════════════════════════════════════════════════════
   IV Admixture Log — the sterile compounding room, on screen.

   The room this system serves is a controlled one: filtered air moving in
   one direction, a clean field you do not reach across, a garbed operator,
   a second pair of eyes on every bag. The interface is built to read the
   same way.

     The page is blue.       A cleanroom is lit cold and white-blue, and the
                             colour is doing a second job here: green, amber
                             and red are reserved for what the pharmacist has
                             to act on — time left on a bag, a line that must
                             be central, a hazardous drug. Nothing that is
                             merely furniture is allowed to wear one of those
                             colours, so the chrome takes blue and the
                             warnings stay the only warm thing on the page.

     Air moves downward.     Under the header sits a band of fine vertical
                             lines: unidirectional airflow off the HEPA face.
                             It marks where the chrome ends and the work
                             begins, the way the hood's edge does.

     The field is white.     Every card is a clean field on the room's blue —
                             white, hairline-bordered, with the critical ones
                             edged along the top. What sits on the field is
                             the work; what sits off it is not.

   Safety colours are untouched from the rest of the pharmacy's systems, so a
   red badge means the same thing here as it does in the formulary.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  /* the room */
  --bg: #e8f0f9;
  --bg-deep: #d7e6f5;
  --surface: #ffffff;
  --ink: #0d2033;
  --muted: #5f7387;
  --line: #d6e3f0;
  --line-soft: #e8f0f8;

  /* the chrome — sterile blue */
  --brand: #1668c4;
  --brand-dark: #0d4b91;
  --brand-deep: #0a3a63;
  --brand-soft: #e2edfb;
  --brand-tint: #f3f8fe;

  /* what the pharmacist has to act on — unchanged across the pharmacy's systems */
  --ham: #dc2626;
  --ham-bg: #fef2f2;
  --haz: #ea580c;
  --haz-bg: #fff7ed;
  --res: #a16207;
  --res-yellow: #eab308;
  --res-bg: #fefce8;
  --res-ink: #422006;
  --ok: #15803d;
  --ok-bg: #f0fdf4;

  --shadow: 0 1px 3px rgba(10,58,99,.10), 0 1px 2px rgba(10,58,99,.05);
  --shadow-lg: 0 16px 44px rgba(10,58,99,.20);
  --radius: 16px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
  /* The room: clean light falling from the top, on the faint square grid of a
     cleanroom ceiling. Both are far too weak to compete with anything on a
     card — they are there so the white fields read as fields. */
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(255,255,255,.95), rgba(255,255,255,0) 60%),
    repeating-linear-gradient(0deg,  rgba(13,75,145,.045) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(90deg, rgba(13,75,145,.045) 0 1px, transparent 1px 46px),
    linear-gradient(180deg, var(--bg) 0, var(--bg-deep) 100%);
  background-attachment: fixed;
  min-height: 100vh;
}

/* the hospital emblem, held back behind everything */
body::before {
  content: "";
  position: fixed; inset: 0;
  background: url('dsah-logo.png') no-repeat center 86% / min(560px, 84vw);
  filter: grayscale(1);
  opacity: .045;
  pointer-events: none;
  z-index: 0;
}

.muted { color: var(--muted); }
.small { font-size: 13px; }
a { color: var(--brand-dark); }
.mono { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 13px; }

/* ── header, and the air coming off the filter ────────────────────────── */

.site-header {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 16px 19px;
  background: linear-gradient(180deg, #0d4373 0%, var(--brand-deep) 100%);
  padding-top: max(10px, env(safe-area-inset-top));
  box-shadow: 0 2px 18px rgba(10,58,99,.28);
}
/* Unidirectional airflow off the HEPA face: the boundary between the chrome
   and the work, drawn the way the hood draws it. */
.site-header::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 9px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.34) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, rgba(80,170,255,.55), rgba(80,170,255,0));
  pointer-events: none;
}

.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: #fff; min-width: 0; }
/* The emblem is a wordmark, 270×67 — squeezed into a square it renders as a
   speck, so it is given its own proportions. It already reads "Dr. Samir Abbas
   Hospital", which is why the text beside it names the system instead. */
.brand-logo { flex: none; width: 102px; height: 25px; object-fit: contain; }
.brand-text { display: flex; flex-direction: column; min-width: 0; }
.brand-text strong { font-size: 14.5px; line-height: 1.15; color: #fff; white-space: nowrap; }
.brand-text small { font-size: 11px; color: rgba(214,233,255,.82); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.header-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.site-nav { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.admin-link {
  flex: none; color: #dbeafe; text-decoration: none; font-size: 13px; font-weight: 600;
  padding: 6px 12px; border: 1px solid rgba(146,197,253,.38); border-radius: 999px; background: rgba(255,255,255,.04);
}
.admin-link:hover { background: rgba(255,255,255,.14); color: #fff; }
.admin-link:active { background: rgba(255,255,255,.22); }

/* Narrow screens: the brand keeps the top line to itself and the nav becomes a
   single row that scrolls sideways, rather than a block of pills the brand has
   to squeeze through. */
@media (max-width: 900px) {
  .site-header { flex-wrap: wrap; row-gap: 9px; }
  .brand { width: 100%; }
  .header-right { width: 100%; margin-left: 0; }
  .site-nav {
    width: 100%; flex-wrap: nowrap; justify-content: flex-start;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: 2px;
  }
  .site-nav::-webkit-scrollbar { display: none; }
  .admin-link { white-space: nowrap; }
}
@media (max-width: 720px) {
  .brand-text small { display: none; }
  .brand-logo { width: 96px; height: 24px; }
  .admin-link { padding: 5px 11px; font-size: 12.5px; }
}

/* ── the work surface ─────────────────────────────────────────────────── */

.wrap { max-width: 1180px; margin: 0 auto; padding: 24px 16px 60px; position: relative; z-index: 1; }
.page-head { display: flex; justify-content: space-between; align-items: flex-start;
    gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.page-head h1 { font-size: 26px; margin: 4px 0 2px; color: var(--brand-deep); letter-spacing: -.01em; }
.back { font-size: 13px; font-weight: 600; text-decoration: none; }
.head-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* A card is a clean field: white, bounded, and edged along the top so the eye
   sees where it starts. */
.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 14px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--brand), #4a9ae8 60%, rgba(74,154,232,0));
}
.card > h3 { font-size: 15px; margin: 0 0 12px; color: var(--brand-dark); }
.card > h3 + .muted.small { margin-top: -8px; }
.card h2 {
  font-size: 13px; text-transform: uppercase; letter-spacing: .6px;
  color: var(--brand-dark); margin: 0 0 8px; padding-bottom: 8px;
  border-bottom: 2px solid var(--brand-soft);
}

/* Something needing attention is edged in its own colour, not in blue. */
.alert-card { border-color: #fbd5d5; background: #fffafa; }
.alert-card::before { background: linear-gradient(90deg, var(--ham), #f87171 60%, rgba(248,113,113,0)); }
.alert-card > h3 { color: #b91c1c; }
.error-card > h3 { color: #b91c1c; }
.error-card { border-color: #fecaca; background: var(--ham-bg); }
.error-card::before { background: var(--ham); }
.error-card ul { margin: .5rem 0 0; padding-inline-start: 1.1rem; }

/* ── buttons ──────────────────────────────────────────────────────────── */

.btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 18px; border-radius: 999px;
    border: 1px solid var(--line); background: var(--surface); color: var(--brand-dark);
    font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; text-decoration: none;
    transition: background .12s, border-color .12s, transform .12s; }
.btn:hover { border-color: var(--brand); background: var(--brand-tint); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: linear-gradient(180deg, #1b73d3, var(--brand)); border-color: var(--brand-dark); color: #fff;
    box-shadow: 0 6px 16px rgba(13,75,145,.28); }
.btn-primary:hover { background: linear-gradient(180deg, var(--brand), var(--brand-dark)); border-color: var(--brand-dark); color: #fff; }
.btn-light:hover { background: var(--brand-soft); }
.btn-danger { color: var(--ham); border-color: #f3c9c9; background: var(--ham-bg); }
.btn-danger:hover { background: var(--ham); border-color: var(--ham); color: #fff; }
.btn-sm { padding: 5px 13px; font-size: 12.5px; }
.btn-lg { padding: 12px 26px; font-size: 15px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* ── forms ────────────────────────────────────────────────────────────── */

.filters { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(11rem,100%),1fr)); align-items: end; }
.filters label, .grid-form label { display: block; font-size: 12.5px; font-weight: 700; color: var(--brand-dark); }
.filters input, .filters select,
.grid-form input, .grid-form select, .grid-form textarea {
    width: 100%; margin-top: 5px; padding: 9px 11px; border: 1px solid var(--line);
    border-radius: 10px; font-family: inherit; font-size: 14px; background: #fff; color: var(--ink); }
.grid-form input:focus, .grid-form select:focus, .grid-form textarea:focus,
.filters input:focus, .filters select:focus { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.grid-form input[readonly] { background: var(--brand-tint); color: var(--muted); }
.grid-form { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(16rem,100%),1fr)); }
.grid-form textarea { min-height: 90px; resize: vertical; }
/* Who made it and who checked it are one act, so they sit side by side and
   pair down to a narrower screen than the rest of the form does. */
.grid-form-staff { grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr)); }
.grid-form .wide { grid-column: 1 / -1; }
.req { color: var(--ham); margin-inline-start: 2px; }
.hint { display: block; font-weight: 400; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
/* What the form filled in for you, and — louder — where two identifiers for
   the same patient disagree. The second is worth catching before printing. */
.hint-filled { color: var(--brand-dark); font-weight: 600; }
.hint-warn { color: var(--ham); font-weight: 700; }
/* Recording a second dose for a patient already on the form: whose it is,
   said once at the top rather than left to be read off the boxes. */
.carried { margin: .5rem 0 0; padding: .5rem .8rem; border-radius: 10px; font-size: 13px;
           background: var(--brand-tint); border: 1px solid var(--line); color: var(--brand-deep); }
.carried a { margin-inline-start: .4rem; font-weight: 600; }
.form-actions { grid-column: 1 / -1; display: flex; gap: 10px; justify-content: flex-end; margin-top: 4px; align-items: center; flex-wrap: wrap; }
.form-actions-card { position: sticky; bottom: 0; z-index: 5; }
.checks { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 6px; }
.check { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; font-size: 13.5px; color: var(--ink); }
.check input { width: auto; margin: 0; accent-color: var(--brand); }
.status-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .8rem; align-items: end; }
.status-form .wide { grid-column: span 2; }
.copies { display: inline-flex; flex-direction: column; font-size: 12px; font-weight: 600;
          color: var(--muted); margin-inline-end: 10px; }
.copies input { width: 76px; padding: 9px 10px; border-radius: 10px; border: 1px solid var(--line); font: inherit; }

/* A value the system worked out rather than one that was typed: shown as the
   hood's own readout, so it is never mistaken for an editable field. */
.auto { font-size: 11px; font-weight: 600; color: var(--brand-dark);
        background: var(--brand-soft); border-radius: 999px; padding: 1px 7px; margin-inline-start: 6px; }
.computed {
  display: block; padding: 10px 12px; border-radius: 10px; font-weight: 700;
  background: var(--brand-tint); border: 1px dashed var(--line); color: var(--brand-deep);
}

/* what the entry form works out while you type */
.calc-row { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: .4rem; }
.calc-row div { display: flex; flex-direction: column; }
.calc-row em { font-style: normal; font-size: 11.5px; text-transform: uppercase;
               letter-spacing: .5px; color: var(--muted); font-weight: 600; }
.calc-row strong { font-size: 20px; color: var(--brand-dark); }

/* The line verdict keeps its clinical colours: this one is read for the
   decision it states, not for where it sits on the page. */
.line-note { margin: .8rem 0 0; padding: .6rem .8rem; border-radius: 10px;
             font-size: 14px; font-weight: 600; border: 1px solid transparent; }
.line-note.central    { background: var(--ham-bg); color: #b91c1c; border-color: #fecaca; }
.line-note.peripheral { background: var(--ok-bg); color: var(--ok); border-color: #bbf7d0; }
.line-note.unknown    { background: #f4f8fc; color: var(--muted); border-color: var(--line); }

/* ── patients ─────────────────────────────────────────────────────────── */
/* A card per patient rather than a row: what is being read is the list of
   medications under the name, and a list does not belong in a table cell. */

.patient-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(20rem,100%),1fr)); }
.patient-card { display: block; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--shadow); color: inherit; text-decoration: none;
    border-top: 3px solid var(--brand); transition: transform .12s ease, box-shadow .12s ease; }
.patient-card:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(13,75,145,.16); color: inherit; }
.patient-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.patient-card-head strong { font-size: 16px; color: var(--brand-deep); }
.patient-card-head .mono { color: var(--muted); }

.med-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.med-chip { display: inline-flex; align-items: baseline; gap: 5px; padding: 3px 10px; border-radius: 999px;
    font-size: 12.5px; font-weight: 600; background: var(--brand-tint); border: 1px solid var(--line);
    color: var(--brand-deep); }
/* A medication with a bag still in the pharmacy is the one worth seeing first. */
.med-chip.open { background: var(--brand-soft); border-color: var(--brand); }
.med-chip em { font-style: normal; font-weight: 500; color: var(--muted); }

/* ── tiles ────────────────────────────────────────────────────────────── */

.stat-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(13rem,100%),1fr)); margin-bottom: 20px; }
.stat-card { background: linear-gradient(160deg, #1d74d1 0, var(--brand-dark) 100%);
    color: #fff; border-radius: var(--radius); padding: 18px 20px; box-shadow: 0 10px 24px rgba(13,75,145,.22); }
.stat-card .stat-num { font-size: 30px; font-weight: 800; line-height: 1; letter-spacing: -.02em; color: #fff; }
.stat-card .stat-label { font-size: 13px; margin-top: 6px; opacity: .92; color: #fff; }
.stat-card .stat-sub { font-size: 11.5px; margin-top: 4px; opacity: .8; color: #fff; }
.stat-card.ok { background: linear-gradient(160deg, #2f9bd8 0, #146a9e 100%); }
.stat-card.warn { background: linear-gradient(160deg, #f59e0b 0, var(--haz) 100%); box-shadow: 0 10px 24px rgba(234,88,12,.20); }
.stat-card.restricted { background: linear-gradient(160deg, #fde047 0, var(--res-yellow) 100%); }
.stat-card.restricted .stat-num,
.stat-card.restricted .stat-label,
.stat-card.restricted .stat-sub { color: var(--res-ink); }
.stat-card.danger { background: linear-gradient(160deg, #ef4444 0, var(--ham) 100%); box-shadow: 0 10px 24px rgba(220,38,38,.20); }

/* ── tables ───────────────────────────────────────────────────────────── */

.table-scroll { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; background: var(--surface);
    border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
    box-shadow: var(--shadow); font-size: 13.5px; }
.data-table th { background: var(--brand-deep); color: #fff; text-align: left; padding: 10px 12px;
    font-size: 11px; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.data-table td { padding: 10px 12px; border-top: 1px solid var(--line-soft); vertical-align: top; }
.data-table tbody tr:nth-child(even) { background: #fbfdff; }
.data-table tbody tr:hover { background: var(--brand-tint); }
.data-table .num { text-align: right; }
.data-table tfoot th { background: var(--brand-soft); color: var(--brand-dark);
    text-transform: none; font-size: 13px; letter-spacing: 0; }

/* ── badges ───────────────────────────────────────────────────────────── */

.badge { display: inline-block; padding: 3px 10px; border-radius: 999px;
    font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.badge-ok { background: var(--ok-bg); color: var(--ok); border: 1px solid #bbf7d0; }
.badge-warn { background: var(--haz-bg); color: var(--haz); border: 1px solid #fed7aa; }
.badge-restricted { background: var(--res-bg); color: var(--res); border: 1px solid #fef08a; }
.badge-danger { background: var(--ham-bg); color: var(--ham); border: 1px solid #fecaca; }
.badge-info { background: var(--brand-soft); color: var(--brand-dark); border: 1px solid #c7ddf7; }
.badge-unknown { background: #eef3f8; color: var(--muted); border: 1px solid var(--line); }
/* A plain list value — a route, say. Deliberately colourless: colour on a
   badge in this system means "this changes how the drug is handled". */
.badge-plain { background: #eef3f8; color: var(--ink); border: 1px solid var(--line); }

/* how long is left on a preparation */
.bud-ok   { color: var(--ok); font-weight: 600; }
.bud-soon { color: #b45309; font-weight: 700; }
.bud-gone { color: #b91c1c; font-weight: 700; }

/* ── a record, read back ──────────────────────────────────────────────── */

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .7rem 1.4rem; }
.fact { display: flex; flex-direction: column; }
.fact em { font-style: normal; font-size: 11.5px; text-transform: uppercase;
           letter-spacing: .5px; color: var(--muted); font-weight: 600; }

/* The chain of custody: who did what, and when. Drawn as a line with a mark
   at each step, because that is what it is. */
.history { margin: .4rem 0 0; padding-inline-start: 1.2rem; list-style: none; border-inline-start: 2px solid var(--brand-soft); }
.history li { position: relative; margin-bottom: .6rem; }
.history li::before {
  content: ""; position: absolute; inset-inline-start: calc(-1.2rem - 7.5px); top: .5em;
  width: 9px; height: 9px; border-radius: 50%; background: var(--brand); border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--brand-soft);
}

.flash { padding: 12px 16px; border-radius: 12px; margin-bottom: 16px; font-size: 14px; font-weight: 500; }
.flash.success { background: var(--ok-bg); color: var(--ok); border: 1px solid #bbf7d0; }
.flash.error { background: var(--ham-bg); color: var(--ham); border: 1px solid #fecaca; }

/* ── charts ───────────────────────────────────────────────────────────── */

.chart { display: block; margin-top: .6rem; max-width: 100%; }
.bar { height: 12px; border-radius: 999px; background: linear-gradient(90deg, #4a9ae8, var(--brand)); min-width: 3px; }
.two-up { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 0 1rem; }

/* ── login ────────────────────────────────────────────────────────────── */

.login-wrap { max-width: 26rem; margin: 8vh auto; text-align: center; padding: 0 16px; position: relative; z-index: 1; }
.login-wrap .logo { height: 62px; margin-bottom: 14px; }
.login-wrap h1 { font-size: 24px; margin-bottom: 4px; color: var(--brand-deep); }
.login-wrap .card { text-align: left; }

/* ── footer ───────────────────────────────────────────────────────────── */

.site-footer { text-align: center; padding: 26px 16px 40px; color: var(--muted); font-size: 13px; position: relative; z-index: 1; }
.site-footer p { margin: 2px 0; }

/* ── print ────────────────────────────────────────────────────────────── */

@media print {
  .site-header, .site-footer, .head-actions, .btn, .no-print { display: none !important; }
  body { background: #fff !important; }
  body::before { display: none !important; }
  .wrap { max-width: 100%; padding: 0; }
  .card { box-shadow: none; border: 1px solid #c8d6e4; break-inside: avoid; }
  .card::before { display: none; }
  .data-table th { background: #e5eaf0 !important; color: #000 !important;
      -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .data-table tbody tr { break-inside: avoid; }
}

/* ── the two kinds of feeding, told apart by colour ────────────────────
 *
 * TPN and IV nutrition therapy sit next to the ordinary preparations wherever
 * this system lists work, and at a glance they should not be mistaken for them
 * or for each other. A grey panel for TPN and a pink one for nutrition, chosen
 * because they are the two furthest from the blue everything else is set in —
 * so the eye lands on the right list before it has read a word of it.
 *
 * Both are tints rather than slabs. A panel dark enough to need its own text
 * colour takes over the page it is on, and every badge, button and figure
 * inside it then has to be re-coloured to survive — which is a lot of work to
 * do to a page in order to say one thing about it. A tint says the same thing
 * and leaves everything on top of it alone.
 *
 * Colour is never the only thing carrying it: every one of these panels also
 * has its heading in words, in both languages, because a colour is not a label
 * and somebody reading this page may not see the difference between them. */
:root {
  --tpn-bg: #e6eaef;
  --tpn-bg-soft: #ffffff;
  --tpn-line: #bfc8d4;
  --tpn-ink: #263040;
  --tpn-muted: #5a6473;
  --tpn-accent: #6b7686;

  --nut-bg: #fdf0f5;
  --nut-bg-soft: #fbe4ee;
  --nut-line: #f2c2d7;
  --nut-ink: #6d1338;
  --nut-muted: #965470;
  --nut-accent: #d1487f;
}

/* ── TPN: grey ─────────────────────────────────────────────────────── */
.card.kind-tpn { background: var(--tpn-bg); border-color: var(--tpn-line); }
.card.kind-tpn::before { background: linear-gradient(90deg, var(--tpn-accent), #98a2b0 60%, rgba(152,162,176,0)); }
.card.kind-tpn > h3 { color: var(--tpn-ink); }
.card.kind-tpn .muted, .card.kind-tpn .muted.small { color: var(--tpn-muted); }
.card.kind-tpn .patient-card {
  background: var(--tpn-bg-soft); border-color: var(--tpn-line);
  border-top-color: var(--tpn-accent);
}
.card.kind-tpn .patient-card:hover { box-shadow: 0 12px 26px rgba(38,48,64,.2); }
.card.kind-tpn .patient-card-head strong { color: var(--tpn-ink); }
.card.kind-tpn .med-chip {
  background: #eef1f5; border-color: var(--tpn-line); color: var(--tpn-ink);
}
.card.kind-tpn .med-chip.open { background: #dde3ec; border-color: var(--tpn-accent); }
.card.kind-tpn .med-chip em { color: var(--tpn-muted); }
.card.kind-tpn .badge-info {
  background: #dde3ec; border-color: var(--tpn-line); color: var(--tpn-ink);
}
.card.kind-tpn .fact em { color: var(--tpn-muted); }
.card.kind-tpn .data-table td { background: var(--tpn-bg-soft); border-color: var(--tpn-line); }
/* A form on a tinted panel keeps white boxes: the tint is the panel's, and a
   box somebody types into should look like a box somebody types into. */
.card.kind-tpn .grid-form input,
.card.kind-tpn .grid-form select,
.card.kind-tpn .grid-form textarea { background: #fff; border-color: var(--tpn-line); }
.card.kind-tpn .grid-form label { color: var(--tpn-ink); }
.card.kind-tpn .hint { color: var(--tpn-muted); }

/* ── IV nutrition therapy: pink ────────────────────────────────────── */
.card.kind-nutrition { background: var(--nut-bg); border-color: var(--nut-line); }
.card.kind-nutrition::before { background: linear-gradient(90deg, var(--nut-accent), #e888b0 60%, rgba(232,136,176,0)); }
.card.kind-nutrition > h3 { color: var(--nut-ink); }
.card.kind-nutrition .muted, .card.kind-nutrition .muted.small { color: var(--nut-muted); }
.card.kind-nutrition .patient-card {
  background: #fff; border-color: var(--nut-line); border-top-color: var(--nut-accent);
}
.card.kind-nutrition .patient-card:hover { box-shadow: 0 12px 26px rgba(157,26,86,.18); }
.card.kind-nutrition .patient-card-head strong { color: var(--nut-ink); }
.card.kind-nutrition .med-chip {
  background: var(--nut-bg-soft); border-color: var(--nut-line); color: var(--nut-ink);
}
.card.kind-nutrition .med-chip.open { background: #f7cddf; border-color: var(--nut-accent); }
.card.kind-nutrition .med-chip em { color: var(--nut-muted); }
.card.kind-nutrition .badge-info {
  background: var(--nut-bg-soft); border-color: var(--nut-line); color: var(--nut-ink);
}
.card.kind-nutrition .fact em { color: var(--nut-muted); }
.card.kind-nutrition .data-table td { background: #fff; border-color: var(--nut-line); }
.card.kind-nutrition .grid-form input,
.card.kind-nutrition .grid-form select,
.card.kind-nutrition .grid-form textarea { background: #fff; border-color: var(--nut-line); }
.card.kind-nutrition .grid-form label { color: var(--nut-ink); }
.card.kind-nutrition .hint { color: var(--nut-muted); }

/* The same two colours identify the rows of the log and of the dashboard's
   breakdown, so a supervisor reading a table and a pharmacist reading the
   patients page are looking at the same two kinds of work in the same two
   colours. Being tints, the badges and buttons inside them need nothing. */
.data-table tr.row-tpn > td { background: var(--tpn-bg); border-color: var(--tpn-line); }
.data-table tr.row-nutrition > td { background: var(--nut-bg-soft); border-color: var(--nut-line); }

/* The kind, said in words next to a record's reference, in the kind's colour. */
.badge.badge-kind.kind-tpn {
  background: #dde3ec; border-color: var(--tpn-line); color: var(--tpn-ink);
}
.badge.badge-kind.kind-nutrition {
  background: var(--nut-bg-soft); border-color: var(--nut-line); color: var(--nut-ink);
}

/* The log's pager. The log grows for as long as the room runs, so it is drawn
   a page at a time; these are how you move between them. */
.pager { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: 1rem; }
.pager a { display: inline-block; padding: .35rem .7rem; border-radius: 999px;
  font-size: .82rem; font-weight: 600; text-decoration: none;
  color: var(--brand-dark); background: var(--surface); border: 1px solid var(--line); }
.pager a:hover { background: var(--brand-tint); }
.pager a.on { background: var(--brand); border-color: var(--brand); color: #fff; }