/* V5: Facility-scoped simulation (tenant + operator) */
:root{
  --bg:#0b0d12;

  --card: rgba(255,255,255,.04);
  --stroke: rgba(255,255,255,.10);
  --primary: rgba(110,231,255,.9);
  --font-scale: 1;
  --text:#eef2ff;
  --muted:#a6b0cf;
  --line:rgba(255,255,255,.08);
  --shadow:0 14px 40px rgba(0,0,0,.35);
  --radius:18px;
  --danger:#ff5b6a;
  --ok:#2ee59d;
  --warn:#ffd680;
  --pad:16px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bot: env(safe-area-inset-bottom, 0px);

  /* Brand accents */
  --brand-a: rgba(110,231,255,.9);
  --brand-b: rgba(124,140,255,.9);
  --brand-a-soft: rgba(110,231,255,.22);
  --brand-b-soft: rgba(124,140,255,.20);
}

*{box-sizing:border-box;}
html,body{height:100%;}
:root{color-scheme: dark;}
body{
  margin:0;
  font-size: calc(16px * var(--font-scale));
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial;
  background: radial-gradient(1200px 800px at 40% -10%, var(--brand-b-soft), transparent 55%),
              radial-gradient(1000px 800px at 70% 10%, var(--brand-a-soft), transparent 50%),
              var(--bg);
  color:var(--text);
}
.app{min-height:100%; display:flex; flex-direction:column;}

.topbar{
  position:sticky; top:0; z-index:10;
  padding: calc(var(--safe-top) + 10px) var(--pad) 10px;
  background: linear-gradient(to bottom, rgba(11,13,18,.92), rgba(11,13,18,.70));
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center; gap:12px;
}
.leftbar{display:flex; align-items:center; gap:12px;}
.rightbar{display:flex; align-items:center; gap:10px;}
.brand{display:flex; gap:12px; align-items:center;}
.logo{
  width:38px; height:38px; border-radius:14px;
  display:grid; place-items:center;
  background: linear-gradient(135deg, var(--brand-a), var(--brand-b));
  color:#0b0d12; font-weight:800; letter-spacing:.5px;
  box-shadow:0 12px 30px rgba(124,140,255,.25);
}
.brand-name{font-weight:750;}
.brand-sub{font-size:12px; color:var(--muted); margin-top:2px;}

.icon-btn{
  appearance:none; border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  color:var(--text);
  border-radius:14px; padding:10px 12px;
  cursor:pointer; position:relative;
}
.pill-btn{
  appearance:none; border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  color:var(--text);
  border-radius:999px; padding:8px 10px;
  cursor:pointer; font-weight:700; display:flex; align-items:center; gap:8px;
}
.pill-caret{opacity:.75; font-size:12px;}

.icon{font-size:18px;}
.badge{
  position:absolute; right:-6px; top:-6px;
  min-width:18px; height:18px; padding:0 6px;
  border-radius:999px; display:grid; place-items:center;
  background:var(--danger); font-size:11px; font-weight:700;
  border:2px solid rgba(11,13,18,.9);
}

.main{flex:1; padding:14px var(--pad) calc(22px + var(--safe-bot)) var(--pad); max-width:520px; width:100%; margin:0 auto;}
.screen{display:none;}
.screen.active{display:block;}
.hero h1{margin:6px 0 8px; letter-spacing:-.02em;}
.hero p{margin:0 0 14px;}
.section-title h2{margin:4px 0 4px; letter-spacing:-.02em;}
.muted{color:var(--muted);}
.tiny{font-size:12px;}

.card{
  background: var(--card);
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding:14px;
  box-shadow: var(--shadow);
  margin:12px 0;
}
.card-head{display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:10px;}
.card-title{font-weight:740;}

.row{display:flex; gap:12px; align-items:center;}
.split > *{flex:1;}
.field{display:flex; flex-direction:column; gap:6px; margin:10px 0;}
.field > span{font-size:12px; color:var(--muted);}
input,select{
  width:100%; padding:12px 12px;
  border-radius:14px; border:1px solid var(--stroke);
  background: var(--card);
  color:var(--text);
  outline:none;
}

