/* ===================== Mediplaza HMS UI ===================== */
:root{
  --brand:#0e7c86; --brand-600:#0b6870; --brand-50:#e7f5f6; --brand-100:#c9eaec;
  --navy:#0b1f33; --navy-2:#132c45; --ink:#14212e; --muted:#64748b; --line:#e5eaf0;
  --bg:#f3f6f9; --card:#fff; --accent:#f59e0b;
  --success:#16a34a; --success-50:#e8f7ee; --warning:#d97706; --warning-50:#fff5e6;
  --danger:#dc2626; --danger-50:#fdecec; --info:#0284c7; --info-50:#e6f4fb; --primary:#4f46e5; --primary-50:#eeedfd;
  --radius:14px; --shadow:0 1px 2px rgba(16,24,40,.04),0 4px 16px rgba(16,24,40,.06);
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:'Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--ink);font-size:14px;line-height:1.5}
a{color:var(--brand);text-decoration:none} a:hover{color:var(--brand-600)}
h1,h2,h3,h4{margin:0 0 .4rem;line-height:1.25;font-weight:700}
h1{font-size:1.5rem} h2{font-size:1.2rem} h3{font-size:1.02rem} h4{font-size:.92rem}
.muted{color:var(--muted)} .small{font-size:.82rem} .xs{font-size:.74rem} .bold{font-weight:700} .mono{font-family:ui-monospace,Menlo,Consolas,monospace}
.text-right{text-align:right} .text-center{text-align:center} .nowrap{white-space:nowrap}
.text-success{color:var(--success)} .text-danger{color:var(--danger)} .text-warning{color:var(--warning)}
hr{border:0;border-top:1px solid var(--line);margin:1rem 0}

/* ---------- layout ---------- */
.app{display:flex;min-height:100vh}
.sidebar{width:262px;background:linear-gradient(180deg,var(--navy),#0a1a2b);color:#c7d3df;position:fixed;inset:0 auto 0 0;overflow-y:auto;z-index:40;transition:transform .25s}
.sidebar .brand{display:flex;align-items:center;gap:.7rem;padding:1.15rem 1.2rem;border-bottom:1px solid rgba(255,255,255,.06)}
.brand-logo{width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,#14b8a6,var(--brand));display:grid;place-items:center;color:#fff;font-size:1.2rem;box-shadow:0 6px 16px rgba(20,184,166,.35)}
.brand b{color:#fff;font-size:1.02rem;display:block;letter-spacing:.2px} .brand small{font-size:.7rem;color:#8aa0b5}
.nav{padding:.6rem .7rem 2rem}
.nav-label{font-size:.66rem;text-transform:uppercase;letter-spacing:1.2px;color:#6b8299;padding:1rem .7rem .35rem;font-weight:700}
.nav a{display:flex;align-items:center;gap:.7rem;color:#c7d3df;padding:.55rem .75rem;border-radius:10px;font-weight:500;font-size:.88rem;margin-bottom:1px}
.nav a i{font-size:1.05rem;width:20px;text-align:center;opacity:.85}
.nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.nav a.active{background:linear-gradient(90deg,rgba(20,184,166,.22),rgba(20,184,166,.05));color:#fff;box-shadow:inset 3px 0 0 #2dd4bf}
.nav a .count{margin-left:auto;background:#2dd4bf;color:#06302f;font-size:.68rem;font-weight:800;border-radius:20px;padding:0 .45rem;min-width:20px;text-align:center}
.main{flex:1;margin-left:262px;min-width:0;display:flex;flex-direction:column}
.topbar{height:64px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:1rem;padding:0 1.5rem;position:sticky;top:0;z-index:30}
.topbar .search{flex:1;max-width:460px;position:relative}
.topbar .search input{width:100%;border:1px solid var(--line);background:var(--bg);border-radius:10px;padding:.55rem .8rem .55rem 2.3rem;font:inherit}
.topbar .search i{position:absolute;left:.8rem;top:50%;transform:translateY(-50%);color:var(--muted)}
.search-results{position:absolute;top:110%;left:0;right:0;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);display:none;max-height:360px;overflow:auto;z-index:50}
.search-results a{display:flex;gap:.7rem;align-items:center;padding:.6rem .8rem;color:var(--ink);border-bottom:1px solid var(--line)}
.search-results a:hover{background:var(--brand-50)}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:.8rem}
.icon-btn{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:#fff;display:grid;place-items:center;color:var(--ink);position:relative;cursor:pointer}
.icon-btn .dot{position:absolute;top:6px;right:6px;width:8px;height:8px;background:var(--danger);border-radius:50%;border:2px solid #fff}
.user-chip{display:flex;align-items:center;gap:.6rem;padding:.25rem .5rem .25rem .25rem;border-radius:12px;cursor:pointer;position:relative}
.user-chip:hover{background:var(--bg)}
.avatar{width:36px;height:36px;border-radius:10px;background:var(--brand-100);color:var(--brand-600);display:grid;place-items:center;font-weight:800;font-size:.82rem;flex-shrink:0}
.avatar.lg{width:64px;height:64px;font-size:1.3rem;border-radius:16px}
.menu-toggle{display:none}
.content{padding:1.5rem;flex:1}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:1.2rem;flex-wrap:wrap}
.page-head p{margin:0;color:var(--muted)}
.crumbs{font-size:.78rem;color:var(--muted);margin-bottom:.2rem}
.footer{padding:1rem 1.5rem;color:var(--muted);font-size:.78rem;border-top:1px solid var(--line);background:#fff}
.dropdown{position:absolute;top:110%;right:0;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);min-width:220px;display:none;z-index:60;overflow:hidden}
.dropdown.open{display:block}
.dropdown a{display:flex;gap:.6rem;padding:.6rem .9rem;color:var(--ink)} .dropdown a:hover{background:var(--bg)}
.notif-item{padding:.7rem .9rem;border-bottom:1px solid var(--line);display:block;color:var(--ink)}
.notif-item.unread{background:var(--brand-50)}

/* ---------- grid & cards ---------- */
.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))}
.g-2-1{grid-template-columns:2fr 1fr} .g-1-2{grid-template-columns:1fr 2fr}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.95rem 1.1rem;border-bottom:1px solid var(--line)}
.card-h h3{margin:0;display:flex;align-items:center;gap:.5rem} .card-h h3 i{color:var(--brand)}
.card-b{padding:1.1rem} .card-f{padding:.8rem 1.1rem;border-top:1px solid var(--line);background:#fafbfc;border-radius:0 0 var(--radius) var(--radius)}
.mb{margin-bottom:1rem} .mt{margin-top:1rem} .p0{padding:0!important}
.stat{padding:1.05rem 1.1rem;display:flex;gap:.9rem;align-items:center}
.stat .ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;font-size:1.3rem;flex-shrink:0}
.stat .v{font-size:1.35rem;font-weight:800;line-height:1.1}
.stat .l{color:var(--muted);font-size:.8rem;font-weight:500}
.ic-brand{background:var(--brand-50);color:var(--brand)} .ic-success{background:var(--success-50);color:var(--success)}
.ic-warning{background:var(--warning-50);color:var(--warning)} .ic-danger{background:var(--danger-50);color:var(--danger)}
.ic-info{background:var(--info-50);color:var(--info)} .ic-primary{background:var(--primary-50);color:var(--primary)}
.kv{display:grid;grid-template-columns:140px 1fr;gap:.35rem .8rem;font-size:.88rem} .kv dt{color:var(--muted)} .kv dd{margin:0;font-weight:600}

/* ---------- table ---------- */
.table-wrap{overflow-x:auto}
table.t{width:100%;border-collapse:collapse;font-size:.86rem}
.t th{text-align:left;font-weight:700;color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.6px;padding:.7rem 1rem;background:#f8fafc;border-bottom:1px solid var(--line);white-space:nowrap}
.t td{padding:.72rem 1rem;border-bottom:1px solid var(--line);vertical-align:middle}
.t tr:last-child td{border-bottom:0}
.t tbody tr:hover{background:#fafcfd}
.t tfoot td{font-weight:800;background:#f8fafc}
.person{display:flex;align-items:center;gap:.65rem} .person b{display:block} .person small{color:var(--muted)}

/* ---------- badges & buttons ---------- */
.badge{display:inline-flex;align-items:center;gap:.3rem;padding:.18rem .6rem;border-radius:999px;font-size:.72rem;font-weight:700;white-space:nowrap}
.badge-success{background:var(--success-50);color:var(--success)} .badge-warning{background:var(--warning-50);color:var(--warning)}
.badge-danger{background:var(--danger-50);color:var(--danger)} .badge-info{background:var(--info-50);color:var(--info)}
.badge-primary{background:var(--primary-50);color:var(--primary)} .badge-muted{background:#eef1f4;color:#64748b} .badge-brand{background:var(--brand-50);color:var(--brand)}
.triage-green{background:#dcfce7;color:#15803d}.triage-yellow{background:#fef9c3;color:#a16207}.triage-orange{background:#ffedd5;color:#c2410c}.triage-red{background:#fee2e2;color:#b91c1c}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;border:1px solid transparent;border-radius:10px;padding:.55rem 1rem;font:inherit;font-weight:600;font-size:.86rem;cursor:pointer;background:var(--brand);color:#fff;transition:.15s;white-space:nowrap;text-decoration:none}
.btn:hover{background:var(--brand-600);color:#fff}
.btn-light{background:#fff;color:var(--ink);border-color:var(--line)} .btn-light:hover{background:var(--bg);color:var(--ink)}
.btn-success{background:var(--success)} .btn-success:hover{background:#12813b}
.btn-danger{background:var(--danger)} .btn-danger:hover{background:#b91c1c}
.btn-warning{background:var(--accent);color:#3b2603} .btn-warning:hover{background:#d97706;color:#fff}
.btn-ghost{background:transparent;color:var(--brand)} .btn-ghost:hover{background:var(--brand-50);color:var(--brand)}
.btn-sm{padding:.32rem .65rem;font-size:.78rem;border-radius:8px} .btn-lg{padding:.8rem 1.4rem;font-size:.95rem}
.btn-block{width:100%} .btn:disabled{opacity:.55;cursor:not-allowed}
.actions{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center}

/* ---------- forms ---------- */
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem 1rem}
.form-grid.c3{grid-template-columns:repeat(3,minmax(0,1fr))} .form-grid.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.span-2{grid-column:span 2} .span-3{grid-column:span 3} .span-all{grid-column:1/-1}
.field label{display:block;font-weight:600;font-size:.8rem;margin-bottom:.3rem;color:#334155}
.field .hint{font-size:.74rem;color:var(--muted);margin-top:.2rem}
input[type=text],input[type=password],input[type=email],input[type=number],input[type=date],input[type=time],input[type=tel],input[type=search],input[type=datetime-local],select,textarea{
  width:100%;border:1px solid #d6dde5;border-radius:10px;padding:.58rem .75rem;font:inherit;background:#fff;color:var(--ink);transition:.15s}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px rgba(14,124,134,.14)}
textarea{min-height:80px;resize:vertical}
.input-group{display:flex} .input-group input{border-radius:10px 0 0 10px} .input-group .btn{border-radius:0 10px 10px 0}
.check{display:flex;align-items:center;gap:.5rem;cursor:pointer;font-weight:500}
.check input{width:16px;height:16px;accent-color:var(--brand)}
.chips{display:flex;flex-wrap:wrap;gap:.45rem}
.chip{border:1px solid var(--line);border-radius:999px;padding:.32rem .75rem;cursor:pointer;font-size:.8rem;background:#fff;user-select:none;display:inline-flex;gap:.35rem;align-items:center}
.chip input{display:none} .chip:has(input:checked){background:var(--brand);border-color:var(--brand);color:#fff}
.seg{display:inline-flex;background:var(--bg);border:1px solid var(--line);border-radius:11px;padding:3px}
.seg label{padding:.4rem .9rem;border-radius:8px;cursor:pointer;font-weight:600;font-size:.82rem;color:var(--muted)}
.seg input{display:none} .seg label:has(input:checked){background:#fff;color:var(--brand);box-shadow:0 1px 3px rgba(0,0,0,.08)}

/* ---------- alerts ---------- */
.alert{padding:.8rem 1rem;border-radius:12px;margin-bottom:1rem;display:flex;gap:.6rem;align-items:flex-start;font-weight:500;border:1px solid}
.alert-success{background:var(--success-50);color:#14532d;border-color:#bbf7d0} .alert-danger{background:var(--danger-50);color:#7f1d1d;border-color:#fecaca}
.alert-warning{background:var(--warning-50);color:#78350f;border-color:#fde68a} .alert-info{background:var(--info-50);color:#0c4a6e;border-color:#bae6fd}

/* ---------- tabs ---------- */
.tabs{display:flex;gap:.2rem;border-bottom:1px solid var(--line);margin-bottom:1rem;overflow-x:auto}
.tabs a,.tabs button{padding:.65rem 1rem;color:var(--muted);font-weight:600;border:0;background:none;border-bottom:2px solid transparent;cursor:pointer;font:inherit;font-weight:600;white-space:nowrap}
.tabs a.active,.tabs button.active{color:var(--brand);border-bottom-color:var(--brand)}
.tab-pane{display:none} .tab-pane.active{display:block}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;background:rgba(11,31,51,.5);display:none;align-items:flex-start;justify-content:center;z-index:100;padding:5vh 1rem;overflow-y:auto;backdrop-filter:blur(2px)}
.modal.open{display:flex}
.modal-box{background:#fff;border-radius:16px;width:100%;max-width:560px;box-shadow:0 20px 50px rgba(0,0,0,.25);animation:pop .18s ease}
.modal-box.lg{max-width:820px}
@keyframes pop{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}

/* ---------- progress tracker ---------- */
.tracker{display:flex;gap:0;overflow-x:auto;padding:.5rem 0}
.tracker .step{flex:1;min-width:92px;text-align:center;position:relative}
.tracker .step::before{content:'';position:absolute;top:17px;left:-50%;right:50%;height:3px;background:var(--line);z-index:0}
.tracker .step:first-child::before{display:none}
.tracker .dot{width:36px;height:36px;border-radius:50%;background:#fff;border:3px solid var(--line);display:grid;place-items:center;margin:0 auto .35rem;position:relative;z-index:1;color:var(--muted);font-size:.95rem}
.tracker .lbl{font-size:.74rem;font-weight:600;color:var(--muted)}
.tracker .step.done .dot{background:var(--success);border-color:var(--success);color:#fff}
.tracker .step.done::before,.tracker .step.current::before{background:var(--success)}
.tracker .step.current .dot{border-color:var(--brand);color:var(--brand);box-shadow:0 0 0 6px var(--brand-50);animation:pulse 1.6s infinite}
.tracker .step.current .lbl{color:var(--brand)}
@keyframes pulse{50%{box-shadow:0 0 0 10px rgba(14,124,134,.06)}}

/* ---------- timeline ---------- */
.timeline{list-style:none;padding:0;margin:0;position:relative}
.timeline::before{content:'';position:absolute;left:11px;top:4px;bottom:4px;width:2px;background:var(--line)}
.timeline li{position:relative;padding:0 0 1rem 2.1rem}
.timeline li::before{content:'';position:absolute;left:5px;top:5px;width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid var(--brand)}

/* ---------- queue board ---------- */
.queue-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.qcol{background:#eef2f6;border-radius:14px;padding:.7rem}
.qcol h4{display:flex;justify-content:space-between;align-items:center;padding:.2rem .3rem .6rem;margin:0}
.qcard{background:#fff;border-radius:11px;padding:.65rem .75rem;margin-bottom:.5rem;border:1px solid var(--line);display:block;color:var(--ink)}
.qcard:hover{border-color:var(--brand)}
.token{font-weight:800;color:var(--brand);font-size:.95rem}

/* ---------- misc ---------- */
.empty{text-align:center;padding:3rem 1rem;color:var(--muted)} .empty i{font-size:2.4rem;color:#cbd5e1;display:block;margin-bottom:.5rem}
.list-row{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.7rem 0;border-bottom:1px dashed var(--line)} .list-row:last-child{border-bottom:0}
.pill-total{background:var(--navy);color:#fff;border-radius:14px;padding:1rem 1.2rem}
.pill-total .v{font-size:1.6rem;font-weight:800}
.bed{border:1px solid var(--line);border-radius:12px;padding:.7rem;text-align:center;background:#fff}
.bed i{font-size:1.5rem} .bed.available i{color:var(--success)} .bed.occupied{background:var(--danger-50);border-color:#fecaca} .bed.occupied i{color:var(--danger)}
.bed.cleaning i,.bed.maintenance i{color:var(--warning)}
.chart-box{position:relative;height:280px}
.toolbar{display:flex;gap:.6rem;flex-wrap:wrap;align-items:flex-end;margin-bottom:1rem}
.toolbar .field{min-width:150px}
.result-flag{font-weight:800} .flag-high,.flag-critical,.flag-positive{color:var(--danger)} .flag-low{color:var(--info)}
.label-card{width:62mm;border:1.5px dashed #94a3b8;border-radius:8px;padding:8px;display:inline-flex;gap:8px;align-items:center;margin:4px;background:#fff;page-break-inside:avoid}
.label-card .qr canvas,.label-card .qr img{width:70px!important;height:70px!important}
.label-card b{font-size:12px} .label-card div{font-size:10px;line-height:1.3}

/* ---------- auth & public ---------- */
.auth-wrap{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr}
.auth-side{background:radial-gradient(1200px 500px at -10% -10%,#14b8a6 0,transparent 60%),linear-gradient(160deg,var(--navy),#06223a);color:#fff;padding:3rem;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.auth-side h1{font-size:2.3rem;line-height:1.15;max-width:480px}
.auth-side .feat{display:flex;gap:.8rem;align-items:flex-start;margin:.9rem 0;color:#cfe3ee} .auth-side .feat i{color:#2dd4bf;font-size:1.2rem}
.auth-form{display:flex;align-items:center;justify-content:center;padding:2rem;background:#fff}
.auth-form .box{width:100%;max-width:400px}
.public-nav{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.hero{background:radial-gradient(900px 400px at 85% 0,rgba(20,184,166,.25),transparent),linear-gradient(160deg,var(--navy),#0a2e48);color:#fff;padding:4rem 1.5rem}
.hero h1{font-size:2.6rem;max-width:640px}
.container{max-width:1140px;margin:0 auto}

/* ---------- patient portal ---------- */
.portal .sidebar{background:linear-gradient(180deg,#073b40,#06262b)}
.bottom-nav{display:none}

/* ---------- responsive ---------- */
@media (max-width:1100px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){
  .sidebar{transform:translateX(-100%)} body.nav-open .sidebar{transform:none;box-shadow:0 0 60px rgba(0,0,0,.4)}
  .main{margin-left:0} .menu-toggle{display:grid}
  .g2,.g3,.g-2-1,.g-1-2{grid-template-columns:1fr}
  .auth-wrap{grid-template-columns:1fr} .auth-side{display:none}
  .user-chip .who{display:none}
}
@media (max-width:640px){
  .content{padding:1rem} .g4{grid-template-columns:1fr 1fr} .form-grid,.form-grid.c3,.form-grid.c4{grid-template-columns:1fr} .span-2,.span-3{grid-column:auto}
  .topbar{padding:0 1rem} .topbar .search{display:none} .kv{grid-template-columns:110px 1fr} .hero h1{font-size:1.9rem}
  .portal .content{padding-bottom:5rem}
  .portal .bottom-nav{display:flex;position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--line);z-index:40;justify-content:space-around;padding:.4rem 0}
  .portal .bottom-nav a{display:flex;flex-direction:column;align-items:center;font-size:.68rem;color:var(--muted);font-weight:600} .portal .bottom-nav a i{font-size:1.25rem}
  .portal .bottom-nav a.active{color:var(--brand)}
  .tracker .step{min-width:56px} .tracker .dot{width:30px;height:30px;font-size:.8rem} .tracker .step::before{top:14px} .tracker .lbl{font-size:.64rem}
}
@media print{
  .sidebar,.topbar,.footer,.no-print,.btn,.bottom-nav{display:none!important}
  .main{margin:0} .content{padding:0} body{background:#fff} .card{box-shadow:none;border:0}
}