:root{
  --bg0:#05070b;
  --bg1:#070b14;
  --card: rgba(255,255,255,.08);
  --card2: rgba(255,255,255,.06);
  --stroke: rgba(255,255,255,.12);
  --stroke2: rgba(255,255,255,.18);
  --text:#eaf0ff;
  --muted: rgba(234,240,255,.72);
  --muted2: rgba(234,240,255,.55);

  --accent:#00d4ff;
  --accent2:#7c3aed;
  --ok:#22c55e;
  --warn:#f59e0b;
  --bad:#ef4444;

  --shadow: 0 20px 60px rgba(0,0,0,.50);
  --r:22px;
  --r2:16px;
  --pad:16px;
  --pad2:12px;

  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}

html,body{height:100%; width:100%;}
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background:
    radial-gradient(1200px 900px at 15% 10%, rgba(0,212,255,.18), transparent 55%),
    radial-gradient(900px 700px at 80% 15%, rgba(124,58,237,.16), transparent 60%),
    radial-gradient(1200px 900px at 50% 110%, rgba(34,197,94,.10), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  overflow:hidden; /* IMPORTANT: prevent “shrink” feel */
}

a{color:inherit;text-decoration:none;}
*{box-sizing:border-box;}

[data-theme="glass-dark"]{ --accent:#00d4ff; --accent2:#7c3aed; }
[data-theme="glass-blue"]{ --accent:#60a5fa; --accent2:#22c55e; }
[data-theme="neo-violet"]{ --accent:#a78bfa; --accent2:#00d4ff; }
[data-theme="balochistan-official"]{ --accent:#0ea5e9; --accent2:#16a34a; }
[data-theme="glass-light"]{
  --bg0:#f6f8ff;
  --bg1:#e9efff;
  --card: rgba(12,18,40,.06);
  --card2: rgba(12,18,40,.05);
  --stroke: rgba(12,18,40,.14);
  --stroke2: rgba(12,18,40,.18);
  --text:#0b1220;
  --muted: rgba(11,18,32,.72);
  --muted2: rgba(11,18,32,.55);
  --accent:#2563eb;
  --accent2:#7c3aed;
  --shadow: 0 20px 60px rgba(0,0,0,.18);
}
[data-theme="pure-black"]{
  --bg0:#000000;
  --bg1:#000000;
  --card: rgba(255,255,255,.06);
  --card2: rgba(255,255,255,.05);
  --stroke: rgba(255,255,255,.14);
  --stroke2: rgba(255,255,255,.18);
  --text:#ffffff;
  --muted: rgba(255,255,255,.72);
  --muted2: rgba(255,255,255,.55);
  --accent:#00d4ff;
  --accent2:#a78bfa;
  --shadow: 0 24px 70px rgba(0,0,0,.65);
}



/* ---- Extra Professional Themes (v5.1.2) ---- */
[data-theme="midnight"]{
  --bg0:#050812;
  --bg1:#070b1f;
  --accent:#22d3ee;
  --accent2:#a78bfa;
}
[data-theme="aurora"]{
  --bg0:#031013;
  --bg1:#031b1d;
  --accent:#34d399;
  --accent2:#60a5fa;
}
[data-theme="teal-mint"]{
  --bg0:#051418;
  --bg1:#062226;
  --accent:#2dd4bf;
  --accent2:#a3e635;
}
[data-theme="coral-sunset"]{
  --bg0:#12060a;
  --bg1:#1a0a11;
  --accent:#fb7185;
  --accent2:#f59e0b;
}
[data-theme="royal-indigo"]{
  --bg0:#060616;
  --bg1:#0b0a23;
  --accent:#6366f1;
  --accent2:#22d3ee;
}
[data-theme="emerald-classic"]{
  --bg0:#04120a;
  --bg1:#061812;
  --accent:#22c55e;
  --accent2:#10b981;
}
[data-theme="steel-blue"]{
  --bg0:#05070f;
  --bg1:#070a18;
  --accent:#60a5fa;
  --accent2:#f472b6;
}
[data-theme="rosewood"]{
  --bg0:#12060a;
  --bg1:#1b0a10;
  --accent:#f43f5e;
  --accent2:#a78bfa;
}
[data-theme="neon-night"]{
  --bg0:#00020a;
  --bg1:#020024;
  --card: rgba(255,255,255,.07);
  --card2: rgba(255,255,255,.05);
  --stroke: rgba(255,255,255,.14);
  --stroke2: rgba(255,255,255,.20);
  --text:#ecfeff;
  --muted: rgba(236,254,255,.72);
  --muted2: rgba(236,254,255,.55);
  --accent:#00e5ff;
  --accent2:#ff4dff;
  --shadow: 0 24px 70px rgba(0,0,0,.70);
}
[data-theme="desert-sand"]{
  --bg0:#fff7ed;
  --bg1:#ffedd5;
  --card: rgba(12,18,40,.06);
  --card2: rgba(12,18,40,.05);
  --stroke: rgba(12,18,40,.14);
  --stroke2: rgba(12,18,40,.18);
  --text:#0b1220;
  --muted: rgba(11,18,32,.72);
  --muted2: rgba(11,18,32,.55);
  --accent:#ea580c;
  --accent2:#16a34a;
  --shadow: 0 20px 60px rgba(0,0,0,.18);
}

[data-theme="sunrise-gold"]{
  --bg0:#08070b;
  --bg1:#120f18;
  --accent:#f59e0b;
  --accent2:#fb7185;
}
[data-theme="ocean-breeze"]{
  --bg0:#041018;
  --bg1:#061a24;
  --accent:#22d3ee;
  --accent2:#3b82f6;
}
[data-theme="forest-night"]{
  --bg0:#050b08;
  --bg1:#07110c;
  --accent:#22c55e;
  --accent2:#84cc16;
}
[data-theme="crimson-luxe"]{
  --bg0:#0b0506;
  --bg1:#140708;
  --accent:#ef4444;
  --accent2:#a855f7;
}

.glass{
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  border:1px solid var(--stroke);
  border-radius:var(--r);
  box-shadow:var(--shadow);
  backdrop-filter: blur(14px);
}

.card{
  background: var(--card);
  border:1px solid var(--stroke);
  border-radius:var(--r2);
  padding:var(--pad);
  box-shadow: 0 16px 45px rgba(0,0,0,.35);
  backdrop-filter: blur(12px);
}

.btn{
  border:1px solid var(--stroke2);
  background: rgba(255,255,255,.08);
  color:var(--text);
  padding:10px 14px;
  border-radius:14px;
  cursor:pointer;
  transition:transform .12s ease, background .12s ease, border .12s ease;
  font-weight:800;
  letter-spacing:.2px;
}
.btn:hover{transform:translateY(-1px); background:rgba(255,255,255,.12);}
.btn:active{transform:translateY(0px);}
.btn.primary{
  background: linear-gradient(135deg, rgba(0,212,255,.28), rgba(124,58,237,.24));
  border-color: rgba(0,212,255,.30);
}
.btn.ok{border-color: rgba(34,197,94,.35); background: rgba(34,197,94,.14);}
.btn.warn{border-color: rgba(245,158,11,.35); background: rgba(245,158,11,.14);}
.btn.bad{border-color: rgba(239,68,68,.35); background: rgba(239,68,68,.14);}

.in, select.in, textarea.in{
  width:100%;
  background: rgba(0,0,0,.22);
  border:1px solid var(--stroke);
  color:var(--text);
  padding:12px 14px;
  border-radius:14px;
  outline:none;
}
.in:focus{border-color: rgba(0,212,255,.55); box-shadow: 0 0 0 3px rgba(0,212,255,.12);}
.lbl{display:block; font-size:12px; color:var(--muted); margin:10px 0 6px;}
textarea.in{min-height:90px; resize:vertical;}

/* Password / PIN show-hide (reveal) */
.revealWrap{ position:relative; }
.revealWrap .in{ padding-right:52px; }
.revealBtn{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  width:38px; height:38px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: var(--text);
  display:grid; place-items:center;
  cursor:pointer;
  transition: background .12s ease, transform .12s ease, border .12s ease;
}
.revealBtn:hover{ background: rgba(255,255,255,.10); transform: translateY(calc(-50% - 1px)); }
.revealBtn:active{ transform: translateY(-50%); }
.revealBtn svg{ width:18px; height:18px; opacity:.9; }


.row{display:flex; gap:12px; align-items:center; flex-wrap:wrap;}
.rowBetween{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;}
.grid2{display:grid; grid-template-columns: 1fr 1fr; gap:12px;}
.grid3{display:grid; grid-template-columns: 1fr 1fr 1fr; gap:12px;}
.grid4{display:grid; grid-template-columns: repeat(4, 1fr); gap:12px;}
@media (max-width:1100px){ .grid4{grid-template-columns:repeat(2,1fr);} }
@media (max-width:820px){ .grid2,.grid3,.grid4{grid-template-columns:1fr;} }

.muted{color:var(--muted);}
.muted2{color:var(--muted2);}
.tiny{font-size:12px; color:var(--muted);}
.h1{font-size:26px; font-weight:1000; letter-spacing:.2px;}
.h2{font-size:18px; font-weight:1000;}
.h3{font-size:12px; font-weight:900; color:var(--muted); text-transform:uppercase; letter-spacing:.6px;}

.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.06);
  font-size:12px; color:var(--muted);
}
.dot{width:8px;height:8px;border-radius:99px;background:var(--accent); box-shadow:0 0 16px rgba(0,212,255,.45);}

.appShell{
  display:grid;
  grid-template-columns: 310px 1fr;
  height:calc(var(--vh, 1vh) * 100);
  width:100%;
  max-width:100%;
}
@media (max-width:1100px){ .appShell{grid-template-columns:1fr;} }


/* Sidebar collapse / open (App Shell) */
.sideFab{
  position:fixed;
  left:16px;
  top:16px;
  width:48px;
  height:48px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 55px rgba(0,0,0,.40);
  display:grid;
  place-items:center;
  cursor:pointer;
  z-index:100003;
}
.sideFab:hover{background: rgba(255,255,255,.10); transform: translateY(-1px);}
.sideFab svg{width:24px;height:24px; color: rgba(234,240,255,.92);}

body.sideClosed .appShell{ grid-template-columns: 0 1fr !important; }
body.sideClosed .side{
  width:0 !important;
  padding:0 !important;
  overflow:hidden !important;
}
body.sideClosed .side .glass{ display:none !important; }

@media (max-width:1100px){
  /* On small screens, sidebar becomes an overlay style */
  body:not(.sideClosed) .side{
    position:fixed;
    left:0;
    top:0;
    bottom:0;
    width:min(310px, 86vw);
    z-index:100002;
    background: transparent;
  }
  body:not(.sideClosed) .main{
    filter: none;
  }
}


.side{
  height:calc(var(--vh, 1vh) * 100);
  padding:16px;
  /* Always reserve scrollbar width so layout doesn't "shrink/grow" on navigation */
  overflow-x:hidden;
  overflow-y:scroll;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}
@media (max-width:1100px){ .side{height:auto;} }

.main{
  height:calc(var(--vh, 1vh) * 100);
  /* Keep scrolling stable across pages (prevents width jump) */
  overflow-x:hidden;
  overflow-y:scroll;
  padding:18px;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}

/* v50.1 patch: smoother navigation fade */
.pageFade{
  position:fixed;
  inset:0;
  z-index:9999;
  pointer-events:none;
  opacity:0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  transition: opacity .18s ease;
}
.pageFade.show{ opacity:1; }

.brand{display:flex; gap:12px; align-items:center; padding:14px;}
.logo{
  width:44px;height:44px;border-radius:14px;
  background: linear-gradient(135deg, rgba(0,212,255,.45), rgba(124,58,237,.40));
  border:1px solid rgba(255,255,255,.18);
  display:grid;place-items:center;
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  font-weight:1000;
}
.nav{margin-top:10px; display:grid; gap:8px; padding:0 14px 14px;}

.navSection{
  margin: 10px 0 6px;
  padding: 0 6px;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(234,240,255,.55);
  user-select: none;
}
.nav a{
  padding:12px 12px;
  border-radius:16px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.05);
  font-weight:900;
  color:var(--muted);
  display:flex; align-items:center; justify-content:space-between;
}

.nav a .badge{ flex-shrink:0; }

.navLeft{display:flex;align-items:center;gap:10px;min-width:0;}
.navTxt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.navI{display:inline-flex;width:18px;height:18px;opacity:.92;}
.navI svg{width:18px;height:18px;}
.nav a.active{
  background: linear-gradient(135deg, rgba(0,212,255,.18), rgba(124,58,237,.14));
  border-color: rgba(0,212,255,.30);
  color:var(--text);
}
.nav a:hover{background: rgba(255,255,255,.10); color:var(--text);}

.kpi{
  padding:14px;
  border-radius:18px;
  border:1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.05));
}
.kpi .n{font-size:22px; font-weight:1000;}
.kpi .t{font-size:12px; color:var(--muted); font-weight:900;}

