/* ============================================================
   SIDI — style.css
   Urutan: 1) Token warna  2) Dasar  3) Sidebar  4) Header
           5) Komponen (card, tabel, badge, tombol, form)
           6) Halaman khusus  7) Modal & toast  8) Responsif
   Untuk mengubah warna aplikasi, cukup ubah nilai di :root.
   ============================================================ */

/* ---------- 1. TOKEN WARNA & UKURAN ---------- */
:root{
  --navy-900:#0A1E3C;   /* sidebar paling gelap  */
  --navy-800:#0B2447;   /* header, judul         */
  --navy-700:#123763;
  --blue-600:#154B8C;   /* warna aksi utama      */
  --blue-500:#1E5FB0;
  --blue-100:#E4EDF9;

  --gold:#E0A80D;       /* aksen emas            */
  --gold-soft:#FBEFD0;

  --bg:#EEF2F8;         /* latar belakang halaman*/
  --surface:#FFFFFF;    /* latar card            */
  --line:#DCE4EF;       /* garis tepi tipis      */
  --ink:#16243A;        /* teks utama            */
  --muted:#657593;      /* teks sekunder         */

  --ok:#1B8A5A;  --ok-bg:#E3F5EC;
  --warn:#C2760B; --warn-bg:#FDF0DA;
  --bad:#C0392B; --bad-bg:#FBE7E4;
  --info:#154B8C; --info-bg:#E4EDF9;

  --r:8px;              /* border-radius standar */
  --r-sm:6px;
  --shadow:0 1px 2px rgba(16,36,66,.06), 0 6px 18px rgba(16,36,66,.06);
  --sidebar-w:244px;
  --t:.22s ease;
}

/* ---------- 2. DASAR ---------- */
*{box-sizing:border-box}
/* Wajib: tanpa baris ini, elemen ber-atribut hidden (layar login, modal,
   toast) tetap tampil karena dikalahkan oleh aturan display di bawah. */
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  font-size:14px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,p{margin:0}
button{font:inherit; cursor:pointer}
table{border-collapse:collapse; width:100%}

/* ikon SVG: mewarisi warna teks di sekitarnya */
.ic{width:18px; height:18px; flex:none; fill:none; stroke:currentColor;
    stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}

/* fokus keyboard tetap terlihat (aksesibilitas) */
:focus-visible{outline:2px solid var(--gold); outline-offset:2px}

/* scrollbar halus */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:#C3CFE0;border-radius:20px;border:3px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:#A9BAD2;background-clip:content-box;border:3px solid transparent}
*::-webkit-scrollbar-track{background:transparent}

.app{display:flex; min-height:100vh}
.ta-c{text-align:center}
.empty{text-align:center; color:var(--muted); padding:26px}

