, `white-space: normal`-nya (0,1,0) kalah dari aturan Volt
`.table td, .table th { white-space: nowrap }` (0,1,1): sel tetap tidak boleh
turun baris, isinya melewati batas max-width, dan teksnya menumpuk ke kolom
sebelahnya. Varian ber-`.table td` ini (0,2,1) yang membuatnya berlaku. */
.table td.kolom-judul,
.table td.kolom-skema,
.table td.kolom-orang,
.table td.kolom-mitra {
white-space: normal;
overflow-wrap: anywhere;
}
/* Tabel Tel-U Point: tujuh sampai delapan kolom yang isinya teks semua.
Judul kolom seperti "Kelengkapan Laporan Akhir/Kemajuan" tetap nowrap dari
Volt dan memakan 328px, sehingga kolom Nama dan Kegiatan tersisa selebar
min-width-nya saja dan isinya pecah jadi lima baris. Judul kolom dibolehkan
turun baris, lalu kolom teksnya diberi ruang minimum yang lebih masuk akal. */
.table.tabel-tup th { white-space: normal; }
.table.tabel-tup th.sel-nomor { white-space: nowrap; }
.table.tabel-tup td.kolom-orang { min-width: 11rem; }
.table.tabel-tup td.kolom-judul { min-width: 15rem; }
.table.tabel-tup td.kolom-mitra { min-width: 10rem; }
.table.tabel-tup td.kolom-skema { min-width: 9rem; }
/* Nama & NIP kini bertumpuk dua baris, jadi tak perlu selebar dulu. */
.kolom-orang { min-width: 8rem; max-width: 12rem; }
@media (max-width: 575.98px) {
.kolom-judul { min-width: 11rem; }
.kolom-skema { min-width: 6rem; }
.kolom-orang { min-width: 8rem; }
}
.sipema-tanpa-data { color: var(--sp-muted); font-style: italic; }
/* =====================================================================
Formulir panjang — ukuran & irama field
Volt memakai label seukuran teks isian, jadi pada form dengan puluhan
field label dan nilai jadi sulit dibedakan sekilas. Label dibuat lebih
kecil dan agak tebal supaya hierarkinya jelas tanpa perlu huruf kapital.
===================================================================== */
.form-label {
font-size: .82rem;
font-weight: 600;
color: var(--sp-text-soft);
margin-bottom: .35rem;
}
/* Tinggi kontrol seragam supaya select dan input sebaris rata */
.form-control,
.form-select {
min-height: 2.75rem;
padding: .55rem .9rem;
font-size: .9rem;
}
textarea.form-control { min-height: 0; line-height: 1.6; }
.form-check-label { font-weight: 500; color: var(--sp-text); }
/* Field wajib diberi penanda agar terlihat sebelum submit ditolak */
.form-label:has(+ * [required]),
.form-label:has(+ [required]) { position: relative; }
.form-label:has(+ [required])::after,
.form-label:has(+ .input-group [required])::after {
content: "*";
color: var(--sp-danger);
margin-left: .2rem;
font-weight: 700;
}
/* Tombol "tambah baris" pada daftar anggota tim / mahasiswa.
Sebelumnya hanya ikon telanjang tanpa nama, mudah terlewat. */
.btn-tambah-baris {
color: var(--sp-blue-600);
border-radius: var(--sp-radius-sm);
padding: .3rem .35rem;
line-height: 1;
transition: background-color .18s ease, color .18s ease;
}
.btn-tambah-baris:hover {
background-color: var(--sp-blue-50);
color: var(--sp-blue-700);
}
.btn-tambah-baris svg { margin-right: 0 !important; }
/* Di ponsel ikon 31x30px terlalu kecil untuk disentuh; naikkan ke 44px,
ukuran target sentuh yang sama dengan .btn-ikon di halaman detail. */
@media (max-width: 767.98px) {
.btn-tambah-baris {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.75rem;
min-height: 2.75rem;
}
}
/* Daftar isian bertumpuk (anggota tim, mahasiswa): rapatkan jaraknya
supaya terbaca sebagai satu kelompok, bukan field-field terpisah. */
.form-control.no-border + datalist + .btn-tambah-baris { margin-left: .25rem; }
/* Jarak antar isian anggota. Dulu ditulis inline sebagai
`style="margin-bottom: 10px"` di 23 tempat, bercampur dengan nilai
`display` yang dipakai JS untuk memunculkan baris berikutnya —
marginnya dipisah ke sini supaya yang inline tinggal `display` saja. */
.field-anggota { margin-bottom: .625rem; }
/* Ketua tim terisi otomatis dan dikunci. Tanpa ini Bootstrap memberi latar
abu-abu yang membuatnya terbaca seperti field rusak, bukan field terkunci. */
.field-terkunci:disabled,
.field-terkunci[readonly] {
background-color: #fff;
color: var(--sp-text);
opacity: 1;
}
@media (max-width: 575.98px) {
.form-control, .form-select { min-height: 2.9rem; font-size: .95rem; }
}
/* =====================================================================
Isi sel tabel bertingkat — nilai utama + keterangan kecil di bawahnya
===================================================================== */
.sel-utama {
display: block;
font-weight: 600;
color: var(--sp-navy-900);
font-size: .875rem;
line-height: 1.35;
}
.sel-sub {
display: block;
font-size: .74rem;
color: var(--sp-muted);
font-weight: 400;
margin-top: .1rem;
}
.sel-nomor {
width: 2.5rem;
padding-left: .6rem !important;
padding-right: .6rem !important;
color: var(--sp-muted);
font-variant-numeric: tabular-nums;
text-align: center;
}
.sel-periode { white-space: nowrap; }
.sel-aksi { width: 1%; white-space: nowrap; }
/* Skema sebagai pil lembut, bukan blok teks selebar kolom */
.badge-skema {
display: inline-block;
background: var(--sp-blue-50);
border: 1px solid var(--sp-blue-100);
color: var(--sp-navy-800);
border-radius: 999px;
padding: .25rem .7rem;
font-size: .74rem;
font-weight: 600;
line-height: 1.4;
white-space: normal;
max-width: 10rem;
line-height: 1.35;
}
/* Nama skema seperti "Non-Hibah Mandiri" punya tanda hubung yang jadi titik
putus, sehingga min-content kolomnya kecil dan pil-nya pecah sampai tiga
baris meski tabel masih punya ruang. Lebar kolom diberi petunjuk persen:
`min-width` pada pil-nya tidak dipakai karena itu menaikkan min-content
tabel sampai meluber keluar kartu. */
#datatable th.sel-skema { width: 15%; }
/* =====================================================================
Badge "halus" — latar tipis + teks pekat.
Di dalam baris yang sudah berwarna status, pil warna penuh terasa ramai;
versi ini tetap jelas terbaca tanpa saling berebut perhatian.
===================================================================== */
.badge-halus {
display: inline-block;
border: 1px solid transparent;
border-radius: 999px;
padding: .18rem .6rem;
font-size: .72rem;
font-weight: 600;
line-height: 1.5;
white-space: nowrap;
}
.badge-halus-success { background: #E4F5EC; border-color: #B7E3CC; color: #0A6C3D; }
.badge-halus-warning { background: #FCF2DF; border-color: #F1DCB5; color: #855312; }
.badge-halus-danger { background: #FBE9EC; border-color: #F3C9D0; color: #96182A; }
.badge-halus-info { background: var(--sp-blue-50); border-color: var(--sp-blue-100); color: var(--sp-blue-700); }
/* --- Daftar status di dalam sel --- */
.daftar-status {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: .3rem;
}
.daftar-status li {
display: flex;
align-items: center;
justify-content: space-between;
gap: .6rem;
}
.daftar-status .status-nama {
font-size: .72rem;
color: var(--sp-text-soft);
white-space: nowrap;
}
/* --- Tombol aksi di baris tabel --- */
.btn-detail {
display: inline-flex;
align-items: center;
gap: .35rem;
padding: .32rem .7rem;
font-size: .78rem;
font-weight: 600;
white-space: nowrap;
}
.btn-detail svg { width: .95rem; height: .95rem; flex: 0 0 auto; }
/* Di layar sempit teksnya disembunyikan; ikonnya tetap jadi sasaran sentuh
yang cukup besar. */
@media (max-width: 767.98px) {
/* Teks disembunyikan (tetap terbaca pembaca layar), tapi ukuran tombolnya
dijaga >= 2.75rem supaya masih nyaman disentuh. */
.btn-detail span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.btn-detail {
padding: 0;
width: 2.75rem;
height: 2.75rem;
justify-content: center;
}
.btn-detail svg { width: 1.15rem; height: 1.15rem; }
.daftar-status li { justify-content: flex-start; }
}
/* =====================================================================
Tabel detail (label | nilai | aksi) — halaman data kegiatan
Tabel ini bukan daftar data, melainkan rincian satu kegiatan. Jadi
ditampilkan seperti daftar rincian: label redup, nilai menonjol, dan
kolom aksi merapat ke kanan.
===================================================================== */
.tabel-detail { margin-bottom: 0; }
.tabel-detail > tbody > tr > td {
border-bottom: 1px solid #F0F5FB;
vertical-align: top;
padding: .8rem .9rem;
/* Volt memasang `white-space: nowrap` pada semua sel tabel. Pada tabel
rincian seperti ini akibatnya setiap kolom selebar teks terpanjangnya
dan tabel meluber keluar kartu. Rincian justru harus boleh turun baris. */
white-space: normal;
}
.tabel-detail > tbody > tr:last-child > td { border-bottom: 0; }
/* Kolom pertama = label */
.tabel-detail > tbody > tr > td:first-child {
color: var(--sp-text-soft);
font-weight: 500;
width: 12rem;
min-width: 8rem;
/* Sebagian label panjang (mis. "Artikel Media Massa & Video Kegiatan")
memaksa kolom melebar jauh di atas 12rem karena `width` pada tabel
hanya bersifat anjuran; izinkan pemenggalan agar tetap terkendali. */
overflow-wrap: anywhere;
}
/* Tabel komponen verifikasi ikut memakai `.tabel-detail` demi padding dan
pembungkusan barisnya, padahal kolom pertamanya nomor urut, bukan label.
Lebar label 12rem membuat kolom "#" melar sampai 192px, sementara
`.sel-nomor` polos (0,1,0) kalah dari aturan di atas (0,3,1). */
.tabel-detail > tbody > tr > td:first-child.sel-nomor {
width: 2.5rem;
min-width: 0;
font-weight: 400;
color: var(--sp-muted);
}
/* Kolom aksi = sel ke-3 yang sekaligus sel terakhir. Memakai :last-child saja
akan salah sasaran: baris yang nilainya memakai colspan="2" juga berakhir
sebagai sel terakhir dan teksnya jadi ikut terdorong ke kanan. */
.tabel-detail > tbody > tr > td:nth-child(3):last-child {
width: 1%;
text-align: right;
}
/* Isi kolom aksi (ikon + badge status) dibiarkan turun baris bila sempit;
dipaksa nowrap membuat badge panjang seperti "BELUM UNGGAH" melebarkan
tabel sampai terpotong. */
.tabel-detail > tbody > tr > td:nth-child(3):last-child > * { vertical-align: middle; }
.sel-label { color: var(--sp-text-soft); font-weight: 500; }
/* Tabel Proses Evaluasi: labelnya panjang ("Rencana Anggaran Biaya",
"Anggaran yang Disetujui") dan pada 12rem hampir semuanya pecah dua baris,
jadi kolom pertamanya diberi ruang lebih. */
.tabel-evaluasi > tbody > tr > td:first-child { width: 16rem; }
/* Ikon aksi dirapatkan ke kanan mengikuti kolomnya */
.tabel-detail > tbody > tr > td:nth-child(3):last-child .d-flex {
justify-content: flex-end;
gap: .15rem;
}
/* Sebagian ikon aksi berupa dengan pembungkus di dalamnya;
netralkan supaya ukurannya sama dengan tombol. */
.btn-ikon > span { display: inline-flex !important; align-items: center; }
.btn-ikon:hover { text-decoration: none; }
.tabel-detail .sel-nilai,
/* Satu sel bisa memuat beberapa .sel-nilai berturut-turut (daftar anggota
dosen/mahasiswa). Tanpa jarak, nama orang kedua menempel pada NIP orang
pertama dan daftarnya terbaca sebagai satu blok. */
.tabel-detail .sel-nilai + .sel-nilai { margin-top: .5rem; }
.sel-nilai {
white-space: normal;
/* break-word, bukan anywhere: `anywhere` memenggal kata di tengah
("Marketplac / e") begitu kolomnya menyempit. */
overflow-wrap: break-word;
max-width: 34rem;
color: var(--sp-text);
}
/* Baris judul bagian di dalam tabel detail.
Selektornya harus selengkap ini: `.baris-bagian` sendiri (0,1,0) kalah dari
`.table > :not(caption) > * > *` milik Bootstrap yang menyetel
background-color, dari `.table td` milik Volt yang menyetel font-size, dan
dari aturan kolom label di atas yang menyetel font-weight. */
.tabel-detail > tbody > tr > td.baris-bagian {
background-color: var(--sp-blue-50);
color: var(--sp-blue-700);
font-size: .76rem;
font-weight: 700;
letter-spacing: .09em;
text-transform: uppercase;
border-bottom: 1px solid var(--sp-blue-100);
/* jangan ikut aturan kolom label / kolom aksi */
width: auto;
text-align: left;
white-space: normal;
}
/* Judul bagian yang punya tombol aksi (mis. "Identitas Tim Pengusul") memakai
dua sel: teks colspan=2 + sel tombol. Keduanya diberi .baris-bagian supaya
latar pitanya menyambung, dan sel tombolnya dirapatkan ke kanan. */
.tabel-detail > tbody > tr > td.baris-bagian:last-child:not(:first-child) {
width: 1%;
text-align: right;
}
.baris-bagian .btn-ikon:hover { background-color: #fff; }
/* =====================================================================
Tombol ikon dalam tabel (ubah / simpan / batal)
Sebelumnya hanya SVG telanjang tanpa nama maupun umpan balik.
===================================================================== */
.btn-ikon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
padding: 0;
/* Tanpa ini tombol ikon yang tidak memakai .coffeeButton tetap membawa
bingkai dan latar bawaan browser. */
border: 0;
background-color: transparent;
cursor: pointer;
border-radius: var(--sp-radius-sm);
color: var(--sp-blue-600);
transition: background-color .18s ease, color .18s ease;
}
.btn-ikon:hover { background-color: var(--sp-blue-50); color: var(--sp-blue-700); }
.btn-ikon svg { width: 1rem; height: 1rem; margin: 0 !important; }
/* Tombol batal/hapus diberi warna berbeda supaya tidak tertukar */
.btn-ikon[aria-label="Batal"], .btn-ikon[aria-label="Hapus"] { color: var(--sp-danger); }
.btn-ikon[aria-label="Batal"]:hover, .btn-ikon[aria-label="Hapus"]:hover { background-color: #FBE9EC; color: #96182A; }
@media (max-width: 767.98px) {
.btn-ikon { width: 2.5rem; height: 2.5rem; }
/* Tiga kolom tidak muat di ponsel; tumpuk jadi label -> nilai -> aksi.
Hanya
dan
yang diubah jadi block, sementara jQuery pada
halaman ini hanya menyetel `display` pada
tertentu untuk
membuka/menutup form edit — perilaku itu tetap berjalan. */
.tabel-detail > tbody > tr {
display: block;
border-bottom: 1px solid var(--sp-border);
padding: .35rem 0;
}
.tabel-detail > tbody > tr > td {
display: block;
width: auto;
border-bottom: 0;
padding: .2rem .75rem;
white-space: normal;
}
.tabel-detail > tbody > tr > td:first-child {
width: auto;
min-width: 0;
font-size: .72rem;
font-weight: 600;
letter-spacing: .05em;
text-transform: uppercase;
color: var(--sp-muted);
}
.tabel-detail > tbody > tr > td:nth-child(3):last-child {
width: auto;
text-align: left;
padding-top: .45rem;
}
.tabel-detail > tbody > tr > td.baris-bagian { padding: .55rem .75rem; }
/* Judul bagian yang punya tombol aksi: karena sel-selnya ditumpuk, pitanya
akan terbelah dua (judul, lalu kotak biru berisi tombol saja). Baris pita
dikembalikan jadi satu baris. Browser tanpa dukungan :has() tetap
mendapat tata letak lama yang masih terbaca, hanya kurang rapi. */
.tabel-detail > tbody > tr:has(> td.baris-bagian) {
display: flex;
/* stretch, bukan center: kalau tinggi kedua sel berbeda, latar pitanya
bertingkat dan menyisakan notch di salah satu sisi. */
align-items: stretch;
justify-content: space-between;
padding: 0;
border-bottom: 0;
}
.tabel-detail > tbody > tr:has(> td.baris-bagian) > td.baris-bagian {
display: flex;
align-items: center;
}
.tabel-detail > tbody > tr:has(> td.baris-bagian) > td.baris-bagian:first-child { flex: 1 1 auto; }
.tabel-detail > tbody > tr > td.baris-bagian:last-child:not(:first-child) {
flex: 0 0 auto;
/* width:1% dari aturan desktop harus dibatalkan: sebagai flex item,
basis 1% membuat sel menyusut sampai tombolnya meluber. */
width: auto;
justify-content: flex-end;
text-align: right;
}
.tabel-detail .sel-nilai { max-width: 100%; }
}
/* =====================================================================
Jaring pengaman lebar kontrol
Banyak field lama dipatok `style="width: NNrem"` inline. max-width tidak
bisa dikalahkan oleh width inline, jadi satu aturan ini membuat semuanya
ikut menyusut di layar sempit tanpa perlu menyentuh puluhan atribut.
===================================================================== */
.form-control,
.form-select,
textarea.form-control { max-width: 100%; }
/* =====================================================================
Daftar tautan luaran di dalam sel tabel
Volt memasang `.p, ol li, p, ul li { font-size: 1rem }`, jadi ukuran yang
diset pada
selalu ditimpa dan tiap
kembali 16px - lebih besar dari
teks tabel di sekitarnya (14px). Karena itu ukurannya harus dinyatakan pada
-nya sendiri, bukan cukup di induknya.
===================================================================== */
.daftar-tautan {
list-style: none;
margin: .45rem 0 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: .3rem;
}
.daftar-tautan li { font-size: .8rem; line-height: 1.3; }
/* Tautan tampil sebagai pil dengan ikon jenis di depan dan penanda
"membuka tab baru" di belakang - lebih mudah dikenali daripada teks
bergaris bawah, dan tidak lagi menyerupai judul karena ukurannya. */
.pil-tautan {
display: inline-flex;
align-items: center;
gap: .35rem;
padding: .25rem .6rem;
border: 1px solid var(--sp-blue-100);
border-radius: 999px;
background: var(--sp-blue-50);
color: var(--sp-blue-700);
font-size: .78rem;
font-weight: 600;
text-decoration: none;
white-space: nowrap;
transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.pil-tautan:hover,
.pil-tautan:focus {
background: var(--sp-blue-600);
border-color: var(--sp-blue-600);
color: #fff;
text-decoration: none;
}
.pil-tautan .ikon-jenis { width: .95rem; height: .95rem; flex: 0 0 auto; }
.pil-tautan .ikon-keluar {
width: .7rem; height: .7rem;
flex: 0 0 auto;
opacity: .6;
}
.pil-tautan:hover .ikon-keluar { opacity: 1; }
/* Aturan `ul li` milik Volt juga menimpa ukuran pada dua daftar lain ini. */
.sipema-legenda li { font-size: .78rem; }
.daftar-status li { font-size: .78rem; }
/* =====================================================================
Sel status: badge + tombol ikon dalam satu kolom
Bagian Proses Evaluasi kini dua kolom saja (label | status+aksi), sama
seperti baris-baris lain di tabel yang sama yang sejak awal memakai
colspan="2".
===================================================================== */
.sel-status {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: .4rem .55rem;
}
/* Rangkaian ikon di dalamnya tetap rapat sebagai satu kelompok */
.sel-status .d-flex { gap: .15rem; }
@media (max-width: 767.98px) {
.sel-status { gap: .35rem .45rem; }
}
/* =====================================================================
Baris field berbasis flex (halaman pengajuan Desa Binaan)
Halaman itu menata field dengan `d-flex` tanpa flex-wrap dan jarak antar
field memakai `margin-right` inline, sementara lebar field dipatok 27rem.
Akibatnya di layar sempit field-nya keluar dari kartu. Dibuat boleh turun
baris dan jaraknya diserahkan ke gap.
===================================================================== */
.sipema-baris-field {
flex-wrap: wrap;
gap: 0 1rem;
width: 100%;
}
.sipema-baris-field > * { min-width: 0; }
/* Lebar field diseragamkan lewat basis flex, bukan lewat `style="width: NNrem"`
per field (halaman ini punya 34 di antaranya dengan 6 nilai berbeda, sehingga
tiap barisnya tampak tidak rata).
Basis 13rem dipilih supaya baris berisi tiga field (Provinsi/Kota/Kecamatan)
tetap muat sebaris — dengan basis lebih besar field ketiga terlempar ke baris
berikutnya dan susunannya jadi 2+1. Field boleh melebar mengisi sisa baris,
tapi dibatasi 30rem agar satu field sendirian tidak selebar kartu. */
.sipema-baris-field > .mb-4,
.sipema-baris-field > div {
flex: 1 1 13rem;
}
/* Batasnya dikenakan pada select-nya, bukan pada pembungkusnya.
Memakai `max-width` di pembungkus membuat field teks yang sendirian di satu
baris berhenti di 30rem sehingga tampak menggantung lebih pendek daripada
field lain di halaman yang sama (yang lebar penuh). Sementara `:only-child`
tidak bisa dipakai karena baris Lokasi Mitra Sasaran berisi beberapa div
tersembunyi sebagai saudara. Dropdown tetap dibatasi karena select selebar
kartu terasa terlalu berat. */
.sipema-baris-field select.form-select { max-width: 30rem; }
@media (max-width: 575.98px) {
.sipema-baris-field { gap: 0 .75rem; }
/* field selebar 27rem tidak muat; biarkan mengisi lebar yang ada */
.sipema-baris-field > .mb-4 { flex: 1 1 100%; }
}
/* =====================================================================
Pemilih proposal (Desa Binaan)
Sebelumnya berupa