/* Caresoft BBMS — slate paper, ink, oxblood reserved for primary action. */
:root{
  --paper:#F4F6F7; --card:#FFFFFF; --ink:#1A2330; --ink2:#51606F; --line:#DCE2E7; --line2:#C5CED6;
  --ox:#7F1D2D; --ox-d:#63121F; --ox-t:#F6E9EB;
  --ok:#2E7D5B; --ok-t:#E5F2EB; --res:#3F5B78; --res-t:#E6EDF4; --warn:#9A6212; --warn-t:#FBF0DC; --bad:#B42318; --bad-t:#FBE7E5;
  --r:6px; --font:'Public Sans',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.5 var(--font);font-variant-numeric:tabular-nums}
a{color:var(--res)} a:hover{color:var(--ink)}
:focus-visible{outline:3px solid #2F6FEB;outline-offset:2px}
h1{font-size:1.5rem;line-height:1.2;margin:0;font-weight:700;letter-spacing:-.01em}
h2{font-size:1.1rem;margin:0 0 .75rem;font-weight:700}
h3{font-size:.95rem;margin:0 0 .5rem;font-weight:600}
.shell{display:grid;grid-template-columns:232px 1fr;min-height:100vh}
.side{background:var(--ink);color:#DDE3E9;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow:auto}
.brand{display:flex;gap:.7rem;align-items:center;padding:1.1rem 1rem 1rem;border-bottom:1px solid #2C3846}
.brand strong{display:block;color:#fff;font-size:1rem} .brand small{color:#9AA8B6;font-size:.78rem}
.drop{width:22px;height:28px;background:var(--ox);border-radius:50% 50% 50% 50%/60% 60% 40% 40%;transform:rotate(0);clip-path:path('M11 0C11 0 0 13 0 19a11 9 0 0 0 22 0C22 13 11 0 11 0Z');flex:none}
.side nav{display:flex;flex-direction:column;padding:.5rem 0;flex:1}
.side nav a{color:#C9D2DB;text-decoration:none;padding:.5rem 1rem;border-left:3px solid transparent;font-size:.93rem}
.side nav a:hover{background:#243140;color:#fff}
.side nav a.on{border-left-color:#E0717F;background:#243140;color:#fff;font-weight:600}
.me{padding:1rem;border-top:1px solid #2C3846;font-size:.82rem} .me span{display:block;color:#fff} .me small{display:block;color:#9AA8B6;margin-bottom:.4rem}
.me a{color:#C9D2DB;margin-right:.6rem}
.main{min-width:0}
.top{display:flex;gap:1rem;align-items:center;padding:1.25rem 2rem .5rem}
.top .sub{margin:.15rem 0 0;color:var(--ink2)}
.menu{display:none;border:1px solid var(--line2);background:var(--card);border-radius:var(--r);font-size:1.1rem;padding:.3rem .6rem}
.content{padding:.5rem 2rem 3rem;max-width:1400px}
.flash{margin:.5rem 2rem;padding:.7rem 1rem;border-radius:var(--r);border:1px solid;font-weight:500}
.content .flash{margin:.5rem 0}
.flash.success{background:var(--ok-t);border-color:#B7DCC8;color:#1D5A40}
.flash.error{background:var(--bad-t);border-color:#F1BDB7;color:#8A1A12}
.flash.info{background:var(--res-t);border-color:#C3D2E2;color:#2C4560}
.flash.warn{background:var(--warn-t);border-color:#EDD3A3;color:#6E4508}
section.panel{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:1.1rem 1.25rem;margin-bottom:1.25rem}
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:.75rem}
.panel-head h2{margin:0}
.grid{display:grid;gap:1rem} .g2{grid-template-columns:repeat(2,minmax(0,1fr))} .g3{grid-template-columns:repeat(3,minmax(0,1fr))} .g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.span2{grid-column:span 2} .span3{grid-column:span 3} .span4{grid-column:1/-1}
.fld{display:flex;flex-direction:column;gap:.25rem;font-size:.85rem;color:var(--ink2);font-weight:500}
.fld input,.fld select,.fld textarea{font:inherit;font-size:.95rem;color:var(--ink);padding:.5rem .6rem;border:1px solid var(--line2);border-radius:var(--r);background:#fff;min-height:40px}
.fld textarea{min-height:70px}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--res);outline:2px solid #C9D8EA}
.scan input{font-size:1.25rem;font-weight:600;letter-spacing:.02em;min-height:52px}
.check{display:flex;gap:.5rem;align-items:flex-start;font-size:.9rem} .check input{margin-top:.25rem;width:18px;height:18px}
.btn{display:inline-flex;align-items:center;gap:.4rem;font:inherit;font-weight:600;font-size:.92rem;padding:.55rem 1rem;border-radius:var(--r);border:1px solid var(--ox);background:var(--ox);color:#fff;text-decoration:none;cursor:pointer;min-height:40px}
.btn:hover{background:var(--ox-d);color:#fff}
.btn.ghost{background:#fff;color:var(--ink);border-color:var(--line2)} .btn.ghost:hover{background:var(--paper)}
.btn.danger{background:var(--bad);border-color:var(--bad)}
.btn.sm{padding:.3rem .65rem;min-height:32px;font-size:.84rem}
.actions{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin-top:1rem}
table.t{width:100%;border-collapse:collapse;font-size:.9rem}
.t th{text-align:left;font-weight:600;color:var(--ink2);font-size:.8rem;padding:.5rem .6rem;border-bottom:2px solid var(--line);white-space:nowrap}
.t td{padding:.55rem .6rem;border-bottom:1px solid var(--line);vertical-align:top}
.t tr:hover td{background:#FAFBFC}
.t .num{text-align:right}
.tw{overflow-x:auto}
.badge{display:inline-block;padding:.1rem .5rem;border-radius:999px;font-size:.76rem;font-weight:600;white-space:nowrap}
.badge.ok{background:var(--ok-t);color:var(--ok)} .badge.res{background:var(--res-t);color:var(--res)} .badge.warn{background:var(--warn-t);color:var(--warn)} .badge.bad{background:var(--bad-t);color:var(--bad)} .badge.neutral{background:#EEF1F3;color:var(--ink2)}
.gchip{display:inline-block;min-width:3.1em;text-align:center;font-weight:800;padding:.05rem .45rem;border-radius:4px;border:1.5px solid var(--ink)}
.gchip.neg{background:var(--ink);color:#fff} .gchip.none{border-style:dashed;color:var(--ink2);border-color:var(--line2)}
.exp small{color:var(--ink2);margin-left:.25rem} .exp.warn{color:var(--warn);font-weight:600} .exp.bad{color:var(--bad);font-weight:700}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:.3rem 1rem;font-size:.92rem;margin:0} .kv dt{color:var(--ink2)} .kv dd{margin:0;font-weight:500}
.filters{display:flex;gap:.75rem;flex-wrap:wrap;align-items:flex-end;margin-bottom:1rem} .filters .fld{min-width:160px}
.empty{padding:2rem;text-align:center;color:var(--ink2);border:1px dashed var(--line2);border-radius:8px;background:#fff}
.pager{display:flex;gap:1rem;align-items:center;justify-content:flex-end;margin-top:.75rem;font-size:.88rem;color:var(--ink2)}
.muted{color:var(--ink2)} .small{font-size:.84rem}
.steps{display:flex;gap:0;margin:0 0 1.25rem;padding:0;list-style:none;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff}
.steps li{flex:1;padding:.6rem .8rem;font-size:.84rem;color:var(--ink2);border-right:1px solid var(--line);position:relative}
.steps li:last-child{border-right:0} .steps li b{display:block;color:var(--ink);font-size:.9rem}
.steps li.done{background:var(--ok-t)} .steps li.done b{color:var(--ok)} .steps li.now{background:var(--res-t)} .steps li.now b{color:var(--res)}
.alert-box{border-left:4px solid var(--bad);background:var(--bad-t);padding:.75rem 1rem;border-radius:0 var(--r) var(--r) 0;margin:.5rem 0}
.warn-box{border-left:4px solid var(--warn);background:var(--warn-t);padding:.75rem 1rem;border-radius:0 var(--r) var(--r) 0;margin:.5rem 0}

/* Signature: stock by blood group */
.groups{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem;margin-bottom:1.25rem}
.gt{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:.9rem 1rem .8rem;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:.4rem;position:relative}
.gt:hover{border-color:var(--line2);color:var(--ink)}
.gt .gname{font-size:2.6rem;font-weight:800;line-height:1;letter-spacing:-.03em}
.gt .gname sup{font-size:1.4rem;font-weight:700;vertical-align:.9em;margin-left:.05em}
.gt.neg .gname sup{color:var(--ox)}
.gt .gtotal{position:absolute;top:.85rem;right:1rem;text-align:right;font-size:.78rem;color:var(--ink2)}
.gt .gtotal b{display:block;font-size:1.6rem;color:var(--ink);line-height:1.1}
.gt.low .gtotal b{color:var(--bad)}
.gt .gparts{display:flex;gap:.4rem;flex-wrap:wrap;font-size:.78rem;color:var(--ink2)}
.gt .gparts span b{color:var(--ink);font-weight:700}
.gt .gbar{height:4px;background:var(--line);border-radius:2px;overflow:hidden} .gt .gbar i{display:block;height:100%;background:var(--ink)}
.gt.low .gbar i{background:var(--bad)}
.stat{display:flex;flex-direction:column} .stat b{font-size:1.5rem;line-height:1.2} .stat span{font-size:.84rem;color:var(--ink2)}
.stat.alert b{color:var(--bad)}
.login{min-height:100vh;display:grid;place-items:center;background:var(--ink)}
.login-card{background:#fff;padding:2rem 2rem 1.5rem;border-radius:10px;width:min(400px,92vw)}
.login-card .brand{padding:0 0 1.25rem;border:0} .login-card .brand strong{color:var(--ink)} .login-card .brand small{color:var(--ink2)}
.login-card .fld{margin-bottom:.8rem}
@media (max-width:980px){
  .shell{grid-template-columns:1fr} .side{position:fixed;inset:0 auto 0 0;width:250px;transform:translateX(-100%);transition:transform .2s;z-index:10}
  .side.open{transform:none} .menu{display:inline-block} .top,.content{padding-left:1rem;padding-right:1rem} .flash{margin:.5rem 1rem}
  .g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))} .groups{grid-template-columns:repeat(2,minmax(0,1fr))} .steps{flex-wrap:wrap} .steps li{flex:1 1 45%}
}
@media (max-width:560px){ .g2,.g3,.g4{grid-template-columns:1fr} .span2,.span3{grid-column:auto} }
@media (prefers-reduced-motion:reduce){ *{transition:none!important} }