.btn{
  width:100%;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  color:var(--text);
  cursor:pointer;
  font-weight:650;
}
.btn:disabled{opacity:.55; cursor:not-allowed;}
.btn.small{padding:9px 10px; border-radius:14px; width:auto;}
.btn.primary{border-color: rgba(255,255,255,.10); background: linear-gradient(135deg, var(--brand-a-soft), var(--brand-b-soft));}
.btn.secondary{border-color: rgba(255,255,255,.10); background: rgba(255,255,255,.04);}
.btn.ghost{background:transparent;}
.stack{display:grid; gap:10px;}

.list{display:grid; gap:10px;}
.item{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:12px; padding:12px 12px;
  border-radius:16px; border:1px solid var(--line);
  background: rgba(0,0,0,.12);
}
.item-left{display:flex; gap:10px; align-items:flex-start;}
.pip{width:10px; height:10px; border-radius:999px; margin-top:6px; background: rgba(255,255,255,.18);}
.item-title{font-weight:680;}
.item-sub{font-size:12px; color:var(--muted); margin-top:2px;}
.item-right{text-align:right; display:grid; gap:8px; justify-items:end;}

.pill{
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 10px; border-radius:999px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  font-weight:700; font-size:12px;
}
.pill.tiny{padding:6px 8px; font-size:11px;}
.pill.subtle{opacity:.85;}
.pill-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:6px;}
.divider{height:1px; background:var(--line); margin:12px 0;}
.duration{display:flex; align-items:center; gap:10px;}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px;}
.chip{
  border:1px solid var(--line);
  border-radius:999px;
  padding:8px 10px;
  cursor:pointer;
  background: rgba(255,255,255,.02);
  font-size:13px;
}
.chip.active{border-color: rgba(255,255,255,.15); background: rgba(255,255,255,.06);}

.status-row{display:flex; gap:12px; align-items:center; margin-bottom:10px;}
.status-dot{
  width:14px; height:14px; border-radius:999px;
  background: rgba(255,255,255,.18);
  box-shadow: 0 0 0 6px rgba(255,255,255,.03);
}

.kv{display:grid; gap:8px; margin:10px 0;}
.kv-row{display:flex; justify-content:space-between; align-items:center;}
.progress{height:10px; border-radius:999px; background: rgba(255,255,255,.06); border:1px solid var(--line); overflow:hidden; margin:10px 0 14px;}
.progress-bar{height:100%; background: linear-gradient(90deg, var(--brand-a), var(--brand-b)); border-radius:999px;}
.toggles{display:grid; gap:10px;}
.toggle{display:flex; gap:10px; align-items:center; padding:10px 12px; border-radius:16px; border:1px solid var(--line); background: rgba(255,255,255,.02);}
.toggle input{width:18px; height:18px;}

/* Dashboard stats */
.grid2{display:grid; grid-template-columns: 1fr 1fr; gap:10px;}
.stat{
  border:1px solid var(--line);
  background: rgba(255,255,255,.02);
  border-radius:16px;
  padding:12px;
}
.stat-value{font-size:22px; font-weight:820; letter-spacing:-.02em; margin-top:4px;}

/* Drawer */
.drawer{position:fixed; inset:0; z-index:30;}
.drawer-backdrop{position:absolute; inset:0; background: rgba(0,0,0,.55);}
.drawer-panel{
  position:absolute; top:0; bottom:0; left:0; width:min(340px, 86vw);
  background: rgba(18,22,34,.98);
  border-right:1px solid var(--line);
  box-shadow: var(--shadow);
  padding: calc(var(--safe-top) + 10px) 12px 12px;
}
.drawer-head{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:6px 4px 10px;}
.drawer-title{font-weight:780;}
.drawer-user{display:flex; gap:10px; align-items:center; padding:10px 8px 12px; border-bottom:1px solid var(--line); margin-bottom:10px;}
.avatar{width:38px; height:38px; border-radius:14px; display:grid; place-items:center; background: rgba(255,255,255,.06); border:1px solid var(--line); font-weight:800;}
.user-name{font-weight:740;}
.drawer-nav{display:grid; gap:8px; padding:10px 4px;}
.drawer-link{
  text-align:left; border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  color:var(--text);
  border-radius:14px; padding:12px 12px;
  cursor:pointer; font-weight:650;
}
.drawer-link.active{border-color: rgba(255,255,255,.15); background: rgba(255,255,255,.06);}
.drawer-link.danger{border-color: rgba(255,91,106,.35); background: rgba(255,91,106,.10);}
.drawer-divider{height:1px; background:var(--line); margin:6px 0;}
.drawer-section{font-size:12px; color: var(--muted); margin: 6px 4px 0;}

