/* Layar Reports dan lembar laporannya, beserta aturan cetaknya.

   Berkas sendiri, bukan disambung ke daftar.css, karena separuh isinya @media
   print - dan aturan cetak yang tercampur di antara aturan layar adalah aturan
   yang tidak akan pernah ditemukan lagi orang yang mencarinya. */

/* ---------- daftar laporan ---------- */

.lapor__butir {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--garis);
  border-radius: var(--sudut);
  background: var(--kertas);
  text-align: left;
  cursor: pointer;
  margin-bottom: 8px;
}
.lapor__butir:active {
  opacity: 0.7;
}

.lapor__butir-teks {
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* min-width: 0 supaya nama yang panjang dipotong di dalam kotaknya sendiri,
     bukan melebarkan barisnya sampai halamannya ikut bergeser ke samping. */
  min-width: 0;
  flex: 1;
}
.lapor__butir-nama {
  font-weight: 600;
}
.lapor__butir-ket {
  font-size: 0.8125rem;
  color: var(--tinta-redup);
}
.lapor__butir-kurang {
  font-size: 0.8125rem;
  color: #b4471f;
}

/* ---------- lembar laporannya ---------- */

.lapor {
  display: flex;
  flex-direction: column;
  gap: var(--sela);
}

/* Judul lembarnya - "report for [tanggal], built on [tanggal & jam]". Ia berdiri
   sendiri, tanpa nama card di atasnya, jadi ia boleh turun ke baris berikutnya:
   dipotong dengan titik-titik seperti keterangan biasa, tanggalnya sendiri yang
   hilang di layar sempit. */
.lapor__lembar-judul {
  font-weight: 650;
}

/* Sebab sebuah laporan Delay duduk DI DALAM chip statusnya, dan sebab itu
   panjangnya sepanjang nama card yang belum masuk - jadi khusus di sini chip
   boleh turun baris. Tanpa ini, satu nama card yang panjang melebarkan halaman
   sampai bergeser ke samping. */
.lapor__status .chip {
  white-space: normal;
}

.lapor__sumber {
  font-size: 0.875rem;
  color: var(--tinta-redup);
  margin-bottom: var(--sela);
}
.lapor__sumber-label {
  font-weight: 600;
  color: var(--tinta);
}

.lapor__section {
  border: 1px solid var(--garis);
  border-radius: var(--sudut);
  background: var(--kertas);
  overflow: hidden;
}

.lapor__kepala {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--garis);
}

.lapor__judul {
  flex: 1;
  min-width: 0;
  font-weight: 600;
}

