/* ============================================================
   Stronix Algo — Material theme (sidebar + top bar + multi-color)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --sidebar-bg:#141925; --sidebar-dark:#0f131c;
  --body-bg:#eef1f6; --card-bg:#fff; --border:#e6e9ef;
  --text:#1c2230; --text-soft:#6b7484; --text-muted:#9aa3b2;
  --radius:14px; --radius-lg:20px;
  --shadow:0 1px 3px rgba(15,23,42,.05), 0 12px 30px -12px rgba(15,23,42,.12);
  --font:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  /* default accent (indigo) */
  --accent:#6366f1; --accent-dark:#4f46e5; --accent-rgb:99,102,241;
}
[data-theme="indigo"]{ --accent:#6366f1; --accent-dark:#4f46e5; --accent-rgb:99,102,241; }
[data-theme="blue"]{   --accent:#2563eb; --accent-dark:#1d4ed8; --accent-rgb:37,99,235; }
[data-theme="emerald"]{--accent:#10b981; --accent-dark:#059669; --accent-rgb:16,185,129; }
[data-theme="teal"]{   --accent:#14b8a6; --accent-dark:#0d9488; --accent-rgb:20,184,166; }
[data-theme="violet"]{ --accent:#7c3aed; --accent-dark:#6d28d9; --accent-rgb:124,58,237; }
[data-theme="rose"]{   --accent:#ec4899; --accent-dark:#db2777; --accent-rgb:236,72,153; }
[data-theme="amber"]{  --accent:#f59e0b; --accent-dark:#d97706; --accent-rgb:245,158,11; }
[data-theme="slate"]{  --accent:#475569; --accent-dark:#334155; --accent-rgb:71,85,105; }

*{ margin:0; padding:0; box-sizing:border-box; }
body{ font-family:var(--font); background:var(--body-bg); color:var(--text); -webkit-font-smoothing:antialiased; }
a{ text-decoration:none; color:inherit; }

/* ---------- Layout ---------- */
.layout{ display:flex; min-height:100vh; }
.sidebar{
  width:248px; background:var(--sidebar-bg); color:#cfd6e4; position:fixed; top:0; bottom:0; left:0;
  display:flex; flex-direction:column; z-index:40; transition:transform .25s;
}
.sidebar-brand{ padding:20px 20px; display:flex; align-items:center; gap:11px; border-bottom:1px solid rgba(255,255,255,.06); }
.sidebar-brand .logo{ width:38px; height:38px; border-radius:11px; background:linear-gradient(135deg,var(--accent),var(--accent-dark)); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; box-shadow:0 6px 16px -4px rgba(var(--accent-rgb),.6); }
.sidebar-brand .name{ font-size:18px; font-weight:800; color:#fff; letter-spacing:-.02em; }
.sidebar-brand .name span{ background:linear-gradient(135deg,var(--accent),var(--accent-dark)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.sidebar-menu{ list-style:none; padding:12px 10px; flex:1; overflow-y:auto; }
.sidebar-menu .sec{ font-size:10.5px; text-transform:uppercase; letter-spacing:1.2px; color:#5b6577; padding:14px 12px 6px; font-weight:700; }
.sidebar-menu a{ display:flex; align-items:center; gap:12px; padding:11px 13px; border-radius:11px; color:#aeb6c6; font-size:14px; font-weight:600; margin-bottom:2px; transition:.15s; }
.sidebar-menu a i{ width:18px; text-align:center; font-size:15px; opacity:.85; }
.sidebar-menu a:hover{ background:rgba(255,255,255,.06); color:#fff; }
.sidebar-menu a.active{ background:linear-gradient(135deg,var(--accent),var(--accent-dark)); color:#fff; box-shadow:0 8px 18px -8px rgba(var(--accent-rgb),.7); }
.sidebar-menu a.active i{ opacity:1; }

.main{ flex:1; margin-left:248px; min-width:0; display:flex; flex-direction:column; }

/* ---------- Top bar ---------- */
.topbar{
  height:64px; background:#fff; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; padding:0 22px; position:sticky; top:0; z-index:30;
}
.topbar .left{ display:flex; align-items:center; gap:14px; }
.topbar .menu-btn{ display:none; background:none; border:none; font-size:20px; color:var(--text); cursor:pointer; }
.topbar h1{ font-size:17px; font-weight:800; letter-spacing:-.02em; }
.topbar .right{ display:flex; align-items:center; gap:14px; }

/* theme color switcher */
.theme-dots{ display:flex; gap:7px; align-items:center; }
.theme-dots form{ display:inline; }
.theme-dots button{ width:18px; height:18px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px var(--border); cursor:pointer; padding:0; transition:transform .15s; }
.theme-dots button:hover{ transform:scale(1.18); }
.dot-indigo{background:#6366f1}.dot-blue{background:#2563eb}.dot-emerald{background:#10b981}.dot-teal{background:#14b8a6}.dot-violet{background:#7c3aed}.dot-rose{background:#ec4899}.dot-amber{background:#f59e0b}.dot-slate{background:#475569}

.user-chip{ display:flex; align-items:center; gap:9px; }
.user-chip .av{ width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent-dark)); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; }
.user-chip .nm{ font-size:13px; font-weight:700; line-height:1.1; }
.user-chip .rl{ font-size:11px; color:var(--text-muted); }

/* ---------- Content ---------- */
.content{ padding:24px; flex:1; }
.page-head{ margin-bottom:20px; }
.page-head h2{ font-size:22px; font-weight:800; letter-spacing:-.03em; }
.page-head p{ color:var(--text-soft); font-size:14px; margin-top:3px; }

.card{ background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow); }
.card .card-h{ padding:16px 20px; border-bottom:1px solid var(--border); font-weight:800; font-size:14px; }
.card .card-b{ padding:20px; }

.grid{ display:grid; gap:18px; }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.stat{ background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:18px 20px; }
.stat .ic{ width:44px; height:44px; border-radius:13px; background:rgba(var(--accent-rgb),.12); color:var(--accent); display:flex; align-items:center; justify-content:center; font-size:19px; margin-bottom:12px; }
.stat .v{ font-size:24px; font-weight:800; letter-spacing:-.02em; }
.stat .l{ font-size:12.5px; color:var(--text-soft); font-weight:600; margin-top:2px; }

.btn{ display:inline-flex; align-items:center; gap:8px; padding:11px 20px; border-radius:12px; border:none; font-family:var(--font); font-weight:700; font-size:14px; cursor:pointer; transition:.2s; }
.btn-accent{ background:linear-gradient(135deg,var(--accent),var(--accent-dark)); color:#fff; box-shadow:0 8px 20px -6px rgba(var(--accent-rgb),.55); }
.btn-accent:hover{ transform:translateY(-2px); }
.badge{ display:inline-block; padding:3px 11px; border-radius:30px; font-size:11.5px; font-weight:700; }
.badge-soft{ background:rgba(var(--accent-rgb),.12); color:var(--accent-dark); }
.badge-off{ background:#fee2e2; color:#b91c1c; }

/* ---------- Login ---------- */
.login-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#0f131c,#1c2336 60%,#0f131c); padding:20px; }
.login-card{ width:100%; max-width:400px; background:#fff; border-radius:24px; padding:36px 32px; box-shadow:0 40px 80px -30px rgba(0,0,0,.6); }
.login-card .brand{ text-align:center; margin-bottom:26px; }
.login-card .brand .logo{ width:56px; height:56px; border-radius:16px; background:linear-gradient(135deg,var(--accent),var(--accent-dark)); color:#fff; display:flex; align-items:center; justify-content:center; font-size:24px; font-weight:800; margin:0 auto 14px; box-shadow:0 12px 28px -8px rgba(var(--accent-rgb),.7); }
.login-card h1{ font-size:22px; font-weight:800; letter-spacing:-.02em; }
.login-card .sub{ color:var(--text-soft); font-size:13.5px; margin-top:4px; }
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:12.5px; font-weight:700; color:var(--text-soft); margin-bottom:6px; }
.field input{ width:100%; padding:13px 15px; border:1.5px solid var(--border); border-radius:12px; font-family:var(--font); font-size:14.5px; transition:.15s; }
.field input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 4px rgba(var(--accent-rgb),.14); }
.login-btn{ width:100%; padding:14px; border:none; border-radius:12px; background:linear-gradient(135deg,var(--accent),var(--accent-dark)); color:#fff; font-weight:800; font-size:15px; cursor:pointer; box-shadow:0 12px 26px -8px rgba(var(--accent-rgb),.6); }
.login-err{ background:#fee2e2; color:#b91c1c; padding:11px 14px; border-radius:11px; font-size:13px; font-weight:600; margin-bottom:16px; }

/* ---------- Responsive ---------- */
.backdrop{ display:none; }
@media(max-width:900px){
  .sidebar{ transform:translateX(-100%); } .sidebar.open{ transform:none; }
  .main{ margin-left:0; }
  .topbar .menu-btn{ display:block; }
  .grid-4{ grid-template-columns:1fr 1fr; }
  .backdrop.show{ display:block; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:35; }
}
@media(max-width:560px){ .grid-4{ grid-template-columns:1fr; } }