:root {
--tms-primary: #2A7F6F;
--tms-primary-dark: #1F5F52;
--tms-primary-light: #E6F3F1;
--tms-sidebar: #1E2A2A;
--tms-bg-page: #F5F4F1;
--tms-text: #2D3A3A;
--tms-text-muted: #5A6A6A;
--tms-text-hint: #8A9A99;
--tms-border: rgba(45,58,58,0.10);
}
body { background: var(--tms-bg-page); color: var(--tms-text); touch-action: pan-y; }
html { overflow-x: hidden; scrollbar-gutter: stable; }
.fw-500 { font-weight: 500; }
/* Kartu Open Trip — judul trip panjangnya macam-macam (ada yang 1 baris, ada yang sampai 2
baris). Tanpa ini, kartu yang judulnya kebetulan 2 baris bikin destinasi/tanggal/Kuota Terisi
di bawahnya jadi lebih turun dibanding kartu sebelahnya yang judulnya cuma 1 baris — jadi
terlihat tidak rata sejajar dalam 1 baris grid. Dikunci selalu reservasi ruang 2 baris (judul
yang lebih panjang dari itu dipotong dengan "…"), jadi tinggi area judul selalu sama.
min-height sedikit lebih dari 2x line-height default Bootstrap (1.5) buat jaga-jaga font
metrics browser berbeda-beda. */
.ot-card-title {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 3.1rem;
}
/* Kartu tidak boleh pernah mendorong lebar halaman — apapun isinya dibatasi ke lebar kartu sendiri */
.card { max-width: 100%; overflow: hidden; }
.card-body { min-width: 0; }
.card-body .d-flex > * { min-width: 0; }
.btn-primary { background-color: var(--tms-primary); border-color: var(--tms-primary); }
.btn-primary:hover, .btn-primary:focus { background-color: var(--tms-primary-dark); border-color: var(--tms-primary-dark); }
.btn-touch { min-height: 44px; }
.form-control:focus, .form-select:focus { border-color: var(--tms-primary); box-shadow: 0 0 0 .2rem rgba(42,127,111,.15); }
.table-hover > tbody > tr:hover > td { background-color: #F0EFEC; }
/* Badge status reservasi */
.badge-inquiry { background:#ECEEED; color:#4A5A5A; }
.badge-deal { background:#F5EDD8; color:#7A6020; }
.badge-dp { background:#E3EDF5; color:#295A80; }
.badge-lunas { background:#E6F3F1; color:#1F5F52; }
.badge-selesai { background:#E3F3E6; color:#1F7A3D; }
.badge-batal { background:#F5E6E6; color:#8A2D2D; }
.badge-urgent { background:#F5E6E6; color:#8A2D2D; }
/* Filter chip */
.filter-chips-wrap { display:flex; gap:.5rem; overflow-x:auto; padding-bottom:.25rem; touch-action: pan-x; }
.filter-chip { border:1px solid var(--tms-border); background:#fff; color: var(--tms-text-muted); border-radius: 999px; white-space:nowrap; }
.filter-chip.active { background: var(--tms-primary); color:#fff; border-color: var(--tms-primary); }
/* Fix klasik flexbox: input di dalam input-group tidak mau menyusut di layar sempit, bikin halaman overflow ke samping */
.input-group > .form-control { min-width: 0; }
/* Avatar */
.avatar-circle { width:36px; height:36px; border-radius:50%; background: var(--tms-primary); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:500; font-size:.85rem; flex-shrink:0; }
/* FAB */
.fab {
position: fixed; right: 18px; bottom: 78px;
width: 54px; height: 54px; min-width: 54px; min-height: 54px;
padding: 0; margin: 0; box-sizing: border-box;
border-radius: 50%; border: none;
background: var(--tms-primary); color: #fff;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 3px 8px rgba(0,0,0,.22), 0 6px 16px rgba(0,0,0,.18);
z-index: 1045; line-height: 1; text-decoration: none;
transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
/* Tanda plus digambar pakai CSS murni supaya presisi di tengah, tidak tergantung rendering font ikon */
.fab i { display: none; }
.fab::before, .fab::after {
content: ''; position: absolute; background: #fff; border-radius: 2px;
}
.fab::before { width: 18px; height: 3px; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.fab::after { width: 3px; height: 18px; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.fab:hover, .fab:focus { color: #fff; background: var(--tms-primary-dark); box-shadow: 0 4px 10px rgba(0,0,0,.26), 0 8px 20px rgba(0,0,0,.2); }
.fab:active { transform: scale(0.92); }
/* Dashboard follow-up dots */
.dot-urgent, .dot-tinggi, .dot-sedang, .dot-info, .dot-siap { width:8px; height:8px; border-radius:50%; display:inline-block; flex-shrink:0; }
.dot-urgent { background:#C94A4A; }
.dot-tinggi { background:#C9952A; }
.dot-sedang { background:#2A7F6F; }
.dot-info { background:#4A8ABB; }
.dot-siap { background:#3FA34D; }
.min-w-0 { min-width: 0; }
/* Metric card v2 — ikon kotak berwarna + label/nilai, menggantikan border-top warna lama */
.card-metric { border: 1px solid var(--tms-border); cursor: default; }
.card-metric.card-metric-clickable { cursor: pointer; }
.card-metric.card-metric-clickable:hover { border-color: var(--tms-border-strong, rgba(45,58,58,0.25)); }
.card-metric .card-body { display:flex; align-items:flex-start; gap:.6rem; }
.metric-icon { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:1rem; }
.metric-icon-teal { background:#E1F0EC; color:#2A7F6F; }
.metric-icon-red { background:#F7E7E7; color:#C94A4A; }
.metric-icon-blue { background:#E7F0F7; color:#4A8ABB; }
.metric-icon-purple { background:#EFEAF3; color:#7A6A9A; }
.metric-icon-amber { background:#FBF0DC; color:#C9952A; }
.metric-icon-green { background:#E9F5EA; color:#3FA34D; }
html[data-theme="dark"] .metric-icon-teal { background:#173A32; color:#5DCAA5; }
html[data-theme="dark"] .metric-icon-red { background:#3A2222; color:#E5A3A3; }
html[data-theme="dark"] .metric-icon-blue { background:#1D2C38; color:#9CC3E8; }
html[data-theme="dark"] .metric-icon-purple { background:#2B2635; color:#C6B8DD; }
html[data-theme="dark"] .metric-icon-amber { background:#3A331B; color:#E3CE8E; }
html[data-theme="dark"] .metric-icon-green { background:#173A22; color:#7FDB92; }
/* List row avatar (Sisa Hutang Vendor Terbesar) */
.list-avatar-circle {
width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center;
font-size:.68rem; font-weight:500; flex-shrink:0; background:#F7E7E7; color:#C94A4A;
}
html[data-theme="dark"] .list-avatar-circle { background:#3A2222; color:#E5A3A3; }
/* Empty state ikon (kartu piutang/hutang kosong) */
.empty-state-icon { font-size:1.4rem; color: var(--tms-text-hint); display:block; margin-bottom:.4rem; }
.text-hint { color: var(--tms-text-hint); }
.main-content { min-height: 100vh; }
/* Detail pelanggan di Form Reservasi — dropdown pencarian & kotak ringkasan di bawah select
sama-sama menonjolkan Catatan (riwayat/preferensi pelanggan), supaya user tidak salah pilih
ketika ada beberapa pelanggan dengan nama yang sama. */
.pelanggan-detail-box { border: 1px solid var(--tms-border); border-radius: .5rem; padding: .5rem .65rem; color: var(--tms-text-muted); }
.detail-catatan-highlight { color: var(--tms-primary-dark); background: var(--tms-primary-light); border-radius: .375rem; padding: .35rem .5rem; }
html[data-theme="dark"] .detail-catatan-highlight { background: rgba(42,127,111,.14); color: #fff; }
/* Garis pemisah tegas antar baris di dropdown pencarian Pelanggan & Vendor -- tiap baris berisi
beberapa info (nama, kontak, alamat, catatan), jadi perlu batas yang jelas biar mata tidak
ketuker antara data satu pelanggan/vendor dengan yang berikutnya. */
.detail-option-item { padding: .5rem 0; border-bottom: 1px solid var(--tms-border); }
.ts-dropdown-content .option:last-child .detail-option-item { border-bottom: none; }
/* Catatan konteks di Laporan Rasio Keuangan — callout kecil (ikon + teks) supaya penjelasan
nuansa tiap rasio terasa seperti tips ringan, bukan disclaimer tebal, tapi tetap rapi & mudah
dipindai matanya (beda visual dari angka rasio di atasnya). */
.rasio-catatan {
display: flex; align-items: flex-start; gap: .5rem;
background: var(--tms-primary-light); border-radius: .5rem;
padding: .5rem .65rem; margin-top: .6rem; font-size: .8125rem; line-height: 1.45;
color: var(--tms-text-muted);
}
.rasio-catatan i { color: var(--tms-primary); flex-shrink: 0; margin-top: .1rem; }
html[data-theme="dark"] .rasio-catatan { background: rgba(42,127,111,.14); }
/* Tombol tutup modal (X) — selalu merah & terlihat jelas, di light maupun dark mode (default
Bootstrap warnanya hitam tipis 50% opacity, gampang hilang di latar gelap). Bootstrap merender
ikonnya lewat background-image SVG, bukan warna teks biasa, jadi diganti total SVG-nya. */
.btn-close {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23C94A4A'%3e%3cpath stroke-linecap='round' stroke-width='2' d='M1 1l14 14M15 1L1 15'/%3e%3c/svg%3e") !important;
opacity: 1 !important;
}
.btn-close:hover, .btn-close:focus { opacity: .7 !important; box-shadow: none !important; }
/* Ikon "lihat contoh" — hover/fokus untuk menampilkan contoh isian lewat tooltip,
dipakai sebagai pengganti placeholder panjang di dalam kolom entry (supaya kolom
kosong benar-benar terlihat kosong, tidak seperti sudah terisi). */
.example-hint {
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--tms-text-hint);
cursor: help;
margin-left: .4rem;
font-size: .95em;
vertical-align: middle;
}
.example-hint:hover, .example-hint:focus { color: var(--tms-primary); }
th .example-hint { font-size: .85em; }
/* Tabel baris-dinamis (Susun Biaya, Rincian Penjualan) — semua kolom di baris yang sama dibuat
SAMA TINGGI (ikut menyamai kolom Uraian, yang biasanya paling tinggi karena teksnya panjang),
dengan isi tetap rata atas. Kotak input/select dibungkus ".cell-stretch" (lihat markup), yang
diregangkan penuh 1 baris lalu isinya di-PIN persis ke pojok kiri-atas pakai position:absolute
— teknik ini dipilih (bukan flexbox align-items) karena terbukti lebih pasti menembus gaya
internal TomSelect (dropdown Jenis Biaya/Vendor tetap ke-tengah kalau cuma pakai flexbox biasa).
Trik "height:1px" di
diperlukan supaya height:100% pada elemen anak bisa mengikuti tinggi
baris SEBENARNYA (batasan CSS tabel: tanpa ini height:100% percuma).
*/
#tabelBiaya > tbody > tr > td, #tabelJual > tbody > tr > td { height: 1px; vertical-align: top; }
#tabelBiaya > tbody > tr > td .cell-stretch,
#tabelJual > tbody > tr > td .cell-stretch {
height: 100%;
position: relative;
min-width: 100%;
}
#tabelBiaya > tbody > tr > td .cell-stretch > *,
#tabelJual > tbody > tr > td .cell-stretch > * {
position: absolute;
top: 0;
left: 0;
right: 0;
}
#tabelBiaya > tbody > tr > td .btn-hapus-baris { margin-top: .1rem; }
/* Hilangkan border/kotak bawaan input-select di dalam tabel Susun Biaya & Rincian Penjualan —
tabelnya sendiri sudah bergaris (table-bordered), jadi kalau tiap input juga punya kotak sendiri
di dalamnya, jadi terlihat "kotak di dalam kotak" dan ukurannya kelihatan tidak seragam. Garis
sel tabel yang jadi satu-satunya pembatas; saat fokus diberi highlight warna supaya tetap
kelihatan sedang mengetik di sel mana. */
#tabelBiaya .form-control, #tabelBiaya .form-select,
#tabelJual .form-control, #tabelJual .form-select,
#tabelBiaya .ts-wrapper .ts-control, #tabelJual .ts-wrapper .ts-control {
border: none;
border-radius: 0;
box-shadow: none;
background-color: transparent;
}
#tabelBiaya .form-control:focus, #tabelBiaya .form-select:focus,
#tabelJual .form-control:focus, #tabelJual .form-select:focus,
#tabelBiaya .ts-wrapper.focus .ts-control, #tabelJual .ts-wrapper.focus .ts-control {
background-color: var(--tms-primary-light);
box-shadow: none;
}
#tabelBiaya .ts-wrapper.single .ts-control, #tabelBiaya .ts-wrapper.multi .ts-control,
#tabelJual .ts-wrapper.single .ts-control, #tabelJual .ts-wrapper.multi .ts-control {
min-height: 0;
}
/* Dark mode: dua tabel di atas adalah tabel ENTRY (Susun Biaya, Rincian Penjualan) — sengaja
dibuat TERANG (bukan ikut gelap seperti latar sekitarnya) dengan teks gelap yang kontras, supaya
jelas beda area mana yang harus diisi. Override "transparent" di atas KHUSUS untuk dark mode
(di light mode "transparent" sudah pas karena warna latar tabel & input sama-sama putih).
Warna terang dipasang di WRAPPER ".cell-stretch" (yang tingginya sudah pasti menyamai baris),
BUKAN di kontrolnya langsung (yang tingginya natural/pendek) — supaya kotak terang yang
kelihatan itu benar-benar setinggi baris, bukan cuma setinggi kontrolnya sendiri (itu penyebab
kotak-kotak kelihatan tidak sama tinggi). Kontrol di dalamnya dibuat transparan supaya menyatu
rata dengan warna wrapper-nya. Uraian TIDAK dibungkus ".cell-stretch" (dari sananya sudah paling
tinggi di barisnya sendiri), jadi tetap pakai warna langsung di dirinya sendiri. Berlaku juga
untuk kolom Total & tombol Hapus per baris, plus baris footer Total Estimasi Biaya/Estimasi
Biaya per Orang — supaya seluruh tabel konsisten kotak terangnya, bukan cuma kolom isian. */
html[data-theme="dark"] #tabelBiaya .cell-stretch,
html[data-theme="dark"] #tabelJual .cell-stretch {
background-color: #EAEDEC;
border-radius: .25rem;
color: #1B2426 !important;
}
html[data-theme="dark"] #tabelBiaya .cell-stretch:focus-within,
html[data-theme="dark"] #tabelJual .cell-stretch:focus-within {
background-color: #FFFFFF;
}
html[data-theme="dark"] #tabelBiaya .c-total, html[data-theme="dark"] #tabelJual .s-total {
display: inline-block;
padding: .25rem .5rem;
}
/* Baris footer (Total Estimasi Biaya, Estimasi Biaya per Orang, Subtotal Rincian Penjualan) —
dibungkus (bukan warnanya langsung di
) supaya lebarnya
PASTI menyamai kolom Total di atasnya (block, 100% lebar sel kolom yang sama) dan ada jarak
antar baris (margin), tidak lagi kelihatan menyatu jadi satu kotak besar. */
html[data-theme="dark"] #tabelBiaya .footer-value-box, html[data-theme="dark"] #tabelJual .footer-value-box {
display: block;
background-color: #EAEDEC;
color: #1B2426 !important;
border-radius: .25rem;
padding: .375rem .75rem;
margin: .2rem 0;
}
html[data-theme="dark"] #tabelBiaya .btn-hapus-baris, html[data-theme="dark"] #tabelJual .btn-hapus-baris {
background-color: #fff;
}
/* Kotak Estimasi Margin di kartu Ringkasan (reservasi/form.php) — normalnya IKUT gelap seperti
baris lain (readonly input default), TAPI saat baris ini di-hover, kotaknya ikut terang
menyamai highlight hover baris (bukan terang permanen — itu malah beda sendiri dari baris lain
yang semuanya baru terang saat di-hover). Border dihilangkan (baik light maupun dark mode) —
baris-baris lain di Ringkasan tidak ada border, jadi ini disamakan biar konsisten satu kartu.
*/
#estimasiMarginDisplay { border: none !important; box-shadow: none !important; }
html[data-theme="dark"] .list-group-item:hover #estimasiMarginDisplay {
background-color: #E9EFEE !important;
color: #12181A !important;
}
/* Kotak Total Akhir di kartu Diskon & Pembayaran — readonly, sebelumnya ikut gelap seperti input
readonly umumnya sehingga kurang menonjol sebagai angka penting. Dibuat terang kontras. */
html[data-theme="dark"] #grandTotalDisplay {
background-color: #EAEDEC !important;
color: #1B2426 !important;
border-color: transparent !important;
}
html[data-theme="dark"] #tabelBiaya textarea.form-control,
html[data-theme="dark"] #tabelJual textarea.form-control {
background-color: #EAEDEC;
color: #1B2426;
}
html[data-theme="dark"] #tabelBiaya textarea.form-control:focus,
html[data-theme="dark"] #tabelJual textarea.form-control:focus {
background-color: #FFFFFF;
color: #1B2426;
}
html[data-theme="dark"] #tabelBiaya .cell-stretch .form-control, html[data-theme="dark"] #tabelBiaya .cell-stretch .form-select,
html[data-theme="dark"] #tabelJual .cell-stretch .form-control, html[data-theme="dark"] #tabelJual .cell-stretch .form-select,
html[data-theme="dark"] #tabelBiaya .cell-stretch .ts-wrapper .ts-control, html[data-theme="dark"] #tabelJual .cell-stretch .ts-wrapper .ts-control {
background-color: transparent;
color: #1B2426;
}
html[data-theme="dark"] #tabelBiaya .form-control::placeholder, html[data-theme="dark"] #tabelJual .form-control::placeholder {
color: #6B7877;
}
/* Duplikat persis blok di atas, khusus untuk tabel Struktur Biaya di halaman Open Trip
(#tabelBiayaOpenTrip) — supaya formatnya identik dengan Susun Biaya di Reservasi (#tabelBiaya
di atas). Sengaja diduplikasi sebagai blok terpisah (bukan digabung pakai koma di selector yang
sama), supaya rantai kombinator "> tbody > tr > td" tetap benar (kalau digabung pakai koma di
tengah rantai descendant, artinya jadi berubah total, bukan sekadar "berlaku untuk tabel ini
juga"). Tabel Estimasi Nilai Jual (#tabelJualOpenTrip) dapat blok duplikatnya sendiri di bawah,
dengan alasan yang sama. */
#tabelBiayaOpenTrip > tbody > tr > td { height: 1px; vertical-align: top; }
#tabelBiayaOpenTrip > tbody > tr > td .cell-stretch {
height: 100%;
position: relative;
min-width: 100%;
}
#tabelBiayaOpenTrip > tbody > tr > td .cell-stretch > * {
position: absolute;
top: 0;
left: 0;
right: 0;
}
#tabelBiayaOpenTrip > tbody > tr > td .btn-hapus-baris { margin-top: .1rem; }
#tabelBiayaOpenTrip .form-control, #tabelBiayaOpenTrip .form-select,
#tabelBiayaOpenTrip .ts-wrapper .ts-control {
border: none;
border-radius: 0;
box-shadow: none;
background-color: transparent;
}
#tabelBiayaOpenTrip .form-control:focus, #tabelBiayaOpenTrip .form-select:focus,
#tabelBiayaOpenTrip .ts-wrapper.focus .ts-control {
background-color: var(--tms-primary-light);
box-shadow: none;
}
#tabelBiayaOpenTrip .ts-wrapper.single .ts-control, #tabelBiayaOpenTrip .ts-wrapper.multi .ts-control {
min-height: 0;
}
html[data-theme="dark"] #tabelBiayaOpenTrip .cell-stretch {
background-color: #EAEDEC;
border-radius: .25rem;
color: #1B2426 !important;
}
html[data-theme="dark"] #tabelBiayaOpenTrip .cell-stretch:focus-within {
background-color: #FFFFFF;
}
html[data-theme="dark"] #tabelBiayaOpenTrip .c-total {
display: inline-block;
padding: .25rem .5rem;
}
html[data-theme="dark"] #tabelBiayaOpenTrip .footer-value-box {
display: block;
background-color: #EAEDEC;
color: #1B2426 !important;
border-radius: .25rem;
padding: .375rem .75rem;
margin: .2rem 0;
}
html[data-theme="dark"] #tabelBiayaOpenTrip .btn-hapus-baris {
background-color: #fff;
}
html[data-theme="dark"] #tabelBiayaOpenTrip textarea.form-control {
background-color: #EAEDEC;
color: #1B2426;
}
html[data-theme="dark"] #tabelBiayaOpenTrip textarea.form-control:focus {
background-color: #FFFFFF;
color: #1B2426;
}
html[data-theme="dark"] #tabelBiayaOpenTrip .cell-stretch .form-control, html[data-theme="dark"] #tabelBiayaOpenTrip .cell-stretch .form-select,
html[data-theme="dark"] #tabelBiayaOpenTrip .cell-stretch .ts-wrapper .ts-control {
background-color: transparent;
color: #1B2426;
}
html[data-theme="dark"] #tabelBiayaOpenTrip .form-control::placeholder {
color: #6B7877;
}
/* Duplikat yang sama lagi untuk tabel Komponen Biaya di halaman Template Biaya
(#tabelBiayaTemplate) — supaya tinggi baris & warna kotak terang saat dark mode identik dengan
Susun Biaya di Reservasi (#tabelBiaya). */
#tabelBiayaTemplate > tbody > tr > td { height: 1px; vertical-align: top; }
#tabelBiayaTemplate > tbody > tr > td .cell-stretch {
height: 100%;
position: relative;
min-width: 100%;
}
#tabelBiayaTemplate > tbody > tr > td .cell-stretch > * {
position: absolute;
top: 0;
left: 0;
right: 0;
}
#tabelBiayaTemplate > tbody > tr > td .btn-hapus-baris { margin-top: .1rem; }
#tabelBiayaTemplate .form-control, #tabelBiayaTemplate .form-select,
#tabelBiayaTemplate .ts-wrapper .ts-control {
border: none;
border-radius: 0;
box-shadow: none;
background-color: transparent;
}
#tabelBiayaTemplate .form-control:focus, #tabelBiayaTemplate .form-select:focus,
#tabelBiayaTemplate .ts-wrapper.focus .ts-control {
background-color: var(--tms-primary-light);
box-shadow: none;
}
#tabelBiayaTemplate .ts-wrapper.single .ts-control, #tabelBiayaTemplate .ts-wrapper.multi .ts-control {
min-height: 0;
}
html[data-theme="dark"] #tabelBiayaTemplate .cell-stretch {
background-color: #EAEDEC;
border-radius: .25rem;
color: #1B2426 !important;
}
html[data-theme="dark"] #tabelBiayaTemplate .cell-stretch:focus-within {
background-color: #FFFFFF;
}
html[data-theme="dark"] #tabelBiayaTemplate .i-total {
display: inline-block;
padding: .25rem .5rem;
}
html[data-theme="dark"] #tabelBiayaTemplate .footer-value-box {
display: block;
background-color: #EAEDEC;
color: #1B2426 !important;
border-radius: .25rem;
padding: .375rem .75rem;
margin: .2rem 0;
}
html[data-theme="dark"] #tabelBiayaTemplate .btn-hapus-baris {
background-color: #fff;
}
html[data-theme="dark"] #tabelBiayaTemplate textarea.form-control {
background-color: #EAEDEC;
color: #1B2426;
}
html[data-theme="dark"] #tabelBiayaTemplate textarea.form-control:focus {
background-color: #FFFFFF;
color: #1B2426;
}
html[data-theme="dark"] #tabelBiayaTemplate .cell-stretch .form-control, html[data-theme="dark"] #tabelBiayaTemplate .cell-stretch .form-select,
html[data-theme="dark"] #tabelBiayaTemplate .cell-stretch .ts-wrapper .ts-control {
background-color: transparent;
color: #1B2426;
}
html[data-theme="dark"] #tabelBiayaTemplate .form-control::placeholder {
color: #6B7877;
}
/* Duplikat yang sama untuk tabel Estimasi Nilai Jual di Open Trip (#tabelJualOpenTrip) --
markup-nya sekarang sudah dibungkus .cell-stretch sama seperti Rincian Penjualan di Reservasi
(#tabelJual), jadi aman diterapkan (lihat catatan di atas kenapa harus blok terpisah, bukan
digabung koma). */
#tabelJualOpenTrip > tbody > tr > td { height: 1px; vertical-align: top; }
#tabelJualOpenTrip > tbody > tr > td .cell-stretch {
height: 100%;
position: relative;
min-width: 100%;
}
#tabelJualOpenTrip > tbody > tr > td .cell-stretch > * {
position: absolute;
top: 0;
left: 0;
right: 0;
}
#tabelJualOpenTrip > tbody > tr > td .btn-hapus-baris { margin-top: .1rem; }
#tabelJualOpenTrip .form-control, #tabelJualOpenTrip .form-select,
#tabelJualOpenTrip .ts-wrapper .ts-control {
border: none;
border-radius: 0;
box-shadow: none;
background-color: transparent;
}
#tabelJualOpenTrip .form-control:focus, #tabelJualOpenTrip .form-select:focus,
#tabelJualOpenTrip .ts-wrapper.focus .ts-control {
background-color: var(--tms-primary-light);
box-shadow: none;
}
#tabelJualOpenTrip .ts-wrapper.single .ts-control, #tabelJualOpenTrip .ts-wrapper.multi .ts-control {
min-height: 0;
}
html[data-theme="dark"] #tabelJualOpenTrip .cell-stretch {
background-color: #EAEDEC;
border-radius: .25rem;
color: #1B2426 !important;
}
html[data-theme="dark"] #tabelJualOpenTrip .cell-stretch:focus-within {
background-color: #FFFFFF;
}
html[data-theme="dark"] #tabelJualOpenTrip .s-total {
display: inline-block;
padding: .25rem .5rem;
}
html[data-theme="dark"] #tabelJualOpenTrip .footer-value-box {
display: block;
background-color: #EAEDEC;
color: #1B2426 !important;
border-radius: .25rem;
padding: .375rem .75rem;
margin: .2rem 0;
}
html[data-theme="dark"] #tabelJualOpenTrip .btn-hapus-baris {
background-color: #fff;
}
html[data-theme="dark"] #tabelJualOpenTrip textarea.form-control {
background-color: #EAEDEC;
color: #1B2426;
}
html[data-theme="dark"] #tabelJualOpenTrip textarea.form-control:focus {
background-color: #FFFFFF;
color: #1B2426;
}
html[data-theme="dark"] #tabelJualOpenTrip .cell-stretch .form-control, html[data-theme="dark"] #tabelJualOpenTrip .cell-stretch .form-select,
html[data-theme="dark"] #tabelJualOpenTrip .cell-stretch .ts-wrapper .ts-control {
background-color: transparent;
color: #1B2426;
}
html[data-theme="dark"] #tabelJualOpenTrip .form-control::placeholder {
color: #6B7877;
}
/* Menyamakan tinggi label yang berdampingan dalam satu baris grid, supaya input di
bawahnya tetap sejajar walau salah satu label membungkus jadi 2 baris (mis. saat
layar menyempit tapi kolom masih berdampingan). Hanya berlaku mulai breakpoint md
ke atas — di layar mobile kolom sudah menumpuk penuh (col-12), jadi tidak perlu
reservasi ruang kosong 2 baris di sana. */
@media (min-width: 768px) {
.form-label-align { min-height: 3rem; }
}
/* Baris ringkasan Jurnal Umum (accounting/index.php) — tabelnya tidak pakai .table-hover
(butuh sel