/* ═══════════════════════════════════════════════════════════════════════════
   Netvora Mail — gaya dashboard
   ═══════════════════════════════════════════════════════════════════════════

   ARAH DESAIN
   Design Read: dashboard email internal untuk pemilik usaha yang memeriksa
   surat pelanggan dan spam tiap hari. Bahasa visual: brand Netvora, bersih
   dan padat. Dial ENERGY 1 / RHYTHM 2 / MOTION 1.

   PALET: diambil dari brand Netvora yang sudah ada (netvora-compro),
   bukan dari default AI.
     --navy  #0d203c  tinta utama, dari warna perusahaan
     --biru  #0969f7  AKSEN, dipakai di tiga tempat saja: tombol utama,
                      penanda belum dibaca, dan cincin fokus keyboard
     --cyan  #25b7f5  garis sorot dan cincin fokus

   ALASAN PER KEPUTUSAN (R-31)
   - Tipografi: tumpukan font sistem, tanpa mengunduh font. Alasan: dashboard
     ini memuat isi surat orang lain, jadi tidak boleh memanggil server pihak
     ketiga hanya untuk tampil. Nol permintaan jaringan luar.
   - Radius: 10px untuk permukaan, 7px untuk kontrol. Bukan pil seragam,
     supaya bentuk tetap menandakan peran (R-11).
   - Bayangan: hanya panel surat yang terangkat, karena itu satu-satunya
     permukaan yang perlu memisahkan diri dari daftar (R-12).
   - Gerak: transisi 120ms pada warna latar dan tepi saat hover, plus geser
     baris saat disentuh. Tidak ada animasi berulang (R-19).
   - Warna belum-dibaca: titik biru kecil, bukan garis kiri berwarna. Garis
     kiri hanya akan jadi hiasan; titik menandai keadaan nyata.

   TATA LETAK PER LEBAR (R-03: mobile bukan desktop yang dikecilkan)
     < 700px   : satu kolom. Sidebar jadi bar atas tipis, menu pindah ke
                 bilah bawah yang tetap, surat dibuka sebagai halaman penuh.
     >= 700px  : sidebar tetap di kiri, daftar surat di tengah, panel surat
                 muncul di kanan setelah sebuah surat dibuka.
   Menunya tidak dijejalkan pada satu baris tautan seperti versi sebelumnya,
   karena bilah bawah lebih mudah dijangkau jempol dan tiap tujuan selalu
   kelihatan (bukan disembunyikan di balik ikon menu).

   MODE GELAP: tombol tema disediakan, dan kedua mode diuji. Pilihan disimpan
   di localStorage dan dihormati saat halaman dimuat, jadi tidak ada kedipan.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --navy: #0d203c;
  --biru: #0969f7;
  --cyan: #25b7f5;

  --kertas: #f7f8fa;
  --permukaan: #ffffff;
  --permukaan2: #f2f5f9;
  --garis: #dfe5ee;
  --garis2: #eef2f7;
  --tinta: #0d203c;
  --tinta2: #33415c;
  --redup: #5a6b85;
  --bahaya: #b4232f;
  --bahaya-soft: #fdeceb;
  --ok: #0a6a4e;
  --ok-soft: #e7f4ef;
  --info-soft: #eaf3ff;
  /* Aksen versi gelap untuk di atas latar lembut (tanda lampiran).
     #0969f7 hanya mencapai 4.29:1 di atas #eaf3ff, di bawah ambang 4.5:1
     untuk teks 11,5px. Ini yang lolos, 5.71:1. */
  --biru-di-lembut: #0857d0;

  --r: 10px;
  --r-kecil: 7px;
  --lebar-sisi: 232px;
  --lebar-daftar: 380px;
  --tinggi-bawah: 58px;
  /* Tinggi bar atas di layar sempit. Baris chip kotak surat menempel tepat
     di bawahnya, jadi nilainya dipakai dua tempat dan harus sama. */
  --tinggi-atas: 55px;
  /* Lebar satu tombol aksi geser. Tiga tombol harus muat dalam lebar baris
     terkecil yang mungkin (294px pada layar 320px), jadi 60px x 3 = 180px. */
  --lebar-aksi: 60px;
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --naik: 0 1px 2px rgba(13, 32, 60, .06), 0 8px 24px rgba(13, 32, 60, .07);
  /* Warna teks di atas tombol utama. Di mode gelap nilainya dibalik jadi
     gelap, karena putih di atas biru terang hanya 2.59:1 dan gagal WCAG. */
  --di-utama: #ffffff;
  --utama: #0969f7;
  --utama-hover: #0857d0;
}

