/* FMCK Live Hospital Dashboard - styles. Dark, high-contrast theme designed for a 1920x1080 wall screen. */

:root {
  --bg: #08121a;
  --panel: #0f1d28;
  --panel-2: #14283a;
  --border: #25414f;
  --text: #f1f6fa;
  --muted: #a8bccb;
  --accent: #35d0c0;
  --occ: #4fb3ff;           /* occupancy bar: deliberately not green, amber or red */
  --green: #1fb865;
  --amber: #f5a524;
  --red: #ef4444;
  --focus: #ffd24a;
  --header-bg: #0b1b27;
  --input-bg: #0a1822;
  --input-border: #3a5a6c;
  --btn-text: #04211d;
  --btn2-border: #4a6a7c;
  --bar-track: #1b3344;
  --bar-border: #38566a;
  --due-bg: #26394a;
  --due-text: #d6e4ee;
  --ticker-bg: #0b2b3b;
  --err-bg: #3a1417; --err-border: #b4343c; --err-text: #ffd6d9;
  --ok-bg: #0f3320; --ok-border: #1f9d55; --ok-text: #cdf5dc;
  --info-bg: #10304a; --info-border: #2f7db8; --info-text: #d3ecff;
  --b-green: #0f3320; --b-amber: #3d2b08; --b-red: #3a1417;
  --radius: 14px;
  --font: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { font-size: 16px; }
body {
  margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); line-height: 1.45;
  min-height: 100vh; display: flex; flex-direction: column;
}
a { color: var(--accent); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

/* ---------- Light theme (chosen with the button in the header) ---------- */
:root[data-theme="light"] {
  --bg: #eef3f7; --panel: #ffffff; --panel-2: #e6eef4; --border: #c3d1dc; --text: #13212b; --muted: #4b6070;
  --accent: #0a7468; --occ: #1d74c9; --focus: #a85d00;
  --header-bg: #ffffff; --input-bg: #ffffff; --input-border: #8da3b3; --btn-text: #ffffff; --btn2-border: #8da3b3;
  --bar-track: #d5e2ec; --bar-border: #a9bccb; --due-bg: #e1eaf1; --due-text: #25394a; --ticker-bg: #dff0f2;
  --err-bg: #fde8ea; --err-border: #d1727a; --err-text: #6d1019;
  --ok-bg: #e3f6ea; --ok-border: #3ea468; --ok-text: #0d4a26;
  --info-bg: #e1effb; --info-border: #5a9bd0; --info-text: #123c61;
  --b-green: #dff5e8; --b-amber: #fdf0d6; --b-red: #fde8ea;
}
:root[data-theme="light"] .userbox strong, :root[data-theme="light"] .brand-l1 { color: var(--text); }
:root[data-theme="light"] .brand-l2 { color: var(--accent); }
.theme-btn { border: 1px solid var(--border); background: transparent; color: var(--text); border-radius: 9px; padding: .35rem .65rem; font-size: .85rem; cursor: pointer; font-family: inherit; white-space: nowrap; }
.theme-btn:hover { background: var(--panel-2); }

/* ---------- Header and footer ---------- */
.site-header {
  display: flex; align-items: center; gap: 1rem; padding: .6rem 1.25rem; background: var(--header-bg); border-bottom: 2px solid var(--border);
  flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: .9rem; text-decoration: none; color: inherit; min-width: 0; }
.brand img { height: 64px; width: auto; flex: none; }
.brand-text { display: flex; flex-direction: column; min-width: 0; }
.brand-l1 { font-size: clamp(1.1rem, 1.9vw, 1.9rem); font-weight: 800; letter-spacing: .04em; line-height: 1.1; }
.brand-l2 { font-size: clamp(.95rem, 1.5vw, 1.35rem); font-weight: 600; color: var(--accent); line-height: 1.2; }
.header-right { margin-left: auto; display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; justify-content: flex-end; }
body.board .site-header { flex-wrap: nowrap; }
@media (max-width: 1100px) { body.board .site-header { flex-wrap: wrap; } }
@media (min-width: 641px) { .brand-text { white-space: nowrap; } }
@media (min-width: 1101px) and (max-width: 2100px) { body.board .userbox { display: none; } }
.clock { text-align: right; font-variant-numeric: tabular-nums; }
.clock-time { font-size: clamp(1.4rem, 2vw, 2.1rem); font-weight: 800; line-height: 1; }
.clock-date { font-size: .9rem; color: var(--muted); }
.refresh-note { font-size: .8rem; color: var(--muted); }
.nav { display: flex; gap: .35rem; flex-wrap: wrap; }
.nav a, .nav button {
  color: var(--text); text-decoration: none; padding: .4rem .65rem; border-radius: 9px; border: 1px solid transparent; font-size: .9rem;
  background: transparent; cursor: pointer; font-family: inherit;
}
.nav a:hover, .nav button:hover { background: var(--panel-2); }
.nav a[aria-current="page"] { background: var(--panel-2); border-color: var(--border); font-weight: 700; }
.userbox { font-size: .85rem; color: var(--muted); text-align: right; }
.userbox strong { color: var(--text); display: block; }

.site-footer { padding: .6rem 1.25rem; text-align: center; color: var(--muted); font-size: .85rem; border-top: 1px solid var(--border); margin-top: auto; }

/* ---------- Layout, cards, forms ---------- */
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 1.25rem; }
.container.narrow { max-width: 520px; }
.container.wide { max-width: 1500px; }
.card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; margin-bottom: 1.25rem; }
h1.page-title { font-size: 1.6rem; margin: 0 0 1rem; }
h2 { font-size: 1.25rem; margin: 0 0 .8rem; }
h3 { font-size: 1.05rem; margin: 0 0 .5rem; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }

