/* =====================================================================
   LAYOUT
   ===================================================================== */

/* signature: dot-grid tipis di background, kesan "console/blueprint",
   bukan gradient blob. Fixed biar gak ikut scroll. */
body{
  background-image:
    radial-gradient(circle, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 28px 28px;
  background-position: -14px -14px;
  background-attachment: fixed;
  scroll-behavior: smooth;
}

#login-screen{
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-5);
}

/* ---------- dashboard shell: sidebar (fixed) + main content ---------- */
.dashboard-main{
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-4) 96px;
  display: grid;
  gap: 52px;
}

.dashboard-topbar{
  display: flex; align-items: center; gap: var(--sp-3);
  margin-bottom: -var(--sp-2);
}

.page-header{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: var(--sp-4);
  flex: 1;
}
.page-header .title-block{ display: grid; gap: var(--sp-1); }
.page-header .hint{ color: var(--faint); font-size: 12px; margin-top: var(--sp-1); max-width: 52ch; }

.dashboard-page{ display: none; gap: var(--sp-5); }
.dashboard-page.active{ display: grid; }

.section-title{
  display: flex; align-items: baseline; gap: var(--sp-3);
  font-size: 13px; font-weight: 700; letter-spacing: .02em;
}
.section-title .eyebrow{ font-size: 11px; }
.section-title-line{ flex: 1; height: 1px; background: var(--border); }

/* stat grid: ringkasan angka (total/aktif/belum dipakai/dicabut) dalam
   grid nyata -- ini "grid" yang diminta, dan datanya beneran dipakai,
   bukan dekorasi */
.stat-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--sp-3);
}
.stat-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  display: grid;
  gap: var(--sp-1);
  position: relative;
  overflow: hidden;
}
.stat-card::before{
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--faint); opacity: .5;
}
.stat-card.n-accent::before{ background: var(--accent); opacity: 1; }
.stat-card.n-amber::before{ background: var(--amber); opacity: 1; }
.stat-card.n-danger::before{ background: var(--danger); opacity: 1; }
.stat-card .n{
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink-bright);
  line-height: 1;
}
.stat-card .n.accent{ color: var(--accent); }
.stat-card .n.amber{ color: var(--amber); }
.stat-card .n.danger{ color: var(--danger); }
.stat-card .l{ font-size: 11.5px; color: var(--muted); }

.toolbar{
  display: flex; gap: var(--sp-3); flex-wrap: wrap;
}

.section-stack{ display: grid; gap: var(--sp-4); }

/* grid widget buat tools, ganti dari stack vertikal -- kartu ngikutin
   lebar layar, 1 kolom di hp, 2+ di layar lebar */
.tools-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--sp-4);
  align-items: start;
}

@media (max-width: 560px){
  .page-header{ grid-template-columns: 1fr; }
  .page-header .btn{ justify-self: start; }
}