/* ============================================================
   Vardana Monitor — Premium Design System
   ============================================================ */
:root{
  /* typography */
  --bs-body-font-family:'Inter Variable', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-base:.875rem;

  /* radius & spacing */
  --r-sm:7px; --r:10px; --r-lg:14px; --r-xl:18px;
  --sidew:248px; --sidew-collapsed:72px; --headh:60px;

  /* light tokens */
  --bg:#f7f7f9;
  --bg-elev:#ffffff;
  --surface:#ffffff;
  --surface-2:#f4f4f6;
  --border:#e8e8ec;
  --border-strong:#dcdce2;
  --text:#18181b;
  --text-2:#3f3f46;
  --muted:#71717a;
  --faint:#a1a1aa;
  --accent:#5b57d8;
  --accent-weak:rgba(91,87,216,.10);
  --accent-text:#5b57d8;
  --green:#16a34a; --green-weak:rgba(22,163,74,.12);
  --red:#e11d48; --red-weak:rgba(225,29,72,.12);
  --amber:#d97706; --amber-weak:rgba(217,119,6,.12);
  --blue:#2563eb; --blue-weak:rgba(37,99,235,.12);
  --ring:rgba(91,87,216,.28);
  --shadow-sm:0 1px 2px rgba(24,24,27,.05);
  --shadow:0 1px 3px rgba(24,24,27,.06),0 8px 24px -12px rgba(24,24,27,.12);
  --shadow-lg:0 12px 40px -12px rgba(24,24,27,.22);
  --side-bg:#ffffff;
  --side-active:var(--accent-weak);
  color-scheme:light;
}
html[data-theme="dark"]{
  --bg:#0c0c0f;
  --bg-elev:#131316;
  --surface:#151518;
  --surface-2:#1c1c21;
  --border:#26262c;
  --border-strong:#33333b;
  --text:#f4f4f5;
  --text-2:#d4d4d8;
  --muted:#9b9ba4;
  --faint:#6b6b74;
  --accent:#7c78f0;
  --accent-weak:rgba(124,120,240,.16);
  --accent-text:#a6a2ff;
  --green:#34d399; --green-weak:rgba(52,211,153,.15);
  --red:#fb7185; --red-weak:rgba(251,113,133,.15);
  --amber:#fbbf24; --amber-weak:rgba(251,191,36,.15);
  --blue:#60a5fa; --blue-weak:rgba(96,165,250,.15);
  --ring:rgba(124,120,240,.4);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 1px 3px rgba(0,0,0,.5),0 10px 30px -14px rgba(0,0,0,.7);
  --shadow-lg:0 16px 48px -14px rgba(0,0,0,.75);
  --side-bg:#0f0f12;
  color-scheme:dark;
}
*{scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent;}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:10px;border:3px solid transparent;background-clip:content-box;}
::-webkit-scrollbar-thumb:hover{background:var(--faint);background-clip:content-box;}

body{
  font-family:var(--bs-body-font-family);font-size:var(--fs-base);
  background:var(--bg);color:var(--text-2);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-feature-settings:"cv05","ss01";letter-spacing:-.006em;
}
h1,h2,h3,h4,h5,h6{color:var(--text);font-weight:600;letter-spacing:-.018em;}
a{color:var(--accent-text);text-decoration:none;}
.text-secondary{color:var(--muted)!important;}
hr{border-color:var(--border);opacity:1;}

/* ===== Layout ===== */
.layout{display:flex;min-height:100vh;}
.sidebar{width:var(--sidew);flex:0 0 var(--sidew);background:var(--side-bg);
  border-right:1px solid var(--border);position:fixed;inset:0 auto 0 0;z-index:1040;
  display:flex;flex-direction:column;transition:width .22s cubic-bezier(.4,0,.2,1);}
.content-wrap{margin-left:var(--sidew);flex:1;min-width:0;display:flex;flex-direction:column;min-height:100vh;transition:margin .22s cubic-bezier(.4,0,.2,1);}
body.sb-collapsed .sidebar{width:var(--sidew-collapsed);flex-basis:var(--sidew-collapsed);}
body.sb-collapsed .content-wrap{margin-left:var(--sidew-collapsed);}
body.sb-collapsed .side-brand .txt,body.sb-collapsed .side-link span,body.sb-collapsed .side-label{opacity:0;width:0;overflow:hidden;}
body.sb-collapsed .side-link{justify-content:center;padding-left:0;padding-right:0;}
@media (max-width:991.98px){
  .sidebar{transform:translateX(-100%);transition:transform .22s cubic-bezier(.4,0,.2,1);box-shadow:var(--shadow-lg);}
  body.sb-show .sidebar{transform:none;}
  .content-wrap{margin-left:0;}
  body.sb-show .backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(2px);z-index:1039;}
}

