/* =====================================================
   CONTROL PANEL PUSAT — Design tokens
   Konsep: "ruang kontrol" — sidebar gelap seperti panel ops,
   konten terang untuk keterbacaan data, aksen indigo elektrik,
   dan denyut sinyal (pulse) untuk status "hidup" tiap klien.
   ===================================================== */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  --ink: #0b0f1a;
  --ink-soft: #131a2b;
  --ink-line: #232c42;
  --canvas: #f3f4f9;
  --panel: #ffffff;
  --line: #e6e8f0;
  --text: #171a2b;
  --text-dim: #6b7086;
  --accent: #5b5bf6;
  --accent-ink: #4040d6;
  --accent-soft: #eef0ff;
  --pulse: #22d3ee;
  --ok: #16a34a;
  --ok-soft: #e8f8ef;
  --warn: #d97706;
  --warn-soft: #fef3e2;
  --danger: #dc2626;
  --danger-soft: #fdecec;
  --radius: 14px;
  --radius-sm: 9px;
  --shadow-sm: 0 1px 2px rgba(15,18,35,.06), 0 1px 1px rgba(15,18,35,.04);
  --shadow-md: 0 8px 24px -8px rgba(15,18,35,.18);
  --shadow-lg: 0 20px 48px -12px rgba(15,18,35,.28);
  --ease: cubic-bezier(.4,0,.2,1);
  --sidebar-w: 264px;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; }
body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:var(--canvas);
  color:var(--text);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}
