/* ========= THEME TOKENS ========= */
:root{
  --bg: #0a0f1f; --panel:#0f162e; --card:#111a37; --muted:#9aa4bf; --text:#eaf0ff;
  --border:#1e2a4d; --primary:#5b6bff; --primary-2:#4656ee; --success:#3ecf8e; --danger:#ef476f;
  --shadow: 0 10px 30px rgba(2,12,27,0.35);
}
html[data-theme="light"]{
  --bg:#f7f8fc; --panel:#ffffff; --card:#ffffff; --muted:#667085; --text:#0b1324;
  --border:#e4e7ee; --primary:#4b5dff; --primary-2:#3c4cec; --success:#10b981; --danger:#ef4444;
  --shadow: 0 8px 24px rgba(9,18,40,.08);
}
.tab {
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  padding: 6px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s ease;
}

.tab:hover {
  background: rgba(0,0,0,0.06);
}

.tab.active {
  background: var(--primary);
  border-color: var(--primary);
  color:#fff;
  box-shadow: 0 0 6px rgba(0,0,0,0.12);
}

html[data-theme="light"] .tab {
  background: #f0f2f7;
  color: #334155;
  border-color: #d0d5dd;
}

html[data-theme="light"] .tab:hover {
  background: #e3e7ef;
  color: #1e293b;
}

html[data-theme="light"] .tab.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  box-shadow: 0 0 4px rgba(75, 93, 255, .35);
}

html{color-scheme:light dark}


[hidden]{display:none !important;}

html, body {
  height: 100%;
  margin: 0;
}

.page-wrapper {
  min-height: 100vh;          /* make it fill full screen height */
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;                    /* pushes footer down */
}

footer {
  text-align: center;
  padding: 10px 0;
  color: #aaa;
}

/* ========= BASE ========= */
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:14px/1.5 ui-sans-serif,system-ui,Segoe UI,Roboto,Ubuntu}
a{color:var(--primary);text-decoration:none}
.muted{color:var(--muted)}
.hidden{display:none!important}

/* ========= LAYOUT ========= */
.shell{display:grid;grid-template-columns:260px 1fr;min-height:100vh}
.sidebar{background:var(--panel);border-right:1px solid var(--border);display:flex;flex-direction:column}
.brand{display:flex;align-items:center;gap:10px;padding:18px 16px;border-bottom:1px solid var(--border)}
.brand-logo{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--primary),var(--primary-2));display:grid;place-items:center;font-weight:700;color:#fff}
.brand-text{font-weight:700}
.menu{padding:12px 8px;display:flex;flex-direction:column;gap:4px}
.menu-link{padding:10px 12px;border-radius:10px;color:var(--text);display:flex;align-items:center;gap:10px;border:1px solid transparent}
.menu-link:hover{background:rgba(255,255,255,.04);border-color:var(--border)}
.menu-link.active{background:linear-gradient(135deg, rgba(91,107,255,.15), rgba(70,86,238,.15));border-color:var(--primary)}
.sidebar-footer{margin-top:auto;padding:12px;border-top:1px solid var(--border)}

.main{display:grid;grid-template-rows:auto 1fr auto}
.topbar{display:flex;align-items:center;gap:12px;padding:12px 18px;background:var(--panel);border-bottom:1px solid var(--border)}
.title{font-size:16px;font-weight:700}
.spacer{flex:1}
.content{padding:20px;max-width:1200px;margin-inline:auto;width:100%}
.footer{padding:14px 18px;border-top:1px solid var(--border);background:var(--panel);text-align:center}


/* === User menu (topnav) === */
.user-menu{ position:relative; margin-left:auto; display:flex; align-items:center; }
.user-btn{
  display:flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:12px; border:1px solid var(--border);
  background:transparent; color:var(--text); cursor:pointer;
}
.user-btn:hover{ border-color:var(--primary); }
.user-name{ font-weight:600; }