.tableWrap{
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  border-radius:18px;
  overflow:hidden;
}
table{
  width:100%;
  border-collapse:collapse;
}
th,td{
  font-size:12px;
  padding:12px 10px;
  border-bottom:1px solid rgba(255,255,255,.08);
  color:var(--text);
}
th{color:var(--muted); font-weight:900; text-transform:uppercase; letter-spacing:.6px; font-size:11px;}
tr:hover td{background: rgba(255,255,255,.03);}

.progress{
  height:10px;
  border-radius:999px;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
  overflow:hidden;
}
.progress > div{
  height:100%;
  background: linear-gradient(90deg, rgba(0,212,255,.65), rgba(124,58,237,.55));
  width:0%;
}

.toastWrap{
  position:fixed; right:16px; bottom:16px;
  display:grid; gap:10px;
  z-index:9999;
}
.toast{
  padding:12px 14px;
  border-radius:16px;
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 45px rgba(0,0,0,.40);
  max-width:360px;
}

.lockOverlay{
  position:fixed; inset:0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  z-index:10000;
  display:grid;
  place-items:center;
  padding:18px;
}
.lockOverlay[hidden]{ display:none !important; }
.lockCard{ width:min(520px, 100%); }

/* MODAL (Applications) */
.modalOverlay{
  position:fixed; inset:0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  z-index:9000;
  display:none;
  padding:18px;
}
.modalOverlay.show{display:grid; place-items:center;}
.modal{
  width:min(1060px, 96vw);
  height:min(92vh, 900px);
  overflow:auto;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
  padding:16px;
}
.modalTop{
  display:flex; justify-content:space-between; align-items:center;
  gap:12px;
  position:sticky; top:0;
  background: rgba(5,7,11,.65);
  border:1px solid rgba(255,255,255,.08);
  padding:12px;
  border-radius:16px;
  backdrop-filter: blur(12px);
  z-index:2;
}
.modalActionsSticky{
  position:sticky; bottom:0;
  padding:12px;
  background: rgba(5,7,11,.65);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  backdrop-filter: blur(12px);
  display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap;
}