html[data-tema="gelap"] {
  --kertas: #0f1725;
  --permukaan: #16202f;
  --permukaan2: #1d2939;
  --garis: #263447;
  --garis2: #202d3f;
  --tinta: #e8edf5;
  --tinta2: #bfcbdc;
  --redup: #93a3ba;
  --bahaya: #ff8b8b;
  --bahaya-soft: #351b1e;
  --ok: #6fd3ac;
  --ok-soft: #122a24;
  --info-soft: #16273f;
  --biru: #5aa3ff;
  --biru-di-lembut: #5aa3ff;
  --naik: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .28);
  /* Di mode gelap, tombol utama memakai teks GELAP di atas biru terang.
     Putih di atas #5aa3ff hanya 2.59:1; teks gelap mencapai 6.78:1. */
  --di-utama: #0d1a29;
  --utama: #5aa3ff;
  --utama-hover: #7ab8ff;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--kertas);
  color: var(--tinta);
  font: 15px/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

a { color: var(--biru); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Fokus keyboard: terlihat jelas, tidak pernah dihapus tanpa pengganti (R-32) */
:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
  border-radius: 3px;
}

.judul-kecil {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--redup);
}

/* ── Kerangka: sidebar + isi utama ─────────────────────────────────────── */
.tata { display: flex; min-height: 100%; }

.utama {
  flex: 1;
  min-width: 0;
  padding: 18px;
  /* Ruang untuk bilah bawah di layar sempit, supaya isi terakhir tidak
     pernah tertutup navigasi (R-03). Di layar lebar nilainya nol. */
  padding-bottom: calc(18px + var(--tinggi-bawah));
}

/* ── Sidebar (hanya layar lebar) ───────────────────────────────────────── */
.sisi {
  display: none;
  flex: 0 0 var(--lebar-sisi);
  width: var(--lebar-sisi);
  padding: 16px 12px;
  background: var(--permukaan);
  border-right: 1px solid var(--garis);
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
  overflow-y: auto;
}
.sisi .brand {
  display: block;
  margin: 2px 8px 16px;
  font-size: 17px;
  font-weight: 700;
  color: var(--tinta);
  letter-spacing: -.01em;
}
.sisi .brand:hover { text-decoration: none; }
.sisi .brand b { color: var(--biru); }

.menu { display: flex; flex-direction: column; gap: 2px; }
.menu a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  border-radius: var(--r-kecil);
  color: var(--tinta2);
  font-size: 14.5px;
  font-weight: 550;
  transition: background 120ms, color 120ms;
}
.menu a:hover { background: var(--permukaan2); text-decoration: none; }
.menu a.kini { background: var(--info-soft); color: var(--biru-di-lembut); font-weight: 650; }
html[data-tema="gelap"] .menu a.kini { background: #1a2c45; color: var(--biru); }
/* Ikon menu digambar sebagai bentuk sederhana, bukan pustaka ikon: cukup
   untuk membedakan tujuan, dan tidak membawa gaya pustaka luar (R-04). */
.menu .ikon { flex: 0 0 18px; height: 18px; opacity: .75; }
.menu a.kini .ikon { opacity: 1; }
.menu .hitung {
  margin-left: auto;
  padding: 1px 7px;
  background: var(--biru);
  color: #fff;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
}
html[data-tema="gelap"] .menu .hitung { color: #0d1a29; }

.sisi-kaki {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--garis);
  font-size: 12.5px;
  color: var(--redup);
}
.sisi-kaki .alamat { word-break: break-all; }

/* ── Bar atas tipis (hanya layar sempit) ──────────────────────────────── */
.bar-atas {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--permukaan);
  border-bottom: 1px solid var(--garis);
  position: sticky;
  top: 0;
  /* Tinggi dipatok supaya baris chip di bawahnya bisa menempel tepat di
     bawah bar ini tanpa menutupi isi surat. */
  height: var(--tinggi-atas);
  z-index: 20;
}
.bar-judul { flex: 1; font-size: 16px; font-weight: 700; letter-spacing: -.01em; }

