/* assets/style.css — FINAL (left-aligned, hosting-safe) */
:root{
  --ink:#111827; --muted:#6b7280; --line:#e5e7eb;
  --brand:#0b3d91; --paper:#ffffff; --bg:#f3f4f6;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Arial}

/* ===== Layout utama: mepet kiri ===== */
.container{max-width:none;margin:16px 12px;padding:0 12px}
.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px;overflow-x:auto}
table{width:100%;border-collapse:collapse;background:#fff;table-layout:fixed}
th,td{border:1px solid var(--line);padding:6px 8px;text-align:left;vertical-align:middle}
th{background:#f9fafb;white-space:nowrap}
/* jangan rubah bagian selain yang aku sampaikan tadi */
input,select,button{font:inherit}
input,select{width:100%;padding:8px;border:1px solid #d1d5db;border-radius:8px;background:#fff}
button,.btn{padding:8px 12px;border:1px solid #d1d5db;border-radius:10px;background:#fff;cursor:pointer}
.btn-primary{background:#fff;border-color:#0ea5e9}
.alert{background:#fee2e2;border:1px solid #fca5a5;color:#991b1b;border-radius:8px;padding:8px;margin-bottom:8px}

/* ===== Header & Nav (stabil, kiri rapet) ===== */
.site-header{background:linear-gradient(90deg,#001f3f,#0b3d91);color:#fff}
.site-header .brand,
.site-header .nav{max-width:none;margin:0 12px;padding:10px 12px;display:flex;align-items:center;gap:12px}
.site-header .brand{padding-top:12px;padding-bottom:8px}
.site-header .logo{font-size:22px;line-height:1}
.site-header .title{font-weight:700}
.site-header .subtitle{font-size:12px;opacity:.9}
.site-header .flex1{flex:1}
.welcome{font-size:12px;opacity:.9;margin-right:8px}

.nav{gap:8px;background:rgba(255,255,255,.08);border-top:1px solid rgba(255,255,255,.12);flex-wrap:wrap}
.nav .navlink{
  color:#fff;text-decoration:none;height:32px;display:inline-flex;align-items:center;
  padding:0 10px;border:1px solid rgba(255,255,255,.22);border-radius:999px;backdrop-filter:saturate(120%);
}
.nav .navlink:hover{background:rgba(255,255,255,.12)}
.btn-logout{
  color:#fff;text-decoration:none;height:32px;display:inline-flex;align-items:center;
  padding:0 12px;border:1px solid rgba(255,255,255,.25);border-radius:999px
}

/* ===== Login ===== */
.login-wrap{display:flex;min-height:100vh;align-items:center;justify-content:center;padding:20px}
.login-card{width:360px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px}
.login-card label{display:block;margin-top:8px}
.login-card input{margin-top:4px}

/* ===== Override container ketat per-halaman ===== */
.container-tight{max-width:none !important;margin:16px 12px !important;padding:0 12px !important}

/* ===== Landscape screen (opsional via ?wide=1) ===== */
body.landscape-screen .container,
body.landscape-screen .nav,
body.landscape-screen .site-header .brand{max-width:none}

/* ===== Print (paksa landscape & rapih) ===== */
@media print{
  @page{size:A4 landscape;margin:10mm}
  .site-header,.nav,.btn,.btn-primary,.right{display:none!important}
  html,body{background:#fff}
  .container{max-width:none;padding:0;margin:0}
  table{font-size:12px} th,td{padding:4px 6px}
}

/* ============================
   COLUMN STRIPING (anti-silau)
   ============================ */

/* Warna kolom GANJIL & GENAP (lebih jelas) */
:root{
  --col-odd:#eef6ff;  /* biru muda (jelas tapi lembut) */
  --col-even:#fff7ed; /* krem oranye muda */
}

/* Terapkan ke SEMUA tabel di dalam .card.
   Jika ada tabel yang harus tetap putih: tambahkan class "no-colstripe" di <table>-nya. */
.card table:not(.no-colstripe) th,
.card table:not(.no-colstripe) td{ background-color:#ffffff !important; }

/* Ganjil & genap — berlaku utk thead + tbody */
.card table:not(.no-colstripe) thead th:nth-child(odd),
.card table:not(.no-colstripe) tbody td:nth-child(odd){
  background-color:var(--col-odd) !important;
}
.card table:not(.no-colstripe) thead th:nth-child(even),
.card table:not(.no-colstripe) tbody td:nth-child(even){
  background-color:var(--col-even) !important;
}

/* Hover baris tetap ada indikasi */
.card table:not(.no-colstripe) tbody tr:hover td{
  filter: brightness(0.98);
}

/* Total/footer tetap kontras */
.card table:not(.no-colstripe) tfoot td,
.card table:not(.no-colstripe) td strong{
  filter: saturate(1.05) contrast(1.03);
}