/* SKY full screen canvas */
.skyWrap{
  position:relative;
  height:calc(var(--vh, 1vh) * 100);
  width:100%;
  max-width:100%;
  overflow:hidden;
}
.skyCanvas{
  position:absolute; inset:0;
  width:100%; height:100%;
}
.skyHud{
  position:absolute; left:16px; top:16px;
  display:flex; gap:10px; flex-wrap:wrap;
  z-index:5;
}
.skyInfo{
  position:absolute; right:16px; top:16px;
  width:min(360px, 92vw);
  z-index:5;
}



/* ---------- Shared components missing in v5.0 drop ---------- */
.topbar{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:12px;
}

/* modalBack used by Tasks/Email/Calendar/Hospitals */
.modalBack{
  position:fixed; inset:0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  z-index:9500;
  display:none;
  padding:18px;
}
.modalBack.show{display:grid; place-items:center;}
.modalBack .modal{
  width:min(980px, 96vw);
  max-height:88vh;
  overflow:auto;
}

/* Small buttons */
.btn.small{padding:8px 10px; border-radius:12px; font-size:12px;}

/* Fullscreen prompt (global) */
.fsPrompt{
  position:fixed; top:14px; left:50%; transform:translateX(-50%);
  z-index:100000;
  padding:10px 12px;
  border-radius:999px;
  background: rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.18);
  display:none;
  align-items:center; gap:10px;
  backdrop-filter: blur(10px);
}
.fsPrompt.show{display:flex;}