.lapor__isi {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Satu baris nilai: label di kiri, angkanya di kanan, titik-titik menyambung.
   Penyambungnya bukan hiasan - di lembar yang barisnya banyak, mata kehilangan
   jejak baris tanpa itu, dan angka terbaca sebagai milik baris di atasnya. */
.lapor__baris {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.lapor__label {
  flex: 0 1 auto;
}
.lapor__baris::after {
  content: "";
  flex: 1;
  border-bottom: 1px dotted var(--garis);
  transform: translateY(-4px);
  order: 1;
}
.lapor__nilai {
  order: 2;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}
.lapor__kosong {
  font-weight: 400;
  font-size: 0.8125rem;
  color: var(--tinta-redup);
}

.lapor__teks {
  margin: 0;
  color: var(--tinta-redup);
  font-size: 0.875rem;
}

.lapor__blok {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lapor__blok-judul {
  font-weight: 600;
}

.lapor__kaki {
  margin-top: var(--sela);
}

/* ---------- galeri ---------- */

.galeri {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}

.galeri__butir {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.galeri__butir img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--sudut);
  border: 1px solid var(--garis);
  background: var(--netral);
}
.galeri__butir figcaption {
  font-size: 0.75rem;
  color: var(--tinta-redup);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.galeri__berkas {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  border-radius: var(--sudut);
  border: 1px solid var(--garis);
  background: var(--netral);
  font-weight: 600;
  text-decoration: none;
  color: inherit;
}

.galeri__buang {
  align-self: flex-start;
  border: 0;
  background: none;
  padding: 0;
  font-size: 0.75rem;
  text-decoration: underline;
  cursor: pointer;
}

/* Petak unggah: kotak putus-putus yang menerima berkas dijatuhkan ke atasnya. */
.unggah {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.unggah__kotak {
  display: grid;
  place-items: center;
  gap: 4px;
  padding: 18px;
  border: 1px dashed var(--garis);
  border-radius: var(--sudut);
  background: var(--kertas);
  text-align: center;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--tinta-redup);
}
.unggah__kotak--incar {
  border-color: var(--utama);
  border-style: solid;
}
.unggah__kotak:disabled {
  cursor: default;
  opacity: 0.6;
}

/* ---------- rancangan section di builder ---------- */

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

/* ---------- mencetak ----------

   Dialog cetak browser memotret halaman apa adanya, jadi yang perlu diatur di
   sini cuma MEMBUANG yang bukan bagian lembarnya: kepala, kaki, tombol, dan
   panel yang cuma berguna di layar. Sisanya sudah benar bentuknya.

   Warna dipaksa hitam-putih: laporan yang dicetak di tema gelap keluar sebagai
   halaman hitam penuh, dan itu menghabiskan tinta satu kartrid untuk satu
   lembar. */
@media print {
  /* TIGA `:root` BERJEJER, DAN ITU BUKAN SALAH KETIK. Warna gelap dipasang di
     `:root[data-tema="gelap"]` dan `:root:not([data-tema="terang"])` di
     base.css - keduanya lebih kuat daripada satu `:root`, jadi aturan ini
     kalah dan warna gelapnya menang. Yang terjadi kalau begitu: seluruh lembar
     keluar HITAM PENUH, persis pemborosan tinta yang aturan ini ditulis untuk
     mencegahnya. Itu sudah terjadi di sini, dan tidak ketahuan sampai lembarnya
     diperiksa sungguhan lewat media print. */
  :root:root:root {
    --latar: #ffffff;
    --kertas: #ffffff;
    --garis: #999999;
    --tinta: #000000;
    --tinta-redup: #444444;
    --netral: #ffffff;
  }

  /* Ukuran huruf kertas TIDAK ikut pilihan "Besar / Sangat besar". Yang di layar
     memang milik matanya masing-masing, tapi lembar cetak dibaca orang lain dan
     patah halamannya sudah diperiksa pada satu ukuran; huruf 30% lebih besar
     memindahkan potongan halamannya ke tempat yang tidak pernah dilihat siapa
     pun. Ditulis sebagai font-size, bukan --skala: nilai --skala dipasang
     core/theme.js sebagai style di <html>, dan style itu menang atas berkas mana
     pun. */
  html {
    font-size: 16px;
  }

  /* Bar pemberitahuan ikut dibuang: ia tinggal di kerangka, di atas isi tiap
     layar, jadi tanpa ini tiap lembar laporan terbit dengan pengingat tugas
     orang lain tercetak di baris paling atasnya. */
  .kepala,
  .kaki,
  .notifbar,
  .filekepala__tutup,
  .tab,
  .form__tombol,
  .saring,
  .popup,
  .laci {
    display: none !important;
  }

  /* Tombol Details di kepala lembarnya ikut hilang, tapi kepalanya sendiri
     tetap: tanggal laporannya justru yang paling perlu tercetak. Nama
     penyumbang di samping status juga dibuang - siapa yang mengisinya adalah
     urusan di dalam aplikasi, sedangkan yang dipegang orang cuma perlu tahu
     lembar ini untuk tanggal berapa dan angkanya sudah lengkap atau belum. */
  .lapor__cetak-kepala .tombol,
  .lapor__penyumbang {
    display: none !important;
  }

  /* Chip di kertas: hitam di atas putih, bergaris tepi. Warnanya di layar tipis
     - latar rgba dan tulisan berwarna - dan di atas kertas putih ia terbaca
     samar, padahal "Delay : sumber yang belum masuk" adalah hal kedua yang
     dicari orang sesudah angkanya. */
  .chip {
    background: none;
    color: #000000;
    border: 1px solid #999999;
  }

  html,
  body,
  #app,
  .rangka {
    height: auto;
    background: #ffffff;
  }

  .rangka__isi {
    overflow: visible !important;
    padding: 0;
  }

  /* Section tidak boleh terbelah dua halaman kalau masih muat utuh - angka yang
     terpisah dari judulnya tidak bisa dibaca siapa pun. */
  .lapor__section,
  .lapor__blok,
  .galeri__butir {
    break-inside: avoid;
    border-color: #999999;
  }

  .tabel__gulung {
    overflow: visible !important;
  }

  a[href] {
    text-decoration: none;
    color: inherit;
  }
}