/* backend/theme.css — Design system dashboard United Indonesia
   LIGHT-FIRST (ADR-015). Web publik (Astro) tetap ikut tema manutd.com; dashboard terang.
   Font: Barlow Condensed (display) + Plus Jakarta Sans (body)
   Palette: merah #DA291C, canvas #F7F7F5, surface #FFF, text #1D1D1F */
:root{
  /* Brand */
  --primary:#DA291C;--primary-hover:#C71F14;--primary-deep:#A61510;
  --gold:#C9A227;--gold-soft:#8a6d1a;
  /* Surface light */
  --canvas:#F7F7F5;--surface:#FFFFFF;--surface-muted:#F1F1EE;
  /* Dark tokens (legacy kompatibel, beberapa komponen masih pakai; default body light) */
  --black:#0B0B0C;--charcoal:#141414;--charcoal-soft:#1D1D1F;
  --surface-dark:#121212;--surface-dark-el:#1A1A1A;
  --on-dark:#fff;--on-dark-soft:#9a9a9a;
  /* Text light */
  --body:#1D1D1F;--body-soft:#5A5A5A;
  --text:#1D1D1F;--text-soft:#5A5A5A;
  /* Lines */
  --line:#D9D9D4;--line-strong:#B8B8B0;
  /* Font */
  --font-display:'Barlow Condensed',system-ui,sans-serif;
  --font-body:'Plus Jakarta Sans','Inter',system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--font-body);background:var(--canvas);color:var(--text);min-height:100vh}
h1,h2,h3,.display{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.02em}
.container{max-width:900px;margin:0 auto;padding:2rem 1rem}
.page-title{font-size:1.6rem;margin-bottom:.2rem}
.page-title span{color:var(--primary)}
.page-sub{color:var(--text-soft);font-size:.85rem;margin-bottom:1.5rem}
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:1.5rem;margin-bottom:1.5rem}
.card h2{font-size:1rem;color:var(--text);margin-bottom:1rem}
.card h2 .sub{display:block;font-size:.78rem;font-weight:400;color:var(--text-soft);font-family:var(--font-body);text-transform:none;letter-spacing:0;margin-top:.2rem}
label{display:block;font-size:.78rem;color:var(--text-soft);margin-bottom:.3rem;font-weight:600}
input,select,textarea{width:100%;padding:.6rem .8rem;border-radius:8px;border:1px solid var(--line-strong);background:var(--surface);color:var(--text);font-size:.9rem;font-family:var(--font-body);margin-bottom:1rem}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 2px rgba(218,41,28,.15)}
.btn{display:inline-block;padding:.65rem 1.3rem;border-radius:8px;border:none;background:var(--primary);color:#fff;font-weight:600;cursor:pointer;font-size:.9rem;font-family:var(--font-body);text-decoration:none}
.btn:hover{background:var(--primary-hover)}
.btn-ghost{background:var(--surface);border:1px solid var(--line-strong);color:var(--text)}
.btn-ghost:hover{border-color:var(--primary);color:var(--primary)}
.btn-block{width:100%;text-align:center}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.msg{padding:.8rem 1rem;border-radius:8px;margin-bottom:1rem;font-size:.85rem}
.msg.ok{background:rgba(0,150,80,.1);border:1px solid rgba(0,150,80,.3);color:#0a7a42}
.msg.err{background:rgba(218,41,28,.1);border:1px solid rgba(218,41,28,.35);color:var(--primary-deep)}
.msg.warn{background:rgba(201,162,39,.12);border:1px solid rgba(201,162,39,.4);color:var(--gold-soft)}
table{width:100%;border-collapse:collapse;font-size:.82rem}
th,td{text-align:left;padding:.6rem .5rem;border-bottom:1px solid var(--line)}
th{color:var(--text-soft);font-weight:600;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em}
tr:hover td{background:var(--surface-muted)}
.badge{padding:.15rem .5rem;border-radius:20px;font-size:.7rem;font-weight:600}
.badge.pending{background:rgba(201,162,39,.15);color:var(--gold-soft)}
.badge.activated{background:rgba(0,150,80,.13);color:#0a7a42}
.badge.expired{background:var(--surface-muted);color:var(--text-soft)}
.badge.suspended{border:1px solid var(--primary);color:var(--primary)}
.info-row{display:flex;justify-content:space-between;padding:.5rem 0;border-bottom:1px solid var(--line);font-size:.88rem}
.info-row .k{color:var(--text-soft)}
.logout{float:right;color:var(--text-soft);text-decoration:none;font-size:.8rem}
.logout:hover{color:var(--primary)}
.topnav{display:flex;gap:1rem;border-bottom:1px solid var(--line);padding:.8rem 0;margin-bottom:1.5rem}
.topnav a{color:var(--text-soft);text-decoration:none;font-size:.85rem;font-weight:600}
.topnav a:hover,.topnav a.active{color:var(--primary)}
.placeholder{background:var(--surface-muted);border:1px dashed var(--line-strong);border-radius:8px;padding:2rem;text-align:center;color:var(--text-soft);font-size:.85rem}
.auth-wrap{max-width:400px;margin:4rem auto;text-align:center}
.auth-wrap h1{margin-bottom:1.5rem}
.auth-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:2rem;box-shadow:0 1px 3px rgba(0,0,0,.06)}
/* ── Mobile-friendly ── */
@media(max-width:600px){
  .grid-2{grid-template-columns:1fr}
  /* input ≥16px biar iOS gak auto-zoom pas fokus */
  input,select,textarea{font-size:16px}
  .container{padding:1rem .75rem}
  .card{padding:1.1rem}
  /* tabel → scroll horizontal biar gak overflow */
  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .table-wrap table{min-width:520px}
  .page-title{font-size:1.3rem}
  .topnav{flex-wrap:wrap}
}
@media(max-width:400px){
  .auth-wrap{margin:2.5rem auto}
}