/* ============================================================
   styles.css — tema halaman login/register/admin
   Selaras dengan dashboard (IBM Plex Sans, Chakra Petch, emas #a16207)
   ============================================================ */

:root{
  --bg:#eef0f2;
  --bg-2:#f6f7f8;
  --paper:#ffffff;
  --ink:#0f1115;
  --ink-2:#3f4651;
  --ink-3:#6b7280;
  --gold:#a16207;
  --gold-2:#ca8a04;
  --gold-soft:#e7d8b5;
  --green:#15803d;
  --red:#b91c1c;
  --amber:#b45309;
  --border:#e3e5e8;
  --border-2:#cfd3d8;
  --shadow:0 10px 40px rgba(15,23,42,.10);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:'IBM Plex Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1100px 600px at 12% -8%, #fff 0%, rgba(255,255,255,0) 55%),
    radial-gradient(900px 500px at 110% 110%, #f1e9d6 0%, rgba(241,233,214,0) 55%),
    var(--bg);
  -webkit-font-smoothing:antialiased;
}
.mono{ font-family:'JetBrains Mono',ui-monospace,monospace; }

/* ---------- Layout pembungkus ---------- */
.auth-wrap{
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:28px 16px;
}
.auth-card{
  width:100%; max-width:430px;
  background:var(--paper);
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:var(--shadow);
  padding:34px 30px 26px;
}
.auth-card.wide{ max-width:980px; }

/* ---------- Brand ---------- */
.brand{ display:flex; align-items:center; gap:12px; margin-bottom:22px; }
.brand .logo{
  width:46px; height:46px; border-radius:11px; flex:none;
  background:linear-gradient(135deg,#a16207 0%,#ca8a04 100%);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-family:'Chakra Petch',sans-serif; font-weight:700; font-size:20px;
  box-shadow:0 6px 16px rgba(161,98,7,.28);
}
.brand .bt-name{ font-family:'Chakra Petch',sans-serif; font-weight:700; font-size:15px; line-height:1.1; letter-spacing:.2px; }
.brand .bt-sub{ font-size:11px; color:var(--ink-3); margin-top:2px; letter-spacing:.3px; }

/* ---------- Tipografi ---------- */
h1.title{ font-family:'Chakra Petch',sans-serif; font-size:25px; font-weight:700; margin:4px 0 2px; }
.sub{ color:var(--ink-3); font-size:13px; margin:0 0 20px; }
.eyebrow{ font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:var(--gold); }

/* ---------- Form ---------- */
label{ display:block; font-size:12px; font-weight:600; color:var(--ink-2); margin:14px 0 6px; }
input[type=text],input[type=email],input[type=password]{
  width:100%; padding:12px 13px; font-size:14px;
  border:1px solid var(--border-2); border-radius:11px; background:var(--bg-2);
  color:var(--ink); outline:none; transition:border-color .15s, box-shadow .15s, background .15s;
  font-family:inherit;
}
input:focus{ border-color:var(--gold-2); background:#fff; box-shadow:0 0 0 3px rgba(202,138,4,.15); }
.pw-row{ position:relative; }
.pw-toggle{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  background:none; border:none; cursor:pointer; color:var(--ink-3); font-size:11px;
  font-family:'JetBrains Mono',monospace; text-transform:uppercase; letter-spacing:.5px; padding:4px 6px;
}
.pw-toggle:hover{ color:var(--gold); }

.btn-primary{
  width:100%; margin-top:22px; padding:13px 16px;
  background:linear-gradient(135deg,#a16207 0%,#ca8a04 100%);
  color:#fff; font-weight:700; font-size:14px; border:none; border-radius:11px; cursor:pointer;
  font-family:inherit; letter-spacing:.3px; box-shadow:0 6px 18px rgba(161,98,7,.25);
  transition:transform .08s, box-shadow .15s, opacity .15s;
}
.btn-primary:hover{ box-shadow:0 8px 22px rgba(161,98,7,.34); }
.btn-primary:active{ transform:translateY(1px); }
.btn-primary:disabled{ opacity:.6; cursor:not-allowed; }

.btn-ghost{
  padding:9px 14px; background:#fff; border:1px solid var(--border-2); border-radius:10px;
  font-weight:600; font-size:13px; color:var(--ink); cursor:pointer; font-family:inherit;
}
.btn-ghost:hover{ border-color:var(--gold-soft); color:var(--gold); }

/* ---------- Pesan ---------- */
.msg{ margin:6px 0 2px; padding:11px 13px; border-radius:10px; font-size:12.5px; line-height:1.5; }
.msg.info{ background:#fef7e6; border:1px solid #f0d98a; color:#7a5800; }
.msg.ok{ background:#e8f6ee; border:1px solid #a8d8bb; color:#14653a; }
.msg.err{ background:#fdeaea; border:1px solid #f0b4b4; color:#9b1c1c; }

/* ---------- Links / footer ---------- */
.links{ margin-top:18px; font-size:13px; color:var(--ink-3); text-align:center; }
.links a{ color:var(--gold); font-weight:600; text-decoration:none; }
.links a:hover{ text-decoration:underline; }
.foot{ margin-top:20px; padding-top:16px; border-top:1px solid var(--border); text-align:center; font-size:10.5px; color:var(--ink-3); letter-spacing:.3px; }

/* ---------- Admin: tabel ---------- */
.admin-head{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:18px; }
.stat-row{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.stat{ background:var(--bg-2); border:1px solid var(--border); border-radius:12px; padding:10px 14px; min-width:108px; }
.stat .n{ font-family:'Chakra Petch',sans-serif; font-size:22px; font-weight:700; }
.stat .l{ font-size:10px; text-transform:uppercase; letter-spacing:.8px; color:var(--ink-3); margin-top:1px; }

.tbl-wrap{ overflow-x:auto; border:1px solid var(--border); border-radius:12px; }
table{ width:100%; border-collapse:collapse; font-size:13px; min-width:640px; }
thead th{
  text-align:left; padding:11px 12px; background:var(--bg-2);
  font-size:10px; letter-spacing:.8px; text-transform:uppercase; color:var(--ink-3);
  border-bottom:1px solid var(--border-2); font-family:'JetBrains Mono',monospace; font-weight:600;
}
tbody td{ padding:11px 12px; border-bottom:1px solid var(--border); vertical-align:middle; }
tbody tr:last-child td{ border-bottom:none; }

.pill{ display:inline-block; padding:3px 9px; border-radius:999px; font-size:11px; font-weight:600; border:1px solid transparent; }
.pill.pending{ background:#fef7e6; color:#7a5800; border-color:#f0d98a; }
.pill.approved{ background:#e8f6ee; color:#14653a; border-color:#a8d8bb; }
.pill.rejected{ background:#fdeaea; color:#9b1c1c; border-color:#f0b4b4; }
.pill.admin{ background:#eef2ff; color:#3730a3; border-color:#c7d2fe; }
.pill.user{ background:#f1f5f9; color:#475569; border-color:#cbd5e1; }

.act{ display:flex; gap:6px; flex-wrap:wrap; }
.btn-xs{ padding:5px 10px; border-radius:8px; font-size:11.5px; font-weight:600; border:1px solid var(--border-2); background:#fff; cursor:pointer; font-family:inherit; }
.btn-xs.ok{ border-color:#a8d8bb; color:#14653a; }
.btn-xs.ok:hover{ background:#e8f6ee; }
.btn-xs.no{ border-color:#f0b4b4; color:#9b1c1c; }
.btn-xs.no:hover{ background:#fdeaea; }
.btn-xs.adm{ border-color:#c7d2fe; color:#3730a3; }
.btn-xs.adm:hover{ background:#eef2ff; }
.btn-xs:disabled{ opacity:.45; cursor:default; }

.center-state{ text-align:center; color:var(--ink-3); padding:40px 10px; font-size:13.5px; }
.spinner{ width:34px;height:34px;border-radius:50%;border:3px solid var(--gold-soft);border-top-color:var(--gold);animation:spin .8s linear infinite;margin:0 auto 14px; }
@keyframes spin{ to{ transform:rotate(360deg); } }