/* Healthbox website: the desktop's look (teal on light grey, white cards, Bahnschrift), simple and readable on a phone too. */
:root {
  --primary: #0F766E; --primary-dark: #0B5F59; --primary-light: #E2EFF2; --primary-soft: #CFE5E3;
  --bg: #EEF3F5; --surface: #FFFFFF; --muted-surface: #F6F9FA;
  --text: #21363D; --muted: #475569; --subtle: #64748B; --border: #DAE3E7; --field: #AFC0C8;
  --danger: #B91C1C; --danger-light: #FEE2E2; --success: #067647; --success-light: #DCFCE7; --warning: #B45309;
  --radius: 12px; --font: Bahnschrift, "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--text); font-family: var(--font); font-size: 15px; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--primary); }
.hidden { display: none !important; }

/* ---------------------------------------------------------------- sign in */
.signin { min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 24px; }
.signin-box { display: flex; width: 100%; max-width: 980px; min-height: 560px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 18px; overflow: hidden; box-shadow: 0 10px 40px rgba(15, 50, 60, .08); }
.signin-left { flex: 1; background: #F1F4F6; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px; text-align: center; }
.logo-tile { width: 150px; height: 150px; background: #fff; border-radius: 24px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); margin-bottom: 22px; }
.logo-tile img { max-width: 120px; max-height: 120px; }
.signin-left h1 { font-size: 24px; margin: 0 0 6px; }
.signin-left p { margin: 0; color: var(--muted); }
.signin-right { flex: 1; padding: 48px 52px; display: flex; flex-direction: column; justify-content: center; }
.signin-right h2 { margin: 0 0 6px; font-size: 26px; }
.signin-right .lead { margin: 0 0 26px; color: var(--muted); }
@media (max-width: 760px) {
  .signin { padding: 12px; }
  .signin-box { flex-direction: column; min-height: 0; }
  .signin-left { padding: 26px; }
  .logo-tile { width: 96px; height: 96px; margin-bottom: 12px; } .logo-tile img { max-width: 76px; max-height: 76px; }
  .signin-right { padding: 26px; }
}

/* ---------------------------------------------------------------- fields and buttons */
label.field { display: block; margin-bottom: 14px; }
label.field > span { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.input, select.input, textarea.input { width: 100%; height: 42px; padding: 0 12px; border: 1.5px solid var(--field); border-radius: 9px; background: #fff; outline: none; }
textarea.input { height: auto; min-height: 110px; padding: 10px 12px; resize: vertical; line-height: 1.45; }
.input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 9px; border: 1px solid var(--border);
  background: #fff; font-weight: 600; cursor: pointer; white-space: nowrap; }
.btn:hover { background: var(--muted-surface); }
.btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn.primary:hover { background: var(--primary-dark); }
.btn.danger { color: var(--danger); border-color: #FCA5A5; }
.btn.danger:hover { background: var(--danger-light); }
.btn.small { height: 32px; padding: 0 12px; font-size: 13px; }
.btn:disabled { opacity: .55; cursor: default; }
.btn svg { width: 16px; height: 16px; fill: currentColor; }
.banner { border-radius: 9px; padding: 10px 14px; margin: 10px 0; font-size: 14px; }
.banner.error { background: var(--danger-light); color: var(--danger); border: 1px solid #FCA5A5; }
.banner.ok { background: var(--success-light); color: var(--success); border: 1px solid #86EFAC; }

/* ---------------------------------------------------------------- the shell */
.shell { display: flex; min-height: 100%; }
.side { width: 270px; flex-shrink: 0; padding: 16px; }
.side-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 14px 10px; position: sticky; top: 16px; }
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 14px; border-bottom: 1px solid var(--border); margin-bottom: 10px; }
.brand img { width: 38px; height: 38px; object-fit: contain; }
.brand b { display: block; font-size: 14.5px; line-height: 1.2; }
.brand small { color: var(--muted); }
.menu-title { font-weight: 600; padding: 6px 10px 8px; }
.nav { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin: 2px 0; border-radius: 9px; border: 1px solid transparent;
  cursor: pointer; font-weight: 500; color: #4B5563; text-decoration: none; }
.nav svg { width: 18px; height: 18px; fill: var(--primary); flex-shrink: 0; }
.nav:hover { background: #F1F6F7; border-color: var(--border); }
.nav.on { background: var(--primary-light); border-color: var(--primary-soft); color: var(--text); font-weight: 600; }
.nav-head { font-size: 11px; font-weight: 600; letter-spacing: .06em; color: var(--subtle); padding: 12px 12px 2px; }
.who { border-top: 1px solid var(--border); margin-top: 10px; padding: 12px 10px 2px; font-size: 13.5px; }
.who b { display: block; }
.who .btn { margin-top: 10px; width: 100%; }
.main { flex: 1; min-width: 0; padding: 16px 16px 40px 0; }
.page { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 22px 24px; min-height: calc(100vh - 32px); }
.page h1 { margin: 0; font-size: 22px; }
.page .sub { margin: 4px 0 18px; color: var(--muted); }
.topbar { display: none; }
@media (max-width: 900px) {
  .shell { flex-direction: column; }
  .side { width: auto; padding: 0; }
  .side-card { position: static; border-radius: 0; border-width: 0 0 1px 0; display: none; }
  .side-card.open { display: block; }
  .topbar { display: flex; align-items: center; gap: 10px; background: var(--surface); border-bottom: 1px solid var(--border); padding: 10px 12px; }
  .topbar img { width: 30px; height: 30px; object-fit: contain; }
  .topbar b { flex: 1; font-size: 15px; }
  .main { padding: 10px; }
  .page { padding: 16px; min-height: 0; border-radius: 12px; }
}

/* ---------------------------------------------------------------- cards, tiles, tables */
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.row.between { justify-content: space-between; align-items: center; }
.grow { flex: 1; min-width: 180px; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.card h3 { margin: 0 0 10px; font-size: 16px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; margin-bottom: 18px; }
.tile { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; display: flex; gap: 12px; align-items: center; }
.tile .badge { width: 38px; height: 38px; border-radius: 10px; background: var(--primary-light); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tile .badge svg { width: 20px; height: 20px; fill: var(--primary); }
.tile small { display: block; font-weight: 600; font-size: 12.5px; }
.tile b { display: block; font-size: 22px; color: var(--primary-dark); }
.tile span { font-size: 12px; color: var(--muted); }
.bars { display: flex; align-items: flex-end; gap: 4px; height: 140px; padding-top: 10px; }
.bars div { flex: 1; background: var(--primary); border-radius: 4px 4px 0 0; min-height: 2px; position: relative; }
.bars div:hover::after { content: attr(data-t); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: var(--text); color: #fff;
  font-size: 11px; padding: 3px 6px; border-radius: 5px; white-space: nowrap; margin-bottom: 4px; }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-size: 12px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; background: var(--muted-surface); color: #000;
  padding: 11px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; }
td { padding: 10px 12px; border-bottom: 1px solid #EEF2F4; vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #F7FBFB; }
td.num, th.num { text-align: right; white-space: nowrap; }
tr.total td { font-weight: 700; background: var(--muted-surface); }
.bold { font-weight: 600; }
.empty { color: var(--muted); padding: 24px; text-align: center; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px 3px 9px; border-radius: 12px; border: 1px solid #E2E8F0; background: #F1F5F9;
  color: #475569; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill.green { background: #DCFCE7; border-color: #86EFAC; color: #15803D; }
.pill.blue { background: #DBEAFE; border-color: #93C5FD; color: #1D4ED8; }
.pill.orange { background: #FFEDD5; border-color: #FDBA74; color: #C2410C; }
.pill.red { background: #FEE2E2; border-color: #FCA5A5; color: #B91C1C; }
.toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.toggle button { border: 0; background: #fff; padding: 9px 16px; font-weight: 600; cursor: pointer; }
.toggle button.on { background: var(--primary); color: #fff; }

/* ---------------------------------------------------------------- the consultation */
.patient-head { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 14px; }
.initials { width: 54px; height: 54px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 19px; font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.patient-head h2 { margin: 0; font-size: 20px; }
.patient-head p { margin: 3px 0 0; color: var(--muted); }
.patient-head .actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.tabs button { border: 1px solid var(--border); background: #fff; border-radius: 10px; padding: 9px 16px; font-weight: 600; font-size: 14px; cursor: pointer; }
.tabs button.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cols.lab { grid-template-columns: 2fr 3fr; }
@media (max-width: 1100px) { .cols, .cols.lab { grid-template-columns: 1fr; } }
.list-item { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; display: flex; gap: 10px; align-items: center; }
.list-item .grow { min-width: 0; }
.list-item small { color: var(--muted); display: block; }
.note-text { white-space: pre-wrap; font-size: 14px; }
.picker { position: relative; }
.picker-list { position: absolute; z-index: 20; left: 0; right: 0; top: 100%; margin-top: 4px; background: #fff; border: 1px solid var(--border); border-radius: 10px;
  max-height: 300px; overflow-y: auto; box-shadow: 0 10px 30px rgba(0, 0, 0, .1); }
.picker-list div { padding: 9px 12px; cursor: pointer; border-bottom: 1px solid #F1F5F9; }
.picker-list div:hover { background: var(--primary-light); }
.picker-list small { color: var(--muted); display: block; }

/* ---------------------------------------------------------------- a dialog (never the browser's own boxes) */
.modal-back { position: fixed; inset: 0; background: rgba(15, 30, 40, .45); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 100; }
.modal { background: #fff; border-radius: 16px; max-width: 520px; width: 100%; padding: 22px 24px; max-height: calc(100vh - 32px); overflow-y: auto; }
.modal.wide { max-width: 960px; }
.modal h3 { margin: 0 0 8px; font-size: 19px; }
.modal p { color: var(--muted); margin: 0 0 16px; line-height: 1.45; }
.modal .buttons { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

/* the lab's results, as a sheet */
.sheet { border: 1px solid var(--border); border-radius: 10px; padding: 18px; margin-bottom: 14px; }
.sheet h4 { text-align: center; margin: 0 0 10px; font-size: 17px; letter-spacing: .03em; }
.sheet .facts { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 13.5px; margin-bottom: 10px; }
.flag-high, .flag-low, .flag-critical, .flag-abnormal { color: var(--danger); font-weight: 700; }

/* a result printed from its dialog: only the dialog */
@media print {
  body.printing > *:not(.modal-back) { display: none !important; }
  body.printing .modal-back { position: static; background: none; padding: 0; }
  body.printing .modal { max-height: none; max-width: none; padding: 0; }
  body.printing .modal .buttons { display: none; }
}
@media print {
  .side, .topbar, .no-print, .btn, .tabs { display: none !important; }
  .main { padding: 0; } .page { border: 0; padding: 0; }
  body { background: #fff; }
}

/* ======================================================================== the desks (the desktop's sections, windows and lists) */
.muted { color: var(--muted); } .small { font-size: 12.5px; } .nowrap { white-space: nowrap; } .wrap { white-space: normal; }
.invisible { visibility: hidden !important; }
.row.gap { gap: 8px; align-items: center; flex-wrap: wrap; }
.h2 { margin: 0 0 4px; font-size: 18px; }
i { font-style: normal; color: var(--subtle); font-weight: 400; }
.btn.secondary { background: var(--primary-light); border-color: var(--primary-soft); color: var(--primary-dark); }
.btn.secondary:hover { background: var(--primary-soft); }
.btn.danger-outline { color: var(--danger); border-color: #FCA5A5; background: #fff; }
.btn.danger-outline:hover { background: var(--danger-light); }
.btn.icon { width: 34px; padding: 0; } .btn.icon.small { width: 30px; height: 30px; }
.btn.wide { width: 100%; }
.input.right { text-align: right; } .input.big { font-size: 18px; font-weight: 700; height: 46px; }
.input.small, select.input.small { height: 34px; font-size: 14px; padding: 0 8px; }
.hint { display: block; color: var(--muted); font-size: 12.5px; margin-top: 5px; }
.hint.ok { color: var(--success); } .hint.bad { color: var(--danger); }
.banner.info { background: #EFF6FF; color: #1E3A8A; border: 1px solid #BFDBFE; }
.status { color: var(--muted); font-size: 13.5px; padding: 8px 2px; }
.empty.small { padding: 10px; font-size: 13.5px; }

/* the menu: groups, desk links and the waiting numbers */
.nav-group-title { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; color: var(--subtle); padding: 14px 12px 4px; text-transform: uppercase; }
.nav .t { flex: 1; }
.nav.sub { padding: 7px 12px 7px 30px; font-size: 13.5px; }
.nav.sub svg { width: 15px; height: 15px; }
.nav-head { padding-left: 34px; }
.nav-head.flat { padding-left: 0; margin: 10px 0 8px; }
.badge-n { min-width: 22px; height: 20px; border-radius: 10px; background: #F1F5F9; border: 1px solid #E2E8F0; color: var(--muted); font-size: 11.5px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; }
.badge-n.blink { background: linear-gradient(135deg, #14B8A6, #0F766E); border-color: #0F766E; color: #fff; animation: blinkN 1.2s ease-in-out infinite; }
@keyframes blinkN { 50% { opacity: .35; } }

/* a list: the filters and buttons on one line, the table, the line under it */
.toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 10px; margin: 6px 0 12px; }
.toolbar .filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.toolbar .buttons { display: flex; flex-wrap: wrap; gap: 8px; }
label.field.f { margin: 0; } label.field.f > span { margin-bottom: 4px; font-size: 12.5px; }
.day { display: inline-flex; gap: 4px; align-items: center; } .day .input { width: 160px; }
table.grid tbody tr { cursor: default; }
table.grid tr.sel td { background: var(--primary-light); }
.list-title { margin: 4px 2px 8px; font-size: 18px; }
.tile.link, .tile.linkish { cursor: pointer; text-decoration: none; color: inherit; }
.tile.link:hover, .tile.linkish:hover { border-color: var(--primary-soft); background: #F4FAF9; }
.tile .title { font-size: 15px; color: var(--text); }

/* the website's own messages */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: #1F2937; color: #fff; padding: 11px 18px; border-radius: 10px; z-index: 300;
  font-size: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.2); transition: opacity .4s; }
.toast.gone { opacity: 0; }
.modal.xwide { max-width: 1200px; }
.modal.kind-warn h3 { color: var(--warning); }
.modal.kind-success h3 { color: var(--success); }
.modal.kind-sheets { max-width: 1000px; }
.modal-body { color: var(--muted); }
.modal .buttons { flex-wrap: wrap; align-items: center; }
.foot-left { margin-right: auto; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.win-head { display: flex; gap: 12px; align-items: flex-start; }
.win-head p { margin: 0 0 12px; }
.win-body { margin-top: 6px; }
.sheets { background: #E2E8EC; border-radius: 10px; overflow: hidden; }
.sheets .sheet-frame { display: block; width: 100%; height: 70vh; border: 0; background: #E5E7EB; }
.facts { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 14px; margin: 6px 0 12px; color: var(--text); }

/* forms */
.form-grid { display: grid; gap: 0 14px; grid-template-columns: 1fr; }
.form-grid.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .form-grid.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 720px) { .form-grid.g2, .form-grid.g3, .form-grid[style] { grid-template-columns: 1fr !important; } .form-grid [style*="span 2"] { grid-column: auto !important; } }
.form-grid > .field, .form-grid > label.field { margin-bottom: 12px; min-width: 0; }
div.field { margin-bottom: 12px; } div.field > span { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.field.end { align-self: end; padding-bottom: 8px; }
label.field.inline { display: inline-flex; align-items: center; gap: 6px; margin: 0; } label.field.inline > span { margin: 0; font-weight: 500; }
.form-head { font-weight: 700; font-size: 14.5px; margin: 14px 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--border); display: flex; gap: 10px; align-items: baseline; }
.form-note { color: var(--muted); font-size: 13.5px; margin-bottom: 10px; }
.check { display: inline-flex; gap: 8px; align-items: center; cursor: pointer; font-weight: 500; font-size: 14px; }
.check input { width: 18px; height: 18px; accent-color: var(--primary); }
.radios { display: flex; gap: 18px; height: 42px; align-items: center; } .radios label { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
.radios input { width: 18px; height: 18px; accent-color: var(--primary); }
.fileno-bar { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; }
.chip { display: inline-block; padding: 5px 12px; border-radius: 9px; background: var(--primary-light); border: 1px solid var(--primary-soft); color: var(--primary-dark); font-weight: 700; }
.money-box { display: flex; align-items: center; gap: 8px; } .money-box b { color: var(--muted); }
.option-cards { display: flex; flex-wrap: wrap; gap: 8px; }
.option-card { width: 208px; text-align: left; border: 1.5px solid var(--border); background: #fff; border-radius: 10px; padding: 8px 12px; cursor: pointer; }
.option-card b { display: block; font-size: 14px; } .option-card span { font-size: 13px; color: var(--muted); }
.option-card.on { border-color: var(--primary); background: var(--primary-light); box-shadow: 0 0 0 2px var(--primary-soft); }
.total-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--muted-surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 14px; margin: 10px 0; }
.total-bar small { display: block; font-size: 12.5px; color: var(--muted); font-weight: 600; } .total-bar b { font-size: 22px; color: var(--primary-dark); }
.total-line { padding: 8px 2px; border-top: 1px solid var(--border); margin-top: 6px; }

/* the payment part (as the desktop's) */
.pay { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin: 10px 0; background: #FBFDFD; }
.pay .field > span { display: block; font-weight: 600; font-size: 13px; margin-bottom: 6px; }
.methods { display: flex; flex-wrap: wrap; gap: 8px; }
.method { border: 1.5px solid var(--border); background: #fff; border-radius: 9px; padding: 8px 14px; font-weight: 600; cursor: pointer; }
.method.on { border-color: var(--primary); background: var(--primary); color: #fff; }
.pay-details { margin-top: 10px; align-items: flex-start; } .pay-details .field { margin-bottom: 0; }
.err { color: var(--danger); font-size: 12.5px; display: block; margin-top: 4px; }
.pay-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; }
.owed small { display: block; font-size: 12px; color: var(--muted); font-weight: 600; text-align: right; } .owed b { font-size: 24px; color: var(--danger); }

/* the patient finder */
.picked .list-item { margin: 0; background: #F4FAF9; border-color: var(--primary-soft); }
.initials.small { width: 34px; height: 34px; font-size: 13px; } .initials.big { width: 60px; height: 60px; font-size: 21px; }
.picker-list div.active { background: var(--primary-light); }
.picker-list .none { color: var(--muted); cursor: default; }
.pick-list { border: 1px solid var(--border); border-radius: 10px; max-height: 320px; overflow-y: auto; margin-top: 8px; }
.pick-list.tall { max-height: 460px; }
.pick-list .pick { display: flex; gap: 10px; padding: 8px 12px; border-bottom: 1px solid #F1F5F9; cursor: pointer; user-select: none; }
.pick-list .pick:hover { background: var(--primary-light); } .pick-list .pick b { flex: 1; font-weight: 600; } .pick-list .pick span { color: var(--muted); font-size: 13px; }
.pick-list .none { padding: 14px; color: var(--muted); }
table.lines td { padding: 6px 8px; } table.lines .input.small { width: 100%; }

/* the reception desk: the tab, "Enter patient no.", the doctors of the day */
.desk-top { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.tabstrip { display: inline-flex; background: var(--muted-surface); border: 1px solid var(--border); border-radius: 12px; padding: 4px; }
.tabstrip .tab { display: inline-flex; gap: 8px; align-items: center; padding: 9px 14px; border-radius: 9px; font-weight: 600; font-size: 13.5px; color: var(--text); text-decoration: none; }
.tabstrip .tab svg { width: 16px; height: 16px; fill: var(--primary); }
.tabstrip .tab.on { background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.quick { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; border: 1px solid #9FD3CA; border-radius: 14px; padding: 8px 14px;
  background: linear-gradient(90deg, #E3F4F0, #F4FBF9); }
.quick-badge { width: 38px; height: 38px; border-radius: 10px; background: var(--primary); display: flex; align-items: center; justify-content: center; }
.quick-badge svg { width: 18px; height: 18px; fill: #fff; }
.quick-label b { display: block; font-size: 16px; color: #000; } .quick-label small { color: #1F5F55; font-size: 12px; }
.quick-box { width: 210px; } .quick-box .input { height: 40px; font-size: 17px; font-weight: 600; border: 2px solid var(--primary); }
.quick .btn { height: 40px; }
.quick-card { background: #fff; border: 1px solid #CFE6E1; border-radius: 10px; padding: 4px 12px; max-width: 420px; }
.quick-card b { display: block; font-size: 15px; } .quick-card small { color: #334155; font-size: 12.5px; }
.quick-card.choose { border-color: #FDBA74; } .quick-card.choose b { color: #9A3412; }
.quick-card.none { border-color: #FCA5A5; } .quick-card.none b { color: var(--danger); }
.with-side { display: flex; gap: 14px; align-items: flex-start; }
.side-list { width: 230px; flex-shrink: 0; border: 1px solid var(--border); border-radius: 12px; padding: 10px 8px; }
.side-title { font-weight: 700; padding: 0 8px 8px; }
.side-list .doc { display: flex; gap: 8px; align-items: center; width: 100%; text-align: left; border: 1px solid transparent; background: none; border-radius: 9px; padding: 7px 8px; cursor: pointer; }
.side-list .doc b { display: block; font-size: 13.5px; } .side-list .doc small { color: var(--muted); font-size: 11.5px; }
.side-list .doc.on { background: var(--primary-light); border-color: var(--primary-soft); }
.side-list .n { min-width: 28px; text-align: center; border-radius: 11px; padding: 2px 8px; font-size: 12px; font-weight: 700; background: #F1F5F9; border: 1px solid #E2E8F0; color: #64748B; }
.side-list .n.hot { background: linear-gradient(135deg, #14B8A6, #0F766E); border-color: #0F766E; color: #fff; }
@media (max-width: 900px) { .with-side { flex-direction: column; } .side-list { width: 100%; } }

/* the patient's file */
.file-head { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; }
.badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.pill.outline { background: #fff; } .pill.outline::before { display: none; }
.buttons.wrap.left { justify-content: flex-start; flex-wrap: wrap; display: flex; gap: 8px; margin-bottom: 12px; }
.table-wrap.short { max-height: 380px; overflow-y: auto; }

/* hospital services, refunds, the admission bill */
.cols.sb { grid-template-columns: 2fr 3fr; } .cols.ab { grid-template-columns: 3fr 2fr; margin-top: 12px; }
@media (max-width: 1000px) { .cols.sb, .cols.ab { grid-template-columns: 1fr; } }
.refund-lines { border: 1px solid var(--border); border-radius: 10px; margin: 12px 0; }
.refund-line { display: flex; gap: 10px; align-items: center; padding: 9px 12px; border-bottom: 1px solid #F1F5F9; cursor: pointer; }
.refund-line.off { opacity: .6; cursor: default; } .refund-line input { width: 18px; height: 18px; accent-color: var(--primary); }
.card.soft { background: var(--muted-surface); margin-bottom: 12px; } .card.soft .row { margin-top: 8px; }
.plan { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; background: var(--muted-surface); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; }
.plan select { width: auto; min-width: 220px; height: 34px; }
.totals { border-top: 1px solid var(--border); margin-top: 10px; padding-top: 8px; }
.totals .row { padding: 4px 2px; } .totals .net b { font-size: 20px; color: var(--primary-dark); }

/* the doctor's desk and the consultation */
.scope { display: inline-flex; gap: 8px; } .scope button { width: 132px; height: 38px; border: 1.5px solid var(--border); background: #fff; border-radius: 10px; font-weight: 600; cursor: pointer; }
.scope button.on { border-color: var(--primary); background: var(--primary-light); } .scope.off { opacity: .55; pointer-events: none; }
.saved-line { color: var(--muted); font-size: 13px; min-height: 18px; margin: -6px 2px 8px; }
.cols.consult { grid-template-columns: 3fr 2fr; }
@media (max-width: 1100px) { .cols.consult { grid-template-columns: 1fr; } }
.cols .card { margin-bottom: 14px; }
.note-card.reading textarea { background: #F6F9FA; }
.note-box { min-height: 96px; } .note-page { min-height: 380px; }
.shift-row select { max-width: 240px; }
.tabs.small button { padding: 7px 12px; font-size: 13px; }
.tabs button svg { width: 15px; height: 15px; fill: currentColor; vertical-align: -2px; margin-right: 6px; }
.note-item { display: flex; gap: 10px; width: 100%; text-align: left; border: 1px solid var(--border); background: #fff; border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; cursor: pointer; }
.note-item:hover { border-color: var(--primary-soft); } .note-item.on { border-color: var(--primary); background: var(--primary-light); }
.note-item .when { width: 62px; flex-shrink: 0; text-align: center; } .note-item .when b { display: block; font-size: 15px; } .note-item .when small { color: var(--muted); font-size: 11px; }
.note-item .preview { font-size: 13px; color: #334155; margin-top: 4px; white-space: pre-wrap; max-height: 56px; overflow: hidden; }
.tag { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 8px; background: #E2E8F0; color: #334155; }
.tag.soft { background: #F1F5F9; } .tag.this { background: var(--primary-light); color: var(--primary-dark); }
.vcard { display: flex; border: 1px solid #E2E8F0; border-radius: 10px; margin-bottom: 8px; cursor: pointer; overflow: hidden; }
.vwhen { width: 84px; flex-shrink: 0; background: #F1F5F9; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px; }
.vwhen b { font-size: 17px; } .vwhen small { font-size: 11.5px; color: #334155; }
.vcard .grow { padding: 7px 8px 4px 10px; min-width: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chips .chip { display: inline-flex; gap: 5px; align-items: center; padding: 2px 8px; font-weight: 500; font-size: 11.5px; border: 1px solid; border-radius: 8px; background: #fff; }
.chips .chip b { color: #000; font-size: 13.5px; } .chips .chip b.bad { color: var(--danger); }
.flag { background: #DC2626; color: #fff; font-size: 10.5px; font-weight: 700; border-radius: 6px; padding: 0 5px; font-style: normal; }
.vfolded { display: flex; gap: 8px; align-items: center; border: 1px solid #E2E8F0; border-radius: 10px; padding: 6px 10px; margin-bottom: 6px; cursor: pointer; font-size: 12.5px; }
.vfolded b { font-size: 13.5px; } .vfolded small { color: #475569; font-size: 11px; } .vfolded .grow { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest { position: fixed; z-index: 400; background: #fff; border: 1px solid var(--field); border-radius: 8px; padding: 3px; min-width: 220px; box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.suggest [data-i] { padding: 5px 8px; border-radius: 5px; cursor: pointer; font-size: 13.5px; } .suggest .active { background: var(--primary-light); }
.suggest small { display: block; color: var(--muted); font-size: 11px; padding: 2px 6px 3px; }
.vgrid { display: grid; grid-template-columns: 1fr 1fr 1.35fr 1fr; gap: 10px; margin-bottom: 14px; }
@media (max-width: 720px) { .vgrid { grid-template-columns: 1fr 1fr; } }
.vtile { border: 1px solid #CBD5E1; border-radius: 12px; padding: 9px 10px 7px 12px; background: #fff; cursor: text; }
.vtile.flagged { background: #FEF2F2; border-color: #DC2626; }
.vhead { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; font-weight: 600; }
.vflag { background: #DC2626; color: #fff; font-size: 11px; border-radius: 6px; padding: 1px 6px; }
.vbox { width: 100%; border: 0; background: transparent; font-size: 20px; font-weight: 700; padding: 4px 0 2px; outline: none; color: #000; }
.vbox.bad { color: #B91C1C; } .vbox.right { text-align: right; } .vtile .row { flex-wrap: nowrap; gap: 0; align-items: center; } .slash { font-size: 20px; color: #64748B; margin: 0 6px; }

/* a window: its title and buttons stay, the middle scrolls (as the desktop's windows) */
.modal.win { display: flex; flex-direction: column; overflow: hidden; }
.modal.win .win-body { overflow-y: auto; flex: 1 1 auto; min-height: 0; padding-right: 4px; margin-right: -4px; }
.modal.win .buttons { flex-shrink: 0; border-top: 1px solid var(--border); padding-top: 14px; margin-top: 12px; }
.with-side > .grow { min-width: 0; width: 100%; }
.card .row.gap > .input.grow { min-width: 0; }
.picker .input.strong { border-color: var(--primary); }
.option-card[data-who] { width: auto; min-width: 180px; margin-bottom: 12px; }

/* the lab: the request, its forms laid out like the paper forms */
.lab-who { display: grid; grid-template-columns: 2.2fr 1fr 1fr 1fr 1fr 2fr; gap: 12px; }
.lab-who span { display: block; } .lab-who b { font-size: 15px; color: #000; }
@media (max-width: 800px) { .lab-who { grid-template-columns: 1fr 1fr; } }
.note-line { color: #000; margin: 10px 0 0; font-size: 13.5px; }
.lab-test { padding: 6px 0; border-bottom: 1px solid #F1F5F9; } .lab-test select { height: 34px; }
.fold { margin-bottom: 12px; } .fold-head { display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
.fold-head h3 { margin: 0; color: var(--primary-dark); font-size: 17px; }
.chev { font-size: 22px; color: var(--subtle); transition: transform .15s; } .chev.open { transform: rotate(180deg); }
.fold-body { margin-top: 12px; }
.labcols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 1000px) { .labcols { grid-template-columns: 1fr; } }
.labsec { margin-bottom: 12px; }
.labsec-title { background: var(--primary-light); border-radius: 6px; padding: 5px 10px; font-size: 12.5px; font-weight: 700; color: #000; margin-bottom: 6px; }
.labrow { display: grid; grid-template-columns: 1.25fr 156px 66px 1fr; gap: 6px; align-items: center; padding: 2px 0; font-size: 13.5px; color: #000; }
.labin { display: flex; align-items: center; gap: 4px; } .labin .input { width: 130px; }
.labflag { width: 22px; text-align: center; font-weight: 700; } .labflag.high { color: #B22222; } .labflag.low { color: #4169E1; }

/* the administrator's pages */
.roles-page { display: flex; gap: 14px; align-items: flex-start; } .roles-page .side-list { width: 280px; }
@media (max-width: 900px) { .roles-page { flex-direction: column; } .roles-page .side-list { width: 100%; } }
.linkbtn { border: 0; background: none; font: inherit; font-weight: 700; color: var(--primary-dark); cursor: pointer; text-decoration: underline dotted; padding: 0; }
table.matrix th.c, table.matrix td.c { text-align: center; width: 70px; }
table.matrix input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--primary); }
.check.small { font-size: 13px; margin-right: 10px; }
.can-do { margin: 0; padding-left: 18px; color: #000; font-size: 13.5px; line-height: 1.6; max-height: 360px; overflow-y: auto; }
.check.role { display: flex; align-items: flex-start; margin-bottom: 8px; } .check.role small { display: block; }
.logo-row { display: flex; gap: 16px; align-items: center; margin: 10px 0 16px; }
.logo-tile.small { width: 90px; height: 90px; margin: 0; border-radius: 16px; } .logo-tile.small img { max-width: 70px; max-height: 70px; }
.checks { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 12px; }
.side-list a.doc { display: flex; gap: 10px; align-items: center; text-decoration: none; color: var(--text); }
.side-list a.doc svg { width: 18px; height: 18px; fill: var(--primary); }
.check.pick { display: flex; padding: 6px 10px; border-bottom: 1px solid #F1F5F9; } .check.pick small { display: block; }
.cols.tpl { grid-template-columns: 3fr 1fr; margin-top: 8px; }
@media (max-width: 1100px) { .cols.tpl { grid-template-columns: 1fr; } }
.who .btn + .btn { margin-top: 6px; }

/* ======================================================================== phones (a narrow screen): everything fits, nothing scrolls sideways */
@media (max-width: 700px) {
  body { font-size: 14.5px; }
  .main { padding: 0; }
  .page { border: 0; border-radius: 0; padding: 14px 12px 28px; min-height: calc(100vh - 57px); }
  .page h1 { font-size: 20px; } .page .sub { font-size: 13.5px; margin-bottom: 12px; }
  .btn { height: 38px; padding: 0 12px; font-size: 14px; gap: 6px; }
  .btn.small { height: 32px; padding: 0 10px; }
  .row { gap: 8px; } .grow { min-width: 0; }
  .card { padding: 12px; }
  .h2, .list-title { font-size: 17px; }

  /* a list: the filters two by two, the buttons two by two (the main one first, across) */
  .toolbar { gap: 8px; margin: 4px 0 10px; }
  .toolbar .filters { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .toolbar .filters > label.field.f { min-width: 0; }
  .toolbar .filters .input { width: 100% !important; min-width: 0; }
  .toolbar .filters > label:has([data-f="q"]), .toolbar .filters > label:has(.toggle), .toolbar .filters > label:has(.day) { grid-column: 1 / -1; }
  .toolbar .filters > label:has([data-f="q"]) > span { display: none; }
  .toggle { display: flex; width: 100%; } .toggle button { flex: 1; padding: 8px 6px; font-size: 13px; }
  .day { width: 100%; } .day .input { flex: 1; width: auto; }
  .toolbar .buttons { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .toolbar .buttons .btn { width: 100%; min-width: 0; padding: 0 8px; }
  .toolbar .buttons .btn.primary { grid-column: 1 / -1; order: -1; }
  .status { font-size: 13px; }

  /* tables with headings: each row a card, each cell "what it is ... value" */
  table.grid:has(thead) thead { display: none; }
  table.grid:has(thead), table.grid:has(thead) tbody, table.grid:has(thead) tr, table.grid:has(thead) td { display: block; width: 100%; }
  table.grid:has(thead) tbody tr { padding: 9px 12px; border-bottom: 1px solid var(--border); }
  table.grid:has(thead) tbody tr:last-child { border-bottom: 0; }
  table.grid:has(thead) td { border: 0; padding: 3px 0; display: flex; justify-content: space-between; align-items: center; gap: 12px;
    text-align: right; white-space: normal; min-height: 24px; }
  table.grid:has(thead) td::before { content: attr(data-label); flex: 0 0 auto; max-width: 42%; text-align: left; color: var(--muted); font-size: 12.5px; font-weight: 600; }
  table.grid:has(thead) td[data-label=""]::before, table.grid:has(thead) td:not([data-label])::before { content: none; }
  table.grid:has(thead) td[data-label=""] { justify-content: flex-start; text-align: left; }
  table.grid:has(thead) td.empty { display: block; text-align: center; padding: 18px 0; }
  table.grid:has(thead) td .input { flex: 1 1 auto; max-width: 62%; min-width: 0; }
  table.grid:has(thead) td .btn.icon { margin-left: auto; }
  table.grid tr.sel { background: var(--primary-light); } table.grid tr.sel td { background: transparent; }
  .table-wrap { overflow: visible; }
  .table-wrap.short { max-height: none; }
  table.matrix td.c { width: 100%; }
  table.lines td { padding: 6px 4px; }

  /* the figures, two by two */
  .tiles { grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
  .tile { padding: 10px; gap: 8px; align-items: flex-start; }
  .tile .badge { width: 30px; height: 30px; border-radius: 8px; } .tile .badge svg { width: 16px; height: 16px; }
  .tile b { font-size: 16px; word-break: break-word; } .tile small { font-size: 11.5px; } .tile span { font-size: 11px; }

  /* windows take the whole screen; their buttons stay at the bottom */
  .modal-back { padding: 10px; }
  .modal-back:has(.modal.win) { padding: 0; align-items: stretch; }
  .modal { padding: 16px 14px; max-height: calc(100vh - 20px); }
  .modal.win { max-width: none !important; width: 100%; height: 100%; max-height: none; border-radius: 0; padding: 14px 14px 10px; }
  .modal h3 { font-size: 17px; } .modal p { margin-bottom: 10px; }
  .win-head { flex-wrap: wrap; gap: 6px; } .win-head [data-head-right] { max-width: 100%; } .win-head .pill { white-space: normal; }
  .modal .buttons { gap: 8px; margin-top: 10px; }
  .modal .buttons .btn { flex: 1 1 0; min-width: 0; padding: 0 8px; }
  .modal.win .buttons { padding-top: 10px; margin-top: 8px; }
  .foot-left { flex: 1 1 100%; margin-right: 0; gap: 8px 14px; }
  .modal .form-grid { gap: 0 10px; }
  .option-card { width: calc(50% - 4px); } .option-card[data-who] { min-width: 0; }
  .pay-head { flex-wrap: wrap; }
  .file-head { align-items: flex-start; } .initials.big { width: 46px; height: 46px; font-size: 17px; }
  .buttons.wrap.left { display: grid; grid-template-columns: 1fr 1fr; } .buttons.wrap.left .btn { width: 100%; }

  /* tabs: one line that slides sideways */
  .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; margin-bottom: 10px; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs button { flex: 0 0 auto; padding: 8px 12px; font-size: 13.5px; }

  /* the reception desk: "Enter patient no." across; the doctors of the day as a sliding row */
  .desk-top { gap: 8px; margin-bottom: 10px; } .desk-top > .grow { width: 100%; flex-basis: 100%; }
  .quick { padding: 10px; gap: 8px; } .quick-label { flex: 1 1 calc(100% - 60px); }
  .quick-box { width: 100%; } .quick .btn { width: 100%; } .quick-card { max-width: none; width: 100%; }
  .side-list { padding: 8px; }
  .side-list [data-docs], .side-list [data-roles], .side-list.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
  .side-list .doc { flex: 0 0 auto; width: auto; max-width: 75vw; border: 1px solid var(--border); }
  .side-list .side-title { padding: 0 4px 6px; }

  /* the doctor's desk and the consultation */
  .scope { width: 100%; } .scope button { flex: 1; width: auto; }
  .patient-head { padding: 12px; gap: 10px; }
  .patient-head .initials { width: 44px; height: 44px; font-size: 16px; }
  .patient-head h2 { font-size: 18px; }
  .patient-head .actions { margin-left: 0; width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .patient-head .actions .btn { width: 100%; padding: 0 8px; }
  .note-card .row.between > .row { flex-wrap: wrap; }
  .note-page { min-height: 260px; }
  .vgrid { gap: 8px; }

  /* the lab's forms */
  .lab-test { flex-direction: column; align-items: stretch; gap: 6px; } .lab-test select { width: 100% !important; }
  .labrow { grid-template-columns: 1fr 140px; row-gap: 0; padding: 4px 0; border-bottom: 1px solid #F1F5F9; }
  .labrow > :nth-child(3), .labrow > :nth-child(4) { font-size: 11.5px; }
  .labin .input { width: 110px; }
  .labcols { gap: 0; }

  /* the administrator's pages */
  .logo-row { align-items: flex-start; }
  .cols.tpl, .cols.sb, .cols.ab { gap: 10px; }
  .facts { gap: 4px 14px; font-size: 13.5px; }
}

/* phones: a row tapped brings its buttons to the bottom of the screen ("Done" puts them back) */
.unpick { display: none; }
@media (max-width: 700px) {
  table.grid:has(thead) td:empty { display: none; }
  .row.lab-test { align-items: stretch; } .lab-test > div { text-align: left; }
  .hblist.picked .toolbar .buttons { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; margin: 0; background: #fff;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); box-shadow: 0 -8px 24px rgba(15, 40, 50, .12); }
  .hblist.picked .toolbar .buttons .unpick { display: inline-flex; }
  .hblist.picked { padding-bottom: 210px; }
}

/* phones: long button words go onto two lines instead of off the screen; a desk's own buttons across */
@media (max-width: 700px) {
  .btn { height: auto; min-height: 38px; padding: 6px 10px; white-space: normal; line-height: 1.2; text-align: center; }
  .btn.small { min-height: 32px; padding: 4px 10px; }
  .btn.icon { min-height: 0; }
  .page > .row.between > .buttons { width: 100%; display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; }
  .page > .row.between > .buttons .btn { width: 100%; }
  table.matrix td:first-child { display: block; text-align: left; font-size: 15px; padding-bottom: 4px; }
  table.matrix td:first-child::before { content: none; }
  table.matrix td:first-child small { font-size: 12.5px; }
}
@media (max-width: 700px) { .scope { margin: 4px 0 10px; } }

/* the menu folds: one desk open at a time, an arrow beside each desk with pages of its own, a dot on a closed one with something waiting */
.nav-sec .nav-subs { display: none; }
.nav-sec.expanded .nav-subs { display: block; }
.nav.has-subs::after { content: ''; flex-shrink: 0; width: 7px; height: 7px; margin: 0 2px 0 2px; border-right: 2px solid var(--subtle); border-bottom: 2px solid var(--subtle);
  transform: rotate(-45deg); transition: transform .15s; }
.nav-sec.expanded > .nav.has-subs::after { transform: rotate(45deg); margin-top: -4px; }
.nav-sec.news:not(.expanded) > .nav.has-subs .t::after { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-left: 7px;
  vertical-align: middle; background: var(--primary); animation: blinkN 1.2s ease-in-out infinite; }