/* ---------- 3. SIDEBAR ---------- */
.sidebar{
  width:var(--sidebar-w); flex:none; height:100vh; position:sticky; top:0;
  background:linear-gradient(180deg,var(--navy-800) 0%, var(--navy-900) 100%);
  color:#fff; display:flex; flex-direction:column; overflow:hidden;
  transition:width var(--t), margin var(--t);
}
.brand{display:flex; gap:10px; align-items:center; padding:18px 16px 14px}
.brand__logo{width:64px;height:64px;flex:none}
.brand__logo svg,.brand__logo-img{width:100%;height:100%;display:block;border-radius:50%}
.brand__text strong{display:block; font-size:19px; letter-spacing:.14em; line-height:1}
.brand__text span{display:block; font-size:10.5px; color:#9FB8D8; margin-top:3px}

.sidebar__label{
  padding:6px 18px; font-size:10.5px; color:#7E9AC0; letter-spacing:.06em;
  border-top:1px solid rgba(255,255,255,.08); padding-top:14px; margin-top:4px;
}
.nav{display:flex; flex-direction:column; gap:2px; padding:4px 10px}
.nav__item{
  display:flex; align-items:center; gap:11px; width:100%;
  padding:10px 12px; border:0; border-radius:var(--r-sm);
  background:transparent; color:#C6D6EC; text-align:left; font-size:13.5px;
  transition:background var(--t), color var(--t), transform var(--t);
}
.nav__item:hover{background:rgba(255,255,255,.08); color:#fff}
.nav__item.is-active{background:var(--blue-600); color:#fff; font-weight:600;
  box-shadow:inset 3px 0 0 var(--gold)}
.nav__item.is-active .ic{color:#fff}
.nav__badge{
  margin-left:auto; font-style:normal; font-size:11px; font-weight:700;
  background:var(--gold); color:#3B2A00; border-radius:20px; padding:1px 7px;
}

.sidebar__foot{margin-top:auto; position:relative; padding-top:40px}
.skyline{display:block; width:100%; height:86px}
.motto{
  position:relative; padding:0 18px 4px; margin-top:-26px;
  display:flex; flex-direction:column; line-height:1.25;
}
.motto span{font-size:14px; font-weight:800; letter-spacing:.02em}
.motto span:nth-child(2){color:var(--gold)}
.motto span:nth-child(3){font-size:11.5px; font-weight:500; color:#9FB8D8; letter-spacing:.08em; margin-top:3px}
.sidebar__ver{padding:8px 18px 14px; font-size:10px; color:#6C88AE}

/* ---------- 4. HEADER ---------- */
.main{flex:1; min-width:0; display:flex; flex-direction:column}
.topbar{
  position:relative; overflow:hidden; color:#fff;
  /* fallback gradient: langit biru -> biru tua */
  background:linear-gradient(165deg,#2E74C9 0%, var(--blue-600) 45%, var(--navy-800) 100%);
  border-bottom:3px solid var(--gold);
}
.topbar__mount{position:absolute; inset:auto 0 0 0; width:100%; height:100%}
.topbar__inner{
  position:relative; display:flex; align-items:center; gap:18px;
  padding:14px 22px; min-height:104px;
}
.topbar__toggle{color:#fff}
.topbar__brand{display:flex; align-items:center; gap:10px; flex:none}
.topbar__seal{width:44px;height:44px;object-fit:contain}
.topbar__org strong{display:block; font-size:20px; font-weight:800; line-height:1.2}
.topbar__org span{display:block; font-size:13px; color:#CFE0F6}

.topbar__title{
  flex:1; min-width:0; text-align:center;
  border-left:1px solid rgba(255,255,255,.22);
  border-right:1px solid rgba(255,255,255,.22);
  padding:2px 18px;
}
.topbar__title h1{font-size:23px; font-weight:800; letter-spacing:.02em; line-height:1.2}
.topbar__sub{font-size:12.5px; color:#E7F0FC}
.topbar__tag{
  display:inline-block; margin-top:6px; font-size:11px; color:#FFE9B0;
  background:rgba(224,168,13,.16); border:1px solid rgba(224,168,13,.45);
  padding:2px 10px; border-radius:20px;
}
.topbar__tag.is-hidden{display:none}

.topbar__side{display:flex; align-items:center; gap:14px; flex:none; margin-left:auto}
.clock{text-align:right}
.clock__date{font-size:11.5px; color:#D3E3F8}
.clock__time{display:flex; align-items:center; gap:6px; justify-content:flex-end;
  font-size:19px; font-weight:700; font-variant-numeric:tabular-nums}
.who{display:flex; align-items:center; gap:9px; background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.2); padding:6px 12px 6px 6px; border-radius:30px}
.who__avatar{width:32px;height:32px;border-radius:50%;background:var(--gold);color:#3B2A00;
  display:grid;place-items:center}
.who__text strong{display:block; font-size:12.5px; line-height:1.2}
.who__text span{display:block; font-size:10.5px; color:#D3E3F8}

/* ---------- 5. KOMPONEN ---------- */
.content{flex:1; overflow-y:auto; padding:20px 22px 40px; height:calc(100vh - 110px)}
.page{display:none}
.page.is-active{display:block}

.pagehead{margin-bottom:16px}
.pagehead h2{font-size:19px; color:var(--navy-800)}
.pagehead p{font-size:13px; color:var(--muted)}

/* kartu statistik */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:18px}
.stat{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:14px 16px; box-shadow:var(--shadow); display:flex; gap:12px; align-items:center;
}
.stat__icon{width:40px;height:40px;border-radius:var(--r-sm); display:grid; place-items:center;
  background:var(--info-bg); color:var(--info)}
.stat--ok .stat__icon{background:var(--ok-bg); color:var(--ok)}
.stat--warn .stat__icon{background:var(--warn-bg); color:var(--warn)}
.stat--bad .stat__icon{background:var(--bad-bg); color:var(--bad)}
.stat--gold .stat__icon{background:var(--gold-soft); color:#8A6400}
.stat__num{font-size:23px; font-weight:800; line-height:1.1; color:var(--navy-800)}
.stat__lbl{font-size:12px; color:var(--muted)}

/* card */
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); margin-bottom:18px; overflow:hidden;
}
.card__head{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:13px 16px; border-bottom:1px solid var(--line); background:#FAFBFE;
}
.card__title{font-size:14.5px; font-weight:700; color:var(--navy-800)}
.card__hint{font-size:11.5px; color:var(--muted)}
.card__foot{padding:9px 16px; font-size:11.5px; color:var(--muted); border-top:1px solid var(--line)}
.tag{font-size:11px; background:var(--blue-100); color:var(--blue-600); padding:2px 9px; border-radius:20px; font-weight:600}

.toolbar{display:flex; gap:8px; flex-wrap:wrap; align-items:center}

/* input & select */
.field{
  height:34px; border:1px solid var(--line); border-radius:var(--r-sm);
  background:#fff; color:var(--ink); font:inherit; font-size:13px; padding:0 10px;
  display:flex; align-items:center; gap:7px; transition:border var(--t), box-shadow var(--t);
}
.field:hover{border-color:#C2CFE2}
.field:focus-within, .field:focus{border-color:var(--blue-500); box-shadow:0 0 0 3px rgba(30,95,176,.12); outline:none}
.field .ic{width:16px;height:16px;color:var(--muted)}
.field input{border:0; outline:none; font:inherit; font-size:13px; background:transparent; width:100%; color:inherit}
.field--search{width:270px}
.field--date input{min-width:120px}
.field--block{width:100%; height:36px}
select.field{padding-right:8px}
textarea.field{height:auto; min-height:76px; padding:8px 10px; line-height:1.5; resize:vertical}

.lbl{display:block; font-size:12px; font-weight:600; color:var(--navy-800); margin-bottom:12px}
.lbl .field{margin-top:5px; font-weight:400}
.form{padding:16px}
.note{font-size:11.5px; color:var(--muted); background:var(--blue-100); padding:8px 10px; border-radius:var(--r-sm)}

/* Input file (unggah foto dokumentasi) & pratinjaunya, dipakai pada
   modal Tambah/Edit Hasil Rapat */
.filefield{
  display:block; width:100%; font:inherit; font-size:12.5px; color:var(--muted);
  border:1px dashed var(--line); border-radius:var(--r-sm); background:#FAFBFE;
  padding:9px 11px; cursor:pointer; transition:border var(--t), background var(--t);
}
.filefield:hover{border-color:#B9CCE6; background:#F1F5FB}
.foto-preview{
  margin-top:8px; height:130px; border-radius:var(--r-sm); overflow:hidden;
  border:1px solid var(--line); background:#F5F8FC;
  display:flex; align-items:center; justify-content:center;
}
.foto-preview img{width:100%; height:100%; object-fit:cover; display:block}
.foto-preview span{font-size:11.5px; color:var(--muted)}

/* tombol */
.btn{
  display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 13px;
  border-radius:var(--r-sm); border:1px solid transparent; font-size:13px; font-weight:600;
  transition:background var(--t), border var(--t), transform .12s ease, color var(--t);
}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--blue-600); color:#fff}
.btn--primary:hover{background:var(--blue-500)}
.btn--gold{background:var(--gold); color:#3B2A00}
.btn--gold:hover{background:#F2BB2A}
.btn--ghost{background:#fff; border-color:var(--line); color:var(--navy-800)}
.btn--ghost:hover{background:#F1F5FB; border-color:#C2CFE2}
.btn--sm{height:28px; padding:0 10px; font-size:12px}
.iconbtn{
  width:32px;height:32px;display:grid;place-items:center;border-radius:var(--r-sm);
  border:1px solid var(--line); background:#fff; color:var(--navy-800); transition:background var(--t);
}
.iconbtn:hover{background:#F1F5FB}
.iconbtn--ghost{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.25)}
.iconbtn--ghost:hover{background:rgba(255,255,255,.22)}

/* tabel */
.tablewrap{overflow-x:auto}
.table th{
  text-align:left; font-size:11px; letter-spacing:.03em; color:var(--muted); font-weight:700;
  padding:10px 14px; background:#F5F8FC; border-bottom:1px solid var(--line); white-space:nowrap;
}
.table td{padding:11px 14px; border-bottom:1px solid #EDF1F7; vertical-align:top; font-size:13px}
.table tbody tr{transition:background var(--t)}
.table tbody tr:hover{background:#F7FAFE}
.table tbody tr.is-selected{background:var(--blue-100); box-shadow:inset 3px 0 0 var(--blue-600)}
.table .row-click{cursor:pointer}
.table .empty{text-align:center; color:var(--muted); padding:26px}
.t-date{font-weight:600; color:var(--navy-800); white-space:nowrap}
.t-main{font-weight:600; color:var(--ink)}
.t-sub{display:block; font-size:11.5px; color:var(--muted); font-weight:400}
.t-num{color:var(--muted)}

/* badge status */
.badge{
  display:inline-block; font-size:11.5px; font-weight:600; padding:2.5px 10px;
  border-radius:20px; white-space:nowrap; border:1px solid transparent;
}
.badge--info{background:var(--info-bg); color:var(--info); border-color:#C7DAF3}
.badge--ok{background:var(--ok-bg); color:var(--ok); border-color:#BFE5D3}
.badge--warn{background:var(--warn-bg); color:var(--warn); border-color:#F3DCB0}
.badge--bad{background:var(--bad-bg); color:var(--bad); border-color:#F2C8C2}

/* ---------- 6. HALAMAN KHUSUS ---------- */

/* Hasil rapat: dua kolom */
.result{display:grid; grid-template-columns:1fr 330px; gap:22px; padding:18px}
.result__meta{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-bottom:16px}
.meta{background:#F7FAFE; border:1px solid var(--line); border-radius:var(--r-sm); padding:9px 12px}
.meta dt{font-size:11px; color:var(--muted)}
.meta dd{margin:2px 0 0; font-size:13.5px; font-weight:600; color:var(--navy-800)}
.meta dd small{display:block; font-weight:400; font-size:11.5px; color:var(--muted); line-height:1.4}
.block{margin-bottom:15px}
.block h4{margin:0 0 6px; font-size:12.5px; color:var(--navy-800);
  padding-left:9px; border-left:3px solid var(--gold)}
.block ul,.block ol{margin:0; padding-left:20px}
.block li{margin-bottom:4px}
.block p{font-size:13px}
.block--quote > p,.block--quote > .teks{
  background:var(--blue-100); border-radius:var(--r-sm); padding:10px 12px;
  border-left:3px solid var(--blue-600);
}
.result__side{display:flex; flex-direction:column; gap:10px}

/* teks berpoin ala Word: nomor rata kiri, isi menjorok (hanging indent) */
.teks{font-size:13px; line-height:1.55}
.teks p{margin:0 0 5px; font-size:13px}
.teks p:last-child,.teks .li:last-child{margin-bottom:0}
.teks .li{display:grid; grid-template-columns:1.8em 1fr; margin:0 0 5px}
.teks .li__no{font-variant-numeric:tabular-nums; font-weight:600; color:var(--navy-800)}
.teks .li--sub{margin-left:1.8em}
.editbar{display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin:6px 0 5px; font-weight:400}
.editbar small{font-size:11px; color:var(--muted)}
.field--berpoin{line-height:1.5; min-height:110px; tab-size:4}
.photo{
  border-radius:var(--r); overflow:hidden; border:1px solid var(--line);
  background:linear-gradient(170deg,#9EC2EC,#2E74C9 55%,#123763);
  height:200px; position:relative; display:grid; place-items:end center;
}
.photo svg{position:absolute; inset:0; width:100%; height:100%}
.photo span{
  position:relative; font-size:10.5px; color:#fff; background:rgba(10,30,60,.55);
  width:100%; padding:6px 10px; text-align:center;
}
.caption{font-size:12.5px; color:var(--navy-800); font-weight:600; line-height:1.45;
  border-left:3px solid var(--gold); padding-left:10px}

/* progress */
.progress{height:12px; background:#E6EDF7; margin:16px 16px 10px; border-radius:20px; overflow:hidden}
.progress span{display:block; height:100%; background:linear-gradient(90deg,var(--blue-500),var(--ok));
  border-radius:20px; transition:width .5s ease}
.legend{display:flex; gap:18px; flex-wrap:wrap; padding:0 16px 16px; font-size:12px; color:var(--muted)}
.legend i{width:9px;height:9px;border-radius:3px;display:inline-block;margin-right:6px}

/* arsip */
.archive{padding:14px 16px; display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
.arc{
  border:1px solid var(--line); border-radius:var(--r); padding:13px 14px;
  display:flex; gap:12px; align-items:flex-start; transition:border var(--t), box-shadow var(--t);
}
.arc:hover{border-color:#B9CCE6; box-shadow:var(--shadow)}
.arc__date{
  flex:none; width:56px; text-align:center; background:var(--navy-800); color:#fff;
  border-radius:var(--r-sm); padding:6px 0;
}
.arc__date b{display:block; font-size:18px; line-height:1}
.arc__date span{display:block; font-size:10px; color:#BDD2EE; letter-spacing:.05em}
.arc__body{flex:1; min-width:0}
.arc__body h4{margin:0 0 3px; font-size:13.5px; color:var(--navy-800)}
.arc__body p{font-size:11.5px; color:var(--muted)}
.arc__act{display:flex; gap:6px; margin-top:9px}
.archive .empty{grid-column:1/-1; text-align:center; color:var(--muted); padding:26px}

/* grafik */
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.chartbox{padding:14px 16px 18px; height:280px; position:relative}

/* switch */
.switchrow{display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:11px 0; border-top:1px solid var(--line)}
.switchrow strong{display:block; font-size:13px; color:var(--navy-800)}
.switchrow span{display:block; font-size:11.5px; color:var(--muted)}
.switch{position:relative; flex:none}
.switch input{position:absolute; opacity:0; width:44px; height:24px; margin:0; cursor:pointer}
.switch i{display:block; width:44px; height:24px; border-radius:20px; background:#C8D4E5; transition:background var(--t)}
.switch i::after{content:""; position:absolute; top:3px; left:3px; width:18px; height:18px;
  border-radius:50%; background:#fff; transition:transform var(--t)}
.switch input:checked + i{background:var(--blue-600)}
.switch input:checked + i::after{transform:translateX(20px)}

/* ---------- 7. MODAL & TOAST ---------- */
.modal{position:fixed; inset:0; z-index:60; display:grid; place-items:center; padding:24px}
.modal__scrim{position:absolute; inset:0; background:rgba(10,30,60,.5); backdrop-filter:blur(2px)}
.modal__box{
  position:relative; width:min(720px,100%); max-height:88vh; display:flex; flex-direction:column;
  background:var(--surface); border-radius:var(--r); box-shadow:0 20px 50px rgba(10,30,60,.32);
  animation:pop .18s ease-out;
}
@keyframes pop{from{opacity:0; transform:translateY(10px)}}
@media (prefers-reduced-motion:reduce){.modal__box{animation:none}}
.modal__head{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 18px; border-bottom:1px solid var(--line); background:var(--navy-800);
  color:#fff; border-radius:var(--r) var(--r) 0 0}
.modal__head h3{font-size:15px; font-weight:700}
.modal__head .iconbtn{background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.25); color:#fff}
.modal__head .iconbtn:hover{background:rgba(255,255,255,.26)}
.modal__body{padding:18px; overflow-y:auto}
.modal__foot{display:flex; justify-content:flex-end; gap:8px; padding:13px 18px;
  border-top:1px solid var(--line); background:#FAFBFE; border-radius:0 0 var(--r) var(--r)}
.modal__foot:empty{display:none}
.frow{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.frow--1{grid-template-columns:1fr}

.toast{
  position:fixed; right:22px; bottom:22px; z-index:80; display:flex; align-items:center; gap:9px;
  background:var(--navy-800); color:#fff; padding:11px 16px; border-radius:var(--r);
  box-shadow:0 10px 28px rgba(10,30,60,.3); font-size:13px; font-weight:600;
  border-left:3px solid var(--gold); animation:slide .22s ease-out;
}
.toast .ic{color:#6FE0A6}
@keyframes slide{from{opacity:0; transform:translateY(12px)}}
@media (prefers-reduced-motion:reduce){.toast{animation:none}}

/* akun "hanya lihat": sembunyikan semua tombol tambah/ubah/hapus */
body.mode-lihat .hanya-admin{display:none !important}
/* tombol tambah tindak lanjut: tampil untuk akses penuh & "tindak" */
body.mode-lihat:not(.mode-tl) .hanya-tl{display:none !important}

/* mode tampilan "Padat" (Pengaturan) */
body.compact .table td{padding:7px 14px}
body.compact .stat{padding:10px 13px}
body.compact .card{margin-bottom:13px}

/* ---------- 7b. HALAMAN LOGIN ---------- */
.login{
  position:fixed; inset:0; z-index:70; overflow:auto; display:grid; place-items:center; padding:28px;
  background:linear-gradient(165deg,#2E74C9 0%, var(--blue-600) 42%, var(--navy-900) 100%);
}
.login__mount{position:absolute; inset:auto 0 0 0; width:100%; height:60%}
.login__panel{
  position:relative; width:min(880px,100%); display:grid; grid-template-columns:1fr 1fr;
  background:var(--surface); border-radius:var(--r); overflow:hidden;
  box-shadow:0 24px 60px rgba(6,20,42,.38); border-top:3px solid var(--gold);
}
.login__brand{
  position:relative; padding:34px 30px 0; color:#fff; overflow:hidden;
  background:linear-gradient(170deg,var(--navy-700),var(--navy-900));
  display:flex; flex-direction:column;
}
.login__seal{width:100px; height:100px; object-fit:contain}
.login__org{margin-top:14px; font-size:12.5px; font-weight:700; line-height:1.3}
.login__org span{display:block; font-weight:400; font-size:11.5px; color:#9FB8D8}
.login__title{margin-top:20px; font-size:44px; font-weight:800; letter-spacing:.16em; line-height:1}
.login__desc{font-size:13px; color:#CFE0F6; max-width:24ch; margin-top:6px; line-height:1.5}
.login__tag{
  align-self:flex-start; margin-top:14px; font-size:11px; color:#FFE9B0;
  background:rgba(224,168,13,.16); border:1px solid rgba(224,168,13,.45);
  padding:3px 11px; border-radius:20px;
}
.login__skyline{margin:auto -30px -1px; width:calc(100% + 60px); height:80px; display:block}

.login__form{padding:32px 30px}
.login__form h2{font-size:18px; color:var(--navy-800)}
.login__sub{font-size:12.5px; color:var(--muted); margin-bottom:20px}
.btn--full{width:100%; justify-content:center; height:40px; margin-top:4px}
.pwd{position:relative; display:block}
.pwd__eye{
  position:absolute; right:4px; top:5px; width:30px; height:30px; border:0; background:transparent;
  color:var(--muted); display:grid; place-items:center; border-radius:var(--r-sm);
}
.pwd__eye:hover{background:#F1F5FB; color:var(--navy-800)}
.pwd__eye.is-on{color:var(--blue-600)}
.login__row{display:flex; align-items:center; justify-content:space-between; gap:10px; margin:2px 0 16px}
.check{display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--muted); cursor:pointer}
.check input{width:15px; height:15px; accent-color:var(--blue-600); cursor:pointer}
.linkbtn{background:0; border:0; padding:0; font-size:12.5px; color:var(--blue-600); font-weight:600}
.linkbtn:hover{text-decoration:underline}
.login__error{
  background:var(--bad-bg); color:var(--bad); border:1px solid #F2C8C2; font-size:12.5px;
  padding:8px 11px; border-radius:var(--r-sm); margin-bottom:12px;
}
.login__demo{
  margin-top:20px; background:var(--blue-100); border:1px dashed #B7CEEC;
  border-radius:var(--r-sm); padding:11px 13px; font-size:12px; color:var(--navy-800);
}
.login__demo strong{display:block; margin-bottom:4px; font-size:12px}
.login__demo p{color:var(--muted); line-height:1.7}
.login__demo code{background:#fff; border:1px solid var(--line); border-radius:4px; padding:1px 6px; font-size:11.5px}
.login__foot{margin-top:14px; font-size:11px; color:var(--muted); line-height:1.5}
.shake{animation:shake .32s}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@media (prefers-reduced-motion:reduce){.shake{animation:none}}

@media (max-width:760px){
  .login__panel{grid-template-columns:1fr}
  .login__brand{padding-bottom:0}
  .login__title{font-size:34px; margin-top:12px}
  .login__skyline{height:56px}
}

/* ---------- 8. RESPONSIF ---------- */
/* sidebar bisa disembunyikan lewat tombol di header */
.sidebar.is-collapsed{margin-left:calc(var(--sidebar-w) * -1)}

@media (max-width:1280px){
  .result{grid-template-columns:1fr 280px}
  .field--search{width:210px}
}
@media (max-width:1100px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .grid2{grid-template-columns:1fr}
  .result{grid-template-columns:1fr}
  .archive{grid-template-columns:1fr}
  .topbar__title{text-align:left; border:0; padding-left:0}
}
@media (max-width:860px){
  .sidebar{position:fixed; z-index:50; margin-left:calc(var(--sidebar-w) * -1)}
  .sidebar.is-open{margin-left:0; box-shadow:0 0 40px rgba(10,30,60,.4)}
  .topbar__inner{flex-wrap:wrap; gap:12px}
  .topbar__side{margin-left:auto}
  .content{height:auto; padding:16px}
  .stats{grid-template-columns:1fr}
  .result__meta{grid-template-columns:1fr}
  .frow{grid-template-columns:1fr}
}