/* ---------- Gear menu ---------- */
.gearFab{
  position:fixed;
  right:16px;
  top:16px;
  width:48px; height:48px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 55px rgba(0,0,0,.40);
  display:grid; place-items:center;
  cursor:pointer;
  z-index:100001;
}
.gearFab:hover{background: rgba(255,255,255,.10); transform: translateY(-1px);}
.gearFab svg{width:24px;height:24px; color: rgba(234,240,255,.92);}

.gearMenu{
  position:fixed;
  right:16px;
  top:72px;
  width:min(360px, 92vw);
  border-radius:22px;
  border:1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  backdrop-filter: blur(14px);
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
  padding:14px;
  display:none;
  z-index:100001;
}
.gearMenu.show{display:block;}
.gearTitle{font-weight:1000; font-size:14px; margin-bottom:10px;}
.gearRow{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px; border:1px solid rgba(255,255,255,.10); border-radius:18px; background: rgba(0,0,0,.10);}
.gearLabel{font-weight:900; font-size:12px;}
.gearHint{font-size:11px; color: var(--muted); margin-top:4px;}
.gearBtns{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px;}
.gearFoot{margin-top:10px; opacity:.9;}

/* ---------- Zoom overlay ---------- */
.zoomable{cursor:default;}
.zoomBtn{
  position:absolute;
  right:12px;
  bottom:12px;
  width:40px;
  height:40px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.25);
  backdrop-filter: blur(12px);
  display:grid;
  place-items:center;
  cursor:pointer;
  opacity:0;
  transform: translateY(2px);
  transition: .15s ease;
}
.zoomBtn svg{width:18px;height:18px; color: rgba(234,240,255,.95);}
.zoomable:hover .zoomBtn{opacity:1; transform: translateY(0);}