/* Popover */
.menu-popover{
  position:absolute; right:0; top:calc(100% + 8px);
  width:260px; background:var(--card); border:1px solid var(--border);
  border-radius:14px; box-shadow:var(--shadow); z-index:1000;
}
.menu-head{ padding:12px 14px; border-bottom:1px solid var(--border); }
.menu-title{ font-weight:700; }
.menu-sub{ color:var(--muted); font-size:12px; margin-top:2px; }
.menu-section{ padding:10px; }
.menu-label{ color:var(--muted); font-size:12px; margin:4px 6px 8px; }
.menu-item{
  width:100%; text-align:left; padding:10px 12px; border-radius:10px;
  border:1px solid transparent; background:transparent; color:var(--text); cursor:pointer;
}
.menu-item:hover{ background:rgba(255,255,255,.04); border-color:var(--border); }
.menu-item.danger{ color:var(--danger); }
.menu-sep{ height:1px; background:var(--border); }

/* Keep existing topnav spacing consistent */
.topnav .nav{ margin-left:8px; } /* uses existing topnav styles */

/* ========= CARDS & PANELS ========= */
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow)}
.card + .card{margin-top:16px}
.card-header{padding:14px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}
.card-title{font-weight:700}
.card-body{padding:16px}


/* Center the section titles */
.card-head{
  padding:6px 6px;              /* reduce space */
  border-bottom:1px solid rgba(0,0,0,0.08); /* lighter, subtle line */
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-weight:700;
}

.card-head strong{ font-weight:700; }

/* ========= GRID ========= */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
@media (max-width:1000px){.grid-2,.grid-3{grid-template-columns:1fr}}

/* ========= FORMS ========= */
label{font-size:12px;color:var(--muted)}
input,select,textarea{width:100%;background:transparent;color:var(--text);border:1px solid var(--border);border-radius:12px;padding:10px 12px;outline:0}
input::placeholder,textarea::placeholder{color:var(--muted)}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.stack{display:flex;flex-direction:column;gap:10px}


/* Fix dropdown item color */
select option {
  color: var(--primary);
  background-color: var(--card);
}

/* Optional: improve selected/hover state visibility */
select option:checked,
select option:hover {
  background-color: rgba(91,107,255,0.15);
  color: var(--primary-2);
}