label { display: block; font-weight: 600; margin-bottom: .3rem; }
.field { margin-bottom: 1rem; }
.field .hint { font-weight: 400; color: var(--muted); font-size: .85rem; margin-top: .25rem; }
input[type=text], input[type=password], input[type=tel], input[type=number], input[type=date], input[type=month], input[type=week],
input[type=search], select, textarea {
  width: 100%; padding: .7rem .8rem; background: var(--input-bg); color: var(--text); border: 1px solid var(--input-border); border-radius: 10px; font: inherit;
}
textarea { min-height: 84px; resize: vertical; }
input:disabled, select:disabled { opacity: .6; }
.check { display: flex; align-items: center; gap: .6rem; font-weight: 500; }
.check input { width: 1.25rem; height: 1.25rem; accent-color: var(--accent); }
.row { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .7rem 1.2rem; border-radius: 10px; border: 1px solid var(--accent);
  background: var(--accent); color: var(--btn-text); font: inherit; font-weight: 700; cursor: pointer; text-decoration: none;
}
.btn:hover { filter: brightness(1.08); }
.btn.secondary { background: transparent; color: var(--text); border-color: var(--btn2-border); }
.btn.danger { background: var(--red); border-color: var(--red); color: #fff; }
.btn.small { padding: .35rem .7rem; font-size: .85rem; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-row { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1rem; }

.alert { padding: .8rem 1rem; border-radius: 10px; margin-bottom: 1rem; border: 1px solid; }
.alert.error { background: var(--err-bg); border-color: var(--err-border); color: var(--err-text); }
.alert.ok { background: var(--ok-bg); border-color: var(--ok-border); color: var(--ok-text); }
.alert.info { background: var(--info-bg); border-color: var(--info-border); color: var(--info-text); }

table.data { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.data th, table.data td { padding: .5rem .6rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
table.data th { color: var(--muted); font-weight: 600; white-space: nowrap; }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table-wrap { overflow-x: auto; }
.badge { display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 700; background: var(--panel-2); border: 1px solid var(--border); }
.badge.green { background: var(--b-green); border-color: var(--green); }
.badge.amber { background: var(--b-amber); border-color: var(--amber); }
.badge.red { background: var(--b-red); border-color: var(--red); }

.tabs { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1rem; }
.tabs button { padding: .55rem 1rem; border-radius: 10px; border: 1px solid var(--border); background: var(--panel); color: var(--text); cursor: pointer; font: inherit; }
.tabs button[aria-selected="true"] { background: var(--accent); color: var(--btn-text); font-weight: 700; border-color: var(--accent); }

/* ---------- Login / sign-up ---------- */
.auth-wrap { display: grid; place-items: center; flex: 1; padding: 1.25rem; }
.auth-card { width: 100%; max-width: 480px; }

/* ---------- Data entry ---------- */
.reminder-card { border-color: #b00020; }
.reminder-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding: .6rem 0; border-top: 1px solid var(--border); }
.stepper { display: grid; grid-template-columns: 3.2rem 1fr 3.2rem; gap: .4rem; align-items: stretch; }
.stepper button { font-size: 1.6rem; font-weight: 700; border-radius: 10px; border: 1px solid var(--btn2-border); background: var(--panel-2); color: var(--text); cursor: pointer; min-height: 3.2rem; }
.stepper input { text-align: center; font-size: 1.6rem; font-weight: 700; padding: .5rem; }
.entry-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.info-strip { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; padding: .8rem 1rem; background: var(--panel-2); border-radius: 10px; margin-bottom: 1rem; }
.info-strip b { color: var(--accent); }
.avail { font-size: 1.4rem; font-weight: 800; color: var(--occ); }
dialog { background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); max-width: 560px; width: calc(100% - 2rem); padding: 1.25rem; }
dialog::backdrop { background: rgba(0, 0, 0, .7); }

/* ---------- Dashboard (wall screen) ---------- */
body.board { min-height: 100vh; }
.board-main { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: .7rem; padding: .7rem 1rem; }
.summary { display: grid; grid-template-columns: repeat(6, 1fr); gap: .7rem; }
.sum { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: .3rem .8rem; }
.sum .k { color: var(--muted); font-size: clamp(.8rem, 1vw, 1rem); text-transform: uppercase; letter-spacing: .06em; }
.sum .v { font-size: clamp(1.6rem, 2.6vw, 2.8rem); font-weight: 800; line-height: 1.05; font-variant-numeric: tabular-nums; }
.sum .v small { font-size: .45em; color: var(--muted); font-weight: 600; }

.tiles { flex: 1; display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); grid-auto-rows: minmax(170px, 1fr); }
.tile {
  --st: var(--green); background: var(--panel); border: 2px solid var(--st); border-radius: var(--radius); display: flex; flex-direction: column; overflow: hidden; min-height: 170px;
}
.tile.st-amber { --st: var(--amber); }
.tile.st-red { --st: var(--red); }
.tile-head { background: var(--st); color: #05141b; padding: .3rem .8rem; display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; }
.tile.st-amber .tile-head { color: #2a1900; }
.tile.st-red .tile-head { color: #fff; }
.tile-head h3 { margin: 0; font-size: clamp(.9rem, .92vw, 1.1rem); font-weight: 800; line-height: 1.15; }
.tile-head .age { font-size: clamp(.75rem, .9vw, .95rem); font-weight: 700; white-space: nowrap; }
.tile-body { padding: .4rem .7rem .2rem; flex: 1; display: flex; flex-direction: column; justify-content: space-around; gap: .25rem; min-height: 0; }
.occ-row { display: flex; align-items: center; gap: .7rem; }
.occ-num { font-size: clamp(1.6rem, 2.3vw, 2.6rem); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.occ-num small { font-size: .5em; color: var(--muted); font-weight: 600; }
.bar { flex: 1; height: clamp(12px, 1.3vw, 20px); background: var(--bar-track); border-radius: 999px; overflow: hidden; border: 1px solid var(--bar-border); }
.bar > i { display: block; height: 100%; background: var(--occ); border-radius: 999px; transition: width .6s ease; }
.bar.over > i { background: repeating-linear-gradient(45deg, var(--occ), var(--occ) 8px, #9fd6ff 8px, #9fd6ff 16px); }
.flag { font-weight: 800; font-size: clamp(.75rem, .95vw, 1rem); letter-spacing: .06em; padding: .1rem .5rem; border-radius: 6px; border: 2px solid var(--occ); color: var(--occ); white-space: nowrap; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .3rem .6rem; }
.stat .k { color: var(--muted); font-size: clamp(.62rem, .7vw, .78rem); text-transform: uppercase; letter-spacing: .04em; line-height: 1.15; }
.stat .v { font-size: clamp(1.05rem, 1.4vw, 1.6rem); font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat .v small { font-size: .55em; color: var(--muted); font-weight: 600; }
.tile-foot { padding: .2rem .8rem .4rem; color: var(--muted); font-size: clamp(.7rem, .8vw, .85rem); line-height: 1.3; }
.tile-foot .f1 { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.tile-foot .f1 b { color: var(--text); font-size: 1.1em; }
.due { color: var(--due-text); background: var(--due-bg); border-radius: 6px; padding: 0 .4rem; font-weight: 600; }
.tile.changed { animation: flash 3.5s ease-out; }
@keyframes flash { 0% { box-shadow: 0 0 0 6px rgba(255, 255, 255, .85); } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } }

.late-banner { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: #b00020; color: #fff; border-radius: var(--radius); padding: .3rem .9rem; font-size: clamp(.9rem, 1.15vw, 1.3rem); animation: bannerBlink 1.2s ease-in-out infinite; }
.late-banner b { letter-spacing: .06em; margin-right: .4rem; }
@keyframes bannerBlink { 50% { background: #5a0010; } }
.tile.late { animation: lateBlink 1.2s ease-in-out infinite; }
@keyframes lateBlink { 50% { box-shadow: 0 0 0 5px #fff, 0 0 22px 6px var(--st); } }
.late-badge { background: #fff; color: #b00020; font-weight: 800; font-size: .72rem; letter-spacing: .04em; padding: 0 .45rem; white-space: nowrap; flex: none; border-radius: 6px; animation: badgeBlink 1.2s steps(2, start) infinite; }
@keyframes badgeBlink { 50% { opacity: .2; } }
.btn.no-report { padding: 0 .55rem; font-size: .75rem; line-height: 1.5; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { .late-banner, .tile.late, .late-badge { animation: none; } .tile.late { outline: 4px solid #fff; } }
.lower { display: grid; grid-template-columns: 1fr; gap: .7rem; }
.chart-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: .4rem .8rem; height: clamp(70px, 8vh, 100px); position: relative; }
.chart-card canvas { width: 100% !important; height: 100% !important; }
.ticker { background: var(--ticker-bg); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; white-space: nowrap; height: clamp(2.2rem, 4vh, 3rem); display: flex; align-items: center; }
.ticker-label { background: var(--accent); color: var(--btn-text); font-weight: 800; padding: 0 .9rem; height: 100%; display: flex; align-items: center; flex: none; }
.ticker-track { overflow: hidden; flex: 1; }
.ticker-inner { display: inline-block; padding-left: 100%; animation: scroll var(--dur, 60s) linear infinite; font-size: clamp(1rem, 1.35vw, 1.5rem); }
.ticker-inner span.item { margin-right: 3rem; }
.ticker-inner b { color: var(--accent); }
@keyframes scroll { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .ticker-inner { animation-duration: 240s; } .tile.changed { animation: none; outline: 3px solid #fff; } }

.conn { position: fixed; bottom: .8rem; right: .8rem; background: #5a3a05; border: 1px solid var(--amber); color: #fff; padding: .45rem .9rem; border-radius: 10px; font-size: .9rem; z-index: 50; }
body.kiosk .site-header .nav, body.kiosk .site-header .userbox { display: none; }
body.kiosk { cursor: none; }

/* ---------- Guide and quick actions ---------- */
.guide-sec h2 { font-size: 1.2rem; margin: 1.4rem 0 .5rem; color: var(--accent); }
.guide-sec p, .guide-sec li { max-width: 70ch; }
.guide-sec ul, .guide-sec ol { padding-left: 1.4rem; }
.guide-sec li { margin-bottom: .35rem; }
.guide-sec code { background: var(--panel-2); border-radius: 4px; padding: 0 .3rem; }
.guide-admin-title { margin-top: 2rem; padding-top: 1rem; border-top: 2px solid var(--border); }
.tile.clickable { cursor: pointer; }
.tile.clickable:hover { filter: brightness(1.1); }
.guide-preview { background: var(--panel-2); margin-top: 1rem; }
.guide-full { margin: 1rem 0; border: 1px solid var(--border); border-radius: 10px; padding: .6rem 1rem; }
.guide-full summary { cursor: pointer; font-weight: 700; }
.guide-ack { position: sticky; bottom: 0; background: var(--panel); padding: 1rem 0 .2rem; margin-top: 1rem; border-top: 1px solid var(--border); }
.guide-ack .btn { width: 100%; font-size: 1.1rem; padding: .9rem; }
.quick-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: 1rem; }

/* ---------- Reports page ---------- */
.checklist { max-height: 260px; overflow: auto; border: 1px solid var(--border); border-radius: 10px; padding: .6rem; background: var(--input-bg); }
.checklist .dept { margin-bottom: .5rem; }
.checklist .units { margin-left: 1.6rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .15rem .8rem; }
.progress { display: flex; align-items: center; gap: .7rem; }
.spinner { width: 1.2rem; height: 1.2rem; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .summary { grid-template-columns: repeat(3, 1fr); }
  .tiles { grid-auto-rows: auto; }
}
@media (max-width: 640px) {
  .site-header { padding: .5rem .8rem; }
  .brand img { height: 48px; }
  .header-right { width: 100%; justify-content: space-between; }
  .summary { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .container { padding: .8rem; }
}

/* ---------- Print view ---------- */
.print-doc { background: #fff; color: #111; padding: 1rem; border-radius: 8px; }
.print-doc table { width: 100%; border-collapse: collapse; font-size: .8rem; margin-bottom: 1rem; }
.print-doc th, .print-doc td { border: 1px solid #999; padding: .25rem .4rem; text-align: left; }
.print-doc th { background: #e6eef2; }
.print-doc td.num, .print-doc th.num { text-align: right; }
.print-doc .rp-head { display: flex; align-items: center; gap: .8rem; border-bottom: 2px solid #0b3d2e; padding-bottom: .5rem; margin-bottom: .7rem; }
.print-doc .rp-head img { height: 60px; }
.print-doc .rp-l1 { font-size: 1.3rem; font-weight: 800; }
.print-doc .rp-l2 { font-size: 1rem; font-weight: 600; }
.print-doc h2, .print-doc h3 { color: #0b3d2e; }
.print-doc .dept-page { page-break-before: always; }
.print-doc .dept-page.first { page-break-before: auto; }
.print-doc .rp-foot { text-align: center; font-size: .75rem; color: #444; border-top: 1px solid #999; padding-top: .3rem; margin-top: 1rem; }

/* Printing is always black on white, whichever theme is on screen. Applies to the guide, unit records and every other page. */
@media print {
  :root, :root[data-theme] {
    --bg: #ffffff; --panel: #ffffff; --panel-2: #f0f3f6; --border: #999999; --text: #000000; --muted: #333333;
    --accent: #0a5f56; --occ: #1d74c9; --header-bg: #ffffff; --input-bg: #ffffff; --input-border: #777777; --btn-text: #ffffff;
    --btn2-border: #777777; --bar-track: #e3e8ec; --bar-border: #999999; --due-bg: #e8eef3; --due-text: #222222; --ticker-bg: #ffffff;
    --err-bg: #ffffff; --err-border: #999999; --err-text: #000000; --ok-bg: #ffffff; --ok-border: #999999; --ok-text: #000000;
    --info-bg: #ffffff; --info-border: #999999; --info-text: #000000; --b-green: #eeeeee; --b-amber: #eeeeee; --b-red: #eeeeee;
  }
  html, body { background: #ffffff !important; color: #000000 !important; }
  .site-header { background: #ffffff; border-bottom: 2px solid #000; padding: .3rem 0; }
  .site-header .nav, .site-header .userbox, .site-header .clock, .site-header #header-extra, .theme-btn, .btn-row, .no-print, .guide-ack, #print-guide, .conn,
  .site-footer .no-print { display: none !important; }
  .card { border: none; padding: 0; background: #ffffff; }
  a { color: #000000; text-decoration: none; }
  .container, .container.wide { max-width: none; padding: 0; }
  .table-wrap { overflow: visible; }
  table.data th, table.data td { border-bottom: 1px solid #999; }
}

@media print {
  body[data-page="guide"] .site-header .nav, body[data-page="guide"] #print-guide { display: none; }
  body { background: #fff; color: #000; display: block; min-height: 0; }
  body.printing > *:not(#print-root) { display: none !important; }
  #print-root { display: block !important; }
  .print-doc { padding: 0; border-radius: 0; }
  .print-doc tr { page-break-inside: avoid; }
  .print-doc .rp-foot { display: none; }
  @page {
    size: A4; margin: 14mm 12mm 18mm;
    @bottom-center { content: "Federal Medical Centre Kumo   |   Page " counter(page) " of " counter(pages); font-size: 8.5pt; color: #444; }
  }
}