/* =====================================================================
   Wincos Responsive & Fluid Typography
   ---------------------------------------------------------------------
   Tujuan: membuat ukuran font & layout menyesuaikan resolusi layar.
   Template (Pixeleyez) memakai satuan rem, sehingga menyesuaikan
   font-size root akan menskalakan seluruh UI (sidebar, kartu, tabel)
   secara proporsional terhadap resolusi / zoom pengguna.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Fluid root font-size KONTINU (clamp)
   Sebelumnya memakai breakpoint diskret sehingga rentang 768px–1599px
   "datar" di 16px — padahal mayoritas laptop (1366/1440/1536px) ada di
   rentang itu, jadi font tidak pernah menyesuaikan antar-ukuran laptop.
   clamp() membuat root font-size naik-turun mulus mengikuti lebar layar,
   sehingga semua ukuran rem (termasuk dashboard) auto-adjust di laptop.

   Kurva: ~15.5px @1280, ~16px @1440, ~17px @1600, ~18px @1920, 20px @2560+.
   Batas 14px (kecil) s/d 20px (sangat lebar).
   --------------------------------------------------------------------- */
html {
    font-size: clamp(14px, 10.9px + 0.36vw, 20px);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Hormati preferensi pengguna yang mengurangi animasi */
@media (prefers-reduced-motion: reduce) {
    .pe-app-sidebar,
    .pe-app-sidebar *,
    .app-wrapper {
        transition: none !important;
    }
}

/* ---------------------------------------------------------------------
   2. Normalisasi kelas typography lama (Velzon) agar konsisten dgn fs-*
   Beberapa halaman memakai .font-size-XX yang tidak ada di Pixeleyez.
   Dipetakan ke rem agar ikut skala.
   --------------------------------------------------------------------- */
.font-size-11 { font-size: 0.6875rem !important; }
.font-size-12 { font-size: 0.75rem !important; }
.font-size-13 { font-size: 0.8125rem !important; }
.font-size-14 { font-size: 0.875rem !important; }
.font-size-15 { font-size: 0.9375rem !important; }
.font-size-16 { font-size: 1rem !important; }
.font-size-18 { font-size: 1.125rem !important; }
.font-size-20 { font-size: 1.25rem !important; }
.font-size-22 { font-size: 1.375rem !important; }
.font-size-24 { font-size: 1.5rem !important; }

/* ---------------------------------------------------------------------
   3. Strategi tabel responsif
   Pastikan tabel lebar bisa di-scroll horizontal dengan rapi di layar
   kecil alih-alih meluber keluar kartu.
   --------------------------------------------------------------------- */
.table-responsive,
.dataTables_wrapper .dataTables_scrollBody {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
}

/* Cegah konten halaman mendorong lebar viewport di layar kecil */
@media (max-width: 767.98px) {
    .app-wrapper > .container-fluid {
        overflow-x: hidden;
    }
}

/* Scrollbar horizontal tabel yang lebih terlihat */
.table-responsive::-webkit-scrollbar,
.dataTables_wrapper .dataTables_scrollBody::-webkit-scrollbar {
    height: 10px;
}

.table-responsive::-webkit-scrollbar-thumb,
.dataTables_wrapper .dataTables_scrollBody::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.5);
    border-radius: 6px;
}