/* =========================================================
   app.css - Tema modern aplikasi ServisAC Pro
   Light + Dark mode (Bootstrap 5.3 color modes) - PHP 5.6 friendly
   ========================================================= */

:root {
  --app-primary: #4f46e5;
  --app-primary-2: #7c3aed;
  --app-primary-soft: rgba(79, 70, 229, 0.1);
  --app-radius: 14px;
  --app-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 8px 24px -12px rgba(16, 24, 40, .12);
  --app-font: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
}

[data-bs-theme="dark"] {
  --app-primary-soft: rgba(129, 140, 248, 0.14);
  --app-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px -12px rgba(0, 0, 0, .5);
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--app-font);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f4f5fb;
}
[data-bs-theme="dark"] body { background: #0b1020; }

/* ---------- Navbar ---------- */
.app-navbar {
  background: linear-gradient(120deg, var(--app-primary), var(--app-primary-2));
  box-shadow: 0 4px 20px -6px rgba(79, 70, 229, .45);
}
.app-navbar .navbar-brand, .app-navbar .nav-link { color: rgba(255,255,255,.92); }
.app-navbar .nav-link { border-radius: 10px; padding: .45rem .8rem !important; font-weight: 500; }
.app-navbar .nav-link:hover { background: rgba(255,255,255,.14); color: #fff; }
.app-navbar .nav-link.active { background: rgba(255,255,255,.22); color: #fff; }
.app-navbar .navbar-toggler { border-color: rgba(255,255,255,.3); }
/* ===== Navbar auto-width =====
   Dulu daftar menu melebar melebihi layar: tombol tema & user di kanan
   terdorong keluar layar sehingga harus "digeser ke kanan". Sekarang
   item menu boleh menyusut (auto width) supaya SELURUH navbar muat di
   layar: tombol kanan selalu terlihat, halaman tidak pernah geser
   horizontal. Teks yang tidak cukup ruang dipotong dengan ellipsis. */
.app-navbar > .container-fluid { flex-wrap: nowrap; }
.app-navbar .navbar-brand { flex: 0 0 auto; min-width: 0; }
.app-navbar .navbar-brand > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Tombol kanan (tema + user) TIDAK PERNAH boleh tersempit/hilang.
   Menu tengah yang jadi yang menyusut kalau layar sempit. */
.app-navbar .nav-aksi { flex: 0 0 auto; }
.app-navbar .navbar-nav {
  flex: 1 1 auto; flex-wrap: wrap; min-width: 0;
  justify-content: center; align-content: center;
  overflow: visible;
}
/* Item menu TIDAK dipotong: kalau tidak muat, turun ke baris kedua
   (flex-wrap) dan seluruh daftar tetap terpusat di tengah. */
.app-navbar .navbar-nav > .nav-item { flex: 0 0 auto; }
/* Teks menu tetap utuh satu baris; yang turun ke baris berikutnya adalah
   BUTIRNYA, bukan teksnya yang dipotong. */
.app-navbar .navbar-nav .nav-link {
  display: block; white-space: nowrap; text-align: center;
}
@media (max-width: 1399.98px) {
  .app-navbar .navbar-nav .nav-link { padding: .45rem !important; font-size: .9rem; }
}
@media (max-width: 1199.98px) {
  .app-navbar .navbar-nav .nav-link { padding: .4rem .4rem !important; font-size: .85rem; }
  .app-navbar .navbar-brand > span { display: none; }
}
.brand-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 9px;
  background: rgba(255,255,255,.18); color: #fff;
}
.btn-user { color: #fff; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; padding: .2rem .7rem .2rem .3rem; }
.btn-user:hover, .btn-user:focus { color: #fff; background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.4); }
.btn-user::after { margin-left: .35rem; }
.avatar-sm {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: #fff; color: var(--app-primary);
  font-weight: 700; font-size: .82rem;
}
.btn-icon {
  border: 1px solid rgba(255,255,255,.3); color: #fff; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; background: transparent;
}
.btn-icon:hover { background: rgba(255,255,255,.15); color: #fff; }
.ico-moon { display: none; }
[data-bs-theme="dark"] .ico-moon { display: inline; }
[data-bs-theme="dark"] .ico-sun { display: none; }

/* ---------- Layout ---------- */
.app-main { flex: 1 0 auto; }
.app-footer {
  flex-shrink: 0;
  padding: 1rem 0;
  border-top: 1px solid var(--bs-border-color);
  font-size: .85rem;
  color: var(--bs-secondary-color);
  background: var(--bs-body-bg);
}

/* ---------- Cards ---------- */
.card {
  border: 1px solid var(--bs-border-color);
  border-radius: var(--app-radius);
  box-shadow: var(--app-shadow);
}
.card-header {
  border-bottom: 1px solid var(--bs-border-color);
  background: transparent;
  padding: .9rem 1.1rem;
  font-weight: 600;
}

/* ---------- Stat cards ---------- */
.stat-card { position: relative; overflow: hidden; }
.stat-card .stat-ico {
  width: 46px; height: 46px; border-radius: 13px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.25rem;
}
.stat-card .stat-val { font-size: 1.65rem; font-weight: 800; line-height: 1.1; }
.stat-card .stat-lbl { font-size: .8rem; color: var(--bs-secondary-color); font-weight: 500; }
a.stat-card { transition: transform .12s ease, box-shadow .12s ease; }
a.stat-card:hover { transform: translateY(-2px); box-shadow: 0 .4rem 1rem rgba(0, 0, 0, .08); }
a.stat-card:focus-visible { outline: 2px solid var(--app-primary); outline-offset: 2px; }
.stat-card.is-zero { opacity: .62; }
[data-bs-theme="dark"] a.stat-card:hover { box-shadow: 0 .4rem 1rem rgba(0, 0, 0, .35); }
.bg-soft-primary { background: var(--app-primary-soft) !important; color: var(--app-primary) !important; }
.bg-soft-success { background: rgba(25, 135, 84, .12) !important; color: #198754 !important; }
.bg-soft-warning { background: rgba(255, 193, 7, .16) !important; color: #b8860b !important; }
.bg-soft-danger  { background: rgba(220, 53, 69, .12) !important; color: #dc3545 !important; }
.bg-soft-info    { background: rgba(13, 202, 240, .14) !important; color: #0dcaf0 !important; }
[data-bs-theme="dark"] .bg-soft-success { color: #4ade80 !important; }
[data-bs-theme="dark"] .bg-soft-warning { color: #fde047 !important; }
[data-bs-theme="dark"] .bg-soft-danger  { color: #fb7185 !important; }

/* ---------- Tables ---------- */
.table-card { overflow: hidden; }
.table > :not(caption) > * > * { padding: .7rem .75rem; }
.table thead th {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--bs-secondary-color); font-weight: 700; white-space: nowrap;
  background: var(--bs-tertiary-bg);
}
.table th.sortable { cursor: pointer; user-select: none; }
.table th.sortable:hover { color: var(--app-primary); }

/* ---------- Buttons ---------- */
.btn { border-radius: 10px; font-weight: 500; }
.btn-primary {
  background: linear-gradient(120deg, var(--app-primary), var(--app-primary-2));
  border: none;
  box-shadow: 0 4px 14px -4px rgba(79, 70, 229, .5);
}
.btn-primary:hover { filter: brightness(1.07); }
.btn-soft-primary { background: var(--app-primary-soft); color: var(--app-primary); border: none; }
.btn-soft-primary:hover { background: var(--app-primary); color: #fff; }
[data-bs-theme="dark"] .btn-soft-primary { color: #a5b4fc; }

/* ---------- Tombol aksi di dalam tabel ----------
   Dua tahap perbaikan:

   (1) TINGGI & JARAK seragam. Dulu tiap tombol ditulis dengan padding
       sendiri (btn-sm + me-1 + ms-1 campur aduk, ada yang dibungkus
       <span>, ada yang tidak) sehingga barisnya tidak rata.

   (2) POSISI sejajar antar baris. Tinggi yang seragam saja belum cukup: tiap
       baris punya jumlah tombol berbeda (ada yang 2, ada yang 4). Dengan
       flow biasa, tombol digabung ke kanan sehingga "Tandai Lunas" di
       baris 1 bisa berada di kolom berbeda dari baris 2 - persis
       keluhan "tidak simetris".

       Karena itu kolom Aksi memakai GRID dengan 4 slot tetap. Tiap
       tombol dipaksa masuk slot-nya dengan .act-c1..c4, jadi tombol
       yang disembunyikan (x-show) tetap menyisakan slot kosong - bukan
       membuat tombol lain bergeser. Efeknya: kolom 1 selalu sejajar
       vertikal, kolom 2 selalu sejajar, dan seterusnya.

       Lebar slot dibuat tetap (bukan auto) supaya tabel income dan
       expense - yang isi slotnya berbeda - tetap menghasilkan kolom
       dengan lebar yang sama persis. */
.btn-act {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 5px;
  padding: .3rem .6rem;
  font-size: .78rem; line-height: 1.2;
  min-height: 30px;
  white-space: nowrap; vertical-align: middle;
}
.btn-act svg { flex: 0 0 auto; }
.act-grid {
  display: inline-grid;
  grid-template-columns: 76px 120px 90px 78px;
  gap: 4px;
  align-items: center;
  justify-content: end;
}
/* Varian 5 slot: dipakai menu Penugasan yang punya tombol lebih banyak
   (ACC Lokasi / ACC Selesai / Setujui Ganti / Tolak / Detail / Batal). */
.act-grid-5 {
  grid-template-columns: 92px 92px 112px 62px 78px;
}
/* Aksi RAPIK (menu Penugasan): semua tombol dirangkai rapat dengan
   jarak kecil dan rata kanan. Grid 5 slot dipakai supaya kolom lurus
   vertikal, tapi karena tiap baris jumlah tombolnya beda, tombol
   terlihat jauh berdesakan - jadi penugasan pakai flex yang rapat. */
.act-group {
  display: inline-flex; align-items: center; justify-content: flex-end;
  gap: 4px; flex-wrap: nowrap;
}
.act-group > .btn-act { flex: 0 0 auto; }
/* tombol merebut seluruh lebar slotnya supaya ukurannya seragam */
.act-grid > * { justify-self: stretch; width: 100%; }
.act-c1 { grid-column: 1; }
.act-c2 { grid-column: 2; }
.act-c3 { grid-column: 3; }
.act-c4 { grid-column: 4; }
.act-c5 { grid-column: 5; }

/* ===== PESANAN BARU (di atas tabel Penugasan) =====
   Permintaan owner: pesanan status "Baru" harus terlihat langsung di atas
   tabel, bukan tersembunyi di dalam modal. Karena itu kartu ini diberi
   garis sisi berwarna supaya mata langsung tertuju ke situ lebih dulu
   daripada ke tabel penugasan yang isinya pekerjaan lama. */
.baru-card { border-left: 4px solid var(--app-primary); }
.baru-card .table > :not(caption) > * > * { padding: .45rem .6rem; }
.baru-card tbody tr { cursor: default; }
.baru-card .badge.status { font-weight: 600; }

/* Di layar sempit 4 slot tidak muat; biarkan tabel bergeser
   horizontal (sudah dibungkus .table-responsive) daripada membuat
   tombol terpotong. */
@media (max-width: 575.98px) {
  .act-grid, .act-grid-5 { grid-template-columns: repeat(2, auto); }
  .act-c3, .act-c4, .act-c5 { grid-column: auto; }
}
/* Baris yang tombolnya sedikit tetap rapi: rata kanan, bukan wiggle. */
td.text-end .act-group { margin-left: auto; }

/* ---------- Ikon bantuan (?) ----------
   Semua penjelasan panjang disembunyikan di balik ikon kecil ini supaya
   halaman tidak memanjang. Teksnya tetap ada, hanya tidak langsung
   ditampilkan - dan tidak hilang dari aplikasi.

   .help-wrap  : pembungkus posisi relatif
   .help-dot   : tombol bulat kecil
   .help-panel : kotak teks, muncul saat ikon diklik.
                 position:absolute supaya tidak mendorong elemen lain. */
.help-wrap { position: relative; display: inline-block; }
.help-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; padding: 0;
  border: 1px solid var(--bs-border-color);
  border-radius: 50%;
  background: transparent;
  color: var(--bs-secondary-color);
  font-size: .72rem; font-weight: 700; line-height: 1;
  cursor: pointer;
  vertical-align: middle;
}
.help-dot:hover, .help-dot:focus {
  background: var(--app-primary-soft);
  border-color: var(--app-primary);
  color: var(--app-primary);
}
.help-panel {
  position: absolute;
  z-index: 1050;
  top: calc(100% + 6px);
  left: 0;
  width: max-content;
  max-width: min(420px, 78vw);
  padding: .65rem .8rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 10px;
  background: var(--bs-body-bg);
  box-shadow: 0 10px 28px -12px rgba(0, 0, 0, .35);
  font-size: .8rem;
  line-height: 1.5;
  color: var(--bs-body-color);
  white-space: normal;
  text-align: left;
}
.help-panel.right { left: auto; right: 0; }
/* di layar kecil panel diposisikan penuh agar tidak kepotong */
@media (max-width: 575.98px) {
  .help-panel { position: fixed; left: 12px; right: 12px; top: 72px; max-width: none; width: auto; }
}
/* kunci: Alpine x-show perlu Aturan ini supaya tidak berkedip sebelum siap */
[x-cloak] { display: none !important; }

/* ---------- Forms ---------- */
.form-control, .form-select, .input-group-text {
  border-radius: 10px;
}
.form-label { font-weight: 600; font-size: .85rem; margin-bottom: .35rem; }
.form-control:focus, .form-select:focus {
  border-color: var(--app-primary);
  box-shadow: 0 0 0 .2rem var(--app-primary-soft);
}

/* ---------- Badges status ---------- */
.badge.status { font-weight: 600; letter-spacing: .01em; padding: .42em .7em; border-radius: 7px; }

/* ---------- Filter panel ---------- */
.filter-panel { display: none; }
.filter-panel.show { display: block; }
.filter-input { min-width: 130px; }

/* ---------- Job picker (pilih jenis pekerjaan + harga) ---------- */
/* Area daftar kategori dibatasi tinggi + bisa digulir sendiri.
   Alasannya: tanpa ini 50 kategori bikin halaman setinggi ~3390 px, jadi
   teknisi harus menggulir jauh dan tombol Simpan terdorong ke bawah.
   min-height 190px supaya daftar pendek (5-6 kategori) tetap tampil utuh
   tanpa scrollbar yang tidak perlu. */
.job-list-scroll {
  /* 70vh dipilih supaya daftar pendek (8-10 kategori) tetap muat UTUH
     tanpa scrollbar yang tidak perlu, sementara daftar panjang (30+)
     tetap terkurung di area yang bisa digulir. */
  max-height: min(70vh, 640px);
  min-height: 190px;
  overflow-y: auto;
  overscroll-behavior: contain;   /* tidak memicu scroll halaman induk */
  padding-right: 4px;             /* ruang untuk scrollbar */
  scrollbar-width: thin;
}
.job-list-scroll::-webkit-scrollbar { width: 8px; }
.job-list-scroll::-webkit-scrollbar-thumb {
  background: var(--bs-border-color); border-radius: 8px;
}
.job-list-scroll::-webkit-scrollbar-track { background: transparent; }

.job-pick {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  border: 1px solid var(--bs-border-color); border-radius: 12px; padding: .55rem .7rem;
  background: var(--bs-body-bg);
}
.job-pick.on { border-color: var(--app-primary); background: var(--app-primary-soft); }
.job-pick-price { flex: 0 1 260px; margin-left: auto; }
/* Panel qty + keterangan (untuk 1 penugasan > 1 unit AC) */
.job-pick-extra {
  flex: 1 1 100%; order: 9; margin-top: .35rem;
  padding-top: .5rem; border-top: 1px dashed var(--bs-border-color);
}
@media (max-width: 575.98px) {
  .job-pick-price { flex: 1 1 100%; margin-left: 0; }
}

/* ---------- Combo auto search (modal Buat Penugasan) ---------- */
.ord-combo {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px);
  max-height: 260px; overflow-y: auto;
  z-index: 1055;
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 12px; box-shadow: var(--app-shadow);
  padding: 4px;
}
.ord-combo-item {
  display: block; padding: .45rem .6rem; border: 0; background: transparent;
  border-radius: 9px; color: inherit; cursor: pointer; line-height: 1.3;
}
.ord-combo-item:hover, .ord-combo-item:focus {
  background: var(--app-primary-soft); outline: none;
}
.ord-combo-item + .ord-combo-item { border-top: 1px solid var(--bs-border-color); }
.ord-combo-empty { border-top: 1px solid var(--bs-border-color); }

/* ---------- Timeline ---------- */
.timeline { list-style: none; margin: 0; padding: 0 0 0 .4rem; }
.timeline li { position: relative; padding: 0 0 1rem 1.4rem; border-left: 2px solid var(--bs-border-color); }
.timeline li:last-child { border-left-color: transparent; padding-bottom: .1rem; }
.timeline li::before {
  content: ''; position: absolute; left: -7px; top: 2px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--app-primary); box-shadow: 0 0 0 3px var(--app-primary-soft);
}
.timeline li.muted::before { background: var(--bs-secondary-color); box-shadow: none; }

/* ---------- Foto grid ---------- */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.photo-item {
  position: relative; border-radius: 12px; overflow: hidden;
  aspect-ratio: 1; background: var(--bs-tertiary-bg); cursor: pointer;
  border: 1px solid var(--bs-border-color);
}
.photo-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-item .photo-del {
  position: absolute; top: 6px; right: 6px;
  width: 24px; height: 24px; border-radius: 8px; border: none;
  background: rgba(220, 53, 69, .92); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem; line-height: 1;
}
.photo-item .photo-size {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,.75));
  color: #fff; font-size: .68rem; padding: 12px 8px 5px; text-align: right;
}

/* ---------- GPS live bar (teknisi) ---------- */
.gps-live-bar {
  background: #0d6efd; color: #fff;
  font-size: .8rem; padding: .35rem 1rem;
  display: flex; align-items: center; gap: .5rem; justify-content: center;
}
.pulse-dot {
  width: 9px; height: 9px; border-radius: 50%; background: #4ade80;
  box-shadow: 0 0 0 rgba(74, 222, 128, .6);
  animation: pulseAnim 1.6s infinite;
}
@keyframes pulseAnim {
  0% { box-shadow: 0 0 0 0 rgba(74,222,128,.6); }
  70% { box-shadow: 0 0 0 9px rgba(74,222,128,0); }
  100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); }
}

/* ---------- Busy overlay ---------- */
.app-busy {
  position: fixed; inset: 0; z-index: 3000;
  background: rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center;
}
/* WAJIB: atribut hidden harus mengalahkan display:flex di atas,
   jika tidak overlay ini selalu menutupi layar & memblokir semua klik. */
.app-busy[hidden] { display: none !important; }

/* ---------- Login ---------- */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem; position: relative; overflow: hidden; }
.login-blob {
  position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5;
  background: linear-gradient(120deg, #6366f1, #a855f7);
}
.login-blob.b1 { width: 420px; height: 420px; top: -140px; left: -120px; }
.login-blob.b2 { width: 380px; height: 380px; bottom: -140px; right: -100px; background: linear-gradient(120deg, #22d3ee, #6366f1); }
.login-card {
  width: 100%; max-width: 420px; border-radius: 20px;
  background: var(--bs-body-bg); border: 1px solid var(--bs-border-color);
  box-shadow: 0 24px 70px -20px rgba(16, 24, 40, .35);
}
.login-logo {
  width: 54px; height: 54px; border-radius: 16px;
  background: linear-gradient(120deg, var(--app-primary), var(--app-primary-2));
  color: #fff; display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 24px -8px rgba(79, 70, 229, .55);
}
/* Logo milik user (PNG hasil unggah) tidak boleh diplester dengan
   latar gradien + warna putih bawaan: gambar aslinya jadi tidak
   terbaca. Latar dibuat netral dan gambar dibiarkan apa adanya. */
.login-logo.has-img { background: transparent; box-shadow: 0 10px 24px -10px rgba(16, 24, 40, .28); }
.login-logo-img {
  width: 54px; height: 54px; object-fit: contain;
  border-radius: 16px; background: #fff; padding: 4px;
  box-sizing: border-box;
}

/* ---------- Job cards teknisi ---------- */
.job-card { border-left: 4px solid var(--app-primary); }
.job-card.done { border-left-color: #198754; }
.job-card.wait { border-left-color: var(--bs-secondary-color); }

/* ---------- Misc ---------- */
[x-cloak] { display: none !important; }
.cursor-pointer { cursor: pointer; }
.min-width-0 { min-width: 0; }
.w-md-250 { width: 100%; }
@media (min-width: 768px) { .w-md-250 { width: 250px; } }
.text-xs { font-size: .75rem; }
.mono { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.app-desc { white-space: pre-wrap; }
.navbar .badge.rounded-pill { font-size: .62rem; }
.offcanvas, .modal { --bs-backdrop-zindex: 1500; }
.acc-denied .gps-cross { display: none; }

/* ===== Sidebar menu mobile (slide dari kiri) ===== */
.app-navside { width: 290px !important; max-width: 84vw; --bs-offcanvas-width: 290px; }
.app-navside .offcanvas-header {
  background: linear-gradient(135deg, var(--app-primary), var(--app-primary-2));
  color: #fff; border-bottom: 0;
}
.app-navside .offcanvas-title { color: #fff; }
.app-navside .offcanvas-title .brand-ico { background: rgba(255,255,255,.2); color: #fff; }
.app-navside .btn-close { filter: invert(1) grayscale(1) brightness(2); }
.app-navside .offcanvas-body { display: flex; padding: .75rem; overflow-y: auto; }
.app-navside .nav-link {
  color: var(--bs-body-color); font-weight: 500;
  border-radius: 10px; padding: .6rem .8rem;
  display: flex; align-items: center; gap: .5rem;
}
.app-navside .nav-link:hover { background: var(--bs-tertiary-bg); }
.app-navside .nav-link.active { background: var(--app-primary-soft); color: var(--app-primary); font-weight: 600; }
.app-navside .nav-link .badge { margin-left: auto; }
/* di layar kecil, menu tidak lagi memanjang ke bawah navbar */
.app-navbar .navbar-collapse { display: none !important; }

@media (max-width: 575.98px) {
  .stat-card .stat-val { font-size: 1.3rem; }
  .app-main { padding-top: 1rem !important; }
}

/* print */
@media print {
  .app-navbar, .app-footer, .btn, .toast-container { display: none !important; }
  /* Margin kertas untuk semua halaman yang dicetak (laporan, daftar).
     Tanpa ini konten bisa menempel di tepi dan garis bawah terpotong. */
  @page { size: A4; margin: 12mm; }
  table, tr, .card, .box { break-inside: avoid; page-break-inside: avoid; }
  thead { display: table-header-group; }
}

/* ===== logo aplikasi =====
   .brand-logo dipakai navbar/sidebar; .logo-preview di halaman Pengaturan. */
.brand-logo {
  width: 32px; height: 32px; object-fit: contain;
  border-radius: 8px; flex-shrink: 0; background: transparent;
}
.brand-logo-sm { width: 24px; height: 24px; border-radius: 6px; }

.logo-preview {
  width: 84px; height: 84px; border-radius: 16px;
  border: 1px solid var(--bs-border-color);
  background:
    repeating-conic-gradient(var(--bs-tertiary-bg) 0% 25%, transparent 0% 50%) 50% / 16px 16px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; padding: 6px;
}
.logo-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-placeholder { color: var(--bs-secondary-color); opacity: .6; }

/* logo gelap di sidebar/navbar gelap tetap terlihat */
.app-navside .brand-logo { background: rgba(255,255,255,.9); }

/* ===== pencarian global (navbar) ===== */
.app-search-ico {
  position: absolute; left: .6rem; top: 50%; transform: translateY(-50%);
  color: var(--bs-secondary-color); pointer-events: none;
}
.app-search .form-control { padding-left: 2rem; }
.app-search-panel {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 1080;
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 12px; max-height: 60vh; overflow-y: auto;
  min-width: 280px;
}
.app-search-panel .gsr-item {
  display: flex; gap: .6rem; align-items: flex-start;
  padding: .55rem .7rem; cursor: pointer; text-decoration: none; color: inherit;
  border-bottom: 1px solid var(--bs-border-color);
}
.app-search-panel .gsr-item:last-child { border-bottom: 0; }
.app-search-panel .gsr-item:hover,
.app-search-panel .gsr-item.is-active { background: var(--app-primary-soft); color: var(--app-primary); }
.app-search-panel .gsr-ico { flex-shrink: 0; margin-top: .1rem; opacity: .8; }
.app-search-panel .gsr-title { font-weight: 600; font-size: .875rem; }
.app-search-panel .gsr-sub {
  font-size: .75rem; color: var(--bs-secondary-color);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px;
}
.app-search-panel .gsr-meta {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .02em;
  color: var(--bs-secondary-color); flex-shrink: 0;
}
.app-search-panel .gsr-group {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--bs-secondary-color); background: var(--bs-tertiary-bg);
  padding: .3rem .7rem; position: sticky; top: 0;
}
.app-search-panel .gsr-empty, .app-search-panel .gsr-msg {
  padding: .9rem .7rem; font-size: .8rem; color: var(--bs-secondary-color); text-align: center;
}
.app-search-panel mark { background: rgba(255, 214, 0, .45); color: inherit; padding: 0 1px; border-radius: 2px; }

/* Notifikasi WhatsApp: toast yang bisa diklik untuk membuka wa.me */
.toast-wa-link { color: inherit; text-decoration: underline; font-weight: 600; cursor: pointer; }
.toast-wa-link:hover, .toast-wa-link:focus { color: inherit; opacity: .85; }

/* Dropdown multi-pilih subkategori (form Kategori) */
.subpick { position: relative; }
.subpick > button.form-select { cursor: pointer; }
.subpick-caret {
  display: inline-block; width: .7rem; height: .7rem; margin-top: -.2rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); opacity: .55;
}
.subpick.is-open .subpick-caret { transform: rotate(225deg); margin-top: .2rem; }
.subpick-panel {
  position: absolute; z-index: 1090; left: 0; right: 0; top: calc(100% + 4px);
  padding: .5rem;
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .18);
}
.subpick-list { max-height: 220px; overflow-y: auto; }
.subpick-list label:hover { background: var(--bs-tertiary-bg); border-radius: .25rem; }
.subpick-count { font-size: .68rem; padding: .2rem .45rem; }
.subpick-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.subpick-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .18rem .3rem .18rem .55rem;
  font-size: .78rem;
  background: var(--bs-tertiary-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 999px;
}
.subpick-chip-x {
  border: 0; background: transparent; color: var(--bs-secondary-color);
  font-size: 1rem; line-height: 1; padding: 0 .15rem; cursor: pointer;
}
.subpick-chip-x:hover { color: var(--bs-danger); }