h1,h2,h3,h4{ font-family:'Space Grotesk',sans-serif; letter-spacing:-.01em; margin:0; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
code, .mono{ font-family:'JetBrains Mono',ui-monospace,monospace; }
::selection{ background: var(--accent-soft); color: var(--accent-ink); }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:#d5d8e4; border-radius:10px; border:2px solid var(--canvas); }
.sidebar::-webkit-scrollbar-thumb{ background:#2a3350; border-color:var(--ink); }

/* ---------- Shell ---------- */
.app-shell{ display:flex; min-height:100vh; }

/* ---------- Sidebar ---------- */
.sidebar{
  width:var(--sidebar-w);
  background:
    radial-gradient(600px 300px at 100% 0%, rgba(91,91,246,.18), transparent 60%),
    var(--ink);
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
    radial-gradient(600px 300px at 100% 0%, rgba(91,91,246,.18), transparent 60%);
  background-size: 28px 28px, 28px 28px, auto;
  color:#e7e9f5;
  display:flex;
  flex-direction:column;
  position:fixed;
  inset:0 auto 0 0;
  z-index:40;
  transition: transform .32s var(--ease);
  overflow-y:auto;
}
.sidebar-brand{
  display:flex; align-items:center; gap:12px;
  padding:22px 20px 18px;
  border-bottom:1px solid var(--ink-line);
}
.brand-icon{ font-size:26px; line-height:1; filter: drop-shadow(0 0 10px rgba(91,91,246,.5)); }
.brand-title{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:15px; }
.brand-sub{ font-size:11px; color:#8b91ab; margin-top:2px; }

.sidebar-nav{ padding:14px 12px; display:flex; flex-direction:column; gap:2px; flex:1; }
.nav-item{
  display:flex; align-items:center; gap:11px;
  padding:10px 12px; border-radius:10px;
  color:#c3c7dc; font-size:14px; font-weight:500;
  transition: background .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
}
.nav-icon{ font-size:16px; width:20px; text-align:center; }
.nav-item:hover{ background:rgba(255,255,255,.06); color:#fff; transform:translateX(2px); }
.nav-item.active{
  background: linear-gradient(90deg, rgba(91,91,246,.28), rgba(91,91,246,.08));
  color:#fff;
  box-shadow: inset 2px 0 0 var(--accent);
}

.sidebar-footer{ padding:14px; border-top:1px solid var(--ink-line); }
.admin-chip{ display:flex; align-items:center; gap:10px; padding:8px; border-radius:10px; }
.admin-avatar{
  width:34px; height:34px; border-radius:50%;
  background:linear-gradient(135deg, var(--accent), var(--pulse));
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:14px; color:#fff; flex-shrink:0;
}
.admin-name{ font-size:13px; font-weight:600; color:#fff; }
.admin-logout{ font-size:12px; color:#8b91ab; }
.admin-logout:hover{ color:var(--pulse); }

.sidebar-overlay{
  display:none; position:fixed; inset:0; background:rgba(11,15,26,.55);
  z-index:35; opacity:0; transition:opacity .25s var(--ease);
}

/* ---------- Main area ---------- */
.main-area{ flex:1; margin-left:var(--sidebar-w); min-width:0; display:flex; flex-direction:column; }

.topbar{
  height:64px; flex-shrink:0;
  display:flex; align-items:center; gap:14px;
  padding:0 22px;
  background:rgba(243,244,249,.85);
  backdrop-filter:blur(10px);
  position:sticky; top:0; z-index:20;
  border-bottom:1px solid var(--line);
}
.btn-icon{
  display:none; width:38px; height:38px; border-radius:10px;
  border:1px solid var(--line); background:var(--panel); cursor:pointer;
  align-items:center; justify-content:center;
}
.hamburger, .hamburger::before, .hamburger::after{
  content:''; display:block; width:16px; height:2px; background:var(--text); border-radius:2px;
}
.hamburger{ position:relative; }
.hamburger::before{ position:absolute; top:-5px; left:0; }
.hamburger::after{ position:absolute; top:5px; left:0; }
.page-title{ font-size:17px; font-weight:700; }
.topbar-spacer{ flex:1; }
.topbar-clock{ font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--text-dim); }

.page-content{ padding:24px; max-width:1320px; width:100%; margin:0 auto; }

/* ---------- Alerts ---------- */
.alert{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:13px 16px; border-radius:var(--radius-sm); margin-bottom:18px;
  font-size:13.5px; font-weight:500; animation: slideDown .3s var(--ease);
}
@keyframes slideDown{ from{ opacity:0; transform:translateY(-8px);} to{ opacity:1; transform:translateY(0);} }
.alert-success{ background:var(--ok-soft); color:#0c6b34; }
.alert-error{ background:var(--danger-soft); color:#a01717; }
.alert-info{ background:var(--accent-soft); color:var(--accent-ink); }
.alert-close{ background:none; border:none; font-size:18px; cursor:pointer; color:inherit; opacity:.6; }
.alert-close:hover{ opacity:1; }

/* ---------- Grid / cards ---------- */
.grid{ display:grid; gap:18px; }
.grid-4{ grid-template-columns: repeat(4, 1fr); }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-2{ grid-template-columns: 2fr 1fr; }
@media (max-width: 1100px){ .grid-4{ grid-template-columns: repeat(2,1fr);} .grid-3{ grid-template-columns: repeat(2,1fr);} .grid-2{ grid-template-columns:1fr;} }
@media (max-width: 620px){ .grid-4, .grid-3{ grid-template-columns: 1fr; } }

.card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); transition: box-shadow .2s var(--ease), transform .2s var(--ease);
}
.card-pad{ padding:20px; }
.card-hover:hover{ box-shadow:var(--shadow-md); transform:translateY(-2px); }

.stat-card{ padding:18px 20px; display:flex; flex-direction:column; gap:6px; position:relative; overflow:hidden; }
.stat-icon{ font-size:20px; }
.stat-value{ font-family:'Space Grotesk',sans-serif; font-size:26px; font-weight:700; }
.stat-label{ font-size:12.5px; color:var(--text-dim); font-weight:500; }
.stat-accent{ position:absolute; right:-10px; top:-10px; width:80px; height:80px; border-radius:50%; opacity:.08; }

.section-head{ display:flex; align-items:center; justify-content:space-between; margin:28px 0 14px; gap:12px; flex-wrap:wrap; }
.section-head h2{ font-size:16px; font-weight:700; }
.section-head .muted{ color:var(--text-dim); font-size:13px; }

/* ---------- Pulse indicator (signature element) ---------- */
.pulse-dot{
  position:relative; width:9px; height:9px; border-radius:50%; flex-shrink:0; display:inline-block;
}
.pulse-dot.live{ background:var(--ok); box-shadow:0 0 0 rgba(22,163,74,.5); animation: pulseRing 2s infinite; }
.pulse-dot.warn{ background:var(--warn); }
.pulse-dot.dead{ background:var(--danger); }
@keyframes pulseRing{
  0%{ box-shadow:0 0 0 0 rgba(22,163,74,.45); }
  70%{ box-shadow:0 0 0 8px rgba(22,163,74,0); }
  100%{ box-shadow:0 0 0 0 rgba(22,163,74,0); }
}

/* ---------- Produk card ---------- */
.produk-card{ padding:20px; display:flex; flex-direction:column; gap:10px; }
.produk-top{ display:flex; align-items:center; gap:12px; }
.produk-icon{
  width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  font-size:20px; flex-shrink:0;
}
.produk-name{ font-weight:700; font-size:15px; }
.produk-slug{ font-size:11.5px; color:var(--text-dim); font-family:'JetBrains Mono',monospace; }
.produk-stats{ display:flex; gap:16px; margin-top:4px; }
.produk-stat b{ display:block; font-size:18px; font-family:'Space Grotesk',sans-serif; }
.produk-stat span{ font-size:11px; color:var(--text-dim); }
.produk-version{ font-family:'JetBrains Mono',monospace; font-size:11.5px; background:var(--canvas); padding:3px 8px; border-radius:6px; width:fit-content; }

/* ---------- Table ---------- */
.table-wrap{ overflow-x:auto; border-radius:var(--radius); border:1px solid var(--line); background:var(--panel); }
table{ width:100%; border-collapse:collapse; min-width:720px; font-size:13.5px; }
thead th{
  text-align:left; padding:12px 16px; background:var(--canvas); color:var(--text-dim);
  font-weight:600; font-size:11.5px; text-transform:uppercase; letter-spacing:.04em;
  border-bottom:1px solid var(--line); white-space:nowrap;
}
tbody td{ padding:13px 16px; border-bottom:1px solid var(--line); vertical-align:middle; }
tbody tr:last-child td{ border-bottom:none; }
tbody tr{ transition: background .15s var(--ease); }
tbody tr:hover{ background:#fafbff; }
.cell-main{ font-weight:600; }
.cell-sub{ font-size:12px; color:var(--text-dim); margin-top:2px; }

/* ---------- Badge ---------- */
.badge{
  display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:20px;
  font-size:11.5px; font-weight:600;
}
.badge-success{ background:var(--ok-soft); color:#0c6b34; }
.badge-warning{ background:var(--warn-soft); color:#8a5209; }
.badge-danger{ background:var(--danger-soft); color:#a01717; }
.badge-muted{ background:var(--canvas); color:var(--text-dim); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:9px 16px; border-radius:9px; font-size:13.5px; font-weight:600;
  border:1px solid transparent; cursor:pointer; transition: all .18s var(--ease);
  white-space:nowrap;
}
.btn:active{ transform:scale(.97); }
.btn-primary{ background:var(--accent); color:#fff; box-shadow:0 2px 8px rgba(91,91,246,.35); }
.btn-primary:hover{ background:var(--accent-ink); box-shadow:0 4px 14px rgba(91,91,246,.45); }
.btn-outline{ background:var(--panel); border-color:var(--line); color:var(--text); }
.btn-outline:hover{ border-color:var(--accent); color:var(--accent-ink); }
.btn-danger-outline{ background:var(--panel); border-color:var(--danger-soft); color:var(--danger); }
.btn-danger-outline:hover{ background:var(--danger-soft); }
.btn-sm{ padding:6px 12px; font-size:12.5px; border-radius:7px; }
.btn-icon-sm{ width:32px; height:32px; padding:0; border-radius:8px; border:1px solid var(--line); background:var(--panel); }
.btn-icon-sm:hover{ border-color:var(--accent); }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }

/* ---------- Forms ---------- */
.form-group{ margin-bottom:16px; }
label{ display:block; font-size:13px; font-weight:600; margin-bottom:6px; color:var(--text); }
.form-hint{ font-size:11.5px; color:var(--text-dim); margin-top:5px; }
input[type=text], input[type=password], input[type=date], input[type=number],
input[type=email], input[type=tel], select, textarea{
  width:100%; padding:10px 13px; border-radius:9px; border:1.5px solid var(--line);
  font-size:14px; font-family:inherit; background:var(--panel); color:var(--text);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
input:focus, select:focus, textarea:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);
}
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:560px){ .form-row{ grid-template-columns:1fr; } }

/* ---------- Login page ---------- */
.login-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;
  background:
    radial-gradient(700px 400px at 15% 10%, rgba(91,91,246,.25), transparent 60%),
    radial-gradient(700px 400px at 85% 90%, rgba(34,211,238,.18), transparent 60%),
    var(--ink);
  position:relative; overflow:hidden;
}
.login-wrap::before{
  content:''; position:absolute; inset:0;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:34px 34px;
}
.login-card{
  position:relative; width:100%; max-width:380px; background:rgba(19,26,43,.7);
  backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,.08);
  border-radius:18px; padding:34px 30px; box-shadow:var(--shadow-lg);
  animation: fadeUp .5s var(--ease);
}
@keyframes fadeUp{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:translateY(0);} }
.login-icon{ font-size:34px; margin-bottom:6px; }
.login-title{ color:#fff; font-size:20px; font-weight:700; margin-bottom:2px; }
.login-sub{ color:#8b91ab; font-size:13px; margin-bottom:22px; }
.login-card label{ color:#c3c7dc; }
.login-card input{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12); color:#fff; }
.login-card input:focus{ border-color:var(--pulse); box-shadow:0 0 0 3px rgba(34,211,238,.15); }
.login-card input::placeholder{ color:#565d76; }

/* ---------- Modal ---------- */
.modal-backdrop{
  display:none; position:fixed; inset:0; background:rgba(11,15,26,.55); backdrop-filter:blur(2px);
  z-index:60; align-items:center; justify-content:center; padding:20px;
}
.modal-backdrop.open{ display:flex; animation:fadeIn .2s var(--ease); }
@keyframes fadeIn{ from{opacity:0;} to{opacity:1;} }
.modal{
  background:var(--panel); border-radius:16px; width:100%; max-width:480px;
  box-shadow:var(--shadow-lg); animation: fadeUp .25s var(--ease); max-height:90vh; overflow-y:auto;
}
.modal-head{ padding:20px 22px 0; display:flex; align-items:center; justify-content:space-between; }
.modal-title{ font-size:16px; font-weight:700; }
.modal-body{ padding:18px 22px 22px; }
.modal-close{ background:none; border:none; font-size:20px; cursor:pointer; color:var(--text-dim); }

/* ---------- Empty state ---------- */
.empty-state{ text-align:center; padding:52px 20px; color:var(--text-dim); }
.empty-state .icon{ font-size:36px; margin-bottom:10px; }
.empty-state h3{ color:var(--text); font-size:15px; margin-bottom:6px; }
.empty-state p{ font-size:13px; margin:0 0 16px; }

/* ---------- Token box ---------- */
.token-box{
  font-family:'JetBrains Mono',monospace; font-size:11.5px; background:var(--canvas);
  border:1px dashed var(--line); border-radius:8px; padding:10px 12px; word-break:break-all;
  color:var(--text-dim); max-height:80px; overflow-y:auto;
}

/* ---------- Progress ring for update push ---------- */
.spinner{
  width:14px; height:14px; border:2px solid rgba(255,255,255,.4); border-top-color:#fff;
  border-radius:50%; animation:spin .7s linear infinite; display:inline-block;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------- Responsive: sidebar drawer on mobile ---------- */
@media (max-width: 900px){
  .sidebar{ transform:translateX(-100%); box-shadow:var(--shadow-lg); }
  .sidebar.open{ transform:translateX(0); }
  .sidebar-overlay.open{ display:block; opacity:1; }
  .main-area{ margin-left:0; }
  .btn-icon{ display:flex; }
  .page-content{ padding:16px; }
  .grid-2{ grid-template-columns:1fr; }
}
@media (max-width:480px){
  .topbar-clock{ display:none; }
  .stat-value{ font-size:22px; }
}