/* ================================================
   LiveKit Admin PRO+ v3 — Professional Dark Theme
   ================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0a0b0e;--surface:#111318;--surface2:#161920;--surface3:#1c2028;
  --border:rgba(255,255,255,0.07);--border2:rgba(255,255,255,0.12);
  --accent:#5b6af0;--accent-hover:#6e7df5;--accent-glow:rgba(91,106,240,0.15);
  --text:#e8eaf0;--text2:#9ca3af;--muted:#6b7280;
  --danger:#ef4444;--danger-bg:rgba(239,68,68,0.1);--danger-border:rgba(239,68,68,0.25);
  --success:#22c55e;--success-bg:rgba(34,197,94,0.1);--success-border:rgba(34,197,94,0.25);
  --warning:#f59e0b;--warning-bg:rgba(245,158,11,0.1);
  --sidebar-w:224px;--topbar-h:52px;
  --radius:10px;--radius-sm:6px;
  --shadow:0 8px 32px rgba(0,0,0,0.5);
  --font:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:'JetBrains Mono','Fira Code',ui-monospace,monospace;
}
body{font-family:var(--font);background:var(--bg);color:var(--text);min-height:100vh;font-size:14px;line-height:1.6}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.1);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.2)}

/* Layout */
.app-layout{display:flex;min-height:100vh}

