/* ═══════════════════════════════════════════
   FTE™ — Fluid & Transfusion Engine v1.0
   ENKI-CLINICAL Suite
   Dr. Amir Fadhel — Anesthesiology & ICU
   ═══════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ══ NIGHT THEME (default vars) ══ */
:root{
  --bg:#080e14;--bg2:#0c1620;--bg3:#101e2c;--bg4:#152838;
  --sf:#111d2a;--sf2:#162636;--sf3:#1c3044;
  --bd:#1a2e42;--bd2:#244060;
  --tx:#dce8f2;--tx2:#94aec4;--tx3:#5c7e9a;
  --ac:#00bcd4;--ac2:#0097a7;--ac3:#006064;
  --red:#ef5350;--redBg:rgba(239,83,80,.08);
  --org:#ff9800;--orgBg:rgba(255,152,0,.08);
  --ylw:#fdd835;--ylwBg:rgba(253,216,53,.08);
  --grn:#4caf50;--grnBg:rgba(76,175,80,.08);
  --blu:#42a5f5;--bluBg:rgba(66,165,245,.08);
  --pur:#ab47bc;
  --hdr-bg:linear-gradient(135deg,#003c43 0%,#001a1e 100%);
  --hdr-bd:var(--ac3);
  --hdr-h1:#fff;
  --r:8px;--r2:12px;--r3:16px;
  --sh:0 2px 12px rgba(0,0,0,.5);
  --mono:'Courier New',monospace;
  --ui:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --tr:all .2s ease;
}

/* ══ DAY THEME ══ */
body.day{
  --bg:#ffffff;--bg2:#f4f5f7;--bg3:#eaedf1;--bg4:#dde2e8;
  --sf:#ffffff;--sf2:#f0f2f5;--sf3:#e6e9ee;
  --bd:#c8cdd4;--bd2:#aab2bc;
  --tx:#000000;--tx2:#333333;--tx3:#555555;
  --ac:#007c8a;--ac2:#005f6b;--ac3:#003c43;
  --red:#d32f2f;--redBg:rgba(211,47,47,.07);
  --org:#e65100;--orgBg:rgba(230,81,0,.07);
  --ylw:#f9a825;--ylwBg:rgba(249,168,37,.07);
  --grn:#2e7d32;--grnBg:rgba(46,125,50,.07);
  --blu:#1565c0;--bluBg:rgba(21,101,192,.07);
  --hdr-bg:linear-gradient(135deg,#007c8a 0%,#004d54 100%);
  --hdr-bd:#005f6b;
  --hdr-h1:#ffffff;
  --sh:0 2px 10px rgba(0,0,0,.1);
}
body.day ::-webkit-scrollbar-track{background:#f4f5f7}
body.day ::-webkit-scrollbar-thumb{background:#aab2bc}
body.day .or-tv{text-shadow:0 0 12px rgba(0,124,138,.18)}

/* ══ BASE ══ */
html{font-size:16px;-webkit-text-size-adjust:100%}
body{font-family:var(--ui);background:var(--bg);color:var(--tx);line-height:1.5;min-height:100vh;min-height:100dvh;overflow-x:hidden;transition:background .25s,color .25s}
input,select,button,textarea{font-family:inherit;font-size:inherit}

/* ── HEADER ── */
.hdr{background:var(--hdr-bg);padding:12px 16px;display:flex;align-items:center;gap:10px;border-bottom:2px solid var(--hdr-bd);position:sticky;top:0;z-index:200;white-space:nowrap}
.hdr-logo{width:36px;height:36px;border-radius:8px;border:2px solid var(--ac);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:13px;color:var(--ac);flex-shrink:0}
.hdr-t{flex:1;min-width:0}
.hdr-t h1{font-size:1.1rem;font-weight:800;color:var(--hdr-h1);letter-spacing:.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hdr-t small{font-size:.65rem;color:var(--ac);letter-spacing:1.5px;text-transform:uppercase;white-space:nowrap}
.hdr-badge{background:var(--ac3);color:var(--ac);font-size:.6rem;padding:3px 8px;border-radius:20px;letter-spacing:1px;text-transform:uppercase;font-weight:700;flex-shrink:0}

/* ── THEME TOGGLE ── */
.theme-toggle{width:36px;height:36px;border-radius:8px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;font-size:16px;transition:var(--tr);color:#fff}
.theme-toggle:active{transform:scale(.9)}

/* ── PHASE BAR ── */
.phase-bar{display:flex;background:var(--bg2);border-bottom:1px solid var(--bd);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.phase-bar::-webkit-scrollbar{display:none}
.phase-btn{flex:none;padding:12px 16px;background:none;border:none;color:var(--tx3);font-size:.78rem;font-weight:700;cursor:pointer;position:relative;white-space:nowrap;transition:var(--tr);letter-spacing:.4px;text-transform:uppercase;min-height:44px}
.phase-btn.active{color:var(--ac)}
.phase-btn.active::after{content:'';position:absolute;bottom:0;left:6px;right:6px;height:2.5px;background:var(--ac);border-radius:2px 2px 0 0}
.phase-btn:active{opacity:.7}

/* ── PANELS ── */
.pnl{display:none;padding:14px 14px 24px;animation:fadeUp .2s ease}
.pnl.active{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}

/* ── CARDS ── */
.card{background:var(--sf);border:1px solid var(--bd);border-radius:var(--r2);margin-bottom:12px;overflow:hidden}
.card-h{padding:10px 14px;background:var(--sf2);border-bottom:1px solid var(--bd);display:flex;align-items:center;gap:6px}
.card-h h3{font-size:.82rem;font-weight:800;color:var(--tx);letter-spacing:.4px;text-transform:uppercase;flex:1;white-space:nowrap}
.badge{font-size:.6rem;padding:3px 7px;border-radius:4px;font-weight:700;letter-spacing:.5px}
.b-blu{background:var(--bluBg);color:var(--blu)}.b-grn{background:var(--grnBg);color:var(--grn)}
.b-red{background:var(--redBg);color:var(--red)}.b-org{background:var(--orgBg);color:var(--org)}
.b-ylw{background:var(--ylwBg);color:var(--ylw)}
.card-b{padding:12px 14px}

/* ── FORMS ── */
.fg{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fg.c3{grid-template-columns:1fr 1fr 1fr}
.fg.c1{grid-template-columns:1fr}
.fi{display:flex;flex-direction:column;gap:3px}
.fi.full{grid-column:1/-1}
.fi label{font-size:.72rem;color:var(--tx2);text-transform:uppercase;letter-spacing:.5px;font-weight:700}
.fi input,.fi select{background:var(--bg2);border:1.5px solid var(--bd);color:var(--tx);padding:10px 12px;border-radius:var(--r);font-size:1rem;transition:var(--tr);-webkit-appearance:none;appearance:none;min-height:44px}
.fi select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23555555' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:30px}
.fi input:focus,.fi select:focus{outline:none;border-color:var(--ac);box-shadow:0 0 0 2px rgba(0,188,212,.15)}
.fi input::placeholder{color:var(--tx3);opacity:.8}
.fi .hint{font-size:.68rem;color:var(--tx3);font-style:italic}
.fi-range{display:flex;align-items:center;gap:8px}
.fi-range input[type=range]{flex:1;accent-color:var(--ac);height:6px}
.fi-range .rv{font-family:var(--mono);font-size:.9rem;color:var(--ac);min-width:36px;text-align:right;font-weight:700}

/* ── CHECKBOXES ── */
.ck-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.ck-grid.c1{grid-template-columns:1fr}
.ck-grid.c3{grid-template-columns:1fr 1fr 1fr}
.ck{display:flex;align-items:center;gap:6px;padding:8px 10px;background:var(--bg2);border:1.5px solid var(--bd);border-radius:var(--r);cursor:pointer;transition:var(--tr);font-size:.8rem;color:var(--tx2);min-height:44px}
.ck:has(input:checked){border-color:var(--ac);background:rgba(0,188,212,.05);color:var(--ac)}
.ck input{display:none}
.ck-box{width:16px;height:16px;border:2px solid var(--bd2);border-radius:3px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:var(--tr);font-size:.6rem}
.ck:has(input:checked) .ck-box{border-color:var(--ac);background:var(--ac);color:#fff}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:12px 18px;border:none;border-radius:var(--r);font-size:.85rem;font-weight:700;cursor:pointer;transition:var(--tr);letter-spacing:.4px;text-transform:uppercase;min-height:44px}
.btn-p{background:linear-gradient(135deg,var(--ac),var(--ac2));color:#fff}
.btn-p:active{transform:scale(.97);filter:brightness(.85)}
.btn-d{background:linear-gradient(135deg,var(--red),#c62828);color:#fff}
.btn-o{background:none;border:1.5px solid var(--bd2);color:var(--tx2)}
.btn-o:active{background:var(--sf2)}
.btn-s{padding:8px 12px;font-size:.78rem}
.btn-w{width:100%}
.btn-grp{display:flex;gap:8px;margin-top:10px}

/* ── DASHBOARD GRID ── */
.dg{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.dc{background:var(--sf);border:1px solid var(--bd);border-radius:var(--r2);padding:10px 12px;text-align:center}
.dc.wide{grid-column:1/-1}
.dc-l{font-size:.65rem;color:var(--tx3);text-transform:uppercase;letter-spacing:.8px;font-weight:700;margin-bottom:2px}
.dc-v{font-size:1.5rem;font-weight:900;font-family:var(--mono);line-height:1.2}
.dc-u{font-size:.65rem;color:var(--tx3);font-weight:400}
.dc-s{font-size:.65rem;color:var(--tx2);margin-top:2px}

/* ── TIMELINE ── */
.tl-row{display:grid;grid-template-columns:48px 1fr 70px 70px;gap:4px;padding:8px 6px;border-bottom:1px solid var(--bd);align-items:center;font-size:.82rem}
.tl-hd{font-size:.68rem;color:var(--tx3);text-transform:uppercase;letter-spacing:.5px;font-weight:700;border-bottom:2px solid var(--bd2)}
.tl-h{font-family:var(--mono);color:var(--ac);font-weight:700}
.tl-d{color:var(--tx2)}
.tl-v{font-family:var(--mono);text-align:right;font-weight:600}
.tl-c{font-family:var(--mono);text-align:right;color:var(--tx3)}

/* ── ALERTS ── */
.al{padding:10px 12px;border-radius:var(--r);margin-bottom:8px;display:flex;align-items:flex-start;gap:8px;font-size:.82rem;line-height:1.5}
.al-i{flex-shrink:0;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.65rem;font-weight:900}
.al-r{background:var(--redBg);border:1px solid rgba(239,83,80,.25);color:var(--red)}.al-r .al-i{background:var(--red);color:#fff}
.al-o{background:var(--orgBg);border:1px solid rgba(255,152,0,.25);color:var(--org)}.al-o .al-i{background:var(--org);color:#fff}
.al-y{background:var(--ylwBg);border:1px solid rgba(253,216,53,.25);color:var(--ylw)}.al-y .al-i{background:var(--ylw);color:#000}
.al-g{background:var(--grnBg);border:1px solid rgba(76,175,80,.25);color:var(--grn)}.al-g .al-i{background:var(--grn);color:#fff}
.al-b{background:var(--bluBg);border:1px solid rgba(66,165,245,.25);color:var(--blu)}.al-b .al-i{background:var(--blu);color:#fff}

/* ── OR TIMER ── */
.or-t{text-align:center;padding:16px;background:linear-gradient(180deg,var(--sf2),var(--sf));border-radius:var(--r2);margin-bottom:12px;border:1px solid var(--bd)}
.or-tv{font-size:2.8rem;font-weight:900;font-family:var(--mono);color:var(--ac);letter-spacing:2px;text-shadow:0 0 18px rgba(0,188,212,.25)}
.or-tl{font-size:.68rem;color:var(--tx3);text-transform:uppercase;letter-spacing:1.5px;margin-top:3px}
.or-c{display:flex;gap:8px;justify-content:center;margin-top:10px}

/* ── NEXT ACTION ── */
.nxt{background:linear-gradient(135deg,rgba(0,188,212,.06),rgba(0,60,67,.1));border:1px solid var(--ac3);border-radius:var(--r2);padding:12px;margin-bottom:12px}
.nxt-l{font-size:.65rem;color:var(--ac);text-transform:uppercase;letter-spacing:1px;font-weight:700;margin-bottom:4px}
.nxt-t{font-size:.9rem;color:var(--tx);font-weight:600;line-height:1.4}
.nxt-s{font-size:.72rem;color:var(--tx3);margin-top:4px}

/* ── RATIONALE BOX ── */
.rat{background:var(--bg3);border-left:3px solid var(--ac3);padding:10px 12px;margin:8px 0;border-radius:0 var(--r) var(--r) 0;font-size:.8rem;color:var(--tx2);line-height:1.5}
.rat strong{color:var(--ac)}

/* ── TABLE ── */
.tb{width:100%;border-collapse:collapse;font-size:.82rem}
.tb th{text-align:left;padding:7px 8px;background:var(--sf2);color:var(--tx3);font-size:.68rem;text-transform:uppercase;letter-spacing:.5px;border-bottom:2px solid var(--bd2)}
.tb td{padding:7px 8px;border-bottom:1px solid var(--bd)}
.tb tr:last-child td{border-bottom:none}
.tb .m{font-family:var(--mono);font-weight:600}

/* ── MTP CYCLE ── */
.mtp-c{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
.mtp-i{flex:1;min-width:65px;background:var(--sf2);border:1px solid var(--bd);border-radius:var(--r);padding:8px;text-align:center}
.mtp-il{font-size:.6rem;color:var(--tx3);text-transform:uppercase;letter-spacing:.5px}
.mtp-iv{font-size:1.05rem;font-weight:800;font-family:var(--mono);margin-top:2px}

/* ── DOC OUTPUT ── */
.doc{background:var(--bg2);border:1px solid var(--bd);border-radius:var(--r);padding:12px;font-family:var(--mono);font-size:.8rem;line-height:1.6;color:var(--tx2);white-space:pre-wrap;word-break:break-word;max-height:65vh;overflow-y:auto}

/* ── PROGRESS BAR ── */
.pb{height:6px;background:var(--bg);border-radius:3px;overflow:hidden;margin:6px 0}
.pf{height:100%;border-radius:3px;transition:width .4s ease}

/* ── RESOURCE TOGGLE ── */
.res-t{display:flex;background:var(--bg2);border:1.5px solid var(--bd);border-radius:var(--r);overflow:hidden;margin-bottom:12px}
.res-o{flex:1;padding:10px;text-align:center;font-size:.78rem;font-weight:700;cursor:pointer;transition:var(--tr);color:var(--tx3);border:none;background:none;text-transform:uppercase;letter-spacing:.3px;min-height:44px}
.res-o.active{background:var(--ac3);color:var(--ac)}

/* ── ACCORDION ── */
.acc{border:1px solid var(--bd);border-radius:var(--r);margin-bottom:8px;overflow:hidden}
.acc-h{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;background:var(--sf2);cursor:pointer;font-size:.85rem;font-weight:700;color:var(--tx);min-height:44px;gap:8px;user-select:none;-webkit-user-select:none}
.acc-h::after{content:'+';font-size:1.1rem;font-weight:400;color:var(--ac);flex-shrink:0;transition:transform .2s}
.acc.open .acc-h::after{content:'\2212'}
.acc-b{display:none;padding:12px 14px;font-size:.85rem;color:var(--tx2);line-height:1.7;background:var(--sf)}
.acc.open .acc-b{display:block}

/* ── ABOUT / CONTACT ── */
.about-title{font-size:1.3rem;font-weight:900;color:var(--ac);text-align:center;margin:8px 0 4px}
.about-sub{font-size:.85rem;color:var(--tx2);text-align:center;margin-bottom:16px;line-height:1.6}
.about-section{margin-bottom:20px}
.about-section h4{font-size:.85rem;font-weight:800;color:var(--tx);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;padding-bottom:6px;border-bottom:2px solid var(--bd)}
.contact-btns{display:flex;flex-direction:column;gap:8px}
.contact-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px;border-radius:var(--r);text-decoration:none;font-size:.9rem;font-weight:700;min-height:48px;transition:var(--tr);text-align:center}
.contact-btn.wa{background:#25d366;color:#fff}
.contact-btn.wa:active{filter:brightness(.85)}
.contact-btn.em{background:var(--ac);color:#fff}
.contact-btn.em:active{filter:brightness(.85)}
.steps-list{padding-left:0;list-style:none;counter-reset:steps}
.steps-list li{counter-increment:steps;padding:8px 10px 8px 40px;position:relative;font-size:.88rem;color:var(--tx2);line-height:1.5;border-bottom:1px solid var(--bd)}
.steps-list li:last-child{border-bottom:none}
.steps-list li::before{content:counter(steps);position:absolute;left:8px;top:8px;width:24px;height:24px;border-radius:50%;background:var(--ac);color:#fff;font-size:.72rem;font-weight:700;display:flex;align-items:center;justify-content:center}

/* ── MISC ── */
.div{height:1px;background:var(--bd);margin:12px 0}
.t-ac{color:var(--ac)}.t-red{color:var(--red)}.t-grn{color:var(--grn)}.t-org{color:var(--org)}.t-blu{color:var(--blu)}.t-mut{color:var(--tx3)}
.tc{text-align:center}.mt6{margin-top:6px}.mt8{margin-top:8px}.mb6{margin-bottom:6px}.mb8{margin-bottom:8px}
.hidden{display:none!important}
.fm{font-family:var(--mono)}
.section-note{font-size:.78rem;color:var(--tx3);padding:8px 10px;background:var(--bg3);border-radius:var(--r);margin-bottom:10px;line-height:1.5;border-left:3px solid var(--ac3)}

::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--bd2);border-radius:4px}

.ftr{text-align:center;padding:20px 16px;font-size:.78rem;color:var(--tx2);border-top:1px solid var(--bd);margin-top:20px;line-height:2}
.ftr strong{color:var(--ac)}
.ftr a{color:var(--ac);text-decoration:none}
.ftr a:hover{text-decoration:underline}

/* ── DISCLAIMER ── */
.discl{background:rgba(255,152,0,.06);border:1px solid rgba(255,152,0,.18);border-radius:var(--r);padding:10px 12px;margin:10px 0;font-size:.78rem;color:var(--org);line-height:1.5;text-align:center}

/* ── AUTOCOMPLETE DROPDOWN ── */
.fi{position:relative}
.ac-drop{display:none;position:absolute;top:100%;left:0;right:0;background:var(--sf);border:1.5px solid var(--ac);border-top:none;border-radius:0 0 var(--r) var(--r);max-height:200px;overflow-y:auto;z-index:100;box-shadow:var(--sh)}
.ac-drop.show{display:block}
.ac-item{padding:10px 12px;font-size:.85rem;color:var(--tx);cursor:pointer;border-bottom:1px solid var(--bd);transition:background .15s}
.ac-item:hover,.ac-item:focus{background:var(--sf2)}
.ac-item:last-child{border-bottom:none}
.ac-abbrev{background:var(--bluBg);font-size:.82rem}

/* ── SPELL SUGGEST ── */
.spell-suggest{display:none;padding:6px 10px;margin-top:3px;border-radius:var(--r);font-size:.78rem;background:var(--bluBg);border:1px solid rgba(66,165,245,.2);color:var(--blu);align-items:center;gap:6px}
.spell-suggest.show{display:flex}
.spell-suggest .spell-btn{background:var(--ac);color:#fff;border:none;border-radius:4px;padding:3px 10px;font-size:.72rem;font-weight:700;cursor:pointer;margin-left:auto;flex-shrink:0}
.spell-suggest .spell-btn:active{filter:brightness(.8)}

/* ── CASE CARDS ── */
.case-card{background:var(--sf);border:1px solid var(--bd);border-radius:var(--r);padding:12px;margin-bottom:8px}
.case-card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;font-size:.88rem}
.case-card-mid{font-size:.78rem;color:var(--tx2);margin-bottom:8px}
.case-card-acts{display:flex;gap:6px;flex-wrap:wrap}

/* ── SAVE BANNER ── */
.case-banner{position:fixed;top:-50px;left:50%;transform:translateX(-50%);background:var(--grn);color:#fff;padding:10px 20px;border-radius:var(--r);font-size:.85rem;font-weight:700;z-index:999;transition:top .3s ease;white-space:nowrap}
.case-banner.show{top:70px}

/* ── SLIDER TICKS ── */
.slider-ticks{display:flex;justify-content:space-between;padding:2px 2px 0;margin-top:-2px}
.slider-ticks span{font-size:.65rem;font-family:var(--mono);color:var(--tx3);text-align:center;min-width:20px}
.slider-ticks span.tick-def{color:var(--ac);font-weight:700}

/* ── RESPONSIVE ── */
@media(max-width:360px){.fg{grid-template-columns:1fr}.dg{grid-template-columns:1fr}.ck-grid{grid-template-columns:1fr}html{font-size:15px}.fg.c3{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.fi input,.fi select{min-height:48px;padding:12px}.btn{min-height:48px}.ck{min-height:48px}.phase-btn{min-height:48px;padding:12px 14px}}
@media(min-width:600px){.dg{grid-template-columns:repeat(4,1fr)}.pnl{padding:16px 20px 28px;max-width:800px;margin:0 auto}}