/* ===== Sidebar ===== */
.side-brand{height:var(--headh);display:flex;align-items:center;gap:11px;padding:0 20px;
  color:var(--text);font-weight:700;font-size:1.02rem;letter-spacing:-.02em;border-bottom:1px solid var(--border);}
.side-brand .logo{width:28px;height:28px;border-radius:9px;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:.95rem;box-shadow:var(--shadow-sm);flex:0 0 28px;}
.side-nav{padding:12px 12px 16px;overflow-y:auto;flex:1;}
.side-label{padding:14px 10px 6px;color:var(--faint);font-size:.68rem;text-transform:uppercase;letter-spacing:.07em;font-weight:600;transition:opacity .15s;}
.side-link{display:flex;align-items:center;gap:11px;padding:8px 11px;border-radius:var(--r-sm);
  color:var(--muted);text-decoration:none;font-size:.86rem;font-weight:500;cursor:pointer;
  position:relative;transition:background .14s,color .14s;margin-bottom:1px;}
.side-link i{font-size:1.02rem;min-width:20px;text-align:center;opacity:.9;}
.side-link span{transition:opacity .15s;white-space:nowrap;}
.side-link:hover{background:var(--surface-2);color:var(--text);}
.side-link.active{background:var(--accent-weak);color:var(--accent-text);font-weight:600;}
.side-link.active i{opacity:1;}
.side-link.active::before{content:"";position:absolute;left:-12px;top:50%;transform:translateY(-50%);width:3px;height:18px;background:var(--accent);border-radius:0 3px 3px 0;}
.side-link.disabled{opacity:.4;pointer-events:none;}

/* ===== Topbar ===== */
.topbar{position:sticky;top:0;z-index:1030;height:var(--headh);display:flex;align-items:center;gap:10px;
  padding:0 16px;background:color-mix(in srgb,var(--bg-elev) 85%,transparent);
  backdrop-filter:saturate(1.6) blur(10px);border-bottom:1px solid var(--border);}
.icon-btn{border:0;background:transparent;color:var(--muted);width:38px;height:38px;border-radius:var(--r-sm);
  display:grid;place-items:center;font-size:1.05rem;transition:background .14s,color .14s;}
.icon-btn:hover{background:var(--surface-2);color:var(--text);}
.cmd-trigger{display:flex;align-items:center;gap:8px;height:38px;padding:0 12px;border:1px solid var(--border);
  background:var(--surface-2);border-radius:var(--r);color:var(--muted);font-size:.82rem;min-width:220px;transition:border-color .14s,background .14s;}
.cmd-trigger:hover{border-color:var(--border-strong);}
.cmd-trigger kbd{margin-left:auto;background:var(--surface);border:1px solid var(--border);border-radius:5px;padding:1px 6px;font-size:.68rem;color:var(--faint);font-family:inherit;}
.top-user{display:flex;align-items:center;gap:9px;background:transparent;border:0;padding:5px 9px;border-radius:var(--r-sm);transition:background .14s;}
.top-user:hover{background:var(--surface-2);}
.top-user::after{display:none;}
.avatar{width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,var(--accent),#8b88ea);color:#fff;display:grid;place-items:center;font-weight:600;font-size:.82rem;}
.conn{display:flex;align-items:center;gap:7px;font-size:.78rem;color:var(--muted);padding:5px 10px;border-radius:999px;background:var(--surface-2);}

/* ===== Page ===== */
.page-body{padding:26px 28px;flex:1;max-width:1480px;width:100%;animation:fadeUp .3s ease both;}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
body.leaving .page-body{opacity:0;transform:translateY(-6px);transition:opacity .15s,transform .15s;}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:22px;flex-wrap:wrap;gap:10px;}
.page-head h1{font-size:1.25rem;font-weight:650;margin:0;}
.page-head .sub{color:var(--muted);font-size:.82rem;margin-top:3px;}
.breadcrumb-mini{color:var(--faint);font-size:.78rem;}
.breadcrumb-mini b{color:var(--text-2);font-weight:500;}

/* ===== Cards ===== */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);margin-bottom:0;}
.card-body{padding:18px;}
.card .card-body h6{font-size:.9rem;}

/* stat card */
.stat{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;}
.stat .lbl{color:var(--muted);font-size:.78rem;font-weight:500;margin-bottom:8px;letter-spacing:.01em;}
.stat .val{font-size:1.65rem;font-weight:680;color:var(--text);line-height:1;letter-spacing:-.03em;}
.stat .delta{font-size:.72rem;margin-top:8px;color:var(--muted);}
.stat .ic{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;font-size:1.2rem;background:var(--accent-weak);color:var(--accent-text);flex:0 0 42px;}
.stat .ic.g{background:var(--green-weak);color:var(--green);}
.stat .ic.c{background:var(--blue-weak);color:var(--blue);}
.stat .ic.y{background:var(--amber-weak);color:var(--amber);}