.zoomOverlay{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  display:none;
  z-index:100002;
  padding:18px;
}
.zoomOverlay.show{display:grid; place-items:center;}
.zoomCard{
  width:min(1200px, 96vw);
  max-height: 92vh;
  border-radius:26px;
  border:1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  box-shadow: 0 40px 120px rgba(0,0,0,.65);
  overflow:hidden;
}
.zoomHead{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 14px 12px;
  border-bottom:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.12);
}
.zoomTitle{font-weight:1000; font-size:14px;}
.zoomBtns{display:flex; gap:10px;}
.zoomBody{padding:14px; overflow:auto; max-height: calc(92vh - 64px);}
.zoomClone{width:100%;}

/* ---------- Command palette (Ctrl+K) ---------- */
.cmdkOverlay{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  display:none;
  z-index:100003;
  padding:18px;
}
.cmdkOverlay.show{display:grid; place-items:center;}
.cmdkCard{
  width:min(720px, 96vw);
  border-radius:26px;
  border:1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  box-shadow: 0 40px 120px rgba(0,0,0,.65);
  padding:14px;
}
.cmdkList{display:grid; gap:10px; max-height: 50vh; overflow:auto; padding-right:4px;}
.cmdkItem{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:12px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  cursor:pointer;
}
.cmdkItem:hover{background: rgba(255,255,255,.07);}

pre.code{
  padding:12px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  font-size:12px;
  line-height:1.45;
  overflow:auto;
}

/* ---------- Charts (v5.0) ---------- */
.donutWrap{display:grid; place-items:center; gap:10px;}
.donut{
  width:220px;height:220px;border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  position:relative;
  box-shadow: 0 18px 55px rgba(0,0,0,.25);
}
.donutHole{
  position:absolute; inset:18%;
  border-radius:999px;
  background: rgba(5,7,11,.75);
  border:1px solid rgba(255,255,255,.10);
  display:grid; place-items:center;
}
.donutHole b{font-size:22px;}
.legendRow{display:flex; gap:10px; align-items:center; justify-content:space-between; padding:8px 10px; border:1px solid rgba(255,255,255,.10); border-radius:14px; background: rgba(255,255,255,.05);}
.legendRow .sw{width:10px;height:10px;border-radius:99px; background: var(--accent);}
.bars{display:grid; gap:10px;}
.barRow{display:grid; grid-template-columns: 1.1fr 2.6fr .7fr; gap:10px; align-items:center;}
.barRow .label{font-size:12px; color: var(--muted);}
.barRow .val{font-size:12px; text-align:right;}
.barRow .meter{height:12px; border-radius:999px; background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.10); overflow:hidden;}
.barRow .meter > div{height:100%; width:0%; background: linear-gradient(90deg, rgba(0,212,255,.55), rgba(124,58,237,.45));}

