/* Potongan formulir dari core/ui.js: baris isian, deretan pilihan, pesan galat.
   Dipakai semua builder. Sengaja terpisah dari daftar.css supaya berkasnya tidak
   tumbuh jadi satu tumpukan berisi tampilan semua layar sekaligus. */

/* ---------- PAGAR LEBAR ----------
   HUKUM BERKAS INI, dan ditulis SEKALI di sini supaya tiap wadah baru ikut
   terpagari tanpa harus diingat: TIDAK ADA ISI FORMULIR YANG BOLEH LEBIH LEBAR
   DARIPADA WADAHNYA.

   Kenapa perlu ditegaskan - trek grid `auto` TIDAK PERNAH menyusut di bawah
   min-content isinya, dan lebar bawaan sebuah <input> (size=20) kira-kira 339px.
   Satu kotak isian di dalam tiga lapis Lipatan karena itu memaksa kolomnya jadi
   467px di layar 430px, lalu .panel yang ber-overflow-x: hidden memotong 61px
   sebelah kanan - BESERTA tombol Done yang duduk di ujung sana. Tombolnya ada,
   tergambar, dan tidak bisa ditekan oleh siapa pun. Itu sudah terjadi.

   minmax(0, 1fr) mencabut lantai min-content itu; min-width: 0 mencabutnya dari
   sisi isian, karena `width: 100%` tidak berarti apa-apa selama lantainya masih
   berdiri. Keduanya perlu - yang satu tanpa yang lain tidak menutup apa pun.

   Seluruh yang di bawah ini tumpukan SATU KOLOM. Yang suatu hari benar-benar
   butuh beberapa kolom menuliskan grid-template-columns-nya sendiri, dan dengan
   begitu ia keluar dari daftar ini dengan sengaja, bukan diam-diam.
   Dijaga test/lebar-builder.test.js. */
.form,
.baris,
.turun,
.pilihan--tunggal,
.pilihan--tunggal .pilihan__butir,
.pilihan-editor__daftar,
.role,
.level,
.calon,
.lipat,
.lipat__isi,
.restriction,
.jorok,
.lama__kotak,
.rumus__baris,
.rumus__potong {
  grid-template-columns: minmax(0, 1fr);
}

.form {
  display: grid;
  gap: 18px;
}

.form__tombol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

/* Kaki editor punya dua urusan: keluar/membuang di kiri, lalu berpindah atau
   menyimpan di kanan. Mengandalkan flex-wrap biasa membuat lima tombol ini
   berpindah urutan saat layar menyempit. */
.form__tombol--editor {
  align-items: center;
  justify-content: space-between;
}

.form__keluar,
.form__lanjut {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.form__lanjut {
  margin-left: auto;
}

.form__tombol--editor .tombol {
  min-height: 36px;
  padding-inline: 11px;
}

@media (max-width: 420px) {
  .form__tombol--editor {
    align-items: flex-start;
  }

  .form__lanjut {
    width: 100%;
    margin-left: 0;
    justify-content: flex-end;
  }
}

/* ---------- satu baris isian ---------- */

.baris {
  display: grid;
  gap: 6px;
}

.baris__label {
  font-size: 0.875rem;
  font-weight: 600;
}

.baris__wajib {
  margin-left: 3px;
  color: #c0392b;
}

.baris__ket,
.petunjuk {
  font-size: 0.8125rem;
  color: var(--tinta-redup);
}

.isian {
  width: 100%;
  /* Lantai min-content sebuah <input> - lihat PAGAR LEBAR di kepala berkas.
     Tanpa baris ini `width: 100%` di atasnya tidak berarti apa-apa: kotaknya
     tetap menolak diperas di bawah lebar bawaannya, dan yang melar bukan
     kotaknya melainkan seluruh kolom yang memuatnya. */
  min-width: 0;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--garis);
  border-radius: 10px;
  background: var(--latar);
  color: var(--tinta);
  font: inherit;
  resize: vertical;
}
.isian--panjang {
  overflow-y: hidden;
  resize: none;
  line-height: 1.45;
}
.isian:focus {
  outline: 2px solid var(--utama);
  outline-offset: -1px;
}