/* ===== Buttons ===== */
.btn{border-radius:var(--r-sm);font-size:.82rem;font-weight:550;padding:.45rem .85rem;transition:background .14s,border-color .14s,color .14s,transform .04s,box-shadow .14s;letter-spacing:-.01em;}
.btn:active{transform:translateY(.5px);}
.btn-sm{padding:.34rem .7rem;font-size:.78rem;border-radius:var(--r-sm);}
.btn-primary{--bs-btn-bg:var(--accent);--bs-btn-border-color:var(--accent);--bs-btn-hover-bg:color-mix(in srgb,var(--accent) 88%,#000);--bs-btn-hover-border-color:var(--bs-btn-hover-bg);--bs-btn-active-bg:var(--bs-btn-hover-bg);--bs-btn-disabled-bg:var(--accent);--bs-btn-disabled-border-color:var(--accent);box-shadow:var(--shadow-sm);}
.btn-outline-secondary{--bs-btn-color:var(--text-2);--bs-btn-border-color:var(--border-strong);--bs-btn-hover-bg:var(--surface-2);--bs-btn-hover-border-color:var(--border-strong);--bs-btn-hover-color:var(--text);--bs-btn-bg:var(--surface);}
.btn-outline-primary{--bs-btn-color:var(--accent-text);--bs-btn-border-color:var(--accent);--bs-btn-hover-bg:var(--accent);--bs-btn-hover-border-color:var(--accent);--bs-btn-bg:transparent;}
.btn-outline-success{--bs-btn-color:var(--green);--bs-btn-border-color:var(--green);--bs-btn-hover-bg:var(--green);--bs-btn-hover-color:#fff;}
.btn-outline-warning{--bs-btn-color:var(--amber);--bs-btn-border-color:var(--amber);}
.btn-outline-danger{--bs-btn-color:var(--red);--bs-btn-border-color:var(--red);}
.btn-success{--bs-btn-bg:var(--green);--bs-btn-border-color:var(--green);}

/* ===== Forms ===== */
.form-control,.form-select{background:var(--surface);border:1px solid var(--border-strong);color:var(--text);border-radius:var(--r-sm);font-size:.82rem;padding:.48rem .7rem;transition:border-color .14s,box-shadow .14s;}
.form-control::placeholder{color:var(--faint);}
.form-control:focus,.form-select:focus{background:var(--surface);color:var(--text);border-color:var(--accent);box-shadow:0 0 0 3px var(--ring);}
.form-control-sm,.form-select-sm{font-size:.78rem;padding:.36rem .6rem;}
label,.form-label{color:var(--text-2);font-weight:500;}
.input-group-text{background:var(--surface-2);border-color:var(--border-strong);color:var(--muted);}

/* ===== Tables ===== */
.table{--bs-table-bg:transparent;color:var(--text-2);font-size:.83rem;margin-bottom:0;}
.table>thead th{color:var(--muted);font-weight:600;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--border);padding:.65rem .75rem;}
.table>tbody>tr>td{border-bottom:1px solid var(--border);padding:.7rem .75rem;vertical-align:middle;color:var(--text-2);}
.table>tbody>tr{transition:background .12s;}
.table>tbody>tr:hover{background:var(--surface-2);}
.table>tbody>tr:last-child>td{border-bottom:0;}
code{color:var(--accent-text);background:var(--accent-weak);padding:1px 6px;border-radius:5px;font-size:.78em;}

/* ===== Badges ===== */
.badge{font-weight:600;font-size:.7rem;letter-spacing:.01em;padding:.32em .6em;border-radius:7px;}
.text-bg-success{background:var(--green-weak)!important;color:var(--green)!important;}
.text-bg-danger{background:var(--red-weak)!important;color:var(--red)!important;}
.text-bg-secondary{background:var(--surface-2)!important;color:var(--muted)!important;}
.text-bg-light{background:var(--surface-2)!important;color:var(--text-2)!important;border:1px solid var(--border);}

/* ===== Dropdown / Modal (ikut data-bs-theme) ===== */
.dropdown-menu{--bs-dropdown-bg:var(--bg-elev);--bs-dropdown-border-color:var(--border);--bs-dropdown-link-color:var(--text-2);--bs-dropdown-link-hover-bg:var(--surface-2);--bs-dropdown-link-hover-color:var(--text);border-radius:var(--r);box-shadow:var(--shadow);padding:6px;}
.dropdown-item{border-radius:var(--r-sm);font-size:.82rem;padding:.45rem .6rem;}
.dropdown-divider{border-color:var(--border);}
.modal-content{background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);}
.alert{border-radius:var(--r);border:1px solid var(--border);font-size:.82rem;}
.alert-primary{background:var(--accent-weak);color:var(--accent-text);border-color:transparent;}

/* ===== Status / monitoring ===== */
.status-dot{width:9px;height:9px;border-radius:50%;display:inline-block;background:var(--faint);position:relative;}
.status-dot.on{background:var(--green);box-shadow:0 0 0 3px var(--green-weak);}
.status-dot.on::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:1px solid var(--green);opacity:.5;animation:pulse 2s infinite;}
@keyframes pulse{0%{transform:scale(.8);opacity:.6;}70%{transform:scale(1.6);opacity:0;}100%{opacity:0;}}

