bersama sub-judulnya, jadi pembungkus itu yang
diberi ruang tumbuh supaya tombol tutup terdorong ke pojok kanan atas
seperti tombol tutup jendela pada umumnya, bukan menempel ke judul. */
.app-modal .modal-card-head > :first-child {
flex-grow: 1;
min-width: 0;
}
.app-modal .modal-card-head > .delete {
margin-left: 1rem;
}
.app-modal .modal-card-title {
flex-grow: 0;
color: var(--pplh-text-strong);
font-family: 'Poppins', var(--bulma-family-primary);
font-size: 1.15rem;
font-weight: 800;
}
/* Baris konteks di bawah judul modal: kode, pemrakarsa, dan nama kegiatan.
Boleh melipat — nama kegiatan bisa panjang dan lebih baik terbaca penuh
daripada dipotong elipsis. */
.app-modal__sub {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .2rem .5rem;
margin-top: .3rem;
color: var(--pplh-muted);
font-size: .78rem;
font-weight: 500;
letter-spacing: 0;
line-height: 1.4;
}
/* Kode kegiatan tetap dibedakan: huruf mesin ketik supaya tidak tertukar
dengan teks biasa di sebelahnya. */
.app-modal__kode {
border-radius: 6px;
background: var(--pplh-surface-2);
padding: .1rem .4rem;
color: var(--pplh-text-strong);
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: .74rem;
font-weight: 600;
letter-spacing: .02em;
}
.app-modal__sub-item {
display: inline-flex;
align-items: center;
gap: .25rem;
}
.app-modal__sub-item i {
font-size: .95rem;
opacity: .8;
}
.app-modal__sub-sep {
color: var(--pplh-border);
}
html[data-theme='dark'] .app-modal__sub-sep {
opacity: .5;
}
.app-modal .modal-card-body {
flex: 1 1 auto;
min-height: 0;
padding: 1.5rem;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
background: var(--pplh-surface);
}
.app-modal .modal-card-head,
.app-modal .modal-card-foot {
flex-shrink: 0;
}
/* ---- Animasi buka/tutup ala modal Bootstrap ---------------------------- */
.app-modal.is-active .modal-background {
animation: appModalFade .18s ease-out;
}
.app-modal.is-active .modal-card {
animation: appModalMasuk .28s cubic-bezier(.16, 1, .3, 1);
}
/* Kelas sementara yang dipasang skrip sebelum modal benar-benar ditutup. */
.app-modal.is-closing .modal-background {
animation: appModalFade .16s ease-in reverse;
}
.app-modal.is-closing .modal-card {
animation: appModalKeluar .16s ease-in forwards;
}
@keyframes appModalFade {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes appModalMasuk {
from { opacity: 0; transform: translateY(-30px) scale(.97); }
to { opacity: 1; transform: none; }
}
@keyframes appModalKeluar {
from { opacity: 1; transform: none; }
to { opacity: 0; transform: translateY(-16px) scale(.98); }
}
@media (prefers-reduced-motion: reduce) {
.app-modal.is-active .modal-background,
.app-modal.is-active .modal-card,
.app-modal.is-closing .modal-background,
.app-modal.is-closing .modal-card {
animation: none;
}
}
.app-modal .modal-card-foot {
justify-content: flex-end;
gap: .75rem;
padding: 1rem 1.5rem;
}
/* Hapus didorong ke pojok kiri lewat margin, bukan space-between pada
pembungkusnya: tombolnya tidak selalu ada (baris baru, atau level yang tidak
berhak menghapus), dan space-between akan menarik Batal/Simpan ikut ke kiri
begitu ia hilang. Dengan margin, sisanya tetap rapat di kanan. */
.app-modal .js-modal-hapus {
margin-right: auto;
}
/* ---- Isian nomor seri penyimpanan -------------------------------------- */
/* Nomornya dibaca angka per angka saat mencari berkas di rak, jadi ditulis
monospasi supaya potongan 0125/PT.ABC/2026 tetap sejajar antar baris. */
.app-modal .js-seri-isian {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
letter-spacing: .01em;
}
/* Mode otomatis mengunci isiannya: yang tampil baru pratinjau, nomor finalnya
diterbitkan server saat disimpan. Garis putus-putus membedakannya dari
nomor yang benar-benar sudah diketik petugas. */
.app-modal .js-seri-isian[readonly] {
background: var(--pplh-surface-2);
border-style: dashed;
color: var(--pplh-muted);
cursor: default;
}
.app-modal .js-seri-isian[readonly]:focus {
box-shadow: none;
}
/* ---- Tirai "sedang menyimpan" ------------------------------------------ */
.app-modal__sibuk {
position: absolute;
inset: 0;
z-index: 5;
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
gap: .35rem;
padding: 1.5rem;
background: var(--pplh-surface); /* cadangan untuk peramban tanpa color-mix */
background: color-mix(in srgb, var(--pplh-surface) 88%, transparent);
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
text-align: center;
}
.app-modal.is-saving .app-modal__sibuk,
.app-modal.is-memuat .app-modal__sibuk {
display: flex;
animation: appModalFade .15s ease-out;
}
.app-modal__spinner {
width: 2.4rem;
height: 2.4rem;
margin-bottom: .5rem;
border: 3px solid var(--pplh-border);
border-top-color: var(--pplh-primary);
border-radius: 50%;
animation: appModalPutar .7s linear infinite;
}
html[data-theme='dark'] .app-modal__spinner {
border-top-color: #2ec4a6;
}
.app-modal__sibuk-teks {
color: var(--pplh-text-strong);
font-size: 1rem;
font-weight: 700;
}
.app-modal__sibuk-catatan {
color: var(--pplh-muted);
font-size: .85rem;
}
@keyframes appModalPutar {
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.app-modal__spinner {
animation-duration: 2s;
}
}
/* ---- Mode lihat pada modal baris data ---------------------------------
Rincian dibaca lebih dulu, berkasnya langsung dipratinjau di tempat, dan
form suntingnya baru menggantikan bagian ini saat tombol Edit ditekan. */
.modal-lihat__daftar {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: .85rem 1.25rem;
}
/* Isian yang teksnya bisa panjang (tautan, catatan) memakai lebar penuh. */
.modal-lihat__item.is-lebar {
grid-column: 1 / -1;
}
.modal-lihat__label {
display: block;
margin-bottom: .15rem;
color: var(--pplh-muted);
font-size: .75rem;
font-weight: 600;
letter-spacing: .02em;
text-transform: uppercase;
}
.modal-lihat__nilai {
display: block;
color: var(--pplh-text-strong);
font-size: .95rem;
font-weight: 600;
line-height: 1.45;
/* Tautan drive kerap panjang tanpa spasi, jadi dipatahkan di mana saja
supaya tidak melebarkan modalnya. */
overflow-wrap: anywhere;
white-space: pre-line;
}
.modal-lihat__nilai.is-kosong {
color: var(--pplh-muted);
font-weight: 500;
}
.modal-lihat__nilai a {
color: var(--pplh-primary);
text-decoration: underline;
}
html[data-theme='dark'] .modal-lihat__nilai a {
color: #2ec4a6;
}
.modal-lihat__berkas {
margin-top: 1.25rem;
padding-top: 1rem;
border-top: 1px solid var(--pplh-border);
}
.modal-lihat__berkas-judul {
margin-bottom: .5rem;
color: var(--pplh-muted);
font-size: .75rem;
font-weight: 600;
letter-spacing: .02em;
text-transform: uppercase;
}
.modal-lihat__pdf {
display: block;
width: 100%;
height: 26rem;
max-height: 55vh;
border: 1px solid var(--pplh-border);
border-radius: var(--pplh-radius-sm);
background: var(--pplh-surface-2);
}
.modal-lihat__kosong {
padding: 1rem;
border: 1px dashed var(--pplh-border);
border-radius: var(--pplh-radius-sm);
background: var(--pplh-surface-2);
color: var(--pplh-muted);
font-size: .9rem;
}
@media screen and (max-width: 768px) {
.modal-lihat__daftar {
grid-template-columns: minmax(0, 1fr);
}
.modal-lihat__pdf {
height: 18rem;
}
}
/* Select2 di dalam modal mengikuti tinggi & warna input Bulma. */
.app-modal .select2-container--default .select2-selection--single {
height: 2.5em;
border-color: var(--pplh-border);
border-radius: var(--pplh-radius-sm);
background-color: var(--pplh-surface);
}
.app-modal .select2-container--default .select2-selection--single .select2-selection__rendered {
line-height: 2.5em;
color: var(--pplh-text);
}
.app-modal .select2-container--default .select2-selection--single .select2-selection__arrow {
height: 2.5em;
}
/* Daftar baris yang bisa ditambah/dikurangi di dalam modal. */
.repeater__row {
display: grid;
grid-template-columns: minmax(8rem, 14rem) 1fr auto;
gap: .75rem;
align-items: end;
padding: .75rem;
border: 1px solid var(--pplh-border);
border-radius: var(--pplh-radius-sm);
background: var(--pplh-surface-2);
}
.repeater__row + .repeater__row {
margin-top: .6rem;
}
.repeater__row .field {
margin-bottom: 0;
}
.repeater__kosong {
padding: 1.25rem 1rem;
border: 1px dashed var(--pplh-border);
border-radius: var(--pplh-radius-sm);
color: var(--pplh-muted);
text-align: center;
}
@media screen and (max-width: 640px) {
.repeater__row {
grid-template-columns: 1fr;
align-items: stretch;
}
}
/* ---- Tabel pada tab halaman detail -------------------------------------- */
/* Bingkai mengikat kepala dan isi tabel jadi satu blok, supaya nilainya tidak
terbaca melayang lepas dari judul kolomnya. */
.tabel-bingkai {
border: 1px solid var(--pplh-border);
border-radius: var(--pplh-radius-sm);
background: var(--pplh-surface);
}
.tabel-data {
margin-bottom: 0;
/* separate + spacing 0: garis tetap tunggal, tapi sudut masih bisa dibulatkan. */
border-collapse: separate;
border-spacing: 0;
/* Di layar sempit tabel digulir mendatar, bukan diperas sampai tak terbaca. */
min-width: 40rem;
}
.tabel-data th,
.tabel-data td {
padding: .7rem .9rem;
border-bottom: 1px solid var(--pplh-border);
vertical-align: middle;
}
/* Garis antar kolom menjaga tiap nilai tetap sebaris dengan judulnya. */
.tabel-data th:not(:last-child),
.tabel-data td:not(:last-child) {
border-right: 1px solid var(--pplh-border);
}
.tabel-data thead th {
background: var(--pplh-surface-2);
color: var(--pplh-text-strong);
font-size: .74rem;
font-weight: 700;
letter-spacing: .05em;
text-transform: uppercase;
white-space: nowrap;
}
.tabel-data thead th:first-child {
border-top-left-radius: calc(var(--pplh-radius-sm) - 1px);
}
.tabel-data thead th:last-child {
border-top-right-radius: calc(var(--pplh-radius-sm) - 1px);
}
/* Baris terakhir tidak perlu garis; bingkainya sudah menutup. */
.tabel-data tbody tr:last-child > th,
.tabel-data tbody tr:last-child > td {
border-bottom-width: 0;
}
.tabel-data tbody tr:hover > td {
background: var(--pplh-surface-2);
}
/* Kolom uraian bisa panjang; biarkan melipat, jangan melebarkan tabel. */
.tabel-data tbody td {
overflow-wrap: break-word;
}
/* Kolom aksi cukup selebar tombolnya. */
.tabel-data tbody td:last-child .dropdown {
vertical-align: middle;
}
/* ---- Kisi periode pelaporan (tab Pelaporan & Ketaatan) ------------------ */
/* Selektor menyertakan :not([align]) supaya menang atas aturan bawaan Bulma. */
.tabel-periode th:not([align]),
.tabel-periode td:not([align]) {
text-align: center;
}
.tabel-periode th:first-child:not([align]),
.tabel-periode td:first-child:not([align]) {
text-align: left;
}
/* Sel periode memuat status, metode, dan tanggal, jadi diberi lebar minimum
supaya isinya tidak terpotong jadi satu kata per baris. Tabelnya sendiri
sudah bisa digulir mendatar lewat .table-container. */
.tabel-periode td:not(:first-child) {
min-width: 12rem;
padding: .3rem;
vertical-align: middle;
}
/* Kolom tahun jadi kepala barisnya: selebar isi dan diberi latar sendiri. */
.tabel-periode__tahun {
width: 1%;
background: var(--pplh-surface-2);
color: var(--pplh-text-strong);
font-size: 1rem;
font-weight: 700;
white-space: nowrap;
}
/* ---- Kolom "Status Pelaporan" pada daftar kegiatan --------------------- */
/* Merangkum jenis laporan, tahun terbarunya, dan bar progresnya dalam satu
sel. Lebar minimumnya dijaga supaya barnya tidak menyusut jadi seiris
garis di layar sempit; tabelnya sendiri sudah bisa digulir mendatar. */
/* Tanpa lebar minimum sama sekali: kolomnya sudah dapat jatah persen sendiri,
dan lantai lebar apa pun di sini justru membuat isinya meluber ke kolom
sebelah begitu jendelanya menyempit. Isi kolom yang menyesuaikan sel,
bukan sebaliknya. */
.status-lapor {
display: flex;
max-width: 100%;
min-width: 0;
flex-direction: column;
align-items: flex-start;
gap: .35rem;
}
/* max-width menahan baris ini pada lebar sel — tanpanya ia selebar isinya
(akibat align-items: flex-start di atas) dan flex-wrap tidak pernah kena.
Dengan batas itu, chip dan tahun berjajar selama muat lalu menumpuk jadi
daftar sendirinya saat kolomnya menyempit. */
.status-lapor__kepala {
display: flex;
max-width: 100%;
flex-wrap: wrap;
align-items: center;
gap: .25rem .4rem;
}
/* Chip jenis laporan dikecilkan sedikit: di dalam sel tabel ia label
sekunder, bukan judul. */
.status-lapor__jenis.chip {
padding: .12rem .5rem;
font-size: .72rem;
}
.status-lapor__tahun {
color: var(--pplh-text-strong);
font-size: .8rem;
font-weight: 700;
}
/* Kegiatan yang memang tidak punya kewajiban berkala — atau yang jenis
dokumennya belum dipilih — bukan "belum lapor", jadi tidak diberi bar
merah melainkan keterangan redup. */
.status-lapor__kosong {
color: var(--pplh-muted);
font-size: .76rem;
font-style: italic;
}
/* Bar progres mengisi lebar sel, berapa pun jatahnya. */
.status-lapor .tahun-progres {
width: 100%;
min-width: 0;
}
/* Di dalam sel tabel ruasnya ikut menyusut bersama kolomnya; lantai 6px
hanya berlaku di kisi periode halaman detail yang ruangnya lega. */
.status-lapor .tahun-progres__step {
min-width: 3px;
}
/* Kolom tahun memuat angka tahun, tombol hapusnya, dan bar langkah progres,
jadi isinya ditumpuk tegak dan diberi lebar minimum supaya barnya masih
terbaca meski angka tahunnya pendek. */
.tahun-sel {
display: flex;
min-width: 7rem;
flex-direction: column;
gap: .35rem;
padding: .15rem 0;
}
.tahun-sel__kepala {
display: flex;
align-items: center;
gap: .35rem;
}
.tahun-sel__angka {
line-height: 1.1;
}
/* Tombol hapus tahun sengaja redup dan baru menguat saat barisnya disentuh:
ia hanya muncul pada tahun yang memang kosong, jadi tidak perlu bersaing
dengan angka tahunnya. */
.tahun-sel__hapus {
display: inline-flex;
width: 1.4rem;
height: 1.4rem;
flex: none;
align-items: center;
justify-content: center;
border: 0;
border-radius: 50%;
background: transparent;
padding: 0;
color: var(--pplh-muted);
cursor: pointer;
font-size: .95rem;
line-height: 1;
opacity: .35;
transition: opacity .15s ease, background-color .15s ease, color .15s ease;
}
.tabel-periode tbody tr:hover .tahun-sel__hapus {
opacity: .8;
}
.tahun-sel__hapus:hover,
.tahun-sel__hapus:focus-visible {
background: var(--pplh-hapus-bg);
color: var(--pplh-hapus-teks);
opacity: 1;
outline: none;
}
/* Bar langkah progres pelaporan satu tahun; dipakai kisi periode di halaman
detail dan kolom "Status Pelaporan" di daftar kegiatan. Satu ruas per
periode: hijau berarti sudah dilaporkan, merah belum. Warnanya bukan
satu-satunya penanda — lihat kegiatan/partials/bar-progres.blade.php. */
.tahun-progres {
display: flex;
flex-direction: column;
gap: .22rem;
}
.tahun-progres__bar {
display: flex;
width: 100%;
height: 6px;
gap: 2px;
}
.tahun-progres__step {
min-width: 6px;
flex: 1 1 0;
border-radius: 999px;
background: var(--pplh-progres-belum);
}
.tahun-progres__step.is-sudah {
background: var(--pplh-progres-sudah);
}
.tahun-progres__label {
color: var(--pplh-muted);
font-size: .68rem;
font-weight: 500;
white-space: nowrap;
}
/* Kisi pelaporan dibaca menyilang (tahun x periode), jadi garisnya dibuat
lebih tegas daripada tabel biasa supaya batas tiap sel jelas terlihat. */
.tabel-bingkai.is-tegas {
border-color: var(--pplh-border-strong);
}
.tabel-periode th,
.tabel-periode td {
border-bottom-color: var(--pplh-border-strong);
}
.tabel-periode th:not(:last-child),
.tabel-periode td:not(:last-child) {
border-right-color: var(--pplh-border-strong);
}
/* Kepala tabel jadi batas atas kisi, jadi garis bawahnya dipertebal. */
.tabel-periode thead th {
border-bottom-width: 2px;
}
/* Kolom tahun memisahkan label baris dari kisinya. */
.tabel-periode tbody .tabel-periode__tahun {
border-right-width: 2px;
}
/* Sel periode: seluruh isinya satu tombol selebar sel, jadi yang diklik
bukan tombol kecil di tengah melainkan kotaknya sendiri.
Beda "sudah" dan "belum" sengaja dibuat asimetris, bukan sekadar beda
warna: sel yang sudah dilapor berisi lingkaran centang + status + rincian,
sel yang belum nyaris kosong dan hanya menyisakan tanda tambah yang redup.
Kepadatan isi inilah yang terbaca lebih dulu saat mata memindai kisi.
Selektornya menyertakan tr supaya menang atas latar :hover .tabel-data. */
.tabel-periode tbody tr > td.sel-lapor {
background: var(--pplh-lapor-bg);
}
.tabel-periode tbody tr:hover > td.sel-lapor {
background: var(--pplh-lapor-bg-hover);
}
.tabel-periode tbody tr > td.sel-belum {
background: var(--pplh-belum-bg);
}
.tabel-periode tbody tr:hover > td.sel-belum {
background: var(--pplh-belum-bg-hover);
}
/* ---- Sel yang sudah dilapor ---- */
.sel-lapor__isi {
display: flex;
align-items: center;
gap: .55rem;
width: 100%;
border: 0;
border-radius: var(--pplh-radius-sm);
background: transparent;
padding: .45rem .55rem;
color: inherit;
font-family: inherit;
text-align: left;
transition: background-color .15s ease;
}
button.sel-lapor__isi {
cursor: pointer;
}
button.sel-lapor__isi:hover,
button.sel-lapor__isi:focus-visible {
background: var(--pplh-lapor-bg-hover);
}
button.sel-lapor__isi:focus-visible {
outline: 2px solid var(--pplh-lapor-garis);
outline-offset: -2px;
}
/* Lingkaran centang: penanda paling cepat terbaca dalam satu kisi penuh.
Warnanya mengikuti warna status laporan (kelas .warna-* dari Master Data);
token --pplh-lapor-* hanya cadangan bila kelas itu tidak terpasang. */
.sel-lapor__ikon {
display: inline-flex;
flex: none;
align-items: center;
justify-content: center;
width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
background: var(--warna-pejal, var(--pplh-lapor-ikon-bg));
color: var(--warna-pejal-teks, var(--pplh-lapor-ikon-teks));
font-size: 1rem;
}
/* Berisi tapi berstatus "Belum": isiannya tetap bisa dibuka, namun tidak
boleh terbaca sebagai sudah dilapor, jadi lingkarannya kosong berbatas.
Garisnya tetap membawa warna status supaya sama dengan chip-nya. */
.sel-lapor__isi.is-belum .sel-lapor__ikon {
border: 1.5px dashed var(--warna-teks, var(--pplh-muted));
background: transparent;
color: var(--warna-teks, var(--pplh-muted));
}
.sel-lapor__teks {
display: flex;
min-width: 0;
flex-direction: column;
gap: .05rem;
}
.sel-lapor__status {
color: var(--pplh-text-strong);
font-size: .8rem;
font-weight: 600;
line-height: 1.3;
}
.sel-lapor__isi[class*='warna-'] .sel-lapor__status {
color: var(--warna-teks);
}
/* Metode dan tanggal jadi satu baris keterangan; kalau selnya sempit
barisnya boleh melipat, bukan memaksa tabel jadi lebih lebar. */
.sel-lapor__meta {
color: var(--pplh-muted);
font-size: .72rem;
line-height: 1.35;
}
/* Panah menandai bahwa selnya bisa dibuka, tanpa menambah tombol sendiri. */
.sel-lapor__panah {
flex: none;
margin-left: auto;
color: var(--pplh-muted);
font-size: 1.1rem;
opacity: .45;
}
button.sel-lapor__isi:hover .sel-lapor__panah {
opacity: .9;
}
/* ---- Sel yang belum dilapor ---- */
/* Periode yang tidak pernah dilapor pada kartu riwayat. Bukan ajakan mengisi,
melainkan pernyataan bahwa periode itu memang lewat tanpa laporan. */
.sel-belum__lewat {
display: flex;
align-items: center;
justify-content: center;
min-height: 2.9rem;
color: var(--pplh-muted);
cursor: default;
}
/* Sengaja hampir kosong: ruang lompong ini yang membedakannya dari sel
terisi. Tanda tambahnya baru menguat saat disentuh kursor. */
.sel-belum__isi {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 2.9rem;
border: 1px dashed transparent;
border-radius: var(--pplh-radius-sm);
background: transparent;
padding: .35rem;
color: var(--pplh-muted);
cursor: pointer;
font-size: 1.15rem;
line-height: 1;
opacity: .35;
transition: opacity .15s ease, border-color .15s ease, color .15s ease;
}
.sel-belum__isi:hover,
.sel-belum__isi:focus-visible {
border-color: var(--pplh-primary);
color: var(--pplh-primary);
opacity: 1;
outline: none;
}
/* ---- Isian tanggal ------------------------------------------------------ */
/* Tombol kalender bawaan peramban kecil, terpaku di ujung kanan, dan
warnanya tidak bisa diatur — di mode gelap ia nyaris tak terlihat sehingga
user menerka-nerka di mana harus menekan. Tombol itu disembunyikan dan
diganti tombol sendiri yang memanggil showPicker(); bagian tanggal/bulan/
tahun tetap bisa diklik dan diketik manual seperti biasa. */
.tanggal-isian {
position: relative;
}
.tanggal-isian__input.input {
-webkit-appearance: none;
appearance: none;
/* Sisakan ruang untuk tombol kalender di dalam kotaknya. */
padding-right: 2.75rem;
min-height: 2.5em;
font-family: inherit;
}
.tanggal-isian__input::-webkit-datetime-edit {
padding: 0;
color: var(--pplh-text);
}
.tanggal-isian__input::-webkit-calendar-picker-indicator,
.tanggal-isian__input::-webkit-inner-spin-button,
.tanggal-isian__input::-webkit-clear-button {
display: none;
-webkit-appearance: none;
}
.tanggal-isian__tombol {
position: absolute;
top: 50%;
right: .3rem;
z-index: 1;
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border: 0;
border-radius: 8px;
background: transparent;
color: var(--pplh-muted);
cursor: pointer;
font-size: 1.15rem;
transform: translateY(-50%);
transition: background-color .15s ease, color .15s ease;
}
.tanggal-isian__tombol:hover {
background: var(--pplh-surface-2);
color: var(--pplh-primary);
}
/* Saat isiannya sedang aktif, tombolnya ikut menyala supaya terbaca sebagai
satu kesatuan dengan kotak yang sedang difokus. */
.tanggal-isian__input:focus ~ .tanggal-isian__tombol {
color: var(--pplh-primary);
}
/* ---- Isian unggah berkas ------------------------------------------------ */
/* Tampilan bawaan
berbeda-beda tiap peramban dan tidak
bisa diwarnai, jadi input aslinya disembunyikan (bukan display:none, supaya
tetap bisa difokuskan papan ketik) dan digantikan tombol + nama berkas. */
.berkas-isian {
position: relative;
display: flex;
align-items: center;
gap: .6rem;
width: 100%;
border: 1px solid var(--pplh-border);
border-radius: var(--pplh-radius-sm);
background: var(--pplh-surface);
padding: .4rem .5rem;
}
.berkas-isian__asli {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.berkas-isian__tombol {
display: inline-flex;
flex: none;
align-items: center;
gap: .3rem;
border: 1px solid var(--pplh-border);
border-radius: 999px;
background: var(--pplh-surface-2);
padding: .3rem .8rem;
color: var(--pplh-text-strong);
cursor: pointer;
font-size: .8rem;
font-weight: 600;
transition: border-color .15s ease, color .15s ease;
}
.berkas-isian__tombol:hover {
border-color: var(--pplh-primary);
color: var(--pplh-primary);
}
/* Fokus papan ketik jatuh pada input tersembunyi, jadi cincin fokusnya
dipinjamkan ke tombol penggantinya. */
.berkas-isian__asli:focus-visible + .berkas-isian__tombol {
border-color: var(--pplh-primary);
box-shadow: 0 0 0 .125em rgba(0, 113, 92, .2);
color: var(--pplh-primary);
}
/* Nama berkas bisa panjang; dipotong dengan elipsis, jangan melebarkan modal. */
.berkas-isian__nama {
overflow: hidden;
min-width: 0;
flex: 1;
color: var(--pplh-muted);
font-size: .82rem;
text-overflow: ellipsis;
white-space: nowrap;
}
.berkas-isian.is-terisi .berkas-isian__nama {
color: var(--pplh-text-strong);
font-weight: 600;
}
.berkas-isian__batal {
display: inline-flex;
flex: none;
align-items: center;
justify-content: center;
width: 1.6rem;
height: 1.6rem;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--pplh-muted);
cursor: pointer;
font-size: 1.1rem;
}
.berkas-isian__batal:hover {
background: var(--pplh-surface-2);
color: var(--bulma-danger, #e5484d);
}
/* ---- Penanda galat validasi per field ----------------------------------- */
/* Pesan galat ditempelkan di bawah fieldnya (bukan sebagai daftar di atas
form), jadi kotak isiannya ikut ditandai. Bulma sudah mengurus .input dan
.textarea lewat .is-danger; select2 memakai elemennya sendiri, jadi
diwarnai dari sini lewat penanda .has-galat pada .field. */
.field.has-galat .select2-container--default .select2-selection--single {
border-color: var(--bulma-danger, #e5484d);
}
.field.has-galat .select2-container--default.select2-container--focus .select2-selection--single,
.field.has-galat .select2-container--default.select2-container--open .select2-selection--single {
border-color: var(--bulma-danger, #e5484d);
box-shadow: 0 0 0 .125em rgba(229, 72, 77, .18);
}
.field.has-galat .select2-container--default .select2-selection--multiple {
border-color: var(--bulma-danger, #e5484d);
}
/* Isian unggah berkas juga punya kotak sendiri, bukan .input bawaan Bulma. */
.field.has-galat .berkas-isian {
border-color: var(--bulma-danger, #e5484d);
}
/* Keterangan bawaan field diredupkan supaya pesan galat yang menonjol. */
.field.has-galat .help:not(.is-danger) {
opacity: .6;
}
/* ---- Riwayat pelaporan dokumen yang sudah digantikan -------------------- */
/* Pemisah antara kartu pelaporan yang aktif dan kartu-kartu riwayatnya.
Sengaja bukan kartu: ia label bagian, bukan wadah data. */
.pemisah-riwayat {
margin: 2rem 0 1rem;
padding-left: .25rem;
border-left: 3px solid var(--pplh-border);
}
.pemisah-riwayat__judul {
margin: 0 0 .15rem .5rem;
font-size: .95rem;
font-weight: 600;
color: var(--pplh-text-strong);
}
.pemisah-riwayat__catatan {
margin-left: .5rem;
font-size: .8rem;
color: var(--pplh-muted);
}
/* Kartu riwayat diredupkan supaya kartu yang aktif tetap yang pertama dibaca,
tapi tidak sampai kabur — isinya laporan yang benar-benar pernah dikirim.
Warnanya memakai variabel permukaan, jadi mode gelap ikut menyesuaikan. */
.kartu-riwayat {
background: var(--pplh-surface-2);
box-shadow: none;
border: 1px dashed var(--pplh-border);
}
.kartu-riwayat .section-title {
color: var(--pplh-muted);
}
/* ---- Baris turunan pada tabel riwayat ---------------------------------- */
/* Addendum dan baris keterangan menempel pada dokumen di atasnya, bukan data
yang sejajar dengannya, jadi dasarnya diredupkan dan garis pemisahnya dibuat
putus-putus supaya terbaca sebagai satu kesatuan dengan induknya. Warnanya
memakai variabel permukaan, jadi mode gelap ikut menyesuaikan sendiri. */
.tabel-data tr.baris-anak > td {
background: var(--pplh-surface-2);
border-top-style: dashed;
}
/* Rincian kewajiban SK sanksi di bawah baris sanksinya. Tiap kewajiban
bisa panjang, jadi uraiannya dibiarkan membungkus dan tombolnya tetap
di ujung kanan; di layar sempit tombolnya turun ke bawah uraian. */
.kewajiban-sanksi {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: .6rem;
white-space: normal;
}
.kewajiban-sanksi__judul {
font-size: .85rem;
font-weight: 600;
color: var(--pplh-text-strong);
}
.kewajiban-sanksi__kosong {
font-size: .85rem;
color: var(--pplh-muted);
}
.kewajiban-sanksi__daftar {
width: 100%;
margin: 0;
padding-left: 1.5rem;
}
.kewajiban-sanksi__butir {
padding: .5rem 0;
border-top: 1px dashed var(--pplh-border);
}
/* Flex dipasang di pembungkus, bukan di
: butir berflex kehilangan
nomor urut -nya. */
.kewajiban-sanksi__baris {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
gap: .5rem 1rem;
}
.kewajiban-sanksi__butir:first-child {
border-top: 0;
padding-top: 0;
}
.kewajiban-sanksi__butir::marker {
color: var(--pplh-muted);
}
.kewajiban-sanksi__isi {
flex: 1 1 18rem;
min-width: 0;
}
.kewajiban-sanksi__uraian {
color: var(--pplh-text);
overflow-wrap: anywhere;
}
.kewajiban-sanksi__meta {
display: flex;
flex-wrap: wrap;
gap: .35rem;
margin-top: .35rem;
}
/* ---- Dropdown aksi pada baris tabel ------------------------------------ */
/* Kolomnya cuma memuat satu tombol, jadi selebar isinya saja dan ditaruh di
tengah — judul kolom ikut rata tengah supaya sejajar dengan tombolnya. */
.tabel-data th.kolom-aksi,
.tabel-data td.kolom-aksi {
width: 1%;
text-align: center;
white-space: nowrap;
}
/* Tombol pembuka menu aksi.
Sebelumnya berupa pil kecil berisi titik tiga mendatar yang mudah terbaca
sebagai hiasan. Sekarang bujur sangkar bergaris tegas dengan titik tiga
tegak — bentuk baku "aksi baris" — dan status terbukanya ikut ditandai
supaya jelas baris mana yang sedang dibuka menunya. */
.btn-aksi-menu {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border: 1px solid var(--pplh-border);
border-radius: 8px;
background: var(--pplh-surface);
color: var(--pplh-muted);
cursor: pointer;
font-size: 1.25rem;
line-height: 1;
transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.btn-aksi-menu:hover {
border-color: var(--pplh-primary);
background: var(--pplh-surface-2);
color: var(--pplh-primary);
}
.btn-aksi-menu:focus-visible {
outline: none;
border-color: var(--pplh-primary);
box-shadow: 0 0 0 .125em rgba(0, 113, 92, .2);
color: var(--pplh-primary);
}
/* Menu sedang terbuka: tombolnya tetap menyala sebagai jangkar menunya. */
.dropdown.is-active > .dropdown-trigger > .btn-aksi-menu {
border-color: var(--pplh-primary);
background: var(--pplh-surface-2);
color: var(--pplh-primary);
}
/* Varian bergaris hijau: dipakai di tabel pengguna dan tabel riwayat detail
kegiatan supaya tombol aksinya terbaca sebagai tombol, bukan ikon abu-abu
yang mudah terlewat. */
.btn-aksi-menu.is-hijau {
border-color: var(--pplh-primary);
background: transparent;
color: var(--pplh-primary);
}
.btn-aksi-menu.is-hijau:hover,
.dropdown.is-active > .dropdown-trigger > .btn-aksi-menu.is-hijau {
background: var(--pplh-primary);
color: #fff;
}
/* Pembungkusnya memotong apa pun yang keluar dari kotaknya — tabel riwayat
bisa digulir mendatar, isi akordeon disembunyikan saat menutup — jadi saat
dibuka menu ini dipinjamkan ke oleh skrip lalu dipaku ke layar. */
.aksi-menu {
position: fixed;
left: auto;
min-width: 10rem;
padding-top: 0;
z-index: 45;
}
/* Sedang dipinjam ke : tidak lagi kena aturan .dropdown.is-active. */
.aksi-menu.is-lepas {
display: block;
}
.aksi-menu .dropdown-content {
border: 1px solid var(--pplh-border);
border-radius: var(--pplh-radius-sm);
background: var(--pplh-surface);
box-shadow: var(--pplh-shadow, 0 10px 30px rgba(0, 0, 0, .18));
}
/* Item menu berupa