/* ---------- daftar pilihan yang dilipat ----------
   Dipakai isian yang pilihannya banyak atau jawabannya sudah diketahui
   orangnya: folder, anggota, lapisan, jenis File. Panah digambar di sini, bukan
   diserahkan ke bawaan browser, supaya bentuknya sama di semua alat. */

.turun {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.turun__pilih {
  appearance: none;
  padding-right: 32px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 17px) calc(50% + 1px), calc(100% - 12px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}

.turun__pilih:disabled {
  background-color: var(--netral);
  color: var(--tinta-redup);
  cursor: default;
}

/* ---------- sakelar nyala/mati ---------- */

.sakelar {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.sakelar__rel {
  flex: 0 0 auto;
  width: 42px;
  height: 24px;
  padding: 3px;
  border-radius: 999px;
  background: var(--netral);
  transition: background 0.15s;
}

.sakelar__bulat {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--kertas);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  transition: transform 0.15s;
}

.sakelar--nyala .sakelar__rel {
  background: var(--utama);
}

.sakelar--nyala .sakelar__bulat {
  transform: translateX(18px);
}

.sakelar__label {
  font-size: 0.875rem;
}

/* ---------- deretan pilihan ---------- */

.pilihan {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pilihan--tunggal {
  display: grid;
  gap: 8px;
}

/* Dua pilihan bersebelahan, bukan bertumpuk: keduanya harus terbaca sekaligus
   untuk bisa dibandingkan. Di layar sempit mereka kembali bertumpuk sendiri. */
.pilihan--dua {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.pilihan__butir {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--garis);
  border-radius: 999px;
  background: var(--kertas);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.pilihan--tunggal .pilihan__butir {
  display: grid;
  gap: 2px;
  border-radius: 10px;
}

.pilihan__butir--aktif {
  border-color: var(--utama);
  background: var(--utama);
  color: var(--utama-tinta);
}

.pilihan__nama {
  font-weight: 600;
}

.pilihan__ket {
  font-size: 0.8125rem;
  opacity: 0.75;
}

.pilihan__buang {
  border: 0;
  background: none;
  color: inherit;
  font-size: 1.125rem;
  line-height: 1;
  padding: 0 0 0 2px;
  cursor: pointer;
}

/* ---------- penyusun pilihan Dropdown ----------
   Builder hanya memperlihatkan pratinjau dropdown. Daftar panjangnya berada di
   pop-up, supaya konfigurasi tidak mengubah ukuran kolom Spreadsheet. */

.pilihan-susun {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pilihan-susun__preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  color: var(--tinta);
  text-align: left;
  cursor: pointer;
}

.pilihan-susun__preview > span:first-child,
.pilihan-editor__nilai {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pilihan-editor {
  min-width: 0;
}

.pilihan-editor__tambah,
.pilihan-editor__baris {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.pilihan-editor__tambah .isian,
.pilihan-editor__baris .isian,
.pilihan-editor__nilai {
  flex: 1;
}

.pilihan-editor__daftar {
  display: grid;
  gap: 6px;
  max-height: 38vh;
  overflow-y: auto;
}

/* ---------- Role & lapisan ---------- */

.role,
.level {
  display: grid;
  gap: 10px;
  justify-items: start;
}

/* Isian "Role baru" tetap selebar penuh; yang menciut cuma tombolnya. */
.role > .role__baru,
.role > .pilihan,
.level > .level__baris {
  width: 100%;
}

.role__baru {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.role__baru .isian {
  flex: 1 1 160px;
  width: auto;
}

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

/* Formulir orang yang sedang disusun di dalam formulir workspace - diberi
   kotaknya sendiri supaya jelas isian mana yang milik siapa. */
.calon {
  display: grid;
  gap: 16px;
  padding: 12px;
  border: 1px solid var(--garis);
  border-radius: var(--sudut);
  background: var(--latar);
}

.anggota__ringkas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.level__kunci {
  flex: 1;
  padding: 11px 12px;
  border: 1px dashed var(--garis);
  border-radius: 10px;
  color: var(--tinta-redup);
}

/* Gambar yang sudah terpasang di sebelah kiri, cara menggantinya di sebelah
   kanan. Pratinjaunya bukan hiasan: petak unggah tidak menyebutkan apa yang
   sedang terpasang, jadi tanpa gambar di sebelahnya tak ada yang tahu apakah
   yang barusan dipilih sudah benar-benar dipakai.

   Dipakai dua tempat - logo workspace dan foto profil - jadi rumahnya di sini,
   bukan di salah satu dari keduanya. */
.wslogo {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.wslogo__aksi {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Petak unggahnya melar selebar kolomnya - ia sasaran jatuhan berkas, dan sasaran
   yang sempit sulit dikenai. Tombol "Remove" tidak: ia perbuatan kecil, dan
   tombol selebar kolom di bawah petak unggah terbaca sebagai tombol utama. */
.wslogo__aksi > .tombol {
  align-self: flex-start;
}

/* ---------- tombol tambah ----------
   Seukuran tulisannya, dan sengaja TIDAK selebar formulirnya. Tombol tambah
   hampir selalu duduk sebagai anak langsung .form, dan anak sebuah grid melar
   memenuhi lajurnya tanpa ada yang menyuruhnya - akibatnya "+ Add Row" tampil
   sebesar tombol Submit di kakinya, padahal yang satu menambah sebaris isian
   dan yang lain mengakhiri seluruh pekerjaan.

   justify-self DAN align-self dua-duanya ditulis: yang pertama menahannya di
   dalam grid, yang kedua di dalam lajur tegak flex. Tombol ini dipakai di
   keduanya. */

.tombol-tambah {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  justify-self: start;
  align-self: start;
  width: auto;
  min-height: 34px;
  padding: 6px 12px 6px 9px;
  border: 1px dashed var(--garis);
  border-radius: 999px;
  background: none;
  color: var(--tinta-redup);
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
}

.tombol-tambah:hover {
  border-color: var(--utama);
  color: var(--tinta);
}

.tombol-tambah:disabled {
  opacity: 0.45;
  cursor: default;
}

/* ---------- bagian yang bisa dilipat ----------
   Bagian yang sudah jadi dilipat sampai tinggal judulnya. Tanpa ini, daftar
   yang tumbuh sambil disusun - Action Field, baris laporan, section - membuat
   yang ketiga belas tak pernah kelihatan karena dua belas sebelumnya masih
   terbentang penuh di atasnya. */

.lipat {
  display: grid;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--garis);
  border-radius: var(--sudut);
  background: var(--latar);
}

.lipat__kepala {
  display: flex;
  align-items: center;
  gap: 6px;
}

.lipat__judul {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.lipat__panah {
  flex: none;
  color: var(--tinta-redup);
  transition: transform 0.15s;
}

.lipat--buka .lipat__panah {
  transform: rotate(90deg);
}

.lipat__teks {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Keterangan sebuah bagian ikut terbaca selagi terlipat - itu yang membuat
   bagian yang dicari ketemu tanpa dibuka satu per satu. */
.lipat__ket {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--tinta-redup);
  font-size: 0.8125rem;
  font-weight: 400;
}

/* Tetap kelihatan selagi terlipat: tombol yang membuang sebuah bagian justru
   paling dicari saat bagiannya sedang tidak dibaca. */
.lipat__aksi {
  display: flex;
  flex: none;
  gap: 4px;
}

.lipat__isi {
  display: grid;
  gap: 16px;
}

/* ---------- pesan gagal ---------- */

.galat {
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(192, 57, 43, 0.12);
  color: #c0392b;
  font-size: 0.875rem;
}

/* ---------- penyusun kolom & baris di File Card Builder ----------
   Isian bertumpuk yang bisa ditambah-kurangi sendiri. Dipakai Custom Row dan
   Variable Column, dan nanti Action Field. */

.susun {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Anak sebuah flex column bawaannya min-width: auto - lantai yang sama dengan
   trek grid `auto`, cuma lewat jalan lain. Lihat PAGAR LEBAR di kepala berkas. */
.susun > * {
  min-width: 0;
}

.susun__baris {
  display: flex;
  align-items: center;
  gap: 6px;
}

.susun__baris .isian {
  flex: 1;
  min-width: 0;
}

.kolom {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--garis);
  border-radius: var(--sudut);
  background: var(--latar);
}

.kolom__atas {
  display: flex;
  align-items: center;
  gap: 6px;
}

.kolom__atas .pilihan,
.kolom__atas .isian {
  flex: 1;
  min-width: 0;
}

.kolom__tipe {
  flex: 0 0 auto;
  width: auto;
}

/* Rumus yang salah ketik ditolak di sini, bukan dibiarkan membuat satu kolom
   diam-diam kosong di layar setiap hari. */
.kolom__galat {
  color: #c0392b;
  font-size: 0.8125rem;
}

/* ---------- rancangan tabel di File Card Builder ----------
   Yang sedang dirancang sebuah tabel, jadi rancangannya digambar sebagai tabel:
   kepala kolom di tempatnya kepala kolom, baris tetap di tempatnya baris. Itu
   yang membuat "Fixed Column" dan "Variable Column" tidak perlu dijelaskan. */

.rancang th,
.rancang td {
  vertical-align: top;
  white-space: normal;
}

.rancang .isian {
  padding: 7px 9px;
  font-size: 0.875rem;
}

/* Kolom Spreadsheet di builder memakai dua rel yang tidak saling mendorong:
   isi maksimum sepertiga kotak tabel, lalu rel aksi tipis di kanan. */
.rancang .rancang__baris {
  width: min(100%, calc(33.333cqw + 22px));
  max-width: calc(33.333cqw + 22px);
}

/* Penanda "terkunci" pada sebuah BARIS tetap. Tulisannya sengaja pendek dan
   tetap - alasan lengkapnya, yang menyebut tiap task yang menulis ke sana, ada
   di tooltipnya. Kalimat panjang di dalam sel ikut memuai bersama jumlah
   tasknya, dan tujuh kartu Stock Opname sudah membuktikan ke mana itu berujung.
   Kolom tidak punya penanda ini sama sekali: Turun-nya yang mati sudah
   memberitahu, dan ikon simpul di sebelahnya membuka alasannya. */
.rancang__kunci {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--tinta-redup);
  font-size: 0.75rem;
  font-style: italic;
}

/* Rumus sebuah kolom TERBACA di bawah jenisnya, walau yang membuka penyusunnya
   tombol tersendiri di atasnya - rumus yang cuma bisa dilihat lewat pop-up
   tersendiri tidak pernah diperiksa ulang oleh yang menyusunnya. */
.rancang__rumus {
  display: block;
  margin-top: 4px;
  padding: 3px 7px;
  border: 1px dashed var(--garis);
  border-radius: 6px;
  color: var(--tinta-redup);
  font-size: 0.75rem;
  max-width: 33.333cqw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rancang__sel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px;
  align-items: start;
  column-gap: 4px;
  width: min(100%, calc(33.333cqw + 22px));
  max-width: calc(33.333cqw + 22px);
}

.rancang__sel--tanpa-aksi {
  grid-template-columns: minmax(0, 1fr);
  width: min(100%, 33.333cqw);
  max-width: 33.333cqw;
}

.rancang__isi {
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

.rancang__isi .turun,
.rancang__isi .isian {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rancang__isi .turun {
  min-width: 0;
}

.rancang__isi .turun__pilih {
  width: 100%;
  min-width: 0;
}

.rancang__aksi {
  display: flex;
  justify-content: flex-end;
  width: 18px;
  min-width: 18px;
}

/* Area aksi memang ramping. Ia tetap tombol utuh agar tidak mengalir keluar
   dari cell, bukan tombol 36px yang menimpa kolom tetangga. */
.rancang__aksi .tombol-ikon {
  width: 18px;
  min-width: 18px;
  height: 36px;
  padding: 0;
  border-radius: 6px;
}

.rancang__aksi .tombol-ikon--aktif {
  border-color: var(--utama);
  background: var(--utama);
  color: var(--utama-tinta);
}

.rancang__aksi .ikon {
  width: 13px;
  height: 13px;
}

.rancang__tambah-kolom {
  width: 42px;
  min-width: 42px;
  padding: 6px;
  text-align: center;
}

.rancang__tambah-baris th,
.rancang__tambah-baris td {
  background: var(--kertas);
  border-top-style: dashed;
}

.rancang__tambah-baris .tombol-ikon {
  margin: 0 auto;
}

/* Sel yang isinya sudah pasti - Fixed Column pada New Row Per Date. Abu-abu dan
   tidak bisa ditekan; kalau dibiarkan kosong ia terbaca seperti ada yang lupa
   diisi. */
.rancang__pasti {
  display: block;
  padding: 8px 9px;
  border: 1px dashed var(--garis);
  border-radius: 8px;
  color: var(--tinta-redup);
}

.rancang__ket {
  color: var(--tinta-redup);
  font-size: 0.8125rem;
  font-weight: 400;
}

.rancang__tipe td {
  background: var(--kertas);
}

.rancang__nanti {
  color: var(--tinta-redup);
  font-size: 0.8125rem;
  opacity: 0.6;
  cursor: default;
}

/* Tombol tambah berdiri DI BAWAH tabelnya, di luar petak yang bisa digulir ke
   samping - kalau ikut di dalamnya, tombol menambah kolom keenam hanyut keluar
   layar bersama kolom kelima dan cuma ketemu oleh yang menggulir mencarinya. */
.rancang__tambah {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

/* File-card access choices are controls, not explanatory helper copy. */
.restriction {
  display: grid;
  gap: 8px;
}

.restriction__atas,
.restriction__aksi,
.restriction__pilihan {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.restriction__atas {
  justify-content: space-between;
}

.builder__konteks {
  font-size: 1rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

/* ---------- hierarki di dalam pop-up Action ----------
   Kolom dan baris menjorok di bawah Filenya; cara menulis kembali sejajar.
   Bukan hiasan: kolom yang berdiri sejajar dengan Filenya terbaca seperti
   pilihan yang setara, padahal ia bagian dari File di atasnya dan berubah
   begitu Filenya berganti. */

.jorok {
  display: grid;
  gap: 6px;
  margin-left: 14px;
  padding-left: 10px;
  border-left: 2px solid var(--garis);
}

/* ---------- lama waktu: hari + jam + menit ----------
   Tiga kotak sebaris, masing-masing bersatuan sendiri. Menuliskan "tiga hari"
   dalam menit membuat angkanya tidak terbaca lagi oleh yang mengisinya. */

.lama {
  display: flex;
  gap: 8px;
}

.lama__kotak {
  flex: 1;
  display: grid;
  gap: 3px;
  justify-items: center;
  min-width: 0;
}

.lama__kotak .isian {
  text-align: center;
}

/* ---------- rumus yang disusun, bukan diketik ---------- */

.rumus__baris {
  display: grid;
  gap: 8px;
}

.rumus__potong {
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--garis);
  border-radius: 10px;
  background: var(--kertas);
}

.rumus__suku {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.rumus__suku > * {
  flex: 1 1 130px;
  min-width: 0;
}

/* Kalimat rumusnya ditampilkan supaya yang menyusunnya bisa membaca sendiri apa
   yang barusan disusunnya - tanpa ini, rumus jadi tebakan sampai kolomnya diisi. */
.rumus__hasil {
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--netral);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.875rem;
  word-break: break-word;
}

/* Draft/Active tampil sepanjang builder terbuka, bukan cuma setelah disimpan -
   orang jadi tahu apa yang masih kurang sebelum menekan Submit. */
.status-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--garis);
  border-radius: var(--sudut);
  background: var(--latar);
}

/* Pemilih hari harus tetap hemat tempat, terutama di layar telepon. */
.hari-ringkas {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

.hari-ringkas__item {
  min-width: 0;
  padding: 6px 2px;
  border: 1px solid var(--garis);
  border-radius: 7px;
  background: var(--kertas);
  color: var(--tinta-redup);
  font: inherit;
  font-size: 0.75rem;
  cursor: pointer;
}

.hari-ringkas__item--aktif {
  border-color: var(--utama);
  background: var(--utama);
  color: var(--utama-tinta);
}

.kolom__atas--aksi > .pilih {
  flex: 1 1 0;
  min-width: 0;
}

.kolom__atas--aksi .pilih__butir {
  min-width: 0;
  padding-inline: 8px;
  white-space: nowrap;
}

.form__field {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  padding: 8px 0;
  border-top: 1px solid var(--garis);
}