/* ---------- Task board ---------- */
.kanban{display:grid; grid-template-columns: repeat(3, 1fr); gap:12px;}
@media (max-width:1100px){ .kanban{grid-template-columns:1fr;} }
.kanCol{border:1px solid rgba(255,255,255,.12); border-radius:22px; background: rgba(255,255,255,.05); padding:12px; min-height:320px;}
.kanHead{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:10px;}
.kanHead b{font-size:12px; letter-spacing:.6px; text-transform:uppercase;}
.taskCard{cursor:grab; user-select:none; padding:12px; border-radius:18px; border:1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.18);}
.taskCard:active{cursor:grabbing;}
.taskMeta{display:flex; gap:10px; flex-wrap:wrap; margin-top:8px;}

/* ---------- Calendar ---------- */
.calGrid{display:grid; grid-template-columns: repeat(7, 1fr); gap:10px;}
@media (max-width:1100px){ .calGrid{grid-template-columns: repeat(2, 1fr);} }
.calCell{
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  background: rgba(255,255,255,.05);
  padding:10px;
  min-height:110px;
  cursor:pointer;
}
.calCell:hover{background: rgba(255,255,255,.08);}
.calNum{font-weight:1000; font-size:13px; margin-bottom:8px;}
.calEvt{font-size:11px; color: var(--muted); display:flex; gap:8px; align-items:center; margin-top:6px;}
.calDot{width:8px;height:8px;border-radius:99px; background: var(--accent);}

/* ---------- Chat ---------- */
.chatShell{display:grid; grid-template-columns: 340px 1fr; gap:12px;}
@media (max-width:1100px){ .chatShell{grid-template-columns:1fr;} }
.chatList{display:grid; gap:10px;}
.chatMsg{padding:12px; border-radius:18px; border:1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.18);}
.chatMsg.me{background: rgba(0,212,255,.10); border-color: rgba(0,212,255,.22);}
.chatMsgs{display:grid; gap:10px; max-height: 56vh; overflow:auto; padding-right:6px;}


/* Charts bar layout fix */
.bars{display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap;}
.barCol{width:90px; display:grid; justify-items:center;}
.barV{width:100%; border-radius:16px; border:1px solid rgba(255,255,255,.12);}


/* v50 improved */
:root{
  --vh: 1vh;
}

/* Use --vh to avoid mobile address-bar jump */
body{ min-height: calc(var(--vh, 1vh) * 100); }

/* Nav icons */
.side a{ display:flex; align-items:center; gap:10px; }
.side a .navI{ width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; opacity:.9; }
.side a .navI svg{ width:18px; height:18px; display:block; }
.side a .badge{ margin-left:auto; }

/* Gear FAB icon alignment */
.gearFab svg{ width:22px; height:22px; }

/* Mini pills */
.pill{ padding:4px 8px; border-radius:999px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.06); font-size:12px; }
.pill.good{ border-color: rgba(34,197,94,.35); }
.pill.warn{ border-color: rgba(245,158,11,.35); }
.pill.bad{ border-color: rgba(239,68,68,.35); }

