: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 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; }

/* Metric card */
.card-metric { border: 1px solid var(--tms-border); }
.border-top-teal   { border-top: 2px solid #2A7F6F !important; }
.border-top-red    { border-top: 2px solid #C94A4A !important; }
.border-top-purple { border-top: 2px solid #7A6A9A !important; }
.border-top-blue   { border-top: 2px solid #4A8ABB !important; }

.text-hint { color: var(--tms-text-hint); }
.main-content { min-height: 100vh; }

/* 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 <td> 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 <span class="footer-value-box"> (bukan warnanya langsung di <td>) 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;
}

/* 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 <tr> tetap bisa diklik untuk expand/collapse, bukan cuma efek visual), jadi
   highlight hover dark mode ditulis khusus di sini: latar terang + teks gelap kontras,
   sama polanya dengan highlight kursor di tempat lain. Badge (jenis/status) tidak disentuh
   karena warnanya sendiri sudah kontras baik di light maupun dark mode. */
html[data-theme="dark"] tr.jurnal-summary-row:hover,
html[data-theme="dark"] div.jurnal-summary-row:hover {
  background-color: #E9EFEE !important;
  color: #12181A !important;
  border-radius: .25rem;
}
html[data-theme="dark"] tr.jurnal-summary-row:hover td,
html[data-theme="dark"] tr.jurnal-summary-row:hover .fw-500,
html[data-theme="dark"] tr.jurnal-summary-row:hover .text-hint,
html[data-theme="dark"] div.jurnal-summary-row:hover .fw-500,
html[data-theme="dark"] div.jurnal-summary-row:hover .text-hint {
  color: #12181A !important;
}

.tooltip .tooltip-inner {
  max-width: 300px;
  text-align: left;
}

/* Tombol toggle dark mode (di sidebar footer) */
.theme-toggle-btn {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.05); color: #8AABAA; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background .15s, color .15s;
}
.theme-toggle-btn:hover { background: rgba(255,255,255,.12); color: #fff; }

/* ================= DARK MODE ================= */
html[data-theme="dark"] {
  --tms-primary-light: #17332E;
  --tms-bg-page: #12181A;
  --tms-text: #E6EDEC;
  --tms-text-muted: #B7C7C4;
  --tms-text-hint: #93A6A3;
  --tms-border: rgba(255,255,255,0.09);
  color-scheme: dark;
  /* Variabel internal Bootstrap — banyak komponen (navbar-brand, heading, dsb)
     pakai warna sendiri yang tidak ikut variabel tema kita kalau tidak di-override di sini */
  --bs-body-color: var(--tms-text);
  --bs-body-bg: var(--tms-bg-page);
  --bs-emphasis-color: var(--tms-text);
  --bs-heading-color: var(--tms-text);
  --bs-navbar-brand-color: var(--tms-text);
  --bs-navbar-color: var(--tms-text);
  --bs-navbar-active-color: var(--tms-text);
  --bs-card-color: var(--tms-text);
  --bs-table-color: var(--tms-text);
  --bs-dropdown-link-color: var(--tms-text);
  --bs-border-color: var(--tms-border);
  --bs-secondary-color: var(--tms-text-hint);
}
html[data-theme="dark"] .form-text { color: var(--tms-text-hint); }
html[data-theme="dark"] .navbar-brand,
html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3,
html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6,
html[data-theme="dark"] .fw-500 { color: var(--tms-text); }
html[data-theme="dark"] body { background: var(--tms-bg-page); color: var(--tms-text); }
html[data-theme="dark"] .card,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .list-group-item,
html[data-theme="dark"] .dropdown-menu {
  background-color: #1B2426; color: var(--tms-text); border-color: var(--tms-border);
}
html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus {
  background-color: #E9EFEE !important; color: #12181A !important;
}
html[data-theme="dark"] .dropdown-header { color: var(--tms-text-hint); }
html[data-theme="dark"] .table { color: var(--tms-text); border-color: var(--tms-border); }
html[data-theme="dark"] .table > :not(caption) > * > * { background-color: transparent; border-color: var(--tms-border); color: var(--tms-text); }

/* Highlight posisi kursor di dark mode — latar jadi TERANG + teks jadi GELAP supaya baris/kartu
   yang sedang di-hover kontras jelas dari sekelilingnya (bukan cuma sedikit lebih terang seperti
   sebelumnya). Berlaku untuk baris tabel, item list-group, dan kartu yang bisa diklik (dibungkus
   <a>). Elemen yang sudah punya warna sendiri (badge status, dot prioritas) TIDAK disentuh karena
   sudah kontras terhadap latar apa pun. ".text-hint" perlu di-override tersendiri karena warnanya
   sengaja dibuat redup untuk latar gelap, jadi kalau tidak diubah malah nyaris tak terlihat di
   atas latar terang ini. */
html[data-theme="dark"] .table-hover > tbody > tr:hover > td,
html[data-theme="dark"] .list-group-item:hover,
html[data-theme="dark"] a.card:hover,
html[data-theme="dark"] a:hover > .card {
  background-color: #E9EFEE !important;
  color: #12181A !important;
}
html[data-theme="dark"] .table-hover > tbody > tr:hover > td .text-hint,
html[data-theme="dark"] .list-group-item:hover .text-hint,
html[data-theme="dark"] a.card:hover .text-hint,
html[data-theme="dark"] a:hover > .card .text-hint,
html[data-theme="dark"] .table-hover > tbody > tr:hover > td .text-muted,
html[data-theme="dark"] .list-group-item:hover .text-muted,
html[data-theme="dark"] a.card:hover .text-muted,
html[data-theme="dark"] a:hover > .card .text-muted {
  color: #5A6A6A !important;
}
html[data-theme="dark"] .table-hover > tbody > tr:hover > td .fw-500,
html[data-theme="dark"] .list-group-item:hover .fw-500,
html[data-theme="dark"] a.card:hover .fw-500,
html[data-theme="dark"] a:hover > .card .fw-500 {
  color: #12181A !important;
}
html[data-theme="dark"] .form-control, html[data-theme="dark"] .form-select {
  background-color: #D8DEDD; color: #1B2426; border-color: rgba(0,0,0,0.15);
}
html[data-theme="dark"] .form-control:focus, html[data-theme="dark"] .form-select:focus {
  background-color: #EAEDEC; color: #1B2426; border-color: var(--tms-primary);
  box-shadow: 0 0 0 .2rem rgba(45,138,120,.25);
}
html[data-theme="dark"] .form-control::placeholder { color: #5A6A6A; }
html[data-theme="dark"] input[type="date"], html[data-theme="dark"] input[type="time"],
html[data-theme="dark"] input[type="month"], html[data-theme="dark"] input[type="week"],
html[data-theme="dark"] input[type="datetime-local"] { color-scheme: light; }
html[data-theme="dark"] .form-control:disabled, html[data-theme="dark"] .form-control[readonly],
html[data-theme="dark"] .form-select:disabled {
  background-color: #1B2426; color: var(--tms-text-muted); border-color: var(--tms-border);
}
html[data-theme="dark"] .input-group-text { background-color: #1B2426; color: var(--tms-text-hint); border-color: var(--tms-border); }
html[data-theme="dark"] .navbar.bg-white,
html[data-theme="dark"] .topbar { background-color: #171F21 !important; border-color: var(--tms-border) !important; }
html[data-theme="dark"] .bottom-nav { background-color: #171F21; border-color: var(--tms-border); }
html[data-theme="dark"] .filter-chip { background: #1B2426; color: var(--tms-text-muted); border-color: var(--tms-border); }
html[data-theme="dark"] .filter-chip.active { background: var(--tms-primary); color: #fff; }
html[data-theme="dark"] .btn-outline-secondary {
  color: #F2F5F4 !important;
  background-color: #2A3538 !important;
  border-color: rgba(255,255,255,0.35) !important;
}
html[data-theme="dark"] .btn-outline-secondary:hover {
  background-color: #F2F5F4 !important;
  color: #12181A !important;
  border-color: #F2F5F4 !important;
}
html[data-theme="dark"] hr { border-color: var(--tms-border); opacity: 1; }
html[data-theme="dark"] .badge-inquiry { background:#2A3130; color:#B7C4C2; }
html[data-theme="dark"] .badge-deal    { background:#3A331B; color:#E3CE8E; }
html[data-theme="dark"] .badge-dp      { background:#1D2C38; color:#9CC3E8; }
html[data-theme="dark"] .badge-lunas   { background:#17332E; color:#7FD9C4; }
html[data-theme="dark"] .badge-selesai { background:#173A22; color:#7FDB92; }
html[data-theme="dark"] .badge-batal   { background:#3A2222; color:#E5A3A3; }

/* Tombol Kembali di topbar: ikon bulat + garis pemisah vertikal (tidak bersaing dengan judul halaman) */
.topbar-back-icon {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--tms-border);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--tms-text-hint); text-decoration: none; flex-shrink: 0; transition: background .15s, color .15s;
}
.topbar-back-icon:hover { background: #F2F1EE; color: var(--tms-text); }
.topbar-back-divider { width: 1px; align-self: stretch; background: var(--tms-border); margin: 12px 12px 12px 10px; flex-shrink: 0; }
html[data-theme="dark"] .topbar-back-icon { border-color: var(--tms-border); color: var(--tms-text-hint); }
html[data-theme="dark"] .topbar-back-icon:hover { background: #1B2426; color: var(--tms-text); }
html[data-theme="dark"] .topbar-back-divider { background: var(--tms-border); }

/* Sticky top (topbar + search + filter) di semua ukuran layar — hanya konten daftar yang scroll */
.reservasi-sticky-top {
  position: sticky; top: 0; z-index: 1030;
  background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.06);
}
.reservasi-sticky-top .topbar { border-bottom: none; }
.reservasi-toolbar { padding-top: .5rem; padding-bottom: .0625rem; }
html[data-theme="dark"] .reservasi-sticky-top { background: #171F21; }

/* Jarak aman bawah di mobile supaya FAB tidak menutupi konten/tombol terakhir */
@media (max-width: 767.98px) {
  main.p-3 { padding-bottom: 120px !important; }
}

/* Sembunyikan FAB saat sidebar (offcanvas) sedang terbuka */
body.offcanvas-open .fab { display: none; }

/* Tom Select — samakan dengan tema TravelMS */
.ts-wrapper.single .ts-control, .ts-wrapper.multi .ts-control { min-height: 38px; }
.ts-wrapper.form-select-sm .ts-control { min-height: 31px; font-size: .875rem; padding: .25rem .5rem; }
.ts-control { border-color: var(--tms-border) !important; }
.ts-wrapper.focus .ts-control { border-color: var(--tms-primary) !important; box-shadow: 0 0 0 .2rem rgba(42,127,111,.15); }
.ts-dropdown .active { background-color: var(--tms-primary-light); color: var(--tms-primary-dark); }
.ts-dropdown .create { color: var(--tms-primary); }

html[data-theme="dark"] .ts-control {
  background-color: #D8DEDD !important; color: #1B2426 !important; border-color: rgba(0,0,0,0.15) !important;
}
html[data-theme="dark"] .ts-dropdown {
  background-color: #1B2426 !important; color: var(--tms-text) !important; border-color: rgba(255,255,255,0.22) !important;
}
html[data-theme="dark"] .ts-dropdown .option { color: var(--tms-text); }
html[data-theme="dark"] .ts-dropdown .active { background-color: #223032; color: #7FD9C4; }
html[data-theme="dark"] .ts-control input { color: #1B2426 !important; }

/* Cegah auto-zoom Safari iOS saat fokus ke input — WebKit otomatis zoom
   kalau font-size elemen form di bawah 16px. Ini bug klasik semua form
   yang pakai .form-control-sm di tabel, bukan bug Safari itu sendiri. */
@media (max-width: 767.98px) {
  input, select, textarea, .form-control, .form-select, .ts-control { font-size: 16px !important; }
}

/* Cetak Laporan — elemen ber-kelas .no-print (sidebar, topbar, tombol, filter form) disembunyikan
   total saat dicetak; sisanya (kartu ringkasan, tabel) dirapikan supaya rapi di kertas.
   Dipasang di sini (bukan per-halaman) supaya semua halaman Laporan otomatis konsisten. */
@media print {
  .tms-sidebar, .topbar, .no-print { display: none !important; }
  #wrapper { display: block !important; }
  .main-content { width: 100% !important; margin: 0 !important; padding: 0 !important; min-height: 0 !important; }
  main.p-3 { padding: 0 !important; }
  body { background: #fff !important; }
  .card { border: 1px solid #ccc !important; box-shadow: none !important; break-inside: avoid; }
  .table { font-size: 12px; }
  a { color: inherit !important; text-decoration: none !important; }
  .badge { border: 1px solid #999; color: #000 !important; background: none !important; }
}
.print-header { display: none; }
@media print {
  .print-header { display: block !important; text-align: center; margin-bottom: 1rem; }
  .print-header .judul { font-size: 1.1rem; font-weight: 600; }
  .print-header .sub { font-size: .85rem; color: #555; }
}