/* ── Bilah bawah (hanya layar sempit) ─────────────────────────────────── */
.bawah {
  display: flex;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  background: var(--permukaan);
  border-top: 1px solid var(--garis);
  /* Safe area untuk ponsel berponi, supaya ikon tidak tertutup bilah sistem. */
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.bawah a {
  flex: 1;
  min-height: var(--tinggi-bawah);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--redup);
  font-size: 11.5px;
  font-weight: 600;
  position: relative;
}
.bawah a:hover, .bawah a:active { text-decoration: none; }
.bawah a.kini { color: var(--biru); }
.bawah .ikon { width: 21px; height: 21px; }
.bawah .hitung {
  position: absolute;
  top: 7px;
  left: 50%;
  margin-left: 4px;
  padding: 0 5px;
  background: var(--biru);
  color: #fff;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
}
html[data-tema="gelap"] .bawah .hitung { color: #0d1a29; }

/* ── Tombol ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 36px; padding: 0 14px;
  border: 1px solid var(--garis); border-radius: var(--r-kecil);
  background: var(--permukaan); color: var(--tinta2);
  font: inherit; font-size: 14px; font-weight: 550;
  cursor: pointer; white-space: nowrap;
  transition: background 120ms, border-color 120ms;
}
.btn:hover { background: var(--permukaan2); text-decoration: none; }
.btn-utama {
  background: var(--utama);
  border-color: var(--utama);
  color: var(--di-utama);
}
.btn-utama:hover {
  background: var(--utama-hover);
  border-color: var(--utama-hover);
  color: var(--di-utama);
}
.btn-bahaya { color: var(--bahaya); border-color: var(--garis); }
.btn-bahaya:hover { background: var(--bahaya-soft); border-color: var(--bahaya); }
.btn-kecil { min-height: 30px; padding: 0 10px; font-size: 13px; }
.btn-ikon { min-width: 36px; padding: 0 9px; font-size: 15px; }
.btn-penuh { width: 100%; }

/* ── Panel ─────────────────────────────────────────────────────────────── */
.panel {
  background: var(--permukaan);
  border: 1px solid var(--garis);
  border-radius: var(--r);
}
.panel-sempit { max-width: 460px; margin: 30px auto; padding: 26px; }
/* Tautan merek di kepala panel login dan pendaftaran: jari menekannya seperti
   tombol lain, jadi tingginya dinaikkan ke ukuran sasaran sentuh. */
.panel-sempit .brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 17px;
  font-weight: 700;
  color: var(--tinta);
  letter-spacing: -.01em;
}

/* ── Kotak surat ───────────────────────────────────────────────────────── */
.kotak-kepala {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 11px 13px; border-bottom: 1px solid var(--garis);
  position: sticky; top: 0; background: var(--permukaan);
  border-radius: var(--r) var(--r) 0 0; z-index: 2;
}
.kotak-kepala .jumlah { font-size: 13px; color: var(--redup); }
.kotak-kepala .tombol-kotak { display: flex; gap: 6px; }

.kotak-daftar { max-height: calc(100vh - 190px); overflow-y: auto; }

/* ── Baris chip kotak surat (layar sempit) ────────────────────────────────
   Ini menggantikan sidebar pada layar sempit. Bukan dropdown: tiap tujuan
   satu ketukan langsung, tanpa perlu membuka menu dulu (R-27). Menggulir
   mendatar dengan snap supaya ujung chip selalu rapi, dan indikator
   "ada lagi" muncul sebagai bayangan di tepi kalau isinya melebihi layar. */