/* Hospital map */
.mapWrap{ border:1px solid rgba(255,255,255,.12); border-radius:14px; overflow:hidden; background:rgba(0,0,0,.25); }
#hMap{ width:100%; height:320px; display:block; touch-action:none; }
.mapLegend{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.mapDot{ width:10px; height:10px; border-radius:999px; background:rgba(96,165,250,.85); box-shadow:0 0 18px rgba(96,165,250,.25); }

/* Payments */
.tableMini{ width:100%; border-collapse:collapse; }
.tableMini th,.tableMini td{ padding:10px 10px; border-bottom:1px solid rgba(255,255,255,.08); text-align:left; vertical-align:top;}
.tableMini th{ position:sticky; top:0; background:rgba(15,18,30,.9); backdrop-filter: blur(10px); z-index:1; font-size:12px; letter-spacing:.02em; text-transform:uppercase; opacity:.85;}
.tableMini tr:hover td{ background:rgba(255,255,255,.04); cursor:pointer; }

.kpi .big{ font-size:28px; font-weight:700; }



/* Real map container (Leaflet) */
.mapReal{ width:100%; height:320px; border-radius:18px; overflow:hidden; box-shadow: var(--shadow); border:1px solid var(--stroke); }
.leaflet-container{ font: inherit; }


/* ------------------------------
   v5.0.7 UI additions
------------------------------- */

/* Fullscreen quick icon (no prompt) */
.fsFab{
  position:fixed;
  top:14px;
  right:74px;
  width:52px;
  height:52px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(12px);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:1001;
  box-shadow: var(--shadow);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.fsFab:hover{ transform: translateY(-1px); background: rgba(255,255,255,.06); }
.fsFab svg{ width:22px; height:22px; display:block; opacity:.95; }
.fsFab.on{ border-color: rgba(96,165,250,.45); box-shadow: 0 0 0 3px rgba(96,165,250,.12), var(--shadow); }
@media (max-width: 720px){
  .fsFab{ right:66px; width:46px; height:46px; }
  .fsFab svg{ width:20px; height:20px; }
}

/* Motivation boxes */
.sideMotivation{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.lockQuote{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  font-size:13px;
  line-height:1.45;
}

/* Embed mode (inside app shell iframe): hide sidebar + global floating buttons */
html.embed .appShell{ grid-template-columns: 1fr !important; }
html.embed .side{ display:none !important; }
html.embed #gearFab,
html.embed #gearMenu,
html.embed #fsFab,
html.embed .pageFade{ display:none !important; }

html.embed #btnFull,
html.embed #btnTheme,
html.embed #btnLock,
html.embed #btnLogout{ display:none !important; }

html.embed .lockOverlay{ display:none !important; }


/* --- Footer (v5.1) --- */
.baefFooter{
  margin-top:16px;
  padding:12px 14px;
  border:1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.18);
  border-radius:16px;
}


/* --- Admin panel input contrast (v5.1) --- */
body[data-perm="USERS"] .in,
body[data-perm="SETTINGS"] .in,
body[data-perm="REPORTS"] .in{
  background: rgba(255,255,255,0.92);
  color: #0b0f14;
  border-color: rgba(0,0,0,0.14);
}
body[data-perm="USERS"] .in::placeholder,
body[data-perm="SETTINGS"] .in::placeholder,
body[data-perm="REPORTS"] .in::placeholder{
  color: rgba(0,0,0,0.45);
}

/* Chrome autofill fix */
body[data-perm="USERS"] input.in:-webkit-autofill,
body[data-perm="SETTINGS"] input.in:-webkit-autofill,
body[data-perm="REPORTS"] input.in:-webkit-autofill{
  -webkit-text-fill-color: #0b0f14;
}



/* =======================================================================
   v5.1.2 UI Additions (Nav buttons, Notifications, Better Modals, Finance)
   ======================================================================= */

/* Map older modal markup (.modalCard/.modalHead/.divider) to v5 modal styles */
.modalCard{
  width:min(1060px, 96vw);
  height:min(92vh, 900px);
  overflow:auto;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
  padding:16px;
}
.modalHead{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:12px;
  position:sticky;
  top:0;
  background: rgba(5,7,11,.65);
  border:1px solid rgba(255,255,255,.08);
  padding:12px;
  border-radius:16px;
  backdrop-filter: blur(12px);
  z-index:2;
  flex-wrap:wrap;
}
.divider{
  height:1px;
  background: rgba(255,255,255,.12);
  margin:12px 0;
}
.modalGrid2{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
.modalGrid3{ display:grid; grid-template-columns: repeat(3, 1fr); gap:12px; }
@media (max-width:900px){
  .modalGrid2, .modalGrid3{ grid-template-columns:1fr; }
}

/* Compact inputs inside tables (Finance History) */
.inRow{
  width:100%;
  padding:8px 10px;
  border-radius:12px;
  font-size:12px;
}

/* Sticky action bar at bottom of Application modal (extra Save buttons) */
.modalFootBar{
  position:sticky;
  bottom:0;
  margin-top:12px;
  padding-top:12px;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.45) 25%, rgba(0,0,0,.65));
  backdrop-filter: blur(10px);
  border-top:1px solid rgba(255,255,255,.10);
}

/* Custom hospital / disease fields highlighted */
#customDiseaseWrap .in,
#customHospital.in{
  background: linear-gradient(135deg, rgba(0,212,255,.16), rgba(124,58,237,.12));
  border-color: rgba(0,212,255,.35);
}

