:root{
  --bg1:#0b1030;
  --bg2:#1a1f4a;
  --card: rgba(255,255,255,.06);
  --border: rgba(255,255,255,.10);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.70);
  --input: rgba(0,0,0,.20);
  --shadow: rgba(0,0,0,.25);

  --pri1:#00e5ff;
  --pri2:#b800ff;

  --warn1:#ffb703;
  --warn2:#fb8500;

  --danger1:#ff4d6d;
  --danger2:#c9184a;
}

[data-theme="light"]{
  --bg1:#f4f6ff;
  --bg2:#e8ecff;
  --card: rgba(255,255,255,.75);
  --border: rgba(0,0,0,.08);
  --text: rgba(0,0,0,.88);
  --muted: rgba(0,0,0,.60);
  --input: rgba(255,255,255,.70);
  --shadow: rgba(0,0,0,.12);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color: var(--text);
  background:
    radial-gradient(1200px 600px at 20% 10%, color-mix(in oklab, var(--pri1) 18%, transparent), transparent 60%),
    radial-gradient(900px 500px at 80% 20%, color-mix(in oklab, var(--pri2) 16%, transparent), transparent 55%),
    radial-gradient(900px 600px at 40% 90%, color-mix(in oklab, var(--warn1) 10%, transparent), transparent 55%),
    linear-gradient(180deg, var(--bg1), var(--bg2));
}

/* Layout container */
.container{
  width: min(1180px, 94%);
  margin: 28px auto;
}

.card-wide{
  background: var(--card);
  border:1px solid var(--border);
  border-radius: 22px;
  padding: 18px;
  box-shadow: 0 22px 90px var(--shadow);
  backdrop-filter: blur(10px);
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 12px 14px;
  border-radius: 14px;
  text-decoration:none;
  font-weight: 900;
  border:1px solid var(--border);
  background: rgba(0,0,0,.18);
  color: var(--text);
  cursor:pointer;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn-primary{
  border:none;
  color:#0b1030;
  background: linear-gradient(90deg, var(--pri1), var(--pri2));
}
.btn-warn{
  border:none;
  color:#111;
  background: linear-gradient(90deg, var(--warn1), var(--warn2));
}
.btn-danger{
  border:none;
  color:#fff;
  background: linear-gradient(90deg, var(--danger1), var(--danger2));
}
.btn-ghost{
  background: rgba(0,0,0,.10);
}

/* Inputs */
.input{
  width:100%;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid color-mix(in oklab, var(--border) 120%, transparent);
  background: var(--input);
  color: var(--text);
  outline:none;
  font-size:15px;
}
.input:focus{
  border-color: color-mix(in oklab, var(--pri1) 55%, transparent);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--pri1) 18%, transparent);
}

/* Badges / Pills */
.badge, .pill{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(255,255,255,.08);
  border:1px solid var(--border);
  font-size:12px;
  opacity:.95;
}
.pill-good{border-color: rgba(0,255,133,.35);}
.pill-bad{border-color: rgba(255,77,109,.45);}
.pill-mid{border-color: rgba(255,183,3,.55);}

.muted{opacity:.75;font-size:13px}

/* Table */
.table-card{
  background: rgba(255,255,255,.06);
  border:1px solid var(--border);
  border-radius: 18px;
  overflow:hidden;
}
table{width:100%;border-collapse:collapse}
th,td{
  padding:12px;
  border-bottom:1px solid rgba(255,255,255,.08);
  text-align:left;
  vertical-align:top;
}
[data-theme="light"] th,[data-theme="light"] td{
  border-bottom:1px solid rgba(0,0,0,.06);
}
th{font-size:13px;opacity:.85}
td{font-size:14px}

/* Header block */
.page-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:14px;
}
.page-title{
  margin:0;
  font-size: 28px;
  font-weight: 1000;
  letter-spacing:.2px;
}
.back{
  text-decoration:none;
  color: var(--text);
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--border);
  background: rgba(0,0,0,.12);
}

/* Search: input full + tombol sejajar 2 kolom (fix ukuran sama) */
.searchbar{margin:10px 0 14px}
.search-actions{
  margin-top:10px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}
.search-actions .btn,
.search-actions button{
  width:100%;
  height: 48px;               /* FIX: sama tinggi */
  padding: 0 14px;            /* FIX: sama padding */
  border-radius: 14px;
  font-size: 15px;
  font-weight: 1000;
}
.search-actions button{border:none}

/* Toast */
.toast{
  position:fixed;
  top:18px; right:18px;
  z-index:9999;
  min-width:260px;
  max-width:420px;
  padding:12px 12px;
  border-radius:16px;
  border:1px solid var(--border);
  background: rgba(20,22,40,.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 60px rgba(0,0,0,.35);
  display:flex; align-items:flex-start; gap:10px;
  animation: toastIn .22s ease;
}
.toast-msg{ font-weight:900; line-height:1.35; }
.toast-close{
  margin-left:auto;
  background:transparent;border:none;
  color: var(--text);
  font-size:16px; cursor:pointer; opacity:.85;
}
.toast-success{ border-color: rgba(0,255,133,.35); }
.toast-error{ border-color: rgba(255,77,109,.45); }
.toast-warn{ border-color: rgba(255,183,3,.55); }
.toast-info{ border-color: rgba(0,229,255,.35); }

@keyframes toastIn{
  from{ transform: translateY(-8px); opacity:0; }
  to{ transform: translateY(0); opacity:1; }
}

/* Responsive */
@media (max-width:720px){
  .page-title{font-size:24px}
}

/* === FIX: halaman HP suka kepotong bawah (safe area + dynamic viewport) === */
html, body { height: 100%; }

body{
  /* 100dvh = tinggi viewport real di mobile (lebih aman dari 100vh) */
  min-height: 100dvh;

  /* kasih ruang bawah biar ga ketutup navbar hp */
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
}

/* kalau container kamu sebelumnya center pakai flex, ini sering bikin kepotong */
.container{
  min-height: 100dvh;
  padding-bottom: calc(40px + env(safe-area-inset-bottom));
}

/* card utama jangan overflow hidden kalau di dalam ada table / list panjang */
.card-wide{
  overflow: visible;
}

/* opsional: kasih “ruang nafas” di bawah tabel/list */
.table-card,
.cards,
.tablewrap{
  margin-bottom: 28px;
}