.kotak-baris {
  display: none;             /* dinyalakan hanya di layar sempit */
  gap: 7px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 8px 10px;
  margin-bottom: 8px;
  background: var(--permukaan);
  border: 1px solid var(--garis);
  border-radius: var(--r);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.kotak-baris::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;          /* sasaran jempol, bukan 20-30px (R-20) */
  padding: 0 14px;
  border-radius: 22px;
  border: 1px solid var(--garis);
  background: var(--kertas);
  color: var(--tinta2);
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
}
.chip:hover { text-decoration: none; border-color: var(--biru); }
.chip.kini {
  background: var(--utama);
  border-color: var(--utama);
  color: var(--di-utama);
}
.chip .hitung {
  min-width: 19px; height: 19px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px; background: var(--permukaan2); color: var(--redup);
  font-size: 11px; font-weight: 700;
}
.chip.kini .hitung { background: rgba(255, 255, 255, .26); color: inherit; }

/* ── Baris surat + geser untuk aksi ───────────────────────────────────── */
.baris-bungkus {
  position: relative;
  border-bottom: 1px solid var(--garis2);
  overflow: hidden;
}
.baris-bungkus:last-child { border-bottom: 0; }

/* Tombol pembuka aksi, untuk pemakai tetikus dan papan tuntas. Menempel di
   tepi kanan baris. Saat aksi terbuka, tombolnya disembunyikan karena
   fungsinya sudah diambil alih tombol Lihat/Arsip/Hapus. */
.baris-menu {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--redup);
  cursor: pointer;
  z-index: 2;
}
.baris-menu:hover { background: var(--permukaan2); color: var(--tinta); }
.baris-menu .ikon { width: 18px; height: 18px; }
.baris-bungkus.terbuka .baris-menu { display: none; }
/* Ruang untuk tombol itu supaya jam tidak tertimpa. */
.baris-atas { padding-right: 30px; }

/* Tiga aksi ada di belakang baris. Tingginya sama dengan barisnya karena
   keduanya anak dari bungkus yang sama, jadi tidak ada celah yang bisa
   diklik tanpa sengaja. */
.baris-aksi {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  display: flex;
  visibility: hidden;
}
.baris-bungkus.terbuka .baris-aksi { visibility: visible; }
/* Saat terbuka, barisnya benar-benar bergeser ke kiri sebanyak lebar ketiga
   aksi. Tanpa ini, aksinya hanya "terlihat" secara aturan CSS tetapi tetap
   TERTUTUP baris yang latarnya tidak tembus pandang. Lebarnya dihitung dari
   lebar satu aksi, bukan angka terpisah, supaya keduanya tidak bisa berbeda. */
.baris-bungkus.terbuka .baris {
  transform: translateX(calc(-3 * var(--lebar-aksi)));
}
.baris-aksi a, .baris-aksi button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: var(--lebar-aksi);
  height: 100%;
  min-height: 60px;
  border: 0;
  font: inherit;
  font-size: 11.5px;
  font-weight: 650;
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  padding: 0;
}
.baris-aksi a:hover, .baris-aksi button:hover { text-decoration: none; filter: brightness(1.08); }
.baris-aksi .ikon { width: 17px; height: 17px; }
/* Warna ketiga aksi sengaja berbeda karena perannya berbeda: lihat, arsip,
   dan hapus tidak boleh tertukar saat jempol menekan cepat (R-01: warna
   membawa makna di sini, bukan hiasan). */