/* Letter template preview editable */
#tplPreview[contenteditable="true"]{
  cursor:text;
  white-space: pre-wrap;
  outline: 2px dashed rgba(0,212,255,.22);
  outline-offset: 6px;
}
#tplPreview[contenteditable="true"]:focus{
  outline-color: rgba(0,212,255,.55);
}

/* Global floating navigation + notifications */
.navFab{
  position:fixed;
  right:18px;
  bottom:18px;
  display:flex;
  gap:10px;
  z-index:9998;
}
.navFab .navBtn{
  width:46px;
  height:46px;
  border-radius:16px;
  border:1px solid var(--stroke2);
  background: rgba(255,255,255,.10);
  color:var(--text);
  display:grid;
  place-items:center;
  cursor:pointer;
  box-shadow: 0 18px 45px rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
  transition: transform .12s ease, background .12s ease, border .12s ease;
}
.navFab .navBtn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.14); }
.navFab .navBtn:active{ transform: translateY(0px); }
.navFab .navBtn[disabled]{ opacity:.45; cursor:not-allowed; }
.navFab .badgeCount{
  position:absolute;
  top:-6px;
  right:-6px;
  min-width:20px;
  height:20px;
  padding:0 6px;
  border-radius:999px;
  background: rgba(239,68,68,.95);
  color:#fff;
  font-size:11px;
  font-weight:1000;
  display:grid;
  place-items:center;
  border:1px solid rgba(0,0,0,.35);
}

/* Dashboard New Application mini icon */
.newAppMini{
  position:fixed;
  left:18px;
  bottom:18px;
  width:48px;
  height:48px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color:var(--text);
  display:grid;
  place-items:center;
  cursor:pointer;
  z-index:9997;
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 45px rgba(0,0,0,.35);
  opacity:.72;
  transition: opacity .12s ease, transform .12s ease, background .12s ease;
}
.newAppMini:hover{ opacity:1; transform: translateY(-1px); background: rgba(255,255,255,.12); }
.newAppMini:active{ transform: translateY(0px); }


/* ------------------------------
   v5.1.3 PATCHES (UI FIXES)
   ------------------------------ */

/* Letters standalone: allow full page scroll (fix on some browsers/iframes) */
body[data-category="letter"]{
  overflow-y:auto !important;
  overflow-x:hidden !important;
}
body[data-category="letter"] .page{
  height:auto;
  min-height: calc(var(--vh, 1vh) * 100);
  overflow:visible;
  -webkit-overflow-scrolling: touch;
}

/* Letters preview inline editing */
.letterEditable{
  outline: 2px dashed rgba(0,212,255,.35);
  outline-offset: 6px;
}
.letterEditable:focus{
  outline-color: rgba(34,197,94,.45);
}

/* Notification badge inside top icon dock */
.iconDock .badgeCount{
  position:absolute;
  top:-6px;
  right:-6px;
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:999px;
  background: rgba(239,68,68,.95);
  color:#fff;
  font-size:10px;
  font-weight:1000;
  display:grid;
  place-items:center;
  border:1px solid rgba(0,0,0,.35);
}


/* Sidebar Clock + Weather (App Shell) */
.sideClockWrap{
  margin: 0 14px 14px;
  padding: 14px 14px;
}
.sideClock{
  width:64px;
  height:64px;
  border-radius:50%;
  border:1px solid var(--stroke);
  background: var(--card2);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.03);
  position:relative;
}
.sideClock .hand{
  position:absolute;
  left:50%;
  top:50%;
  width:2px;
  height:26px;
  background: var(--text);
  opacity:.75;
  border-radius:3px;
  transform-origin: 50% 100%;
  transform: translate(-50%, -100%) rotate(0deg);
}
.sideClock .hand.hour{ width:3px; height:18px; opacity:.90; }
.sideClock .hand.min{ height:24px; opacity:.85; }
.sideClock .hand.sec{ height:28px; opacity:.55; }
.sideClock .pin{
  position:absolute;
  left:50%;
  top:50%;
  width:7px;
  height:7px;
  border-radius:50%;
  background: var(--accent);
  transform: translate(-50%,-50%);
  box-shadow: 0 0 0 2px rgba(0,0,0,.25);
}
.sideClockMeta .h2{
  font-size:18px;
  line-height:1.05;
  margin:0;
}
.sideClockMeta .tiny{ line-height:1.2; }