:root{
  --bg:#0b1220;
  --card:#0f1b2e;
  --card2:#0c1628;
  --text:#eaf0ff;
  --muted:#9fb0d0;
  --accent:#32d296;
  --accent2:#2d8cff;
  --danger:#ff4d6d;
  --border:rgba(255,255,255,.10);
  --shadow:0 10px 30px rgba(0,0,0,.35);

  /* Advanced theme (customizer-controlled) */
  --grad1: rgba(45,140,255,.20);
  --grad2: rgba(50,210,150,.18);
  --sidebar-bg: rgba(5,10,18,.72);
  --topbar-bg: rgba(11,18,32,.65);
  --surface: rgba(255,255,255,.04);
  --surface-2: rgba(255,255,255,.06);

  /* Buttons (customizer-controlled) */
  --btn-bg: var(--surface-2);
  --btn-border: rgba(255,255,255,.18);
  --btn-primary-bg: rgba(45,140,255,.18);
  --btn-primary-border: rgba(45,140,255,.25);
  --btn-success-bg: rgba(50,210,150,.16);
  --btn-success-border: rgba(50,210,150,.22);
  --btn-danger-bg: rgba(255,77,109,.16);
  --btn-danger-border: rgba(255,77,109,.22);

  /* Typography (customizer-controlled) */
  --font-base: 14px;
  --font-small: 12px;
  --font-heading: 18px;
  --font-menu: 14px;
  --font-table: 13px;
  --weight-normal: 600;
  --weight-bold: 800;
  --weight-menu: 700;
  --weight-table: 700;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Segoe UI, Tahoma, Arial, sans-serif;
  font-size: var(--font-base);
  background:
    radial-gradient(1200px 600px at 20% 10%, var(--grad1), transparent 60%),
    radial-gradient(900px 500px at 90% 20%, var(--grad2), transparent 60%),
    var(--bg);
  color:var(--text);
  overflow-x:hidden;
}

/* ==========================
   App Shell (Sidebar Layout)
   ========================== */
.app{display:flex; min-height:100vh}
.sidebar{
  width:var(--sidebar-w,260px); flex:0 0 var(--sidebar-w,260px);
  background: var(--sidebar-bg);
  border-right:1px solid var(--border);
  padding:16px;
  position:sticky; top:0; height:100vh;
  overflow:auto;
}

/* Desktop: hide/unhide sidebar */
body.sb-collapsed .sidebar{
  width:0; flex:0 0 0;
  padding:0;
  border:0;
  overflow:hidden;
}
.sidebar-brand{display:flex; gap:10px; align-items:center; padding:8px 6px 14px 6px}
.sb-title{font-weight:900; letter-spacing:.4px}
.sb-sub{color:var(--muted); font-size:var(--font-small); font-weight:var(--weight-normal)}
.sidebar-group{color:var(--muted); font-size:12px; font-weight:var(--weight-bold); padding:10px 6px 6px 6px}
.sidebar-nav{display:flex; flex-direction:column; gap:8px}
.sidebar-nav a{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  border-radius:var(--radius,14px);
  border:var(--border-w,1px) solid transparent;
  background: rgba(255,255,255,.02);
  color:var(--text);
  font-size: var(--font-menu);
  font-weight: var(--weight-menu);
}
.sidebar-nav a:hover{border-color: rgba(255,255,255,.15)}
.sidebar-nav a.active{border-color: rgba(45,140,255,.35); background: rgba(45,140,255,.10)}
.sidebar-footer{margin-top:18px; padding-top:14px; border-top:1px solid var(--border)}
.sb-user{display:flex; align-items:center; gap:10px; padding:10px 8px; border-radius:var(--radius-lg,18px); border:var(--border-w,1px) solid var(--border); background: rgba(0,0,0,.18)}
.avatar{width:38px; height:38px; border-radius:var(--radius,14px); display:flex; align-items:center; justify-content:center; font-weight:900;
  background: linear-gradient(135deg, rgba(45,140,255,.35), rgba(50,210,150,.25)); border:var(--border-w,1px) solid var(--border);
}
.sb-name{font-weight:800}
.sb-role{color:var(--muted); font-size:var(--font-small); font-weight:var(--weight-normal)}

.main{flex:1; min-width:0}

@media (max-width: 980px){
  .hamburger{display:inline-flex}
  .sidebar{position:fixed; left:-280px; top:0; height:100vh; z-index:50; transition:left .2s ease; box-shadow: var(--shadow)}
  .sidebar.open{left:0}
  .app{display:block}
}
a{color:var(--accent2); text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1200px; margin:0 auto; padding:var(--pad,18px)}

