/* ==========================================================================
   OP BOOBLE — UTILITIES
   --------------------------------------------------------------------------
   Helper satu-fungsi untuk menggantikan atribut style="..." di view.
   Prioritaskan utility bawaan Bootstrap 4 bila sudah ada:
     d-none / d-flex, w-25 / w-50 / w-100, m*-0..5, p*-0..5,
     text-center / text-right / text-nowrap / text-truncate,
     text-white / text-danger / text-muted, font-weight-bold, sr-only
   File ini hanya berisi yang TIDAK tersedia di Bootstrap 4.1.

   Prefix: .u-*   (state yang di-toggle JS memakai .is-*)
   Aturan: seperti utility Bootstrap, setiap .u-* memakai !important.
   Utility adalah pengganti style="..." sehingga harus selalu berlaku,
   termasuk atas rule vendor yang lebih spesifik (mis. .card .card-body).
   Di luar file ini (layout, components, pages) !important tetap dihindari.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. State
   -------------------------------------------------------------------------- */

/* Pengganti style="display:none" untuk elemen yang awalnya tersembunyi dan
   nanti ditampilkan jQuery (.show/.toggle/.fadeIn).
   index.php mengubah .is-hidden menjadi status tersembunyi jQuery sebelum
   script halaman berjalan (dan setelah tiap AJAX), sehingga saat ditampilkan
   elemen kembali ke display aslinya dari CSS (flex/grid), bukan "block".
   !important: harus menang atas aturan display komponen sampai dikonversi. */
.is-hidden {
    display: none !important;
}

/* --------------------------------------------------------------------------
   2. Lebar (kolom tabel, input di dalam sel)
   -------------------------------------------------------------------------- */
.u-w-5   { width: 5% !important; }
.u-w-10  { width: 10% !important; }
.u-w-15  { width: 15% !important; }
.u-w-20  { width: 20% !important; }
.u-w-30  { width: 30% !important; }
.u-w-35  { width: 35% !important; }
.u-w-40  { width: 40% !important; }
.u-w-45  { width: 45% !important; }
.u-w-80  { width: 80% !important; }
.u-w-auto { width: auto !important; }

.u-min-w-0 { min-width: 0 !important; }

/* Isi baris penuh di dalam CSS grid (state kosong, pesan error, dll.) */
.u-col-span-full { grid-column: 1 / -1 !important; }

/* --------------------------------------------------------------------------
   3. Tipografi (mengikuti skala token)
   -------------------------------------------------------------------------- */
.u-fs-2xs  { font-size: var(--app-fs-2xs) !important; }
.u-fs-xs   { font-size: var(--app-fs-xs) !important; }
.u-fs-sm   { font-size: var(--app-fs-sm) !important; }
.u-fs-base { font-size: var(--app-fs-base) !important; }
.u-fs-md   { font-size: var(--app-fs-md) !important; }
.u-fs-lg   { font-size: var(--app-fs-lg) !important; }
.u-fs-xl   { font-size: var(--app-fs-xl) !important; }

.u-fw-medium   { font-weight: var(--app-fw-medium) !important; }
.u-fw-semibold { font-weight: var(--app-fw-semibold) !important; }
.u-fw-heavy    { font-weight: var(--app-fw-heavy) !important; }

.u-text-heading { color: var(--app-heading) !important; }
.u-text-soft    { color: var(--app-text-soft) !important; }
.u-text-muted   { color: var(--app-muted) !important; }

.u-text-danger  { color: var(--app-danger) !important; }
.u-text-success { color: var(--app-success-text) !important; }

.u-text-pre-line { white-space: pre-line !important; }
.u-ws-normal     { white-space: normal !important; }
.u-text-break    { overflow-wrap: anywhere !important; word-break: break-word !important; }

/* --------------------------------------------------------------------------
   4. Spacing yang tidak ada di skala Bootstrap (0.25rem kelipatan)
   -------------------------------------------------------------------------- */
.u-p-1  { padding: var(--app-space-1) !important; }
.u-pt-2 { padding-top: var(--app-space-2) !important; }
.u-pt-5 { padding-top: var(--app-space-5) !important; }
.u-mt-1 { margin-top: var(--app-space-1) !important; }
.u-mt-3 { margin-top: var(--app-space-3) !important; }
.u-mb-3 { margin-bottom: var(--app-space-3) !important; }
.u-mb-4 { margin-bottom: var(--app-space-4) !important; }
.u-mb-5 { margin-bottom: var(--app-space-5) !important; }
.u-ml-3 { margin-left: var(--app-space-3) !important; }
.u-mr-1 { margin-right: var(--app-space-1) !important; }
.u-mr-3 { margin-right: var(--app-space-3) !important; }
.u-gap-1 { gap: var(--app-space-1) !important; }
.u-gap-2 { gap: var(--app-space-2) !important; }
.u-gap-3 { gap: var(--app-space-3) !important; }
.u-gap-4 { gap: var(--app-space-4) !important; }

/* --------------------------------------------------------------------------
   5. Border & bentuk
   -------------------------------------------------------------------------- */
.u-borderless    { border: 0 !important; }
.u-rounded-md    { border-radius: var(--app-radius-md) !important; }
.u-rounded-pill  { border-radius: var(--app-radius-pill) !important; }

/* --------------------------------------------------------------------------
   6. Interaksi
   -------------------------------------------------------------------------- */
.u-cursor-pointer { cursor: pointer !important; }
.u-no-select      { user-select: none !important; }