/* Core styles (supervisor-owned). Modules add their own CSS via ui.css(new URL('./style.css', import.meta.url)). */
:root{
  --bg:#f3f2f8; --panel:#ffffff; --text:#1d1b26; --muted:#6b6880; --border:#dcd9e6; --field:#ffffff;
  --accent:#4b3fa8; --accent-ink:#ffffff; --accent-soft:#ece9fb;
  --danger:#b42318; --danger-soft:#fde8e6; --ok:#127a43; --ok-soft:#e1f3e8; --warn:#7a4d00; --warn-soft:#fdf0d5;
  --info:#1f5d99; --info-soft:#e3eefa;
  --nav:#1f1a3d; --nav-ink:#d9d5f2; --nav-muted:#9a94c4; --nav-active:#4b3fa8;
  --abo-a:#1f5d99; --abo-b:#8a3c9e; --abo-ab:#2f6f5e; --abo-o:#b42318;
  --radius:10px; --font:'Tajawal','Segoe UI',Tahoma,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#15131f; --panel:#1e1b2b; --text:#ece9f6; --muted:#a19cb8; --border:#34304a; --field:#191726;
    --accent:#8f84ec; --accent-ink:#15131f; --accent-soft:#2b2647;
    --danger:#ff8a80; --danger-soft:#3a1d1d; --ok:#6fd49c; --ok-soft:#173326; --warn:#f0c46a; --warn-soft:#352a14;
    --info:#8fbcef; --info-soft:#1b2a3d; --nav:#100e19; --nav-ink:#d9d5f2; --nav-muted:#8a85ad; --nav-active:#4b3fa8;
    --abo-a:#8fbcef; --abo-b:#d39be0; --abo-ab:#7fcfb6; --abo-o:#ff8a80;
    color-scheme:dark;
  }
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; background:var(--bg); color:var(--text); font-family:var(--font); font-size:15px; line-height:1.6}
a{color:var(--accent)}
h1,h2,h3{margin:0; line-height:1.35}
p{margin:0}
.muted{color:var(--muted)} .small{font-size:13px}
.num,[dir=ltr]{font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
[hidden]{display:none!important}

/* ---------- buttons & inputs ---------- */
.btn{font:inherit; display:inline-flex; align-items:center; justify-content:center; gap:6px; border:1px solid var(--border); background:var(--panel); color:var(--text); border-radius:8px; padding:7px 14px; cursor:pointer; text-decoration:none; white-space:nowrap}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
.btn.danger{background:var(--danger); color:#fff; border-color:var(--danger)}
.btn.ghost{background:transparent}
.btn.sm{padding:3px 10px; font-size:13px}
.btn.block{width:100%}
.btn:disabled{opacity:.55; cursor:not-allowed}
.icon-btn{font:inherit; border:0; background:transparent; color:inherit; cursor:pointer; padding:6px; border-radius:8px; display:inline-flex}
.icon-btn:hover{background:var(--accent-soft)}
.in{font:inherit; width:100%; background:var(--field); color:var(--text); border:1px solid var(--border); border-radius:8px; padding:8px 10px}
.in:focus{border-color:var(--accent); outline:none; box-shadow:0 0 0 3px var(--accent-soft)}
textarea.in{resize:vertical}
.field{display:flex; flex-direction:column; gap:4px; min-width:0}
.field-label{font-size:13.5px; color:var(--muted)}
.field .req{color:var(--danger); font-weight:500}
.field .hint{color:var(--muted); font-size:12.5px}
.form-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px 16px}
.form-grid .wide{grid-column:1/-1}
.bar{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.stack{display:flex; flex-direction:column; gap:12px}
.row{display:flex; gap:12px; flex-wrap:wrap; align-items:flex-start}
.row > *{min-width:0}
.grow{flex:1}

/* ---------- auth screens ---------- */
.auth-wrap{min-height:100%; display:grid; place-items:center; padding:24px 16px}
.auth-card{width:min(420px,100%); background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:28px; display:flex; flex-direction:column; gap:14px}
.auth-card h1{font-size:22px}
.brand{display:flex; gap:12px; align-items:center}
.brand-mark{width:42px; height:42px; border-radius:12px; background:var(--accent); color:#fff; display:grid; place-items:center; flex:none}
.brand.small .brand-mark{width:34px; height:34px; border-radius:10px}
.brand.small b{display:block; color:#fff}
.brand.small span{font-size:12px}

/* ---------- shell ---------- */
.shell{display:grid; grid-template-columns:250px minmax(0,1fr); min-height:100%}
.side{background:var(--nav); color:var(--nav-ink); display:flex; flex-direction:column; gap:14px; padding:16px 12px; position:sticky; top:0; height:100vh; overflow-y:auto}
.side .muted{color:var(--nav-muted)}
.nav{display:flex; flex-direction:column; gap:12px; flex:1}
.nav-sec{display:flex; flex-direction:column; gap:2px}
.nav-sec-title{font-size:11.5px; color:var(--nav-muted); padding:4px 10px; letter-spacing:.02em}
.nav a{display:flex; align-items:center; gap:10px; color:var(--nav-ink); text-decoration:none; padding:7px 10px; border-radius:8px; font-size:14px}
.nav a:hover{background:rgba(255,255,255,.07)}
.nav a.on{background:var(--nav-active); color:#fff}
.nav-warn{font-size:12px; color:#f0c46a; padding:6px 10px}
.me{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px; border-radius:10px; background:rgba(255,255,255,.06)}
.me b{display:block; font-size:14px} .me span{font-size:12px; color:var(--nav-muted)}
.content{min-width:0; display:flex; flex-direction:column}
.top{display:flex; align-items:center; gap:12px; padding:14px 24px; border-bottom:1px solid var(--border); background:var(--panel); position:sticky; top:0; z-index:5}
.top h2{font-size:19px; flex:1; min-width:0}
.menu-btn{display:none}
main{padding:22px 24px 48px; display:flex; flex-direction:column; gap:18px; min-width:0}
main:focus{outline:none}
@media (max-width:900px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .side{position:fixed; inset:0 0 0 auto; width:270px; z-index:20; transform:translateX(100%); transition:transform .2s}
  .side.open{transform:none; box-shadow:0 0 0 100vmax rgba(0,0,0,.35)}
  .menu-btn{display:inline-flex}
  .top{padding:12px 16px} main{padding:16px 16px 40px}
}

/* ---------- content blocks ---------- */
.card{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:16px 18px; display:flex; flex-direction:column; gap:12px; min-width:0}
.card-head{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.card-head h3{font-size:16px}
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px}
.stat{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:12px 14px; display:flex; flex-direction:column}
.stat b{font-size:26px; font-variant-numeric:tabular-nums}
.stat span{font-size:13px; color:var(--muted)}
.stat.warn{border-color:var(--warn)} .stat.danger{border-color:var(--danger)} .stat.ok{border-color:var(--ok)}
.table-wrap{overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius); background:var(--panel)}
.tbl{border-collapse:collapse; width:100%; font-size:14px}
.tbl th,.tbl td{padding:9px 12px; text-align:start; border-bottom:1px solid var(--border); vertical-align:top}
.tbl th{font-size:12.5px; color:var(--muted); font-weight:500; background:var(--bg); white-space:nowrap}
.tbl tr:last-child td{border-bottom:0}
.tbl tr.click{cursor:pointer} .tbl tr.click:hover td{background:var(--accent-soft)}
.tbl .num{text-align:end; font-variant-numeric:tabular-nums}
.kv{display:grid; grid-template-columns:max-content minmax(0,1fr); gap:6px 16px; margin:0}
.kv dt{color:var(--muted); font-size:13.5px} .kv dd{margin:0}
.badge{display:inline-block; font-size:12px; font-weight:500; padding:1px 9px; border-radius:999px; line-height:1.8; white-space:nowrap}
.badge.ok{background:var(--ok-soft); color:var(--ok)} .badge.warn{background:var(--warn-soft); color:var(--warn)}
.badge.danger{background:var(--danger-soft); color:var(--danger)} .badge.info{background:var(--info-soft); color:var(--info)}
.badge.muted{background:var(--bg); color:var(--muted); border:1px solid var(--border)}
.abo{display:inline-block; min-width:38px; text-align:center; font-weight:700; border:1.5px solid currentColor; border-radius:6px; padding:0 6px; direction:ltr}
.abo-a{color:var(--abo-a)} .abo-b{color:var(--abo-b)} .abo-ab{color:var(--abo-ab)} .abo-o{color:var(--abo-o)}
.empty{padding:28px; text-align:center; color:var(--muted); border:1px dashed var(--border); border-radius:var(--radius); display:flex; flex-direction:column; gap:10px; align-items:center}
.loading{padding:28px; text-align:center; color:var(--muted)}
.error-box{padding:14px 16px; border-radius:var(--radius); background:var(--danger-soft); color:var(--danger); border:1px solid var(--danger)}
.notice{padding:12px 14px; border-radius:var(--radius); background:var(--warn-soft); color:var(--warn)}
.hard-stop{padding:12px 14px; border-radius:var(--radius); background:var(--danger-soft); color:var(--danger); font-weight:500}
.tabs{display:flex; gap:4px; border-bottom:1px solid var(--border)}
.tabs a,.tabs button{font:inherit; background:none; border:0; border-bottom:2px solid transparent; padding:8px 12px; color:var(--muted); text-decoration:none; cursor:pointer}
.tabs .on{color:var(--accent); border-bottom-color:var(--accent)}

.env-badge{font-size:12.5px; font-weight:700; padding:3px 10px; border-radius:999px; background:var(--warn-soft); color:var(--warn); border:1px solid var(--warn)}
.env-badge.env-training{background:var(--info-soft); color:var(--info); border-color:var(--info)}

/* ---------- modal & toast ---------- */
.modal-back{position:fixed; inset:0; background:rgba(15,12,30,.45); display:grid; place-items:center; padding:16px; z-index:50}
.modal{background:var(--panel); border-radius:14px; width:min(480px,100%); max-height:calc(100vh - 32px); overflow:auto; display:flex; flex-direction:column; gap:14px; padding:18px 20px}
.modal.wide{width:min(820px,100%)}
.modal-head{display:flex; align-items:center; justify-content:space-between; gap:12px}
.modal-head h3{font-size:17px}
.modal-actions{display:flex; gap:8px; justify-content:flex-start; flex-wrap:wrap}
.modal-err{color:var(--danger); font-size:14px}
.esign-statement{padding:10px 12px; background:var(--accent-soft); border-radius:8px}
#toast{position:fixed; bottom:20px; left:50%; transform:translate(-50%,120px); background:var(--text); color:var(--bg); padding:10px 18px; border-radius:10px; font-size:14px; transition:transform .25s; z-index:60; max-width:calc(100vw - 32px); pointer-events:none}
#toast.show{transform:translate(-50%,0)}
#toast.error{background:var(--danger); color:#fff}
#toast.success{background:var(--ok); color:#fff}

/* left-to-right (English) */
@media (max-width:900px){ [dir=ltr] .side{inset:0 auto 0 0; transform:translateX(-100%)} [dir=ltr] .side.open{transform:none} }
.lang-btn{font-weight:700; min-width:38px}

@media print{
  .side,.top,#toast{display:none!important}
  .shell{display:block} main{padding:0}
  body{background:#fff; color:#000}
}
@media (prefers-reduced-motion: reduce){ *{transition:none!important} }

/* age <-> birth year (core/age_field.js) */
.age-year{display:flex;align-items:center;gap:8px}
.age-year .ay-part{display:flex;align-items:center;gap:6px;flex:1;min-width:0}
.age-year .ay-part .in{min-width:0;width:100%}
.age-year small{color:var(--muted);white-space:nowrap}
.age-year .ay-or{color:var(--muted);font-size:13px}

/* drawn signature pad (donor-visits/signature.js), used in several modules */
.dv-sign{display:flex;flex-direction:column;gap:8px}
.dv-sign canvas{width:100%;max-width:560px;height:180px;border:2px dashed var(--border);border-radius:10px;background:#fff;touch-action:none;cursor:crosshair}
.dv-sign canvas.drawn{border-style:solid;border-color:var(--accent)}

/* hospital logo in place of the drop mark (core/facility.js) */
.brand-mark.logo{background:#fff;padding:3px;overflow:hidden}
.brand-mark.logo img{width:100%;height:100%;object-fit:contain}

/* ---------- p2j: release 1 desk / lab interfaces ---------- */
.date-field{display:inline-flex;align-items:center;gap:4px;position:relative;max-width:100%}
.date-field .date-text{min-width:9.5em;font-variant-numeric:tabular-nums}
.date-field .date-text.invalid{border-color:var(--danger);background:color-mix(in srgb,var(--danger) 6%,var(--panel))}
.date-btn{font-size:15px;line-height:1;padding:6px}
.date-picker-hidden{position:absolute;inset-inline-start:0;bottom:0;width:1px;height:1px;opacity:0;pointer-events:none;border:0;padding:0}
.grp-full{display:flex;flex-direction:column;gap:8px}
.grp-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.grp-lbl{min-width:84px;font-weight:700;color:var(--muted);direction:ltr;text-align:start}
.grp-other{max-width:260px}
.ag-grid{display:flex;flex-wrap:wrap;gap:8px}
.ag-cell{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--border);border-radius:8px;padding:3px 6px;direction:ltr}
.ag-cell b{min-width:34px;text-align:center}
.ag-btn{font:inherit;font-weight:700;width:32px;height:30px;border:1.5px solid var(--border);border-radius:6px;background:var(--panel);color:var(--text);cursor:pointer}
.ag-btn.ag-pos.on{background:var(--danger);border-color:var(--danger);color:#fff}
.ag-btn.ag-neg.on{background:var(--ok);border-color:var(--ok);color:#fff}
.abo-rare{font-weight:800;color:var(--danger);direction:ltr}
.grp-text small{color:var(--muted);font-weight:600}
.elig{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.elig ul{margin:4px 0 0;padding-inline-start:20px;color:var(--danger);width:100%}
.mismatch-banner{border:2px solid var(--danger);background:color-mix(in srgb,var(--danger) 10%,var(--panel));color:var(--danger);border-radius:var(--radius);padding:12px 14px}
.mismatch-banner b{font-size:18px}
.mismatch-banner ul{margin:6px 0 0;padding-inline-start:22px}
.match-banner{border:2px solid var(--ok);background:color-mix(in srgb,var(--ok) 10%,var(--panel));color:var(--ok);border-radius:var(--radius);padding:10px 14px;font-weight:700;font-size:16px}
.mismatch .mismatch-q{font-size:20px;font-weight:800;color:#fff;background:var(--danger);border-radius:var(--radius);padding:14px;text-align:center}
.mismatch ul{color:var(--danger);margin:0;padding-inline-start:22px}
.tbl tr.sev-high td{background:color-mix(in srgb,var(--danger) 9%,transparent)}
.tbl tr.sev-warn td{background:color-mix(in srgb,var(--warn) 9%,transparent)}
.tbl tr.new td{animation:p2jFlash 2s ease-out 2}
@keyframes p2jFlash{from{background:color-mix(in srgb,var(--accent) 22%,transparent)}to{background:transparent}}
.tbl.reg tr.st-override td{color:var(--danger);font-weight:600}
.tbl.reg tr.st-awaiting td{color:var(--muted)}
.tbl.reg tr.st-designated td{background:color-mix(in srgb,var(--ok) 6%,transparent)}
.bag-confirm .kv{grid-template-columns:auto 1fr auto 1fr}
.lab-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.wait-card.new{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 30%,transparent)}
.wait-card.lab{border-style:dashed}
.coombs-row{border:1px solid var(--border);border-radius:8px;padding:8px}
.test-def{border:1px solid var(--border);border-radius:var(--radius);padding:10px;display:flex;flex-direction:column;gap:8px}
.phys-in{display:block}
.rd-grid{display:grid;grid-template-columns:minmax(320px,440px) 1fr;gap:16px;align-items:start}
.rd-grid .rd-preview{position:sticky;top:12px}
.rd-preview iframe{width:100%;height:78vh;border:1px solid var(--border);border-radius:var(--radius);background:#fff}
.rd-sec{display:flex;align-items:center;gap:6px;border:1px solid var(--border);border-radius:8px;padding:6px 8px}
.rd-sec input[type=text]{flex:1}
@media (max-width:900px){.rd-grid{grid-template-columns:1fr}.rd-grid .rd-preview{position:static}.bag-confirm .kv{grid-template-columns:auto 1fr}}
.ph-btn.ph-d.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.field .row-inline input[type=checkbox],.checks input[type=checkbox],label.check input[type=checkbox]{width:18px;height:18px;flex:none;min-width:0}
/* long titles keep one line where possible; the actions wrap under the title instead of squeezing it */
.top{flex-wrap:wrap}
#pageTitle{flex:1 1 280px;min-width:200px}
#pageActions{flex-wrap:wrap;justify-content:flex-end}
/* the units of the request form, one per line as on the paper form */
.unit-list{display:flex;flex-direction:column;gap:4px;max-width:720px}
.unit-row{display:flex;align-items:center;gap:10px;border-bottom:1px dotted var(--border);padding:3px 0}
.unit-row .unit-name{flex:1;text-align:left}
.unit-row .unit-qty{width:80px;flex:none}
.unit-row .unit-note{width:200px;flex:none}
.own-xm{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.own-xm>div{border:1px solid var(--border);border-radius:8px;padding:8px}
.own-xm h4{margin:0 0 6px}
.warn-text{color:var(--warn);font-weight:700}
.age-small{width:90px}
/* the age with its unit on one line: the age and the birth year keep a readable width */
.age-unit-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.age-unit-row .age-year{flex:1 1 220px;min-width:220px}
.age-unit-row .age-year .ay-part .in{min-width:64px}
.age-unit-row select{width:auto;flex:none}
.branch-pages{display:grid;gap:12px}.branch-group b{display:block;margin-bottom:4px}.branch-group label.check{display:inline-flex;gap:6px;align-items:center}
.tbl th.sortable{cursor:pointer;user-select:none}.tbl th.sortable:hover{text-decoration:underline}.tbl th[data-dir=asc]::after{content:" ▲";font-size:.7em}.tbl th[data-dir=desc]::after{content:" ▼";font-size:.7em}
.xml-in{font-family:Consolas,"Courier New",monospace;font-size:.85rem;direction:ltr;text-align:left;white-space:pre;min-height:260px}