.topbar{
  position:sticky; top:0; z-index:10;
  backdrop-filter: blur(var(--blur,18px));
  background: var(--topbar-bg);
  border-bottom:1px solid var(--border);
}
.topbar-inner{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 18px}
.topbar-title{display:flex; align-items:center; gap:10px}
.topbar-actions{display:flex; gap:10px; align-items:center}
.brand-inline{display:flex; align-items:center; gap:10px}
.pill{display:inline-flex; align-items:center; padding:6px 10px; border-radius:var(--radius-pill,999px); background: rgba(255,255,255,.05); border:var(--border-w,1px) solid var(--border); font-weight:800; letter-spacing:.3px}
.muted{color:var(--muted); font-size:var(--font-table); font-weight:var(--weight-normal)}
.hamburger{display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border:var(--border-w,1px) solid var(--border); background: rgba(255,255,255,.04); color:var(--text); border-radius:var(--radius,14px); padding:0; cursor:pointer}
.hamburger:hover{border-color: rgba(255,255,255,.18)}
.brand{
  display:flex; align-items:center; gap:10px;
  font-weight:700; letter-spacing:.3px;
}
.logo{
  width:34px; height:34px; border-radius:calc(var(--radius,14px) - 4px);
  background: linear-gradient(135deg, rgba(45,140,255,.95), rgba(50,210,150,.95));
  box-shadow: var(--shadow);
}
.nav{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.nav a{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px;
  border:var(--border-w,1px) solid transparent;
  border-radius:var(--radius,14px);
  color:var(--text);
  background: var(--surface);
}
.nav a.active{border-color: rgba(50,210,150,.35); background: rgba(50,210,150,.10)}
.nav a:hover{border-color: rgba(255,255,255,.15)}

.card{
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:var(--border-w,1px) solid var(--border);
  border-radius:var(--radius-lg,18px);
  box-shadow: var(--shadow);
}
.card-h{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:14px 16px}
.card-title{font-size:var(--font-heading); font-weight:var(--weight-bold); letter-spacing:.2px}
.mini{font-size:var(--font-small); color:var(--muted); font-weight:var(--weight-normal)}
.card-header{padding:14px 16px; border-bottom:1px solid var(--border); color:var(--muted); font-size:13px}
.card-body{padding:16px}

.grid{display:grid; gap:14px}
.grid-3{grid-template-columns: repeat(3, minmax(0, 1fr))}
.grid-2{grid-template-columns: repeat(2, minmax(0, 1fr))}
@media (max-width: 980px){.grid-3{grid-template-columns:1fr}}
@media (max-width: 980px){.grid-2{grid-template-columns:1fr}}

.kpi{display:flex; flex-direction:column; gap:6px}
.kpi .label{color:var(--muted); font-size:13px}
.kpi .value{font-size:28px; font-weight:800; letter-spacing:.3px}
.kpi .sub{color:var(--muted); font-size:12px}

.table-wrap{max-width:100%; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; border-radius:var(--radius-lg,18px); border:var(--border-w,1px) solid var(--border)}

/*
  Vertical scroll containers (used for large admin lists)
  - Always show vertical scrollbar
  - Keep header sticky inside the container
*/
.table-wrap.vscroll{
  height:420px;
  max-height:420px;
  overflow-y:auto;
  overflow-x:auto;
  background:rgba(255,255,255,.02);
  /* Keep a dedicated gutter so the scrollbar is always visible */
  scrollbar-gutter: stable;
}
.table-wrap.vscroll thead th{
  position:sticky;
  top:0;
  z-index:2;
  background:rgba(0,0,0,.35);
  backdrop-filter: blur(8px);
}

/* Visible scrollbar (Chrome/Edge/Safari) */
.table-wrap.vscroll::-webkit-scrollbar{width:10px;height:10px}
.table-wrap.vscroll::-webkit-scrollbar-track{background:rgba(0,0,0,.22);border-radius:10px}
.table-wrap.vscroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.40);border-radius:10px}
.table-wrap.vscroll::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.55)}

/* Visible scrollbar (Firefox) */
.table-wrap.vscroll{scrollbar-width:thin; scrollbar-color: rgba(255,255,255,.40) rgba(0,0,0,.22)}
table{width:max-content; border-collapse:collapse; min-width:920px; background: rgba(0,0,0,.15)}
th,td{padding:10px 10px; border-bottom:1px solid var(--border); text-align:left; font-size:var(--font-table); white-space:nowrap}
td{font-weight:var(--weight-table)}
th{color:var(--muted); font-weight:var(--weight-bold); background: rgba(255,255,255,.03); position:sticky; top:0}
tr:hover td{background: rgba(45,140,255,.06)}

.badge{display:inline-flex; align-items:center; padding:4px 10px; border-radius:var(--radius-pill,999px); font-size:12px; border:var(--border-w,1px) solid var(--border)}
.badge.ok{border-color: rgba(50,210,150,.4); background: rgba(50,210,150,.10)}
.badge.no{border-color: rgba(255,77,109,.45); background: rgba(255,77,109,.10)}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; padding:10px 12px;
  border-radius:var(--radius,14px);
  border:var(--border-w,1px) solid transparent;
  background: var(--btn-bg);
  color:var(--text);
  cursor:pointer;
}
.btn:hover{border-color: var(--btn-border)}
.btn.primary{background: var(--btn-primary-bg); border-color: var(--btn-primary-border)}
.btn.success{background: var(--btn-success-bg); border-color: var(--btn-success-border)}
.btn.danger{background: var(--btn-danger-bg); border-color: var(--btn-danger-border)}

