/* velzon-compat.css — SHIM migrasi tema backend ra-admin → Velzon.
 *
 * Berisi HANYA aturan yang dibutuhkan oleh kelas lama (ra-admin) yang dipakai
 * view backend tapi tidak ada padanannya di Velzon/Bootstrap. Digenerate dari
 * public/backend/assets/css/style.css + responsive.css (lihat
 * agents/bin/velzon-class-audit.js utk audit kelas, dan catatan di agents/MEMORY.md).
 *
 * Tujuan: halaman lama bisa pindah ke shell Velzon tanpa memuat style.css (1 MB).
 * Kalau sebuah halaman sudah dikonversi ke kelas Velzon/Bootstrap asli, aturan
 * shim yang tak terpakai boleh dihapus dari file ini.
 */

/* Alias variabel tema lama (ra-admin) → nilai palet Velzon (RGB triplet),
   supaya aturan shim di bawah (mis. `rgba(var(--primary), .1)`) tetap valid. */
:root {
  --primary: 64, 81, 137;
  --secondary: 135, 138, 145;
  --success: 10, 179, 156;
  --info: 10, 179, 156;
  --warning: 247, 184, 75;
  --danger: 240, 101, 72;
  --dark: 33, 37, 41;
  --light: 242, 246, 250;
}
.f-s-12 { font-size: 12px !important; }
.f-s-13 { font-size: 13px !important; }
.f-s-16 { font-size: 16px !important; }
.w-80 { width: 80px !important; }
.w-150 { width: 150px !important; }
.bg-light-primary { background-color: rgba(var(--primary), 0.1) !important;
  color: rgba(var(--primary), 1) !important; }
.bg-light-info { background-color: rgba(var(--info), 0.1) !important;
  color: rgba(var(--info), 1) !important; }
.d-flex-center { display: flex;
  align-items: center;
  justify-content: center; }
.f-w-600 { font-weight: 600 !important; }
.f-w-700 { font-weight: 700 !important; }
.app-scroll::-webkit-scrollbar { position: absolute;
  right: 0;
  width: 4px;
  height: 4px;
  background-color: rgba(var(--secondary), 0.1); }
body[style="overflow: hidden; padding-right: 17px;"] .app-wrapper nav.horizontal-sidebar ~ .app-content { z-index: 1003; }
.advance-drag-drop-table.table-bottom-border > tbody > tr td { color: rgba(var(--secondary));
  font-size: 14px; }
.main-title { font-weight: 600;
  text-transform: capitalize; }
.table-lg > :not(caption) > * > * { padding: 0.7rem 0.7rem !important;
  font-size: 110%; }
.app-form .form-select,
.app-form .form-control { color: rgba(var(--secondary), 1);
  font-size: 14px;
  padding: 0.8rem 0.75rem;
  border: 1px solid rgba(var(--secondary), 0.4);
  text-overflow: ellipsis; }
.card-header-title h5 { color: rgba(var(--dark), 0.8) !important; }
.chat-tab-wrapper .tabs .tab-link { width: 100%;
  text-align: center;
  font-size: 14px;
  list-style: none;
  padding: 16px 0px;
  font-weight: 500;
  color: rgba(var(--dark), 0.75);
  cursor: pointer;
  border-bottom: solid 2px transparent;
  letter-spacing: 1px;
  transition: border 0.3s ease-in-out; }
.app-line-breadcrumbs li { display: inline-block; }

/* Tombol aksi kolom "Action" pada tabel data (ikon saja, 28x28, tidak wrap).
   Dipakai tabel customer; halaman Devices memakai varian scoped `.dev-actions`. */
.tbl-actions { display: flex; flex-wrap: nowrap; gap: 0.25rem; }
.tbl-actions .btn {
  width: 28px;
  height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tbl-actions .btn i { font-size: 15px; line-height: 1; }

/* ⚠️ Anti "menu bergeser": saat panel tab ditukar, tinggi halaman ikut berubah.
   Browser (Chrome scroll-anchoring) lalu mengoreksi posisi scroll sendiri — efeknya
   menu kiri terlihat naik/turun padahal panel kanan tetap. Matikan anchoring pada
   area panel supaya posisi scroll tetap seperti yang user pilih. */
.content-wrapper,
.content-wrapper .tab-content { overflow-anchor: none; }
.document_content .header-title { margin-bottom: 1.5rem; }

/* Dropdown action di dalam tabel responsif tidak boleh terpotong:
   `.table-responsive` memakai overflow-x:auto → menu dropdown ikut ter-clip.
   Hanya di layar >=992px (admin desktop) supaya scroll horizontal di mobile
   tetap berfungsi. Tandai wrapper-nya dengan class `table-dropdown-safe`. */
@media (min-width: 992px) {
  .table-responsive.table-dropdown-safe { overflow: visible; }
}

/* Judul di dalam blok berwarna/gelap (mis. hero kartu bergradien ungu) WAJIB ikut
   warna teks induknya. Velzon mewarnai h1..h6 lewat *element selector*
   (`h5 { color: var(--vz-heading-color) }`), sehingga class `text-white` pada kartu
   tidak menurun ke judul → judul jadi abu gelap di atas latar gelap (tidak terbaca).
   Selector di bawah (0,1,1) menang atas element selector Velzon (0,0,1). */
.text-white h1, .text-white h2, .text-white h3, .text-white h4, .text-white h5, .text-white h6,
.text-white .h1, .text-white .h2, .text-white .h3, .text-white .h4, .text-white .h5, .text-white .h6,
.outbox-hero h1, .outbox-hero h2, .outbox-hero h3, .outbox-hero h4, .outbox-hero h5, .outbox-hero h6 {
  color: inherit;
}