/* ========= BUTTONS ========= */
.btn{border:0;border-radius:12px;padding:10px 14px;cursor:pointer;background:var(--primary);color:#fff;box-shadow:var(--shadow)}
.btn:hover{background:var(--primary-2)}
.btn-ghost{background:transparent;border:1px solid var(--border);color:var(--text)}
.btn-ghost:hover{border-color:var(--primary)}
.btn-danger{background:var(--danger)}
.btn-success{background:var(--success)}
.btn-small{padding:6px 10px;border-radius:10px}

/* ========= TABLES ========= */
.table{width:100%;border-collapse:collapse;font-size:13px;overflow:hidden;border-radius:12px;border:1px solid var(--border)}
.table th{background:rgba(255,255,255,.04);text-align:left;color:var(--muted);font-weight:600}
.table th,.table td{padding:12px;border-bottom:1px solid var(--border)}
.table tr:hover td{background:rgba(255,255,255,.03)}

/* ========= CHIPS/STATUS ========= */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:6px 10px;border-radius:999px;border:1px solid var(--border);background:transparent;color:var(--text);cursor:pointer}
.badge{padding:2px 8px;border-radius:999px;font-size:12px;border:1px solid var(--border)}
.badge.success{background:rgba(16,185,129,.12);border-color:#16a34a;color:#16a34a}
.badge.danger{background:rgba(239,68,68,.12);border-color:#ef4444;color:#ef4444}

/* ========= TOAST ========= */
.toast{position:fixed;right:20px;bottom:20px;background:var(--card);border:1px solid var(--border);padding:12px 14px;border-radius:12px;box-shadow:var(--shadow);z-index:9999}

/* Book layout */
.book-layout{display:grid;grid-template-columns:360px 1fr;gap:16px}
@media (max-width:1000px){.book-layout{grid-template-columns:1fr}}
.book-filters{display:flex;flex-direction:column;gap:16px}
.book-results{min-height:300px}
.day-card{background:var(--card);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);padding:14px 16px;margin-bottom:14px}
.day-head{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-weight:700}
.doc-row{margin:10px 0;padding:10px;border:1px dashed var(--border);border-radius:10px}
.doc-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.slot-row{display:flex;flex-wrap:wrap;gap:8px}


/* Patients toolbar */
.toolbar {
  display:flex; align-items:center; gap:12px;
  padding:12px; background:var(--card); border:1px solid var(--border);
  border-radius:14px;
}
.toolbar .fields {
  display:grid; grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap:12px; flex:1;
}

.toolbar .actions { display:flex; gap:12px; margin-left:auto; }
@media (max-width: 880px){
  .toolbar { flex-direction:column; align-items:stretch; }
  .toolbar .fields { grid-template-columns: 1fr; }
  .toolbar .actions { margin-left:0; justify-content:space-between; }
}

/* Patient two-row grid */
.book-patient{display:flex;flex-direction:column;gap:12px}
.book-patient .row1{
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
}
.book-patient .row2{
  display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center;
}
.book-patient .field input{height:44px}

.book-patient .actions{display:flex; gap:10px; justify-self:end}
.book-patient .actions .btn{height:44px; line-height:42px; padding:0 14px}

/* keep dropdown anchored to Name */
.book-patient .typeahead{position:relative}
.book-patient .typeahead-list{
  position:absolute; left:0; right:0; top:calc(100% + 6px);
  z-index:1000;
}


/* Centered result notification */
.notify{position:fixed;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.45);z-index:10000}
.notify[hidden]{display:none!important}
.notify-card{width:min(420px,95vw);background:var(--card);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);padding:22px;text-align:center}
.big-icon{width:84px;height:84px;border-radius:999px;display:grid;place-items:center;font-size:46px;margin:0 auto 10px}
.big-icon.ok{color:#16a34a;background:rgba(22,163,74,.12);border:1px solid #16a34a}
.big-icon.fail{color:#ef4444;background:rgba(239,68,68,.12);border:1px solid #ef4444}
.notify-text{font-weight:600;margin-bottom:4px}

/* Responsive */
@media (max-width:880px){
  .book-patient .row1{grid-template-columns:1fr}
  .book-patient .row2{grid-template-columns:1fr}
  .book-patient .actions{justify-self:stretch}
}
/* Patient two-row layout */
.book-patient{display:flex;flex-direction:column;gap:12px}
.book-patient .row1,
.book-patient .row2{display:flex;gap:12px;align-items:center}
.book-patient .grow{flex:1}
.book-patient input{height:44px}
@media (max-width:880px){
  .book-patient .row1,.book-patient .row2{flex-direction:column;align-items:stretch}
}
/* Patient two-row grid */
.book-patient{display:flex;flex-direction:column;gap:12px}
.book-patient .row1{
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
}
.book-patient .row2{
  display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center;
}
.book-patient .field input{height:44px}

.book-patient .actions{display:flex; gap:10px; justify-self:end}
.book-patient .actions .btn{height:44px; line-height:42px; padding:0 14px}

/* keep dropdown anchored to Name */
.book-patient .typeahead{position:relative}
.book-patient .typeahead-list{
  position:absolute; left:0; right:0; top:calc(100% + 6px);
  z-index:1000;
}



/* Ensure the anchor container can hold an absolute dropdown */
.field.typeahead,
.field { position: relative; }

/* Typeahead dropdown (theme-aware) */
.typeahead-list{
  position:absolute;
  left:0; right:0; top:calc(100% + 6px);
  max-height:280px; overflow:auto;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:var(--shadow);
  z-index: 2000;
}

.typeahead-item{
  padding:10px 12px;
  display:flex; flex-direction:column;
  gap:4px; cursor:pointer;
}
.typeahead-item:hover{
  background:rgba(255,255,255,.06);
}
.typeahead-id{ font-variant-numeric: tabular-nums; opacity:.8; }



/* Responsive */
@media (max-width:880px){
  .book-patient .row1{grid-template-columns:1fr}
  .book-patient .row2{grid-template-columns:1fr}
  .book-patient .actions{justify-self:stretch}
}

/* keep dropdown anchored nicely to the Name field */
.book-patient .typeahead{position:relative}
.book-patient .typeahead-list{position:absolute;left:0;right:0;top:calc(100% + 6px)}

/* toolbar reused */
.toolbar{display:flex;align-items:center;gap:12px;padding:12px;background:var(--card);border:1px solid var(--border);border-radius:14px}
.toolbar .fields{display:grid;grid-template-columns:repeat(3,minmax(180px,1fr));gap:12px;flex:1}
.toolbar .actions{display:flex;gap:12px;margin-left:auto}
@media (max-width:880px){.toolbar{flex-direction:column;align-items:stretch}.toolbar .fields{grid-template-columns:1fr}.toolbar .actions{margin-left:0;justify-content:space-between}}
.toolbar input{height:40px}.toolbar .btn{height:40px;line-height:38px}

/* typeahead dropdown */
.typeahead{position:relative}
.typeahead-list{position:absolute;inset:auto 0  auto 0;top:calc(100% + 6px);max-height:280px;overflow:auto;background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);z-index:1000}
.typeahead-item{padding:10px 12px;display:flex;gap:8px;align-items:center;cursor:pointer}
.typeahead-item:hover{background:rgba(255,255,255,.06)}
.typeahead-id{font-variant-numeric:tabular-nums;opacity:.75}
.badge{display:inline-block;padding:2px 8px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid var(--border);font-size:12px}

/* modal (if not added before) */
.modal{position:fixed;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.45);z-index:9999}
.modal[hidden]{display:none!important}
.modal-card{width:min(720px,95vw);background:var(--card);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border);font-weight:700}
.modal-body{padding:16px}
.modal-foot{display:flex;gap:8px;justify-content:flex-end;padding:12px 16px;border-top:1px solid var(--border)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-grid .full{grid-column:1/-1}

/* modal */
.modal{position:fixed;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.45);z-index:9999}
.modal[hidden]{display:none!important}
.modal-card{width:min(720px,95vw);background:var(--card);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border);font-weight:700}
.modal-body{padding:16px}
.modal-foot{display:flex;gap:8px;justify-content:flex-end;padding:12px 16px;border-top:1px solid var(--border)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-grid .full{grid-column:1 / -1}

/* Top navigation */
.topnav {
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; gap:10px;
  padding:10px 14px; background:var(--card); border-bottom:1px solid var(--border);
}
.topnav .brand { display:flex; align-items:center; gap:10px; margin-right:12px; }
.topnav .brand .logo { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:var(--primary-700); font-weight:700; }
.topnav .spacer { flex:1 }
.topnav .nav {
  display:flex; gap:8px; flex-wrap:wrap;
}
.topnav .nav a {
  display:inline-block; padding:8px 14px; border-radius:10px;
  border:1px solid var(--border); background:var(--surface);
  text-decoration:none;
}
.topnav .nav a.active { border-color:var(--primary-600); box-shadow:0 0 0 2px rgba(99,102,241,.25) inset; }
.topnav .user { display:flex; gap:8px; align-items:center; }
.topnav .user .muted { opacity:.7; }
.main-nopad { padding:16px; }



/* ========= LOADER ========= */
.loader{position:fixed;inset:0;background:rgba(0,0,0,.35);display:grid;place-items:center;z-index:9990}
.spinner{width:48px;height:48px;border-radius:999px;border:4px solid rgba(255,255,255,.25);border-top-color:#fff;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}