.input, select{
  width:100%; padding:10px 12px; border-radius:var(--radius,14px);
  border:var(--border-w,1px) solid var(--border);
  background: rgba(0,0,0,.25);
  color:var(--text);
  outline:none;
}

.input:focus, select:focus{border-color: rgba(99,102,241,.65); box-shadow:0 0 0 3px rgba(99,102,241,.15)}

/* Select dropdown: make it obviously clickable and readable */
select{cursor:pointer; -webkit-appearance: menulist; appearance: menulist;}
select:disabled{cursor:not-allowed; opacity:.6}
select option{background:#0b1220; color:#e5e7eb}
.input::placeholder{color: rgba(159,176,208,.7)}
.form-row{display:grid; gap:10px; grid-template-columns: repeat(6, minmax(0, 1fr))}
@media (max-width: 980px){.form-row{grid-template-columns:1fr 1fr}}
@media (max-width: 520px){.form-row{grid-template-columns:1fr}}

.helper{color:var(--muted); font-size:12px; line-height:1.35}
.footer{padding:16px; color:var(--muted); font-size:12px; text-align:center}

.center-wrap{min-height:100%; display:flex; align-items:center; justify-content:center; padding:var(--pad,18px)}
.login-card{max-width:420px; width:100%}
.error{color:#ffd1d8; background: rgba(255,77,109,.14); border:var(--border-w,1px) solid rgba(255,77,109,.28); padding:10px 12px; border-radius:var(--radius,14px)}

/* =========================
   App shell (Sidebar layout)
   ========================= */
.app{display:flex; min-height:100vh}
.sidebar{
  width:var(--sidebar-w,260px); flex:0 0 var(--sidebar-w,260px);
  position:sticky; top:0; height:100vh;
  background: var(--sidebar-bg);
  border-right:1px solid var(--border);
  backdrop-filter: blur(var(--blur,18px));
  padding:16px;
  display:flex; flex-direction:column; gap:14px;
}
.sidebar-brand{display:flex; align-items:center; gap:10px; padding:10px 10px; border:var(--border-w,1px) solid var(--border); border-radius:var(--radius-lg,18px); background: rgba(255,255,255,.03)}
.sb-title{font-weight:900; letter-spacing:.3px}
.sb-sub{color:var(--muted); font-size:12px; font-weight:600}
.sidebar-group{color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.12em; padding:0 10px}
.sidebar-nav{display:flex; flex-direction:column; gap:8px}
.sidebar-nav a{
  padding:10px 12px;
  border-radius:var(--radius,14px);
  border:var(--border-w,1px) solid transparent;
  background: rgba(255,255,255,.04);
  color:var(--text);
  font-weight:650;
}
.sidebar-nav a.active{border-color: rgba(45,140,255,.35); background: rgba(45,140,255,.14)}
.sidebar-nav a:hover{border-color: rgba(255,255,255,.16)}
.sidebar-footer{margin-top:auto}
.sb-user{display:flex; gap:10px; align-items:center; padding:12px; border-radius:var(--radius-lg,18px); border:var(--border-w,1px) solid var(--border); background: rgba(255,255,255,.03)}
.avatar{width:42px; height:42px; border-radius:var(--radius,14px); display:flex; align-items:center; justify-content:center; font-weight:900; background: rgba(45,140,255,.18); border:var(--border-w,1px) solid rgba(45,140,255,.22)}
.sb-name{font-weight:800}
.sb-role{color:var(--muted); font-size:12px}

.main{flex:1; min-width:0}

@media (max-width: 980px){
  .hamburger{display:inline-flex}
  .sidebar{
    position:fixed; left:-290px; top:0; z-index:50;
    transition:left .18s ease;
    box-shadow: 0 20px 60px rgba(0,0,0,.55);
  }
  .sidebar.open{left:0}
}

/* ============================================
   IMPORTANT: Native <select> dropdown list colors
   Some browsers render the dropdown list with a
   light background (white). If our global text
   color is light, options can look "blank".
   This forces readable option colors.
   ============================================ */
select option{
  background:#0b1220;
  color:#e7eefb;
}
select optgroup{
  background:#0b1220;
  color:#e7eefb;
}


/* Customizer: page blocks */
.custom-blocks{display:flex;flex-direction:column;gap:10px;margin:12px 0}
.custom-block{border:var(--border-w,1px) solid var(--border);background:rgba(255,255,255,.03);border-radius:var(--radius,14px);padding:12px}
.custom-block-title{font-weight:900;margin-bottom:6px}
.custom-block-body{color:var(--muted);font-size:13px;line-height:1.55}