/* ══════════════════════════════════════════════════════════════════════
   Pharmacy Staff Credentials — the record room, on screen.

   Black and graphite, and it is not decoration. This system is read for one
   reason: to find what has run out. On a pale page every card competes for
   the eye with every other; on a dark one, only the coloured things carry —
   and the only coloured things here are an expiry counting down, an alert
   that somebody is not covered, and the button that fixes it.

   So: the page is near-black, the cards are graphite, the type is light, and
   red, amber and green are left as the only saturated colour on screen. They
   mean exactly what they mean in the pharmacy's other systems — expired,
   close, current — because a pharmacist reads all of them in one shift.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  /* the room */
  --bg: #0b0b0d;
  --bg-deep: #131417;
  --surface: #1b1d21;
  --surface-raised: #22242a;
  --ink: #edeff2;
  --muted: #99a0a9;
  --line: #2e3238;
  --line-soft: #24272c;

  /* the chrome — graphite, so nothing that is furniture wears a warning colour */
  --brand: #7b848f;
  --brand-dark: #b9c1ca;
  --brand-deep: #eceff3;
  --brand-soft: #2a2e35;
  --brand-tint: #202329;

  /* what has to be acted on — the same meanings as the pharmacy's other systems,
     lifted for a dark page so they still carry at a glance */
  --ham: #f87171;
  --ham-bg: #2b1618;
  --haz: #fbbf24;
  --haz-bg: #2a2013;
  --res: #fcd34d;
  --res-yellow: #eab308;
  --res-bg: #262012;
  --res-ink: #f5e6c8;
  --ok: #4ade80;
  --ok-bg: #13251b;

  /* So the browser's own furniture — date pickers, dropdown lists, scrollbars —
     is drawn dark too, instead of a white panel opening out of a black page. */
  color-scheme: dark;

  --shadow: 0 1px 3px rgba(0,0,0,.6), 0 1px 2px rgba(0,0,0,.4);
  --shadow-lg: 0 20px 50px rgba(0,0,0,.65);
  --radius: 16px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }

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,.06), rgba(255,255,255,0) 60%),
    repeating-linear-gradient(0deg,  rgba(255,255,255,.022) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.022) 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) invert(1);
  opacity: .05;
  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, #000000 0%, #16181c 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,.22) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,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: #d3d8de; 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,.12); 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, #8b939d, #565d66 60%, rgba(86,93,102,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: #52282a; background: #241417; }
.alert-card::before { background: linear-gradient(90deg, var(--ham), #b91c1c 60%, rgba(185,28,28,0)); }
.alert-card > h3 { color: #fca5a5; }
.error-card > h3 { color: #fca5a5; }
.error-card { border-color: #52282a; 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, #4a5058, #2c3037); border-color: #5c646e; color: #fff;
    box-shadow: 0 6px 16px rgba(13,75,145,.28); }
.btn-primary:hover { background: linear-gradient(180deg, #5b626b, #3a3f47); border-color: #7b848f; color: #fff; }
.btn-light:hover { background: var(--brand-soft); }
.btn-danger { color: var(--ham); border-color: #5b2c2f; 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: #14161a; 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: #fca5a5; border-color: #5b2c2f; }
.line-note.peripheral { background: var(--ok-bg); color: var(--ok); border-color: #1f4d33; }
.line-note.unknown    { background: #1e2126; 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, #33383f 0, #1d2025 100%);
    color: #fff; border: 1px solid #3a3f47; border-radius: var(--radius); padding: 18px 20px;
    box-shadow: 0 10px 24px rgba(0,0,0,.45); }
.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, #16a34a 0, #14532d 100%); border-color: #1f6b3c; }
.stat-card.warn { background: linear-gradient(160deg, #d97706 0, #7c3d06 100%); border-color: #8a4d0b; box-shadow: 0 10px 24px rgba(0,0,0,.45); }
.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, #dc2626 0, #7f1d1d 100%); border-color: #8f2626; box-shadow: 0 10px 24px rgba(0,0,0,.45); }

/* ── 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: #101216; color: #e7eaee; 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: #1f2126; }
.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 #1f4d33; }
.badge-warn { background: var(--haz-bg); color: var(--haz); border: 1px solid #5c451a; }
.badge-restricted { background: var(--res-bg); color: var(--res); border: 1px solid #5c4d1a; }
.badge-danger { background: var(--ham-bg); color: var(--ham); border: 1px solid #5b2c2f; }
.badge-info { background: var(--brand-soft); color: var(--brand-dark); border: 1px solid #3a3f47; }
.badge-unknown { background: #23262b; 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: #23262b; 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: #fbbf24; font-weight: 700; }
.bud-gone { color: #f87171; 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 #1b1d21;
  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; }
}

/* ── who the department is made of ────────────────────────────────────── */
/* Three short counts side by side rather than three charts: the question is
   how many of each, and a number answers it faster than a bar. */

.tally-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(15rem,100%),1fr)); }
.tally-grid h4 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.tally-row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0;
             border-bottom: 1px dashed var(--line); font-size: 13.5px; }
.tally-row:last-child { border-bottom: 0; }
.tally-row strong { color: var(--brand-dark); }

/* The renewal list is printed and taken to a meeting, so it drops the chrome. */
@media print {
  .site-header, .site-footer, .head-actions, .no-print, .filters { display: none !important; }
  .card { break-inside: avoid; box-shadow: none; border: 1px solid #bbb; }
  body { background: #fff; }
}