/* Teh Ayu Dashboard - satu tema terang, tanpa mode gelap. */

:root {
  /* Warna diambil langsung dari lambang aplikasi. */
  --hijau:      #B0325A;   /* aksen utama, mawar tua */
  --hijau-tua:  #8E2748;   /* saat disorot */
  --hijau-wash: #FCE9EF;   /* latar lembut aksen */
  --merah-muda: #F0849C;   /* merah muda cerah dari lambang */
  --kuning:     #B8791E;
  --kuning-wash:#FBF1DE;
  --kuning-teks:#8A5A12;
  --merah:      #C2352F;
  --merah-wash: #FBEBEA;

  --halaman:    #FFFFFF;
  --kartu:      #FFFFFF;
  --lembut:     #FBF6F8;
  --garis:      #EFE3E8;
  --garis-tipis:#F7F0F3;
  --teks:       #2B1F24;
  --teks-2:     #7A6B70;
  --teks-3:     #A99BA0;

  --r-kartu: 14px;
  --r-kecil: 10px;

  --font: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system,
          "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--halaman);
  color: var(--teks);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.006em;
}
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--hijau); outline-offset: 2px;
}
.tersembunyi { display: none !important; }
.sisa { flex: 1; }
svg { display: block; }
.ikon { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.7;
        fill: none; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ikon-kecil { width: 15px; height: 15px; }

/* ================================================================ TOMBOL */
.tbl-utama {
  background: var(--hijau); color: #fff; font-weight: 600; font-size: 13.5px;
  padding: 10px 20px; border-radius: var(--r-kecil);
}
.tbl-utama:hover:not(:disabled) { background: var(--hijau-tua); }
.tbl-utama:disabled { opacity: .45; cursor: not-allowed; }
.tbl-biasa {
  border: 1px solid var(--garis); border-radius: var(--r-kecil);
  padding: 9px 15px; font-size: 13px; color: var(--teks-2); font-weight: 500;
}
.tbl-biasa:hover:not(:disabled) { background: var(--lembut); color: var(--teks); }
.tbl-biasa:disabled { opacity: .45; cursor: not-allowed; }
.tbl-biasa.kecil { padding: 6px 12px; font-size: 12.5px; }
.lebar { width: 100%; }

/* =============================================================== GERBANG */
.gerbang { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.kartu-masuk {
  width: 340px; max-width: 100%;
  border: 1px solid var(--garis); border-radius: var(--r-kartu);
  padding: 30px 28px 26px;
  display: flex; flex-direction: column; gap: 6px;
}
.masuk-tanda { width: 56px; height: 56px; margin-bottom: 12px; display: block; }
.masuk-nama { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }
.masuk-ket { color: var(--teks-2); font-size: 13px; margin-bottom: 16px; }
.kartu-masuk .label-k { margin-top: 4px; }
.kartu-masuk .tbl-utama { margin-top: 14px; }
.galat-kecil { color: var(--merah); font-size: 12.5px; margin: 6px 0 0; }

/* ================================================================= APP */
.app { display: grid; grid-template-columns: 236px minmax(0,1fr); min-height: 100vh; }

.rel {
  background: var(--kartu); border-right: 1px solid var(--garis);
  padding: 18px 14px 16px;
  display: flex; flex-direction: column; gap: 4px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.rel::-webkit-scrollbar { width: 6px; }
.rel::-webkit-scrollbar-thumb { background: var(--garis); border-radius: 3px; }

.merek { display: flex; align-items: center; gap: 10px; padding: 2px 6px 16px; }
.merek-tanda-app { width: 32px; height: 32px; flex: none; display: block; }
.merek-nama { font-weight: 700; font-size: 14px; line-height: 1.15; letter-spacing: -0.01em; }
.merek-nama span { font-weight: 500; color: var(--teks-2); font-size: 13px; }

.ganti-ws {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  border: 1px solid var(--garis); border-radius: var(--r-kecil);
  padding: 8px 10px; margin-bottom: 14px;
}
.ganti-ws:hover { background: var(--lembut); }
.ws-tanda { width: 22px; height: 22px; border-radius: 6px; flex: none;
            background: var(--hijau); color: #fff; display: grid; place-items: center; }
.ws-nama { font-size: 12.5px; font-weight: 600; flex: 1; min-width: 0;
           overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-panah { color: var(--teks-3); }

.nav {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  padding: 9px 10px; border-radius: var(--r-kecil);
  font-size: 13.5px; color: var(--teks-2);
}
.nav:hover { background: var(--lembut); color: var(--teks); }
.nav.aktif { background: var(--lembut); color: var(--teks); font-weight: 600; }
/* Berlaku di menu atas maupun daftar Dokumen. Dulu ditulis ".nav .segera",
   jadi yang di daftar Dokumen tidak kebagian gaya sama sekali dan cuma
   terbaca sebagai tulisan biasa. */
.segera {
  margin-left: auto; flex: none;
  font-size: 9px; letter-spacing: .07em; font-weight: 700; line-height: 1;
  color: var(--kuning-teks); background: var(--kuning-wash);
  border: 1px solid #EBD7AE;
  padding: 3px 7px; border-radius: 20px;
}
.rel-judul { padding: 18px 10px 6px; font-size: 10.5px; font-weight: 700;
             letter-spacing: .07em; color: var(--teks-3); }
.berkas { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
          padding: 8px 10px; border-radius: var(--r-kecil); font-size: 13px; color: var(--teks-2); }
.berkas:hover { background: var(--lembut); color: var(--teks); }
.berkas.aktif { background: var(--lembut); color: var(--teks); font-weight: 600; }
.berkas-tanda { width: 20px; height: 20px; border-radius: 6px; flex: none;
                display: grid; place-items: center; color: #fff; font-size: 10px; font-weight: 700; }
.rel-bawah { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--garis-tipis); }

/* =============================================================== UTAMA */
.utama { min-width: 0; padding: 26px 30px 56px; display: flex; flex-direction: column; gap: 20px; }
.lembar { display: flex; flex-direction: column; gap: 16px; }

.kepala { display: flex; align-items: flex-start; gap: 20px; }
.kepala h1 { font-size: 27px; font-weight: 700; margin: 0; letter-spacing: -0.02em; }
.kepala .sub { color: var(--teks-2); font-size: 13.5px; margin-top: 3px; }
.tanggal { display: flex; align-items: center; gap: 7px; font-size: 12.5px;
           color: var(--teks-2); margin-bottom: 5px; font-weight: 500; }
.tanggal .ikon { color: var(--teks-3); }
.kepala-alat { display: flex; align-items: center; gap: 11px; }

.cari { display: flex; align-items: center; gap: 9px; color: var(--teks-3);
        border: 1px solid var(--garis); border-radius: 999px; padding: 8px 14px; min-width: 210px; }
.cari input { border: none; outline: none; flex: 1; min-width: 0; font-size: 13.5px; background: none; }
.foto { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex: none;
        padding: 0; border: 1px solid var(--garis); }
.foto svg, .foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* =============================================================== KARTU */
.kartu { background: var(--kartu); border: 1px solid var(--garis); border-radius: var(--r-kartu); }
.kartu-kepala { display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px 0; flex-wrap: wrap; }
.kartu-judul { font-size: 17px; font-weight: 700; letter-spacing: -0.015em; }
.kartu-ket { font-size: 12.5px; color: var(--teks-2); margin-top: 2px; }
.kartu-isi { padding: 18px 20px 20px; }

.ubin { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px,1fr)); gap: 16px; }
.ubin-kartu { background: var(--kartu); border: 1px solid var(--garis); border-radius: var(--r-kartu);
              padding: 17px 19px 15px; display: flex; flex-direction: column; gap: 26px; }
.ubin-atas { display: flex; align-items: center; gap: 10px; }
.ubin-atas .nama { font-size: 14.5px; font-weight: 600; flex: 1; }
.ubin-atas .ikon { color: var(--teks-3); }
.ubin-bawah { display: flex; align-items: flex-end; gap: 10px; }
.ubin-bawah .label { font-size: 13px; color: var(--teks-2); flex: 1; }
.ubin-bawah .angka { font-size: 34px; font-weight: 700; line-height: .95;
                     letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.ubin-bawah .angka .dari { font-size: 16px; font-weight: 600; color: var(--teks-3); }

.baris-dua { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr); gap: 16px; align-items: start; }

/* =============================================================== PAPAN */
.papan { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px,1fr)); gap: 9px; }
.papan-kartu { border: 1px solid var(--garis); border-radius: var(--r-kecil);
               padding: 11px 12px; display: flex; flex-direction: column; gap: 4px; }
.papan-kartu.masuk { border-color: #F2CBD8; background: #FEF7F9; }
.papan-nama { font-size: 13px; font-weight: 600; }
.papan-ket { font-size: 11.5px; color: var(--teks-3); }
.papan-kartu.masuk .papan-ket { color: var(--hijau); font-weight: 600; }

/* ============================================================== SEGMEN */
.segmen { display: flex; background: var(--lembut); border-radius: 10px; padding: 3px; gap: 3px; }
.segmen button { flex: 1; padding: 7px 10px; border-radius: 8px; font-size: 13px;
                 color: var(--teks-2); font-weight: 500; }
.segmen button.aktif { background: #fff; color: var(--teks); font-weight: 600;
                       box-shadow: 0 1px 3px rgba(16,24,40,.08); }

.butir { border-top: 1px solid var(--garis-tipis); padding: 13px 0 12px; }
.butir:first-child { border-top: none; }
.butir-atas { display: flex; align-items: flex-start; gap: 10px; }
.butir-nama { font-size: 14.5px; font-weight: 700; letter-spacing: -0.01em; }
.butir-kanan { margin-left: auto; text-align: right; }
.butir-kanan .k { font-size: 11px; color: var(--teks-3); }
.butir-kanan .w { font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.butir-ket { font-size: 12.5px; color: var(--teks-2); margin-top: 5px; }
.kosong-kecil { padding: 26px 6px; text-align: center; color: var(--teks-3); font-size: 13px; }

/* ================================================================= PIL */
.pil { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px;
       white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }
.pil.hijau { background: var(--hijau-wash); color: var(--hijau-tua); }
.pil.kuning { background: var(--kuning-wash); color: var(--kuning-teks); }
.pil.merah { background: var(--merah-wash); color: var(--merah); }
.pil .ikon { width: 12px; height: 12px; stroke-width: 2.2; }

/* =============================================================== TABEL */
.tabelwrap { overflow-x: auto; padding: 0 20px 20px; }
table { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 600px; }
thead th { background: var(--lembut); font-size: 12px; font-weight: 600; color: var(--teks-2);
           text-align: left; padding: 11px 16px; white-space: nowrap; }
thead th:first-child { border-radius: 9px 0 0 9px; }
thead th:last-child { border-radius: 0 9px 9px 0; }
tbody td { padding: 14px 16px; border-bottom: 1px solid var(--garis-tipis); font-size: 13.5px;
           color: var(--teks-2); vertical-align: top; }
tbody tr:last-child td { border-bottom: none; }
td.tebal { font-weight: 600; color: var(--teks); }
td.angka-sel { font-variant-numeric: tabular-nums; }
.sel-aksi { display: flex; gap: 6px; flex-wrap: wrap; }
.chip-tgl { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--garis);
            border-radius: 9px; padding: 7px 11px; font-size: 12.5px; color: var(--teks-2); }
.pilih-divisi { border: 1px solid var(--garis); border-radius: 8px; padding: 6px 8px;
                font-size: 13px; font-weight: 600; min-width: 140px; }

/* ============================================================== ISIAN */
.isian { width: 100%; border: 1px solid var(--garis); border-radius: var(--r-kecil);
         padding: 10px 12px; font-size: 13.5px; background: #fff; }
.isian:disabled { background: var(--lembut); color: var(--teks-3); }
.teks-tempel { min-height: 104px; resize: vertical; line-height: 1.5; }
.label-k { display: block; font-size: 12px; color: var(--teks-2); margin-bottom: 6px; font-weight: 500; }
.baris { display: flex; gap: 14px; flex-wrap: wrap; }
.baris > * { flex: 1; min-width: 170px; }
.kabar { font-size: 13px; color: var(--teks-2); }
.kabar b { color: var(--teks); }
.petunjuk { color: var(--teks-3); font-size: 13px; padding: 8px 20px 22px; margin: 0; }
.belum { font-size: 12.5px; color: var(--teks-2); padding: 0 20px 18px; margin: 0; }
.belum b { color: var(--teks); font-weight: 600; }

.draf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
        background: var(--kuning-wash); border: 1px solid #EFDFBE; border-radius: var(--r-kecil);
        padding: 10px 13px; margin-bottom: 16px; font-size: 13px; color: var(--kuning-teks); }
.draf-judul { font-weight: 700; }
.draf .tbl-biasa { background: #fff; }

/* ============================================================== LEPAS */
.lepas { border: 1.5px dashed var(--garis); border-radius: var(--r-kartu);
         padding: 38px 24px; text-align: center; cursor: pointer; background: var(--kartu); }
.lepas:hover, .lepas.siap { border-color: var(--hijau); background: #FEF7F9; }
.lepas.terisi { border-style: solid; border-color: var(--hijau); background: #FEF7F9; }
.lepas-lingkar { width: 44px; height: 44px; border-radius: 50%; background: var(--hijau-wash);
                 color: var(--hijau); display: grid; place-items: center; margin: 0 auto 12px; }
.lepas-judul { font-weight: 700; font-size: 15px; }
.lepas-ket { color: var(--teks-2); font-size: 12.5px; margin-top: 4px; }

/* ============================================================== PROFIL */
.profil-atas { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.foto-besar { width: 78px; height: 78px; border-radius: 50%; overflow: hidden; flex: none;
              border: 1px solid var(--garis); background: var(--lembut); }
.foto-besar svg, .foto-besar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profil-aksi { display: flex; gap: 8px; flex-wrap: wrap; }
.profil-ket { font-size: 12px; color: var(--teks-3); margin-top: 8px; }
.simpan-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
              padding-top: 16px; border-top: 1px solid var(--garis-tipis); }
.kabar-simpan { font-size: 12.5px; font-weight: 600; color: var(--hijau); }
.kabar-simpan.galat { color: var(--merah); }

/* ============================================================== LAINNYA */
.kosongan { padding: 48px 24px; text-align: center; }
.kosongan .lingkar { width: 46px; height: 46px; border-radius: 50%; background: var(--hijau-wash);
                     color: var(--hijau); display: grid; place-items: center; margin: 0 auto 14px; }
.kosongan h3 { margin: 0 0 6px; font-size: 16px; font-weight: 700; }
.kosongan p { margin: 0 auto; max-width: 46ch; font-size: 13.5px; color: var(--teks-2); }

.galat { border: 1px solid var(--merah); background: var(--merah-wash); color: var(--merah);
         border-radius: var(--r-kecil); padding: 12px 15px; font-size: 13px; }
.hasil { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
         border: 1px solid #F2CBD8; background: #FEF7F9; border-radius: var(--r-kartu); padding: 15px 18px; }
.hasil-ikon { width: 36px; height: 36px; border-radius: 50%; background: var(--hijau-wash);
              color: var(--hijau); display: grid; place-items: center; flex: none; }
.hasil-nama { font-weight: 700; font-size: 14px; }
.hasil-catatan { color: var(--teks-2); font-size: 12.5px; margin-top: 2px; }

/* ============================================================= UTILITAS
   Kelas kecil pengganti atribut style sebaris. CSP halaman ini melarang
   gaya sebaris, jadi semua penyetelan kecil harus lewat kelas. */
.flex-none { flex: none; }
.rapat { padding-bottom: 16px; }
.tanpa-atas { padding-top: 0; }
.sedikit-atas { padding-top: 14px; }
.kolom-18 { display: flex; flex-direction: column; gap: 18px; }
.kolom-16 { display: flex; flex-direction: column; gap: 16px; }
.tengah { align-items: center; }
.jarak-atas { margin-top: 12px; }
.jarak-atas-kecil { margin-top: 10px; }
.jarak-bawah { margin-bottom: 16px; }
.w-190 { max-width: 190px; }
.w-210 { max-width: 210px; }
.w-230 { max-width: 230px; }
.tulisan-kecil { font-size: 13px; color: var(--teks-2); }
.tanda-biru { background: #B0325A; }
.tanda-mawar { background: #D45C7E; }
.tanda-plum { background: #7E2A4C; }
.tebal-2 { stroke-width: 2.2; }
.isi-sunting { min-width: 260px; }
.sel-ringkas { max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.baris-nama { display: flex; align-items: center; gap: 8px; }
.ket-tebakan { margin-top: 4px; }

/* ========================================================== STATUS STRIP */
.status-strip {
  display: flex; flex-direction: column; gap: 9px;
  background: var(--hijau-wash); border: 1px solid #F2D3DE;
  border-radius: var(--r-kartu); padding: 14px 16px;
}
.status-baris { display: flex; align-items: baseline; gap: 9px; }
.status-angka { font-size: 22px; font-weight: 700; color: var(--hijau);
                font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.status-teks { font-size: 13px; color: var(--teks-2); }
.bilah { height: 7px; border-radius: 99px; background: #F3DCE4; overflow: hidden; }
.bilah-isi { height: 100%; width: 0; border-radius: 99px; background: var(--hijau); }
.status-belum { font-size: 12.5px; color: var(--teks-2); }
.tanda-sinkron {
  font-size: 11.5px; color: var(--teks-3);
  display: flex; align-items: center; gap: 6px; min-height: 17px;
}
.tanda-sinkron:not(:empty)::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--hijau); opacity: .55;
}
.tanda-sinkron.baru { color: var(--hijau); font-weight: 600; }
.tanda-sinkron.baru::before { opacity: 1; }
.tanda-sinkron.sepi::before { background: var(--kuning); opacity: 1; }
.tanda-sinkron.sepi { color: var(--kuning-teks); }
.status-belum b { color: var(--teks); font-weight: 600; }

/* =============================================================== TANGGAL */
.kotak-tanggal { position: relative; }
.kotak-tanggal .isian { padding-right: 42px; }
/* Ikonnya cuma gambar. Yang benar-benar disentuh adalah kolom tanggal
   bawaan yang ditumpuk tembus pandang persis di atasnya.
   Alasannya: di iPhone, showPicker() tidak membuka apa-apa dan .click()
   yang dipanggil dari kode juga diabaikan - satu-satunya yang berhasil
   membuka pemilih tanggal adalah sentuhan sungguhan yang mendarat di
   kolom bawaan itu sendiri. */
.tombol-kalender {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border-radius: 8px;
  display: grid; place-items: center; color: var(--teks-2);
  pointer-events: none;
}
.tanggal-asli {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; z-index: 2;
  opacity: 0; border: none; padding: 0; margin: 0; background: none;
  font-size: 16px;              /* di bawah 16px, Safari iPhone nge-zoom */
  cursor: pointer;
}
/* Kolomnya tembus pandang, jadi tanda fokusnya dipinjamkan ke ikon —
   kalau kolomnya sendiri dimunculkan, yang terlihat malah tanggal bawaan
   berformat mm/dd/yyyy dan itu justru membingungkan. */
.kotak-tanggal:hover .tombol-kalender { color: var(--teks); }
.kotak-tanggal:has(.tanggal-asli:focus-visible) .tombol-kalender {
  color: var(--hijau); outline: 2px solid var(--hijau); outline-offset: 1px;
}
.tanggal-hari-kecil { font-size: 12px; color: var(--teks-3); margin-top: 5px; }
.isian.salah { border-color: var(--merah); }

/* ============================================================ NAV BAWAH */
.nav-bawah { display: none; }

/* ================================================================ TABLET */
@media (max-width: 1000px) { .baris-dua { grid-template-columns: 1fr; } }

/* ================================================================== HP */
@media (max-width: 820px) {
  .app { grid-template-columns: 1fr; }

  /* menu samping diganti menu bawah */
  .rel { display: none; }
  .nav-bawah {
    display: grid; grid-template-columns: repeat(3, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    background: #fff; border-top: 1px solid var(--garis);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .nav-bawah button {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 7px 4px; border-radius: 10px; color: var(--teks-3); font-size: 11px;
  }
  .nav-bawah button .ikon { width: 21px; height: 21px; }
  .nav-bawah button.aktif { color: var(--hijau); font-weight: 600; }

  /* kepala halaman diringkas */
  .utama { padding: 14px 14px 92px; gap: 14px; }
  .kepala { flex-wrap: wrap; gap: 10px; align-items: center; }
  .kepala h1 { font-size: 21px; }
  .kepala .sub { font-size: 12.5px; }
  .cari { display: none; }
  .kepala-alat { margin-left: auto; }
  .foto { width: 36px; height: 36px; }

  .kartu-kepala { padding: 15px 15px 0; }
  .kartu-isi { padding: 14px 15px 16px; }
  .kartu-judul { font-size: 15.5px; }

  /* isian dan tombol jadi lebar penuh, sasaran sentuh besar */
  .baris { gap: 10px; }
  .baris > * { min-width: 100%; }
  /* WAJIB 16px. Di bawah itu Safari iPhone otomatis memperbesar halaman
     begitu kolom disentuh, dan zoom-nya tidak balik lagi - tampilannya jadi
     melebar dan sisi kanan terpotong. */
  .isian, .pilih-divisi, select, input, textarea { font-size: 16px; }
  .isian { padding: 12px 13px; }
  .teks-tempel { min-height: 130px; }
  .tbl-utama, .tbl-biasa { width: 100%; padding: 12px 16px; font-size: 14.5px; }
  .tbl-biasa.kecil { width: auto; padding: 8px 14px; }
  .w-190, .w-210, .w-230 { max-width: none; }
  .flex-none { flex: 1 1 100%; }

  /* tabel jadi kartu bertumpuk */
  .tabelwrap { padding: 0 15px 15px; }
  table { min-width: 0; }
  thead { display: none; }
  table, tbody, tr, td { display: block; width: 100%; }
  tbody tr {
    border: 1px solid var(--garis); border-radius: var(--r-kecil);
    padding: 12px 13px; margin-bottom: 10px;
  }
  tbody tr:last-child { margin-bottom: 0; }
  tbody td { border: none; padding: 3px 0; font-size: 13.5px; }
  tbody td:empty { display: none; }
  td.tebal { font-size: 15px; }
  .sel-ringkas { max-width: none; white-space: normal; overflow: visible; }
  .pilih-divisi { width: 100%; min-width: 0; padding: 10px; }

  /* Sasaran sentuh pemilih tanggal diperbesar - 32px terlalu kecil untuk jari. */
  .kotak-tanggal .isian { padding-right: 50px; }
  .tombol-kalender, .tanggal-asli { width: 42px; height: 42px; right: 3px; }
  .sel-aksi { margin-top: 8px; }
  .isi-sunting { min-width: 0; }

  .papan { grid-template-columns: repeat(2, 1fr); }
  .status-strip { padding: 11px 14px; }
  .status-belum { width: 100%; }
  .draf { flex-direction: column; align-items: flex-start; }
  .draf .tbl-biasa { width: auto; }
  .profil-atas { gap: 14px; }
  .simpan-bar { flex-direction: column; align-items: stretch; }
  .hasil { flex-direction: column; align-items: flex-start; }
  .hasil .tbl-biasa { width: 100%; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Penyesuaian tampilan HP: kartu lebih lembut dan sapaan lebih besar.
   Dulu ada tombol "Buat Word" mengambang di pojok kanan bawah supaya tidak
   perlu menggulir jauh. Dilepas - menutupi isi layar sepanjang waktu, dan
   di layar sependek ini tombol biasanya sudah cukup dekat. */
@media (max-width: 820px) {
  .kartu, .status-strip {
    border-radius: 18px;
    border-color: transparent;
    box-shadow: 0 1px 2px rgba(43,31,36,.05), 0 6px 18px -10px rgba(43,31,36,.18);
  }
  .status-strip { border: 1px solid #F2D3DE; box-shadow: none; }
  .kepala h1 { font-size: 23px; letter-spacing: -0.025em; }
  .tanggal { font-size: 12px; }

  tbody tr { border-radius: 14px; }

  /* Pengganjal antar tombol. Di layar lebar gunanya mendorong tombol lain ke
     kanan; begitu tombolnya menumpuk ke bawah, yang tersisa cuma celah kosong. */
  .baris > .sisa { display: none; }
}