/* Segmented */
.seg{
  display:flex; gap:8px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.02);
  border-radius:16px;
  padding:6px;
  margin-bottom:12px;
}
.seg-btn{
  flex:1;
  border:1px solid transparent;
  background: transparent;
  color: var(--muted);
  border-radius:12px;
  padding:10px 8px;
  cursor:pointer;
  font-weight:700;
}
.seg-btn.active{
  color: var(--text);
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}

/* Modal */
.modal{position:fixed; inset:0; z-index:50;}
.modal-backdrop{position:absolute; inset:0; background: rgba(0,0,0,.55);}
.modal-sheet{
  position:absolute; left:0; right:0; bottom:0; max-width:520px; margin:0 auto;
  border-top-left-radius:22px; border-top-right-radius:22px;
  border:1px solid var(--line);
  background: rgba(18,22,34,.96);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.modal-head{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:14px 14px 10px; border-bottom:1px solid var(--line);}
.modal-title{font-weight:760;}
.modal-body{padding:14px;}
.modal-actions{padding:0 14px 14px; display:grid; gap:10px;}

@media (min-width:800px){
  .drawer-panel{border-top-right-radius:18px; border-bottom-right-radius:18px; top:16px; bottom:16px; left:16px;}
}

/*
  Select dropdown visibility fix (native controls vary by OS/browser):
  Keep the opened list readable and theme-consistent.
*/
select{ background: rgba(255,255,255,.03); color: var(--text); border:1px solid var(--line); color-scheme: dark; }
select:focus{ outline:none; box-shadow: 0 0 0 4px var(--brand-a-soft); border-color: var(--stroke); }
option{ background-color: var(--bg); color: var(--text); }

/* High contrast toggle */
:root[data-contrast="high"]{
  --line: rgba(255,255,255,.16);
  --muted: #c7d0ef;
  --card: rgba(255,255,255,.06);
  --stroke: rgba(255,255,255,.20);
}


/* --- Theme profiles + editor readability --- */
.row.wrap{ flex-wrap:wrap; gap:10px; }
.slot-btn{
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  color: var(--text);
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:8px;
  min-width: 120px;
}
.slot-btn .dot{
  width:10px; height:10px; border-radius:999px;
  background: var(--primary);
  box-shadow: 0 0 0 3px rgba(255,255,255,.08);
}
.slot-btn .tag{
  font-size:12px;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid var(--line);
  color: var(--muted);
}
.slot-btn.active{
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(110,231,255,.14);
}
.slot-btn:focus{
  outline: none;
  box-shadow: 0 0 0 4px rgba(110,231,255,.18);
}
.screen[data-screen="settings"].force-light-editor{
  --text:#0b1220;
  --muted:#4b5563;
  --card: rgba(0,0,0,.03);
  --line: rgba(0,0,0,.12);
  --stroke: rgba(0,0,0,.16);
  background:#f6f7fb;
}
.screen[data-screen="settings"].force-light-editor .card{
  background: rgba(255,255,255,.92);
  border-color: rgba(0,0,0,.10);
}
.screen[data-screen="settings"].force-light-editor .btn.ghost{
  background: rgba(0,0,0,.03);
}
.screen[data-screen="settings"].hi-contrast-editor{
  --line: rgba(0,0,0,.35);
  --stroke: rgba(0,0,0,.45);
}
.screen[data-screen="settings"].hi-contrast-editor .field input,
.screen[data-screen="settings"].hi-contrast-editor select{
  border-width: 2px;
}