/* ==========================================================================
   Gateway Surat Lingkar - tampilan panel
   Satu aksen hijau army, permukaan terang, tanpa hiasan.
   ========================================================================== */
:root{
  --aksen:#4b5320; --aksen-terang:#6b7530; --aksen-lembut:#f1f2ec;
  --tinta:#12203a; --tinta-lembut:#5b6474; --tinta-samar:#8b93a1;
  --latar:#f7f8f3; --kartu:#ffffff; --garis:#e7e8e0; --garis-kuat:#d8dacd;
  --hijau:#1e7f4f; --kuning:#8a5a00; --merah:#b42318; --biru:#1d4ed8;
  --radius:14px; --radius-kecil:10px;
  --bayang:0 1px 2px rgba(18,32,58,.04), 0 8px 24px rgba(18,32,58,.05);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--latar); color:var(--tinta);
  font-family:Inter,"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
h1{font-size:19px;margin:0 0 4px}
h2{font-size:15px;margin:0 0 14px;letter-spacing:.01em}
h3{font-size:13px;margin:20px 0 8px;text-transform:uppercase;letter-spacing:.07em;color:var(--tinta-lembut)}
p{margin:0 0 12px}
.sembunyi{display:none !important}
.petunjuk{color:var(--tinta-lembut);font-size:13px}
.dua-kolom{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
@media (max-width:900px){.dua-kolom{grid-template-columns:1fr}}
.kartu{background:var(--kartu);border:1px solid var(--garis);border-radius:var(--radius);padding:20px;box-shadow:var(--bayang);margin-bottom:16px}
.kepala-kartu{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
.kepala-kartu h2{margin:0}

/* ---------------------------------- masuk --------------------------------- */
.layar-tengah{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.kartu-masuk{width:100%;max-width:430px;margin:0}
.merek{display:flex;align-items:center;gap:12px}
.merek .tanda{width:40px;height:40px;border-radius:12px;background:var(--aksen);color:#fff;display:grid;place-items:center;font-weight:700;font-size:14px;letter-spacing:.04em}
.merek strong{display:block;font-size:15px}
.merek small{color:var(--tinta-samar);font-size:12px}
form h1{margin-top:20px}

/* ---------------------------------- isian --------------------------------- */
label{display:block;margin:0 0 14px;font-size:13px;font-weight:600;color:var(--tinta-lembut)}
input[type=text],input[type=email],input[type=password],input[type=search],input[type=number],select,textarea{
  width:100%;margin-top:6px;padding:10px 12px;font:inherit;font-weight:400;color:var(--tinta);
  background:#fff;border:1px solid var(--garis-kuat);border-radius:var(--radius-kecil);outline:none;
}
input:focus,select:focus,textarea:focus{border-color:var(--aksen);box-shadow:0 0 0 3px rgba(75,83,32,.12)}
textarea{resize:vertical;font-family:inherit}
textarea[spellcheck=false]{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px}
.detak{display:flex;gap:12px}
.detak>*{flex:1}
.dua{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tiga{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
label.periksa{display:flex;gap:10px;align-items:flex-start;font-weight:400;color:var(--tinta);background:var(--aksen-lembut);padding:12px 14px;border-radius:var(--radius-kecil);border:1px solid var(--garis)}
label.periksa input{margin:3px 0 0;width:16px;height:16px;accent-color:var(--aksen)}
label.periksa span{font-size:13.5px}

/* ---------------------------------- tombol --------------------------------- */
.tombol{
  font:inherit;font-size:13.5px;font-weight:600;padding:9px 16px;border-radius:var(--radius-kecil);
  border:1px solid var(--garis-kuat);background:#fff;color:var(--tinta);cursor:pointer;
}
.tombol:hover{background:var(--aksen-lembut)}
.tombol.utama{background:var(--aksen);border-color:var(--aksen);color:#fff}
.tombol.utama:hover{background:var(--aksen-terang)}
.tombol.kecil{padding:6px 12px;font-size:12.5px}
.tombol.lebar{width:100%}
.tombol.bahaya{color:var(--merah);border-color:#f0c6c2}
.tombol.bahaya:hover{background:#fdf3f2}
.deret-tombol{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.deret-tombol.tengah{justify-content:center;align-items:center}

/* --------------------------------- struktur -------------------------------- */
.bilah-atas{
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  padding:14px 22px;background:#fff;border-bottom:1px solid var(--garis);position:sticky;top:0;z-index:5;
}
.kanan-atas{display:flex;align-items:center;gap:10px}
.pil{font-size:12px;font-weight:600;padding:5px 11px;border-radius:999px;background:var(--aksen-lembut);color:var(--aksen);border:1px solid var(--garis-kuat)}
.pil.peringatan{background:#fff7e8;color:var(--kuning);border-color:#f4dcae}
.pil.bahaya{background:#fdf3f2;color:var(--merah);border-color:#f0c6c2}
.tab{display:flex;gap:4px;padding:10px 18px 0;background:#fff;border-bottom:1px solid var(--garis);overflow-x:auto}
.tab button{
  font:inherit;font-size:13.5px;font-weight:600;color:var(--tinta-lembut);background:none;border:0;
  padding:10px 14px;border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap;
}
.tab button:hover{color:var(--tinta)}
.tab button.aktif{color:var(--aksen);border-bottom-color:var(--aksen)}
main{max-width:1180px;margin:0 auto;padding:20px 18px 60px}
.layar{animation:masuk .16s ease-out}
@keyframes masuk{from{opacity:.4;transform:translateY(3px)}to{opacity:1;transform:none}}

/* --------------------------------- statistik ------------------------------- */
.kisi-stat{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px}
@media (max-width:760px){.kisi-stat{grid-template-columns:1fr 1fr}}
.stat{background:#fff;border:1px solid var(--garis);border-radius:var(--radius);padding:16px;box-shadow:var(--bayang)}
.stat span{display:block;font-size:12px;color:var(--tinta-samar);text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.stat strong{display:block;font-size:26px;margin-top:6px;letter-spacing:-.02em}
.stat.hijau strong{color:var(--hijau)} .stat.kuning strong{color:var(--kuning)}
.stat.merah strong{color:var(--merah)} .stat.aksen strong{color:var(--aksen)}

.baris-info{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;padding:9px 0;border-bottom:1px solid var(--garis);margin:0}
.baris-info span{color:var(--tinta-lembut)}
.baris-info strong{font-weight:600}

/* ---------------------------------- grafik --------------------------------- */
.grafik{display:flex;align-items:flex-end;gap:10px;height:170px;padding-top:8px}
.grafik .hari{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px;height:100%}
.grafik .tumpuk{width:100%;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;height:100%}
.grafik .bagian{border-radius:5px;min-height:2px}
.grafik .bagian.terkirim{background:var(--aksen)}
.grafik .bagian.gagal{background:#e39c94}
.grafik .label{font-size:11px;color:var(--tinta-samar)}
.grafik .angka{font-size:11px;font-weight:600}

/* ---------------------------------- tabel ---------------------------------- */
.tabel-bungkus{overflow-x:auto;border:1px solid var(--garis);border-radius:var(--radius-kecil)}
.tabel{width:100%;border-collapse:collapse;font-size:13.5px}
.tabel th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--tinta-samar);
  padding:11px 12px;background:var(--aksen-lembut);border-bottom:1px solid var(--garis);white-space:nowrap}
.tabel td{padding:11px 12px;border-bottom:1px solid var(--garis);vertical-align:top}
.tabel tr:last-child td{border-bottom:0}
.tabel tbody tr:hover{background:#fafbf6;cursor:pointer}
.tabel .subjek{max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tabel .waktu{color:var(--tinta-lembut);white-space:nowrap;font-size:12.5px}

.tanda-status{font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:999px;white-space:nowrap;display:inline-block}
.tanda-status.terkirim{background:#e9f5ee;color:var(--hijau)}
.tanda-status.antre{background:var(--aksen-lembut);color:var(--aksen)}
.tanda-status.gagal{background:#fdf3f2;color:var(--merah)}
.tanda-status.uji{background:#eef2ff;color:var(--biru)}
.tanda-status.batal{background:#f1f2f4;color:var(--tinta-samar)}

.baris-saring{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-bottom:14px}
.baris-saring label{margin:0}
.baris-saring .cari{flex:1;min-width:220px}

/* --------------------------------- daftar ---------------------------------- */
.daftar-rapat{display:flex;flex-direction:column;gap:2px}
.daftar-rapat .baris{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid var(--garis);font-size:13.5px}
.daftar-rapat .baris:last-child{border-bottom:0}
.daftar-rapat .baris .waktu{color:var(--tinta-samar);font-size:12px;white-space:nowrap}
.daftar-rapat .pilih{display:block;width:100%;text-align:left;background:none;border:0;font:inherit;padding:12px;border-radius:var(--radius-kecil);cursor:pointer}
.daftar-rapat .pilih:hover{background:var(--aksen-lembut)}
.daftar-rapat .pilih.aktif{background:var(--aksen-lembut);box-shadow:inset 0 0 0 1px var(--garis-kuat)}
.daftar-rapat .pilih strong{display:block;font-size:13.5px}
.daftar-rapat .pilih small{color:var(--tinta-samar);font-size:12px}

.kisi-data{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:640px){.kisi-data{grid-template-columns:1fr}}
.pratinjau{border:1px solid var(--garis);border-radius:var(--radius-kecil);padding:14px;background:#fbfcf8;min-height:200px;overflow:auto}
.pratinjau iframe{width:100%;height:340px;border:0;border-radius:8px;background:#fff}

.kode{background:#f6f7f2;border:1px solid var(--garis);border-radius:var(--radius-kecil);padding:12px 14px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;line-height:1.6;
  white-space:pre-wrap;word-break:break-word;color:#2b3445;margin:0 0 12px}
.pesan{font-size:13px;padding:10px 12px;border-radius:var(--radius-kecil);background:var(--aksen-lembut);border:1px solid var(--garis-kuat);margin-top:12px}
.pesan.galat{background:#fdf3f2;border-color:#f0c6c2;color:var(--merah)}
.pesan.ok{background:#e9f5ee;border-color:#c6e4d3;color:var(--hijau)}
.galat{color:var(--merah);font-size:13px}

/* ---------------------------------- laci ----------------------------------- */
.laci{position:fixed;top:0;right:0;width:min(560px,100%);height:100vh;background:#fff;border-left:1px solid var(--garis);
  box-shadow:-12px 0 32px rgba(18,32,58,.10);z-index:20;display:flex;flex-direction:column}
.kepala-laci{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--garis)}
.isi-laci{padding:18px;overflow:auto;flex:1}
.isi-laci .ringkas-info{display:grid;grid-template-columns:130px 1fr;gap:6px 12px;font-size:13.5px;margin-bottom:16px}
.isi-laci .ringkas-info dt{color:var(--tinta-lembut)}
.isi-laci .ringkas-info dd{margin:0;word-break:break-word}
.pratinjau-surat{border:1px solid var(--garis);border-radius:var(--radius-kecil);overflow:hidden;margin-top:14px}
.pratinjau-surat iframe{width:100%;height:420px;border:0;display:block}

/* ---------------------------------- toast ---------------------------------- */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--tinta);color:#fff;
  padding:11px 18px;border-radius:999px;font-size:13.5px;z-index:40;box-shadow:0 8px 24px rgba(18,32,58,.22)}
.toast.galat{background:var(--merah)}