:root{
  --bg:#0b0f17; --panel:#111827; --panel-2:#0f172a; --text:#e5e7eb; --muted:#9ca3af;
  --brand:#22d3ee; --brand-2:#818cf8; --radius:16px; --shadow:0 10px 30px rgba(0,0,0,.25);
  --ok:#10b981; --warn:#f59e0b; --danger:#ef4444;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font:15px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Inter,sans-serif;
  background:linear-gradient(180deg,var(--bg),#06080e); color:var(--text)
}

/* ===== Layout (collapsible sidebar) ===== */
.app{
  display:grid; grid-template-columns:260px 1fr; min-height:100vh;
  transition:grid-template-columns .28s ease;
}
.app.collapsed{ grid-template-columns:80px 1fr; }

/* ===== Sidebar ===== */
.sidebar{
  position:sticky; top:0; height:100vh;
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  padding:20px 12px; box-shadow:var(--shadow);
}
/* Brand + collapse button */
.brand{
  display:flex; align-items:center; gap:10px; justify-content:space-between;
  font-weight:700; letter-spacing:.4px;
}
.collapse-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:10px;
  background:#0b1220; border:1px solid rgba(255,255,255,.08);
  color:var(--text); cursor:pointer;
}
.collapse-btn:hover{ border-color:rgba(255,255,255,.2) }

/* Collapsed state: hide only the brand text, keep the button visible */
.app.collapsed .brand .brand-text{ display:none; }
/* DO NOT hide .collapse-btn in collapsed state anymore */

.menu{ margin-top:16px; display:flex; flex-direction:column; gap:6px }
.menu a{
  color:var(--text); text-decoration:none; padding:10px 12px; border-radius:12px;
  display:flex; align-items:center; gap:12px; white-space:nowrap;
}
.menu a:hover{ background:rgba(255,255,255,.06) }
.menu .active{ background:rgba(129,140,248,.18); outline:1px solid rgba(129,140,248,.35) }

.icon{ width:22px; text-align:center; opacity:.9 }   /* <i class="... icon"></i> */
.label{ overflow:hidden; text-overflow:ellipsis }

/* Collapsed: icons only */
.app.collapsed .brand .brand-text,

.app.collapsed .menu a{ justify-content:center; padding:10px }
.app.collapsed .menu .label{ display:none }

/* ===== Main content ===== */
.content{ padding:28px }
.header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:22px }
.search input{
  background:#0b1220; border:1px solid rgba(255,255,255,.08); color:var(--text);
  padding:10px 12px; border-radius:12px; width:260px;
}
.card{
  background:linear-gradient(180deg,#0d1424,#0b1220); border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius); padding:18px; box-shadow:var(--shadow)
}
.grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:16px }
.col-4{grid-column:span 4} .col-6{grid-column:span 6} .col-12{grid-column:span 12}

/* ===== Tables ===== */
.table{ width:100%; border-collapse:collapse; font-size:14px }
.table th, .table td{ padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.06); vertical-align:middle; text-align:left }
.table th{ color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.04em; font-size:12px }
.table th:last-child, .table td:last-child{ text-align:right }

.btn{ padding:10px 14px; border-radius:12px; background:linear-gradient(90deg,var(--brand),var(--brand-2));
  border:0; color:#05102b; font-weight:700; cursor:pointer; box-shadow:var(--shadow) }
.btn.secondary{ background:#0b1220; color:var(--text); border:1px solid rgba(255,255,255,.08) }
.btn.small{ padding:8px 12px; font-weight:600 }

.btn.action{ padding:6px 12px; font-size:13px; border-radius:8px; margin-left:6px }
a.btn.action{ display:inline-block }
.btn.edit{ background:rgba(129,140,248,.18); color:#aeb4ff }
.btn.delete{ background:rgba(239,68,68,.18); color:#ff9a9a }
.btn.edit:hover{ background:rgba(129,140,248,.3) }
.btn.delete:hover{ background:rgba(239,68,68,.3) }

/* ===== Forms ===== */
.form{ display:grid; gap:10px }
.input{ display:grid; gap:6px }
.input input,.input select,.input textarea{
  padding:10px 12px; border-radius:12px; background:#0b1220; border:1px solid rgba(255,255,255,.08); color:var(--text)
}
.kpi{ font-size:40px; margin:8px 0 0 }

/* ===== Mobile ===== */
.burger{ display:none }
@media (max-width:960px){
  .app{ grid-template-columns:1fr }
  .sidebar{ position:fixed; left:0; top:0; width:280px; transform:translateX(-100%); transition:.25s transform; z-index:9999 }
  .sidebar.open{ transform:translateX(0) }
  .burger{ display:inline-flex; align-items:center; gap:8px; padding:10px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.08); background:#0b1220; color:var(--text) }
  .content{ padding:20px }
}