/* ==========================================================================
   PT WBS — "Vitalis Ledger" design system (light mode only)
   Source of truth: Downloads\Aset Website WBS\stitch_wbs_management_system\
                    vitalis_ledger\DESIGN.md
   Bleached Slate surfaces, maroon #8B1A1A anchor, Inter, 8/12px radius.
   ========================================================================== */

:root {
    --wbs-maroon: #8B1A1A;
    --wbs-maroon-deep: #690008;
    --wbs-maroon-dark: #6B1414;
    --wbs-maroon-light: #FEF2F2;
    --wbs-bg: #f7f9fb;
    --wbs-border: #E2E8F0;
    --wbs-muted: #64748B;
    --wbs-text: #191c1e;
    --wbs-zebra: #F1F5F9;
}

/* ---------- Base: clinical light surfaces, Inter ---------- */
.fi-body {
    background-color: var(--wbs-bg) !important;
    color: var(--wbs-text);
    font-family: 'Inter', 'Segoe UI', sans-serif;
}

.fi-main {
    max-width: 1440px; /* spec: cap report line lengths */
}

/* Page titles: h1 24px/700 */
.fi-header-heading {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: var(--wbs-text);
}

/* ---------- Sidebar: fixed white, active pill primary-light ---------- */
.fi-sidebar,
.fi-sidebar-header,
.fi-topbar > nav {
    background-color: #ffffff !important;
    border-color: var(--wbs-border) !important;
}

.fi-sidebar-nav { padding-top: .5rem; }

/* Constant 3px left border keeps active & inactive items perfectly aligned */
.fi-sidebar-item > a,
.fi-sidebar-item-btn {
    border-left: 3px solid transparent;
    border-radius: 0 10px 10px 0;
    margin: 1px 0;
}

.fi-sidebar-item-active > .fi-sidebar-item-btn,
.fi-sidebar-item-active > a {
    border-left-color: var(--wbs-maroon);
    background-color: var(--wbs-maroon-light) !important;
}

.fi-sidebar-item-active .fi-sidebar-item-label,
.fi-sidebar-item-active .fi-icon {
    color: var(--wbs-maroon) !important;
    font-weight: 600;
}

/* label-caps: 12px/600/0.05em */
.fi-sidebar-group-label {
    color: var(--wbs-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.fi-logo { color: var(--wbs-maroon); font-weight: 800; }

/* ---------- Cards & sections: 12px radius, white, subtle border ---------- */
.fi-section {
    border-radius: 12px;
    border: 1px solid var(--wbs-border);
    background: #ffffff;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1);
}

.fi-section-header-heading {
    font-size: 20px;
    font-weight: 600;
    color: var(--wbs-text);
}

/* ---------- KPI stat cards: display-kpi 32px/700/-0.02em + tinted gradient ---------- */
.fi-wi-stats-overview { gap: 1rem; }

.fi-wi-stats-overview-stat {
    border-radius: 12px;
    border: 1px solid var(--wbs-border);
    background: #ffffff;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1);
    position: relative;
    overflow: hidden;
    transition: box-shadow .15s ease, transform .15s ease;
}

.fi-wi-stats-overview-stat:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, .10);
    transform: translateY(-1px);
}

.fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-label {
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: 12px;
    font-weight: 600;
    color: var(--wbs-muted);
}

.fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-value {
    /* display-kpi 32px, fluid. Batas bawah 15px supaya rupiah panjang
       (mis. Rp 208.684.013) tetap muat UTUH tanpa dipotong. */
    font-size: clamp(15px, 1.4vw + 8px, 32px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--wbs-text);
    overflow-wrap: anywhere;
}

/* Grid children may never force the row wider than the track */
.fi-wi-stats-overview-stat,
.fi-wi-stats-overview > * {
    min-width: 0;
}