.aksi-lihat { background: var(--biru); color: #fff; }
.aksi-arsip { background: #4a5a75; }
.aksi-hapus { background: var(--bahaya); }

.baris {
  display: block;
  padding: 11px 13px;
  background: var(--permukaan);
  color: inherit;
  position: relative;
  z-index: 1;
  transition: background 120ms, transform 160ms;
  touch-action: pan-y;
}
.baris:hover { background: var(--permukaan2); text-decoration: none; }
.baris.kini { background: var(--info-soft); }
html[data-tema="gelap"] .baris.kini { background: #172b45; }

.baris-atas {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 13.5px; color: var(--redup);
}
.baris-nama {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; color: var(--tinta2); font-weight: 550;
}
.baris.belum .baris-nama { color: var(--tinta); font-weight: 700; }
.baris-jam { font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.titik {
  display: inline-block; width: 7px; height: 7px; margin-right: 7px;
  border-radius: 50%; background: var(--biru); vertical-align: 1px;
}
.baris-subjek {
  margin-top: 2px; font-size: 14px; color: var(--tinta2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.baris.belum .baris-subjek { color: var(--tinta); font-weight: 600; }
.baris-cuplik {
  margin-top: 2px; font-size: 13px; color: var(--redup);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.baris-tanda { display: flex; gap: 6px; margin-top: 5px; flex-wrap: wrap; }
.tanda {
  padding: 1px 7px; border-radius: 20px; font-size: 11.5px; font-weight: 600;
  background: var(--permukaan2); color: var(--redup); border: 1px solid var(--garis);
}
.tanda-lampiran {
  background: var(--info-soft);
  color: var(--biru-di-lembut);
  border-color: transparent;
}
.tanda-spam { background: var(--bahaya-soft); color: var(--bahaya); border-color: transparent; }

/* Petunjuk geser hanya muncul di perangkat sentuh, dan hanya sekali di
   kepala kotak surat, bukan di setiap baris (R-19: gerak harus punya alasan). */
.petunjuk-geser {
  display: none;
  padding: 8px 13px;
  font-size: 12.5px;
  color: var(--redup);
  border-bottom: 1px solid var(--garis2);
  background: var(--permukaan2);
}
html.ada-sentuh .petunjuk-geser { display: block; }

/* ── Panel surat ───────────────────────────────────────────────────────── */
.surat { box-shadow: var(--naik); }
.surat-kepala { padding: 18px 20px 14px; border-bottom: 1px solid var(--garis); }
.surat-kepala h2 { margin: 0 0 10px; font-size: 20px; line-height: 1.3; letter-spacing: -.01em; }
.surat-meta { font-size: 13.5px; color: var(--redup); }
.surat-meta b { color: var(--tinta2); }
.surat-meta .baris-meta { margin-bottom: 2px; }
.surat-meta code { font: 12px var(--mono); color: var(--tinta2); word-break: break-all; }
.surat-alat { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }

.surat-badan { padding: 18px 20px; }
.surat-badan pre {
  margin: 0; font: 14.5px/1.65 var(--font); white-space: pre-wrap;
  word-wrap: break-word; overflow-wrap: anywhere; color: var(--tinta);
}

.peringatan-html {
  margin: 0 0 14px; padding: 11px 13px; border-radius: var(--r-kecil);
  background: var(--permukaan2); border: 1px solid var(--garis);
  font-size: 13.5px; color: var(--tinta2);
}

.kutipan {
  margin-top: 14px; padding: 12px 14px; border-radius: var(--r-kecil);
  background: var(--permukaan2); border: 1px solid var(--garis);
  font-size: 13.5px; color: var(--redup); white-space: pre-wrap;
}

/* ── Lampiran ──────────────────────────────────────────────────────────── */
.lampiran { padding: 0 20px 18px; }
.lampiran-kotak {
  border: 1px solid var(--garis); border-radius: var(--r-kecil);
  background: var(--permukaan2); overflow: hidden;
}
.lampiran-kepala {
  padding: 9px 13px; font-size: 12px; font-weight: 650;
  letter-spacing: .03em; text-transform: uppercase; color: var(--redup);
  border-bottom: 1px solid var(--garis);
}
.lampiran-item {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 13px; border-bottom: 1px solid var(--garis);
  flex-wrap: wrap;
}
.lampiran-item:last-child { border-bottom: 0; }
.lampiran-ikon {
  flex: 0 0 34px; height: 34px; display: grid; place-items: center;
  border-radius: var(--r-kecil); background: var(--permukaan);
  border: 1px solid var(--garis); font-size: 11px; font-weight: 700;
  color: var(--redup); text-transform: uppercase;
}
.lampiran-nama {
  flex: 1; min-width: 120px; font-size: 13.5px; color: var(--tinta2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lampiran-ukuran { font-size: 12px; color: var(--redup); white-space: nowrap; }
.lampiran-bahaya { font-size: 12px; color: var(--bahaya); white-space: nowrap; }
.gambar-inline {
  display: block; max-width: min(100%, 520px); height: auto; margin: 10px 0;
  border: 1px solid var(--garis); border-radius: var(--r-kecil);
}

/* ── Formulir ──────────────────────────────────────────────────────────── */
label {
  display: block; margin: 13px 0 5px;
  font-size: 13px; font-weight: 600; color: var(--tinta2);
}
input[type="text"], input[type="password"], input[type="email"],
input[type="file"], textarea, select {
  width: 100%; padding: 9px 11px;
  background: var(--permukaan); color: var(--tinta);
  border: 1px solid var(--garis); border-radius: var(--r-kecil);
  font: inherit;
  /* 16px, bukan 14,5px: Safari di iPhone memperbesar seluruh halaman saat
     bidang isian yang disentuh hurufnya di bawah 16px, dan setelah itu
     pengguna harus mencubit untuk kembali. */
  font-size: 16px;
  transition: border-color 120ms;
}
input:hover, textarea:hover, select:hover { border-color: #c3cede; }
html[data-tema="gelap"] input:hover,
html[data-tema="gelap"] textarea:hover,
html[data-tema="gelap"] select:hover { border-color: #34465e; }
input:focus, textarea:focus, select:focus { border-color: var(--biru); outline: none; }
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--cyan); outline-offset: 1px;
}
textarea { min-height: 190px; resize: vertical; line-height: 1.6; }
input[type="file"] { padding: 7px 9px; font-size: 13.5px; }
input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--biru); }

.baris-aksi { display: flex; gap: 9px; align-items: center; margin-top: 18px; flex-wrap: wrap; }
.bantuan { margin: 5px 0 0; font-size: 12.5px; color: var(--redup); }
.tanda-centang { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.tanda-centang label { margin: 0; font-size: 14px; font-weight: 550; }
.daftar-lampiran-kirim { margin-top: 9px; font-size: 13px; color: var(--redup); }
.daftar-lampiran-kirim div { display: flex; gap: 8px; align-items: center; padding: 4px 0; }

/* ── Pesan / notifikasi ────────────────────────────────────────────────── */
.pesan {
  padding: 11px 13px; margin-bottom: 14px;
  border-radius: var(--r-kecil); font-size: 14px; border: 1px solid transparent;
}
.pesan-ok { background: var(--ok-soft); color: var(--ok); border-color: var(--ok); }
.pesan-galat { background: var(--bahaya-soft); color: var(--bahaya); border-color: var(--bahaya); }
.pesan-info { background: var(--info-soft); color: var(--tinta2); border-color: var(--garis); }

/* ── Keadaan kosong (R-27) ─────────────────────────────────────────────── */
.kosong {
  padding: 40px 22px; text-align: center; color: var(--redup); font-size: 14px;
}
.kosong b { display: block; margin-bottom: 5px; color: var(--tinta2); font-size: 15px; }
.kosong .aksi-kosong { margin-top: 14px; }

/* ── Tabel ─────────────────────────────────────────────────────────────── */
.tabel-bungkus { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th {
  text-align: left; padding: 8px 10px; font-size: 12px; font-weight: 650;
  letter-spacing: .03em; text-transform: uppercase; color: var(--redup);
  border-bottom: 1px solid var(--garis);
}
td { padding: 10px; font-size: 13.5px; border-bottom: 1px solid var(--garis2); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }

/* ── Sandi, kode, rahasia ──────────────────────────────────────────────── */
.rahasia {
  padding: 11px 13px; margin-top: 8px;
  background: var(--permukaan2); border: 1px dashed var(--garis);
  border-radius: var(--r-kecil); font: 13.5px var(--mono);
  color: var(--tinta); word-break: break-all;
}
.kartu-kode {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 7px; margin-top: 9px;
}
.kartu-kode span {
  padding: 7px 9px; background: var(--permukaan2); border: 1px solid var(--garis);
  border-radius: var(--r-kecil); font: 13.5px var(--mono); text-align: center;
}
html[data-tema="gelap"] .kartu-kode span { background: #101a28; border-color: var(--garis); }
html[data-tema="gelap"] .rahasia { background: #101a28; border-color: #3a4a61; color: var(--tinta2); }

.kekuatan { margin-top: 9px; }
.kekuatan-batang { height: 5px; border-radius: 3px; background: var(--garis); overflow: hidden; }
.kekuatan-isi { height: 100%; width: 0; transition: width 160ms; }
.kekuatan-teks { margin-top: 5px; font-size: 12.5px; color: var(--redup); }
.langkah { margin: 0 0 6px; font-size: 14.5px; color: var(--tinta2); font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════════════
   LEBAR MENENGAH (tablet dan laptop kecil)
   Di bawah 1120px, kolom surat jadi sempit, jadi daftar dan surat ditumpuk:
   daftar di atas, surat di bawahnya. Ini keadaan tersendiri, bukan desktop
   yang diperas (R-03).
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width: 700px) {
  .sisi { display: block; }
  .bar-atas { display: none; }
  .bawah { display: none; }
  .kotak-baris { display: none; }   /* tugasnya dipegang sidebar */
  /* Halaman tanpa sidebar (login, pendaftaran): biarkan isinya memakai
     seluruh lebar supaya panelnya benar-benar di tengah layar, dan
     sembunyikan sidebar kosongnya. Kalau tidak, sidebar setinggi satu layar
     itu tetap memakan ruang dan mendorong panel ke bawah. */
  .tata.tanpa-nav { display: block; }
  .tanpa-nav .sisi { display: none; }
  .utama { padding-bottom: 18px; }
}

@media (min-width: 700px) and (max-width: 1119px) {
  .utama { padding: 14px; }
  .dua { grid-template-columns: minmax(0, 1fr); }
  .kotak-daftar { max-height: 46vh; }
}

@media (min-width: 1120px) {
  .dua {
    display: grid;
    grid-template-columns: var(--lebar-daftar) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
  }
  .kotak-daftar { max-height: calc(100vh - 150px); }
}

/* ═══════════════════════════════════════════════════════════════════════
   LEBAR SEMPIT (ponsel)
   Satu kolom. Surat dibuka sebagai halaman penuh, bukan kolom sempit di
   samping daftar.
   ═══════════════════════════════════════════════════════════════════════ */
/* Di layar sempit, chip kotak surat yang menggantikan sidebar menempel di
   atas supaya tujuan tetap terjangkau tanpa menggulir balik ke atas. */
@media (max-width: 699px) {
  .utama { padding: 12px; padding-bottom: calc(12px + var(--tinggi-bawah) + 8px); }
  .kotak-daftar { max-height: none; }
  /* Baris chip hanya untuk layar sempit: di layar lebar tugas itu dipegang
     sidebar, jadi menampilkan keduanya = dua navigasi untuk hal yang sama. */
  .kotak-baris {
    display: flex;
    position: sticky;
    top: var(--tinggi-atas);
    z-index: 3;
  }
  .surat { box-shadow: none; }
  .surat-kepala, .surat-badan { padding-left: 15px; padding-right: 15px; }
  .surat-kepala h2 { font-size: 18px; }
  .lampiran { padding-left: 15px; padding-right: 15px; }
  .panel-sempit { margin: 12px auto; padding: 20px; }
  .btn { min-height: 44px; }        /* target sentuh minimum (R-03) */
  .btn-kecil { min-height: 38px; }
  .kotak-kepala { position: static; }
  /* Tabel tiga kolom jadi daftar bertumpuk: kolom tidak dikecilkan sampai
     tidak terbaca. */
  .tabel-pendek thead { display: none; }
  .tabel-pendek tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--garis2); }
  .tabel-pendek td { display: block; border: 0; padding: 2px 0; }
  .tabel-pendek td[data-label]::before {
    content: attr(data-label) ": ";
    font-weight: 650;
    color: var(--redup);
  }
  .surat-alat .btn, .baris-aksi .btn { flex: 1 1 auto; }
}

/* Di perangkat tanpa hover, tautan dalam paragraf dan tombol kecil tetap
   harus punya kotak sentuh yang memadai (R-03). */
@media (hover: none) {
  .menu a { min-height: 44px; }
  .bawah a { min-height: var(--tinggi-bawah); }
}

/* Pengguna yang minta gerak dikurangi: matikan transisi. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Cetak: buang kerangka, sisakan suratnya. */
@media print {
  .sisi, .bawah, .bar-atas, .surat-alat, .kotak-kepala, .petunjuk-geser,
  .kotak-daftar { display: none !important; }
  .dua { display: block; }
  body { background: #fff; }
  .utama { padding: 0; }
}