:root{
  --ink:#1A2138;
  --ink-soft:#64708A;
  --bg:#F2F5FC;
  --surface:#FFFFFF;
  --teal-900:#0C1330;
  --teal-800:#141F49;
  --teal-700:#1B2B5E;
  --mint-500:#22C55E;
  --mint-100:#DCFCE7;
  --gold-500:#C99A3B;
  --gold-100:#F7ECD6;
  --coral-600:#EF4444;
  --coral-100:#FEE2E2;
  --amber-500:#F59E0B;
  --amber-100:#FEF3D9;
  --blue-600:#3B6FEB;
  --blue-700:#2E58C4;
  --blue-500:#5B8DEF;
  --blue-100:#E8EFFE;
  --purple-600:#8B5CF6;
  --purple-100:#EFE9FE;
  --line:#E7EAF3;
  --line-soft:#EEF1FA;
  --radius:14px;
  --shadow:0 2px 4px rgba(20,31,73,0.04), 0 10px 24px rgba(20,31,73,0.07);
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}
.mono{font-family:'IBM Plex Mono',monospace;}
.display{font-family:'Space Grotesk',sans-serif;}
svg.lucide{width:1em;height:1em;stroke-width:2;vertical-align:-0.15em;}

/* ---------- Shell ---------- */
.shell{display:flex;height:100vh;height:100dvh;width:100%;overflow:hidden;}
.shell-main{display:flex;flex-direction:column;flex:1;height:100%;min-width:0;overflow:hidden;}
@media (max-width:880px){
  .scrim{display:none;position:fixed;inset:0;background:rgba(11,17,40,.45);z-index:39;}
  .scrim.show{display:block;}
}

