/* ---------- Reset ---------- */
* { box-sizing: border-box; }
html, body { height: 100%; width: 100%; }
body { margin: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font: 16px/1.5 system-ui, Segoe UI, Roboto, Arial; }

/* ---------- Theme variables ---------- */
:root { --bg:#0f1320; --card:#121835; --ink:#e6eef8; --muted:#9fb2cc; --line:#2b314a; }
:root[data-theme="light"] { --bg:#f6f8fc; --card:#fff; --ink:#0b1736; --muted:#54627a; --line:#dfe3ee; }

body { background: var(--bg); color: var(--ink); }

/* ---------- Utilities ---------- */
.hidden { display:none!important; }
.right { margin-left:auto; }
.wrap { flex-wrap: wrap; }
.mt-1 { margin-top:8px; }

/* ---------- Buttons & Inputs ---------- */
button {
  padding:8px 12px; border-radius:8px; border:1px solid var(--line);
  background: color-mix(in oklch, var(--card), black 5%); color:var(--ink); cursor:pointer;
  transition: transform .02s ease, background .2s ease, border-color .2s ease;
}
button:hover { background: color-mix(in oklch, var(--card), black 10%); border-color: color-mix(in oklch, var(--line), black 10%); }
button:active { transform: translateY(1px); }
button:disabled { opacity:.6; cursor:not-allowed; }

input, select, textarea {
  min-width: 160px; padding:8px 10px; border-radius:8px; border:1px solid var(--line);
  background: color-mix(in oklch, var(--bg), black 5%); color:var(--ink); outline:none;
}
input:focus, select:focus, textarea:focus { border-color:#4b79ff; }

/* ---------- Layout ---------- */
header, footer { padding:16px 20px; border-bottom:1px solid var(--line); background:var(--bg); }
footer { border-bottom:none; border-top:1px solid var(--line); text-align:center; color:var(--muted); }
main { padding:16px 20px; max-width:1200px; margin:auto; }

.panel { border:1px solid var(--line); border-radius:12px; background:var(--card); padding:14px; margin-top:12px; }
.row { display:flex; gap:10px; align-items:center; }
.controls { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.grid3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }
@media (max-width:920px){ .grid3{ grid-template-columns:1fr; } }

h1 { margin:0 0 6px 0; font-size:22px; }
h2 { margin:4px 0 10px; font-size:18px; }
.hint { color:var(--muted); font-size:.92rem; }
.badge { display:inline-flex; gap:6px; align-items:center; padding:6px 10px; border:1px solid var(--line); border-radius:999px; background: color-mix(in oklch, var(--card), black 5%); }

/* ---------- Stats ---------- */
.stats { display:grid; gap:8px; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); }
.stat-card { border:1px solid var(--line); border-radius:12px; padding:12px; background: color-mix(in oklch, var(--bg), black 5%); }
.stat-title { opacity:.85; font-size:.9rem; margin-bottom:6px; }
.stat-value { font-size:1.25rem; font-weight:700; }
.chip { display:inline-block; padding:2px 8px; border-radius:999px; border:1px solid var(--line); font-size:.8rem; opacity:.95; margin-right:6px; }

/* ---------- Code/pre ---------- */
pre { background: color-mix(in oklch, var(--bg), black 8%); border:1px solid var(--line); color: color-mix(in oklch, var(--ink), black 10%); padding:10px; border-radius:8px; white-space:pre-wrap; word-break:break-word; }

/* ---------- Popup ---------- */
.popup-overlay { position:fixed; inset:0; background:rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center; z-index:1000; padding:16px; }
.popup-card { background:var(--card); color:var(--ink); padding:20px; border-radius:12px; width:min(92vw, 480px); max-height:80vh; overflow:auto; box-shadow:0 10px 40px rgba(0,0,0,.35); text-align:center; }

/* ---------- Tables (responsive) ---------- */
.table-wrap { overflow-x:auto; }
.table-wrap table { border-collapse:collapse; width:100%; }
.table-wrap th, .table-wrap td { padding:6px 8px; text-align:left; white-space:nowrap; }

/* Top report bar scrolls inside itself on small screens */
#appSection > .panel.row { overflow-x:auto; }

/* ---------- Mobile tweaks ---------- */
@media (max-width:768px){
  input, select, textarea { min-width:120px; }
  .panel { padding:12px; }
}
@media (max-width:420px){
  button { width:100%; }
  .controls { gap:6px; }
}

/* --- Header responsiveness --- */
@media (max-width: 768px){
  header.row { flex-wrap: wrap; }
  #userBox {
    margin-left: 0;
    width: 100%;
    justify-content: flex-start;
    gap: 8px;
    flex-wrap: wrap;
  }
  #userBox .badge,
  #userBox button { padding: 6px 10px; }
  h1 { font-size: 20px; }
}

/* Di layar sangat kecil, buat tombol full width agar rapi */
@media (max-width: 420px){
  #userBox button { width: auto; }
}

/* ---------- Overhaul Additions ---------- */
/* Entitlements tweaks */
#entitlementsSection .stats { margin-top: 8px; }
#entitlementsSection .stat-card .stat-value { font-size: 1.35rem; }

/* Nav tabs look */
#adminNav .controls { gap: 6px; }
#adminNav .navBtn {
  border-radius: 999px;
  padding: 6px 12px;
  font-size: .95rem;
}

header h1 span { font-size:.9rem; font-weight:normal; }