.wbs-stat-info { border-color: #bfdbfe; background: linear-gradient(215deg, #eff6ff 0%, #ffffff 42%); }
.wbs-stat-info .fi-wi-stats-overview-stat-label { color: #2563EB; }

.wbs-stat-success { border-color: #bbf7d0; background: linear-gradient(215deg, #f0fdf4 0%, #ffffff 42%); }
.wbs-stat-success .fi-wi-stats-overview-stat-label { color: #16A34A; }

.wbs-stat-warning { border-color: #fde68a; background: linear-gradient(215deg, #fffbeb 0%, #ffffff 42%); }
.wbs-stat-warning .fi-wi-stats-overview-stat-label { color: #D97706; }

.wbs-stat-danger { border-color: #fecaca; background: linear-gradient(215deg, #fef2f2 0%, #ffffff 42%); }
.wbs-stat-danger .fi-wi-stats-overview-stat-label { color: #DC2626; }

.wbs-stat-primary { border-color: #f5c9c9; background: linear-gradient(215deg, #FEF2F2 0%, #ffffff 42%); }
.wbs-stat-primary .fi-wi-stats-overview-stat-label { color: var(--wbs-maroon); }

.wbs-stat-gold {
    border-color: var(--wbs-maroon-dark);
    background: linear-gradient(135deg, var(--wbs-maroon) 0%, var(--wbs-maroon-deep) 100%);
}
.wbs-stat-gold .fi-wi-stats-overview-stat-value { color: #D4A574 !important; }
.wbs-stat-gold .fi-wi-stats-overview-stat-label { color: var(--wbs-maroon-light) !important; }
.wbs-stat-gold .fi-wi-stats-overview-stat-description { color: var(--wbs-maroon-light) !important; }
.wbs-stat-gold .fi-icon { color: #D4A574 !important; }

/* ---------- Tables: sticky-look header #F8FAFC, zebra #F1F5F9, 13px body ---------- */
.fi-ta-ctn {
    border-radius: 12px;
    border: 1px solid var(--wbs-border);
    background: #ffffff;
}

.fi-ta-header-cell {
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--wbs-muted) !important;
    background: #F8FAFC;
    border-bottom: 1px solid var(--wbs-border);
}

.fi-ta-table { font-size: 13px; }

.fi-ta-row:nth-child(even) { background-color: var(--wbs-zebra); }
.fi-ta-row:hover { background-color: var(--wbs-maroon-light) !important; }

/* Status pills: full radius per spec */
.fi-badge { border-radius: 9999px; font-weight: 600; }

/* ---------- Buttons & inputs: 8px radius ---------- */
.fi-btn { border-radius: 8px; font-weight: 600; }

.fi-input-wrp,
.fi-select-input,
.fi-input {
    border-radius: 8px;
}

/* ---------- Report-page filter controls (Buku Besar, Laba Rugi) ---------- */
.wbs-input {
    background: #ffffff;
    border: 1px solid var(--wbs-border);
    border-radius: 8px;
    padding: .5rem .75rem;
    font-size: 14px;
    color: var(--wbs-text);
    min-width: 0;
    max-width: 100%;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.wbs-input:focus {
    outline: none;
    border-color: var(--wbs-maroon);
    box-shadow: 0 0 0 3px rgba(139, 26, 26, .12);
}

.wbs-filter-bar {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: flex-end;
}

.wbs-filter-bar > div { min-width: 0; }

/* ==========================================================================
   POLISH GLOBAL FORM & TIPOGRAFI (berlaku semua halaman & semua akun)
   ========================================================================== */

/* Render font lebih halus & tajam */
.fi-body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Label field: tebal, jelas, warna gelap, ada napas */
.fi-fo-field-wrp-label,
.fi-fo-field-wrp-label > *,
label.fi-fo-field-wrp-label {
    font-weight: 600 !important;
    font-size: .82rem !important;
    color: #334155 !important;
    line-height: 1.3;
}

/* Teks bantuan: kecil, abu, tidak terpotong */
.fi-fo-field-wrp-helper-text,
.fi-fo-field-wrp-hint {
    font-size: .72rem;
    color: var(--wbs-muted);
    white-space: normal;
    line-height: 1.35;
}

/* Jarak vertikal antar label-input-helper konsisten */
.fi-fo-field-wrp { row-gap: .35rem; }

/* Input & select: seragam, nyaman, fokus maroon */
.fi-input,
.fi-select-input,
.fi-input-wrp input,
.fi-input-wrp {
    font-size: .9rem;
}
.fi-input-wrp,
.fi-select-input-wrp {
    border-radius: 8px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.fi-input-wrp:focus-within,
.fi-select-input-wrp:focus-within {
    border-color: var(--wbs-maroon) !important;
    box-shadow: 0 0 0 3px rgba(139, 26, 26, .10) !important;
}

/* Repeater: tiap item jadi kartu jelas dengan jarak */
.fi-fo-repeater-item {
    border: 1px solid var(--wbs-border) !important;
    border-radius: 12px !important;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
    margin-bottom: .9rem;
}
.fi-fo-repeater-item-header {
    background: #F8FAFC;
    border-bottom: 1px solid var(--wbs-border);
    border-radius: 12px 12px 0 0;
}
.fi-fo-repeater-item-header-label,
.fi-fo-repeater-item-label {
    font-weight: 700 !important;
    color: #1E293B !important;
    white-space: normal !important;
}
.fi-fo-repeater-item-content { padding: 1rem; }

/* Judul section: tegas */
.fi-section-header-heading { font-weight: 700; color: #1E293B; }
.fi-section-header-description { color: var(--wbs-muted); font-size: .8rem; }

/* Badge/pill status: rapi */
.fi-badge { font-weight: 600; }

/* Tombol: jelas, tidak gepeng */
.fi-btn { font-weight: 600; letter-spacing: .01em; }

/* ==========================================================================
   FASE 1 — PERBAIKAN BUG KRITIS
   ========================================================================== */

/* --- 1.1 ANTI-GHOSTING: setiap kontainer utama wajib background solid --------
   Penyebab "tembus pandang": .fi-main & wrapper konten transparan, sehingga
   apa pun di lapisan bawah ikut terlihat. Diberi latar solid + stacking context
   sendiri supaya tidak ada sisa/tembusan antar halaman.                       */
.fi-main,
.fi-page,
.fi-panel,
.fi-body > div {
    background-color: var(--wbs-bg);
    position: relative;
    isolation: isolate;      /* stacking context sendiri */
}

.fi-main { z-index: 1; }

/* Kartu/section & tabel wajib buram, tidak boleh transparan */
.fi-section,
.fi-ta-ctn,
.fi-wi-stats-overview-stat,
.fi-fo-repeater-item,
.fi-modal-window,
.fi-dropdown-panel {
    background-color: #ffffff;
    opacity: 1;
}

/* --- 1.4 MODAL (termasuk Profil): backdrop + latar solid + z-index benar --- */
.fi-modal {
    z-index: 60;
}
.fi-modal-close-overlay,
.fi-modal::before {
    background-color: rgba(15, 23, 42, .55);   /* backdrop gelap transparan */
    backdrop-filter: blur(2px);
}
.fi-modal-window {
    background-color: #ffffff !important;
    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, .35);
    border: 1px solid var(--wbs-border);
    position: relative;
    z-index: 61;
}

/* --- 1.3 SIDEBAR MOBILE: backdrop + latar solid + di atas konten ---------- */
@media (max-width: 1023px) {
    .fi-sidebar {
        z-index: 50 !important;
        background-color: #ffffff !important;
        box-shadow: 4px 0 24px rgba(0, 0, 0, .18);
    }
    /* backdrop gelap saat drawer terbuka */
    .fi-sidebar-close-overlay {
        background-color: rgba(15, 23, 42, .5) !important;
        z-index: 49 !important;
        backdrop-filter: blur(1px);
    }
}

/* ---------- SAFETY NET RESPONSIVE (semua halaman) ---------- */
/* Halaman tidak pernah geser menyamping.
   Catatan: overflow-x hanya di body (bukan html) supaya position:sticky
   pada sidebar & header tabel tetap berfungsi.                              */
body, .fi-body { max-width: 100%; overflow-x: hidden; }
/* Konten utama beri padding nyaman di layar kecil */
@media (max-width: 640px) {
    .fi-main { padding-left: .85rem !important; padding-right: .85rem !important; }
    .fi-section-content { padding: .9rem !important; }
    /* Input full width di HP */
    .fi-input-wrp, .fi-select-input-wrp { width: 100%; }
}
/* Tabel lebar: selalu bisa digulir di dalam wadahnya, tak mendorong halaman */
.fi-ta-ctn { overflow-x: auto; }

/* ---------- Anti teks terpotong (form penjualan & tabel) ---------- */
/* Label & helperText form tidak dipotong */
.fi-fo-field-wrp-label, .fi-fo-field-wrp-hint, .fi-fo-field-wrp .fi-fo-field-wrp-helper-text {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}
/* Repeater item: judul (nama produk) boleh wrap penuh */
.fi-fo-repeater-item-header-label, .fi-fo-repeater-item-label {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: break-word;
}
/* Select yang menampilkan nama panjang tidak terpotong di form */
.fi-fo-repeater .fi-fo-field-wrp { min-width: 0; }
/* Isi tabel: izinkan wrap untuk kolom nama panjang (tetap ada scroll x utk tabel lebar) */
.fi-ta-cell .fi-ta-text-item-label { white-space: normal; }

/* Stat icons follow their variant color */
.wbs-stat-info .fi-icon { color: #2563EB; }
.wbs-stat-success .fi-icon { color: #16A34A; }
.wbs-stat-warning .fi-icon { color: #D97706; }
.wbs-stat-danger .fi-icon { color: #DC2626; }
.wbs-stat-primary .fi-icon { color: var(--wbs-maroon); }

/* ---------- Login (mockup: Login desktop) ---------- */
.fi-simple-layout {
    background: linear-gradient(160deg, #F8FAFC 0%, #FEF2F2 100%);
}

.fi-simple-main {
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1);
    border: 1px solid var(--wbs-border);
}

.wbs-login-subtitle {
    text-align: center;
    color: var(--wbs-muted);
    font-size: .85rem;
    margin-top: -0.4rem;
}

.wbs-login-footer {
    text-align: center;
    color: #94a3b8;
    font-size: .72rem;
    letter-spacing: .04em;
    margin-top: 1.25rem;
}

/* ==========================================================================
   FASE 2 — RESPONSIF PENUH (360 / 375 / 768 / 1024 / 1440)
   ========================================================================== */

/* --- 2.7 Tidak ada scroll horizontal tak disengaja ------------------------ */
img, svg, video, canvas { max-width: 100%; height: auto; }
.fi-main, .fi-section, .fi-page { max-width: 100%; }
.fi-section, .fi-fo-field-wrp, .fi-wi-stats-overview-stat { min-width: 0; }

/* --- 2.1 Tabel ≥768px: indikator bahwa tabel masih bisa digeser ----------- */
@media (min-width: 768px) {
    .fi-ta-ctn { position: relative; }
    .fi-ta-ctn::after {
        content: '';
        position: absolute;
        top: 0; right: 0; bottom: 0;
        width: 22px;
        pointer-events: none;
        background: linear-gradient(to left, rgba(0, 0, 0, .06), transparent);
        opacity: 0;
        transition: opacity .2s ease;
        z-index: 2;
    }
    .fi-ta-ctn:hover::after { opacity: 1; }
}

/* --- 2.8 Sidebar desktop nyaman di 1024px -------------------------------- */
@media (min-width: 1024px) and (max-width: 1279px) {
    .fi-sidebar-item-label { font-size: .85rem; }
}

/* --- 2.5 KPI: angka WAJIB tampil utuh -----------------------------------
   Sebelumnya nilai dipotong "Rp 208.684.…" karena memakai text-overflow:
   ellipsis. Angka uang tidak boleh terpotong. Sekarang ukuran huruf mengecil
   otomatis mengikuti lebar kartu, dan angka boleh turun baris bila perlu. */
.fi-wi-stats-overview-stat-value {
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
    max-width: 100%;
}

/* Kartu KPI ikut memanjang mengikuti isi, bukan memotongnya */
.fi-wi-stats-overview-stat {
    min-width: 0;
    height: auto;
}
.fi-wi-stats-overview-stat-label,
.fi-wi-stats-overview-stat-description {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* ==========================================================================
   FASE 3 — KONSISTENSI UX
   ========================================================================== */

/* --- 3.3 Badge angka pada ikon filter disembunyikan bila bernilai 0 ------- */
.fi-badge:not(.fi-color-custom):empty { display: none; }
.fi-ta-filters-trigger .fi-badge { min-width: 1.25rem; text-align: center; }

/* --- 3.4 Badge status konsisten bentuk & ukuran di semua halaman ---------- */
.fi-badge {
    border-radius: 9999px;
    font-weight: 600;
    font-size: .72rem;
    letter-spacing: .01em;
    padding: .2rem .6rem;
    white-space: nowrap;
}

/* Angka uang & tanggal: rata kanan + angka sejajar */
.fi-ta-cell [class*="text-end"],
td.fi-ta-cell-money { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   REVISI LAYOUT — angka utuh & tabel tidak bertabrakan
   ========================================================================== */

/* --- P1: nilai uang/angka di TABEL tidak boleh dipotong ------------------ */
@media (min-width: 641px) {
    .fi-ta-cell .fi-ta-text-item-label {
        overflow: visible;
        text-overflow: clip;
    }
    /* sel angka: utuh, tidak terpotong, tidak terpepet */
    td.fi-ta-cell .fi-ta-text-item-label {
        overflow-wrap: anywhere;
    }
}

/* --- P1: nilai di halaman laporan & ringkasan total form ----------------- */
.fi-in-entry-value,
.fi-fo-placeholder,
.fi-ta-summary-cell {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
    font-variant-numeric: tabular-nums;
}

/* --- P2a: kolom pertama tidak terpotong saat tabel digulir --------------- */
@media (min-width: 641px) {
    .fi-ta-table th:first-child,
    .fi-ta-table td:first-child {
        position: sticky;
        left: 0;
        z-index: 3;
        background: #ffffff;
    }
    .fi-ta-table thead th:first-child { z-index: 4; background: var(--wbs-thead-bg, #F8FAFC); }
    /* garis pemisah supaya jelas kolom ini menempel saat digulir */
    .fi-ta-table th:first-child::after,
    .fi-ta-table td:first-child::after {
        content: '';
        position: absolute;
        top: 0; right: 0; bottom: 0;
        width: 1px;
        background: var(--wbs-border);
    }
    /* baris zebra tetap terlihat pada kolom sticky */
    .fi-ta-row:nth-child(even) td:first-child { background: #F8FAFC; }
}

/* --- P2a: tombol aksi membungkus rapi, tidak menimpa kolom Umur ---------- */
.fi-ta-actions {
    flex-wrap: wrap;
    gap: .35rem;
    justify-content: flex-end;
    row-gap: .3rem;
}
.fi-ta-actions .fi-btn,
.fi-ta-actions .fi-ac-btn-action { white-space: nowrap; }
/* kolom aksi diberi ruang sendiri agar tidak menekan kolom lain */
.fi-ta-table td:last-child,
.fi-ta-table th:last-child { min-width: 12rem; }

/* ==========================================================================
   FASE 4 — POLISH VISUAL
   ========================================================================== */

/* --- 4.2 Hierarki tombol: primary / secondary / danger ------------------- */
.fi-btn {
    transition: background-color .18s ease, border-color .18s ease,
                box-shadow .18s ease, transform .12s ease;
}
.fi-btn:hover { filter: brightness(.96); }
.fi-btn:active { transform: translateY(1px); }
.fi-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(139, 26, 26, .25);
}
/* tombol utama: kontras tinggi */
.fi-btn.fi-color-primary,
.fi-ac-btn-action.fi-color-primary {
    background-color: var(--wbs-maroon);
    color: #ffffff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
}
.fi-btn.fi-color-primary:hover { background-color: var(--wbs-maroon-dark); }
/* tombol sekunder: outline */
.fi-btn.fi-color-gray {
    background-color: #ffffff;
    border: 1px solid var(--wbs-border);
    color: var(--wbs-text);
}
.fi-btn.fi-color-gray:hover { background-color: #f8fafc; }

/* --- 4.3 Radius, shadow, ritme spasi 8px -------------------------------- */
.fi-section, .fi-ta-ctn, .fi-modal-window { border-radius: 12px; }
.fi-btn, .fi-input-wrp, .fi-select-input-wrp, .fi-badge-sm { border-radius: 8px; }
.fi-section + .fi-section { margin-top: 1rem; }         /* 8px rhythm (2x) */
.fi-section-content > * + * { margin-top: .5rem; }

/* --- 4.4 Micro-interaction: transisi halus + baris tabel responsif ------- */
.fi-ta-row { transition: background-color .15s ease; }
.fi-sidebar-item > a, .fi-sidebar-item-btn { transition: background-color .15s ease, border-color .15s ease; }
.fi-wi-stats-overview-stat { transition: box-shadow .18s ease, transform .18s ease; }

/* skeleton loading saat Livewire memuat data */
[wire\:loading] { transition: opacity .15s ease; }
.fi-ta-ctn[wire\:loading\.class~="opacity-50"] { opacity: .5; }

/* CATATAN MASALAH TERBUKA — drawer sidebar tidak terbuka di layar < 1024px.
   Filament v4.11.8 memasang class .fi-sidebar-open dengan benar, tetapi elemen
   tetap pada translate:-100%. Sudah dicoba: aturan CSS biasa, dengan !important,
   dan inline style priority important — ketiganya kalah, jadi penyebabnya bukan
   di layer presentasi (kemungkinan animasi/keyframe internal Filament).
   Sudah dipastikan BUKAN akibat file ini: gejalanya sama persis ketika
   wbs-theme.css dinonaktifkan. Navigasi di HP tetap aman lewat bottom nav.
   Perlu ditindaklanjuti terpisah (kandidat: upgrade/patch Filament). */

/* Hormati preferensi pengguna yang tidak ingin animasi */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
}

/* ==========================================================================
   MOBILE — bottom nav 64px (FAB dihapus pada Fase 2.2)
   ========================================================================== */
.wbs-bottom-nav { display: none; }

@media (max-width: 767px) {
    .fi-body .fi-main { padding-bottom: 86px !important; }

    .fi-wi-stats-overview {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: .75rem;
    }

    /* display-kpi-mobile: max 28px, shrinks for long rupiah values in half-width cards */
    .fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-value {
        font-size: clamp(15px, 4.6vw, 28px);
    }

    /* Tighter card padding so numbers get room */
    .fi-wi-stats-overview-stat {
        padding: .8rem .9rem;
    }

    .wbs-bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 40;
        background: #ffffff;
        border-top: 1px solid var(--wbs-border);
        box-shadow: 0 -4px 12px rgba(0, 0, 0, .06);
        height: 64px;
        justify-content: space-around;
        align-items: stretch;
        padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    }

    .wbs-bottom-nav a {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        flex: 1;
        color: var(--wbs-muted);
        font-size: .68rem;
        font-weight: 600;
        text-decoration: none;
        border-radius: 12px;
        margin: 0 2px;
    }

    .wbs-bottom-nav a svg { width: 22px; height: 22px; }

    .wbs-bottom-nav a.active {
        color: var(--wbs-maroon);
        background: var(--wbs-maroon-light);
    }

    /* --- 2.3 Konten tidak tertutup bottom nav (termasuk safe-area iPhone) --- */
    .fi-body .fi-main {
        padding-bottom: calc(84px + env(safe-area-inset-bottom)) !important;
    }

    /* --- 2.4 Topbar mobile: logo utuh, search jadi ikon yang mengembang ---- */
    .fi-topbar .fi-logo { max-width: 46vw; overflow: hidden; }
    .fi-topbar .fi-logo img { max-height: 34px; width: auto; }
    /* kolom cari mengecil jadi ikon, melebar saat difokuskan */
    .fi-global-search-field,
    .fi-global-search .fi-input-wrp {
        width: 44px;
        transition: width .25s ease;
        overflow: hidden;
    }
    .fi-global-search-field:focus-within,
    .fi-global-search .fi-input-wrp:focus-within {
        width: min(70vw, 320px);
    }

    /* --- 2.6 Tombol simpan mudah dijangkau, tidak tertutup bottom nav ------ */
    .fi-form-actions {
        position: sticky;
        bottom: calc(72px + env(safe-area-inset-bottom));
        background: #ffffff;
        padding: .75rem;
        margin-inline: -.75rem;
        border-top: 1px solid var(--wbs-border);
        border-radius: 12px 12px 0 0;
        box-shadow: 0 -4px 14px rgba(0, 0, 0, .07);
        z-index: 20;
    }

    /* --- 2.1 TABEL → KARTU di layar kecil --------------------------------- */
    .fi-ta-table thead { display: none; }
    .fi-ta-table,
    .fi-ta-table tbody,
    .fi-ta-table tr.fi-ta-row,
    .fi-ta-table tr.fi-ta-row > td {
        display: block;
        width: 100%;
    }
    .fi-ta-table tr.fi-ta-row {
        border: 1px solid var(--wbs-border) !important;
        border-radius: 12px;
        margin-bottom: .75rem;
        padding: .85rem 1rem;
        background: #ffffff !important;      /* zebra dimatikan di mode kartu */
        box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
    }
    .fi-ta-table tr.fi-ta-row > td {
        border: none !important;
        padding: .18rem 0 !important;
    }
    /* info utama: sel pertama besar & tebal */
    .fi-ta-table tr.fi-ta-row > td:first-child {
        font-size: 1rem;
        font-weight: 700;
        color: var(--wbs-text);
        padding-bottom: .35rem !important;
    }
    /* aksi jadi tombol jelas, tidak tertimpa */
    .fi-ta-actions {
        justify-content: flex-start !important;
        flex-wrap: wrap;
        gap: .5rem;
        margin-top: .65rem;
        padding-top: .6rem;
        border-top: 1px dashed var(--wbs-border);
    }
    .fi-ta-actions a,
    .fi-ta-actions button {
        border: 1px solid var(--wbs-border);
        border-radius: 8px;
        padding: .45rem .8rem;
        background: #f8fafc;
        font-weight: 600;
    }
    /* badge status tetap berwarna & rapat */
    .fi-ta-table tr.fi-ta-row .fi-badge { display: inline-flex; }
}