.dev-list-card{cursor:pointer;transition:transform .14s cubic-bezier(.4,0,.2,1),box-shadow .14s,border-color .14s;}
.dev-list-card:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--border-strong);}
.dev-ic{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;font-size:1.45rem;background:var(--accent-weak);color:var(--accent-text);flex:0 0 48px;}
.dev-ic.off{background:var(--surface-2);color:var(--faint);}
.tile-card{cursor:pointer;transition:transform .14s,box-shadow .14s,border-color .14s;}
.tile-card:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--border-strong);}
.tile-img{width:100%;aspect-ratio:16/9;object-fit:contain;background:#0a0a0f;border-radius:var(--r-sm);}
.tile-off{display:grid;place-items:center;color:var(--faint);font-size:.78rem;}
.stage{background:#0a0a0f;border-radius:var(--r-lg);min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:inset 0 0 0 1px var(--border);}
.stage img,.stage video{max-width:100%;max-height:100%;object-fit:contain;}
.session-wrap{display:flex;flex-direction:column;}

/* ===== Empty / error state ===== */
.empty-state{text-align:center;padding:56px 20px;color:var(--muted);}
.empty-state .es-ic{width:56px;height:56px;border-radius:16px;background:var(--surface-2);color:var(--faint);display:grid;place-items:center;font-size:1.6rem;margin:0 auto 14px;}
.empty-state h6{color:var(--text);margin-bottom:4px;}
.empty-state p{font-size:.82rem;margin:0;}

/* ===== Skeleton ===== */
.skeleton{background:linear-gradient(90deg,var(--surface-2) 25%,var(--border) 37%,var(--surface-2) 63%);background-size:400% 100%;animation:shimmer 1.4s infinite;border-radius:6px;}
@keyframes shimmer{0%{background-position:100% 0;}100%{background-position:-100% 0;}}

/* ===== Progress bar ===== */
#nprog{position:fixed;top:0;left:0;height:2px;width:0;z-index:3000;background:var(--accent);box-shadow:0 0 10px var(--accent);transition:width .25s ease;pointer-events:none;}
#nprog.done{opacity:0;transition:opacity .35s ease .1s;}

/* ===== Command palette ===== */
.cmd-overlay{position:fixed;inset:0;z-index:3500;background:rgba(10,10,15,.45);backdrop-filter:blur(3px);display:none;align-items:flex-start;justify-content:center;padding-top:14vh;}
.cmd-overlay.show{display:flex;animation:fadeUp .15s ease both;}
.cmd-box{width:min(560px,92vw);background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);overflow:hidden;}
.cmd-box input{width:100%;border:0;border-bottom:1px solid var(--border);background:transparent;color:var(--text);font-size:.95rem;padding:16px 18px;outline:none;}
.cmd-list{max-height:320px;overflow-y:auto;padding:8px;}
.cmd-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--r-sm);color:var(--text-2);cursor:pointer;font-size:.86rem;}
.cmd-item i{color:var(--muted);font-size:1.05rem;}
.cmd-item.active,.cmd-item:hover{background:var(--accent-weak);color:var(--accent-text);}
.cmd-item.active i{color:var(--accent-text);}
.cmd-foot{display:flex;gap:14px;padding:9px 14px;border-top:1px solid var(--border);color:var(--faint);font-size:.72rem;}

/* ===== Auth pages ===== */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:radial-gradient(1000px 500px at 50% -10%,var(--accent-weak),transparent 60%),var(--bg);}
.auth-card{width:400px;max-width:92vw;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--shadow-lg);}
.brand{font-weight:700;letter-spacing:-.02em;}
.brand .dotmark{color:var(--accent-text);}

/* chart canvas height tidy */
canvas{max-width:100%;}