/* Sidebar */
.sidebar{
  width:var(--sidebar-w);background:var(--surface);border-right:1px solid var(--border);
  display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;z-index:100;
  transition:transform 0.25s cubic-bezier(.4,0,.2,1);
}
.sidebar-logo{display:flex;align-items:center;gap:10px;padding:1.1rem 1.1rem 0.9rem;border-bottom:1px solid var(--border)}
.sidebar-logo-icon{width:30px;height:30px;background:linear-gradient(135deg,var(--accent),#818cf8);border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sidebar-logo-icon svg{width:15px;height:15px;fill:white}
.sidebar-logo-text{font-size:0.9rem;font-weight:700;letter-spacing:-0.01em;line-height:1.2}
.sidebar-logo-text small{display:block;font-size:0.62rem;color:var(--muted);font-weight:400;letter-spacing:0.04em;text-transform:uppercase}
.sidebar-nav{flex:1;padding:0.75rem 0.5rem;overflow-y:auto}
.nav-section-label{font-size:0.62rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:0.07em;padding:0.5rem 0.65rem 0.25rem;margin-top:0.25rem}
.nav-item{
  display:flex;align-items:center;gap:8px;padding:0.5rem 0.65rem;border-radius:var(--radius-sm);
  color:var(--text2);font-size:0.84rem;font-weight:500;cursor:pointer;transition:background .12s,color .12s;
  text-decoration:none;border:none;background:none;width:100%;text-align:left;font-family:var(--font);
  position:relative;
}
.nav-item:hover{background:var(--surface2);color:var(--text)}
.nav-item.active{background:var(--accent-glow);color:var(--accent)}
.nav-item svg{width:14px;height:14px;flex-shrink:0;opacity:.75}
.nav-item.active svg{opacity:1}
.nav-badge{
  margin-left:auto;background:var(--accent);color:white;
  font-size:0.65rem;font-weight:600;padding:1px 6px;border-radius:10px;
  display:inline-flex;align-items:center;
}
.sidebar-footer{padding:0.85rem;border-top:1px solid var(--border)}
.user-pill{display:flex;align-items:center;gap:8px;padding:0.45rem 0.6rem;border-radius:var(--radius-sm);background:var(--surface2);border:1px solid var(--border);margin-bottom:0.5rem}
.user-avatar{width:24px;height:24px;background:linear-gradient(135deg,var(--accent),#818cf8);border-radius:50%;font-size:0.68rem;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.user-name{font-size:0.82rem;font-weight:500;flex:1}
.btn-logout{width:100%;padding:0.45rem;background:transparent;border:1px solid var(--border);color:var(--muted);border-radius:var(--radius-sm);font-size:0.78rem;cursor:pointer;font-family:var(--font);transition:all .12s}
.btn-logout:hover{background:var(--danger-bg);border-color:var(--danger-border);color:#fca5a5}

/* Main */
.main-content{margin-left:var(--sidebar-w);flex:1;min-width:0}
.topbar{height:var(--topbar-h);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 1.25rem;background:var(--surface);position:sticky;top:0;z-index:50}
.topbar-title{font-size:0.92rem;font-weight:600}
.topbar-actions{display:flex;align-items:center;gap:0.6rem}
.btn-menu{background:none;border:none;cursor:pointer;color:var(--text2);display:none;padding:4px}
.btn-menu:hover{color:var(--text)}

/* Page sections */
.page-section{padding:1.25rem;display:none}
.page-section.active{display:block}

/* Status badges */
.status-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:20px;font-size:0.71rem;font-weight:500;border:1px solid transparent}
.status-badge::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.85}
.badge-online{background:var(--success-bg);color:var(--success);border-color:var(--success-border)}
.badge-offline{background:var(--danger-bg);color:#fca5a5;border-color:var(--danger-border)}
.badge-neutral{background:var(--surface2);color:var(--text2);border-color:var(--border)}

/* Stat grid */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0.85rem;margin-bottom:1rem}
.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1rem 1.1rem}
.stat-label{font-size:0.7rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.4rem}
.stat-value{font-size:1.55rem;font-weight:700;letter-spacing:-0.02em;line-height:1}
.stat-sub{font-size:0.73rem;color:var(--muted);margin-top:3px}

/* Two column */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.two-col-sm{display:grid;grid-template-columns:1fr 1fr;gap:0.75rem}

/* Cards */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.card-header{padding:0.9rem 1.15rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.card-title{font-size:0.88rem;font-weight:600;letter-spacing:-0.01em}
.card-subtitle{font-size:0.76rem;color:var(--muted);margin-top:1px}
.card-body{padding:1.15rem}

/* Forms */
.form-group{margin-bottom:.85rem}
.form-label{display:block;font-size:0.76rem;font-weight:500;color:var(--text2);margin-bottom:.3rem}
.form-hint{font-size:0.72rem;color:var(--muted);margin-top:3px;font-family:var(--mono)}
.form-control{width:100%;padding:.58rem .75rem;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:0.85rem;font-family:var(--font);outline:none;transition:border-color .15s}
.form-control:focus{border-color:var(--accent);background:var(--surface3)}
.form-control::placeholder{color:var(--muted)}
textarea.form-control{font-family:var(--mono);font-size:0.78rem;resize:vertical}
select.form-control{cursor:pointer}
.key-font{font-family:var(--mono)!important;font-size:0.82rem!important}

/* Input group */
.input-group{display:flex}
.input-group .form-control{border-radius:var(--radius-sm) 0 0 var(--radius-sm);flex:1}
.input-group .btn-icon{border-radius:0;border-left:none}
.input-group .btn-icon:last-child{border-radius:0 var(--radius-sm) var(--radius-sm) 0}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:5px;padding:.5rem .9rem;border-radius:var(--radius-sm);font-size:0.82rem;font-weight:500;cursor:pointer;border:1px solid transparent;font-family:var(--font);transition:all .12s;text-decoration:none;white-space:nowrap}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn svg{width:13px;height:13px}
.btn-primary{background:var(--accent);color:white;border-color:var(--accent)}
.btn-primary:hover:not(:disabled){background:var(--accent-hover);border-color:var(--accent-hover)}
.btn-secondary{background:var(--surface2);color:var(--text2);border-color:var(--border)}
.btn-secondary:hover:not(:disabled){background:var(--surface3);color:var(--text);border-color:var(--border2)}
.btn-danger{background:var(--danger-bg);color:#fca5a5;border-color:var(--danger-border)}
.btn-danger:hover:not(:disabled){background:rgba(239,68,68,0.18)}
.btn-success{background:var(--success-bg);color:var(--success);border-color:var(--success-border)}
.btn-sm{padding:.33rem .6rem;font-size:0.77rem}
.btn-full{width:100%;justify-content:center}
.btn-icon{background:var(--surface2);border:1px solid var(--border);color:var(--text2);padding:.58rem .75rem;cursor:pointer;font-family:var(--font);font-size:0.78rem;transition:all .12s}
.btn-icon:hover{background:var(--surface3);color:var(--text)}

/* Tables */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse}
thead th{padding:.6rem 1rem;text-align:left;font-size:0.7rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--border);white-space:nowrap}
tbody td{padding:.72rem 1rem;font-size:0.83rem;border-bottom:1px solid var(--border)}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover td{background:rgba(255,255,255,0.018)}
.tbl-empty{color:var(--muted);text-align:center;padding:2.5rem!important}

/* Key mono display */
.key-mono{font-family:var(--mono);font-size:0.79rem;color:var(--text2);background:var(--surface2);padding:2px 7px;border-radius:4px;display:inline}

/* Alerts */
.alert{padding:.65rem .9rem;border-radius:var(--radius-sm);font-size:0.83rem;margin-bottom:.75rem;border:1px solid transparent;display:none}
.alert.show{display:block}
.alert-danger{background:var(--danger-bg);color:#fca5a5;border-color:var(--danger-border)}
.alert-success{background:var(--success-bg);color:#86efac;border-color:var(--success-border)}
.alert-info{background:var(--accent-glow);color:#a5b4fc;border-color:rgba(91,106,240,.3)}

/* Info banner */
.info-banner{display:flex;align-items:flex-start;gap:.65rem;background:var(--accent-glow);border:1px solid rgba(91,106,240,.25);border-radius:var(--radius-sm);padding:.75rem 1rem;font-size:.82rem;color:#a5b4fc;margin-bottom:1rem}
.info-banner code{font-family:var(--mono);font-size:0.78rem;background:rgba(91,106,240,.2);padding:1px 5px;border-radius:3px}

/* Modal */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:1000;align-items:center;justify-content:center;backdrop-filter:blur(5px)}
.modal-overlay.open{display:flex}
.modal{background:var(--surface);border:1px solid var(--border2);border-radius:14px;padding:1.6rem;width:100%;max-width:500px;box-shadow:var(--shadow);animation:modalIn .2s ease}
@keyframes modalIn{from{opacity:0;transform:translateY(-10px) scale(.97)}to{opacity:1;transform:none}}
.modal-title{font-size:.98rem;font-weight:700;margin-bottom:.2rem}
.modal-subtitle{font-size:.82rem;color:var(--muted);margin-bottom:1.25rem;line-height:1.5}
.modal-subtitle code{font-family:var(--mono);font-size:0.78rem;background:var(--surface2);padding:1px 5px;border-radius:3px;color:var(--text2)}
.modal-actions{display:flex;gap:.5rem;justify-content:flex-end;margin-top:1.25rem;flex-wrap:wrap}

/* Key reveal */
.key-reveal{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.85rem;margin-bottom:.6rem}
.key-reveal-label{font-size:0.68rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.3rem}
.key-reveal-value{font-family:var(--mono);font-size:.8rem;color:var(--text);word-break:break-all;line-height:1.5;user-select:all}
.key-warning{display:flex;align-items:flex-start;gap:.6rem;background:var(--warning-bg);border:1px solid rgba(245,158,11,.25);border-radius:var(--radius-sm);padding:.7rem;font-size:.81rem;color:#fcd34d;margin-bottom:.85rem;line-height:1.5}
.restart-status{margin-bottom:.5rem}

/* Metric rows */
.metric-row{display:flex;justify-content:space-between;align-items:center;padding:.55rem 0;border-bottom:1px solid var(--border);font-size:.83rem}
.metric-row:last-child{border-bottom:none}
.metric-row .metric-label{color:var(--text2)}
.metric-row .metric-value{font-weight:500}

/* Chips */
.chip{display:inline-flex;align-items:center;padding:2px 8px;border-radius:20px;font-size:.7rem;font-weight:500}
.chip-active{background:var(--success-bg);color:var(--success)}
.chip-revoked{background:var(--danger-bg);color:#fca5a5}

/* Grants */
.grants-grid{display:grid;grid-template-columns:1fr 1fr;gap:.35rem}
.check-item{display:flex;align-items:center;gap:7px;padding:.38rem .6rem;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;font-size:.8rem}
.check-item input[type=checkbox]{accent-color:var(--accent);width:13px;height:13px}

/* Toast */
#toast{position:fixed;bottom:1.25rem;right:1.25rem;background:var(--surface);border:1px solid var(--border2);border-radius:var(--radius-sm);padding:.65rem 1rem;font-size:.83rem;box-shadow:var(--shadow);z-index:9999;transform:translateY(16px);opacity:0;transition:all .22s;pointer-events:none;max-width:300px}
#toast.show{opacity:1;transform:translateY(0)}
#toast.toast-success{border-color:var(--success-border);color:#86efac}
#toast.toast-error{border-color:var(--danger-border);color:#fca5a5}

/* Spinner */
.spinner{width:36px;height:36px;border:3px solid rgba(255,255,255,0.1);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#restartOverlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.8);z-index:9000;align-items:center;justify-content:center;flex-direction:column;gap:1rem}

/* Responsive */
@media(max-width:1100px){
  .stat-grid{grid-template-columns:1fr 1fr}
  .two-col{grid-template-columns:1fr}
}
@media(max-width:900px){
  .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:translateX(0)}
  .main-content{margin-left:0}
  .btn-menu{display:block}
  .topbar{padding:0 1rem}
}
@media(max-width:600px){
  .stat-grid{grid-template-columns:1fr 1fr}
  .page-section{padding:0.85rem}
  .two-col-sm{grid-template-columns:1fr}
}