/* ---------- Sidebar ---------- */
.sidebar{
  background:linear-gradient(180deg,var(--teal-900),var(--teal-800) 55%,var(--teal-700));
  color:#EAEFFB;
  padding:22px 15px 16px;
  width:280px;
  flex-shrink:0;
  height:100%;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,0.2) transparent;
}
.sidebar::-webkit-scrollbar{width:6px;}
.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.18);border-radius:99px;}
.sidebar nav{flex:1;overflow-y:auto;padding-right:2px;margin-right:-2px;}
@media (max-width:880px){
  .sidebar{
    position:fixed;z-index:40;top:0;left:0;height:100%;width:280px;
    transform:translateX(-100%);transition:transform .25s ease;
  }
  .sidebar.open{transform:translateX(0);box-shadow:8px 0 30px rgba(0,0,0,0.25);}
}
.brand{display:flex;align-items:center;gap:12px;padding:2px 8px 18px;}
.brand-mark{
  width:42px;height:42px;border-radius:12px;background:#fff;
  display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;
  overflow:hidden;color:var(--blue-600);box-shadow:0 4px 10px rgba(0,0,0,0.15);
}
.brand-mark img{width:100%;height:100%;object-fit:cover;}
.brand-mark svg.lucide{width:22px;height:22px;}
.brand-text{line-height:1.15;}
.brand-text .name{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:17px;color:#fff;}
.brand-text .sub{font-size:11.5px;color:#8E9BC9;letter-spacing:.03em;}

.pulse-wrap{padding:0 8px 16px;}
.pulse-wrap svg{width:100%;height:22px;display:block;}
.pulse-line{fill:none;stroke:var(--blue-500);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:210; stroke-dashoffset:210; animation:draw 3s linear infinite;}
@keyframes draw{
  0%{stroke-dashoffset:210;}
  50%{stroke-dashoffset:0;}
  100%{stroke-dashoffset:-210;}
}
@media (prefers-reduced-motion: reduce){ .pulse-line{animation:none;stroke-dashoffset:0;} }

.nav-group{margin-top:6px;}
.nav-label{
  display:flex;align-items:center;justify-content:space-between;gap:6px;
  font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:#7883AD;
  padding:13px 11px 8px;font-weight:700;cursor:pointer;user-select:none;
  border-radius:6px;text-decoration:none;
}
.nav-label:hover{color:#AEB9E0;background:rgba(255,255,255,0.04);}
.nav-item{
  display:flex;align-items:center;gap:11px;padding:10px 13px;border-radius:10px;
  color:#B9C3E8;text-decoration:none;font-size:14.5px;cursor:pointer;
  transition:background .15s ease, color .15s ease;
  border:1px solid transparent;
}
.nav-item:hover{background:rgba(255,255,255,0.06);color:#fff;}
.nav-item.active{background:var(--blue-600);color:#fff;font-weight:600;box-shadow:0 4px 12px rgba(59,111,235,0.35);}
.nav-item.active .nav-arrow{opacity:1;transform:translateX(0);}
.nav-icon{width:20px;text-align:center;font-size:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.nav-arrow{margin-left:auto;opacity:0;transform:translateX(-4px);transition:opacity .15s ease, transform .15s ease;font-size:13px;}

.help-card{
  margin-top:14px;padding:14px;border-radius:14px;flex-shrink:0;
  background:linear-gradient(135deg, rgba(59,111,235,0.9), rgba(91,141,239,0.85));
  display:flex;align-items:center;gap:12px;
}
.help-card .icon{width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,0.2);display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;}
.help-card .t{color:#fff;font-size:13px;font-weight:700;}
.help-card .s{color:rgba(255,255,255,0.85);font-size:11.5px;}

/* ---------- Topbar ---------- */
.topbar{
  display:flex;align-items:center;gap:18px;padding:16px 30px;
  background:var(--surface);border-bottom:1px solid var(--line);
  flex-shrink:0;z-index:20;
}
.menu-btn{background:none;border:1px solid var(--line);border-radius:9px;width:38px;height:38px;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;color:var(--ink-soft);flex-shrink:0;}
.search-box{
  position:relative;flex:1;max-width:460px;display:flex;align-items:center;gap:9px;
  background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px 14px;color:var(--ink-soft);
}
.search-box input{border:none;background:none;outline:none;font:inherit;color:var(--ink);flex:1;}
.search-results{
  display:none;position:absolute;top:calc(100% + 6px);left:0;right:0;max-height:420px;overflow-y:auto;
  background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);z-index:50;
}
.search-results.show{display:block;}
.search-results .sr-group-label{padding:9px 14px 4px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);}
.search-results .sr-item{display:flex;flex-direction:column;gap:1px;padding:9px 14px;cursor:pointer;text-decoration:none;color:inherit;}
.search-results .sr-item:hover{background:var(--bg);}
.search-results .sr-item .sr-title{font-size:14px;font-weight:600;color:var(--ink);}
.search-results .sr-item .sr-sub{font-size:12px;color:var(--ink-soft);}
.search-results .sr-empty{padding:16px 14px;font-size:13px;color:var(--ink-soft);text-align:center;}
.kbd-hint{font-size:11px;font-weight:600;color:var(--ink-soft);background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:2px 7px;flex-shrink:0;}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:18px;}
.bell{position:relative;font-size:19px;cursor:pointer;text-decoration:none;color:var(--ink-soft);display:flex;}
.bell-badge{position:absolute;top:-7px;right:-8px;min-width:16px;height:16px;padding:0 4px;background:var(--coral-600);color:#fff;border-radius:99px;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;border:1.5px solid #fff;}
.who{display:flex;align-items:center;gap:9px;text-decoration:none;color:inherit;}
.who .avatar{width:36px;height:36px;border-radius:50%;background:var(--teal-800);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;}
.who .meta{line-height:1.2;}
.who .meta .n{font-size:14.5px;font-weight:600;}
.who .meta .r{font-size:12.5px;color:var(--ink-soft);}
.who-chevron{color:var(--ink-soft);font-size:12px;}
.logout-btn{
  display:flex;align-items:center;gap:6px;
  padding:9px 14px;border-radius:9px;border:1px solid var(--line);
  background:var(--surface);color:var(--coral-600);font-size:13.5px;font-weight:600;
  text-decoration:none;transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.logout-btn span{font-size:15px;line-height:1;}
.logout-btn:hover{background:var(--coral-600);color:#fff;border-color:var(--coral-600);}

/* ---------- Main ---------- */
main{padding:28px 32px 68px;width:100%;flex:1;overflow-y:auto;}
.shell-main{background-color:var(--bg);
  background-image:
    radial-gradient(680px circle at 100% 0%, rgba(59,111,235,0.07), transparent 60%),
    radial-gradient(520px circle at 0% 15%, rgba(139,92,246,0.05), transparent 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath d='M29 14h6v11h11v6H35v11h-6V31H18v-6h11z' fill='%230C1330' fill-opacity='0.022'/%3E%3Ccircle cx='4' cy='4' r='1.4' fill='%230C1330' fill-opacity='0.04'/%3E%3C/svg%3E");
  background-repeat:no-repeat,no-repeat,repeat;
}
.view-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:20px;flex-wrap:wrap;}
.view-title{font-family:'Space Grotesk',sans-serif;font-size:27px;font-weight:600;margin:0;display:flex;align-items:center;gap:8px;}
.view-sub{font-size:14.5px;color:var(--ink-soft);margin-top:4px;}
.date-badge{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 16px;font-size:13.5px;font-weight:600;color:var(--ink);box-shadow:var(--shadow);}
.date-badge .d{color:var(--ink-soft);font-weight:500;}
.btn{
  border:none;border-radius:9px;padding:11px 18px;font:inherit;font-size:14.5px;font-weight:600;
  cursor:pointer;display:inline-flex;align-items:center;gap:8px;text-decoration:none;
}
.btn-primary{background:var(--blue-600);color:#fff;}
.btn-primary:hover{background:var(--blue-700);}
.btn-ghost{background:var(--surface);color:var(--ink);border:1px solid var(--line);}
.btn-ghost:hover{background:var(--bg);}
.btn-danger{background:var(--coral-100);color:#9A2E24;}
.btn-danger:hover{background:var(--coral-600);color:#fff;}
.btn:disabled{opacity:.4;cursor:not-allowed;}
.btn:disabled:hover{background:inherit;color:inherit;}

.grid{display:grid;gap:18px;}
.g4{grid-template-columns:repeat(4,1fr);}
.g3{grid-template-columns:repeat(3,1fr);}
.g2{grid-template-columns:1.3fr 1fr;}
@media (max-width:1100px){.g4{grid-template-columns:repeat(2,1fr);} .g2{grid-template-columns:1fr;} .g3{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.g4{grid-template-columns:1fr;} .g3{grid-template-columns:1fr;}}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);}
.card h3{margin:0 0 5px;font-size:16px;font-weight:600;display:flex;align-items:center;gap:8px;}
.card .hint{font-size:13px;color:var(--ink-soft);}
.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;}
.card-link{font-size:12.5px;font-weight:600;color:var(--blue-600);text-decoration:none;}
.card-link:hover{text-decoration:underline;}

.stat-card{display:flex;flex-direction:column;gap:6px;}
.stat-top{display:flex;align-items:center;justify-content:space-between;}
.stat-icon{width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;}
.stat-icon svg.lucide{width:20px;height:20px;}
.stat-num{font-family:'Space Grotesk',sans-serif;font-size:30px;font-weight:700;}
.stat-label{font-size:13.5px;color:var(--ink-soft);}
.stat-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:2px;}
.stat-spark-box{width:64px;height:26px;flex-shrink:0;position:relative;}
.stat-spark-box canvas{width:100%!important;height:100%!important;}
.trend{font-size:12.5px;font-weight:700;display:flex;align-items:center;gap:3px;white-space:nowrap;}
.trend.up{color:var(--mint-500);}
.trend.down{color:var(--coral-600);}

table{width:100%;border-collapse:collapse;font-size:14.5px;}
th{
  text-align:left;font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);
  padding:10px 12px;border-bottom:1px solid var(--line);font-weight:600;
}
td{padding:12px 12px;border-bottom:1px solid var(--line-soft);vertical-align:middle;}
tr:last-child td{border-bottom:none;}
tr.row-click{cursor:pointer;}
tr.row-click:hover{background:var(--bg);}

/* Responsive tables: below 640px every table becomes a stack of labeled row-cards
   instead of scrolling horizontally. Labels come from each td's data-label attribute,
   set automatically from the table's own <thead> — see includes/footer.php. */
@media (max-width:640px){
  table{display:block;}
  table thead{display:none;}
  table tbody{display:block;}
  table tr{display:block;background:var(--surface);border:1px solid var(--line);border-radius:10px;margin:10px;overflow:hidden;}
  table td{display:block;position:relative;padding:10px 14px 10px 120px;border-bottom:1px solid var(--line-soft);min-height:20px;}
  table tr td:last-child{border-bottom:none;}
  table td[data-label]:not([data-label=""])::before{
    content:attr(data-label);position:absolute;left:14px;top:10px;width:98px;
    font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);
  }
  table td:not([data-label]),table td[data-label=""]{padding-left:14px;}
}

.pill{display:inline-block;padding:4px 10px;border-radius:99px;font-size:12.5px;font-weight:600;}
.pill-green{background:var(--mint-100);color:#166534;}
.pill-amber{background:var(--amber-100);color:#8A6416;}
.pill-red{background:var(--coral-100);color:#9A2E24;}
.pill-gray{background:var(--line-soft);color:var(--ink-soft);}
.pill-gold{background:var(--gold-100);color:#8A6416;}
.pill-blue{background:var(--blue-100);color:var(--blue-700);}
.pill-purple{background:var(--purple-100);color:#6D28D9;}

.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:18px;flex-wrap:wrap;}
.tab{padding:10px 16px;font-size:14.5px;font-weight:600;color:var(--ink-soft);cursor:pointer;border-bottom:2px solid transparent;text-decoration:none;}
.tab.active{color:var(--blue-600);border-color:var(--blue-600);}

.bed-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:7px;margin-top:12px;}
.bed{
  aspect-ratio:1;border-radius:8px;display:flex;align-items:center;justify-content:center;
  font-family:'IBM Plex Mono',monospace;font-size:11px;color:#fff;cursor:pointer;border:1px solid rgba(0,0,0,0.05);
  transition:transform .1s ease;
}
.bed:hover{transform:scale(1.12);}
.bed.occupied{background:var(--coral-600);}
.bed.available{background:var(--mint-500);}
.bed.cleaning{background:var(--amber-500);}
.legend{display:flex;gap:16px;margin-top:14px;flex-wrap:wrap;}
.legend span{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--ink-soft);}
.legend i{width:11px;height:11px;border-radius:3px;display:inline-block;}

.doctor-card{display:flex;gap:14px;}
.doc-avatar{width:52px;height:52px;border-radius:13px;background:var(--teal-900);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:18px;font-family:'Space Grotesk',sans-serif;flex-shrink:0;}
.doc-meta .name{font-weight:600;font-size:15.5px;}
.doc-meta .spec{font-size:13.5px;color:var(--ink-soft);}
.doc-foot{display:flex;justify-content:space-between;align-items:center;margin-top:12px;font-size:13.5px;}

.bar-row{display:flex;align-items:center;gap:12px;margin-bottom:12px;}
.bar-label{width:120px;font-size:13.5px;color:var(--ink-soft);flex-shrink:0;}
.bar-track{flex:1;height:10px;background:var(--bg);border-radius:99px;overflow:hidden;}
.bar-fill{height:100%;border-radius:99px;background:var(--blue-600);}
.bar-val{width:68px;text-align:right;font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--ink-soft);}

.legend-list{display:flex;flex-direction:column;gap:14px;}
.legend-row{display:flex;align-items:center;gap:10px;}
.legend-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;}
.legend-name{font-size:13.5px;color:var(--ink);flex-shrink:0;width:120px;}
.legend-bar{flex:1;height:7px;background:var(--line-soft);border-radius:99px;overflow:hidden;}
.legend-bar-fill{height:100%;border-radius:99px;}
.legend-val{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink-soft);width:80px;text-align:right;flex-shrink:0;}

.quick-actions{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;}
@media (max-width:900px){.quick-actions{grid-template-columns:repeat(3,1fr);}}
.quick-action{display:flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none;color:var(--ink);padding:12px 6px;border-radius:12px;transition:background .15s ease;}
.quick-action:hover{background:var(--bg);}
.quick-action .icon{width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:19px;}
.quick-action span{font-size:12px;font-weight:600;text-align:center;}

.alert-item{display:flex;align-items:center;gap:12px;padding:12px;border-radius:12px;background:var(--bg);margin-bottom:10px;text-decoration:none;color:inherit;transition:background .15s ease;}
.alert-item:last-child{margin-bottom:0;}
.alert-item:hover{background:var(--line-soft);}
.alert-item .icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:16px;}
.alert-item .txt{flex:1;font-size:13.5px;font-weight:600;}
.alert-item .sub{font-size:12px;color:var(--blue-600);font-weight:600;margin-top:2px;}
.alert-item .arrow{color:var(--ink-soft);flex-shrink:0;}

.promo-card{
  border-radius:var(--radius);padding:26px;color:#fff;position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--teal-800),var(--blue-600));
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.promo-card h3{color:#fff;font-family:'Space Grotesk',sans-serif;font-size:19px;margin:0 0 4px;}
.promo-card p{margin:0;color:rgba(255,255,255,0.85);font-size:13px;max-width:280px;}
.promo-card .deco{font-size:52px;opacity:.9;flex-shrink:0;}

.app-footer{text-align:center;color:var(--ink-soft);font-size:12.5px;padding:24px 0 4px;}

.kanban{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
@media (max-width:900px){.kanban{grid-template-columns:repeat(2,1fr);}}
.kcol{background:var(--bg);border-radius:var(--radius);padding:14px;}
.kcol h4{margin:0 0 12px;font-size:14px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);}
.kcard{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px;margin-bottom:10px;font-size:14px;box-shadow:var(--shadow);}
.kcard .amt{font-family:'IBM Plex Mono',monospace;color:var(--teal-900);font-weight:600;}

.empty{text-align:center;padding:46px 10px;color:var(--ink-soft);}
.empty .e-ico{font-size:32px;margin-bottom:10px;}

/* modal */
.modal-back{position:fixed;inset:0;background:rgba(11,17,40,.5);display:none;align-items:center;justify-content:center;z-index:60;padding:20px;}
.modal-back.show{display:flex;}
.modal{background:var(--surface);border-radius:18px;max-width:460px;width:100%;padding:26px;box-shadow:0 20px 60px rgba(11,17,40,0.3);max-height:90vh;overflow-y:auto;}
.modal h3{margin:0 0 3px;font-family:'Space Grotesk',sans-serif;font-size:19px;}
.modal .close{float:right;cursor:pointer;font-size:20px;color:var(--ink-soft);background:none;border:none;}
.mrow{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--line-soft);font-size:14.5px;gap:10px;}
.mrow:last-child{border-bottom:none;}
.mrow .k{color:var(--ink-soft);flex-shrink:0;}
.mrow .v{font-weight:600;text-align:right;}

.toggle-row{display:flex;align-items:center;justify-content:space-between;padding:13px 0;border-bottom:1px solid var(--line-soft);font-size:15px;}
.toggle-row:last-child{border-bottom:none;}
.toggle{width:42px;height:24px;border-radius:99px;background:var(--line);position:relative;cursor:pointer;flex-shrink:0;border:none;}
.toggle.on{background:var(--mint-500);}
.toggle::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;transition:left .15s ease;}
.toggle.on::after{left:20px;}

.toggle-switch{display:inline-block;position:relative;width:42px;height:24px;flex-shrink:0;}
.toggle-switch input{opacity:0;width:0;height:0;position:absolute;}
.toggle-switch .slider{position:absolute;inset:0;background:var(--line);border-radius:99px;cursor:pointer;transition:background .15s ease;}
.toggle-switch .slider::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;transition:left .15s ease;}
.toggle-switch input:checked + .slider{background:var(--mint-500);}
.toggle-switch input:checked + .slider::after{left:20px;}

.field{margin-bottom:14px;}
.field label{display:block;font-size:13.5px;color:var(--ink-soft);margin-bottom:6px;}
.field input,.field select{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:9px;font:inherit;font-size:15px;background:var(--bg);}
.field input:focus,.field select:focus{outline:2px solid var(--blue-500);outline-offset:1px;}

.flash{border-radius:9px;padding:12px 16px;font-size:14px;margin-bottom:16px;}
.flash-success{background:var(--mint-100);color:#166534;}
.flash-error{background:var(--coral-100);color:#9A2E24;}

::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-thumb{background:#c9d0e8;border-radius:99px;}