/* /Component/Layout/MainLayout.razor.rz.scp.css */
/* Soft, tilted YAKKAP watermark yang mengisi ruang kosong antara blok merek
   dan tab folder di kanan, agar header tidak terlihat gundul.
   The PNG is already faded (~16% opacity) and rotated; CSS just tiles it.

   Dipindahkan dari MainLayout2.razor.css (APY) / MainLayout.razor.css (PCI) -
   keduanya identik. Rule serupa pada MainLayout.razor.css milik UAR dan MDT
   (98 baris, kelas .page/.sidebar/.top-row/#blazor-error-ui) TIDAK dipindahkan
   karena menargetkan kelas yang tidak pernah muncul di markup Metronic manapun
   - sisa boilerplate scaffold Blazor default yang sudah mati sebelum merge. */
.header-watermark[b-p6au0dkwwi] {
    background-image: url('/assets/media/app/logo-watermark.png');
    background-repeat: repeat-x;
    background-position: left center;
    background-size: auto 82%;
    min-width: 0; /* allow the grow item to flex without overflowing */
    pointer-events: none; /* purely decorative - never intercept clicks */
}

/* =====================================================================
   BLOK AKSI DI KANAN HEADER (search / notifikasi / profil)

   Dulu blok ini digambar sebagai "tab folder": panel putih dengan sudut
   atas membulat, border, dan lekukan cekung (radial-gradient) di kaki
   kirinya, sehingga header + kartu konten terbaca sebagai satu siluet map.
   Bentuk itu DILEPAS atas permintaan; sekarang header kembali rata dan
   ikon-ikonnya berdiri langsung di atas latar abu-abu header.

   Yang ikut dilepas bersamanya, supaya tidak meninggalkan sisa yang aneh:
     - `--tab-fillet` beserta ::before lekukannya;
     - `margin-bottom: -1px` + `padding-bottom: 1px` - trik itu hanya ada
       untuk menutup garis atas kartu konten dengan latar putih tab. Tanpa
       tab, ia justru menggeser ikon 1px dari tengah;
     - override sudut kanan-atas #content_card. Sudut itu dipersegi HANYA
       karena lengkungnya terbaca sebagai takik abu-abu di bawah tab. Tanpa
       tab, `rounded-xl` bawaan Tailwind dibiarkan utuh di keempat sudut.

   Perataan vertikal ikon TIDAK diatur di sini. Pembungkusnya sudah dihapus
   dari markup dan perataannya kini datang dari `items-stretch` milik
   #header_container plus `items-center` pada baris ikon - dua utility yang
   sudah pasti ada di bundle. Aturan CSS isolation untuk hal sepenting
   perataan terbukti berisiko: bundle-nya tidak selalu ikut regenerate.

   Yang SENGAJA DIPERTAHANKAN: padding kanan #header_container dikunci ke
   1.25rem. Itu bukan bagian dari bentuk folder - nilainya menyamai `mx-5`
   pada #content_card, sehingga ikon profil tetap sejajar dengan tepi kanan
   kartu konten. Tanpa ini .kt-container-fluid (24px/30px) yang menang dan
   ikon meleset beberapa piksel ke dalam.
   ===================================================================== */
@media (min-width: 1024px) {
    #header_container[b-p6au0dkwwi] {
        padding-inline-end: 1.25rem;
    }
}

/* =====================================================================
   Label teks di bawah ikon rail (sidebar level 1).

   Ditulis sebagai CSS biasa, bukan utility Tailwind, karena bundle Metronic
   (assets/css/styles.css) hanya memuat kelas yang terpakai saat build-nya -
   utility baru yang belum pernah dipakai di project ini tidak ikut
   ter-generate dan diam-diam tidak berefek.
   ===================================================================== */

/* PENTING - penyebab label meluber menimpa konten.
   Rantai flex sidebar memakai `shrink-0` di dua tingkat:
       #sidebar            -> w-(--sidebar-width)   (lebar pasti, 104px)
       #sidebar_content    -> flex grow shrink-0
       div.kt-scrollable-* -> grow shrink-0
   Karena `flex-shrink: 0`, lebar intrinsik (max-content) isi rail MENANG atas
   lebar pasti #sidebar. Sebelum ada label, isi rail hanya ikon bulat 40px
   sehingga max-content selalu lebih kecil dari lebar rail dan masalah ini
   tidak pernah kelihatan. Begitu label teks masuk, max-content ikut selebar
   label terpanjang yang tidak terbungkus, rail melebar melewati lebar
   pastinya, dan karena isinya di-center luberannya keluar ke KIRI dan KANAN
   sekaligus.
   Dua properti di bawah mengunci lebar maksimum kedua pembungkus itu ke lebar
   #sidebar, sehingga label terpaksa membungkus ke dalam, bukan melebarkan rail. */
#sidebar_content[b-p6au0dkwwi],
#sidebar_content > div[b-p6au0dkwwi] {
    min-width: 0;
    max-width: 100%;
}

    /* Jarak kiri/kanan rail. Ditulis di sini karena utility `px-*` yang dibutuhkan
   TIDAK ikut ter-generate di bundle Metronic (yang tersedia hanya
   px-0/2/3/4/5/7/9/10). */
    #sidebar_content > div[b-p6au0dkwwi] {
        padding-inline: 0.625rem;
    }

.rail-item[b-p6au0dkwwi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    text-decoration: none;
    width: 100%;
    min-width: 0;
    /* --- efek kartu menonjol saat hover --- */
    position: relative;
    padding: 0.5rem 0.125rem;
    border-radius: 0.625rem;
    background: transparent;
    transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}

    /* Aksen batang di tepi kiri. Memakai ::before, bukan border-left, supaya
   lebar kartu tidak ikut berubah saat aksen muncul (border akan menggeser
   isinya 3px dan membuat ikon terlihat "melompat"). */
    .rail-item[b-p6au0dkwwi]::before {
        content: "";
        position: absolute;
        inset-inline-start: 0;
        top: 50%;
        width: 3px;
        height: 0;
        border-radius: 0 3px 3px 0;
        background: var(--primary, #1460b3);
        transform: translateY(-50%);
        transition: height .18s ease;
    }

    .rail-item:hover[b-p6au0dkwwi] {
        background: var(--background, #fff);
        box-shadow: 0 6px 16px rgb(16 24 40 / 0.10), 0 1px 2px rgb(16 24 40 / 0.06);
        transform: translateY(-2px);
    }

        .rail-item:hover[b-p6au0dkwwi]::before {
            height: 55%;
        }

    /* Ukuran ikon rail. Ditulis di sini, bukan mengganti `text-lg` jadi `text-xl`
   di markup, karena utility text-* hanya ada di bundle Metronic untuk ukuran
   yang sudah terpakai saat bundle-nya di-build. */
    .rail-item i[b-p6au0dkwwi] {
        font-size: 20px;
        line-height: 1;
    }

    /* Modul yang sedang dibuka: latar hijau YAKKAP.

   Hijau logo aslinya #60a830, tapi teks putih di atasnya hanya mencapai
   kontras 2.94:1 - di bawah ambang WCAG AA (4.5:1) untuk teks sekecil label
   rail (0.8rem). Dipakai turunan yang lebih gelap dari hijau yang sama,
   #46811f (4.75:1), supaya masih terbaca sebagai hijau logo tapi labelnya
   tetap terbaca. Kalau tim lebih suka hijau logo persis, cukup ubah nilai
   --rail-active-bg di bawah.

   `is-active` dipasang di anchor oleh MainLayout.razor; sengaja TIDAK memakai
   `:has(.active)` agar tidak bergantung pada dukungan :has(). */
    .rail-item.is-active[b-p6au0dkwwi] {
        --rail-active-bg: #46811f;
        background: var(--rail-active-bg);
        box-shadow: 0 4px 12px rgb(70 129 31 / 0.28);
    }

        /* Tetap hijau saat di-hover; tanpa ini aturan .rail-item:hover di atas
       akan mengembalikan latarnya jadi putih. */
        .rail-item.is-active:hover[b-p6au0dkwwi] {
            background: #3d7a1c;
        }

        /* Batang aksen biru tidak dipakai lagi saat aktif - di atas latar hijau
       warnanya bertabrakan. Hover pada item non-aktif tetap memakainya. */
        .rail-item.is-active[b-p6au0dkwwi]::before {
            display: none;
        }

        /* Metronic memberi lingkaran ikon latar putih + border saat .active lewat
       utility [.active&]:bg-background dan [.active&]:border-input. Di atas
       latar hijau itu terlihat seperti tambalan putih, jadi dinetralkan.
       Selektor sengaja dibuat lebih spesifik (0,3,1) agar menang atas utility
       tersebut tanpa perlu !important. */
        .rail-item.is-active span.kt-btn[b-p6au0dkwwi] {
            background-color: transparent;
            border-color: transparent;
            box-shadow: none;
        }

            /* Ikon dan label jadi putih. [.active&]:[&_i]:text-primary milik Metronic
       dan aturan `.rail-item .active + .rail-item-label` di bawah sama-sama
       menyetel warna, jadi keduanya ditimpa di sini. */
            .rail-item.is-active span.kt-btn i[b-p6au0dkwwi],
            .rail-item.is-active span.rail-item-label[b-p6au0dkwwi] {
                color: #fff;
            }

    .rail-item:active[b-p6au0dkwwi] {
        transform: translateY(0);
    }

/* Hormati preferensi sistem: hilangkan gerakan, sisakan perubahan warna. */
@media (prefers-reduced-motion: reduce) {
    .rail-item[b-p6au0dkwwi],
    .rail-item[b-p6au0dkwwi]::before {
        transition: background-color .18s ease, box-shadow .18s ease;
    }

        .rail-item:hover[b-p6au0dkwwi] {
            transform: none;
        }
}

.rail-item-label[b-p6au0dkwwi] {
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.15;
    text-align: center;
    color: var(--secondary-foreground, #6b7280);
    max-width: 100%;
    /* Label modul bisa panjang ("Payment Execution") - dibatasi 2 baris agar
       tinggi tiap slot rail tetap seragam. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* `anywhere` (bukan `break-word`) supaya satu kata yang lebih panjang dari
       lebar rail pun tetap dipotong, tidak memaksa rail melebar lagi. */
    overflow-wrap: anywhere;
}

.rail-item:hover .rail-item-label[b-p6au0dkwwi] {
    color: var(--primary, #1460b3);
}

/* `.active` ada pada <span> ikon (dari GetRailItemClass), label adalah adjacent
   sibling-nya - bukan turunan - jadi selektornya memakai `+`. */
.rail-item .active + .rail-item-label[b-p6au0dkwwi] {
    color: var(--primary, #1460b3);
    font-weight: 600;
}

/* =====================================================================
   FLYOUT MENU LEVEL 2

   Pengganti #navbar horizontal. Anak dari item rail tampil sebagai panel
   melayang di samping rail, mengikuti pola pada gambar referensi.

   Diposisikan `fixed`, bukan `absolute`: rail sendiri `fixed`, dan panel
   harus tetap di tempat saat konten di-scroll. Offsetnya memakai variabel
   yang sama dengan rail (--sidebar-width, --header-height), jadi mengubah
   lebar rail tidak menuntut penyesuaian di sini.

   Tumpukan z-index: konten < header (10) < rail (20) < backdrop (25) < panel (26).
   Backdrop sengaja `inset: 0` sehingga ikut menutupi header. Konsekuensinya
   klik pertama pada ikon header saat flyout terbuka hanya menutup flyout,
   tidak langsung membuka dropdown profil. Itu perilaku yang diinginkan untuk
   menu overlay - klik pertama membatalkan, klik kedua bertindak.
   ===================================================================== */

/* .flyout-backdrop SUDAH TIDAK ADA. Sejak panel dibuka lewat hover, lapisan
   transparan selebar layar akan menelan klik pertama ke konten di baliknya -
   padahal panel bisa terbuka hanya karena pointer lewat. Penutupan kini
   ditangani @onmouseleave pada pembungkus rail+panel di MainLayout.razor. */

.flyout-panel[b-p6au0dkwwi] {
    position: fixed;
    z-index: 26;
    /* Disejajarkan dengan ikon rail yang sedang di-hover, bukan dipaku ke tepi
       atas layar. Nilainya ditulis ke <html> oleh wwwroot/js/sidebar.js
       sebelum panel ini dirender; fallback di bawah = perilaku lama, dipakai
       hanya kalau skrip itu tidak jalan. */
    top: var(--flyout-top, calc(var(--header-height) + 10px));
    /* MENEMPEL ke tepi rail, tanpa celah. Celah beberapa piksel akan berada di
       luar pembungkus hover, sehingga melintasinya dari ikon menuju panel
       memicu mouseleave dan menutup panel tepat sebelum pointer sampai. */
    inset-inline-start: var(--sidebar-width);
    width: 264px;
    /* Harus ikut --flyout-top: begitu panel turun mengejar ikon di bagian bawah
       rail, sisa ruang ke tepi bawah layar mengecil. Rumus lama menghitung dari
       tepi ATAS viewport, jadi panel yang turun akan menembus tepi bawah. */
    max-height: var(--flyout-max-height, calc(100dvh - var(--header-height) - 28px));
    overflow-y: auto;
    padding: 8px;
    background: var(--background);
    border: 1px solid var(--input);
    border-radius: 14px;
    box-shadow: 0 14px 34px -10px rgb(0 0 0 / 0.22);
}

.flyout-title[b-p6au0dkwwi] {
    padding: 8px 12px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted-foreground);
}

.flyout-item[b-p6au0dkwwi] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 0.9375rem;
    line-height: 1.3;
    color: var(--foreground);
    text-decoration: none;
    transition: background-color 120ms ease, color 120ms ease;
}

    .flyout-item:hover[b-p6au0dkwwi] {
        background-color: var(--muted);
    }

    .flyout-item.is-active[b-p6au0dkwwi] {
        color: var(--primary);
        font-weight: 600;
        background-color: color-mix(in srgb, var(--primary) 8%, transparent);
    }

.flyout-item-icon[b-p6au0dkwwi] {
    flex: 0 0 auto;
    font-size: 1.05rem;
    color: var(--muted-foreground);
}

.flyout-item.is-active .flyout-item-icon[b-p6au0dkwwi] {
    color: var(--primary);
}

/* Label boleh membungkus ke baris kedua daripada terpotong: nodedescription
   dari database bisa panjang ("Budget Verification", "Account Payable"). */
.flyout-item-label[b-p6au0dkwwi] {
    min-width: 0;
}

/* =====================================================================
   FLYOUT LEVEL 2 DI LAYAR MOBILE

   Di bawah breakpoint lg, rail berubah menjadi drawer KTui
   (`[--kt-drawer-enable:true] lg:[--kt-drawer-enable:false]` pada
   #sidebar). Drawer itu membawa backdrop yang TIDAK ada di desktop, dan
   backdrop itulah yang menelan panel level 2.

   Angkanya bisa dibaca langsung di ktui.min.js: drawer memakai
   `_defaultConfig = { zindex: "100", ... }`, dan _createBackdrop menulis
   `backdropElement.style.zIndex = (zindex - 1)` alias 99 - keduanya
   sebagai style INLINE, jadi tidak bisa ditemukan dengan mencari di file
   CSS mana pun. Panel di z-index 26 karenanya dicat di bawah backdrop
   ber-`backdrop-filter: blur(4px)`, dan hasilnya bukan panel yang hilang
   melainkan panel yang buram - persis seperti konten halaman di baliknya,
   sehingga terlihat seperti bagian dari latar dan bukan seperti menu.

   !important DIPERLUKAN, bukan gaya-gayaan: elemen <nav> di
   MainLayout.razor membawa z-index dan width pada atribut style inline.
   Aturan stylesheet biasa kalah dari style inline; hanya deklarasi
   !important yang menang. Selama duplikasi inline itu masih ada, angka di
   sini harus !important agar benar-benar terpakai.

   Nilai 101 dipilih tepat DI ATAS drawer (100), bukan sekadar angka besar:
   dropdown dan context menu KTui memakai 105, dan panel ini tidak boleh
   ikut menutupi keduanya. */
@media (max-width: 1023.98px) {
    .flyout-panel[b-p6au0dkwwi] {
        z-index: 101 !important;
        /* Lebar tetap 264px meluber keluar layar: pada viewport 360px,
           104px rail + 264px panel = 368px. Sisa layar di sebelah rail yang
           menentukan, dengan 264px sebagai batas atas supaya di tablet
           lebarnya tidak melar melebihi versi desktop. */
        width: calc(100vw - var(--sidebar-width) - 12px) !important;
        max-width: 264px;
    }
}
/* /Component/Page/Integration/Page/IntegrationMonitor.razor.rz.scp.css */
/* .kt-btn-outline.kt-btn-yellow (styles.css) menyamakan warna icon dengan
   warna background (color: var(--yellow) == background-color: var(--yellow)),
   jadi icon retry tidak terlihat sampai hover mengganti warnanya. Bug itu ada
   di stylesheet bersama dan memengaruhi banyak halaman lain, jadi diperbaiki
   di sini saja (scoped ke halaman ini) daripada mengubah styles.css. */
.monitor-retry-btn i[b-69mb73354e],
.monitor-retry-btn svg[b-69mb73354e] {
    color: var(--yellow-foreground) !important;
}
/* /Component/Page/MasterData/PaymentTransaction/PaymentTransactionPage.razor.rz.scp.css */
.transaction-alert[b-hvdyyy6u7e] { display:flex; align-items:center; gap:.65rem; margin-bottom:1rem; }
.transaction-path[b-hvdyyy6u7e] { display:flex; align-items:center; gap:.55rem; margin-bottom:1rem; padding:.6rem; border:1px solid var(--border); border-radius:.75rem; background:color-mix(in srgb,var(--muted) 28%,var(--background)); }
.transaction-path>i[b-hvdyyy6u7e] { color:var(--muted-foreground); font-size:.82rem; }
.transaction-path-step[b-hvdyyy6u7e] { display:flex; min-width:0; align-items:center; gap:.65rem; padding:.55rem .75rem; border:0; border-radius:.55rem; background:transparent; color:var(--muted-foreground); text-align:left; transition:background .15s ease,color .15s ease; }
button.transaction-path-step[b-hvdyyy6u7e] { cursor:pointer; }
button.transaction-path-step:disabled[b-hvdyyy6u7e] { cursor:default; opacity:.72; }
.transaction-path-step>span[b-hvdyyy6u7e] { display:grid; width:1.75rem; height:1.75rem; place-items:center; flex:0 0 auto; border:1px solid var(--border); border-radius:.45rem; background:var(--background); font-size:.8rem; font-weight:800; }
.transaction-path-step>div[b-hvdyyy6u7e] { display:grid; min-width:0; }
.transaction-path-step small[b-hvdyyy6u7e] { font-size:.67rem; font-weight:800; letter-spacing:.1em; }
.transaction-path-step strong[b-hvdyyy6u7e] { overflow:hidden; font-size:.86rem; text-overflow:ellipsis; white-space:nowrap; }
.transaction-path-step.is-current[b-hvdyyy6u7e] { background:#74c548; color:rgba(255,255,255,1); box-shadow:0 3px 10px rgb(15 23 42 / 6%); }
.transaction-path-step.is-complete>span[b-hvdyyy6u7e] { border-color:color-mix(in srgb,var(--primary) 40%,var(--border)); background:color-mix(in srgb,var(--primary) 10%,var(--background)); color:var(--primary); }
.transaction-path-step.is-current>span[b-hvdyyy6u7e] { border-color:rgba(255,255,255,.35); background:rgba(255,255,255,.18); color:#fff; }

.transaction-eyebrow[b-hvdyyy6u7e] { display:block; margin-bottom:.3rem; color:var(--primary); font-size:.7rem; font-weight:800; letter-spacing:.13em; }
.transaction-total[b-hvdyyy6u7e] { padding:.35rem .6rem; border:1px solid var(--border); border-radius:999px; color:var(--muted-foreground); font-size:.76rem; white-space:nowrap; }

.transaction-table[b-hvdyyy6u7e] { width:100%; min-width:850px; border-collapse:separate; border-spacing:0; font-size:.83rem; }
.transaction-table th[b-hvdyyy6u7e] { padding:.7rem .8rem; border-bottom:1px solid var(--border); background:color-mix(in srgb,var(--muted) 30%,transparent); color:var(--muted-foreground); font-size:.71rem; font-weight:800; letter-spacing:.055em; text-align:left; text-transform:uppercase; white-space:nowrap; }
.transaction-table td[b-hvdyyy6u7e] { height:3.9rem; padding:.62rem .8rem; border-bottom:1px solid color-mix(in srgb,var(--border) 75%,transparent); vertical-align:middle; }
.transaction-table tbody tr[b-hvdyyy6u7e] { transition:background .14s ease; }
.transaction-table tbody tr:hover[b-hvdyyy6u7e] { background:color-mix(in srgb,var(--primary) 4%,transparent); }
.transaction-table tbody tr:last-child td[b-hvdyyy6u7e] { border-bottom:0; }
.transaction-table tbody tr.is-inactive[b-hvdyyy6u7e] { color:var(--muted-foreground); }
.order-column[b-hvdyyy6u7e] { width:74px; text-align:center!important; }
.action-column[b-hvdyyy6u7e] { width:52px; }
.order-token[b-hvdyyy6u7e] { display:inline-grid; width:1.85rem; height:1.85rem; place-items:center; border:1px solid var(--border); border-radius:.45rem; background:color-mix(in srgb,var(--muted) 35%,var(--background)); color:var(--foreground); font-size:.77rem; font-weight:750; }
.transaction-code[b-hvdyyy6u7e] { padding:.24rem .42rem; border-radius:.35rem; background:color-mix(in srgb,var(--primary) 7%,transparent); color:var(--primary); font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:.77rem; font-weight:700; }
.transaction-name-link[b-hvdyyy6u7e],.child-count-link[b-hvdyyy6u7e],.transaction-back[b-hvdyyy6u7e] { border:0; background:none; cursor:pointer; }
.transaction-name-link[b-hvdyyy6u7e] { display:block; padding:0; color:var(--foreground); font-size:.84rem; font-weight:720; text-align:left; }
.transaction-name-link:hover[b-hvdyyy6u7e],.child-count-link:hover[b-hvdyyy6u7e] { color:var(--primary); text-decoration:underline; text-underline-offset:3px; }
.transaction-description[b-hvdyyy6u7e] { display:block; max-width:270px; overflow:hidden; margin-top:.2rem; color:var(--muted-foreground); font-size:.73rem; text-overflow:ellipsis; white-space:nowrap; }
.child-count-link[b-hvdyyy6u7e] { display:inline-flex; align-items:center; gap:.35rem; padding:0; color:var(--primary); font-size:.78rem; font-weight:700; white-space:nowrap; }
.scope-badge[b-hvdyyy6u7e],.status-badge[b-hvdyyy6u7e],.mandatory-badge[b-hvdyyy6u7e] { display:inline-flex; align-items:center; width:max-content; border-radius:999px; font-size:.71rem; font-weight:750; white-space:nowrap; }
.scope-badge[b-hvdyyy6u7e] { padding:.28rem .48rem; border:1px solid color-mix(in srgb,var(--primary) 25%,var(--border)); background:color-mix(in srgb,var(--primary) 7%,transparent); color:var(--primary); }
.scope-external[b-hvdyyy6u7e] { border-color:color-mix(in srgb,#7c3aed 28%,var(--border)); background:color-mix(in srgb,#7c3aed 7%,transparent); color:#7c3aed; }
.scope-integrasi[b-hvdyyy6u7e] { border-color:color-mix(in srgb,#d97706 28%,var(--border)); background:color-mix(in srgb,#d97706 7%,transparent); color:#b45309; }
.status-badge[b-hvdyyy6u7e] { gap:.35rem; padding:.28rem .5rem; background:color-mix(in srgb,var(--muted) 45%,transparent); color:var(--muted-foreground); }
.status-badge i[b-hvdyyy6u7e] { width:.42rem; height:.42rem; border-radius:999px; background:currentColor; }
.status-badge.is-active[b-hvdyyy6u7e] { background:color-mix(in srgb,#16a34a 10%,transparent); color:#15803d; }
.boolean-label[b-hvdyyy6u7e] { display:inline-flex; align-items:center; gap:.35rem; color:var(--muted-foreground); font-size:.77rem; }
.boolean-label.is-yes[b-hvdyyy6u7e] { color:var(--foreground); }
.boolean-label i[b-hvdyyy6u7e] { color:var(--primary); }

.transaction-actions-cell[b-hvdyyy6u7e] { position:relative; overflow:visible; text-align:right; }
.transaction-action-menu[b-hvdyyy6u7e] { position:relative; display:inline-block; }
.transaction-action-menu summary[b-hvdyyy6u7e] { display:grid; width:2rem; height:2rem; place-items:center; border-radius:.4rem; cursor:pointer; list-style:none; color:var(--muted-foreground); }
.transaction-action-menu summary[b-hvdyyy6u7e]::-webkit-details-marker { display:none; }
.transaction-action-menu summary:hover[b-hvdyyy6u7e],.transaction-action-menu[open] summary[b-hvdyyy6u7e] { background:var(--muted); color:var(--foreground); }
.transaction-action-popover[b-hvdyyy6u7e] { position:absolute; z-index:15; top:calc(100% + .25rem); right:0; display:grid; width:175px; padding:.3rem; border:1px solid var(--border); border-radius:.5rem; background:var(--background); box-shadow:0 12px 30px rgb(15 23 42 / 16%); text-align:left; }
.transaction-action-popover button[b-hvdyyy6u7e] { display:flex; align-items:center; gap:.55rem; width:100%; padding:.5rem .6rem; border:0; border-radius:.35rem; background:transparent; color:var(--foreground); cursor:pointer; font-size:.78rem; text-align:left; }
.transaction-action-popover button:hover[b-hvdyyy6u7e] { background:var(--muted); }
.transaction-action-popover button.is-destructive[b-hvdyyy6u7e] { color:var(--destructive); }

.transaction-empty[b-hvdyyy6u7e] { display:flex; min-height:15rem; align-items:center; justify-content:center; flex-direction:column; padding:2rem; text-align:center; }
.transaction-empty-icon[b-hvdyyy6u7e] { display:grid; width:3.2rem; height:3.2rem; place-items:center; border:1px solid var(--border); border-radius:.75rem; background:color-mix(in srgb,var(--muted) 45%,transparent); color:var(--primary); font-size:1.25rem; }
.transaction-empty h3[b-hvdyyy6u7e] { margin:.8rem 0 .25rem; font-size:.95rem; }
.transaction-empty p[b-hvdyyy6u7e] { max-width:360px; margin:0 0 .85rem; color:var(--muted-foreground); font-size:.8rem; }
.transaction-inline-state[b-hvdyyy6u7e] { display:flex; min-height:15rem; align-items:center; justify-content:center; gap:.6rem; color:var(--muted-foreground); font-size:.82rem; }
.transaction-spinner[b-hvdyyy6u7e] { width:1rem; height:1rem; border:2px solid var(--border); border-top-color:var(--primary); border-radius:999px; animation:transaction-spin-b-hvdyyy6u7e .7s linear infinite; }
@keyframes transaction-spin-b-hvdyyy6u7e { to { transform:rotate(360deg); } }

.transaction-detail-context[b-hvdyyy6u7e] { display:flex; align-items:center; justify-content:space-between; gap:1.25rem; margin-bottom:1rem; padding:1.15rem 1.35rem; border:1px solid color-mix(in srgb,var(--primary) 22%,var(--border)); border-radius:.75rem; background:linear-gradient(110deg,color-mix(in srgb,var(--primary) 7%,var(--background)),var(--background) 58%); }
.transaction-back[b-hvdyyy6u7e] { display:flex; align-items:center; gap:.3rem; margin:0 0 .7rem; padding:0; color:var(--muted-foreground); font-size:.76rem; }
.transaction-back:hover[b-hvdyyy6u7e] { color:var(--primary); }
.transaction-context-title-row[b-hvdyyy6u7e] { display:flex; align-items:center; gap:.85rem; }
.transaction-context-mark[b-hvdyyy6u7e] { display:grid; width:3.25rem; height:3.25rem; place-items:center; flex:0 0 auto; border-radius:.75rem; background:var(--primary); color:var(--primary-foreground,#fff); font-size:.92rem; font-weight:800; letter-spacing:.06em; box-shadow:0 8px 18px color-mix(in srgb,var(--primary) 24%,transparent); }
.transaction-context-meta[b-hvdyyy6u7e] { display:flex; align-items:center; gap:.55rem; margin-bottom:.25rem; }
.transaction-context-meta code[b-hvdyyy6u7e] { color:var(--muted-foreground); font-size:.73rem; }
.transaction-context-actions[b-hvdyyy6u7e] { display:flex; gap:.55rem; }

.transaction-drawer-backdrop[b-hvdyyy6u7e] { position:fixed; inset:0; z-index:90; background:rgb(15 23 42 / 38%); backdrop-filter:blur(1px); }
.transaction-document-drawer[b-hvdyyy6u7e] { position:fixed; z-index:91; top:0; right:0; display:grid; width:min(620px,100vw); height:100dvh; grid-template-rows:auto auto 1fr auto; border-left:1px solid var(--border); background:var(--background); box-shadow:-25px 0 60px rgb(15 23 42 / 20%); animation:drawer-enter-b-hvdyyy6u7e .22s ease-out; }
@keyframes drawer-enter-b-hvdyyy6u7e { from { transform:translateX(35px); opacity:.5; } }
.transaction-drawer-header[b-hvdyyy6u7e] { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; padding:1.3rem 1.4rem 1rem; border-bottom:1px solid var(--border); }
.transaction-drawer-header h2[b-hvdyyy6u7e] { margin:0; color:var(--foreground); font-size:1.05rem; font-weight:750; letter-spacing:-.015em; }
.transaction-drawer-header p[b-hvdyyy6u7e] { margin:.25rem 0 0; color:var(--muted-foreground); font-size:.83rem; }
.transaction-drawer-header code[b-hvdyyy6u7e] { color:var(--primary); font-size:.77rem; font-weight:700; }
.transaction-drawer-toolbar[b-hvdyyy6u7e] { display:grid; grid-template-columns:1fr auto; gap:.65rem; padding:.85rem 1.4rem; border-bottom:1px solid var(--border); background:color-mix(in srgb,var(--muted) 25%,transparent); }
.transaction-drawer-body[b-hvdyyy6u7e] { overflow-y:auto; padding:.6rem 1.4rem 1.4rem; }
.transaction-drawer-footer[b-hvdyyy6u7e] { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.8rem 1.4rem; border-top:1px solid var(--border); color:var(--muted-foreground); font-size:.78rem; }
.document-list-heading[b-hvdyyy6u7e],.document-row[b-hvdyyy6u7e] { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr) auto; gap:.7rem; align-items:center; }
.document-list-heading[b-hvdyyy6u7e] { padding:.65rem .75rem; color:var(--muted-foreground); font-size:.67rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }
.document-row[b-hvdyyy6u7e] { padding:.75rem; border-top:1px solid var(--border); transition:background .15s ease; }
.document-row:hover[b-hvdyyy6u7e] { background:color-mix(in srgb,var(--primary) 3%,transparent); }
.document-identity[b-hvdyyy6u7e] { display:flex; min-width:0; align-items:center; gap:.65rem; }
.document-identity>div[b-hvdyyy6u7e] { display:grid; min-width:0; }
.document-identity strong[b-hvdyyy6u7e] { overflow:hidden; font-size:.82rem; text-overflow:ellipsis; white-space:nowrap; }
.document-identity code[b-hvdyyy6u7e] { color:var(--primary); font-size:.72rem; font-weight:700; }
.document-rules[b-hvdyyy6u7e] { display:grid; gap:.25rem; }
.file-type-list[b-hvdyyy6u7e] { display:flex; flex-wrap:wrap; gap:.2rem; }
.file-type-list span[b-hvdyyy6u7e] { padding:.18rem .32rem; border-radius:.25rem; background:var(--muted); color:var(--foreground); font-size:.63rem; font-weight:750; }
.document-rules small[b-hvdyyy6u7e] { color:var(--muted-foreground); font-size:.68rem; }
.mandatory-badge[b-hvdyyy6u7e] { padding:.2rem .4rem; background:var(--muted); color:var(--muted-foreground); }
.mandatory-badge.is-mandatory[b-hvdyyy6u7e] { background:color-mix(in srgb,#d97706 10%,transparent); color:#b45309; }
.document-actions[b-hvdyyy6u7e] { display:flex; }

.transaction-modal-backdrop[b-hvdyyy6u7e] { position:fixed; inset:0; z-index:110; display:flex; align-items:center; justify-content:center; padding:1rem; background:rgb(15 23 42 / 54%); }
.transaction-modal[b-hvdyyy6u7e] { width:min(660px,100%); max-height:calc(100dvh - 2rem); overflow:auto; border:1px solid var(--border); border-radius:.75rem; background:var(--background); box-shadow:0 28px 70px rgb(15 23 42 / 28%); }
.transaction-modal-header[b-hvdyyy6u7e],.transaction-modal-footer[b-hvdyyy6u7e] { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1.25rem; border-bottom:1px solid var(--border); }
.transaction-modal-header h3[b-hvdyyy6u7e] { margin:0; font-size:1rem; }
.transaction-modal-header p[b-hvdyyy6u7e] { margin:.2rem 0 0; color:var(--muted-foreground); font-size:.8rem; }
.transaction-modal-body[b-hvdyyy6u7e] { padding:1.2rem 1.25rem; }
.transaction-modal-footer[b-hvdyyy6u7e] { justify-content:flex-end; border-top:1px solid var(--border); border-bottom:0; }
.form-section-label[b-hvdyyy6u7e] { margin:.25rem 0 .65rem; color:var(--muted-foreground); font-size:.67rem; font-weight:800; letter-spacing:.1em; }
.form-section-label:not(:first-child)[b-hvdyyy6u7e] { margin-top:1.15rem; padding-top:1rem; border-top:1px solid var(--border); }
.transaction-form-grid[b-hvdyyy6u7e] { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem; }
.transaction-form-grid label[b-hvdyyy6u7e],.file-type-field[b-hvdyyy6u7e] { display:grid; gap:.35rem; color:var(--foreground); font-size:.79rem; font-weight:650; }
.transaction-form-grid label b[b-hvdyyy6u7e] { display:inline; color:var(--destructive); }
.transaction-form-grid .kt-input[b-hvdyyy6u7e] { width:100%; font-weight:400; }
.span-2[b-hvdyyy6u7e] { grid-column:span 2; }
.form-parent-context[b-hvdyyy6u7e] { display:flex; align-items:center; gap:.65rem; margin-bottom:1rem; padding:.75rem; border:1px solid color-mix(in srgb,var(--primary) 23%,var(--border)); border-radius:.55rem; background:color-mix(in srgb,var(--primary) 5%,transparent); }
.form-parent-context>i[b-hvdyyy6u7e] { color:var(--primary); font-size:1rem; }
.form-parent-context>div[b-hvdyyy6u7e] { display:grid; }
.form-parent-context small[b-hvdyyy6u7e] { color:var(--muted-foreground); font-size:.63rem; font-weight:800; letter-spacing:.08em; }
.form-parent-context strong[b-hvdyyy6u7e] { font-size:.8rem; }
.transaction-switch-group[b-hvdyyy6u7e] { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; }
.transaction-switch-group.is-single[b-hvdyyy6u7e] { grid-template-columns:1fr; margin-top:1rem; }
.transaction-switch[b-hvdyyy6u7e] { display:flex; align-items:center; gap:.65rem; padding:.75rem; border:1px solid var(--border); border-radius:.55rem; cursor:pointer; }
.transaction-switch input[b-hvdyyy6u7e] { position:absolute; opacity:0; pointer-events:none; }
.transaction-switch>span[b-hvdyyy6u7e] { position:relative; width:2rem; height:1.1rem; flex:0 0 auto; border-radius:999px; background:var(--muted); transition:background .15s; }
.transaction-switch>span[b-hvdyyy6u7e]::after { position:absolute; top:.15rem; left:.15rem; width:.8rem; height:.8rem; border-radius:999px; background:white; box-shadow:0 1px 3px rgb(15 23 42 / 25%); content:""; transition:transform .15s; }
.transaction-switch input:checked+span[b-hvdyyy6u7e] { background:var(--primary); }
.transaction-switch input:checked+span[b-hvdyyy6u7e]::after { transform:translateX(.9rem); }
.transaction-switch div[b-hvdyyy6u7e] { display:grid; }
.transaction-switch strong[b-hvdyyy6u7e] { font-size:.79rem; }
.transaction-switch small[b-hvdyyy6u7e] { color:var(--muted-foreground); font-size:.68rem; }
.file-type-options[b-hvdyyy6u7e] { display:flex; flex-wrap:wrap; gap:.35rem; }
.file-type-option[b-hvdyyy6u7e] { padding:.35rem .55rem; border:1px solid var(--border); border-radius:999px; background:var(--background); color:var(--muted-foreground); cursor:pointer; font-size:.69rem; font-weight:750; }
.file-type-option.is-selected[b-hvdyyy6u7e] { border-color:color-mix(in srgb,var(--primary) 45%,var(--border)); background:color-mix(in srgb,var(--primary) 9%,transparent); color:var(--primary); }
.file-type-field>small[b-hvdyyy6u7e] { color:var(--muted-foreground); font-size:.68rem; font-weight:400; }

@media (max-width:800px) {
    .transaction-path[b-hvdyyy6u7e] { overflow-x:auto; }
    .transaction-path-step[b-hvdyyy6u7e] { min-width:145px; }
    .transaction-detail-context[b-hvdyyy6u7e] { align-items:flex-start; flex-direction:column; }
    .transaction-context-actions[b-hvdyyy6u7e] { width:100%; flex-wrap:wrap; }
    .transaction-table th:nth-child(4)[b-hvdyyy6u7e],.transaction-table td:nth-child(4)[b-hvdyyy6u7e] { display:none; }
}
@media (max-width:600px) {
    .transaction-table th:nth-child(2)[b-hvdyyy6u7e],.transaction-table td:nth-child(2)[b-hvdyyy6u7e],.transaction-table th:nth-child(6)[b-hvdyyy6u7e],.transaction-table td:nth-child(6)[b-hvdyyy6u7e] { display:none; }
    .transaction-context-mark[b-hvdyyy6u7e] { display:none; }
    .transaction-context-actions .kt-btn[b-hvdyyy6u7e] { flex:1; }
    .transaction-drawer-toolbar[b-hvdyyy6u7e] { grid-template-columns:1fr; }
    .document-list-heading[b-hvdyyy6u7e] { display:none; }
    .document-row[b-hvdyyy6u7e] { grid-template-columns:1fr auto; }
    .document-rules[b-hvdyyy6u7e] { grid-column:1; padding-left:2.5rem; }
    .document-actions[b-hvdyyy6u7e] { grid-column:2; grid-row:1 / span 2; }
    .transaction-form-grid[b-hvdyyy6u7e],.transaction-switch-group[b-hvdyyy6u7e] { grid-template-columns:1fr; }
    .span-2[b-hvdyyy6u7e] { grid-column:auto; }
}
@media (prefers-reduced-motion:reduce) { .transaction-document-drawer[b-hvdyyy6u7e],.transaction-spinner[b-hvdyyy6u7e] { animation:none; } }
/* /Component/Page/PaymentRequest/RfpExternal/RfpExternalDashboard.razor.rz.scp.css */
.request-dashboard[b-9vyqituwtl] {
    display: grid;
    gap: 20px;
}

.dashboard-header[b-9vyqituwtl],
.panel-heading[b-9vyqituwtl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.dashboard-header h1[b-9vyqituwtl],
.panel-heading h2[b-9vyqituwtl] {
    margin: 0;
    color: #172033;
}

.dashboard-header h1[b-9vyqituwtl] {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
}

.dashboard-header p[b-9vyqituwtl],
.panel-heading p[b-9vyqituwtl],
.integration-banner p[b-9vyqituwtl] {
    margin: 5px 0 0;
    color: #687386;
}

.dashboard-eyebrow[b-9vyqituwtl] {
    color: #1f6feb !important;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dashboard-primary-action[b-9vyqituwtl],
.dashboard-secondary-action[b-9vyqituwtl] {
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.dashboard-primary-action[b-9vyqituwtl] {
    padding: 11px 18px;
    background: #1f6feb;
    color: #fff;
    box-shadow: 0 6px 16px rgb(31 111 235 / 20%);
}

.dashboard-secondary-action[b-9vyqituwtl] {
    padding: 8px 12px;
    color: #1f6feb;
    border: 1px solid #bfd4f7;
}

.dashboard-stats[b-9vyqituwtl] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.stat-card[b-9vyqituwtl] {
    position: relative;
    min-height: 112px;
    padding: 18px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e1e6ef;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgb(23 32 51 / 6%);
}

.stat-card[b-9vyqituwtl]::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    content: "";
    background: var(--stat-color);
}

.stat-label[b-9vyqituwtl] {
    display: block;
    margin-bottom: 12px;
    color: #687386;
    font-size: 0.85rem;
    font-weight: 600;
}

.stat-card strong[b-9vyqituwtl] {
    color: #172033;
    font-size: 1.65rem;
}

.stat-icon[b-9vyqituwtl] {
    position: absolute;
    right: 16px;
    bottom: 16px;
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    color: var(--stat-color);
    background: var(--stat-background);
    border-radius: 50%;
    font-weight: 800;
}

.stat-pending[b-9vyqituwtl] {
    --stat-color: #d97706;
    --stat-background: #fff4d6;
}

.stat-approved[b-9vyqituwtl] {
    --stat-color: #16834b;
    --stat-background: #dcf7e8;
}

.stat-rejected[b-9vyqituwtl] {
    --stat-color: #c53b4b;
    --stat-background: #fde7ea;
}

.stat-value[b-9vyqituwtl] {
    --stat-color: #1f6feb;
    --stat-background: #e8f1ff;
}

.integration-banner[b-9vyqituwtl] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    color: #245a3c;
    background: #edf9f2;
    border: 1px solid #b9e4ca;
    border-radius: 10px;
}

.integration-banner p[b-9vyqituwtl] {
    color: #47705a;
}

.integration-icon[b-9vyqituwtl] {
    display: grid;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    place-items: center;
    color: #fff;
    background: #16834b;
    border-radius: 50%;
    font-weight: 800;
}

.recent-panel[b-9vyqituwtl] {
    padding: 20px;
    background: #fff;
    border: 1px solid #e1e6ef;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgb(23 32 51 / 6%);
}

.panel-heading[b-9vyqituwtl] {
    margin-bottom: 18px;
}

.panel-heading h2[b-9vyqituwtl] {
    font-size: 1.1rem;
}

.dashboard-grid-shell[b-9vyqituwtl] {
    overflow: hidden;
    border: 1px solid #dfe5ee;
    border-radius: 9px;
}

.dashboard-grid[b-9vyqituwtl] {
    --ig-size: var(--ig-size-medium);
}

.dashboard-loading[b-9vyqituwtl],
.dashboard-empty[b-9vyqituwtl] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 150px;
    gap: 10px;
    color: #687386;
}

.dashboard-alert[b-9vyqituwtl] {
    padding: 12px 14px;
    border-radius: 8px;
}

.dashboard-alert-error[b-9vyqituwtl] {
    color: #842029;
    background: #f8d7da;
    border: 1px solid #f5c2c7;
}

@media (max-width: 1050px) {
    .dashboard-stats[b-9vyqituwtl] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .dashboard-header[b-9vyqituwtl],
    .panel-heading[b-9vyqituwtl] {
        align-items: stretch;
        flex-direction: column;
    }

    .dashboard-stats[b-9vyqituwtl] {
        grid-template-columns: 1fr;
    }

    .dashboard-primary-action[b-9vyqituwtl],
    .dashboard-secondary-action[b-9vyqituwtl] {
        text-align: center;
    }

    .recent-panel[b-9vyqituwtl] {
        padding: 14px;
    }
}

/* Dashboard wireframe alignment */
.request-dashboard[b-9vyqituwtl] {
    gap: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid #d8dee8;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgb(23 32 51 / 5%);
}

.dashboard-header[b-9vyqituwtl] {
    padding: 22px 24px;
    border-bottom: 1px solid #d8dee8;
}

.dashboard-header h1[b-9vyqituwtl] {
    font-size: 1.35rem;
}

.dashboard-header p[b-9vyqituwtl] {
    margin-top: 3px;
    font-size: 0.88rem;
}

.dashboard-primary-action[b-9vyqituwtl] {
    padding: 9px 16px;
    border-radius: 5px;
    box-shadow: none;
}

.dashboard-primary-action[b-9vyqituwtl]::before {
    margin-right: 6px;
    content: "+";
}

.dashboard-alert[b-9vyqituwtl] {
    margin: 16px 24px 0;
}

.dashboard-stats[b-9vyqituwtl] {
    gap: 0;
    border-bottom: 1px solid #d8dee8;
}

.stat-card[b-9vyqituwtl] {
    min-height: 108px;
    padding: 20px 24px;
    border: 0;
    border-right: 1px solid #d8dee8;
    border-radius: 0;
    box-shadow: none;
}

.stat-card:last-child[b-9vyqituwtl] {
    border-right: 0;
}

.stat-card[b-9vyqituwtl]::before {
    display: none;
}

.stat-label[b-9vyqituwtl] {
    margin-bottom: 14px;
    color: #4b5565;
    font-size: 0.82rem;
}

.stat-value-row[b-9vyqituwtl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.stat-card strong[b-9vyqituwtl] {
    font-size: 1.45rem;
}

.stat-icon[b-9vyqituwtl] {
    position: static;
    width: 27px;
    height: 27px;
    color: var(--icon-color);
    background: var(--icon-background);
    font-size: 0.8rem;
}

.stat-pending[b-9vyqituwtl] {
    --icon-color: #b76a00;
    --icon-background: #fff0c2;
}

.stat-approved[b-9vyqituwtl] {
    --icon-color: #137444;
    --icon-background: #dcf5e7;
}

.stat-rejected[b-9vyqituwtl] {
    --icon-color: #b52f40;
    --icon-background: #fde4e8;
}

.stat-total[b-9vyqituwtl] {
    --icon-color: #1f6feb;
    --icon-background: #e5efff;
}

.integration-banner[b-9vyqituwtl] {
    margin: 18px 24px;
    padding: 13px 16px;
    border-radius: 5px;
}

.integration-banner strong[b-9vyqituwtl] {
    font-size: 0.88rem;
}

.integration-banner p[b-9vyqituwtl] {
    margin-top: 2px;
    font-size: 0.8rem;
}

.integration-icon[b-9vyqituwtl] {
    flex-basis: 26px;
    width: 26px;
    height: 26px;
    font-size: 0.8rem;
}

.recent-panel[b-9vyqituwtl] {
    padding: 0;
    border: 0;
    border-top: 1px solid #d8dee8;
    border-radius: 0;
    box-shadow: none;
}

.panel-heading[b-9vyqituwtl] {
    min-height: 52px;
    margin: 0;
    padding: 0 24px;
    border-bottom: 1px solid #d8dee8;
}

.panel-heading h2[b-9vyqituwtl] {
    font-size: 0.98rem;
}

.dashboard-table-shell[b-9vyqituwtl] {
    overflow-x: auto;
}

.dashboard-table[b-9vyqituwtl] {
    width: 100%;
    min-width: 930px;
    border-collapse: collapse;
    table-layout: fixed;
}

.dashboard-table th[b-9vyqituwtl],
.dashboard-table td[b-9vyqituwtl] {
    padding: 13px 16px;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid #e3e8f0;
}

.dashboard-table th[b-9vyqituwtl] {
    color: #596579;
    background: #f7f9fc;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.025em;
}

.dashboard-table td[b-9vyqituwtl] {
    color: #273247;
    font-size: 0.82rem;
}

.dashboard-table tbody tr:hover[b-9vyqituwtl] {
    background: #f8fbff;
}

.dashboard-table th:nth-child(1)[b-9vyqituwtl] {
    width: 18%;
}

.dashboard-table th:nth-child(2)[b-9vyqituwtl] {
    width: 29%;
}

.dashboard-table th:nth-child(3)[b-9vyqituwtl] {
    width: 13%;
}

.dashboard-table th:nth-child(4)[b-9vyqituwtl] {
    width: 14%;
}

.dashboard-table th:nth-child(5)[b-9vyqituwtl] {
    width: 11%;
}

.dashboard-table th:nth-child(6)[b-9vyqituwtl] {
    width: 8%;
}

.dashboard-table th:nth-child(7)[b-9vyqituwtl] {
    width: 7%;
}

.request-number[b-9vyqituwtl],
.amount-cell[b-9vyqituwtl] {
    white-space: nowrap;
}

.request-number[b-9vyqituwtl] {
    color: #1f5fae !important;
    font-weight: 600;
}

.description-cell[b-9vyqituwtl],
.category-cell[b-9vyqituwtl] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.amount-cell[b-9vyqituwtl] {
    font-weight: 600;
}

.status-badge[b-9vyqituwtl],
.source-badge[b-9vyqituwtl] {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
}

.status-approved[b-9vyqituwtl] {
    color: #126c3f;
    background: #dff5e8;
}

.status-rejected[b-9vyqituwtl] {
    color: #a52e3d;
    background: #fde5e8;
}

.status-pending[b-9vyqituwtl] {
    color: #9a5b00;
    background: #fff0c7;
}

.source-badge[b-9vyqituwtl] {
    color: #46566f;
    background: #edf1f6;
}

.view-link[b-9vyqituwtl],
.panel-footer a[b-9vyqituwtl] {
    color: #1f6feb;
    font-weight: 600;
    text-decoration: none;
}

.view-link:hover[b-9vyqituwtl],
.panel-footer a:hover[b-9vyqituwtl] {
    text-decoration: underline;
}

.panel-footer[b-9vyqituwtl] {
    padding: 13px 24px;
    text-align: right;
}

@media (max-width: 1050px) {
    .dashboard-stats[b-9vyqituwtl] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .stat-card:nth-child(2)[b-9vyqituwtl] {
        border-right: 0;
    }

    .stat-card:nth-child(-n + 2)[b-9vyqituwtl] {
        border-bottom: 1px solid #d8dee8;
    }
}

@media (max-width: 640px) {
    .dashboard-header[b-9vyqituwtl] {
        padding: 18px;
    }

    .dashboard-stats[b-9vyqituwtl] {
        grid-template-columns: 1fr;
    }

    .stat-card[b-9vyqituwtl],
    .stat-card:nth-child(2)[b-9vyqituwtl] {
        border-right: 0;
        border-bottom: 1px solid #d8dee8;
    }

    .stat-card:last-child[b-9vyqituwtl] {
        border-bottom: 0;
    }

    .integration-banner[b-9vyqituwtl] {
        margin: 14px 18px;
    }

    .panel-heading[b-9vyqituwtl],
    .panel-footer[b-9vyqituwtl] {
        padding-right: 18px;
        padding-left: 18px;
    }
}
/* /Component/Page/PaymentRequest/RfpExternal/RfpExternalDetail.razor.rz.scp.css */
.track-btn[b-5enb0f0y5c] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 8px 14px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    transition: background .15s ease;
}
.track-btn:hover[b-5enb0f0y5c] {
    background: #f9fafb;
}
.track-btn svg[b-5enb0f0y5c] {
    display: block;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
}

/* /Component/Page/PaymentRequest/RfpExternal/RfpExternalDocuments.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════
   DOCUMENTS PAGE - Metronic Design System
   ══════════════════════════════════════════════════════════════ */

.documents-page[b-ymh6vb9dbs] {
    display: grid;
    gap: 1rem;
}

.documents-card-header[b-ymh6vb9dbs] {
    padding-block: 0.75rem;
    min-height: auto;
}

@media (min-width: 992px) {
    .documents-card-header[b-ymh6vb9dbs] {
        padding-inline: 3rem;
    }
}

/* ══════════════════════════════════════════════════════════════
   HEADER - custom flex (Metronic utilities not available)
   ══════════════════════════════════════════════════════════════ */

/* ── Each header row ── */
.documents-header-row[b-ymh6vb9dbs] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
}

/* Row 1: breadcrumb left, actions right */
.documents-header-row:first-child[b-ymh6vb9dbs] {
    justify-content: space-between;
}

.documents-header-actions[b-ymh6vb9dbs] {
    display: flex;
    gap: 0.5rem;
}

/* Row 2: title left, status badge right */
.documents-header-row--title[b-ymh6vb9dbs] {
    justify-content: space-between;
    gap: 0.75rem;
}

/* Row 3: chips wrap */
.documents-header-row--chips[b-ymh6vb9dbs] {
    gap: 0.5rem;
}

.documents-header-chip--requirement[b-ymh6vb9dbs] {
    color: #7c3aed;
    background: #ede9fe;
}

.documents-header-chip--mandatory[b-ymh6vb9dbs] {
    color: #c2410c;
    background: #ffedd5;
}

.documents-request-type[b-ymh6vb9dbs] {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    min-width: 0;
    margin-left: 0.25rem;
    color: #64748b;
    font-size: 0.7rem;
}

.documents-request-type-label[b-ymh6vb9dbs] {
    color: #334155;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.documents-request-type-description[b-ymh6vb9dbs] {
    overflow: hidden;
    max-width: min(32rem, 48vw);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Title group ── */
.documents-title-group[b-ymh6vb9dbs] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.documents-title[b-ymh6vb9dbs] {
    margin: 0;
    color: #1e293b;
    font-size: clamp(1.15rem, 1.6vw, 1.55rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.documents-subtitle[b-ymh6vb9dbs] {
    color: #64748b;
    font-size: 0.85rem;
    margin-top: 0.1rem;
}

/* ── Breadcrumb ── */
.documents-breadcrumb[b-ymh6vb9dbs] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.82rem;
    color: #94a3b8;
}

.documents-breadcrumb .separator[b-ymh6vb9dbs] {
    color: #cbd5e1;
}

.documents-breadcrumb-link[b-ymh6vb9dbs] {
    color: #1b84ff;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.15s ease;
}

.documents-breadcrumb-link:hover[b-ymh6vb9dbs] {
    color: #0b5ed7;
    text-decoration: underline;
}

.documents-breadcrumb-link i[b-ymh6vb9dbs] {
    font-size: 0.75rem;
    margin-right: 0.25rem;
}



/* ══════════════════════════════════════════════════════════════
   SIDEBAR LAYOUT - CSS Grid (Bootstrap grid not available)
   ══════════════════════════════════════════════════════════════ */
.documents-layout[b-ymh6vb9dbs] {
    display: grid;
    grid-template-columns: 1fr;
    position: relative;
}

@media (min-width: 1200px) {
    .documents-layout[b-ymh6vb9dbs] {
        grid-template-columns: 380px 1fr;
    }
    .documents-layout.documents-layout--drawer-open[b-ymh6vb9dbs] {
        grid-template-columns: 300px minmax(0, 1fr) 320px;
    }
}

@media (min-width: 1400px) {
    .documents-layout[b-ymh6vb9dbs] {
        grid-template-columns: 360px 1fr;
    }
}

@media (min-width: 1400px) {
    .documents-layout.documents-layout--drawer-open[b-ymh6vb9dbs] {
        grid-template-columns: 320px minmax(0, 1fr) 360px;
    }
}

.documents-sidebar-col[b-ymh6vb9dbs] {
    border-right: 1px solid #e2e8f0;
    background: #fafbfc;
}

.documents-preview-col[b-ymh6vb9dbs] {
    min-width: 0;
}

.documents-drawer-col[b-ymh6vb9dbs] {
    display: none;
    min-width: 0;
}

.documents-drawer-col.is-open[b-ymh6vb9dbs] {
    display: block;
}

.documents-sidebar[b-ymh6vb9dbs] {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1rem;
}

/* ── Search ── */
.documents-search-wrapper[b-ymh6vb9dbs] {
    position: relative;
    margin-bottom: 0.85rem;
    flex-shrink: 0;
}

.documents-search-icon[b-ymh6vb9dbs] {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 0.85rem;
    pointer-events: none;
}

.documents-search[b-ymh6vb9dbs] {
    padding-left: 32px !important;
    padding-right: 32px !important;
    background: #fff;
    border-color: #e2e8f0;
    border-radius: 0.5rem;
    font-size: 0.82rem;
    transition: all 0.15s ease;
}

.documents-search:focus[b-ymh6vb9dbs] {
    border-color: #1b84ff;
    box-shadow: 0 0 0 3px rgba(27, 132, 255, 0.1);
}

.documents-search[b-ymh6vb9dbs]::placeholder {
    color: #94a3b8;
}

.documents-search-clear[b-ymh6vb9dbs] {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    padding: 0;
    font-size: 0.55rem;
    color: #94a3b8;
    background: #f1f5f9;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.15s ease;
}

.documents-search-clear:hover[b-ymh6vb9dbs] {
    color: #475569;
    background: #e2e8f0;
}

/* ══════════════════════════════════════════════════════════════
   CHECKLIST - Group Headers
   ══════════════════════════════════════════════════════════════ */
.documents-checklist[b-ymh6vb9dbs] {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.documents-checklist[b-ymh6vb9dbs]::-webkit-scrollbar {
    width: 4px;
}

.documents-checklist[b-ymh6vb9dbs]::-webkit-scrollbar-track {
    background: transparent;
}

.documents-checklist[b-ymh6vb9dbs]::-webkit-scrollbar-thumb {
    background: #e2e8f0;
    border-radius: 4px;
}

.documents-group-header[b-ymh6vb9dbs] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.4rem 0.3rem;
    margin-top: 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid #e2e8f0;
}

.documents-group-header:first-child[b-ymh6vb9dbs] {
    margin-top: 0;
}

.documents-group-header i[b-ymh6vb9dbs] {
    font-size: 0.75rem;
}

.documents-group-header .documents-group-count[b-ymh6vb9dbs] {
    margin-left: auto;
    font-size: 0.65rem;
    min-width: 20px;
    text-align: center;
    padding: 0.1rem 0.35rem;
    border-radius: 999px;
    font-weight: 700;
}

.documents-group-header .documents-group-count--missing[b-ymh6vb9dbs] {
    color: #d97706;
    background: #fef3c7;
}

.documents-group-header .documents-group-count--required[b-ymh6vb9dbs] {
    color: #1d4ed8;
    background: #dbeafe;
}

.documents-group-header .documents-group-count--optional[b-ymh6vb9dbs] {
    color: #475569;
    background: #e2e8f0;
}

.documents-group-header .documents-group-count--uploaded[b-ymh6vb9dbs] {
    color: #16a34a;
    background: #dcfce7;
}

.documents-group-header .documents-group-count--extra[b-ymh6vb9dbs] {
    color: #2563eb;
    background: #dbeafe;
}

.documents-group[b-ymh6vb9dbs] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.documents-additional-trigger[b-ymh6vb9dbs] {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    width: 100%;
    margin-top: 0.45rem;
    padding: 0.75rem 0.8rem;
    border: 1px dashed #93c5fd;
    border-radius: 0.85rem;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    text-align: left;
    transition: all 0.15s ease;
}

.documents-additional-trigger:hover[b-ymh6vb9dbs] {
    border-color: #1b84ff;
    box-shadow: 0 8px 20px rgba(27, 132, 255, 0.08);
}

.documents-additional-trigger.is-active[b-ymh6vb9dbs] {
    border-style: solid;
    border-color: #1b84ff;
    background: #f0f7ff;
    box-shadow: 0 8px 20px rgba(27, 132, 255, 0.1);
}

.documents-additional-trigger-icon[b-ymh6vb9dbs] {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    border-radius: 0.75rem;
    background: #dbeafe;
    color: #2563eb;
    font-size: 1rem;
}

.documents-additional-trigger-body[b-ymh6vb9dbs] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.documents-additional-trigger-title[b-ymh6vb9dbs] {
    color: #1e293b;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.3;
}

.documents-additional-trigger-desc[b-ymh6vb9dbs] {
    margin-top: 0.15rem;
    color: #64748b;
    font-size: 0.72rem;
    line-height: 1.45;
}

/* ══════════════════════════════════════════════════════════════
   CHECKLIST - Items - Richer layout (like verification page)
   ══════════════════════════════════════════════════════════════ */
.documents-checklist-item[b-ymh6vb9dbs] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.55rem 0.6rem;
    border-radius: 0.5rem;
    cursor: default;
    transition: all 0.15s ease;
    position: relative;
}

.documents-checklist-item--uploaded[b-ymh6vb9dbs],
.documents-checklist-item--extra[b-ymh6vb9dbs],
.documents-checklist-item--requirement[b-ymh6vb9dbs],
.documents-checklist-item--optional[b-ymh6vb9dbs] {
    cursor: pointer;
}

.documents-checklist-item--uploaded[b-ymh6vb9dbs] {
    background: #fff;
    border: 1px solid #e2e8f0;
}

.documents-checklist-item--uploaded:hover[b-ymh6vb9dbs] {
    border-color: #cbd5e1;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.documents-checklist-item--uploaded.is-active[b-ymh6vb9dbs] {
    background: #f0f7ff;
    border-color: #1b84ff;
    border-left: 3px solid #1b84ff;
    box-shadow: 0 1px 4px rgba(27, 132, 255, 0.1);
}

.documents-checklist-item--requirement.is-active[b-ymh6vb9dbs],
.documents-checklist-item--optional.is-active[b-ymh6vb9dbs] {
    background: #f0f7ff;
    border-color: #1b84ff;
    border-left: 3px solid #1b84ff;
    box-shadow: 0 1px 4px rgba(27, 132, 255, 0.1);
}

.documents-checklist-item--missing[b-ymh6vb9dbs] {
    background: repeating-linear-gradient(
        -45deg,
        #fff 0px,
        #fff 6px,
        #fefce8 6px,
        #fefce8 8px
    );
    border: 1px dashed #fcd34d;
}

.documents-checklist-item--optional[b-ymh6vb9dbs] {
    background: #fff;
    border: 1px solid #e2e8f0;
}

.documents-checklist-item--optional:hover[b-ymh6vb9dbs] {
    border-color: #cbd5e1;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.documents-checklist-item--extra[b-ymh6vb9dbs] {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border: 1px solid #dbeafe;
    padding: 0.55rem 0.6rem;
    border-radius: 0.5rem;
}

.documents-checklist-item--extra:hover[b-ymh6vb9dbs] {
    border-color: #93c5fd;
    box-shadow: 0 1px 4px rgba(37, 99, 235, 0.08);
}

.documents-checklist-item--extra.is-active[b-ymh6vb9dbs] {
    background: #f0f7ff;
    border-color: #1b84ff;
    border-left: 3px solid #1b84ff;
    box-shadow: 0 1px 4px rgba(27, 132, 255, 0.1);
}

/* ── Icon ── */
.documents-checklist-icon[b-ymh6vb9dbs] {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    font-size: 1.1rem;
    color: #1b84ff;
    margin-top: 0.1rem;
    border-radius: 0.5rem;
    background: #f0f7ff;
}

.documents-checklist-item--missing .documents-checklist-icon[b-ymh6vb9dbs] {
    background: #fefce8;
    color: #d97706;
}

.documents-checklist-item--extra .documents-checklist-icon[b-ymh6vb9dbs] {
    background: #dbeafe;
    color: #2563eb;
}

/* ── Body ── */
.documents-checklist-body[b-ymh6vb9dbs] {
    flex: 1;
    min-width: 0;
    text-align: left;
}

.documents-checklist-title[b-ymh6vb9dbs] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    font-size: 0.83rem;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.3;
    text-align: left;
}

.documents-checklist-title-text[b-ymh6vb9dbs] {
    min-width: 0;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.documents-checklist-item--missing .documents-checklist-title[b-ymh6vb9dbs] {
    color: #92400e;
}

.documents-checklist-desc[b-ymh6vb9dbs] {
    font-size: 0.72rem;
    color: #64748b;
    line-height: 1.25;
    margin-top: 0.05rem;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.documents-checklist-item--missing .documents-checklist-desc[b-ymh6vb9dbs] {
    color: #a16207;
    font-style: italic;
}

/* ── Mandatory/Optional badge ── */
.documents-mandatory-badge[b-ymh6vb9dbs] {
    display: inline-flex;
    align-items: center;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 0.1rem 0.35rem;
    border-radius: 0.2rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-left: 0.35rem;
    vertical-align: middle;
}

.documents-mandatory-badge--mandatory[b-ymh6vb9dbs] {
    color: #7c3aed;
    background: #ede9fe;
}

.documents-mandatory-badge--optional[b-ymh6vb9dbs] {
    color: #64748b;
    background: #f1f5f9;
}

.documents-mandatory-badge--additional[b-ymh6vb9dbs] {
    color: #2563eb;
    background: #dbeafe;
}

/* ── Document type code ── */
.documents-doc-code[b-ymh6vb9dbs] {
    font-size: 0.68rem;
    color: #94a3b8;
    font-family: 'Courier New', monospace;
    margin-top: 0.1rem;
    text-align: left;
}

.documents-state-icon-badge[b-ymh6vb9dbs] {
    display: inline-grid;
    place-items: center;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 999px;
    flex-shrink: 0;
    border: 1px solid transparent;
}

.documents-state-icon-badge i[b-ymh6vb9dbs] {
    font-size: 0.9rem;
}

.documents-state-icon-badge--success[b-ymh6vb9dbs] {
    color: #16a34a;
    background: #ecfdf3;
    border-color: #bbf7d0;
}

.documents-state-icon-badge--warning[b-ymh6vb9dbs] {
    color: #d97706;
    background: #fff7ed;
    border-color: #fed7aa;
}

.documents-state-icon-badge--muted[b-ymh6vb9dbs] {
    color: #94a3b8;
    background: #f8fafc;
    border-color: #e2e8f0;
}

.documents-upload-panel[b-ymh6vb9dbs] {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e2e8f0;
    background: linear-gradient(180deg, #f8fbff 0%, #fefefe 100%);
}

.documents-upload-panel-header[b-ymh6vb9dbs] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.documents-upload-eyebrow[b-ymh6vb9dbs] {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #1b84ff;
}

.documents-upload-title[b-ymh6vb9dbs] {
    margin-top: 0.2rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: #1e293b;
}

.documents-upload-subtitle[b-ymh6vb9dbs] {
    margin-top: 0.2rem;
    color: #64748b;
    font-size: 0.76rem;
    line-height: 1.5;
}

.documents-upload-chip[b-ymh6vb9dbs] {
    display: inline-flex;
    align-items: center;
    min-height: 1.75rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.documents-upload-chip--mandatory[b-ymh6vb9dbs] {
    color: #1d4ed8;
    background: #dbeafe;
}

.documents-upload-chip--optional[b-ymh6vb9dbs] {
    color: #475569;
    background: #e2e8f0;
}

.documents-upload-chip--additional[b-ymh6vb9dbs] {
    color: #2563eb;
    background: #dbeafe;
}

.documents-upload-header-actions[b-ymh6vb9dbs] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
}

.documents-upload-meta[b-ymh6vb9dbs] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.documents-upload-field[b-ymh6vb9dbs] {
    margin-top: 0.85rem;
}

.documents-upload-field-label[b-ymh6vb9dbs] {
    display: inline-block;
    margin-bottom: 0.35rem;
    color: #334155;
    font-size: 0.76rem;
    font-weight: 700;
}

.documents-upload-text-input[b-ymh6vb9dbs] {
    width: 100%;
    border-color: #dbe4f0;
    border-radius: 0.85rem;
    background: #ffffff;
    color: #1e293b;
    font-size: 0.8rem;
}

.documents-upload-text-input:focus[b-ymh6vb9dbs] {
    border-color: #1b84ff;
    box-shadow: 0 0 0 3px rgba(27, 132, 255, 0.12);
}

.documents-upload-field-hint[b-ymh6vb9dbs] {
    margin-top: 0.35rem;
    color: #64748b;
    font-size: 0.72rem;
    line-height: 1.45;
}

.documents-upload-feedback[b-ymh6vb9dbs] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.75rem 0.9rem;
    border-radius: 0.85rem;
    font-size: 0.76rem;
    line-height: 1.45;
}

.documents-upload-feedback--success[b-ymh6vb9dbs] {
    color: #166534;
    background: #ecfdf3;
    border: 1px solid #bbf7d0;
}

.documents-upload-feedback--error[b-ymh6vb9dbs] {
    color: #b42318;
    background: #fef3f2;
    border: 1px solid #fecaca;
}

.documents-upload-dropzone[b-ymh6vb9dbs] {
    position: relative;
    display: grid;
    place-items: center;
    gap: 0.35rem;
    margin-top: 0.85rem;
    padding: 1.15rem 1rem;
    border: 1px dashed #93c5fd;
    border-radius: 1rem;
    background:
        radial-gradient(circle at top left, rgba(59, 130, 246, 0.12), transparent 45%),
        linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    text-align: center;
    cursor: pointer;
    transition: all 0.18s ease;
}

.documents-upload-dropzone:hover[b-ymh6vb9dbs] {
    border-color: #1b84ff;
    box-shadow: 0 12px 28px rgba(27, 132, 255, 0.12);
}

.documents-upload-dropzone.is-busy[b-ymh6vb9dbs] {
    opacity: 0.8;
    pointer-events: none;
}

.documents-upload-input[b-ymh6vb9dbs] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.documents-upload-drop-icon[b-ymh6vb9dbs] {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 999px;
    background: #dbeafe;
    color: #1d4ed8;
    font-size: 1.25rem;
}

.documents-upload-drop-title[b-ymh6vb9dbs] {
    color: #1e293b;
    font-size: 0.84rem;
    font-weight: 700;
}

.documents-upload-drop-hint[b-ymh6vb9dbs] {
    color: #64748b;
    font-size: 0.75rem;
    line-height: 1.45;
    max-width: 38rem;
}

.documents-upload-progress[b-ymh6vb9dbs] {
    margin-top: 0.85rem;
    padding: 0.75rem 0.85rem;
    border-radius: 0.85rem;
    background: #eff6ff;
    border: 1px solid #dbeafe;
}

.documents-upload-progress-row[b-ymh6vb9dbs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.45rem;
    color: #1d4ed8;
    font-size: 0.74rem;
    font-weight: 600;
}

.documents-upload-progress-track[b-ymh6vb9dbs] {
    position: relative;
    overflow: hidden;
    height: 0.6rem;
    border-radius: 999px;
    background: rgba(59, 130, 246, 0.14);
}

.documents-upload-progress-bar[b-ymh6vb9dbs] {
    position: absolute;
    inset-block: 0;
    inset-inline-start: -35%;
    width: 35%;
    border-radius: 999px;
    background: linear-gradient(90deg, #1b84ff 0%, #60a5fa 55%, #93c5fd 100%);
    box-shadow: 0 0 16px rgba(27, 132, 255, 0.35);
    animation: documents-upload-progress-slide-b-ymh6vb9dbs 1.15s ease-in-out infinite;
}

@keyframes documents-upload-progress-slide-b-ymh6vb9dbs {
    0% {
        inset-inline-start: -35%;
    }

    100% {
        inset-inline-start: 100%;
    }
}



/* ══════════════════════════════════════════════════════════════
   PREVIEW PANEL
   ══════════════════════════════════════════════════════════════ */
.documents-preview[b-ymh6vb9dbs] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.documents-preview-header[b-ymh6vb9dbs] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0;
}

.documents-preview-actions[b-ymh6vb9dbs] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    flex-shrink: 0;
}

.documents-comment-trigger[b-ymh6vb9dbs] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2rem;
    block-size: 2rem;
    border: 1px solid #dbe4f0;
    border-radius: 999px;
    background: #ffffff;
    color: #52607a;
    transition: all 0.15s ease;
}

.documents-comment-trigger:hover[b-ymh6vb9dbs] {
    border-color: #1b84ff;
    color: #1b84ff;
    background: #f0f7ff;
}

.documents-comment-trigger:focus-visible[b-ymh6vb9dbs] {
    outline: 2px solid rgba(27, 132, 255, 0.28);
    outline-offset: 2px;
}

.documents-badge-group[b-ymh6vb9dbs] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.35rem;
}

.documents-comment-badge[b-ymh6vb9dbs] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-height: 1.5rem;
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
}

.documents-comment-badge i[b-ymh6vb9dbs] {
    font-size: 0.72rem;
}

.documents-preview-desc[b-ymh6vb9dbs] {
    margin-top: 0.15rem;
    color: #64748b;
    font-size: 0.78rem;
    overflow-wrap: anywhere;
}



.documents-preview-title[b-ymh6vb9dbs] {
    font-size: 0.9rem;
    font-weight: 700;
    color: #1e293b;
    overflow-wrap: anywhere;
}

.documents-preview-body[b-ymh6vb9dbs] {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 1rem;
    min-height: 1123px; /* A4 height at 96 DPI */
}

.documents-preview-frame[b-ymh6vb9dbs] {
    width: 100%;
    flex: 1;
    min-height: 1123px; /* A4 height at 96 DPI */
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    background: #fff;
}

.documents-preview-image[b-ymh6vb9dbs] {
    width: 100%;
    min-height: 1123px; /* A4 height at 96 DPI */
    max-height: none;
    object-fit: contain;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    background: #fff;
}

/* ══════════════════════════════════════════════════════════════
   EMPTY / STATE
   ══════════════════════════════════════════════════════════════ */
.documents-state[b-ymh6vb9dbs] {
    display: grid;
    place-items: center;
    text-align: center;
    padding: 2rem 1.5rem;
    color: #64748b;
}

.documents-state-icon[b-ymh6vb9dbs] {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin: 0 auto;
    color: #1b84ff;
    background: #f0f7ff;
    border-radius: 50%;
    font-size: 1.2rem;
}

/* ══════════════════════════════════════════════════════════════
   DOCUMENT DRAWER
   ══════════════════════════════════════════════════════════════ */
.documents-drawer[b-ymh6vb9dbs] {
    --documents-drawer-footer-space: 18rem;
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    background: linear-gradient(180deg, #fbfcfe 0%, #f5f8fc 100%);
    border-left: 1px solid #e2e8f0;
}

.documents-drawer-header[b-ymh6vb9dbs] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1rem 0.75rem;
    border-bottom: 1px solid #e2e8f0;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(8px);
}

.documents-drawer-eyebrow[b-ymh6vb9dbs] {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #1b84ff;
}

.documents-drawer-title[b-ymh6vb9dbs] {
    margin-top: 0.25rem;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.3;
    color: #1e293b;
}

.documents-drawer-subtitle[b-ymh6vb9dbs] {
    margin-top: 0.2rem;
    color: #64748b;
    font-size: 0.76rem;
    line-height: 1.45;
}

.documents-drawer-meta[b-ymh6vb9dbs] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e2e8f0;
    background: rgba(255, 255, 255, 0.66);
}

.documents-drawer-body[b-ymh6vb9dbs] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
    padding: 1rem 1rem calc(var(--documents-drawer-footer-space) + env(safe-area-inset-bottom, 0px));
}

.documents-drawer-body[b-ymh6vb9dbs]::-webkit-scrollbar {
    width: 6px;
}

.documents-drawer-body[b-ymh6vb9dbs]::-webkit-scrollbar-track {
    background: transparent;
}

.documents-drawer-body[b-ymh6vb9dbs]::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 999px;
}

.documents-drawer-state[b-ymh6vb9dbs] {
    display: grid;
    place-items: center;
    min-height: 100%;
    text-align: center;
    color: #64748b;
    padding: 1.5rem 1rem;
}

.documents-comment-thread[b-ymh6vb9dbs] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    min-height: min-content;
}

.documents-comment-card[b-ymh6vb9dbs] {
    display: grid;
    grid-template-columns: 2.2rem minmax(0, 1fr);
    gap: 0.75rem;
    padding: 0.9rem;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}

.documents-comment-card.is-self[b-ymh6vb9dbs] {
    border-color: #bfdbfe;
    background: linear-gradient(180deg, #f8fbff 0%, #eff6ff 100%);
}

.documents-comment-avatar[b-ymh6vb9dbs] {
    display: grid;
    place-items: center;
    inline-size: 2.2rem;
    block-size: 2.2rem;
    border-radius: 999px;
    background: #dbeafe;
    color: #1d4ed8;
    font-size: 0.76rem;
    font-weight: 700;
}

.documents-comment-content[b-ymh6vb9dbs] {
    min-width: 0;
}

.documents-comment-header[b-ymh6vb9dbs] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.documents-comment-actor[b-ymh6vb9dbs] {
    font-size: 0.82rem;
    font-weight: 700;
    color: #1e293b;
}

.documents-comment-time[b-ymh6vb9dbs] {
    font-size: 0.69rem;
    color: #94a3b8;
}

.documents-comment-role[b-ymh6vb9dbs] {
    margin-top: 0.15rem;
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #1b84ff;
}

.documents-comment-text[b-ymh6vb9dbs] {
    margin-top: 0.45rem;
    color: #334155;
    font-size: 0.8rem;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}

.documents-drawer-footer[b-ymh6vb9dbs] {
    flex-shrink: 0;
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    z-index: 2;
    padding: 0.85rem 1rem 1rem;
    border-top: 1px solid #e2e8f0;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 -10px 24px rgba(15, 23, 42, 0.08);
}

.documents-drawer-footer-text[b-ymh6vb9dbs] {
    color: #64748b;
    font-size: 0.74rem;
    line-height: 1.45;
}

.documents-drawer-feedback[b-ymh6vb9dbs] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    padding: 0.7rem 0.8rem;
    border-radius: 0.85rem;
    font-size: 0.75rem;
    line-height: 1.45;
}

.documents-drawer-feedback i[b-ymh6vb9dbs] {
    margin-top: 0.1rem;
}

.documents-drawer-feedback--error[b-ymh6vb9dbs] {
    color: #b42318;
    background: #fef3f2;
    border: 1px solid #fecdca;
}

.documents-drawer-feedback--success[b-ymh6vb9dbs] {
    color: #166534;
    background: #ecfdf3;
    border: 1px solid #bbf7d0;
}

.documents-drawer-composer[b-ymh6vb9dbs] {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.documents-drawer-composer-label[b-ymh6vb9dbs] {
    color: #334155;
    font-size: 0.77rem;
    font-weight: 700;
}

.documents-drawer-textarea[b-ymh6vb9dbs] {
    min-height: 5.5rem;
    resize: vertical;
    border: 1px solid #dbe4f0;
    border-radius: 0.95rem;
    background: #ffffff;
    padding: 0.8rem 0.9rem;
    color: #1e293b;
    font-size: 0.8rem;
    line-height: 1.5;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.documents-drawer-textarea[b-ymh6vb9dbs]::placeholder {
    color: #94a3b8;
}

.documents-drawer-textarea:focus[b-ymh6vb9dbs] {
    outline: none;
    border-color: #1b84ff;
    box-shadow: 0 0 0 3px rgba(27, 132, 255, 0.12);
}

.documents-drawer-composer-actions[b-ymh6vb9dbs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.documents-drawer-backdrop[b-ymh6vb9dbs] {
    position: fixed;
    inset: 0;
    z-index: 1040;
    border: 0;
    background: rgba(15, 23, 42, 0.35);
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 1200px) {
    .documents-drawer-col.is-open[b-ymh6vb9dbs] {
        display: block;
        position: fixed;
        top: 1rem;
        right: 1rem;
        bottom: 1rem;
        width: 360px;
        z-index: 1035;
    }

    .documents-drawer[b-ymh6vb9dbs] {
        height: 100%;
        max-height: none;
    }

    .documents-layout.documents-layout--drawer-open[b-ymh6vb9dbs] {
        grid-template-columns: 300px minmax(0, 1fr);
        padding-right: 344px;
    }

    .documents-layout.documents-layout--drawer-open .documents-preview-col[b-ymh6vb9dbs] {
        min-width: 0;
    }

    .documents-drawer-backdrop[b-ymh6vb9dbs] {
        display: none;
    }
}

@media (max-width: 1199.98px) {
    .documents-sidebar-col[b-ymh6vb9dbs] {
        border-right: none;
        border-bottom: 1px solid #e2e8f0;
    }

    .documents-sidebar[b-ymh6vb9dbs] {
        max-height: 380px;
    }

    .documents-drawer-col.is-open[b-ymh6vb9dbs] {
        display: block;
        position: fixed;
        inset-inline: 0;
        inset-block-end: 0;
        z-index: 1050;
    }

    .documents-drawer[b-ymh6vb9dbs] {
        height: min(78dvh, 48rem);
        max-height: min(78vh, 48rem);
        border-left: none;
        border-top-left-radius: 1.25rem;
        border-top-right-radius: 1.25rem;
        box-shadow: 0 -20px 48px rgba(15, 23, 42, 0.18);
    }

    .documents-preview-body[b-ymh6vb9dbs] { min-height: 800px; }
    .documents-preview-frame[b-ymh6vb9dbs] { min-height: 800px; }
    .documents-preview-image[b-ymh6vb9dbs] { min-height: 800px; }
}

@media (max-width: 767.98px) {
    .documents-card-header[b-ymh6vb9dbs] {
        padding-inline: 1rem;
    }

    .documents-header-row:first-child[b-ymh6vb9dbs],
    .documents-header-row--title[b-ymh6vb9dbs] {
        align-items: flex-start;
    }

    .documents-sidebar[b-ymh6vb9dbs] {
        max-height: 300px;
        padding: 0.75rem;
    }

    .documents-preview-header[b-ymh6vb9dbs] {
        padding: 0.85rem 1rem;
    }

    .documents-upload-panel[b-ymh6vb9dbs] {
        padding: 0.85rem 1rem;
    }

    .documents-upload-panel-header[b-ymh6vb9dbs] {
        flex-direction: column;
    }

    .documents-upload-header-actions[b-ymh6vb9dbs] {
        width: 100%;
        justify-content: space-between;
    }

    .documents-preview-actions[b-ymh6vb9dbs] {
        width: 100%;
    }

    .documents-preview-actions .kt-btn[b-ymh6vb9dbs] {
        flex: 1 1 auto;
        justify-content: center;
    }

    .documents-drawer[b-ymh6vb9dbs] {
        height: 85dvh;
        max-height: 85vh;
    }

    .documents-drawer-header[b-ymh6vb9dbs],
    .documents-drawer-meta[b-ymh6vb9dbs],
    .documents-drawer-body[b-ymh6vb9dbs],
    .documents-drawer-footer[b-ymh6vb9dbs] {
        padding-inline: 0.9rem;
    }

    .documents-drawer-composer-actions[b-ymh6vb9dbs] {
        flex-direction: column;
        align-items: stretch;
    }

    .documents-drawer-composer-actions .kt-btn[b-ymh6vb9dbs] {
        width: 100%;
        justify-content: center;
    }

    .documents-comment-card[b-ymh6vb9dbs] {
        grid-template-columns: 1fr;
    }

    .documents-comment-avatar[b-ymh6vb9dbs] {
        inline-size: 2rem;
        block-size: 2rem;
    }

    .documents-preview-body[b-ymh6vb9dbs] { min-height: 600px; }
    .documents-preview-frame[b-ymh6vb9dbs] { min-height: 600px; }
    .documents-preview-image[b-ymh6vb9dbs] { min-height: 600px; }
}

/* --- Overlay proses upload / simpan judul --- */
.documents-busy-overlay[b-ymh6vb9dbs] {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: grid;
    place-items: center;
    padding: 16px;
    background: rgba(15, 23, 42, 0.45);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    animation: documents-busy-fade-b-ymh6vb9dbs 0.18s ease-out both;
}

.documents-busy-card[b-ymh6vb9dbs] {
    --busy-accent: var(--app-primary, #1f6feb);
    display: grid;
    justify-items: center;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    width: min(428px, 100%);
    padding: 28px 28px 20px;
    text-align: center;
    color: var(--app-text, #172033);
    background: #fff;
    border: 1px solid var(--app-border, #d8dee7);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
    animation: documents-busy-pop-b-ymh6vb9dbs 0.26s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}

.documents-busy-card.is-check[b-ymh6vb9dbs] { --busy-accent: #0e9f6e; }
.documents-busy-card.is-rename[b-ymh6vb9dbs] { --busy-accent: #7c3aed; }

.documents-busy-icon[b-ymh6vb9dbs] {
    position: relative;
    display: grid;
    place-items: center;
    width: 96px;
    height: 96px;
    margin-bottom: 6px;
}

.documents-busy-ring[b-ymh6vb9dbs] {
    position: absolute;
    inset: 12px;
    border: 2px solid var(--busy-accent);
    border-radius: 50%;
    opacity: 0;
    animation: documents-busy-ripple-b-ymh6vb9dbs 1.8s ease-out infinite;
}

.documents-busy-ring--delay[b-ymh6vb9dbs] { animation-delay: 0.9s; }

.documents-busy-badge[b-ymh6vb9dbs] {
    position: relative;
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    color: #fff;
    background: var(--busy-accent);
    background: linear-gradient(145deg, var(--busy-accent), color-mix(in srgb, var(--busy-accent) 68%, #0b1b3a));
    border-radius: 50%;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.22);
}

.documents-busy-badge i[b-ymh6vb9dbs] {
    font-size: 30px;
    line-height: 1;
    animation: documents-busy-pulse-b-ymh6vb9dbs 1.4s ease-in-out infinite;
}

.documents-busy-card.is-upload .documents-busy-badge i[b-ymh6vb9dbs] {
    animation: documents-busy-float-b-ymh6vb9dbs 1.3s ease-in-out infinite;
}

.documents-busy-title[b-ymh6vb9dbs] {
    max-width: 100%;
    overflow-wrap: anywhere;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.documents-busy-detail[b-ymh6vb9dbs] {
    max-width: 100%;
    overflow-wrap: anywhere;
    font-size: 0.85rem;
    color: var(--app-text-muted, #5f6b7a);
}

.documents-busy-file[b-ymh6vb9dbs] {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    margin-top: 10px;
    padding: 8px 12px;
    font-size: 0.82rem;
    background: #f7f9fc;
    border: 1px solid var(--app-border, #d8dee7);
    border-radius: 10px;
}

.documents-busy-file i[b-ymh6vb9dbs] {
    flex-shrink: 0;
    color: var(--busy-accent);
}

.documents-busy-file-name[b-ymh6vb9dbs] {
    min-width: 0;
    overflow: hidden;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.documents-busy-file-size[b-ymh6vb9dbs] {
    flex-shrink: 0;
    color: var(--app-text-muted, #5f6b7a);
}

.documents-busy-track[b-ymh6vb9dbs] {
    position: relative;
    width: 100%;
    height: 6px;
    margin-top: 14px;
    overflow: hidden;
    background: #e6ecf5;
    border-radius: 999px;
}

.documents-busy-bar[b-ymh6vb9dbs] {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 38%;
    background: var(--busy-accent);
    border-radius: 999px;
    animation: documents-busy-slide-b-ymh6vb9dbs 1.2s ease-in-out infinite;
}

.documents-busy-hint[b-ymh6vb9dbs] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    font-size: 0.75rem;
    color: var(--app-text-muted, #5f6b7a);
}

@keyframes documents-busy-fade-b-ymh6vb9dbs {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes documents-busy-pop-b-ymh6vb9dbs {
    from { opacity: 0; transform: translateY(8px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes documents-busy-ripple-b-ymh6vb9dbs {
    0% { opacity: 0.55; transform: scale(0.7); }
    100% { opacity: 0; transform: scale(1.35); }
}

@keyframes documents-busy-float-b-ymh6vb9dbs {
    0%, 100% { transform: translateY(3px); }
    50% { transform: translateY(-4px); }
}

@keyframes documents-busy-pulse-b-ymh6vb9dbs {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.12); }
}

@keyframes documents-busy-slide-b-ymh6vb9dbs {
    from { transform: translateX(-100%); }
    to { transform: translateX(270%); }
}

@media (prefers-reduced-motion: reduce) {
    .documents-busy-overlay[b-ymh6vb9dbs],
    .documents-busy-card[b-ymh6vb9dbs],
    .documents-busy-ring[b-ymh6vb9dbs],
    .documents-busy-badge i[b-ymh6vb9dbs],
    .documents-busy-bar[b-ymh6vb9dbs] {
        animation: none;
    }

    .documents-busy-ring[b-ymh6vb9dbs] { display: none; }
    .documents-busy-bar[b-ymh6vb9dbs] { width: 100%; opacity: 0.55; }
}
/* /Component/Page/PaymentRequest/RfpExternal/RfpExternalForm.razor.rz.scp.css */
/* ============================================
   Card Layout - Item List
   ============================================ */

.rfp-session-vendor-bar[b-0y1m9mtnx0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.rfp-session-vendor-info[b-0y1m9mtnx0] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 1.05rem;
    color: var(--app-text, #0f172a);
}

.rfp-session-vendor-info strong[b-0y1m9mtnx0] {
    font-variant-numeric: tabular-nums;
}

.rfp-session-vendor-bar .mud-button[b-0y1m9mtnx0] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.rfp-session-vendor-bar .mud-button .ki-filled[b-0y1m9mtnx0] {
    font-size: 1.05rem;
    line-height: 1;
}

.rfp-external-items-layout[b-0y1m9mtnx0] {
    display: grid;
    grid-template-columns: 1fr 260px;
    gap: 20px;
    align-items: start;
    margin-top: 8px;
}

.rfp-external-items-main[b-0y1m9mtnx0] {
    min-width: 0;
}

.rfp-external-items-sidebar[b-0y1m9mtnx0] {
    position: sticky;
    top: 24px;
}

.rfp-item-cards[b-0y1m9mtnx0] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rfp-item-card[b-0y1m9mtnx0] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--app-border, #d1d5db);
    border-radius: 8px;
    background: var(--app-surface, #fff);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

/* Card Header */
.rfp-item-card-header[b-0y1m9mtnx0] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--app-border, #e5e7eb);
}

.rfp-item-card-number[b-0y1m9mtnx0] {
    font-weight: 750;
    font-size: 0.9rem;
    color: var(--app-primary, #6366f1);
}

.rfp-item-card-pr[b-0y1m9mtnx0] {
    font-weight: 750;
    font-size: 0.9rem;
    color: var(--app-text-muted, #6b7280);
}

.rfp-item-card-spacer[b-0y1m9mtnx0] {
    flex: 1;
}

/* Card Description */
.rfp-item-card-desc[b-0y1m9mtnx0] {
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--app-text, #0f172a);
    padding-bottom: 4px;
}

/* Card Detail - 2-column grid */
.rfp-item-card-detail[b-0y1m9mtnx0] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 20px;
    padding: 8px 0;
}

.rfp-detail-field[b-0y1m9mtnx0] {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.rfp-label[b-0y1m9mtnx0] {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--app-text-muted, #6b7280);
    white-space: nowrap;
    min-width: fit-content;
}

.rfp-value[b-0y1m9mtnx0] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--app-text, #0f172a);
}

.rfp-value-financial[b-0y1m9mtnx0] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    min-width: 120px;
}

/* Card Payment Section */
.rfp-item-card-payment[b-0y1m9mtnx0] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 20px;
    padding: 10px 0 4px;
    border-top: 1px solid var(--app-border, #e5e7eb);
}

.rfp-payment-field[b-0y1m9mtnx0] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rfp-payment-field .rfp-label[b-0y1m9mtnx0] {
    white-space: nowrap;
}

.rfp-payment-input[b-0y1m9mtnx0] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--app-border, #d1d5db);
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: right;
    background: #fff;
    box-sizing: border-box;
    font-variant-numeric: tabular-nums;
    -moz-appearance: textfield;
    appearance: textfield;
}

.rfp-payment-input[b-0y1m9mtnx0]::-webkit-inner-spin-button,
.rfp-payment-input[b-0y1m9mtnx0]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.rfp-payment-input:focus[b-0y1m9mtnx0] {
    border-color: var(--app-primary, #6366f1);
    outline: none;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
}

.rfp-payment-input.error[b-0y1m9mtnx0] {
    border-color: #dc2626;
    background: #fef2f2;
}

.rfp-payment-input.error:focus[b-0y1m9mtnx0] {
    border-color: #dc2626;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.15);
}


.mud-button-outlined.mud-button-danger[b-0y1m9mtnx0]{
    color: #eb1f1f;
    border-color: rgba(250, 5, 21, 0.781);
}


/* History Button */
.rfp-history-btn[b-0y1m9mtnx0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #f9fafb;
    color: #6b7280;
    font-size: 0.75rem;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.rfp-history-btn:hover[b-0y1m9mtnx0] {
    border-color: #6366f1;
    background: #eef2ff;
    color: #6366f1;
}

.rfp-history-btn:disabled[b-0y1m9mtnx0] {
    opacity: 0.35;
    cursor: default;
    border-color: #e5e7eb;
    background: #f3f4f6;
    color: #d1d5db;
}

/* ============================================
   Financial Summary - Sidebar
   ============================================ */

.rfp-financial-summary[b-0y1m9mtnx0] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 18px;
    border: 1px solid var(--app-border, #d1d5db);
    border-radius: 8px;
    background: var(--app-surface, #fff);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.rfp-financial-title[b-0y1m9mtnx0] {
    margin: 0 0 4px;
    font-size: 0.82rem;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--app-text-muted, #6b7280);
}

.rfp-financial-row[b-0y1m9mtnx0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.rfp-financial-row + .rfp-financial-row[b-0y1m9mtnx0] {
    padding-top: 4px;
    border-top: 1px dashed var(--app-border, #e5e7eb);
}

.rfp-financial-row-total[b-0y1m9mtnx0] {
    margin-top: 4px;
    padding-top: 10px;
    border-top-width: 2px;
    border-top-style: solid;
}

.rfp-financial-label[b-0y1m9mtnx0] {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--app-text-muted, #6b7280);
}

.rfp-financial-value[b-0y1m9mtnx0] {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--app-text, #0f172a);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.rfp-financial-value-accent[b-0y1m9mtnx0] {
    color: var(--app-primary, #6366f1);
}

/* ============================================
   Mobile Inline Summary
   ============================================ */

.rfp-mobile-summary[b-0y1m9mtnx0] {
    display: none;
    padding: 10px 14px;
    margin-bottom: 4px;
    border: 1px solid var(--app-border, #e5e7eb);
    border-radius: 8px;
    background: #f8fafc;
}

.rfp-mobile-summary-row[b-0y1m9mtnx0] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.rfp-mobile-summary .rfp-financial-label[b-0y1m9mtnx0] {
    font-size: 0.7rem;
}

.rfp-mobile-summary .rfp-financial-value[b-0y1m9mtnx0] {
    font-size: 0.82rem;
}

.rfp-mobile-summary .rfp-financial-value-accent[b-0y1m9mtnx0] {
    color: var(--app-primary, #6366f1);
}

.rfp-mobile-summary-separator[b-0y1m9mtnx0] {
    display: inline-block;
    width: 1px;
    height: 14px;
    background: var(--app-border, #d1d5db);
    margin: 0 4px;
}

/* ============================================
   Responsive
   ============================================ */

@media (max-width: 991.98px) {
    .rfp-external-items-layout[b-0y1m9mtnx0] {
        grid-template-columns: 1fr;
    }

    .rfp-external-items-sidebar[b-0y1m9mtnx0] {
        display: none;
    }

    .rfp-mobile-summary[b-0y1m9mtnx0] {
        display: block;
    }
}

@media (max-width: 576px) {
    .rfp-item-card-detail[b-0y1m9mtnx0] {
        grid-template-columns: 1fr 1fr;
        gap: 6px 14px;
    }

    .rfp-item-card-payment[b-0y1m9mtnx0] {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .rfp-item-card-header[b-0y1m9mtnx0] {
        flex-wrap: wrap;
        gap: 6px;
    }
}

/* ============================================
   Inline Payment History - Ledger-style
   ============================================ */

.rfp-card-history[b-0y1m9mtnx0] {
    margin-top: 4px;
    padding: 14px 16px;
    border: 1px dashed #d1d5db;
    border-radius: 6px;
    background: #f9fafb;
}

.rfp-card-history-title[b-0y1m9mtnx0] {
    margin-bottom: 10px;
    font-size: 0.75rem;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--app-text-muted, #6b7280);
}

.rfp-card-history-row[b-0y1m9mtnx0] {
    display: grid;
    grid-template-columns: 1fr 140px 130px;
    gap: 10px;
    align-items: baseline;
    padding: 4px 0;
    font-size: 0.82rem;
}

.rfp-card-history-row-top[b-0y1m9mtnx0] {
    padding-bottom: 6px;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 2px;
}

.rfp-card-history-desc[b-0y1m9mtnx0] {
    display: flex;
    gap: 8px;
    align-items: baseline;
    flex-wrap: wrap;
    color: var(--app-text, #0f172a);
    font-weight: 500;
}

.rfp-card-history-rfp[b-0y1m9mtnx0] {
    font-weight: 600;
    font-family: monospace;
    font-size: 0.78rem;
}

.rfp-card-history-date[b-0y1m9mtnx0] {
    font-size: 0.76rem;
    color: var(--app-text-muted, #6b7280);
}

.rfp-card-history-amount[b-0y1m9mtnx0] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--app-text, #0f172a);
}

.rfp-card-history-minus[b-0y1m9mtnx0] {
    color: #dc2626;
}

.rfp-card-history-balance[b-0y1m9mtnx0] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--app-text, #0f172a);
    font-family: monospace;
    font-size: 0.8rem;
}

.rfp-card-history-divider[b-0y1m9mtnx0] {
    margin: 6px 0;
    border-top: 1px solid #d1d5db;
}

.rfp-card-history-subtotal[b-0y1m9mtnx0] {
    font-weight: 600;
    color: var(--app-text-muted, #6b7280);
}

.rfp-card-history-subtotal .rfp-card-history-amount[b-0y1m9mtnx0] {
    color: var(--app-text-muted, #6b7280);
}

.rfp-card-history-final[b-0y1m9mtnx0] {
    padding-top: 6px;
    border-top: 2px solid var(--app-text, #0f172a);
    font-weight: 750;
    color: var(--app-primary, #6366f1);
}

.rfp-card-history-final .rfp-card-history-amount[b-0y1m9mtnx0] {
    color: var(--app-primary, #6366f1);
    font-weight: 750;
}

.rfp-external-review-shell[b-0y1m9mtnx0] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.rfp-external-review-shell :deep(.mud-alert)[b-0y1m9mtnx0] {
    margin-bottom: 0;
}

.rfp-submit-review-content[b-0y1m9mtnx0] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.rfp-submit-review-section[b-0y1m9mtnx0] {
    display: grid;
    gap: 14px;
}

.rfp-external-review-nav[b-0y1m9mtnx0] {
    min-width: 0;
}

.rfp-external-documents-shell[b-0y1m9mtnx0] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    --rfp-external-documents-panel-height: min(72vh, 780px);
}

.rfp-external-documents-shell :deep(.mud-alert)[b-0y1m9mtnx0] {
    margin-bottom: 0;
}

.form-actions .form-action-primary[b-0y1m9mtnx0] {
    margin-left: auto;
}

.rfp-external-documents-summary[b-0y1m9mtnx0] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.rfp-external-documents-summary-card[b-0y1m9mtnx0] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 18px;
    border: 1px solid #d7dee8;
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.rfp-external-documents-summary-card-success[b-0y1m9mtnx0] {
    border-color: rgba(15, 183, 107, 0.24);
    background: linear-gradient(180deg, #ffffff 0%, #f3fff8 100%);
}

.rfp-external-documents-summary-card-warning[b-0y1m9mtnx0] {
    border-color: rgba(255, 168, 0, 0.28);
    background: linear-gradient(180deg, #ffffff 0%, #fffaf0 100%);
}

.rfp-external-documents-summary-card-neutral[b-0y1m9mtnx0] {
    border-color: rgba(31, 111, 235, 0.18);
    background: linear-gradient(180deg, #ffffff 0%, #f5f9ff 100%);
}

.rfp-external-documents-callout[b-0y1m9mtnx0] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 18px;
    border: 1px dashed #d7dee8;
    border-radius: 12px;
    background: #fffaf0;
}

.rfp-external-documents-missing-list[b-0y1m9mtnx0] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.rfp-external-documents-missing-item[b-0y1m9mtnx0] {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: #fff3cd;
    color: #8a5a00;
    font-size: 0.84rem;
    font-weight: 600;
}

.rfp-external-documents-active-meta[b-0y1m9mtnx0] {
    display: grid;
    gap: 10px;
    margin-bottom: 14px;
    padding: 14px 16px;
    border: 1px solid #d7dee8;
    border-radius: 10px;
    background: #f8fbff;
}

.rfp-external-documents-active-row[b-0y1m9mtnx0] {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
}

.rfp-external-documents-active-label[b-0y1m9mtnx0] {
    color: #6b7280;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.rfp-external-documents-active-value[b-0y1m9mtnx0] {
    color: #0f172a;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.45;
}

.rfp-external-documents-list-accent[b-0y1m9mtnx0] {
    width: 4px;
    align-self: stretch;
    border-radius: 999px;
    background: linear-gradient(180deg, #d7dee8 0%, #c6d4e6 100%);
}

.document-upload-list-item-active .rfp-external-documents-list-accent[b-0y1m9mtnx0] {
    background: linear-gradient(180deg, #1f6feb 0%, #4f8df7 100%);
}

.rfp-external-documents-list-meta[b-0y1m9mtnx0] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin-top: 6px;
    color: #64748b;
    font-size: 0.78rem;
    line-height: 1.4;
}

.rfp-external-documents-list-arrow[b-0y1m9mtnx0] {
    align-self: center;
    color: #94a3b8;
    font-size: 1.15rem;
    transition: transform 0.18s ease, color 0.18s ease;
}

.document-upload-list-item-active .rfp-external-documents-list-arrow[b-0y1m9mtnx0],
.document-upload-list-item:hover .rfp-external-documents-list-arrow[b-0y1m9mtnx0] {
    color: #1f6feb;
    transform: translateX(2px);
}

.rfp-external-documents-current-file[b-0y1m9mtnx0] {
    border: 1px solid #d7dee8;
    border-radius: 10px;
    background: #f8fbff;
}

.rfp-external-documents-current-actions[b-0y1m9mtnx0] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.rfp-external-documents-current-action[b-0y1m9mtnx0] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 5px;
    min-height: 40px;
    height: auto;
    min-width: 0;
    width: 100%;
    padding: 9px 6px;
    border-radius: 10px;
    border: 1px solid #d7dee8;
    background: #ffffff;
    color: #1f6feb;
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
    white-space: normal;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.rfp-external-documents-current-action:hover:not(:disabled):not(.is-disabled)[b-0y1m9mtnx0] {
    border-color: #bcd3ff;
    background: #f8fbff;
    box-shadow: 0 8px 20px rgba(31, 111, 235, 0.08);
}

.rfp-external-documents-current-action:disabled[b-0y1m9mtnx0],
.rfp-external-documents-current-action.is-disabled[b-0y1m9mtnx0] {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

.rfp-external-documents-current-action-preview[b-0y1m9mtnx0] {
    border-color: #d9d0ff;
    color: #6d28d9;
}

.rfp-external-documents-current-action-preview:hover:not(:disabled)[b-0y1m9mtnx0] {
    border-color: #c4b5fd;
    background: #f5f3ff;
    color: #5b21b6;
}

.rfp-external-documents-current-action-edit[b-0y1m9mtnx0] {
    border-color: #cfe0ff;
    color: #1f6feb;
}

.rfp-external-documents-current-action-delete[b-0y1m9mtnx0] {
    border-color: #ffc9c9;
    color: #dc2626;
}

.rfp-external-documents-current-action-delete:hover:not(:disabled)[b-0y1m9mtnx0] {
    border-color: #fca5a5;
    background: #fff5f5;
    color: #b91c1c;
}

.rfp-external-documents-current-action-input[b-0y1m9mtnx0] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.rfp-external-documents-current-action .ki-filled[b-0y1m9mtnx0] {
    flex: 0 0 auto;
    font-size: 0.85rem;
}

.rfp-external-documents-current-action span[b-0y1m9mtnx0] {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
}

.rfp-external-documents-empty-state[b-0y1m9mtnx0] {
    margin-top: 14px;
    padding: 14px 16px;
    border: 1px dashed #d7dee8;
    border-radius: 10px;
    background: #f8fafc;
    color: #64748b;
    font-size: 0.9rem;
    line-height: 1.5;
}

.rfp-external-review-summary[b-0y1m9mtnx0] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.rfp-external-summary-card[b-0y1m9mtnx0] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 18px;
    border: 1px solid #d7dee8;
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.rfp-external-summary-label[b-0y1m9mtnx0] {
    color: #6b7280;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.rfp-external-summary-value[b-0y1m9mtnx0] {
    color: #0f172a;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
}

.rfp-external-history-list[b-0y1m9mtnx0] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.rfp-external-history-item[b-0y1m9mtnx0] {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.rfp-external-history-marker[b-0y1m9mtnx0] {
    position: relative;
    display: inline-flex;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    border-radius: 999px;
    background: #dceaff;
    border: 1px solid rgba(31, 111, 235, 0.22);
}

.rfp-external-history-marker[b-0y1m9mtnx0]::after {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 999px;
    background: #1f6feb;
}

.rfp-external-history-copy[b-0y1m9mtnx0] {
    min-width: 0;
    padding-bottom: 14px;
    border-bottom: 1px dashed #d7dee8;
}

.rfp-external-history-item:last-child .rfp-external-history-copy[b-0y1m9mtnx0] {
    padding-bottom: 0;
    border-bottom: 0;
}

.rfp-external-documents-list-panel .document-upload-list-header[b-0y1m9mtnx0] {
    padding-bottom: 14px;
    border-bottom: 1px solid #e2e8f0;
}

.rfp-external-documents-shell .document-upload-workspace[b-0y1m9mtnx0] {
    align-items: start;
    grid-template-columns: minmax(320px, 0.9fr) minmax(340px, 1.1fr);
}

.rfp-external-documents-list-panel[b-0y1m9mtnx0] {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    height: var(--rfp-external-documents-panel-height);
    border: 0 solid var(--app-border);
    box-shadow: none;
}

.rfp-external-documents-list-panel .document-upload-list[b-0y1m9mtnx0] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
    overflow-y: auto;
    padding-right: 6px;
    scrollbar-gutter: stable;
}

.rfp-external-documents-list-panel .document-upload-list[b-0y1m9mtnx0]::-webkit-scrollbar,
.rfp-external-documents-sticky-panel[b-0y1m9mtnx0]::-webkit-scrollbar {
    width: 10px;
}

.rfp-external-documents-list-panel .document-upload-list[b-0y1m9mtnx0]::-webkit-scrollbar-thumb,
.rfp-external-documents-sticky-panel[b-0y1m9mtnx0]::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.55);
    background-clip: padding-box;
}

.rfp-external-documents-list-panel .document-upload-list[b-0y1m9mtnx0]::-webkit-scrollbar-track,
.rfp-external-documents-sticky-panel[b-0y1m9mtnx0]::-webkit-scrollbar-track {
    background: transparent;
}

.rfp-external-documents-group[b-0y1m9mtnx0] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rfp-external-documents-group + .rfp-external-documents-group[b-0y1m9mtnx0] {
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px dashed #d7dee8;
}

.rfp-external-documents-group-header[b-0y1m9mtnx0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 10px 12px;
    border: 1px solid #d7dee8;
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.rfp-external-documents-group-header .detail-title[b-0y1m9mtnx0] {
    margin-bottom: 2px;
    font-size: 0.92rem;
}

.rfp-external-documents-group-header .detail-subtitle[b-0y1m9mtnx0] {
    font-size: 0.78rem;
    line-height: 1.35;
}

.rfp-external-documents-list-panel .document-upload-list-item[b-0y1m9mtnx0] {
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.rfp-external-documents-list-panel .document-upload-list-item:hover[b-0y1m9mtnx0] {
    border-color: rgba(31, 111, 235, 0.22);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
    transform: translateY(-1px);
}

.rfp-external-documents-list-panel .document-upload-list-item-active[b-0y1m9mtnx0] {
    border-color: rgba(31, 111, 235, 0.24);
    box-shadow: 0 16px 32px rgba(31, 111, 235, 0.12);
}

.rfp-external-documents-list-panel .document-upload-list-main[b-0y1m9mtnx0] {
    display: grid;
    grid-template-columns: 4px 34px minmax(0, 1fr) 20px;
    gap: 12px;
    align-items: stretch;
}

.rfp-external-documents-list-panel .document-upload-list-content[b-0y1m9mtnx0] {
    padding-right: 6px;
}

.rfp-external-documents-list-panel .document-upload-list-actions[b-0y1m9mtnx0] {
    margin-left: 0;
    padding-top: 10px;
    border-top: 1px dashed #d7dee8;
}

.rfp-external-documents-list-panel .document-upload-action-delete[b-0y1m9mtnx0] {
    min-width: 0;
}

.rfp-external-documents-list-panel .document-upload-action-delete[b-0y1m9mtnx0]::part(base) {
    min-width: 0;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 10px;
}

.rfp-external-documents-list-panel .document-upload-action-delete .ki-filled[b-0y1m9mtnx0] {
    font-size: 1.1rem;
    line-height: 1;
}

.rfp-external-documents-list-panel .document-upload-list-status[b-0y1m9mtnx0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin: auto 0;
    border-radius: 10px;
    border: 1px solid #d7dee8;
    background: #f8fafc;
    color: #64748b;
}

.rfp-external-documents-list-panel .document-upload-list-status-success[b-0y1m9mtnx0] {
    border-color: rgba(15, 183, 107, 0.2);
    background: #ecfdf3;
    color: #0f9f63;
}

.rfp-external-documents-list-panel .document-upload-list-status-warning[b-0y1m9mtnx0] {
    border-color: rgba(255, 168, 0, 0.22);
    background: #fff8e1;
    color: #b7791f;
}

.rfp-external-documents-list-panel .document-upload-list-status .ki-filled[b-0y1m9mtnx0] {
    font-size: 1.1rem;
    line-height: 1;
}

.rfp-external-documents-sticky-panel .document-upload-dropzone[b-0y1m9mtnx0] {
    position: relative;
    border-radius: 18px;
    background:
        radial-gradient(circle at top right, rgba(31, 111, 235, 0.08), transparent 30%),
        linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.rfp-external-documents-sticky-panel[b-0y1m9mtnx0] {
    position: sticky;
    top: 24px;
    align-self: start;
    display: flex;
    flex-direction: column;
    height: var(--rfp-external-documents-panel-height);
    overflow-y: auto;
}

.rfp-external-documents-sticky-panel .document-upload-list-header[b-0y1m9mtnx0] {
    position: sticky;
    top: 0;
    z-index: 2;
    margin: -16px -16px 18px;
    padding: 16px 16px 14px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(10px);
}

.rfp-external-documents-sticky-panel .document-upload-dropzone[b-0y1m9mtnx0] {
    min-height: clamp(220px, calc(100vh - 520px), 340px);
}

.rfp-external-documents-upload-progress[b-0y1m9mtnx0] {
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid #d7dee8;
    border-radius: 12px;
    background: #f8fbff;
}

.rfp-external-documents-upload-progress .upload-field-progress-row[b-0y1m9mtnx0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.rfp-external-documents-upload-progress .upload-field-hint:first-child[b-0y1m9mtnx0] {
    color: #0f172a;
    font-size: 0.9rem;
    font-weight: 700;
}

.rfp-external-documents-upload-progress .upload-field-hint:last-child[b-0y1m9mtnx0] {
    color: #1f6feb;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.rfp-external-documents-upload-progress .progress[b-0y1m9mtnx0] {
    position: relative;
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: #dceaff;
}

.rfp-external-documents-upload-progress .progress-bar[b-0y1m9mtnx0] {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #1f6feb 0%, #67a0ff 100%);
    background-size: 1rem 1rem;
}

.rfp-external-documents-upload-progress .progress-bar-striped[b-0y1m9mtnx0] {
    background-image:
        linear-gradient(
            45deg,
            rgba(255, 255, 255, 0.22) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255, 255, 255, 0.22) 50%,
            rgba(255, 255, 255, 0.22) 75%,
            transparent 75%,
            transparent);
}

.rfp-external-documents-upload-progress .progress-bar-animated[b-0y1m9mtnx0] {
    animation: rfp-external-upload-stripes-b-0y1m9mtnx0 1s linear infinite;
}

@keyframes rfp-external-upload-stripes-b-0y1m9mtnx0 {
    from {
        background-position: 1rem 0;
    }

    to {
        background-position: 0 0;
    }
}

.rfp-external-documents-sticky-panel .document-upload-drop-icon[b-0y1m9mtnx0] {
    width: 64px;
    height: 64px;
    margin: 0 auto 10px;
    border-radius: 18px;
    border: 1px solid rgba(31, 111, 235, 0.14);
    background: linear-gradient(180deg, #eef5ff 0%, #dceaff 100%);
    color: #1f6feb;
    box-shadow: 0 10px 24px rgba(31, 111, 235, 0.12);
}

.rfp-external-documents-sticky-panel .document-upload-drop-icon .ki-filled[b-0y1m9mtnx0] {
    font-size: 2rem;
    line-height: 1;
}

@media (max-width: 991.98px) {
    .rfp-external-documents-summary[b-0y1m9mtnx0] {
        grid-template-columns: 1fr;
    }

    .rfp-external-documents-active-row[b-0y1m9mtnx0] {
        grid-template-columns: 1fr;
    }

    .rfp-external-documents-shell .document-upload-workspace[b-0y1m9mtnx0] {
        grid-template-columns: 1fr;
    }

    .rfp-external-documents-list-panel[b-0y1m9mtnx0],
    .rfp-external-documents-sticky-panel[b-0y1m9mtnx0] {
        height: auto;
    }

    .rfp-external-documents-sticky-panel[b-0y1m9mtnx0] {
        order: -1;
        position: sticky;
        top: 12px;
        z-index: 5;
        margin-bottom: 14px;
        max-height: min(68vh, 560px);
        overflow-y: auto;
        box-shadow: 0 18px 34px rgba(15, 23, 42, 0.14);
    }

    .rfp-external-documents-list-panel .document-upload-list-main[b-0y1m9mtnx0] {
        grid-template-columns: 4px 34px minmax(0, 1fr);
    }

    .rfp-external-documents-list-panel .document-upload-list[b-0y1m9mtnx0] {
        overflow: visible;
        padding-right: 0;
    }

    .rfp-external-documents-sticky-panel .document-upload-list-header[b-0y1m9mtnx0] {
        margin: -16px -16px 18px;
        padding: 16px 16px 14px;
    }

    .rfp-external-documents-group-header[b-0y1m9mtnx0] {
        flex-direction: column;
        align-items: flex-start;
    }

    .rfp-external-documents-list-arrow[b-0y1m9mtnx0] {
        display: none;
    }

    .rfp-external-review-summary[b-0y1m9mtnx0] {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 1532px) {
    .rfp-external-documents-current-actions[b-0y1m9mtnx0] {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .rfp-external-documents-current-action[b-0y1m9mtnx0] {
        min-height: 42px;
        padding: 10px 12px;
        font-size: 0.88rem;
    }
}

.document-preview-modal-backdrop[b-0y1m9mtnx0] {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.55);
    padding: 24px;
}

.document-preview-modal[b-0y1m9mtnx0] {
    display: flex;
    flex-direction: column;
    width: min(900px, 100%);
    height: min(85vh, 1000px);
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.35);
}

.document-preview-modal-header[b-0y1m9mtnx0] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
    flex: 0 0 auto;
}

.document-preview-modal-title[b-0y1m9mtnx0] {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.document-preview-modal-action[b-0y1m9mtnx0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #475569;
    cursor: pointer;
    flex: 0 0 auto;
}

.document-preview-modal-action:hover[b-0y1m9mtnx0] {
    background: #f1f5f9;
}

.document-preview-modal-body[b-0y1m9mtnx0] {
    flex: 1;
    min-height: 0;
    overflow: auto;
    background: #f9fafb;
    display: flex;
    flex-direction: column;
}

.document-preview-modal-pdf[b-0y1m9mtnx0] {
    width: 100%;
    height: 100%;
    overflow: auto;
    padding: 1rem;
    box-sizing: border-box;
}

.document-preview-modal-image[b-0y1m9mtnx0] {
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    object-fit: contain;
}

.document-preview-modal-fallback[b-0y1m9mtnx0] {
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 2rem;
    text-align: center;
    color: #6b7280;
}

.documents-busy-overlay[b-0y1m9mtnx0] {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: grid;
    place-items: center;
    padding: 16px;
    background: rgba(15, 23, 42, 0.45);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    animation: documents-busy-fade-b-0y1m9mtnx0 0.18s ease-out both;
}

.documents-busy-card[b-0y1m9mtnx0] {
    --busy-accent: var(--app-primary, #1f6feb);
    display: grid;
    justify-items: center;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    width: min(428px, 100%);
    padding: 28px 28px 20px;
    text-align: center;
    color: var(--app-text, #172033);
    background: #fff;
    border: 1px solid var(--app-border, #d8dee7);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
    animation: documents-busy-pop-b-0y1m9mtnx0 0.26s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}

.documents-busy-icon[b-0y1m9mtnx0] {
    position: relative;
    display: grid;
    place-items: center;
    width: 96px;
    height: 96px;
    margin-bottom: 6px;
}

.documents-busy-ring[b-0y1m9mtnx0] {
    position: absolute;
    inset: 12px;
    border: 2px solid var(--busy-accent);
    border-radius: 50%;
    opacity: 0;
    animation: documents-busy-ripple-b-0y1m9mtnx0 1.8s ease-out infinite;
}

.documents-busy-ring--delay[b-0y1m9mtnx0] { animation-delay: 0.9s; }

.documents-busy-badge[b-0y1m9mtnx0] {
    position: relative;
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    color: #fff;
    background: var(--busy-accent);
    background: linear-gradient(145deg, var(--busy-accent), color-mix(in srgb, var(--busy-accent) 68%, #0b1b3a));
    border-radius: 50%;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.22);
}

.documents-busy-badge i[b-0y1m9mtnx0] {
    font-size: 30px;
    line-height: 1;
    animation: documents-busy-float-b-0y1m9mtnx0 1.3s ease-in-out infinite;
}

.documents-busy-title[b-0y1m9mtnx0] {
    max-width: 100%;
    overflow-wrap: anywhere;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.documents-busy-detail[b-0y1m9mtnx0] {
    max-width: 100%;
    overflow-wrap: anywhere;
    font-size: 0.85rem;
    color: var(--app-text-muted, #5f6b7a);
}

.documents-busy-file[b-0y1m9mtnx0] {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    margin-top: 10px;
    padding: 8px 12px;
    font-size: 0.82rem;
    background: #f7f9fc;
    border: 1px solid var(--app-border, #d8dee7);
    border-radius: 10px;
}

.documents-busy-file i[b-0y1m9mtnx0] {
    flex-shrink: 0;
    color: var(--busy-accent);
}

.documents-busy-file-name[b-0y1m9mtnx0] {
    min-width: 0;
    overflow: hidden;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.documents-busy-file-size[b-0y1m9mtnx0] {
    flex-shrink: 0;
    color: var(--app-text-muted, #5f6b7a);
}

.documents-busy-track[b-0y1m9mtnx0] {
    position: relative;
    width: 100%;
    height: 6px;
    margin-top: 14px;
    overflow: hidden;
    background: #e6ecf5;
    border-radius: 999px;
}

.documents-busy-bar[b-0y1m9mtnx0] {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 38%;
    background: var(--busy-accent);
    border-radius: 999px;
    animation: documents-busy-slide-b-0y1m9mtnx0 1.2s ease-in-out infinite;
}

.documents-busy-hint[b-0y1m9mtnx0] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    font-size: 0.75rem;
    color: var(--app-text-muted, #5f6b7a);
}

@keyframes documents-busy-fade-b-0y1m9mtnx0 {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes documents-busy-pop-b-0y1m9mtnx0 {
    from { opacity: 0; transform: translateY(8px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes documents-busy-ripple-b-0y1m9mtnx0 {
    0% { opacity: 0.55; transform: scale(0.7); }
    100% { opacity: 0; transform: scale(1.35); }
}

@keyframes documents-busy-float-b-0y1m9mtnx0 {
    0%, 100% { transform: translateY(3px); }
    50% { transform: translateY(-4px); }
}

@keyframes documents-busy-slide-b-0y1m9mtnx0 {
    from { transform: translateX(-100%); }
    to { transform: translateX(270%); }
}

@media (prefers-reduced-motion: reduce) {
    .documents-busy-overlay[b-0y1m9mtnx0],
    .documents-busy-card[b-0y1m9mtnx0],
    .documents-busy-ring[b-0y1m9mtnx0],
    .documents-busy-badge i[b-0y1m9mtnx0],
    .documents-busy-bar[b-0y1m9mtnx0] {
        animation: none;
    }

    .documents-busy-ring[b-0y1m9mtnx0] { display: none; }
    .documents-busy-bar[b-0y1m9mtnx0] { width: 100%; opacity: 0.55; }
}

.documents-busy-card.is-confirm[b-0y1m9mtnx0] { --busy-accent: #d97706; }

.documents-busy-confirm-actions[b-0y1m9mtnx0] {
    display: flex;
    gap: 10px;
    width: 100%;
    margin-top: 18px;
}

.documents-busy-confirm-btn[b-0y1m9mtnx0] {
    flex: 1;
    padding: 10px 16px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.documents-busy-confirm-btn-secondary[b-0y1m9mtnx0] {
    background: #ffffff;
    border-color: var(--app-border, #d8dee7);
    color: #475569;
}

.documents-busy-confirm-btn-secondary:hover[b-0y1m9mtnx0] {
    background: #f1f5f9;
}

.documents-busy-confirm-btn-primary[b-0y1m9mtnx0] {
    background: var(--busy-accent);
    color: #ffffff;
}

.documents-busy-confirm-btn-primary:hover[b-0y1m9mtnx0] {
    opacity: 0.9;
}

/* Step 4 - finance review layout */
.rfp-external-review-columns[b-0y1m9mtnx0] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 18px;
    border-block: 1px solid #d7dee8;
}

.rfp-external-review-column[b-0y1m9mtnx0] {
    min-width: 0;
    padding: 20px 24px;
}

.rfp-external-review-column + .rfp-external-review-column[b-0y1m9mtnx0] {
    border-left: 1px solid #d7dee8;
}

.rfp-external-review-column-title[b-0y1m9mtnx0] {
    margin: 0 0 16px;
    color: #172033;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.rfp-external-review-column .rfp-detail-cell[b-0y1m9mtnx0] {
    margin-top: 14px;
}

.rfp-external-review-column .rfp-detail-cell:first-of-type[b-0y1m9mtnx0] {
    margin-top: 0;
}

.rfp-external-review-description[b-0y1m9mtnx0] {
    padding-top: 18px;
}

.rfp-external-responsive-table-shell[b-0y1m9mtnx0] {
    border: 1px solid #d7dee8;
    border-radius: 10px;
    scrollbar-gutter: stable;
}

.rfp-external-responsive-table[b-0y1m9mtnx0] {
    width: 100%;
}

.rfp-external-financial-table[b-0y1m9mtnx0] {
    min-width: 1420px;
}

.rfp-external-documents-review-table[b-0y1m9mtnx0] {
    min-width: 680px;
}

.rfp-external-responsive-table thead th[b-0y1m9mtnx0] {
    position: sticky;
    top: 0;
    z-index: 1;
    white-space: nowrap;
}

.rfp-external-responsive-table td[b-0y1m9mtnx0] {
    overflow-wrap: anywhere;
}

@media (max-width: 991.98px) {
    .rfp-external-review-columns[b-0y1m9mtnx0] {
        grid-template-columns: 1fr;
    }

    .rfp-external-review-column[b-0y1m9mtnx0] {
        padding: 18px 0;
    }

    .rfp-external-review-column + .rfp-external-review-column[b-0y1m9mtnx0] {
        border-top: 1px solid #d7dee8;
        border-left: 0;
    }
}

@media (max-width: 767.98px) {
    .rfp-external-responsive-table-shell[b-0y1m9mtnx0] {
        overflow: visible;
        border: 0;
        border-radius: 0;
    }

    .rfp-external-responsive-table[b-0y1m9mtnx0],
    .rfp-external-responsive-table tbody[b-0y1m9mtnx0],
    .rfp-external-responsive-table tr[b-0y1m9mtnx0],
    .rfp-external-responsive-table td[b-0y1m9mtnx0] {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .rfp-external-responsive-table thead[b-0y1m9mtnx0] {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .rfp-external-responsive-table tbody[b-0y1m9mtnx0] {
        display: grid;
        gap: 12px;
    }

    .rfp-external-responsive-table tbody tr[b-0y1m9mtnx0] {
        padding: 8px 14px;
        border: 1px solid #d7dee8;
        border-radius: 10px;
        background: #fff;
    }

    .rfp-external-responsive-table tbody td[b-0y1m9mtnx0] {
        display: grid;
        grid-template-columns: minmax(120px, 0.8fr) minmax(0, 1.2fr);
        gap: 14px;
        padding: 9px 0;
        border-bottom: 1px dashed #e2e8f0;
        text-align: left !important;
    }

    .rfp-external-responsive-table tbody td:last-child[b-0y1m9mtnx0] {
        border-bottom: 0;
    }

    .rfp-external-responsive-table tbody td[b-0y1m9mtnx0]::before {
        content: attr(data-label);
        color: #64748b;
        font-size: 0.72rem;
        font-weight: 800;
        letter-spacing: 0.035em;
        text-transform: uppercase;
    }
}
.rfp-external-master-data-notice[b-0y1m9mtnx0] {
    margin: 4px 0 6px;
    color: #dc2626;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.4;
}
.rfp-external-return-identity[b-0y1m9mtnx0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 5px 0 16px;
    padding: 10px 14px;
    border-left: 4px solid #d97706;
    background: #fffbeb;
    color: #92400e;
}

.rfp-external-return-identity-label[b-0y1m9mtnx0] {
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.05em;
}

.rfp-external-return-identity-number[b-0y1m9mtnx0] {
    color: #172033;
    font-size: 0.95rem;
    font-weight: 800;
}
.rfp-external-document-review-action[b-0y1m9mtnx0] {
    min-height: 32px;
    padding: 6px 10px;
    white-space: nowrap;
}

/* Wizard External action reachability and overflow containment */
.rfp-external-review-shell[b-0y1m9mtnx0],
.rfp-external-review-summary[b-0y1m9mtnx0],
.rfp-external-responsive-table-shell[b-0y1m9mtnx0] {
    min-width: 0;
    max-width: 100%;
}

.rfp-external-responsive-table-shell[b-0y1m9mtnx0] {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
}

.wizard-form-actions[b-0y1m9mtnx0] {
    position: sticky;
    bottom: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid #d7dee8;
    background: rgba(255, 255, 255, .96);
    /* box-shadow: 0 -8px 24px rgba(15, 23, 42, .08); tidak digunakan */
    backdrop-filter: blur(10px);
}

.rfp-external-return-identity[b-0y1m9mtnx0] {
    gap: 10px;
    flex-wrap: wrap;
}

.rfp-global-discussion-action[b-0y1m9mtnx0] {
    margin-left: auto;
}

.bank-master-actions[b-0y1m9mtnx0] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0 12px;
}

@media (max-width: 767.98px) {
    .wizard-form-actions[b-0y1m9mtnx0] {
        display: grid;
        grid-template-columns: 1fr;
    }

    .wizard-form-actions .mud-button[b-0y1m9mtnx0] {
        width: 100%;
        min-height: 42px;
        margin-left: 0 !important;
    }

    .wizard-form-actions .form-action-primary[b-0y1m9mtnx0] {
        order: -1;
    }

    .rfp-global-discussion-action[b-0y1m9mtnx0],
    .bank-master-actions > *[b-0y1m9mtnx0] {
        width: 100%;
        margin-left: 0;
    }
}
/* Unified field-label system for the external RFP wizard. */
.rfp-form-field > .rfp-form-label[b-0y1m9mtnx0] {
    display: block;
    margin: 0 0 6px;
    color: var(--app-text, #0f172a);
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.25;
}

.rfp-form-field > .rfp-form-label .required-marker[b-0y1m9mtnx0] {
    color: var(--app-error, #dc2626);
    font-size: inherit;
    font-weight: 700;
}
.button-loading-spinner[b-0y1m9mtnx0] {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
    border-width: 2px;
    border-color: currentColor;
    border-right-color: transparent;
}

.form-action-primary[b-0y1m9mtnx0] {
    gap: 0.5rem;
}

.rfp-form-field.has-validation-error > .rfp-form-label[b-0y1m9mtnx0] {
    color: var(--app-error, #dc2626);
}

.rfp-form-field.has-validation-error .bank-selection-card[b-0y1m9mtnx0],
.rfp-form-field.has-validation-error .bank-selection-empty[b-0y1m9mtnx0] {
    border-color: var(--app-error, #dc2626);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

.rfp-form-field[b-0y1m9mtnx0]  igc-date-range-picker[invalid] {
    --ig-input-border-color: var(--app-error, #dc2626);
    --ig-input-focus-border-color: var(--app-error, #dc2626);
    --ig-input-hover-border-color: var(--app-error, #dc2626);
}

.rfp-form-field[b-0y1m9mtnx0]  igc-date-range-picker[invalid]::part(label) {
    color: var(--app-error, #dc2626);
}

@media (prefers-reduced-motion: reduce) {
    .button-loading-spinner[b-0y1m9mtnx0] {
        animation-duration: 0.01ms;
        animation-iteration-count: 1;
    }
}

.rfp-external-vendor-search[b-0y1m9mtnx0] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: min(100%, 460px);
}

.rfp-external-vendor-search .kt-input[b-0y1m9mtnx0] {
    flex: 1 1 auto;
    min-width: 0;
}

.rfp-external-vendor-table tbody tr:nth-child(even) td[b-0y1m9mtnx0] {
    background: var(--budget-grid-row-even, #f8fafc);
}

.rfp-external-vendor-pagination[b-0y1m9mtnx0],
.rfp-external-vendor-pagination-actions[b-0y1m9mtnx0] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rfp-external-vendor-pagination[b-0y1m9mtnx0] {
    justify-content: space-between;
    margin-top: 12px;
    color: var(--app-text-muted, #64748b);
    font-size: 0.875rem;
}

@media (max-width: 767.98px) {
    .rfp-external-vendor-search[b-0y1m9mtnx0],
    .rfp-external-vendor-pagination[b-0y1m9mtnx0] {
        align-items: stretch;
        flex-direction: column;
        width: 100%;
    }

    .rfp-external-vendor-pagination-actions[b-0y1m9mtnx0] {
        justify-content: space-between;
    }
}
/* /Component/Page/PaymentRequest/RfpExternal/RfpExternalList.razor.rz.scp.css */
.rfp-list-toolbar[b-bjhjt67e5o] {
    display: block;
    margin-bottom: 12px;
}

.rfp-list-toolbar-top[b-bjhjt67e5o] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    flex-wrap: nowrap;
}

.rfp-list-period-field[b-bjhjt67e5o] {
    flex: 0 1 260px;
    min-width: 220px;
}

.rfp-list-search-shell[b-bjhjt67e5o] {
    display: none;
    flex: 0 1 420px;
    max-width: 420px;
    min-width: 280px;
}

.rfp-list-search-input[b-bjhjt67e5o] {
    width: 100%;
}

.rfp-list-search[b-bjhjt67e5o] {
    width: 100%;
    min-height: 42px;
    padding: 0 14px;
    border: 1px solid var(--app-border-strong);
    border-radius: 10px;
    background: #fff;
    color: var(--app-text);
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.rfp-list-search[b-bjhjt67e5o]::placeholder {
    color: var(--app-text-muted);
}

.rfp-list-search:focus[b-bjhjt67e5o] {
    border-color: var(--app-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.rfp-list-toolbar-actions[b-bjhjt67e5o] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.rfp-list-toolbar-bottom-actions[b-bjhjt67e5o] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-left: auto;
}

.rfp-list-create-button[b-bjhjt67e5o] {
    color: #fff;
    text-decoration: none;
}

.rfp-list-create-button:hover[b-bjhjt67e5o],
.rfp-list-create-button:focus[b-bjhjt67e5o] {
    color: #fff;
    text-decoration: none;
}

.rfp-status-chip-group[b-bjhjt67e5o] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    width: auto;
}

.rfp-status-chip[b-bjhjt67e5o] {
    min-width: 0;
    gap: 6px;
}

.rfp-status-chip:hover[b-bjhjt67e5o] {
    border-color: var(--app-primary);
    color: var(--app-primary);
}

.rfp-status-chip.active[b-bjhjt67e5o] {
    border-color: #70BE45;
    background: #70BE45;
    color: #fff;
    box-shadow: 0 8px 18px rgba(112, 190, 69, 0.18);
}

.kt-btn.is-active[b-bjhjt67e5o] {
    border-color: var(--app-primary);
    color: var(--app-primary);
    background: rgba(37, 99, 235, 0.08);
}

.rfp-filter-drawer-body[b-bjhjt67e5o] {
    display: grid;
    gap: 14px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    align-content: start;
    grid-auto-rows: max-content;
}

.rfp-filter-field[b-bjhjt67e5o] {
    display: grid;
    gap: 6px;
}

.rfp-filter-label[b-bjhjt67e5o] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--app-text-muted);
}

.rfp-filter-input[b-bjhjt67e5o] {
    width: 100%;
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid var(--app-border-strong);
    border-radius: 10px;
    background: #fff;
    color: var(--app-text);
    outline: none;
}

.rfp-filter-input:focus[b-bjhjt67e5o] {
    border-color: var(--app-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.rfp-filter-date-picker[b-bjhjt67e5o] {
    display: block;
    width: 100%;
}

.rfp-filter-note[b-bjhjt67e5o] {
    margin: 4px 0 0;
    color: var(--app-text-muted);
    font-size: 0.85rem;
    line-height: 1.5;
}

.rfp-action-drawer-shell[b-bjhjt67e5o] {
    display: grid;
    gap: 18px;
    align-content: start;
    grid-auto-rows: max-content;
}

.rfp-action-summary-card[b-bjhjt67e5o] {
    display: grid;
    gap: 16px;
    padding: 18px;
    border: 1px solid var(--app-border-strong);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(22, 163, 74, 0.08), rgba(255, 255, 255, 0.98));
}

.rfp-action-summary-top[b-bjhjt67e5o] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.rfp-action-summary-eyebrow[b-bjhjt67e5o] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #15803d;
}

.rfp-action-summary-title[b-bjhjt67e5o] {
    margin-top: 6px;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--app-text);
    word-break: break-word;
}

.rfp-action-summary-subtitle[b-bjhjt67e5o] {
    margin-top: 6px;
    color: var(--app-text-muted);
    line-height: 1.5;
    word-break: break-word;
}

.rfp-action-summary-metrics[b-bjhjt67e5o] {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rfp-action-metric-card[b-bjhjt67e5o],
.rfp-action-note-card[b-bjhjt67e5o] {
    padding: 14px 16px;
    border: 1px solid var(--app-border-strong);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.92);
}

.rfp-action-metric-label[b-bjhjt67e5o] {
    display: block;
    margin-bottom: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--app-text-muted);
}

.rfp-action-metric-value[b-bjhjt67e5o] {
    display: block;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--app-text);
    word-break: break-word;
}

.rfp-action-section[b-bjhjt67e5o] {
    display: grid;
    gap: 12px;
}

.rfp-action-section-title[b-bjhjt67e5o] {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--app-text-muted);
}

.rfp-action-detail-grid[b-bjhjt67e5o] {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
}

.rfp-action-detail-grid-single[b-bjhjt67e5o] {
    grid-template-columns: 1fr;
}

.rfp-action-detail-row[b-bjhjt67e5o] {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.rfp-action-detail-label[b-bjhjt67e5o] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--app-text-muted);
}

.rfp-action-detail-value[b-bjhjt67e5o] {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--app-text);
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.rfp-action-note-card[b-bjhjt67e5o] {
    color: var(--app-text);
    line-height: 1.6;
    word-break: break-word;
}

@media (max-width: 767.98px) {
    .rfp-list-toolbar-top[b-bjhjt67e5o] {
        align-items: stretch;
        flex-wrap: wrap;
    }

    .rfp-list-toolbar-actions[b-bjhjt67e5o],
    .rfp-list-toolbar-bottom-actions[b-bjhjt67e5o] {
        width: 100%;
    }

    .rfp-list-toolbar-actions > *[b-bjhjt67e5o],
    .rfp-list-toolbar-bottom-actions > *[b-bjhjt67e5o] {
        flex: 1 1 0;
    }

    .rfp-status-chip-group[b-bjhjt67e5o] {
        flex: 1 1 100%;
        width: 100%;
    }

    .rfp-status-chip-group .rfp-status-chip[b-bjhjt67e5o] {
        flex: 1 1 0;
    }

    .rfp-list-search-shell[b-bjhjt67e5o] {
        flex-basis: 100%;
        max-width: none;
    }

    .rfp-list-period-field[b-bjhjt67e5o] {
        flex-basis: 100%;
        min-width: 0;
    }

    .rfp-action-detail-grid[b-bjhjt67e5o],
    .rfp-action-summary-metrics[b-bjhjt67e5o] {
        grid-template-columns: 1fr;
    }
}

.rfp-action-summary-top > div[b-bjhjt67e5o],
.rfp-action-section dd[b-bjhjt67e5o] {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}
/* /Component/Page/PaymentRequest/RfpExternal/RfpExternalVendorHistory.razor.rz.scp.css */
.history-page-header[b-8i3iz24q3c] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.history-page-header-main[b-8i3iz24q3c] {
    min-width: 0;
}

.history-page-actions[b-8i3iz24q3c] {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    flex-shrink: 0;
}

.history-page-breadcrumb[b-8i3iz24q3c] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    font-size: 12px;
    color: #64748b;
}

.history-page-breadcrumb-sep[b-8i3iz24q3c] {
    color: #cbd5e1;
}

.history-layout[b-8i3iz24q3c] {
    display: grid;
    grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    min-height: calc(100vh - 220px);
}

.history-sidebar[b-8i3iz24q3c] {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 220px);
    overflow: hidden;
    border: 1px solid rgba(203, 202, 205, 0.87);
    border-radius: 14px;
    background: #fff;
}

.history-sidebar-header[b-8i3iz24q3c] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 16px 12px;
    border-bottom: 1px solid rgba(203, 202, 205, 0.55);
    background: #fff;
}

.history-sidebar-title[b-8i3iz24q3c] {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
}

.history-sidebar-subtitle[b-8i3iz24q3c] {
    margin-top: 3px;
    font-size: 12px;
    color: #64748b;
    line-height: 1.35;
}

.history-vendor-mode-note[b-8i3iz24q3c] {
    margin-top: 6px;
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 11px;
    font-weight: 700;
}

.history-sidebar-badge[b-8i3iz24q3c] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: #e2e8f0;
    color: #334155;
    font-size: 11px;
    font-weight: 700;
}

.history-sidebar-search[b-8i3iz24q3c] {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(203, 202, 205, 0.55);
    background: #fff;
}

.history-search-field[b-8i3iz24q3c] {
    width: 100%;
}

.history-search-field input[b-8i3iz24q3c] {
    min-width: 0;
}

.history-sidebar-body[b-8i3iz24q3c] {
    min-height: 0;
    overflow-y: auto;
}

.history-sidebar-loading[b-8i3iz24q3c] {
    padding: 12px 16px;
}

.history-vendor-list[b-8i3iz24q3c] {
    display: grid;
}

.history-vendor-item[b-8i3iz24q3c] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(203, 202, 205, 0.45);
    background: #fff;
    text-align: left;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.history-vendor-item:hover[b-8i3iz24q3c] {
    background: #f8fafc;
}

.history-vendor-item-active[b-8i3iz24q3c] {
    background: #eff6ff;
    border-left: 3px solid #2563eb;
    padding-left: 13px;
}

.history-vendor-head[b-8i3iz24q3c] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.history-vendor-code[b-8i3iz24q3c] {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
}

.history-vendor-count[b-8i3iz24q3c] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    background: #dbeafe;
    color: #1d4ed8;
    font-size: 11px;
    font-weight: 700;
}

.history-vendor-name[b-8i3iz24q3c] {
    font-size: 12px;
    color: #64748b;
    line-height: 1.35;
}

.history-main[b-8i3iz24q3c] {
    min-width: 0;
}

.history-vendor-active-view[b-8i3iz24q3c] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.history-vendor-active-code[b-8i3iz24q3c] {
    padding: 8px 12px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 700;
}

.history-no-result .empty-state[b-8i3iz24q3c] {
    border: 1px solid rgba(203, 202, 205, 0.55);
    background: #fff;
}

.history-popup-overlay[b-8i3iz24q3c] {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(3px);
}

.history-popup-dialog[b-8i3iz24q3c] {
    width: min(980px, 100%);
    max-height: min(88vh, 920px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 24px 80px rgba(15, 23, 42, 0.28);
}

.history-popup-header[b-8i3iz24q3c],
.history-popup-footer[b-8i3iz24q3c] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 22px;
    background: #f8fafc;
}

.history-popup-header[b-8i3iz24q3c] {
    border-bottom: 1px solid rgba(148, 163, 184, 0.25);
}

.history-popup-footer[b-8i3iz24q3c] {
    border-top: 1px solid rgba(148, 163, 184, 0.25);
    justify-content: flex-end;
}

.history-popup-close[b-8i3iz24q3c] {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 999px;
    background: #e2e8f0;
    color: #0f172a;
    font-size: 24px;
    line-height: 1;
}

.history-popup-body[b-8i3iz24q3c] {
    padding: 20px 22px 18px;
    overflow: auto;
}

.history-summary-grid[b-8i3iz24q3c],
.history-detail-grid[b-8i3iz24q3c] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
}

.history-summary-grid[b-8i3iz24q3c] {
    margin-bottom: 16px;
    padding: 12px 14px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 14px;
    background: #f8fafc;
}

.history-summary-grid div[b-8i3iz24q3c],
.history-detail-grid div[b-8i3iz24q3c] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    border-radius: 12px;
    background: rgba(248, 250, 252, 0.55);
}

.history-summary-grid span[b-8i3iz24q3c],
.history-detail-grid span[b-8i3iz24q3c] {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748b;
}

.history-summary-grid strong[b-8i3iz24q3c],
.history-detail-grid strong[b-8i3iz24q3c] {
    font-size: 13px;
    font-weight: 600;
    color: #0f172a;
    word-break: break-word;
    line-height: 1.35;
}

.history-section-title[b-8i3iz24q3c] {
    margin: 16px 0 10px;
    font-size: 12px;
    font-weight: 700;
    color: #0f172a;
}

.history-timeline-list[b-8i3iz24q3c] {
    display: grid;
    gap: 8px;
}

.history-timeline-item[b-8i3iz24q3c] {
    padding: 10px 12px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 12px;
    background: #ffffff;
}

.history-timeline-top[b-8i3iz24q3c] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 3px;
}

.history-timeline-top strong[b-8i3iz24q3c] {
    font-size: 13px;
}

.history-timeline-top span[b-8i3iz24q3c],
.history-timeline-meta[b-8i3iz24q3c] {
    font-size: 11px;
    color: #64748b;
}

.history-timeline-note[b-8i3iz24q3c] {
    font-size: 13px;
    color: #0f172a;
    margin-bottom: 3px;
}

@media (max-width: 992px) {
    .history-layout[b-8i3iz24q3c] {
        grid-template-columns: 1fr;
    }

    .history-sidebar[b-8i3iz24q3c] {
        max-height: none;
    }
}

@media (max-width: 768px) {
    .history-page-header[b-8i3iz24q3c] {
        flex-direction: column;
    }

    .history-page-actions[b-8i3iz24q3c] {
        width: 100%;
        justify-content: flex-end;
    }

    .history-popup-overlay[b-8i3iz24q3c] {
        padding: 12px;
    }

    .history-popup-dialog[b-8i3iz24q3c] {
        max-height: 92vh;
    }

    .history-summary-grid[b-8i3iz24q3c],
    .history-detail-grid[b-8i3iz24q3c] {
        grid-template-columns: 1fr;
    }

    .history-popup-header[b-8i3iz24q3c],
    .history-popup-footer[b-8i3iz24q3c],
    .history-popup-body[b-8i3iz24q3c] {
        padding-left: 16px;
        padding-right: 16px;
    }
}
/* /Component/Page/PaymentRequest/RfpExternal/RfpExternalVerification.razor.rz.scp.css */
.rfp-verification-page[b-b6oua0cnv3] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.rfp-verification-intro[b-b6oua0cnv3] {
    max-width: 46rem;
}

.rfp-verification-workspace[b-b6oua0cnv3] {
    display: grid;
    grid-template-columns: 380px minmax(0, 1fr);
    gap: 16px;
    min-height: calc(100vh - 320px);
}

.rfp-verification-queue[b-b6oua0cnv3],
.rfp-verification-detail[b-b6oua0cnv3] {
    min-height: 0;
}

.rfp-verification-queue-card[b-b6oua0cnv3],
.rfp-verification-detail-card[b-b6oua0cnv3] {
    height: 100%;
}

.rfp-verification-queue-body[b-b6oua0cnv3],
.rfp-verification-detail-body[b-b6oua0cnv3] {
    min-height: 0;
}

.rfp-verification-queue-list[b-b6oua0cnv3],
.rfp-verification-detail-scroll[b-b6oua0cnv3] {
    min-height: 0;
    overflow-y: auto;
}

.rfp-verification-filter-panel[b-b6oua0cnv3] {
    background: color-mix(in srgb, var(--color-background, #fff) 92%, var(--color-muted, #f5f7fa) 8%);
}

.rfp-verification-queue-item[b-b6oua0cnv3] {
    width: 100%;
    border: 1px solid var(--app-border);
    border-radius: 10px;
    background: #fff;
    text-align: left;
    transition: border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}

.rfp-verification-queue-item:hover[b-b6oua0cnv3],
.rfp-verification-queue-item:focus-visible[b-b6oua0cnv3] {
    border-color: rgba(31, 111, 235, 0.36);
    background: #f8fbff;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
    outline: none;
}

.rfp-verification-queue-item.is-selected[b-b6oua0cnv3] {
    border-color: rgba(31, 111, 235, 0.44);
    background: #eef5ff;
    box-shadow: 0 10px 22px rgba(31, 111, 235, 0.12);
}

.rfp-verification-stat-card[b-b6oua0cnv3] {
    min-height: 132px;
}

.rfp-verification-kicker[b-b6oua0cnv3] {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    background: #eef5ff;
    color: var(--app-primary);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.rfp-verification-status-badge[b-b6oua0cnv3] {
    border: 1px solid transparent;
    font-weight: 700;
}

.rfp-verification-status-badge.is-outstanding[b-b6oua0cnv3] {
    background: #fff4cc;
    border-color: #f6d365;
    color: #7a5200;
}

.rfp-verification-status-badge.is-verified[b-b6oua0cnv3] {
    background: #dcfce7;
    border-color: #86efac;
    color: #166534;
}

.rfp-verification-status-badge.is-rejected[b-b6oua0cnv3] {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #991b1b;
}

.rfp-verification-detail-groups[b-b6oua0cnv3] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    background: #fff;
}

.rfp-verification-detail-group[b-b6oua0cnv3] {
    min-width: 0;
    padding: 18px 20px 16px;
}

.rfp-verification-detail-group + .rfp-verification-detail-group[b-b6oua0cnv3] {
    border-left: 1px solid var(--app-border);
}

.rfp-verification-detail-group-header[b-b6oua0cnv3] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
}

.rfp-verification-detail-group-icon[b-b6oua0cnv3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: #eef6ff;
    color: var(--app-primary, #1b84ff);
    flex: 0 0 auto;
}

.rfp-verification-detail-group-header h4[b-b6oua0cnv3] {
    margin: 0;
    color: var(--app-text, #111827);
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.35;
}

.rfp-verification-detail-group-header p[b-b6oua0cnv3] {
    margin: 2px 0 0;
    color: var(--app-muted, #6b7280);
    font-size: 0.6875rem;
    line-height: 1.4;
}

.rfp-verification-detail-list[b-b6oua0cnv3] {
    margin: 0;
}

.rfp-verification-detail-row[b-b6oua0cnv3] {
    display: grid;
    grid-template-columns: minmax(92px, 0.8fr) minmax(0, 1.2fr);
    gap: 12px;
    align-items: baseline;
    padding: 8px 0;
    border-top: 1px solid #edf0f5;
}

.rfp-verification-detail-row dt[b-b6oua0cnv3],
.rfp-verification-detail-row dd[b-b6oua0cnv3] {
    margin: 0;
}

.rfp-verification-detail-row dt[b-b6oua0cnv3] {
    color: var(--app-muted, #6b7280);
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.45;
}

.rfp-verification-detail-row dd[b-b6oua0cnv3] {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--app-text, #111827);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.45;
    text-align: right;
}

.rfp-verification-detail-row.is-emphasized dd[b-b6oua0cnv3] {
    color: var(--app-primary, #1b84ff);
    font-variant-numeric: tabular-nums;
    font-weight: 750;
}

.rfp-verification-metrics[b-b6oua0cnv3] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.rfp-verification-document-row[b-b6oua0cnv3],
.rfp-verification-history-row[b-b6oua0cnv3] {
    align-items: flex-start;
}

.rfp-verification-action-form[b-b6oua0cnv3] {
    display: grid;
    gap: 8px;
}

.rfp-verification-empty[b-b6oua0cnv3] {
    min-height: 280px;
}

.rfp-verification-table thead th[b-b6oua0cnv3] {
    white-space: nowrap;
}

@media (max-width: 1199.98px) {
    .rfp-verification-workspace[b-b6oua0cnv3],
    .rfp-verification-metrics[b-b6oua0cnv3] {
        grid-template-columns: 1fr;
    }

    .rfp-verification-workspace[b-b6oua0cnv3] {
        min-height: auto;
    }

    .rfp-verification-queue-card[b-b6oua0cnv3],
    .rfp-verification-detail-card[b-b6oua0cnv3] {
        height: auto;
    }
}

@media (max-width: 767.98px) {
    .rfp-verification-page[b-b6oua0cnv3] {
        gap: 12px;
    }

    .rfp-verification-detail-groups[b-b6oua0cnv3] {
        grid-template-columns: 1fr;
    }

    .rfp-verification-detail-group[b-b6oua0cnv3] {
        padding: 16px;
    }

    .rfp-verification-detail-group + .rfp-verification-detail-group[b-b6oua0cnv3] {
        border-top: 1px solid var(--app-border);
        border-left: 0;
    }

    .rfp-verification-detail-row[b-b6oua0cnv3] {
        grid-template-columns: minmax(100px, 0.8fr) minmax(0, 1.2fr);
    }

    .rfp-verification-empty[b-b6oua0cnv3] {
        min-height: 220px;
    }
}
.rfp-verification-queue-skeleton[b-b6oua0cnv3] {
    display: grid;
    gap: 12px;
}

.rfp-verification-queue-skeleton-item[b-b6oua0cnv3] {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 76px;
    gap: 10px 14px;
    padding: 16px;
    overflow: hidden;
    border: 1px solid var(--app-border);
    border-radius: 10px;
    background: #fff;
}

.rfp-verification-skeleton-line[b-b6oua0cnv3],
.rfp-verification-skeleton-avatar[b-b6oua0cnv3],
.rfp-verification-skeleton-panel[b-b6oua0cnv3],
.rfp-verification-skeleton-block[b-b6oua0cnv3] {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 999px;
    background: #e8edf3;
}

.rfp-verification-skeleton-line[b-b6oua0cnv3]::after,
.rfp-verification-skeleton-avatar[b-b6oua0cnv3]::after,
.rfp-verification-skeleton-panel[b-b6oua0cnv3]::after,
.rfp-verification-skeleton-block[b-b6oua0cnv3]::after {
    position: absolute;
    inset: 0;
    content: "";
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.78), transparent);
    animation: rfp-verification-skeleton-shimmer-b-b6oua0cnv3 1.4s ease-in-out infinite;
}

.rfp-verification-skeleton-line.is-title[b-b6oua0cnv3] {
    width: 70%;
    height: 14px;
}

.rfp-verification-skeleton-line.is-badge[b-b6oua0cnv3] {
    width: 76px;
    height: 22px;
    justify-self: end;
}

.rfp-verification-skeleton-line.is-subtitle[b-b6oua0cnv3] {
    width: 54%;
    height: 11px;
}

.rfp-verification-skeleton-line.is-meta[b-b6oua0cnv3] {
    width: 88%;
    height: 11px;
    justify-self: end;
}

.rfp-verification-detail-skeleton .kt-card-content[b-b6oua0cnv3] {
    display: grid;
    gap: 22px;
}

.rfp-verification-detail-skeleton-header[b-b6oua0cnv3] {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 180px;
    align-items: start;
    gap: 16px;
}

.rfp-verification-skeleton-avatar[b-b6oua0cnv3] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
}

.rfp-verification-detail-skeleton-heading[b-b6oua0cnv3] {
    display: grid;
    gap: 10px;
}

.rfp-verification-skeleton-line.is-kicker[b-b6oua0cnv3] {
    width: 126px;
    height: 22px;
}

.rfp-verification-skeleton-line.is-heading[b-b6oua0cnv3] {
    width: min(320px, 78%);
    height: 20px;
}

.rfp-verification-skeleton-line.is-amount[b-b6oua0cnv3] {
    width: 180px;
    height: 28px;
    justify-self: end;
}

.rfp-verification-detail-skeleton-metrics[b-b6oua0cnv3] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.rfp-verification-skeleton-panel[b-b6oua0cnv3] {
    height: 84px;
    border-radius: 10px;
}

.rfp-verification-skeleton-block[b-b6oua0cnv3] {
    height: 240px;
    border-radius: 12px;
}

@keyframes rfp-verification-skeleton-shimmer-b-b6oua0cnv3 {
    100% {
        transform: translateX(100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .rfp-verification-skeleton-line[b-b6oua0cnv3]::after,
    .rfp-verification-skeleton-avatar[b-b6oua0cnv3]::after,
    .rfp-verification-skeleton-panel[b-b6oua0cnv3]::after,
    .rfp-verification-skeleton-block[b-b6oua0cnv3]::after {
        animation: none;
    }
}

@media (max-width: 767.98px) {
    .rfp-verification-detail-skeleton-header[b-b6oua0cnv3] {
        grid-template-columns: 48px minmax(0, 1fr);
    }

    .rfp-verification-skeleton-line.is-amount[b-b6oua0cnv3] {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .rfp-verification-detail-skeleton-metrics[b-b6oua0cnv3] {
        grid-template-columns: 1fr;
    }
}
.rfp-verification-status-badge.is-returned[b-b6oua0cnv3] {
    background: #fff7ed;
    border-color: #fdba74;
    color: #9a3412;
}

.rfp-verification-return-count[b-b6oua0cnv3] {
    color: #c2410c;
}
.rfp-verification-detail-actions[b-b6oua0cnv3] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.625rem;
}

.rfp-verification-comment-button[b-b6oua0cnv3] {
    position: relative;
}

.rfp-verification-comment-count[b-b6oua0cnv3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding-inline: 0.35rem;
    border-radius: 999px;
    background: var(--tw-primary, #1b84ff);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1;
}

@media (max-width: 639px) {
    .rfp-verification-detail-actions[b-b6oua0cnv3] {
        width: 100%;
        justify-content: stretch;
    }

    .rfp-verification-detail-actions > *[b-b6oua0cnv3] {
        flex: 1 1 auto;
        justify-content: center;
    }
}
/* /Component/Page/PaymentRequest/RfpInternal/RfpHistoryList.razor.rz.scp.css */
/* Toolbar disamakan dengan daftar RFP Internal. Aturan global .rfp-list-toolbar
   (app.legacy.css) memakai flex + space-between, yang dulu melempar chip status ke
   ujung kanan terpisah dari kotak pencarian di kiri. Halaman Internal menimpanya
   dengan display:block dan menaruh semuanya dalam SATU baris .rfp-list-toolbar-top;
   halaman ini kini mengikuti. */
.rfp-list-toolbar[b-4zmxcdrvsa] {
    display: block;
    margin-bottom: 12px;
}

.rfp-list-toolbar-top[b-4zmxcdrvsa] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    flex-wrap: nowrap;
}

.rfp-list-period-field[b-4zmxcdrvsa] {
    flex: 0 1 260px;
    min-width: 220px;
}

.rfp-list-toolbar-actions[b-4zmxcdrvsa] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Sama seperti RfpInternalList.razor.css: dorong ke ujung kanan baris toolbar
   (harus jadi elemen TERAKHIR di .rfp-list-toolbar-top). */
.rfp-list-toolbar-bottom-actions[b-4zmxcdrvsa] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-left: auto;
}

/* Sama seperti RfpInternalList.razor.css: .kt-btn:hover generik (var(--primary),
   biru) menang atas .kt-btn-green:hover karena urutan @layer Tailwind, bukan
   urutan tekstual - !important + atribut scope Blazor memaksa hover tetap
   hijau (lebih muda dari solid idle-nya, green-400 vs green-600). */
.rfp-export-excel-button:hover[b-4zmxcdrvsa] {
    background-color: var(--color-green-400) !important;
    color: #fff !important;
}

/* Chip status di halaman ini SENGAJA dibuat identik dengan daftar RFP Internal
   (RfpInternalList.razor.css) - bentuk, ukuran, dan warnanya. Sebelumnya halaman
   ini menggambar pilnya sendiri (border-radius 999px, min-height 34px, aktif biru),
   sehingga dua daftar yang bersebelahan terlihat berasal dari aplikasi berbeda.
   Sekarang bentuk dasarnya datang dari tombol Metronic (kt-btn kt-btn-outline
   kt-btn-primary kt-btn-sm, lihat GetStatusChipClass) dan yang tersisa di sini
   hanya penyesuaian yang sama persis dengan halaman Internal.

   Karena disalin, KEDUANYA harus diubah bersamaan bila gayanya disesuaikan lagi.
   Scoped CSS Blazor tidak bisa dibagi antar komponen, jadi penyatuannya hanya
   mungkin dengan memindahkannya ke stylesheet global - belum dilakukan supaya
   perubahan ini tidak menyentuh halaman lain. */
.rfp-status-chip-group[b-4zmxcdrvsa] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    width: auto;
}

.rfp-status-chip[b-4zmxcdrvsa] {
    min-width: 0;
    gap: 6px;
}

.rfp-status-chip:hover[b-4zmxcdrvsa] {
    border-color: var(--app-primary);
    color: var(--app-primary);
}

.rfp-status-chip.active[b-4zmxcdrvsa] {
    border-color: #70BE45;
    background: #70BE45;
    color: #fff;
    box-shadow: 0 8px 18px rgba(112, 190, 69, 0.18);
}

@media (max-width: 767.98px) {
    .rfp-list-toolbar-top[b-4zmxcdrvsa] {
        align-items: stretch;
        flex-wrap: wrap;
    }

    .rfp-list-toolbar-actions[b-4zmxcdrvsa],
    .rfp-list-toolbar-bottom-actions[b-4zmxcdrvsa] {
        width: 100%;
    }

    .rfp-list-toolbar-actions > *[b-4zmxcdrvsa] {
        flex: 1 1 0;
    }

    .rfp-list-period-field[b-4zmxcdrvsa] {
        flex-basis: 100%;
        min-width: 0;
    }

    .rfp-status-chip-group[b-4zmxcdrvsa] {
        flex: 1 1 100%;
        width: 100%;
    }

    .rfp-status-chip-group .rfp-status-chip[b-4zmxcdrvsa] {
        flex: 1 1 0;
    }
}
/* /Component/Page/PaymentRequest/RfpInternal/RfpInternalDashboard.razor.rz.scp.css */
.request-dashboard[b-o8h90w2lem] {
    display: grid;
    gap: 20px;
}

.dashboard-header[b-o8h90w2lem],
.panel-heading[b-o8h90w2lem] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.dashboard-header h1[b-o8h90w2lem],
.panel-heading h2[b-o8h90w2lem] {
    margin: 0;
    color: #172033;
}

.dashboard-header h1[b-o8h90w2lem] {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
}

.dashboard-header p[b-o8h90w2lem],
.panel-heading p[b-o8h90w2lem],
.integration-banner p[b-o8h90w2lem] {
    margin: 5px 0 0;
    color: #687386;
}

.dashboard-eyebrow[b-o8h90w2lem] {
    color: #1f6feb !important;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dashboard-primary-action[b-o8h90w2lem],
.dashboard-secondary-action[b-o8h90w2lem] {
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.dashboard-primary-action[b-o8h90w2lem] {
    padding: 11px 18px;
    background: #1f6feb;
    color: #fff;
    box-shadow: 0 6px 16px rgb(31 111 235 / 20%);
}

.dashboard-secondary-action[b-o8h90w2lem] {
    padding: 8px 12px;
    color: #1f6feb;
    border: 1px solid #bfd4f7;
}

.dashboard-stats[b-o8h90w2lem] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.stat-card[b-o8h90w2lem] {
    position: relative;
    min-height: 112px;
    padding: 18px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e1e6ef;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgb(23 32 51 / 6%);
}

.stat-card[b-o8h90w2lem]::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    content: "";
    background: var(--stat-color);
}

.stat-label[b-o8h90w2lem] {
    display: block;
    margin-bottom: 12px;
    color: #687386;
    font-size: 0.85rem;
    font-weight: 600;
}

.stat-card strong[b-o8h90w2lem] {
    color: #172033;
    font-size: 1.65rem;
}

.stat-icon[b-o8h90w2lem] {
    position: absolute;
    right: 16px;
    bottom: 16px;
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    color: var(--stat-color);
    background: var(--stat-background);
    border-radius: 50%;
    font-weight: 800;
}

.stat-pending[b-o8h90w2lem] {
    --stat-color: #d97706;
    --stat-background: #fff4d6;
}

.stat-approved[b-o8h90w2lem] {
    --stat-color: #16834b;
    --stat-background: #dcf7e8;
}

.stat-rejected[b-o8h90w2lem] {
    --stat-color: #c53b4b;
    --stat-background: #fde7ea;
}

.stat-value[b-o8h90w2lem] {
    --stat-color: #1f6feb;
    --stat-background: #e8f1ff;
}

.integration-banner[b-o8h90w2lem] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    color: #245a3c;
    background: #edf9f2;
    border: 1px solid #b9e4ca;
    border-radius: 10px;
}

.integration-banner p[b-o8h90w2lem] {
    color: #47705a;
}

.integration-icon[b-o8h90w2lem] {
    display: grid;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    place-items: center;
    color: #fff;
    background: #16834b;
    border-radius: 50%;
    font-weight: 800;
}

.recent-panel[b-o8h90w2lem] {
    padding: 20px;
    background: #fff;
    border: 1px solid #e1e6ef;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgb(23 32 51 / 6%);
}

.panel-heading[b-o8h90w2lem] {
    margin-bottom: 18px;
}

.panel-heading h2[b-o8h90w2lem] {
    font-size: 1.1rem;
}

.dashboard-grid-shell[b-o8h90w2lem] {
    overflow: hidden;
    border: 1px solid #dfe5ee;
    border-radius: 9px;
}

.dashboard-grid[b-o8h90w2lem] {
    --ig-size: var(--ig-size-medium);
}

.dashboard-loading[b-o8h90w2lem],
.dashboard-empty[b-o8h90w2lem] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 150px;
    gap: 10px;
    color: #687386;
}

.dashboard-alert[b-o8h90w2lem] {
    padding: 12px 14px;
    border-radius: 8px;
}

.dashboard-alert-error[b-o8h90w2lem] {
    color: #842029;
    background: #f8d7da;
    border: 1px solid #f5c2c7;
}

@media (max-width: 1050px) {
    .dashboard-stats[b-o8h90w2lem] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .dashboard-header[b-o8h90w2lem],
    .panel-heading[b-o8h90w2lem] {
        align-items: stretch;
        flex-direction: column;
    }

    .dashboard-stats[b-o8h90w2lem] {
        grid-template-columns: 1fr;
    }

    .dashboard-primary-action[b-o8h90w2lem],
    .dashboard-secondary-action[b-o8h90w2lem] {
        text-align: center;
    }

    .recent-panel[b-o8h90w2lem] {
        padding: 14px;
    }
}

/* Dashboard wireframe alignment */
.request-dashboard[b-o8h90w2lem] {
    gap: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid #d8dee8;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgb(23 32 51 / 5%);
}

.dashboard-header[b-o8h90w2lem] {
    padding: 22px 24px;
    border-bottom: 1px solid #d8dee8;
}

.dashboard-header h1[b-o8h90w2lem] {
    font-size: 1.35rem;
}

.dashboard-header p[b-o8h90w2lem] {
    margin-top: 3px;
    font-size: 0.88rem;
}

.dashboard-primary-action[b-o8h90w2lem] {
    padding: 9px 16px;
    border-radius: 5px;
    box-shadow: none;
}

.dashboard-primary-action[b-o8h90w2lem]::before {
    margin-right: 6px;
    content: "+";
}

.dashboard-alert[b-o8h90w2lem] {
    margin: 16px 24px 0;
}

.dashboard-stats[b-o8h90w2lem] {
    gap: 0;
    border-bottom: 1px solid #d8dee8;
}

.stat-card[b-o8h90w2lem] {
    min-height: 108px;
    padding: 20px 24px;
    border: 0;
    border-right: 1px solid #d8dee8;
    border-radius: 0;
    box-shadow: none;
}

.stat-card:last-child[b-o8h90w2lem] {
    border-right: 0;
}

.stat-card[b-o8h90w2lem]::before {
    display: none;
}

.stat-label[b-o8h90w2lem] {
    margin-bottom: 14px;
    color: #4b5565;
    font-size: 0.82rem;
}

.stat-value-row[b-o8h90w2lem] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.stat-card strong[b-o8h90w2lem] {
    font-size: 1.45rem;
}

.stat-icon[b-o8h90w2lem] {
    position: static;
    width: 27px;
    height: 27px;
    color: var(--icon-color);
    background: var(--icon-background);
    font-size: 0.8rem;
}

.stat-pending[b-o8h90w2lem] {
    --icon-color: #b76a00;
    --icon-background: #fff0c2;
}

.stat-approved[b-o8h90w2lem] {
    --icon-color: #137444;
    --icon-background: #dcf5e7;
}

.stat-rejected[b-o8h90w2lem] {
    --icon-color: #b52f40;
    --icon-background: #fde4e8;
}

.stat-total[b-o8h90w2lem] {
    --icon-color: #1f6feb;
    --icon-background: #e5efff;
}

.integration-banner[b-o8h90w2lem] {
    margin: 18px 24px;
    padding: 13px 16px;
    border-radius: 5px;
}

.integration-banner strong[b-o8h90w2lem] {
    font-size: 0.88rem;
}

.integration-banner p[b-o8h90w2lem] {
    margin-top: 2px;
    font-size: 0.8rem;
}

.integration-icon[b-o8h90w2lem] {
    flex-basis: 26px;
    width: 26px;
    height: 26px;
    font-size: 0.8rem;
}

.recent-panel[b-o8h90w2lem] {
    padding: 0;
    border: 0;
    border-top: 1px solid #d8dee8;
    border-radius: 0;
    box-shadow: none;
}

.panel-heading[b-o8h90w2lem] {
    min-height: 52px;
    margin: 0;
    padding: 0 24px;
    border-bottom: 1px solid #d8dee8;
}

.panel-heading h2[b-o8h90w2lem] {
    font-size: 0.98rem;
}

.dashboard-table-shell[b-o8h90w2lem] {
    overflow-x: auto;
}

.dashboard-table[b-o8h90w2lem] {
    width: 100%;
    min-width: 930px;
    border-collapse: collapse;
    table-layout: fixed;
}

.dashboard-table th[b-o8h90w2lem],
.dashboard-table td[b-o8h90w2lem] {
    padding: 13px 16px;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid #e3e8f0;
}

.dashboard-table th[b-o8h90w2lem] {
    color: #596579;
    background: #f7f9fc;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.025em;
}

.dashboard-table td[b-o8h90w2lem] {
    color: #273247;
    font-size: 0.82rem;
}

.dashboard-table tbody tr:hover[b-o8h90w2lem] {
    background: #f8fbff;
}

.dashboard-table th:nth-child(1)[b-o8h90w2lem] {
    width: 18%;
}

.dashboard-table th:nth-child(2)[b-o8h90w2lem] {
    width: 29%;
}

.dashboard-table th:nth-child(3)[b-o8h90w2lem] {
    width: 13%;
}

.dashboard-table th:nth-child(4)[b-o8h90w2lem] {
    width: 14%;
}

.dashboard-table th:nth-child(5)[b-o8h90w2lem] {
    width: 11%;
}

.dashboard-table th:nth-child(6)[b-o8h90w2lem] {
    width: 8%;
}

.dashboard-table th:nth-child(7)[b-o8h90w2lem] {
    width: 7%;
}

.request-number[b-o8h90w2lem],
.amount-cell[b-o8h90w2lem] {
    white-space: nowrap;
}

.request-number[b-o8h90w2lem] {
    color: #1f5fae !important;
    font-weight: 600;
}

.description-cell[b-o8h90w2lem],
.category-cell[b-o8h90w2lem] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.amount-cell[b-o8h90w2lem] {
    font-weight: 600;
}

.status-badge[b-o8h90w2lem],
.source-badge[b-o8h90w2lem] {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
}

.status-approved[b-o8h90w2lem] {
    color: #126c3f;
    background: #dff5e8;
}

.status-rejected[b-o8h90w2lem] {
    color: #a52e3d;
    background: #fde5e8;
}

.status-pending[b-o8h90w2lem] {
    color: #9a5b00;
    background: #fff0c7;
}

.source-badge[b-o8h90w2lem] {
    color: #46566f;
    background: #edf1f6;
}

.view-link[b-o8h90w2lem],
.panel-footer a[b-o8h90w2lem] {
    color: #1f6feb;
    font-weight: 600;
    text-decoration: none;
}

.view-link:hover[b-o8h90w2lem],
.panel-footer a:hover[b-o8h90w2lem] {
    text-decoration: underline;
}

.panel-footer[b-o8h90w2lem] {
    padding: 13px 24px;
    text-align: right;
}

@media (max-width: 1050px) {
    .dashboard-stats[b-o8h90w2lem] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .stat-card:nth-child(2)[b-o8h90w2lem] {
        border-right: 0;
    }

    .stat-card:nth-child(-n + 2)[b-o8h90w2lem] {
        border-bottom: 1px solid #d8dee8;
    }
}

@media (max-width: 640px) {
    .dashboard-header[b-o8h90w2lem] {
        padding: 18px;
    }

    .dashboard-stats[b-o8h90w2lem] {
        grid-template-columns: 1fr;
    }

    .stat-card[b-o8h90w2lem],
    .stat-card:nth-child(2)[b-o8h90w2lem] {
        border-right: 0;
        border-bottom: 1px solid #d8dee8;
    }

    .stat-card:last-child[b-o8h90w2lem] {
        border-bottom: 0;
    }

    .integration-banner[b-o8h90w2lem] {
        margin: 14px 18px;
    }

    .panel-heading[b-o8h90w2lem],
    .panel-footer[b-o8h90w2lem] {
        padding-right: 18px;
        padding-left: 18px;
    }
}
/* /Component/Page/PaymentRequest/RfpInternal/RfpInternalForm.razor.rz.scp.css */
.form-actions .form-action-primary[b-862i1dt17o] {
    margin-left: auto;
}

.rfp-button[b-862i1dt17o] {
    align-items: center;
    border: 1px solid transparent;
    border-radius: 0.375rem;
    cursor: pointer;
    display: inline-flex;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    gap: 0.45rem;
    justify-content: center;
    line-height: 1.25;
    min-height: 2.35rem;
    padding: 0.45rem 0.85rem;
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.rfp-button:focus-visible[b-862i1dt17o] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.rfp-button:disabled[b-862i1dt17o] {
    cursor: not-allowed;
    opacity: 0.55;
}

.rfp-button-filled.rfp-button-primary[b-862i1dt17o] {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
}

.rfp-button-filled.rfp-button-primary:hover:not(:disabled)[b-862i1dt17o] {
    background: #1d4ed8;
    border-color: #1d4ed8;
}

.rfp-button-filled.rfp-button-success[b-862i1dt17o] {
    background: #059669;
    border-color: #059669;
    color: #fff;
}

.rfp-button-filled.rfp-button-success:hover:not(:disabled)[b-862i1dt17o] {
    background: #047857;
    border-color: #047857;
}

.rfp-button-outlined[b-862i1dt17o] {
    background: #fff;
}

.rfp-button-outlined.rfp-button-primary[b-862i1dt17o] {
    border-color: #2563eb;
    color: #1d4ed8;
}

.rfp-button-outlined.rfp-button-primary:hover:not(:disabled)[b-862i1dt17o] {
    background: #eff6ff;
}

.rfp-button-outlined.rfp-button-secondary[b-862i1dt17o] {
    border-color: #94a3b8;
    color: #475569;
}

.rfp-button-outlined.rfp-button-danger[b-862i1dt17o],
.rfp-button-outlined.rfp-button-error[b-862i1dt17o] {
    border-color: #dc2626;
    color: #b91c1c;
}

.rfp-button-outlined.rfp-button-info[b-862i1dt17o] {
    border-color: #0891b2;
    color: #0e7490;
}

.rfp-button-text[b-862i1dt17o] {
    background: transparent;
    border-color: transparent;
    color: #475569;
}

.rfp-button-text:hover:not(:disabled)[b-862i1dt17o] {
    background: #f1f5f9;
}

.rfp-wizard-stepper[b-862i1dt17o] {
    margin-bottom: 1.25rem;
}

.request-info-card[b-862i1dt17o] {
    margin-bottom: 1rem;
}

.rfp-internal-form[b-862i1dt17o],
.rfp-internal-form > form[b-862i1dt17o],
.rfp-internal-form .rfp-form-grid[b-862i1dt17o],
.rfp-internal-form .review-panel[b-862i1dt17o] {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.rfp-internal-form[b-862i1dt17o] {
    contain: inline-size;
}

.tf-list-panel[b-862i1dt17o] {
    gap: 1rem;
}

.tf-list-actions[b-862i1dt17o] {
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.tf-list-template-note[b-862i1dt17o] {
    margin-bottom: 1rem;
}

.tf-list-grid-shell[b-862i1dt17o] {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow: visible;
    padding: 0;
    border: 1px solid rgba(203, 213, 225, 0.95);
    border-radius: 0.9rem;
    background: #fff;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.tf-list-grid-shell:hover[b-862i1dt17o],
.tf-list-grid-shell:focus-within[b-862i1dt17o] {
    border-color: rgba(148, 163, 184, 0.9);
    box-shadow: 0 0 0 3px rgba(226, 232, 240, 0.9);
}

.tf-list-grid-shell.is-disabled[b-862i1dt17o] {
    opacity: 0.7;
}

.tf-list-button-row[b-862i1dt17o] {
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.tf-list-grid-wrap[b-862i1dt17o] {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.kepegawian-list-toolbar[b-862i1dt17o] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1rem 1.1rem;
    border: 1px solid rgba(186, 230, 253, 0.9);
    border-radius: 0.8rem;
    background: linear-gradient(135deg, #f0f9ff 0%, #f8fafc 70%);
}

.kepegawian-list-heading[b-862i1dt17o] {
    min-width: 16rem;
}

.kepegawian-list-heading .rfp-panel-title[b-862i1dt17o] {
    font-size: 1rem;
}

.kepegawian-list-eyebrow[b-862i1dt17o] {
    display: block;
    margin-bottom: 0.25rem;
    color: #0369a1;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.kepegawian-list-description[b-862i1dt17o] {
    margin: 0.35rem 0 0.65rem;
    color: #475569;
    font-size: 0.82rem;
}

.kepegawian-cost-center-summary[b-862i1dt17o] {
    margin: 1.5rem 0 0.25rem;
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
}

.kepegawian-cost-center-summary table[b-862i1dt17o] {
    min-width: 46rem;
}

.kepegawian-cost-center-summary th[b-862i1dt17o],
.kepegawian-cost-center-summary td[b-862i1dt17o] {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tf-kepegawaian-activity-header[b-862i1dt17o] {
    min-width: 5.75rem;
    line-height: 1.15;
    text-align: center;
}

.tf-kepegawaian-activity-header span[b-862i1dt17o],
.tf-kepegawaian-activity-header small[b-862i1dt17o] {
    display: block;
}

.tf-kepegawaian-activity-header small[b-862i1dt17o] {
    margin-top: 0.2rem;
    color: #64748b;
    font-size: 0.68rem;
    font-weight: 600;
    white-space: nowrap;
}

.kepegawian-program-badge[b-862i1dt17o] {
    display: inline-flex;
    align-items: center;
    min-height: 1.8rem;
    padding: 0.25rem 0.65rem;
    border: 1px solid rgba(14, 165, 233, 0.25);
    border-radius: 999px;
    background: #e0f2fe;
    color: #075985;
    font-size: 0.78rem;
    font-weight: 700;
}

.kepegawian-list-actions[b-862i1dt17o] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.55rem;
}

.tf-action-button[b-862i1dt17o] {
    align-items: center;
    border: 1px solid transparent !important;
    color: #fff !important;
    display: inline-flex;
    gap: 0.3rem;
    justify-content: center;
    min-height: 2rem;
    padding: 0.3rem 0.55rem !important;
    font-size: 0.78rem;
    white-space: nowrap;
}

.tf-action-button i[b-862i1dt17o] {
    font-size: 0.88rem;
    line-height: 1;
}

.tf-action-button:disabled[b-862i1dt17o] {
    color: #fff !important;
    opacity: 0.55;
}

.tf-action-download[b-862i1dt17o] {
    background-color: #2563eb !important;
    border-color: #2563eb !important;
}

.tf-action-download:hover:not(:disabled)[b-862i1dt17o] {
    background-color: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
}

.tf-action-import[b-862i1dt17o] {
    background-color: #7c3aed !important;
    border-color: #7c3aed !important;
}

.tf-action-import:hover:not(:disabled)[b-862i1dt17o] {
    background-color: #6d28d9 !important;
    border-color: #6d28d9 !important;
}

.tf-action-export[b-862i1dt17o] {
    background-color: #059669 !important;
    border-color: #059669 !important;
}

.tf-action-export:hover:not(:disabled)[b-862i1dt17o] {
    background-color: #047857 !important;
    border-color: #047857 !important;
}

.tf-action-validate[b-862i1dt17o] {
    background-color: #0891b2 !important;
    border-color: #0891b2 !important;
}

.tf-action-validate:hover:not(:disabled)[b-862i1dt17o] {
    background-color: #0e7490 !important;
    border-color: #0e7490 !important;
}

.tf-action-reset[b-862i1dt17o] {
    background-color: #dc2626 !important;
    border-color: #dc2626 !important;
}

.tf-action-reset:hover:not(:disabled)[b-862i1dt17o] {
    background-color: #b91c1c !important;
    border-color: #b91c1c !important;
}

.kepegawian-summary-grid[b-862i1dt17o] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0.85rem 0 1rem;
}

.kepegawian-summary-card[b-862i1dt17o] {
    display: flex;
    min-height: 4.6rem;
    flex-direction: column;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.8rem 0.9rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.7rem;
    background: #fff;
}

.kepegawian-summary-card strong[b-862i1dt17o] {
    color: #0f172a;
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
}

.kepegawian-summary-label[b-862i1dt17o] {
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.kepegawian-summary-card-emphasis[b-862i1dt17o] {
    border-color: rgba(14, 165, 233, 0.45);
    background: #f0f9ff;
}

.kepegawian-summary-card-emphasis strong[b-862i1dt17o] {
    color: #0369a1;
}

.tf-list-main-grid[b-862i1dt17o] {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    background: #fff;
    border-radius: 0.85rem;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(226, 232, 240, 0.9);
}

.tf-grid-scroll[b-862i1dt17o] {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: auto;
}

@supports (overflow-x: overlay) {
    .tf-grid-scroll[b-862i1dt17o] {
        overflow-x: overlay;
    }
}

.rfp-submit-review-table-shell[b-862i1dt17o] {
    border: 1px solid #e2e8f0;
    border-radius: 0.65rem;
}

.rfp-submit-review-grid[b-862i1dt17o] {
    width: max-content;
    min-width: 980px;
    max-width: none;
}

.rfp-submit-review-grid th[b-862i1dt17o],
.rfp-submit-review-grid td[b-862i1dt17o] {
    white-space: nowrap;
    vertical-align: top;
}

.rfp-submit-review-grid th[b-862i1dt17o] {
    min-width: 110px;
}

.tf-editor-grid[b-862i1dt17o] {
    display: table;
    width: max-content;
    min-width: 100%;
    max-width: none;
    table-layout: auto;
    border-collapse: collapse;
}

.rfp-form-field[b-862i1dt17o] {
    min-width: 0;
    max-width: 100%;
}

.tf-editor-grid thead th[b-862i1dt17o],
.tf-editor-grid tbody td[b-862i1dt17o] {
    white-space: nowrap;
}

.tf-editor-grid .tf-validation-message[b-862i1dt17o] {
    width: 320px;
    min-width: 260px;
    max-width: 420px;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.tf-editor-grid .tf-validation-message .tf-grid-readonly[b-862i1dt17o] {
    display: block;
    width: 100%;
    max-width: none;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.tf-editor-grid thead .tf-validation-message[b-862i1dt17o] {
    white-space: nowrap;
}

.tf-editor-grid thead th[b-862i1dt17o] {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 0.7rem 0.65rem;
    background: #f8fafc;
    color: #334155;
    font-weight: 700;
    font-size: 0.88rem;
    text-align: left;
    border-bottom: 1px solid rgba(203, 213, 225, 0.95);
    border-right: 1px solid rgba(226, 232, 240, 0.95);
}

.tf-editor-grid thead th.tf-kepegawaian-allowance-header[b-862i1dt17o],
.tf-kepegawaian-allowance-header[b-862i1dt17o] {
    background: #ecfdf3;
    color: #047857;
}

.tf-editor-grid thead th.tf-kepegawaian-deduction-header[b-862i1dt17o],
.tf-kepegawaian-deduction-header[b-862i1dt17o] {
    background: #fff7ed;
    color: #c2410c;
}

.tf-editor-grid tbody td[b-862i1dt17o] {
    padding: 0.45rem 0.5rem;
    border-bottom: 1px solid rgba(226, 232, 240, 0.95);
    border-right: 1px solid rgba(241, 245, 249, 1);
    vertical-align: middle;
    background: #fff;
}

.tf-editor-grid thead th:last-child[b-862i1dt17o],
.tf-editor-grid tbody td:last-child[b-862i1dt17o] {
    border-right: 0;
}

.tf-grid-add-row td[b-862i1dt17o] {
    padding: 0.75rem 1rem 0.75rem 1.25rem;
    background: #f8fafc;
    border-top: 1px solid rgba(203, 213, 225, 0.95);
    border-bottom: 0;
    border-right: 0;
    text-align: left;
}

.tf-editor-grid tbody tr:nth-child(even) td[b-862i1dt17o] {
    background: #fbfcfe;
}

.tf-editor-grid tbody tr:hover td[b-862i1dt17o] {
    background: #f1f5f9;
}

.tf-editor-grid tbody tr.is-selected td[b-862i1dt17o] {
    background: rgba(239, 246, 255, 0.92);
}

.tf-editor-grid tbody tr.is-selected:hover td[b-862i1dt17o] {
    background: rgba(219, 234, 254, 0.98);
}

.tf-editor-grid tbody tr.tf-grid-row-invalid > td[b-862i1dt17o],
.tf-editor-grid tbody tr.tf-grid-row-invalid .tf-grid-cell-display[b-862i1dt17o],
.tf-editor-grid tbody tr.tf-grid-row-invalid .tf-grid-readonly[b-862i1dt17o],
.tf-editor-grid tbody tr.tf-grid-row-invalid .tf-grid-input[b-862i1dt17o],
.tf-editor-grid tbody tr.tf-grid-row-invalid .tf-grid-select[b-862i1dt17o] {
    color: #b42318;
}

.tf-editor-grid tbody tr.tf-grid-row-invalid .tf-validation-message[b-862i1dt17o] {
    font-weight: 600;
}

.tf-col-no[b-862i1dt17o] {
    width: 42px;
    min-width: 42px;
    text-align: center;
}

.tf-col-delete[b-862i1dt17o] {
    width: 72px;
    min-width: 72px;
    text-align: center;
}

.tf-grid-input[b-862i1dt17o],
.tf-grid-select[b-862i1dt17o] {
    width: 100%;
    min-height: 34px;
    padding: 0.3rem 0.45rem;
    border: 1px solid rgba(148, 163, 184, 0.55);
    border-radius: 0.35rem;
    background: #fff;
    color: #1e293b;
    font-size: 0.88rem;
}

.tf-grid-input-error[b-862i1dt17o] {
    border-color: #b42318 !important;
}

.tf-grid-input-amount[b-862i1dt17o] {
    text-align: right;
}

.tf-grid-cell-display[b-862i1dt17o] {
    width: 100%;
    min-height: 34px;
    padding: 0.3rem 0.45rem;
    border: 1px solid transparent;
    border-radius: 0.35rem;
    background: transparent;
    color: #1e293b;
    font-size: 0.88rem;
    text-align: left;
    display: flex;
    align-items: center;
    cursor: text;
}

.tf-grid-cell-display:hover[b-862i1dt17o] {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(148, 163, 184, 0.45);
}

/* Penanda "sel ini bisa diubah", bentuknya sama dengan pensil pada grid
   Transfer List di halaman verifikasi (igEditableDisplay di ig-scripts.js).
   Dipasang sebagai pseudo-element supaya tidak perlu menyisipkan SVG di
   belasan titik markup.

   Teks sel adalah anonymous flex item (tidak dibungkus elemen), jadi jarak
   teks-pensil diatur lewat justify-content, bukan flex-grow pada teksnya. */
.tf-grid-cell-display[b-862i1dt17o] {
    --tf-pencil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E");
    gap: 6px;
    justify-content: space-between;
}

.tf-grid-cell-display[b-862i1dt17o]::after {
    content: "";
    flex: 0 0 auto;
    width: 13px;
    height: 13px;
    background-color: #9aa3af;
    -webkit-mask: var(--tf-pencil) center / 13px 13px no-repeat;
            mask: var(--tf-pencil) center / 13px 13px no-repeat;
}

/* Sel nominal: angka dan pensil berdempet di tepi kanan, sama seperti kolom
   Nilai pada grid verifikasi. */
.tf-grid-cell-display-amount[b-862i1dt17o] {
    justify-content: flex-end;
    text-align: right;
}

.tf-grid-input:focus[b-862i1dt17o],
.tf-grid-select:focus[b-862i1dt17o],
.tf-grid-cell-display:focus[b-862i1dt17o] {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.14);
}

.tf-grid-readonly[b-862i1dt17o] {
    display: inline-block;
    min-height: 34px;
    padding: 0.45rem 0.1rem;
    color: #475467;
    font-size: 0.88rem;
}

.tf-grid-add-row-button[b-862i1dt17o] {
    flex: 0 0 auto;
    min-width: 150px;
    border: 1px dashed rgba(148, 163, 184, 0.9);
    border-radius: 0.45rem;
    background: #fff;
    color: #334155;
    min-height: 38px;
    padding: 0.45rem 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    font-size: 0.88rem;
    font-weight: 600;
    text-align: center;
    transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.tf-grid-add-row-button:hover:not(:disabled)[b-862i1dt17o] {
    border-color: #3b82f6;
    background: #eff6ff;
    color: #1d4ed8;
}

.tf-grid-add-row-button:disabled[b-862i1dt17o] {
    opacity: 0.55;
    cursor: not-allowed;
}

.tf-row-delete-button[b-862i1dt17o] {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 0.65rem;
    background: rgba(220, 38, 38, 0.1);
    color: #dc2626;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.tf-row-delete-button:hover:not(:disabled)[b-862i1dt17o] {
    background: #dc2626;
    color: #fff;
}

.tf-row-delete-button:disabled[b-862i1dt17o] {
    opacity: 0.45;
    cursor: not-allowed;
}

.tf-list-status-note[b-862i1dt17o] {
    margin-top: 0.5rem;
    color: #475467;
}

.total-amount-field-emphasis[b-862i1dt17o] {
    color: #1d4ed8;
    font-size: 1.05rem;
    font-weight: 700;
}

.tf-grid-add-row-actions[b-862i1dt17o] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
    padding-inline-start: 0.5rem;
}

@media (max-width: 768px) {
    .kepegawian-list-toolbar[b-862i1dt17o] {
        align-items: stretch;
        flex-direction: column;
    }

    .kepegawian-list-heading[b-862i1dt17o] {
        min-width: 0;
    }

    .kepegawian-list-actions[b-862i1dt17o] {
        justify-content: flex-start;
    }

    .kepegawian-summary-grid[b-862i1dt17o] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tf-editor-grid thead th[b-862i1dt17o],
    .tf-editor-grid tbody td[b-862i1dt17o] {
        padding: 0.4rem 0.45rem;
    }

    .tf-editor-grid thead th[b-862i1dt17o] {
        font-size: 0.78rem;
    }

    .tf-grid-input[b-862i1dt17o],
    .tf-grid-select[b-862i1dt17o],
    .tf-grid-cell-display[b-862i1dt17o],
    .tf-grid-readonly[b-862i1dt17o] {
        font-size: 0.8rem;
    }

    .tf-grid-add-row-actions[b-862i1dt17o] {
        align-items: stretch;
    }

    .tf-grid-add-row-button[b-862i1dt17o],
    .tf-grid-help-button[b-862i1dt17o] {
        flex: 0 0 auto;
    }
}

@media (max-width: 420px) {
    .kepegawian-summary-grid[b-862i1dt17o] {
        grid-template-columns: 1fr;
    }
}

.tf-grid-help-button[b-862i1dt17o] {
    min-height: 38px;
    padding: 0.45rem 0.75rem;
    border: 1px solid rgba(148, 163, 184, 0.75);
    border-radius: 0.45rem;
    background: #fff;
    color: #475569;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    font-size: 0.88rem;
    font-weight: 600;
    white-space: nowrap;
}

.tf-grid-help-button:hover[b-862i1dt17o] {
    border-color: #3b82f6;
    background: #eff6ff;
    color: #1d4ed8;
}

.tf-grid-help-panel[b-862i1dt17o] {
    margin-top: 0.65rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid rgba(147, 197, 253, 0.8);
    border-radius: 0.5rem;
    background: #eff6ff;
    color: #1e3a8a;
    white-space: normal;
}

.tf-grid-help-panel ul[b-862i1dt17o] {
    margin: 0.4rem 0 0;
    padding-left: 1.25rem;
}

.tf-grid-help-panel li + li[b-862i1dt17o] {
    margin-top: 0.2rem;
}

[b-862i1dt17o] .total-amount-field-emphasis .ignite-text-field,
[b-862i1dt17o] .total-amount-field-emphasis .readonly-text-field,
[b-862i1dt17o] .total-amount-field-emphasis ignite-text-field {
    color: #1d4ed8 !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    --ig-size: 2.35 !important;
}

[b-862i1dt17o] .total-amount-readonly .igx-input-group__input,
[b-862i1dt17o] .total-amount-readonly input,
[b-862i1dt17o] input.total-amount-readonly,
[b-862i1dt17o] .total-amount-readonly textarea {
    color: #1d4ed8 !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
}

[b-862i1dt17o] .total-amount-readonly .igx-input-group,
[b-862i1dt17o] .total-amount-readonly {
    --ig-size: 2.35 !important;
    font-weight: 700 !important;
}

/* Persekot Reference Popup - card items */
.gl-popup-item-detail[b-862i1dt17o] {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--app-text);
    min-width: 140px;
    text-align: right;
}

.gl-popup-item-status[b-862i1dt17o] {
    font-size: 0.78rem;
    font-weight: 600;
    color: #475467;
    min-width: 80px;
    text-align: center;
}

/* Item referensi PERSEKOT tampil dua baris: identitas RFP di atas,
   konteks budget (program segment, cost center, GL account) di bawah. */
.persekot-popup-item[b-862i1dt17o] {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

.persekot-popup-item-main[b-862i1dt17o] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.persekot-popup-item-meta[b-862i1dt17o] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 24px;
    padding-top: 6px;
    border-top: 1px dashed var(--app-border);
}

.persekot-popup-meta-cell[b-862i1dt17o] {
    display: flex;
    flex-direction: column;
    min-width: 120px;
}

.persekot-popup-meta-label[b-862i1dt17o] {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--app-text-muted);
}

.persekot-popup-meta-value[b-862i1dt17o] {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--app-text);
}

.persekot-popup-item-description[b-862i1dt17o] {
    display: flex;
    flex-direction: column;
    width: 100%;
    text-align: left;
}

.persekot-popup-description-value[b-862i1dt17o] {
    width: 100%;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--app-text);
    white-space: normal;
    overflow-wrap: anywhere;
}

.gl-popup-item-active[b-862i1dt17o] {
    border-color: var(--app-primary);
    background: rgba(59, 130, 246, 0.04);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.12);
}

.gl-popup-empty[b-862i1dt17o] {
    padding: 20px;
    text-align: center;
    color: var(--app-text-muted);
    font-size: 0.88rem;
}

/* Reset button pada popup search */
.gl-popup-search[b-862i1dt17o] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.gl-popup-search .mud-input[b-862i1dt17o] {
    flex: 1;
}

.gl-popup-search-reset[b-862i1dt17o] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0;
    color: #9ca3af;
    border-radius: 6px;
}

.gl-popup-search-reset:hover[b-862i1dt17o] {
    color: #6b7280;
    background: #f3f4f6;
}

.gl-popup-search-reset i[b-862i1dt17o] {
    font-size: 1.1rem;
}

/* Table pada popup vendor */
.table[b-862i1dt17o] {
    width: 100%;
    font-size: 0.85rem;
    margin-bottom: 0;
}

.table thead th[b-862i1dt17o] {
    background: #f8fafc;
    border-bottom: 2px solid #e2e8f0;
    color: #475569;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 10px 14px;
    text-transform: uppercase;
    white-space: nowrap;
}

.table tbody td[b-862i1dt17o] {
    border-bottom: 1px solid #f1f5f9;
    padding: 10px 14px;
    vertical-align: middle;
}

.table tbody tr:hover[b-862i1dt17o] {
    background: #f1f5f9;
}

.table tbody tr.table-active[b-862i1dt17o] {
    background: #eff6ff;
}

.table tbody tr.table-active td[b-862i1dt17o] {
    color: #1d4ed8;
    font-weight: 600;
}

.table .text-end[b-862i1dt17o] {
    width: 1%;
    white-space: nowrap;
}

/* Pagination bar pada popup vendor */
.gl-pagination-bar[b-862i1dt17o] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
    gap: 16px;
    flex-wrap: wrap;
}

.gl-pagination-left[b-862i1dt17o] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.gl-pagination-size-label[b-862i1dt17o] {
    font-size: 0.82rem;
    color: #475467;
    white-space: nowrap;
}

.gl-pagination-size-select[b-862i1dt17o] {
    font-size: 0.82rem;
    color: #1f2937;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 3px 24px 3px 8px;
    cursor: pointer;
    outline: none;
    appearance: auto;
    min-width: 60px;
}

.gl-pagination-size-select:disabled[b-862i1dt17o] {
    opacity: 0.5;
    cursor: not-allowed;
}

.gl-pagination-info[b-862i1dt17o] {
    font-size: 0.82rem;
    color: #475467;
}

.gl-pagination-controls[b-862i1dt17o] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.gl-pagination-current[b-862i1dt17o] {
    font-size: 0.82rem;
    font-weight: 600;
    color: #1f2937;
    min-width: 60px;
    text-align: center;
}

/* Item editor grid - kolom aksi menyesuaikan konten */
.rfp-item-editor-grid[b-862i1dt17o] {
    grid-template-columns:
        minmax(260px, 2fr)
        minmax(90px, 0.7fr)
        minmax(120px, 0.8fr)
        minmax(140px, 1fr)
        minmax(150px, 1fr)
        auto;
}

.rfp-item-editor-grid-cost-center[b-862i1dt17o] {
    grid-template-columns:
        minmax(260px, 2fr)
        minmax(90px, 0.7fr)
        minmax(120px, 0.8fr)
        minmax(140px, 1fr)
        minmax(200px, 1.3fr)
        minmax(150px, 1fr)
        auto;
    min-width: 1120px;
}

.rfp-item-editor-grid-multi-gl[b-862i1dt17o] {
    grid-template-columns:
        minmax(260px, 2fr)
        minmax(90px, 0.7fr)
        minmax(120px, 0.8fr)
        minmax(140px, 1fr)
        minmax(180px, 1.2fr)
        minmax(150px, 1fr)
        auto;
    min-width: 1120px;
}

.rfp-internal-documents-upload-progress[b-862i1dt17o] {
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid #d7dee8;
    border-radius: 12px;
    background: #f8fbff;
}

.rfp-internal-documents-upload-progress .upload-field-progress-row[b-862i1dt17o] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.rfp-internal-documents-upload-progress .upload-field-hint:first-child[b-862i1dt17o] {
    color: #0f172a;
    font-size: 0.9rem;
    font-weight: 700;
}

.rfp-internal-documents-upload-progress .upload-field-hint:last-child[b-862i1dt17o] {
    color: #1f6feb;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.rfp-internal-documents-upload-progress .progress[b-862i1dt17o] {
    position: relative;
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: #dceaff;
}

.rfp-internal-documents-upload-progress .progress-bar[b-862i1dt17o] {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #1f6feb 0%, #67a0ff 100%);
    background-size: 1rem 1rem;
}

.rfp-internal-documents-upload-progress .progress-bar-striped[b-862i1dt17o] {
    background-image:
        linear-gradient(
            45deg,
            rgba(255, 255, 255, 0.22) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255, 255, 255, 0.22) 50%,
            rgba(255, 255, 255, 0.22) 75%,
            transparent 75%,
            transparent);
}

.rfp-internal-documents-upload-progress .progress-bar-animated[b-862i1dt17o] {
    animation: rfp-internal-upload-stripes-b-862i1dt17o 1s linear infinite;
}

.rfp-internal-documents-current-file[b-862i1dt17o] {
    border: 1px solid #d7dee8;
    border-radius: 12px;
    background: #f8fbff;
}

.rfp-internal-documents-current-actions[b-862i1dt17o] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.rfp-internal-documents-current-action[b-862i1dt17o] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 5px;
    min-height: 40px;
    height: auto;
    min-width: 0;
    width: 100%;
    padding: 9px 6px;
    border-radius: 10px;
    border: 1px solid #d7dee8;
    background: #ffffff;
    color: #1f6feb;
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
    white-space: normal;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.rfp-internal-documents-current-action:hover:not(:disabled):not(.is-disabled)[b-862i1dt17o] {
    border-color: #bcd3ff;
    background: #f8fbff;
    box-shadow: 0 8px 20px rgba(31, 111, 235, 0.08);
}

.rfp-internal-documents-current-action:disabled[b-862i1dt17o],
.rfp-internal-documents-current-action.is-disabled[b-862i1dt17o] {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

.rfp-internal-documents-current-action-preview[b-862i1dt17o] {
    border-color: #d9d0ff;
    color: #6d28d9;
}

.rfp-internal-documents-current-action-preview:hover:not(:disabled)[b-862i1dt17o] {
    border-color: #c4b5fd;
    background: #f5f3ff;
    color: #5b21b6;
}

.rfp-internal-documents-current-action-edit[b-862i1dt17o] {
    border-color: #cfe0ff;
    color: #1f6feb;
}

.rfp-internal-documents-current-action-delete[b-862i1dt17o] {
    border-color: #ffc9c9;
    color: #dc2626;
}

.rfp-internal-documents-current-action-delete:hover:not(:disabled)[b-862i1dt17o] {
    border-color: #fca5a5;
    background: #fff5f5;
    color: #b91c1c;
}

.rfp-internal-documents-current-action-input[b-862i1dt17o] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.rfp-internal-documents-current-action .ki-filled[b-862i1dt17o] {
    flex: 0 0 auto;
    font-size: 0.85rem;
}

.rfp-internal-documents-current-action span[b-862i1dt17o] {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
}

@keyframes rfp-internal-upload-stripes-b-862i1dt17o {
    from {
        background-position: 1rem 0;
    }

    to {
        background-position: 0 0;
    }
}

@media (max-width: 1532px) {
    .rfp-internal-documents-current-actions[b-862i1dt17o] {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .rfp-internal-documents-current-action[b-862i1dt17o] {
        min-height: 42px;
        padding: 10px 12px;
        font-size: 0.88rem;
    }
}

.document-preview-modal-backdrop[b-862i1dt17o] {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.55);
    padding: 24px;
}

.document-preview-modal[b-862i1dt17o] {
    display: flex;
    flex-direction: column;
    width: min(900px, 100%);
    height: min(85vh, 1000px);
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.35);
}

.document-preview-modal-header[b-862i1dt17o] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
    flex: 0 0 auto;
}

.document-preview-modal-title[b-862i1dt17o] {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.document-preview-modal-action[b-862i1dt17o] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #475569;
    cursor: pointer;
    flex: 0 0 auto;
}

.document-preview-modal-action:hover[b-862i1dt17o] {
    background: #f1f5f9;
}

.document-preview-modal-body[b-862i1dt17o] {
    flex: 1;
    min-height: 0;
    overflow: auto;
    background: #f9fafb;
    display: flex;
    flex-direction: column;
}

.document-preview-modal-pdf[b-862i1dt17o] {
    width: 100%;
    height: 100%;
    overflow: auto;
    padding: 1rem;
    box-sizing: border-box;
}

.document-preview-modal-image[b-862i1dt17o] {
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    object-fit: contain;
}

.document-preview-modal-fallback[b-862i1dt17o] {
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 2rem;
    text-align: center;
    color: #6b7280;
}

.documents-busy-overlay[b-862i1dt17o] {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: grid;
    place-items: center;
    padding: 16px;
    background: rgba(15, 23, 42, 0.45);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    animation: documents-busy-fade-b-862i1dt17o 0.18s ease-out both;
}

.documents-busy-card[b-862i1dt17o] {
    --busy-accent: var(--app-primary, #1f6feb);
    display: grid;
    justify-items: center;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    width: min(428px, 100%);
    padding: 28px 28px 20px;
    text-align: center;
    color: var(--app-text, #172033);
    background: #fff;
    border: 1px solid var(--app-border, #d8dee7);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
    animation: documents-busy-pop-b-862i1dt17o 0.26s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}

.documents-busy-icon[b-862i1dt17o] {
    position: relative;
    display: grid;
    place-items: center;
    width: 96px;
    height: 96px;
    margin-bottom: 6px;
}

.documents-busy-ring[b-862i1dt17o] {
    position: absolute;
    inset: 12px;
    border: 2px solid var(--busy-accent);
    border-radius: 50%;
    opacity: 0;
    animation: documents-busy-ripple-b-862i1dt17o 1.8s ease-out infinite;
}

.documents-busy-ring--delay[b-862i1dt17o] { animation-delay: 0.9s; }

.documents-busy-badge[b-862i1dt17o] {
    position: relative;
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    color: #fff;
    background: var(--busy-accent);
    background: linear-gradient(145deg, var(--busy-accent), color-mix(in srgb, var(--busy-accent) 68%, #0b1b3a));
    border-radius: 50%;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.22);
}

.documents-busy-badge i[b-862i1dt17o] {
    font-size: 30px;
    line-height: 1;
    animation: documents-busy-float-b-862i1dt17o 1.3s ease-in-out infinite;
}

.documents-busy-title[b-862i1dt17o] {
    max-width: 100%;
    overflow-wrap: anywhere;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.documents-busy-detail[b-862i1dt17o] {
    max-width: 100%;
    overflow-wrap: anywhere;
    font-size: 0.85rem;
    color: var(--app-text-muted, #5f6b7a);
}

.documents-busy-file[b-862i1dt17o] {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    margin-top: 10px;
    padding: 8px 12px;
    font-size: 0.82rem;
    background: #f7f9fc;
    border: 1px solid var(--app-border, #d8dee7);
    border-radius: 10px;
}

.documents-busy-file i[b-862i1dt17o] {
    flex-shrink: 0;
    color: var(--busy-accent);
}

.documents-busy-file-name[b-862i1dt17o] {
    min-width: 0;
    overflow: hidden;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.documents-busy-file-size[b-862i1dt17o] {
    flex-shrink: 0;
    color: var(--app-text-muted, #5f6b7a);
}

.documents-busy-track[b-862i1dt17o] {
    position: relative;
    width: 100%;
    height: 6px;
    margin-top: 14px;
    overflow: hidden;
    background: #e6ecf5;
    border-radius: 999px;
}

.documents-busy-bar[b-862i1dt17o] {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 38%;
    background: var(--busy-accent);
    border-radius: 999px;
    animation: documents-busy-slide-b-862i1dt17o 1.2s ease-in-out infinite;
}

.documents-busy-hint[b-862i1dt17o] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    font-size: 0.75rem;
    color: var(--app-text-muted, #5f6b7a);
}

@keyframes documents-busy-fade-b-862i1dt17o {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes documents-busy-pop-b-862i1dt17o {
    from { opacity: 0; transform: translateY(8px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes documents-busy-ripple-b-862i1dt17o {
    0% { opacity: 0.55; transform: scale(0.7); }
    100% { opacity: 0; transform: scale(1.35); }
}

@keyframes documents-busy-float-b-862i1dt17o {
    0%, 100% { transform: translateY(3px); }
    50% { transform: translateY(-4px); }
}

@keyframes documents-busy-slide-b-862i1dt17o {
    from { transform: translateX(-100%); }
    to { transform: translateX(270%); }
}

@media (prefers-reduced-motion: reduce) {
    .documents-busy-overlay[b-862i1dt17o],
    .documents-busy-card[b-862i1dt17o],
    .documents-busy-ring[b-862i1dt17o],
    .documents-busy-badge i[b-862i1dt17o],
    .documents-busy-bar[b-862i1dt17o] {
        animation: none;
    }

    .documents-busy-ring[b-862i1dt17o] { display: none; }
    .documents-busy-bar[b-862i1dt17o] { width: 100%; opacity: 0.55; }
}

.documents-busy-card.is-confirm[b-862i1dt17o] { --busy-accent: #d97706; }

.documents-busy-confirm-actions[b-862i1dt17o] {
    display: flex;
    gap: 10px;
    width: 100%;
    margin-top: 18px;
}

.documents-busy-confirm-btn[b-862i1dt17o] {
    flex: 1;
    padding: 10px 16px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.documents-busy-confirm-btn-secondary[b-862i1dt17o] {
    background: #ffffff;
    border-color: var(--app-border, #d8dee7);
    color: #475569;
}

.documents-busy-confirm-btn-secondary:hover[b-862i1dt17o] {
    background: #f1f5f9;
}

.documents-busy-confirm-btn-primary[b-862i1dt17o] {
    background: var(--busy-accent);
    color: #ffffff;
}

.documents-busy-confirm-btn-primary:hover[b-862i1dt17o] {
    opacity: 0.9;
}
/* /Component/Page/PaymentRequest/RfpInternal/RfpInternalList.razor.rz.scp.css */
.rfp-list-toolbar[b-vkp5kguoh0] {
    display: block;
    margin-bottom: 12px;
}

.rfp-list-toolbar-top[b-vkp5kguoh0] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    flex-wrap: nowrap;
}

.rfp-list-period-field[b-vkp5kguoh0] {
    flex: 0 1 260px;
    min-width: 220px;
}

.rfp-list-search-shell[b-vkp5kguoh0] {
    display: none;
    flex: 0 1 420px;
    max-width: 420px;
    min-width: 280px;
}

.rfp-list-search-input[b-vkp5kguoh0] {
    width: 100%;
}

.rfp-list-search[b-vkp5kguoh0] {
    width: 100%;
    min-height: 42px;
    padding: 0 14px;
    border: 1px solid var(--app-border-strong);
    border-radius: 10px;
    background: #fff;
    color: var(--app-text);
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.rfp-list-search[b-vkp5kguoh0]::placeholder {
    color: var(--app-text-muted);
}

.rfp-list-search:focus[b-vkp5kguoh0] {
    border-color: var(--app-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.rfp-list-toolbar-actions[b-vkp5kguoh0] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.rfp-list-toolbar-bottom-actions[b-vkp5kguoh0] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-left: auto;
}

.rfp-list-create-button[b-vkp5kguoh0] {
    color: #fff;
    text-decoration: none;
}

.rfp-list-create-button:hover[b-vkp5kguoh0],
.rfp-list-create-button:focus[b-vkp5kguoh0] {
    color: #fff;
    text-decoration: none;
}

/* .kt-btn-green:hover (styles.css) memang berwarna hijau juga, tapi utility
   generik .kt-btn:hover (var(--primary), biru) menang di kelas ini karena
   urutan @layer Tailwind - bukan urutan tekstual di file - jadi menimpanya
   berdasar teks CSS saja tidak cukup. !important di sini + atribut scope
   Blazor (spesifisitas lebih tinggi dari utility global manapun) memaksa
   hover tetap hijau (lebih muda dari solid idle-nya, green-400 vs green-600). */
.rfp-export-excel-button:hover[b-vkp5kguoh0] {
    background-color: var(--color-green-400) !important;
    color: #fff !important;
}

.rfp-status-chip-group[b-vkp5kguoh0] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    width: auto;
}

.rfp-status-chip[b-vkp5kguoh0] {
    min-width: 0;
    gap: 6px;
}

.rfp-status-chip:hover[b-vkp5kguoh0] {
    border-color: var(--app-primary);
    color: var(--app-primary);
}

.rfp-status-chip.active[b-vkp5kguoh0] {
    border-color: #70BE45;
    background: #70BE45;
    color: #fff;
    box-shadow: 0 8px 18px rgba(112, 190, 69, 0.18);
}

.kt-btn.is-active[b-vkp5kguoh0] {
    border-color: var(--app-primary);
    color: var(--app-primary);
    background: rgba(37, 99, 235, 0.08);
}

.rfp-filter-drawer-body[b-vkp5kguoh0] {
    display: grid;
    gap: 14px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    align-content: start;
    grid-auto-rows: max-content;
}

.rfp-filter-field[b-vkp5kguoh0] {
    display: grid;
    gap: 6px;
}

.rfp-filter-label[b-vkp5kguoh0] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--app-text-muted);
}

.rfp-filter-input[b-vkp5kguoh0] {
    width: 100%;
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid var(--app-border-strong);
    border-radius: 10px;
    background: #fff;
    color: var(--app-text);
    outline: none;
}

.rfp-filter-input:focus[b-vkp5kguoh0] {
    border-color: var(--app-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.rfp-filter-date-picker[b-vkp5kguoh0] {
    display: block;
    width: 100%;
}

.rfp-filter-note[b-vkp5kguoh0] {
    margin: 4px 0 0;
    color: var(--app-text-muted);
    font-size: 0.85rem;
    line-height: 1.5;
}

@media (max-width: 767.98px) {
    .rfp-list-toolbar-top[b-vkp5kguoh0] {
        align-items: stretch;
        flex-wrap: wrap;
    }

    .rfp-list-toolbar-actions[b-vkp5kguoh0],
    .rfp-list-toolbar-bottom-actions[b-vkp5kguoh0] {
        width: 100%;
    }

    .rfp-list-toolbar-actions > *[b-vkp5kguoh0],
    .rfp-list-toolbar-bottom-actions > *[b-vkp5kguoh0] {
        flex: 1 1 0;
    }

    .rfp-status-chip-group[b-vkp5kguoh0] {
        flex: 1 1 100%;
        width: 100%;
    }

    .rfp-status-chip-group .rfp-status-chip[b-vkp5kguoh0] {
        flex: 1 1 0;
    }

    .rfp-list-search-shell[b-vkp5kguoh0] {
        flex-basis: 100%;
        max-width: none;
    }

    .rfp-list-period-field[b-vkp5kguoh0] {
        flex-basis: 100%;
        min-width: 0;
    }
}

.rfp-action-detail-grid[b-vkp5kguoh0] {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
}

.rfp-action-detail-row[b-vkp5kguoh0] {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.rfp-action-detail-label[b-vkp5kguoh0] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--app-text-muted);
}

.rfp-action-detail-value[b-vkp5kguoh0] {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--app-text);
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.rfp-action-cancel-button[b-vkp5kguoh0],
.rfp-action-cancel-button:focus[b-vkp5kguoh0] {
    background-color: #dc2626 !important;
    border-color: #dc2626 !important;
    color: #ffffff !important;
}

.rfp-action-cancel-button:hover[b-vkp5kguoh0] {
    background-color: #b91c1c !important;
    border-color: #b91c1c !important;
    color: #ffffff !important;
}

.rfp-action-drawer-shell[b-vkp5kguoh0] {
    display: grid;
    gap: 18px;
    align-content: start;
    grid-auto-rows: max-content;
}

.rfp-action-drawer-tabs[b-vkp5kguoh0] {
    display: flex;
    gap: 4px;
    padding: 0 20px;
    overflow-x: auto;
    border-bottom: 1px solid var(--app-border);
}

.rfp-action-drawer-tab[b-vkp5kguoh0] {
    flex: 0 0 auto;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    padding: 12px 10px;
    background: transparent;
    color: var(--app-text-muted);
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.rfp-action-drawer-tab:hover[b-vkp5kguoh0],
.rfp-action-drawer-tab.active[b-vkp5kguoh0] {
    color: var(--app-primary);
}

.rfp-action-drawer-tab.active[b-vkp5kguoh0] {
    border-bottom-color: var(--app-primary);
}

.rfp-action-tab-panel[b-vkp5kguoh0] {
    display: grid;
    gap: 16px;
    align-content: start;
}

.rfp-action-tab-heading[b-vkp5kguoh0] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.rfp-action-tab-description[b-vkp5kguoh0] {
    margin-top: 4px;
    color: var(--app-text-muted);
    font-size: 0.8rem;
    line-height: 1.45;
}

.rfp-action-empty-state[b-vkp5kguoh0] {
    display: grid;
    min-height: 180px;
    place-items: center;
    padding: 24px;
    border: 1px dashed var(--app-border-strong);
    border-radius: 14px;
    color: var(--app-text-muted);
    text-align: center;
}

.rfp-action-empty-state-error[b-vkp5kguoh0] {
    color: #b91c1c;
    background: #fff7f7;
}

.rfp-action-document-list[b-vkp5kguoh0] {
    display: grid;
    gap: 8px;
}

.rfp-action-document-row[b-vkp5kguoh0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--app-border);
    border-radius: 12px;
    background: #fff;
}

.rfp-action-document-title[b-vkp5kguoh0] {
    color: var(--app-text);
    font-size: 0.86rem;
    font-weight: 700;
}

.rfp-action-document-meta[b-vkp5kguoh0],
.rfp-action-document-size[b-vkp5kguoh0] {
    color: var(--app-text-muted);
    font-size: 0.75rem;
}

.rfp-action-document-side[b-vkp5kguoh0] {
    display: grid;
    flex: 0 0 auto;
    gap: 3px;
    justify-items: end;
    text-align: right;
}

.rfp-action-document-status[b-vkp5kguoh0] {
    color: var(--app-primary);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
}

@media (max-width: 520px) {
    .rfp-action-tab-heading[b-vkp5kguoh0],
    .rfp-action-document-row[b-vkp5kguoh0] {
        align-items: stretch;
        flex-direction: column;
    }

    .rfp-action-document-side[b-vkp5kguoh0] {
        justify-items: start;
        text-align: left;
    }
}

.rfp-action-summary-card[b-vkp5kguoh0] {
    display: grid;
    gap: 16px;
    padding: 18px;
    border: 1px solid var(--app-border-strong);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(255, 255, 255, 0.98));
}

.rfp-action-summary-top[b-vkp5kguoh0] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.rfp-action-summary-eyebrow[b-vkp5kguoh0] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--app-primary);
}

.rfp-action-summary-title[b-vkp5kguoh0] {
    margin-top: 6px;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--app-text);
    word-break: break-word;
}

.rfp-action-summary-subtitle[b-vkp5kguoh0] {
    margin-top: 6px;
    color: var(--app-text-muted);
    line-height: 1.5;
    word-break: break-word;
}

.rfp-action-summary-metrics[b-vkp5kguoh0] {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rfp-action-metric-card[b-vkp5kguoh0],
.rfp-action-note-card[b-vkp5kguoh0] {
    padding: 14px 16px;
    border: 1px solid var(--app-border-strong);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.92);
}

.rfp-action-metric-label[b-vkp5kguoh0] {
    display: block;
    margin-bottom: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--app-text-muted);
}

.rfp-action-metric-value[b-vkp5kguoh0] {
    display: block;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--app-text);
    word-break: break-word;
}

.rfp-action-section[b-vkp5kguoh0] {
    display: grid;
    gap: 12px;
}

.rfp-action-section-title[b-vkp5kguoh0] {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--app-text-muted);
}

.rfp-action-note-card[b-vkp5kguoh0] {
    color: var(--app-text);
    line-height: 1.6;
    word-break: break-word;
}

@media (max-width: 767.98px) {
    .rfp-action-detail-grid[b-vkp5kguoh0],
    .rfp-action-summary-metrics[b-vkp5kguoh0] {
        grid-template-columns: 1fr;
    }
}

.rfp-action-summary-top > div[b-vkp5kguoh0],
.rfp-action-section dd[b-vkp5kguoh0] {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}
/* /Component/Page/Portal/NotFound.razor.rz.scp.css */
/* Halaman 404. Ditulis sebagai CSS biasa, BUKAN utility Tailwind, karena bundle
   Metronic (assets/css/styles.css) hanya memuat kelas yang sudah terpakai saat
   bundle-nya di-build - utility baru diam-diam tidak berefek. */

.nf-wrap[b-pth2iot7pa] {
    display: flex;
    /* Tengah secara horizontal DAN vertikal. */
    align-items: center;
    justify-content: center;

    /* Pemusatan vertikal butuh tinggi untuk dibagi dua, dan rantai induknya
       tidak menyediakannya: <main class="grow"> memang memenuhi tinggi kartu,
       tapi anaknya (.kt-container-fluid) blok biasa yang tingginya mengikuti
       isi - jadi `height: 100%` di sini tidak punya acuan dan diabaikan.

       Karena itu tingginya dihitung dari viewport. 150px adalah jumlah ruang
       di luar area konten: margin bawah kartu (20) + padding atas area scroll
       (28) + footer (~44) + sisa napas. min-height, BUKAN height, supaya di
       layar pendek isinya boleh mendorong dan tetap terbaca penuh. */
    min-height: calc(100dvh - var(--header-height) - 150px);

    padding: 40px 20px;
}

.nf-inner[b-pth2iot7pa] {
    /* Seluruh isi rata tengah. Tombol .nf-btn inline-block, jadi ikut terbawa
       text-align ini tanpa aturan tambahan. */
    text-align: center;
    width: 100%;
    max-width: 720px;
    /* Warna brand YAKKAP, diambil dari wwwroot/assets/media/app/logo.png:
       biru wordmark #006CB7, hijau daun #70BE45. Dipakai sebagai variabel di
       satu tempat supaya SVG inline di NotFound.razor ikut berubah - variabel
       CSS diwariskan lewat DOM, jadi tetap sampai ke elemen di dalam <svg>
       walau atribut scope CSS isolation tidak menempel di sana. */
    --nf-accent: #006cb7;
    --nf-404: #70be45;
}

.nf-art[b-pth2iot7pa] {
    display: block;
    /* Blok tidak ikut text-align induknya - dipusatkan lewat margin auto. */
    margin-inline: auto;
    width: 100%;
    /* Diperkecil dari 420px: ilustrasi (termasuk gelembung 404 di dalamnya)
       ikut mengecil proporsional karena skala SVG mengikuti lebar elemen. */
    max-width: 260px;
    height: auto;
    margin-bottom: 18px;
}

.nf-title[b-pth2iot7pa] {
    margin: 0 0 12px;
    color: var(--nf-accent);
    font-size: clamp(22px, 3.2vw, 30px);
    /* Bobot tipis seperti pada acuan - kontras dengan judul tebal di halaman lain. */
    font-weight: 300;
    line-height: 1.05;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.nf-line[b-pth2iot7pa] {
    margin: 0 0 8px;
    color: #5b6670;
    font-size: 14px;
    line-height: 1.6;
}

.nf-btn[b-pth2iot7pa] {
    display: inline-block;
    margin-top: 20px;
    padding: 9px 22px;
    border: 1px solid var(--nf-accent);
    /* Pil penuh seperti acuan. */
    border-radius: 9999px;
    color: var(--nf-accent);
    font-size: 14px;
    text-decoration: none;
    background: transparent;
    transition: background-color .15s ease, color .15s ease;
}

    .nf-btn:hover[b-pth2iot7pa],
    .nf-btn:focus-visible[b-pth2iot7pa] {
        background: var(--nf-accent);
        color: #fff;
    }

@media (max-width: 640px) {
    .nf-art[b-pth2iot7pa] {
        max-width: 220px;
        margin-bottom: 14px;
    }

    .nf-line[b-pth2iot7pa] {
        font-size: 13px;
    }
}
/* /Component/Page/Portal/Unauthorized.razor.rz.scp.css */
/* Halaman 401. Ditulis sebagai CSS biasa, BUKAN utility Tailwind, karena bundle
   Metronic (assets/css/styles.css) hanya memuat kelas yang sudah terpakai saat
   bundle-nya di-build - utility baru diam-diam tidak berefek.

   Awalan kelasnya .ua- (bukan .nf-) walaupun kedua file sama-sama ter-scope oleh
   CSS isolation. Alasannya bukan tabrakan gaya, melainkan supaya pencarian teks
   di repo bisa memisahkan aturan milik 401 dari milik 404: dua file dengan nama
   kelas identik akan selalu muncul berbarengan di hasil grep, dan orang berikutnya
   yang menyesuaikan salah satunya harus menebak mana yang sedang ia lihat. */

.ua-wrap[b-4m3qxomxzp] {
    display: flex;
    /* Tengah secara horizontal DAN vertikal. */
    align-items: center;
    justify-content: center;

    /* Pemusatan vertikal butuh tinggi untuk dibagi dua, dan rantai induknya
       tidak menyediakannya: <main class="grow"> memang memenuhi tinggi kartu,
       tapi anaknya (.kt-container-fluid) blok biasa yang tingginya mengikuti
       isi - jadi `height: 100%` di sini tidak punya acuan dan diabaikan.

       Karena itu tingginya dihitung dari viewport. 150px adalah jumlah ruang
       di luar area konten: margin bawah kartu (20) + padding atas area scroll
       (28) + footer (~44) + sisa napas. min-height, BUKAN height, supaya di
       layar pendek isinya boleh mendorong dan tetap terbaca penuh. */
    min-height: calc(100dvh - var(--header-height) - 150px);

    padding: 40px 20px;
}

.ua-inner[b-4m3qxomxzp] {
    /* Seluruh isi rata tengah. Tombol .ua-btn inline-block, jadi ikut terbawa
       text-align ini tanpa aturan tambahan. */
    text-align: center;
    width: 100%;
    max-width: 720px;

    /* --ua-accent: biru wordmark YAKKAP, sama dengan halaman 404 supaya kedua
       halaman terasa satu keluarga.

       --ua-401: SENGAJA BERBEDA dari hijau --nf-404. Kalau angka 401 dan 404
       memakai warna yang sama, satu-satunya pembeda kedua halaman tinggal satu
       digit di dalam gelembung - terlalu tipis untuk kondisi yang penanganannya
       jauh berbeda ("URL salah" vs "hak akses kurang"). Amber di bawah ini
       nilainya sama dengan --orange-strong yang sudah dipakai di halaman
       verifikasi, jadi tetap di dalam palet aplikasi. */
    --ua-accent: #006cb7;
    --ua-401: #e0901a;
}

.ua-art[b-4m3qxomxzp] {
    display: block;
    /* Blok tidak ikut text-align induknya - dipusatkan lewat margin auto. */
    margin-inline: auto;
    width: 100%;
    max-width: 260px;
    height: auto;
    margin-bottom: 18px;
}

.ua-title[b-4m3qxomxzp] {
    margin: 0 0 12px;
    color: var(--ua-accent);
    font-size: clamp(22px, 3.2vw, 30px);
    /* Bobot tipis seperti pada halaman 404 - kontras dengan judul tebal di
       halaman lain. */
    font-weight: 300;
    line-height: 1.05;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.ua-line[b-4m3qxomxzp] {
    margin: 0 0 8px;
    color: #5b6670;
    font-size: 14px;
    line-height: 1.6;
}

.ua-btn[b-4m3qxomxzp] {
    display: inline-block;
    margin-top: 20px;
    padding: 9px 22px;
    border: 1px solid var(--ua-accent);
    /* Pil penuh seperti halaman 404. */
    border-radius: 9999px;
    color: var(--ua-accent);
    font-size: 14px;
    text-decoration: none;
    background: transparent;
    transition: background-color .15s ease, color .15s ease;
}

    .ua-btn:hover[b-4m3qxomxzp],
    .ua-btn:focus-visible[b-4m3qxomxzp] {
        background: var(--ua-accent);
        color: #fff;
    }

@media (max-width: 640px) {
    .ua-art[b-4m3qxomxzp] {
        max-width: 220px;
        margin-bottom: 14px;
    }

    .ua-line[b-4m3qxomxzp] {
        font-size: 13px;
    }
}
/* /Component/Page/Report/Operasional/R01DocumentTracking.razor.rz.scp.css */
/* R01 Document Tracking - mockup-faithful styles */

/* ── Age color-coding (Umur column) ────────────────── */
[b-fr135fjeg7] .r01-age-dang {
    color: #E53935;
    font-weight: 700;
}

[b-fr135fjeg7] .r01-age-warn {
    color: #FB8C00;
    font-weight: 600;
}

/* ── Footer ────────────────────────────────────────── */
.r01-footer[b-fr135fjeg7] {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 6px;
    padding: 9px 13px;
    font-size: 11px;
    color: #64748B;
    line-height: 1.6;
    margin: 0 14px 14px;
    margin-top: 10px;
}

.r01-footer b[b-fr135fjeg7] {
    color: #334155;
}

.r01-caveat[b-fr135fjeg7] {
    color: #B45309;
    margin-top: 3px;
}
/* /Component/Page/Report/Operasional/R02PipelineAging.razor.rz.scp.css */
/* R02 Pipeline & Umur - mockup-faithful styles */

/* ── Note banner ─────────────────────────────────────── */
.r02-note[b-qs20kw5irw] {
    background: #FFFBEB;
    border: 1px solid #FDE68A;
    border-radius: 5px;
    padding: 9px 12px;
    font-size: 11.5px;
    color: #92400E;
    margin-bottom: 12px;
}

/* ── Matrix table ────────────────────────────────────── */
.r02-matrix[b-qs20kw5irw] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 3px;
}

.r02-matrix th[b-qs20kw5irw] {
    background: none;
    border: none;
    padding: 6px 8px;
    text-align: center;
    color: #64748B;
    font-size: 11px;
    font-weight: 600;
}

.r02-matrix td[b-qs20kw5irw] {
    border: none;
    padding: 0;
}

.r02-matrix td:first-child[b-qs20kw5irw] {
    font-weight: 600;
    padding-right: 10px;
    white-space: nowrap;
}

/* ── Cell (count + amount) ───────────────────────────── */
.r02-cell[b-qs20kw5irw] {
    border-radius: 4px;
    padding: 9px 10px;
    text-align: center;
    line-height: 1.3;
}

.r02-cell b[b-qs20kw5irw] {
    display: block;
    font-size: 15px;
    font-weight: 700;
}

.r02-cell small[b-qs20kw5irw] {
    font-size: 10px;
    opacity: 0.85;
}

/* ── Heatmap colors ──────────────────────────────────── */
.r02-h0[b-qs20kw5irw] {
    background: #F1F5F9;
    color: #94A3B8;
}

.r02-h1[b-qs20kw5irw] {
    background: #E8F5E9;
    color: #2E7D32;
}

.r02-h2[b-qs20kw5irw] {
    background: #FFF8E1;
    color: #F57F17;
}

.r02-h3[b-qs20kw5irw] {
    background: #FFE0B2;
    color: #E65100;
}

.r02-h4[b-qs20kw5irw] {
    background: #FFCDD2;
    color: #B71C1C;
}

/* ── Legend ───────────────────────────────────────────── */
.r02-legend[b-qs20kw5irw] {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 11px;
    color: #64748B;
    padding: 9px 14px;
}

.r02-legend i[b-qs20kw5irw] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    margin-right: 5px;
    vertical-align: -1px;
}

/* ── Funnel bar ──────────────────────────────────────── */
.r02-funnel-row[b-qs20kw5irw] {
    display: flex;
    align-items: center;
    gap: 11px;
}

.r02-funnel-label[b-qs20kw5irw] {
    width: 190px;
    font-size: 12px;
    flex-shrink: 0;
}

.r02-funnel-bar[b-qs20kw5irw] {
    flex: 1;
    height: 22px;
    background: #EEF2F6;
    border-radius: 3px;
    overflow: hidden;
}

.r02-funnel-fill[b-qs20kw5irw] {
    height: 100%;
    border-radius: 3px;
    transition: width 0.5s ease;
}

.r02-bar-brand[b-qs20kw5irw] {
    background: #006CB7;
}

.r02-bar-warn[b-qs20kw5irw] {
    background: #FB8C00;
}

.r02-bar-green[b-qs20kw5irw] {
    background: #70BE45;
}

.r02-funnel-stats[b-qs20kw5irw] {
    width: 120px;
    text-align: right;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

/* ── Insight text ────────────────────────────────────── */
.r02-insight[b-qs20kw5irw] {
    margin-top: 14px;
    font-size: 12px;
    color: #64748B;
}

.r02-insight strong[b-qs20kw5irw] {
    color: #334155;
}

/* ── Footer ────────────────────────────────────────── */
.r02-footer[b-qs20kw5irw] {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 6px;
    padding: 9px 13px;
    font-size: 11px;
    color: #64748B;
    line-height: 1.6;
    margin: 0 14px 14px;
}

.r02-footer b[b-qs20kw5irw] {
    color: #334155;
}

.r02-caveat[b-qs20kw5irw] {
    color: #B45309;
    margin-top: 3px;
}
/* /Component/Page/Report/Operasional/R03DebtDueDate.razor.rz.scp.css */
/* R03 Hutang & Jatuh Tempo - mockup-faithful styles */

/* ── Aging chart (CSS flex) ────────────────────────── */
.r03-aging-chart[b-19t51846o0] {
    display: flex;
    align-items: stretch;
    width: 100%;
    min-height: 260px;
}

.r03-aging-slot[b-19t51846o0] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 0 4px;
}

.r03-aging-amount[b-19t51846o0] {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    line-height: 1.2;
    white-space: nowrap;
}

.r03-aging-bar-wrap[b-19t51846o0] {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    border-bottom: 1.5px solid #DBE3EC;
}

.r03-aging-bar[b-19t51846o0] {
    width: 56%;
    max-width: 86px;
    border-radius: 4px 4px 0 0;
    transition: height 0.4s ease;
}

.r03-aging-zero[b-19t51846o0] {
    width: 36px;
    height: 3px;
    background: #CBD5E1;
    border-radius: 2px;
}

.r03-aging-label[b-19t51846o0] {
    font-size: 15px;
    font-weight: 500;
    color: #526987;
    white-space: nowrap;
}

.r03-aging-doc[b-19t51846o0] {
    font-size: 14px;
    font-weight: 400;
    color: #526987;
}

/* ── Footer ────────────────────────────────────────── */
.r03-footer[b-19t51846o0] {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 6px;
    padding: 9px 13px;
    font-size: 11px;
    color: #64748B;
    line-height: 1.6;
    margin: 16px 14px 14px;
}

.r03-footer b[b-19t51846o0] {
    color: #334155;
}
/* /Component/Page/Report/Strategis/R09VendorSpend.razor.rz.scp.css */
/* R09 - Vendor & Konsentrasi Belanja. Palet dan ukuran disalin dari mockup
   YAPAYS-Report-Mockups.html, sama dengan yang dipakai R10 supaya kedua
   laporan terlihat satu keluarga. */

.r09[b-3prrjgyf6f] {
    --r09-brand: #006CB7;
    --r09-green: #70BE45;
    --r09-danger: #E53935;
    --r09-warn: #FB8C00;
    --r09-ink: #0F172A;
    --r09-muted: #64748B;
    --r09-line: #E2E8F0;
    --r09-surface: #fff;

    color: var(--r09-ink);
    font-size: 13px;
    /* Lebar halaman mengikuti .kt-container-fluid milik MainLayout, sama seperti
       .pay-page di halaman Verification - padding tepi diurus container itu.
       min-width:0 penting karena wadah isi di layout adalah flex item: tanpa itu
       ia menolak menyusut di bawah lebar isi terlebar dan tabel lebar akan
       menjebol lebar halaman, bukan menggulir di dalam kartunya. */
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.tnum[b-3prrjgyf6f] {
    font-variant-numeric: tabular-nums;
}

/* ── Header ── */
.r09-head[b-3prrjgyf6f] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

    .r09-head h1[b-3prrjgyf6f] {
        font-size: 20px;
        font-weight: 700;
        margin: 0;
    }

.r09-sub[b-3prrjgyf6f] {
    color: var(--r09-muted);
    font-size: 12.5px;
    margin-top: 3px;
}

.r09-head-ctl[b-3prrjgyf6f] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.r09-dash[b-3prrjgyf6f] {
    color: var(--r09-muted);
    font-size: 12px;
}

.r09-ctl[b-3prrjgyf6f] {
    height: 34px;
    padding: 0 10px;
    font-size: 12.5px;
    font-family: inherit;
    color: #475569;
    background: #fff;
    border: 1px solid var(--r09-line);
    border-radius: 5px;
}

/* ── Kartu ── */
.r09-card[b-3prrjgyf6f] {
    background: var(--r09-surface);
    border: 1px solid var(--r09-line);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 14px;
}

.r09-card-title[b-3prrjgyf6f] {
    padding: 12px 14px;
    border-bottom: 1px solid var(--r09-line);
    margin: 0;
    font-size: 13px;
    font-weight: 600;
}

/* ── Tab ── */
.r09-tabs[b-3prrjgyf6f] {
    display: flex;
    border-bottom: 1px solid var(--r09-line);
    background: #F8FAFC;
}

    .r09-tabs button[b-3prrjgyf6f] {
        padding: 11px 16px;
        font-size: 12.5px;
        font-family: inherit;
        font-weight: 600;
        color: var(--r09-muted);
        background: none;
        border: none;
        /* border-bottom transparan sejak awal, bukan ditambahkan saat aktif -
           kalau ditambahkan, teks tabnya bergeser 2px setiap kali diklik. */
        border-bottom: 2px solid transparent;
        cursor: pointer;
    }

        .r09-tabs button.on[b-3prrjgyf6f] {
            color: var(--r09-brand);
            border-bottom-color: var(--r09-brand);
            background: var(--r09-surface);
        }

.r09-count[b-3prrjgyf6f] {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 9px;
    background: var(--r09-line);
    color: var(--r09-muted);
    font-size: 11px;
}

/* ── Tabel ── */
/* Tabel vendor punya sepuluh kolom; pada layar sempit ia digulir sendiri
   supaya halamannya tidak ikut melebar. */
.r09-table-wrap[b-3prrjgyf6f] {
    overflow-x: auto;
}

.r09-table[b-3prrjgyf6f] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
    /* table-layout otomatis (bawaan) sengaja dipertahankan: sepuluh kolom ini
       lebarnya sangat tidak seragam, dan pembagian rata ala table-layout:fixed
       membuat kolom Kode kelebaran sementara Nama Vendor kesempitan. */
}

    /* Dulu seluruh tabel memakai white-space:nowrap. Dengan sepuluh kolom, lebar
       minimum tabelnya jadi lebih besar dari kartu, sehingga halaman terdorong
       melebihi lebar layar dan isinya terpotong di kanan.
       Sekarang hanya kolom yang MEMANG tak terbaca kalau dipenggal yang dikunci
       satu baris - kode, NPWP, rekening, tanggal, nilai, badge. Nama vendor dan
       kategori boleh melipat, dan itu yang membuat tabelnya muat di dalam kartu.
       Ini juga pola tabel di halaman Verification. */
    .r09-table .tnum[b-3prrjgyf6f],
    .r09-table th.r[b-3prrjgyf6f],
    .r09-table td.r[b-3prrjgyf6f],
    .r09-table .r09-badge[b-3prrjgyf6f] {
        white-space: nowrap;
    }

    .r09-table th[b-3prrjgyf6f] {
        padding: 9px 12px;
        text-align: left;
        font-weight: 600;
        font-size: 11.5px;
        color: var(--r09-muted);
        background: #F8FAFC;
        border-bottom: 1px solid var(--r09-line);
    }

    .r09-table td[b-3prrjgyf6f] {
        padding: 9px 12px;
        border-bottom: 1px solid #F1F5F9;
    }

    .r09-table tbody tr:hover td[b-3prrjgyf6f] {
        background: #F8FAFC;
    }

    .r09-table .r[b-3prrjgyf6f] {
        text-align: right;
    }

    .r09-table .warn[b-3prrjgyf6f] {
        color: var(--r09-warn);
    }

    .r09-table .w-rank[b-3prrjgyf6f] {
        width: 40px;
    }

/* ── Meter kelengkapan ── */
.r09-meter[b-3prrjgyf6f] {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .r09-meter .t[b-3prrjgyf6f] {
        flex: 1;
        height: 6px;
        min-width: 60px;
        background: #E2E8F0;
        border-radius: 3px;
        overflow: hidden;
    }

        .r09-meter .t i[b-3prrjgyf6f] {
            display: block;
            height: 100%;
        }

    .r09-meter span[b-3prrjgyf6f] {
        font-size: 11.5px;
        font-weight: 600;
        font-variant-numeric: tabular-nums;
    }

/* ── Badge ── */
.r09-badge[b-3prrjgyf6f] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.b-done[b-3prrjgyf6f] {
    background: #E8F5E9;
    color: #2E7D32;
}

.b-warn[b-3prrjgyf6f] {
    background: #FFF3E0;
    color: #E65100;
}

.b-dang[b-3prrjgyf6f] {
    background: #FFEBEE;
    color: #C62828;
}

.b-gray[b-3prrjgyf6f] {
    background: #F1F5F9;
    color: var(--r09-muted);
}

/* ── Loader ── */
/* Bentuk dan gerakannya mengikuti .loader-card di VerificationList. Tingginya
   datang dari inline style (GridHeight) supaya tidak bisa berselisih dengan
   tinggi grid; nilai di sini hanya cadangan. */
.r09-loader-card[b-3prrjgyf6f] {
    height: 560px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.r09-loader-wrap[b-3prrjgyf6f] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.r09-loader-spinner[b-3prrjgyf6f] {
    color: var(--r09-brand);
}

.r09-loader-msg[b-3prrjgyf6f] {
    margin: 0;
    font-size: 12.5px;
    color: var(--r09-muted);
}

/* Putaran dimatikan bila pengguna meminta gerakan dikurangi - spinner-nya
   tetap tampil sebagai penanda diam. */
@media (prefers-reduced-motion: reduce) {
    .r09-loader-spinner .spinner_r09[b-3prrjgyf6f] {
        animation: none;
    }
}

/* ── Baris alat di atas grid ── */
.r09-grid-toolbar[b-3prrjgyf6f] {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid var(--r09-line);
}

.r09-btn-export[b-3prrjgyf6f] {
    /* margin-left:auto, bukan justify-content pada barisnya: kalau nanti ada
       kontrol lain di kiri, tombol ini tetap menempel di kanan. */
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 32px;
    padding: 0 12px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: #1D6F42;
    background: #fff;
    border: 1px solid #BFDCCB;
    border-radius: 5px;
    cursor: pointer;
}

    .r09-btn-export:hover:not(:disabled)[b-3prrjgyf6f] {
        background: #F2F9F5;
        border-color: #1D6F42;
    }

    .r09-btn-export:disabled[b-3prrjgyf6f] {
        color: var(--r09-muted);
        border-color: var(--r09-line);
        background: #F8FAFC;
        cursor: default;
    }

.r09-xls-icon[b-3prrjgyf6f] {
    flex: none;
    display: block;
}

/* ── Grid Ignite UI (tab Master Vendor) ── */
/* Grid menempel rapat ke tepi kartu, sama seperti .card pada VerificationList
   yang memakai padding:0 supaya bingkai kartu menjadi bingkai grid. */
.r09-grid-shell[b-3prrjgyf6f] {
    padding: 0;
}

/* Blok di bawah disalin dari .card ::deep igc-grid pada VerificationList
   supaya kedua grid benar-benar seragam - huruf, kerapatan, sampai warna baris.
   Beberapa hal yang membuatnya harus ditulis begini:

   ::deep WAJIB. <igc-grid> dirender oleh komponen anak (IgbGrid), sehingga
   atribut isolasi CSS halaman ini tidak menempel padanya; tanpa ::deep seluruh
   aturan di bawah tidak pernah terpakai dan grid kembali ke gaya bawaan Ignite.

   Properti --ig-* diwariskan menembus shadow DOM grid, sedangkan font-family
   dan font-size mengalir turun dari host - itu sebabnya keduanya ditulis
   sebagai properti biasa, bukan sebagai variabel. */
.r09-grid-shell[b-3prrjgyf6f]  igc-grid {
    font-family: "JakartaSansFont", "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
    font-size: 13.5px;
    border: none;
    background: #fff;
    /* Kerapatan sedang: ~16px padding mendatar, ~13px menurun, header ~40px. */
    --ig-size: var(--ig-size-medium, 2);
    /* Header: strip terang, garis rambut di bawah, label abu-abu. */
    --ig-grid-header-background: #fbfcfd;
    --ig-grid-header-text-color: #8b93a7;
    --ig-grid-header-border-width: 1px;
    --ig-grid-header-border-style: solid;
    --ig-grid-header-border-color: #eef1f4;
    /* Badan: putih, tinta gelap, pemisah baris tipis, tanpa zebra. */
    --ig-grid-content-background: #ffffff;
    --ig-grid-content-text-color: #1b1f2b;
    --ig-grid-row-border-color: #f0f2f5;
    --ig-grid-row-odd-background: #ffffff;
    --ig-grid-row-even-background: #ffffff;
    --ig-grid-body-column-border-color-odd: transparent;
    --ig-grid-body-column-border-color-even: transparent;
    --ig-grid-row-hover-background: #f7f9fb;
    --ig-grid-row-hover-text-color: #1b1f2b;
    --ig-grid-row-selected-background: #eaf2fb;
    --ig-grid-row-selected-text-color: #1b1f2b;
    --ig-grid-cell-selected-background: transparent;
    --ig-grid-cell-selected-text-color: #1b1f2b;
    --ig-grid-cell-active-border-color: transparent;
    /* Bingkai luar diurus kartu - hindari border ganda. */
    --ig-grid-grid-border-color: transparent;
}

/* Baris paginator disamakan dengan judul tab: 12,5px, keluarga huruf halaman
   (--ast-font-sans), TANPA tebal - judul tab memakai 600, paginator tetap 400.

   Dua hal yang membuat aturannya harus selengkap ini:

   1. Angka di dropdown tidak mewarisi font-size dari host - ia memakai
      tipografi Ignite sendiri (--ig-body-1-font-size = 1rem = 16px di tema
      bootstrap). font-size biasa tidak menembus shadow DOM-nya, sedangkan
      custom property diwariskan ke dalam. Empat tingkat tipografi disetel
      sekaligus karena bagian paginator memakai body-1, body-2, subtitle-1,
      atau caption bergantung elemennya.

   2. font-family ditulis eksplisit, bukan inherit: mewarisi berarti mengambil
      keluarga huruf igc-grid (Jakarta Sans, disamakan dengan VerificationList),
      sedangkan judul tab mewarisi huruf halaman dari body.

   Cakupannya dibatasi ke igc-paginator: sel dan header grid tidak ikut berubah. */
.r09-grid-shell[b-3prrjgyf6f]  igc-paginator {
    font-family: var(--ast-font-sans, "Inter", system-ui, -apple-system, "Segoe UI", sans-serif);
    font-size: 12.5px;
    font-weight: 400;
    --ig-body-1-font-size: 12.5px;
    --ig-body-2-font-size: 12.5px;
    --ig-subtitle-1-font-size: 12.5px;
    --ig-caption-font-size: 12.5px;
}

/* Isi BodyTemplate juga duduk di dalam pohon render grid, jadi aturannya
   diulang di belakang ::deep. Nilainya sengaja sama persis dengan aturan
   bersandar-kelas di atas supaya meter dan badge terlihat identik di kedua
   tempat (grid dan tabel konsentrasi). */
.r09-grid-shell[b-3prrjgyf6f]  .r09-meter {
    display: flex;
    align-items: center;
    gap: 8px;
}

.r09-grid-shell[b-3prrjgyf6f]  .r09-meter .t {
    flex: 1;
    height: 6px;
    min-width: 60px;
    background: #E2E8F0;
    border-radius: 3px;
    overflow: hidden;
}

.r09-grid-shell[b-3prrjgyf6f]  .r09-meter .t i {
    display: block;
    height: 100%;
}

.r09-grid-shell[b-3prrjgyf6f]  .r09-meter span {
    font-size: 11.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.r09-grid-shell[b-3prrjgyf6f]  .r09-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.r09-grid-shell[b-3prrjgyf6f]  .b-done {
    background: #E8F5E9;
    color: #2E7D32;
}

.r09-grid-shell[b-3prrjgyf6f]  .b-warn {
    background: #FFF3E0;
    color: #E65100;
}

.r09-grid-shell[b-3prrjgyf6f]  .b-dang {
    background: #FFEBEE;
    color: #C62828;
}

.r09-grid-shell[b-3prrjgyf6f]  .b-gray {
    background: #F1F5F9;
    color: var(--r09-muted);
}

.r09-grid-shell[b-3prrjgyf6f]  .tnum {
    font-variant-numeric: tabular-nums;
}

.r09-warn-cell[b-3prrjgyf6f],
.r09-grid-shell[b-3prrjgyf6f]  .r09-warn-cell {
    color: var(--r09-warn);
}

/* display:block supaya text-align benar-benar berlaku di dalam sel grid -
   span inline hanya selebar teksnya dan rata kanannya tidak terlihat. */
.r09-cell-right[b-3prrjgyf6f],
.r09-grid-shell[b-3prrjgyf6f]  .r09-cell-right {
    display: block;
    text-align: right;
}

/* ── Grafik ── */
.r09-chart[b-3prrjgyf6f] {
    padding: 16px 18px;
}

.r09-svg[b-3prrjgyf6f] {
    width: 100%;
    height: auto;
}

.r09-note[b-3prrjgyf6f] {
    margin: 12px 0 0;
    font-size: 12px;
    color: var(--r09-muted);
}

.r09-empty[b-3prrjgyf6f] {
    margin: 0;
    padding: 24px 0;
    text-align: center;
    color: var(--r09-muted);
}

/* ── Status ── */
.r09-state[b-3prrjgyf6f] {
    padding: 24px;
    text-align: center;
    color: var(--r09-muted);
    background: var(--r09-surface);
    border: 1px solid var(--r09-line);
    border-radius: 6px;
}

.r09-state-err[b-3prrjgyf6f] {
    color: var(--r09-danger);
    background: #FFF5F5;
    border-color: #FECACA;
}
/* /Component/Page/Verification/Page/VerificationDetails.razor.rz.scp.css */
.pay-page[b-5m3uo638se] {
    --bg: #eef1f5;
    --card: #ffffff;
    --ink: #1f2937;
    --muted: #6b7280;
    --label: #6b7280;
    --line: #e3e7ec;
    --input-border: #d1d5db;
    --disabled-bg: #eef1f5;
    --disabled-ink: #8a94a3;
    --blue: #2563eb;
    --blue-strong: #1d4ed8;
    --banner-bg-1: #dbeafe;
    --banner-bg-2: #eaf2fe;
    --green: #16a34a;
    --green-strong: #15803d;
    --green-border: #34a853;
    --green-soft-bg: #edfaf0;
    --green-soft-border: #bfe6c7;
    --orange: #f0a020;
    --orange-strong: #e0901a;
    --radius: 12px;
    --shadow: 0 1px 3px rgba(16,24,40,.06), 0 1px 2px rgba(16,24,40,.04);
    color: var(--ink);
    line-height: 1.45;
    max-width: none;
    width: 100%;
    margin: 0;
    -webkit-font-smoothing: antialiased;
}

    .pay-page *[b-5m3uo638se], .pay-page *[b-5m3uo638se]::before, .pay-page *[b-5m3uo638se]::after {
        box-sizing: border-box;
    }

.page-head[b-5m3uo638se] {
    margin-bottom: 20px;
}

    .page-head .crumbs[b-5m3uo638se] {
        margin-bottom: 12px;
    }

    .page-head .banner[b-5m3uo638se] {
        margin-bottom: 0;
    }

.page-head-top[b-5m3uo638se] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}

    .page-head-top .crumbs[b-5m3uo638se] {
        margin-bottom: 0;
    }

.banner[b-5m3uo638se] {
    position: relative;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 20px;
}

    .banner h1[b-5m3uo638se] {
        margin: 0 0 6px;
        font-size: 22px;
        font-weight: 700;
        color: #111827;
        display: flex;
        align-items: center;
        gap: 9px;
    }

    .banner-icon[b-5m3uo638se] {
        width: 22px;
        height: 22px;
        flex: 0 0 auto;
        color: var(--blue);
    }

    .banner .sub[b-5m3uo638se] {
        color: #4b5563;
        font-size: 12px;
    }

.status-pill[b-5m3uo638se] {
    flex: 0 0 auto;
    background: #fff;
    color: var(--blue);
    font-weight: 700;
    font-size: 14px;
    padding: 8px 16px;
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(16,24,40,.08);
    white-space: nowrap;
}

    .status-pill.status-info[b-5m3uo638se] {
        background: #eaf1ff;
        color: #1d4ed8;
    }

    .status-pill.status-success[b-5m3uo638se] {
        background: #e7f7ee;
        color: #1e874b;
    }

    .status-pill.status-warning[b-5m3uo638se] {
        background: #fff4e5;
        color: #b25e09;
    }

    .status-pill.status-danger[b-5m3uo638se] {
        background: #fdecec;
        color: #b00020;
    }

    .status-pill.status-neutral[b-5m3uo638se] {
        background: #f1f3f6;
        color: #4b5563;
    }

.card.tab-shell[b-5m3uo638se] {
    padding: 0;
    margin-bottom: 20px;
}

.tab-strip[b-5m3uo638se] {
    padding: 14px 24px;
    border-bottom: 1px solid var(--line);
    border-radius: var(--radius) var(--radius) 0 0;
}

    .tab-strip .tabs[b-5m3uo638se] {
        margin: 0;
    }

.tab-body[b-5m3uo638se] {
    padding: 26px 28px;
}

.tab-body .card[b-5m3uo638se] {
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

    .tab-body .card + .card[b-5m3uo638se] {
        margin-top: 24px;
        padding-top: 24px;
        border-top: 1px solid var(--line);
    }

.tab-body .footer[b-5m3uo638se] {
    margin-top: 24px;
}

.tabs[b-5m3uo638se] {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    width: max-content;
    max-width: 100%;
    overflow-x: auto;
    gap: 4px;
    padding: 4px;
    background: #f4f6f9;
    border: 1px solid #e9edf2;
    border-radius: 10px;
    margin: 22px 4px 24px;
}

.tab[b-5m3uo638se] {
    appearance: none;
    background: transparent;
    border: none;
    border-radius: 7px;
    cursor: pointer;
    font: inherit;
    font-size: 13.5px;
    color: var(--muted);
    padding: 8px 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease;
}

    .tab:hover:not(.active)[b-5m3uo638se] {
        color: #374151;
        background: rgba(255, 255, 255, .6);
    }

    .tab.active[b-5m3uo638se] {
        background: var(--card);
        color: var(--blue);
        font-weight: 600;
        box-shadow: 0 1px 2px rgba(16, 24, 40, .07);
    }

.card[b-5m3uo638se] {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 26px 28px;
}

    .card + .card[b-5m3uo638se] {
        margin-top: 22px;
    }

.card-title[b-5m3uo638se] {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 18px;
}

.card-title + .card-subtitle[b-5m3uo638se] {
    margin: -12px 0 18px;
    font-size: 14px;
    color: var(--muted);
}

.card[b-5m3uo638se]  igc-grid {
    font-family: "JakartaSansFont", "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
    font-size: 13.5px;
    border: 1px solid #eef1f4;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    --ig-size: var(--ig-size-medium, 2);
    --ig-grid-header-background: #fbfcfd;
    --ig-grid-header-text-color: #8b93a7;
    --ig-grid-header-border-width: 1px;
    --ig-grid-header-border-style: solid;
    --ig-grid-header-border-color: #eef1f4;
    --ig-grid-content-background: #ffffff;
    --ig-grid-content-text-color: #1b1f2b;
    --ig-grid-row-border-color: #f0f2f5;
    --ig-grid-row-odd-background: #ffffff;
    --ig-grid-row-even-background: #ffffff;
    --ig-grid-body-column-border-color-odd: transparent;
    --ig-grid-body-column-border-color-even: transparent;
    --ig-grid-row-hover-background: #f7f9fb;
    --ig-grid-row-hover-text-color: #1b1f2b;
    --ig-grid-row-selected-background: #f7f9fb;
    --ig-grid-row-selected-text-color: #1b1f2b;
    --ig-grid-cell-selected-background: #f7f9fb;
    --ig-grid-cell-selected-text-color: #1b1f2b;
    --ig-grid-cell-active-border-color: #1c75bc;
    --ig-grid-grid-border-color: transparent;
}

.field-label[b-5m3uo638se] {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--label);
    margin-bottom: 7px;
}

.return-notes-label[b-5m3uo638se] {
    margin-top: 16px;
}

.field-hint[b-5m3uo638se] {
    margin-top: 5px;
    font-size: 12px;
    color: #b45309;
    line-height: 1.4;
}

    .field-hint.field-hint-error[b-5m3uo638se] {
        color: #b00020;
        font-weight: 600;
    }

.floating-field[b-5m3uo638se] {
    position: relative;
}

.floating-textarea[b-5m3uo638se] {
    width: 100%;
    box-sizing: border-box;
    min-height: 78px;
    padding: 20px 13px 8px;
    border: 1px solid var(--input-border);
    border-radius: 8px;
    font: inherit;
    font-size: 14px;
    line-height: 1.4;
    color: #1f2937;
    background: #fff;
    resize: vertical;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .floating-textarea:hover[b-5m3uo638se] {
        border-color: #9aa0aa;
    }

    .floating-textarea:focus[b-5m3uo638se] {
        border-color: var(--blue);
        box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
    }

    .floating-textarea:disabled[b-5m3uo638se],
    .floating-textarea[readonly][b-5m3uo638se] {
        background: var(--bg, #f4f6f9);
        color: var(--muted);
        cursor: default;
    }

.floating-label[b-5m3uo638se] {
    position: absolute;
    left: 13px;
    top: 20px;
    font-size: 14px;
    color: #98a2b3;
    pointer-events: none;
    transform-origin: left top;
    transition: top .15s ease, font-size .15s ease, color .15s ease;
}

.floating-textarea:focus + .floating-label[b-5m3uo638se],
.floating-textarea:not(:placeholder-shown) + .floating-label[b-5m3uo638se] {
    top: -9px;
    left: 10px;
    padding: 0 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--label);
    background: #fff;
}

.floating-textarea:focus + .floating-label[b-5m3uo638se] {
    color: var(--blue-strong);
}

.checkbox-option[b-5m3uo638se] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    margin: 10px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--label);
    cursor: pointer;
    user-select: none;
}

    .checkbox-option input[type="checkbox"][b-5m3uo638se] {
        width: 16px;
        height: 16px;
        accent-color: #1c75bc;
        cursor: pointer;
    }

.input[b-5m3uo638se] {
    width: 100%;
    font: inherit;
    font-size: 15px;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--input-border);
    border-radius: 7px;
    padding: 11px 13px;
}

    .input:focus[b-5m3uo638se] {
        outline: none;
        border-color: var(--blue);
        box-shadow: 0 0 0 3px rgba(37,99,235,.12);
    }

    .input.disabled[b-5m3uo638se], .input[readonly][b-5m3uo638se] {
        background: var(--disabled-bg);
        color: var(--disabled-ink);
        border-color: var(--input-border);
    }

    .input.green[b-5m3uo638se] {
        border-color: var(--green-border);
    }

        .input.green:focus[b-5m3uo638se] {
            box-shadow: 0 0 0 3px rgba(52,168,83,.15);
        }

select.input[b-5m3uo638se] {
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 34px;
}

.grid-2[b-5m3uo638se] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 20px;
}

    .grid-2 .full[b-5m3uo638se] {
        grid-column: 1 / -1;
    }

.two-col[b-5m3uo638se] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
}

.ai-box[b-5m3uo638se] {
    background: var(--green-soft-bg);
    border: 1px solid var(--green-soft-border);
    border-radius: 10px;
    padding: 16px 18px;
}

    .ai-box .ai-head[b-5m3uo638se] {
        display: flex;
        align-items: center;
        gap: 8px;
        font-weight: 700;
        color: var(--green-strong);
        margin-bottom: 8px;
    }

    .ai-box p[b-5m3uo638se] {
        margin: 0 0 14px;
        color: #2f6b41;
        font-size: 14.5px;
    }

        .ai-box p b[b-5m3uo638se] {
            color: #1f5a31;
        }

.btn-green[b-5m3uo638se] {
    background: var(--green);
    color: #fff;
    border: none;
    border-radius: 7px;
    padding: 9px 16px;
    font: inherit;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
}

    .btn-green:hover[b-5m3uo638se] {
        background: var(--green-strong);
    }

.section-label[b-5m3uo638se] {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin: 22px 0 10px;
}

.grid-head[b-5m3uo638se] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.grid-head-gap[b-5m3uo638se] {
    margin-bottom: 16px;
}

.grid-toolbar[b-5m3uo638se] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tf-kepegawaian-grid[b-5m3uo638se]  .igx-grid-th:has(.tf-kpg-head) {
    padding-inline: 0;
}

.tf-kepegawaian-grid[b-5m3uo638se]  .igx-grid-th__title:has(.tf-kpg-head) {
    overflow: visible;
    align-self: stretch;
    height: 100%;
}

.tf-kepegawaian-grid[b-5m3uo638se]  .igx-grid-th__title:not(:has(.tf-kpg-head)) {
    align-self: flex-start;
}

.tool-btn[b-5m3uo638se] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 8px 14px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    line-height: 1;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

    .tool-btn:hover[b-5m3uo638se] {
        background: #f9fafb;
    }

    .tool-btn:disabled[b-5m3uo638se] {
        opacity: .5;
        cursor: not-allowed;
    }

    .tool-btn svg[b-5m3uo638se] {
        display: block;
        flex: 0 0 auto;
    }

.tool-btn-danger[b-5m3uo638se] {
    color: #b00020;
    border-color: #f3c2c2;
}

    .tool-btn-danger:hover[b-5m3uo638se] {
        background: #fdecec;
    }

table.grid[b-5m3uo638se] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

    table.grid th[b-5m3uo638se] {
        text-align: left;
        font-size: 14px;
        font-weight: 700;
        color: #374151;
        background: #fafbfc;
        padding: 12px 14px;
        border-top: 1px solid var(--line);
        border-bottom: 1px solid var(--line);
    }

        table.grid th:first-child[b-5m3uo638se] {
            border-left: 1px solid var(--line);
            border-top-left-radius: 8px;
        }

        table.grid th:last-child[b-5m3uo638se] {
            border-right: 1px solid var(--line);
            border-top-right-radius: 8px;
        }

    table.grid td[b-5m3uo638se] {
        padding: 12px 14px;
        border-bottom: 1px solid var(--line);
        vertical-align: middle;
    }

        table.grid td:first-child[b-5m3uo638se] {
            border-left: 1px solid var(--line);
            color: #4b5563;
        }

        table.grid td:last-child[b-5m3uo638se] {
            border-right: 1px solid var(--line);
        }

    table.grid .num[b-5m3uo638se] {
        text-align: right;
    }

.cell-input[b-5m3uo638se] {
    width: 100%;
}

.retensi-out[b-5m3uo638se] {
    color: var(--disabled-ink);
}

.add-row[b-5m3uo638se] {
    display: block;
    width: 100%;
    text-align: center;
    background: #f5f9ff;
    color: var(--blue);
    font: inherit;
    font-weight: 600;
    border: 1px dashed #bcd2f5;
    border-radius: 8px;
    padding: 14px;
    margin-top: 14px;
    cursor: pointer;
}

    .add-row.muted[b-5m3uo638se] {
        background: #fafbfc;
        color: var(--muted);
        border-color: #d6dbe2;
    }

    .add-row:hover[b-5m3uo638se] {
        background: #eef5ff;
    }

.btn-ai-outline[b-5m3uo638se] {
    float: right;
    background: #f3fbf5;
    color: var(--green-strong);
    border: 1px solid var(--green-soft-border);
    border-radius: 8px;
    padding: 9px 14px;
    font: inherit;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
}

    .btn-ai-outline:hover[b-5m3uo638se] {
        background: #e9f7ee;
    }

.header-row[b-5m3uo638se] {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

    .header-row > .card[b-5m3uo638se] {
        margin-top: 0;
        margin-bottom: 0;
    }

    .header-row > .header-card[b-5m3uo638se] {
        flex: 1 1 auto;
        min-width: 0;
    }

    .header-row > .header-side-card[b-5m3uo638se] {
        flex: 0 0 300px;
    }

.header-side[b-5m3uo638se] {
    background: #fafbfc;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 22px 24px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    --ig-body-1-font-size: 12px;
}

    .header-side .k[b-5m3uo638se] {
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .03em;
        color: var(--label);
        text-transform: uppercase;
        margin-bottom: 6px;
    }

    .header-side .v[b-5m3uo638se] {
        font-size: 12px;
        color: #111827;
    }

        .header-side .v.v-editable[b-5m3uo638se] {
            line-height: normal;
        }

@media (max-width: 1100px) {
    .header-row[b-5m3uo638se] {
        flex-direction: column;
    }

        .header-row > .header-side-card[b-5m3uo638se] {
            flex: 1 1 auto;
        }

    .header-side[b-5m3uo638se] {
        grid-template-columns: 1fr 1fr;
    }
}

.summary[b-5m3uo638se] {
    background: #fafbfc;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 22px 24px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px 28px;
    letter-spacing: -0.01rem;
}

    .summary .k[b-5m3uo638se] {
        font-size: 0.9rem;
        font-weight: 700;
        letter-spacing: -0.01rem;
        color: var(--label);
        text-transform: uppercase;
        margin-bottom: 6px;
    }

    .summary .v[b-5m3uo638se] {
        font-size: 0.875rem;
        color: #111827;
    }

        .summary .v.v-editable[b-5m3uo638se] {
            line-height: normal;
        }

    .summary .span-2[b-5m3uo638se] {
        grid-column: span 2;
    }

.footer[b-5m3uo638se] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--line);
    margin-top: 26px;
    padding-top: 22px;
}

    .footer .right[b-5m3uo638se] {
        display: flex;
        gap: 14px;
    }

.inline-alert[b-5m3uo638se] {
    margin: 0 0px 14px;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid transparent;
    font-size: 14px;
    font-weight: 600;
}

    .inline-alert.success[b-5m3uo638se] {
        background: var(--green-soft-bg);
        border-color: var(--green-soft-border);
        color: var(--green-strong);
    }

    .inline-alert.error[b-5m3uo638se] {
        background: #fdecec;
        border-color: #f3c2c2;
        color: #b00020;
    }

    .inline-alert.info[b-5m3uo638se] {
        background: #eef4fd;
        border-color: #c3d6f2;
        color: #16447c;
    }

.placeholder[b-5m3uo638se] {
    color: var(--muted);
    padding: 40px;
    text-align: center;
}

@media (max-width: 980px) {
    .two-col[b-5m3uo638se], .grid-2[b-5m3uo638se] {
        grid-template-columns: 1fr;
    }

    .summary[b-5m3uo638se] {
        grid-template-columns: 1fr 1fr;
    }

        .summary .span-2[b-5m3uo638se] {
            grid-column: span 2;
        }
}

igc-input[b-5m3uo638se],
igc-textarea[b-5m3uo638se],
igc-select[b-5m3uo638se],
igc-date-picker[b-5m3uo638se] {
    width: 100%;
}

.header-side[b-5m3uo638se]  igc-select,
.header-side[b-5m3uo638se]  igc-date-picker {
    font-size: 12px !important;
}

.header-side[b-5m3uo638se]  igc-select::part(base),
.header-side[b-5m3uo638se]  igc-select::part(input),
.header-side[b-5m3uo638se]  igc-select::part(label),
.header-side[b-5m3uo638se]  igc-date-picker::part(base),
.header-side[b-5m3uo638se]  igc-date-picker::part(input),
.header-side[b-5m3uo638se]  igc-date-picker::part(label) {
    font-size: 12px !important;
}

.header-side[b-5m3uo638se]  igc-select-item,
.header-side[b-5m3uo638se]  igc-select-item::part(content) {
    font-size: 12px !important;
}

.banner-main[b-5m3uo638se] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}

.banner-actions[b-5m3uo638se] {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 10px;
}

.banner-actions-buttons[b-5m3uo638se] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.gl-ac[b-5m3uo638se] {
    position: relative;
}

.gl-ac-input[b-5m3uo638se] {
    width: 100%;
    box-sizing: border-box;
    height: 38px;
    padding: 8px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 14px;
    color: #1f2937;
    background: #fff;
    outline: none;
}

    .gl-ac-input:focus[b-5m3uo638se] {
        border-color: var(--blue);
        box-shadow: 0 0 0 2px rgba(37, 99, 235, .15);
    }

.gl-ac-list[b-5m3uo638se] {
    position: absolute;
    z-index: 40;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    margin: 0;
    padding: 4px 0;
    list-style: none;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(16, 24, 40, .16);
    max-height: 240px;
    overflow-y: auto;
}

.gl-ac-item[b-5m3uo638se] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 12px;
    cursor: pointer;
}

    .gl-ac-item:hover[b-5m3uo638se] {
        background: #f3f4f6;
    }

.gl-ac-num[b-5m3uo638se] {
    font-weight: 700;
    font-size: 14px;
    color: #111827;
}

.gl-ac-desc[b-5m3uo638se] {
    font-size: 12px;
    color: #6b7280;
}

.gl-ac-state[b-5m3uo638se] {
    padding: 8px 12px;
    font-size: 13px;
    color: #9ca3af;
}

.crumbs[b-5m3uo638se] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    font-size: 13px;
    color: var(--muted);
}

    .crumbs a[b-5m3uo638se] {
        color: var(--muted);
        text-decoration: none;
        transition: color .15s ease;
    }

        .crumbs a:hover[b-5m3uo638se] {
            color: var(--blue);
            text-decoration: underline;
        }

.crumb-sep[b-5m3uo638se] {
    color: #c2c8d0;
    font-size: 14px;
    line-height: 1;
}

.crumb-current[b-5m3uo638se] {
    color: var(--ink);
    font-weight: 600;
}

.grid-note-sep[b-5m3uo638se] {
    border: none;
    border-top: 1px solid #e9edf2;
    margin: 18px 0;
}

.summary-modal-overlay[b-5m3uo638se] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 24px 16px;
    z-index: 1000;
    overflow: auto;
}

.summary-modal[b-5m3uo638se] {
    background: #fff;
    border-radius: 12px;
    width: min(1200px, 96vw);
    box-shadow: 0 24px 64px rgba(15, 23, 42, 0.28);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 48px);
    overflow: hidden;
}

.summary-modal-head[b-5m3uo638se] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 26px;
    border-bottom: 1px solid #eef1f4;
    flex: 0 0 auto;
}

    .summary-modal-head h2[b-5m3uo638se] {
        margin: 0;
        font-size: 15px;
        font-weight: 700;
        letter-spacing: .01em;
        color: var(--ink);
    }

.summary-modal-close[b-5m3uo638se] {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    color: var(--muted);
    padding: 2px 8px;
    border-radius: 6px;
}

    .summary-modal-close:hover[b-5m3uo638se] {
        background: #f1f3f5;
        color: var(--ink);
    }

.summary-modal-body[b-5m3uo638se] {
    padding: 0;
    overflow: auto;
    background: #fff;
}

.rpt[b-5m3uo638se] {
    color: var(--ink);
    padding: 26px 32px 34px;
    font-size: 13px;
    line-height: 1.55;
}

.rpt-head[b-5m3uo638se] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.rpt-brand[b-5m3uo638se] {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: #111827;
}

.rpt-meta[b-5m3uo638se] {
    text-align: right;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--muted);
}

.rpt-rule[b-5m3uo638se] {
    border: none;
    border-top: 2px solid #cbd2da;
    margin: 12px 0 24px;
}

.rpt-title[b-5m3uo638se] {
    text-align: center;
    font-size: 20px;
    font-weight: 800;
    margin: 0 0 22px;
    color: #111827;
}

.rpt-sec[b-5m3uo638se] {
    margin-top: 24px;
}

.rpt-sec-title[b-5m3uo638se] {
    font-size: 14px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 10px;
}

.rpt-subtitle[b-5m3uo638se] {
    font-size: 12.5px;
    font-weight: 700;
    color: #4b5563;
    margin: 16px 0 8px;
}

.rpt-table[b-5m3uo638se] {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
    line-height: 1.4;
}

    .rpt-table th[b-5m3uo638se],
    .rpt-table td[b-5m3uo638se] {
        border: 1px solid #e5e8ec;
        padding: 6px 9px;
        text-align: left;
        vertical-align: top;
        overflow-wrap: anywhere;
    }

    .rpt-table thead th[b-5m3uo638se] {
        background: #f4f6f9;
        color: #4b5563;
        font-weight: 700;
    }

    .rpt-table .num[b-5m3uo638se] {
        text-align: right;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

.rpt-kv th[b-5m3uo638se] {
    width: 34%;
    background: #fafbfc;
    color: #6b7280;
    font-weight: 600;
}

.rpt-empty[b-5m3uo638se] {
    color: #9ca3af;
    font-style: italic;
    text-align: center;
}

.summary-modal-foot[b-5m3uo638se] {
    padding: 14px 26px;
    border-top: 1px solid #eef1f4;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex: 0 0 auto;
}

.confirm-modal[b-5m3uo638se] {
    background: #fff;
    border-radius: 12px;
    width: min(420px, 94vw);
    box-shadow: 0 24px 64px rgba(15, 23, 42, 0.28);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.confirm-modal-body[b-5m3uo638se] {
    padding: 22px 26px;
    color: var(--ink);
    font-size: 14px;
    line-height: 1.55;
}

    .confirm-modal-body p[b-5m3uo638se] {
        margin: 0;
    }

.confirm-modal-note[b-5m3uo638se] {
    margin-top: 8px !important;
    color: var(--muted);
}

.hdr-btn[b-5m3uo638se] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-sizing: border-box;
    height: 28px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: calc(var(--radius) - 2px);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    color: #fff;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}

    .hdr-btn svg[b-5m3uo638se] {
        display: block;
        flex: 0 0 auto;
        width: 14px;
        height: 14px;
    }

    .hdr-btn:focus-visible[b-5m3uo638se] {
        outline: none;
    }

    .hdr-btn:disabled[b-5m3uo638se] {
        cursor: not-allowed;
        background: #f1f3f6;
        border-color: #e1e5ea;
        color: #9aa3af;
        box-shadow: none;
        opacity: 1;
    }

.hdr-btn-purple[b-5m3uo638se] {
    background: #7c3aed;
    border-color: #7c3aed;
}

    .hdr-btn-purple:hover:not(:disabled)[b-5m3uo638se] {
        background: #6d28d9;
        border-color: #6d28d9;
        color: #fff;
    }

    .hdr-btn-purple:active:not(:disabled)[b-5m3uo638se] {
        background: #5b21b6;
        border-color: #5b21b6;
    }

    .hdr-btn-purple:focus-visible[b-5m3uo638se] {
        box-shadow: 0 0 0 3px rgba(124, 58, 237, .35);
    }

.hdr-btn-blue[b-5m3uo638se] {
    background: #3b82f6;
    border-color: #3b82f6;
}

    .hdr-btn-blue:hover:not(:disabled)[b-5m3uo638se] {
        background: #2563eb;
        border-color: #2563eb;
        color: #fff;
    }

    .hdr-btn-blue:active:not(:disabled)[b-5m3uo638se] {
        background: #1d4ed8;
        border-color: #1d4ed8;
    }

    .hdr-btn-blue:focus-visible[b-5m3uo638se] {
        box-shadow: 0 0 0 3px rgba(59, 130, 246, .35);
    }

.hdr-btn-green[b-5m3uo638se] {
    background: #16a34a;
    border-color: #16a34a;
}

    .hdr-btn-green:hover:not(:disabled)[b-5m3uo638se] {
        background: #15803d;
        border-color: #15803d;
    }

    .hdr-btn-green:active:not(:disabled)[b-5m3uo638se] {
        background: #166534;
        border-color: #166534;
    }

    .hdr-btn-green:focus-visible[b-5m3uo638se] {
        box-shadow: 0 0 0 3px rgba(22, 163, 74, .35);
    }

.hdr-menu[b-5m3uo638se] {
    position: relative;
}

.hdr-caret[b-5m3uo638se] {
    width: 14px;
    height: 14px;
    margin-left: -1px;
    transition: transform .18s ease;
}

.hdr-btn[aria-expanded="true"] .hdr-caret[b-5m3uo638se] {
    transform: rotate(180deg);
}

.hdr-menu-pop[b-5m3uo638se] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 224px;
    padding: 6px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(16, 24, 40, .12), 0 2px 6px rgba(16, 24, 40, .06);
    z-index: 5;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-6px) scale(.98);
    transform-origin: top left;
    transition: opacity .16s ease, transform .16s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .16s;
}

    .hdr-menu-pop.open[b-5m3uo638se] {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0) scale(1);
        transition: opacity .18s ease, transform .18s cubic-bezier(.22, 1, .36, 1), visibility 0s;
    }

.hdr-menu-item[b-5m3uo638se] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: 14px;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
}

    .hdr-menu-item svg[b-5m3uo638se] {
        width: 17px;
        height: 17px;
        flex: 0 0 auto;
        color: var(--muted);
    }

    .hdr-menu-item:hover:not(:disabled)[b-5m3uo638se],
    .hdr-menu-item:focus-visible[b-5m3uo638se] {
        background: #f4f6f9;
        color: var(--blue);
        outline: none;
    }

        .hdr-menu-item:hover:not(:disabled) svg[b-5m3uo638se],
        .hdr-menu-item:focus-visible svg[b-5m3uo638se] {
            color: var(--blue);
        }

    .hdr-menu-item-danger:not(:disabled)[b-5m3uo638se] {
        color: #b91c1c;
    }

        .hdr-menu-item-danger:not(:disabled) svg[b-5m3uo638se] {
            color: #b91c1c;
        }

        .hdr-menu-item-danger:hover:not(:disabled)[b-5m3uo638se],
        .hdr-menu-item-danger:focus-visible:not(:disabled)[b-5m3uo638se] {
            background: #fdecec;
            color: #991b1b;
        }

            .hdr-menu-item-danger:hover:not(:disabled) svg[b-5m3uo638se],
            .hdr-menu-item-danger:focus-visible:not(:disabled) svg[b-5m3uo638se] {
                color: #991b1b;
            }

    .hdr-menu-item:disabled[b-5m3uo638se] {
        color: var(--disabled-ink);
        cursor: not-allowed;
    }

        .hdr-menu-item:disabled svg[b-5m3uo638se] {
            color: var(--disabled-ink);
        }

.hdr-menu-backdrop[b-5m3uo638se] {
    position: fixed;
    inset: 0;
    z-index: 4;
    background: transparent;
}

.hdr-btn-slate[b-5m3uo638se] {
    background: #475569;
    border-color: #475569;
}

    .hdr-btn-slate:hover:not(:disabled)[b-5m3uo638se] {
        background: #3b4757;
        border-color: #3b4757;
    }

    .hdr-btn-slate:active:not(:disabled)[b-5m3uo638se] {
        background: #334155;
        border-color: #334155;
    }

    .hdr-btn-slate:focus-visible[b-5m3uo638se] {
        box-shadow: 0 0 0 3px rgba(71, 85, 105, .35);
    }

.tracker-overlay[b-5m3uo638se] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .35);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
    z-index: 1000;
}

    .tracker-overlay.show[b-5m3uo638se] {
        opacity: 1;
        pointer-events: auto;
    }

.tracker-drawer[b-5m3uo638se] {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 460px;
    max-width: 92vw;
    background: #fff;
    box-shadow: -12px 0 40px rgba(15, 23, 42, .18);
    transform: translateX(100%);
    transition: transform .28s ease;
    z-index: 1001;
    display: flex;
    flex-direction: column;
}

    .tracker-drawer.show[b-5m3uo638se] {
        transform: translateX(0);
    }

.tracker-head[b-5m3uo638se] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid #eef1f4;
    flex: 0 0 auto;
}

    .tracker-head h2[b-5m3uo638se] {
        font-size: 17px;
        font-weight: 700;
        color: #111827;
        margin: 0;
    }

.tracker-sub[b-5m3uo638se] {
    font-size: 12.5px;
    color: #6b7280;
    margin-top: 2px;
}

.tracker-close[b-5m3uo638se] {
    border: none;
    background: none;
    font-size: 26px;
    line-height: 1;
    color: #6b7280;
    cursor: pointer;
    padding: 0 2px;
}

    .tracker-close:hover[b-5m3uo638se] {
        color: #111827;
    }

.tracker-body[b-5m3uo638se] {
    padding: 24px 22px;
    overflow-y: auto;
    flex: 1;
}

.timeline[b-5m3uo638se] {
    position: relative;
}

.tl-item[b-5m3uo638se] {
    position: relative;
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 16px;
    padding-bottom: 26px;
}

    .tl-item:last-child[b-5m3uo638se] {
        padding-bottom: 0;
    }

    .tl-item[b-5m3uo638se]::before {
        content: "";
        position: absolute;
        left: 19px;
        top: 38px;
        bottom: -4px;
        width: 2px;
        background: #eef1f4;
    }

    .tl-item:last-child[b-5m3uo638se]::before {
        display: none;
    }

.tl-marker[b-5m3uo638se] {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid #e5e7eb;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    position: relative;
    z-index: 1;
}

    .tl-marker svg[b-5m3uo638se] {
        width: 17px;
        height: 17px;
    }

.tl-content[b-5m3uo638se] {
    min-width: 0;
    padding-top: 3px;
}

.tl-title[b-5m3uo638se] {
    font-size: 14.5px;
    font-weight: 600;
    color: #111827;
    line-height: 1.4;
}

.tl-time[b-5m3uo638se] {
    font-size: 12.5px;
    color: #6b7280;
    margin-top: 3px;
}

.tl-card[b-5m3uo638se] {
    margin-top: 14px;
    display: flex;
    gap: 14px;
    align-items: stretch;
    border: 1px solid #eef1f4;
    border-radius: 12px;
    padding: 14px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .05);
}

.tl-card-date[b-5m3uo638se] {
    width: 58px;
    flex: 0 0 auto;
    text-align: center;
    border: 1px solid #eef1f4;
    border-radius: 8px;
    overflow: hidden;
    align-self: flex-start;
}

    .tl-card-date .m[b-5m3uo638se] {
        background: #f6f8fb;
        color: var(--blue);
        font-size: 12px;
        font-weight: 700;
        padding: 5px 0;
    }

    .tl-card-date .d[b-5m3uo638se] {
        font-size: 22px;
        font-weight: 800;
        color: #111827;
        padding: 6px 0;
    }

.tl-card-main[b-5m3uo638se] {
    min-width: 0;
}

.tl-card-tag[b-5m3uo638se] {
    color: var(--blue);
    font-size: 13px;
    font-weight: 600;
}

.tl-card-title[b-5m3uo638se] {
    font-size: 16px;
    font-weight: 700;
    color: #111827;
    margin: 2px 0 6px;
}

.tl-card-desc[b-5m3uo638se] {
    font-size: 13px;
    color: #4b5563;
    line-height: 1.5;
}

.tracker-tabs[b-5m3uo638se] {
    display: flex;
    gap: 4px;
    padding: 0 22px;
    border-bottom: 1px solid #eef1f4;
    flex: 0 0 auto;
}

.tracker-tab[b-5m3uo638se] {
    border: none;
    background: none;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    color: #6b7280;
    padding: 12px 14px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

    .tracker-tab:hover[b-5m3uo638se] {
        color: #111827;
    }

    .tracker-tab.active[b-5m3uo638se] {
        color: var(--blue);
        border-bottom-color: var(--blue);
    }

.track-table[b-5m3uo638se] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #eef1f4;
    border-radius: 10px;
    overflow: hidden;
    font-size: 13.5px;
}

    .track-table th[b-5m3uo638se] {
        text-align: left;
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .02em;
        color: #6b7280;
        background: #f8fafc;
        padding: 10px 14px;
        border-bottom: 1px solid #eef1f4;
    }

    .track-table td[b-5m3uo638se] {
        padding: 11px 14px;
        border-bottom: 1px solid #f1f4f8;
        color: #1f2937;
        vertical-align: middle;
    }

    .track-table tr:last-child td[b-5m3uo638se] {
        border-bottom: none;
    }

.ts-col-no[b-5m3uo638se] {
    width: 38px;
}

.ts-col-status[b-5m3uo638se] {
    width: 140px;
}

.ts-no[b-5m3uo638se] {
    color: #9ca3af;
    font-variant-numeric: tabular-nums;
}

.ts-name[b-5m3uo638se] {
    font-weight: 600;
    color: #111827;
}

.ts-row-current[b-5m3uo638se] {
    background: #f5f8ff;
}

.ts-badge[b-5m3uo638se] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

    .ts-badge svg[b-5m3uo638se] {
        width: 13px;
        height: 13px;
        flex: 0 0 auto;
    }

.ts-done[b-5m3uo638se] {
    background: var(--green-soft-bg, #edfaf0);
    color: var(--green-strong, #1e874b);
}

.ts-current[b-5m3uo638se] {
    background: #eaf1ff;
    color: #1d4ed8;
}

.ts-pending[b-5m3uo638se] {
    background: #f1f3f6;
    color: #6b7280;
}

.ts-dot[b-5m3uo638se] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
    animation: ts-pulse-b-5m3uo638se 1.4s ease-in-out infinite;
}

.ts-ring[b-5m3uo638se] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 2px solid currentColor;
    opacity: .55;
    flex: 0 0 auto;
}

@keyframes ts-pulse-b-5m3uo638se {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: .35;
    }
}

.gl-grid-footer[b-5m3uo638se] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: #fbfcfd;
    border: 1px solid #eef1f4;
    border-top: none;
    border-radius: 0 0 10px 10px;
    margin-top: -1px;
    padding: 11px 16px;
}

.gl-grid-footer-row[b-5m3uo638se] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.gl-grid-footer-row-strong[b-5m3uo638se] {
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px dashed #dfe3ea;
}

    .gl-grid-footer-row-strong .gl-grid-footer-label[b-5m3uo638se] {
        color: #111827;
    }

    .gl-grid-footer-row-strong .gl-grid-footer-value[b-5m3uo638se] {
        color: var(--blue);
        font-size: 15px;
    }

.gl-grid-footer-label[b-5m3uo638se] {
    color: #8b93a7;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.gl-grid-footer-value[b-5m3uo638se] {
    color: #111827;
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.amount-plus[b-5m3uo638se] {
    color: #1e7e34;
}

.amount-minus[b-5m3uo638se] {
    color: #b91c1c;
}

.rpt-table tfoot .rpt-total th[b-5m3uo638se],
.rpt-table tfoot .rpt-total td[b-5m3uo638se] {
    background: #f4f6f9;
    font-weight: 700;
    color: #111827;
}

    .rpt-table tfoot .rpt-total th[b-5m3uo638se] {
        text-align: right;
    }

.btn-reject[b-5m3uo638se] {
    background: #ffffff !important;
    color: #b00020 !important;
    border: 1px solid #e5a3a3 !important;
}

    .btn-reject:hover:not(:disabled)[b-5m3uo638se] {
        background: #fdecec !important;
        border-color: #d98b8b !important;
    }

    .btn-reject:disabled[b-5m3uo638se] {
        background: #f7f8fa !important;
        color: #b9a0a4 !important;
        border-color: #e6e8ec !important;
    }

.btn-reject-solid[b-5m3uo638se] {
    background: #b00020 !important;
    color: #ffffff !important;
    border: 1px solid #b00020 !important;
}

    .btn-reject-solid:hover:not(:disabled)[b-5m3uo638se] {
        background: #8f0019 !important;
        border-color: #8f0019 !important;
    }

    .btn-reject-solid:disabled[b-5m3uo638se] {
        background: #e3b7bf !important;
        border-color: #e3b7bf !important;
        color: #ffffff !important;
    }

.confirm-modal-alert[b-5m3uo638se] {
    margin: 14px 0 0 !important;
}
/* /Component/Page/Verification/Page/VerificationList.razor.rz.scp.css */
.pr-page[b-q8fk6qcaws] {
    --bg: #f4f6f9;
    --card: #ffffff;
    --ink: #1f2937;
    --muted: #6b7280;
    --label: #6b7280;
    --line: #eef1f4;
    --input-border: #e2e6eb;
    --blue: #2563eb;
    --blue-strong: #1d4ed8;
    --radius: 14px;
    --shadow: 0 1px 2px rgba(16,24,40,.04), 0 8px 24px rgba(16,24,40,.05);
    color: var(--ink);
    line-height: 1.45;
    max-width: none;
    width: 100%;
    margin: 0;
    -webkit-font-smoothing: antialiased;
}

    .pr-page *[b-q8fk6qcaws], .pr-page *[b-q8fk6qcaws]::before, .pr-page *[b-q8fk6qcaws]::after {
        box-sizing: border-box;
    }

.card.head-card[b-q8fk6qcaws] {
    padding: 22px 24px;
    margin-bottom: 20px;
}

    .card.head-card .crumbs[b-q8fk6qcaws] {
        margin-bottom: 12px;
    }

    .card.head-card .page-head[b-q8fk6qcaws] {
        margin-bottom: 0;
    }

.page-head[b-q8fk6qcaws] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 20px;
}

    .page-head h1[b-q8fk6qcaws] {
        margin: 0 0 4px;
        font-size: 22px;
        font-weight: 700;
        letter-spacing: -.01em;
        color: #111827;
    }

    .page-head .sub[b-q8fk6qcaws] {
        color: var(--muted);
        font-size: 14px;
    }

.release-banner[b-q8fk6qcaws] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding: 14px 16px;
    background: #edfaf0;
    border: 1px solid #bfe6c7;
    border-radius: 12px;
    color: #15803d;
    font-size: 14px;
}

    .release-banner svg[b-q8fk6qcaws] {
        width: 18px;
        height: 18px;
        flex: 0 0 auto;
    }

    .release-banner span[b-q8fk6qcaws] {
        flex: 1 1 auto;
        min-width: 0;
    }

.release-banner-close[b-q8fk6qcaws] {
    flex: 0 0 auto;
    border: none;
    background: transparent;
    color: inherit;
    font-size: 20px;
    line-height: 1;
    padding: 0 4px;
    cursor: pointer;
    opacity: .6;
}

    .release-banner-close:hover[b-q8fk6qcaws] {
        opacity: 1;
    }

.card[b-q8fk6qcaws] {
    background: #fff;
    border: 1px solid #e8ecf1;
    border-radius: 12px;
    box-shadow: 0 3px 14px rgba(22, 34, 66, .04);
    padding: 0;
    overflow: hidden;
}

    .card[b-q8fk6qcaws]  igc-grid {
        font-family: "JakartaSansFont", "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
        font-size: 13.5px;
        border: none;
        background: #fff;
        --ig-size: var(--ig-size-medium, 2);
        --ig-grid-header-background: #fbfcfd;
        --ig-grid-header-text-color: #8b93a7;
        --ig-grid-header-border-width: 1px;
        --ig-grid-header-border-style: solid;
        --ig-grid-header-border-color: #eef1f4;
        --ig-grid-content-background: #ffffff;
        --ig-grid-content-text-color: #1b1f2b;
        --ig-grid-row-border-color: #f0f2f5;
        --ig-grid-row-odd-background: #ffffff;
        --ig-grid-row-even-background: #ffffff;
        --ig-grid-body-column-border-color-odd: transparent;
        --ig-grid-body-column-border-color-even: transparent;
        --ig-grid-row-hover-background: #f7f9fb;
        --ig-grid-row-hover-text-color: #1b1f2b;
        --ig-grid-row-selected-background: #eaf2fb;
        --ig-grid-row-selected-text-color: #1b1f2b;
        --ig-grid-cell-selected-background: transparent;
        --ig-grid-cell-selected-text-color: #1b1f2b;
        --ig-grid-cell-active-border-color: transparent;
        --ig-grid-grid-border-color: transparent;
    }

.list-filter[b-q8fk6qcaws] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
}

.pr-page[b-q8fk6qcaws]  .igx-grid-summary__item {
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 0;
    height: auto;
    line-height: 1.3;
}

.pr-page[b-q8fk6qcaws]  .igx-grid-summary__label {
    font-size: 11px;
}

.pr-page[b-q8fk6qcaws]  .igx-grid-summary__result {
    overflow: visible;
    text-overflow: clip;
    font-variant-numeric: tabular-nums;
}

.list-filter-action[b-q8fk6qcaws] {
    margin-left: auto;
    min-width: 132px;
    padding-inline: 26px;
    background: var(--green, #16a34a);
    border: 1px solid var(--green, #16a34a);
    color: #fff;
}

    .list-filter-action:hover:not(:disabled)[b-q8fk6qcaws] {
        background: #15803d;
        border-color: #15803d;
    }

    .list-filter-action:active:not(:disabled)[b-q8fk6qcaws] {
        background: #166534;
        border-color: #166534;
    }

    .list-filter-action:focus-visible[b-q8fk6qcaws] {
        outline: none;
        box-shadow: 0 0 0 3px rgba(22, 163, 74, .35);
    }

    .list-filter-action:disabled[b-q8fk6qcaws] {
        background: #a7d8b9;
        border-color: #a7d8b9;
        color: #f3f8f5;
        cursor: not-allowed;
    }

.state-wrap[b-q8fk6qcaws] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 16px 24px;
}

    .state-wrap .state-msg[b-q8fk6qcaws] {
        padding: 0;
    }

.btn-go[b-q8fk6qcaws] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--blue);
    color: #fff;
    text-decoration: none;
    border: none;
    border-radius: 8px;
    padding: 9px 16px;
    font: inherit;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: background .15s ease;
}

    .btn-go:hover[b-q8fk6qcaws] {
        background: var(--blue-strong);
    }

    .btn-go:disabled[b-q8fk6qcaws] {
        background: #c8d2e2;
        color: #eef2f8;
        cursor: not-allowed;
    }

    .btn-go svg[b-q8fk6qcaws] {
        width: 16px;
        height: 16px;
    }

.state-msg[b-q8fk6qcaws] {
    margin: 0;
    padding: 24px 6px;
    color: #6b7280;
    font-size: 14px;
}

.loader-card[b-q8fk6qcaws] {
    height: 440px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loader-wrap[b-q8fk6qcaws] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

    .loader-wrap .state-msg[b-q8fk6qcaws] {
        padding: 0;
    }

.loader-spinner[b-q8fk6qcaws] {
    color: var(--blue, #2563eb);
}

.state-error[b-q8fk6qcaws] {
    color: #b00020;
}

.crumbs[b-q8fk6qcaws] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    font-size: 13px;
    color: var(--muted);
}

    .crumbs a[b-q8fk6qcaws] {
        color: var(--muted);
        text-decoration: none;
        transition: color .15s ease;
    }

        .crumbs a:hover[b-q8fk6qcaws] {
            color: var(--blue);
            text-decoration: underline;
        }

.crumb-sep[b-q8fk6qcaws] {
    color: #c2c8d0;
    font-size: 14px;
    line-height: 1;
}

.crumb-current[b-q8fk6qcaws] {
    color: var(--ink);
    font-weight: 600;
}
/* /Component/Shared/PageLoadingSkeleton.razor.rz.scp.css */
.page-loading-skeleton[b-lu6he3kk7g] {
    display: grid;
    gap: 1rem;
    padding-bottom: 2rem;
}

.page-skeleton-shimmer[b-lu6he3kk7g] {
    position: relative;
    overflow: hidden;
    background: #e8edf3;
}

.page-skeleton-shimmer[b-lu6he3kk7g]::after {
    position: absolute;
    inset: 0;
    content: "";
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.72), transparent);
    animation: page-skeleton-shimmer-b-lu6he3kk7g 1.4s ease-in-out infinite;
}

.page-skeleton-breadcrumb[b-lu6he3kk7g] {
    width: min(360px, 60%);
    height: 1rem;
    border-radius: 999px;
}

.page-skeleton-stepper[b-lu6he3kk7g] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border: 1px solid #e5eaf0;
    border-radius: 0.85rem;
    background: #fff;
}

.page-skeleton-step[b-lu6he3kk7g] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.page-skeleton-step-index[b-lu6he3kk7g] {
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    border-radius: 50%;
}

.page-skeleton-step-label[b-lu6he3kk7g] {
    width: 70%;
    height: 0.75rem;
    border-radius: 999px;
}

.page-skeleton-card[b-lu6he3kk7g] {
    display: grid;
    gap: 1.25rem;
    padding: 1.5rem;
    border: 1px solid #e5eaf0;
    border-radius: 1rem;
    background: #fff;
}

.page-skeleton-title[b-lu6he3kk7g] {
    width: 32%;
    height: 1.25rem;
    border-radius: 999px;
}

.page-skeleton-grid[b-lu6he3kk7g] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.page-skeleton-field[b-lu6he3kk7g] {
    display: grid;
    gap: 0.5rem;
}

.page-skeleton-label[b-lu6he3kk7g] {
    width: 38%;
    height: 0.7rem;
    border-radius: 999px;
}

.page-skeleton-input[b-lu6he3kk7g] {
    width: 100%;
    height: 2.65rem;
    border-radius: 0.55rem;
}

.page-skeleton-actions[b-lu6he3kk7g] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

.page-skeleton-button[b-lu6he3kk7g] {
    width: 7rem;
    height: 2.5rem;
    border-radius: 0.55rem;
}

.page-skeleton-status[b-lu6he3kk7g] {
    color: #64748b;
    font-size: 0.85rem;
}

@keyframes page-skeleton-shimmer-b-lu6he3kk7g {
    100% {
        transform: translateX(100%);
    }
}

@media (max-width: 767.98px) {
    .page-skeleton-stepper[b-lu6he3kk7g],
    .page-skeleton-grid[b-lu6he3kk7g] {
        grid-template-columns: 1fr;
    }

    .page-skeleton-stepper[b-lu6he3kk7g] {
        gap: 0.6rem;
    }

    .page-skeleton-card[b-lu6he3kk7g] {
        padding: 1rem;
    }
}
/* /Module/Apy/Feature/Portal/Page/Dashboard.razor.rz.scp.css */
.home-dashboard[b-n87ydr1d0f] {
    --home-surface: #ffffff;
    --home-border: #e8ebf4;
    --home-border-strong: #dde3f0;
    --home-text: #1f2937;
    --home-muted: #7d8798;
    --home-bg: #f6f8fc;
    --home-blue: #5573eb;
    --home-blue-soft: #eef3ff;
    --home-green: #59a869;
    --home-green-soft: #eef8f0;
    --home-amber: #d69a38;
    --home-amber-soft: #fff7e8;
    --home-purple: #8d65df;
    --home-purple-soft: #f4edff;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0.25rem;
}

.home-dashboard__tabs[b-n87ydr1d0f] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1rem;
    background: var(--home-surface);
    border: 1px solid var(--home-border);
    border-radius: 1.25rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

.home-dashboard__tab[b-n87ydr1d0f] {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.55rem 1rem;
    color: #394354;
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.home-dashboard__tab:hover[b-n87ydr1d0f],
.home-dashboard__tab.is-active[b-n87ydr1d0f] {
    background: #f1f5ff;
    color: #2d4dc2;
}

.home-dashboard__tab.is-disabled[b-n87ydr1d0f] {
    opacity: 0.5;
    cursor: default;
}

.home-dashboard__grid[b-n87ydr1d0f] {
    display: grid;
    gap: 1rem;
    grid-template-columns: 360px minmax(0, 1fr);
    grid-template-areas:
        "stats news"
        "highlight trend";
}

.home-dashboard__stats[b-n87ydr1d0f] {
    grid-area: stats;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: max-content;
    gap: 1rem;
    align-self: start;
    align-items: start;
}

.home-card[b-n87ydr1d0f] {
    background: var(--home-surface);
    border: 1px solid var(--home-border);
    border-radius: 1.5rem;
    box-shadow: 0 10px 30px rgba(28, 44, 93, 0.05);
}

.home-stat-card[b-n87ydr1d0f] {
    min-height: 0;
    height: auto;
    padding: 0.9rem 1.05rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    justify-content: flex-start;
    align-self: start;
}

.home-stat-card__icon[b-n87ydr1d0f] {
    display: inline-flex;
    width: 2.35rem;
    height: 2.35rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.85rem;
    font-size: 1.1rem;
}

.home-stat-card__icon.accent-blue[b-n87ydr1d0f] {
    background: var(--home-blue-soft);
    color: var(--home-blue);
}

.home-stat-card__icon.accent-green[b-n87ydr1d0f] {
    background: var(--home-green-soft);
    color: var(--home-green);
}

.home-stat-card__icon.accent-amber[b-n87ydr1d0f] {
    background: var(--home-amber-soft);
    color: var(--home-amber);
}

.home-stat-card__icon.accent-purple[b-n87ydr1d0f] {
    background: var(--home-purple-soft);
    color: var(--home-purple);
}

.home-stat-card__value[b-n87ydr1d0f] {
    font-size: 2rem;
    line-height: 1;
    font-weight: 700;
    color: #1f2736;
    letter-spacing: -0.04em;
}

.home-stat-card__label[b-n87ydr1d0f] {
    max-width: 10rem;
    min-height: 2.5rem;
    color: var(--home-muted);
    font-size: 0.92rem;
    line-height: 1.35;
}

.home-news-card[b-n87ydr1d0f] {
    grid-area: news;
    padding: 1rem 1.25rem 1.25rem;
}

.home-news-card__head h2[b-n87ydr1d0f],
.home-section-head h2[b-n87ydr1d0f] {
    margin: 0;
    color: #1d2433;
    font-size: 1.65rem;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.home-news-card__head p[b-n87ydr1d0f],
.home-section-head p[b-n87ydr1d0f] {
    margin: 0.35rem 0 0;
    color: var(--home-muted);
    font-size: 1rem;
}

.home-news-card__items[b-n87ydr1d0f] {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
}

.home-news-card__item[b-n87ydr1d0f] {
    padding: 1rem 0;
    border-top: 1px solid #edf0f6;
}

.home-news-card__item:first-child[b-n87ydr1d0f] {
    border-top: 0;
    padding-top: 0.35rem;
}

.home-news-card__line[b-n87ydr1d0f] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.95rem;
    align-items: start;
}

.home-news-card__tag[b-n87ydr1d0f] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 4.3rem;
    padding: 0.32rem 0.65rem;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.home-news-card__tag.tag-blue[b-n87ydr1d0f] {
    background: #ebf1ff;
    color: #4c6edb;
}

.home-news-card__tag.tag-amber[b-n87ydr1d0f] {
    background: #fff5df;
    color: #c98a22;
}

.home-news-card__tag.tag-purple[b-n87ydr1d0f] {
    background: #f2ecff;
    color: #8253da;
}

.home-news-card__line h3[b-n87ydr1d0f] {
    margin: 0;
    color: #293246;
    font-size: 1.42rem;
    font-weight: 600;
    letter-spacing: -0.03em;
}

.home-news-card__line p[b-n87ydr1d0f] {
    margin: 0.4rem 0 0;
    color: var(--home-muted);
    font-size: 1rem;
    line-height: 1.55;
}

.home-news-card__time[b-n87ydr1d0f] {
    display: inline-block;
    margin-top: 0.75rem;
    color: #9ba5b7;
    font-size: 0.95rem;
}

.home-news-card__link[b-n87ydr1d0f] {
    display: inline-flex;
    margin-top: 0.85rem;
    color: #4967df;
    font-weight: 600;
    text-decoration: none;
}

.home-highlight-card[b-n87ydr1d0f] {
    grid-area: highlight;
    padding: 1rem 1.2rem 1.1rem;
}

.home-section-head[b-n87ydr1d0f] {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 1rem;
}

.home-kebab[b-n87ydr1d0f] {
    border: 0;
    background: transparent;
    color: #8c95a8;
    font-size: 1.15rem;
    padding: 0.15rem;
}

.home-highlight-card__value[b-n87ydr1d0f] {
    margin-top: 0.9rem;
    color: #212a3b;
    font-size: 2.65rem;
    font-weight: 700;
    letter-spacing: -0.05em;
}

.home-highlight-card__badges[b-n87ydr1d0f] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.65rem;
    flex-wrap: wrap;
}

.home-badge[b-n87ydr1d0f] {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.65rem;
    border-radius: 999px;
    background: #f2f4f8;
    color: #6d7789;
    font-size: 0.84rem;
    font-weight: 600;
}

.home-badge--positive[b-n87ydr1d0f] {
    background: #ecf7ee;
    color: #4d9960;
}

.home-highlight-card__progress[b-n87ydr1d0f] {
    display: flex;
    width: 100%;
    height: 0.55rem;
    border-radius: 999px;
    overflow: hidden;
    background: #edf0f7;
    margin-top: 1.15rem;
}

.home-highlight-card__bar.bar-blue[b-n87ydr1d0f],
.home-legend__dot.bar-blue[b-n87ydr1d0f] {
    background: #4f6fe9;
}

.home-highlight-card__bar.bar-green[b-n87ydr1d0f],
.home-legend__dot.bar-green[b-n87ydr1d0f] {
    background: #56a867;
}

.home-highlight-card__bar.bar-amber[b-n87ydr1d0f],
.home-legend__dot.bar-amber[b-n87ydr1d0f] {
    background: #d8942e;
}

.home-highlight-card__legend[b-n87ydr1d0f] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 0.85rem;
    color: #768093;
    font-size: 0.88rem;
}

.home-legend[b-n87ydr1d0f] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.home-legend__dot[b-n87ydr1d0f] {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    display: inline-block;
}

.home-trend-card[b-n87ydr1d0f] {
    grid-area: trend;
    padding: 1rem 1.2rem 1.1rem;
}

.home-trend-card__tools[b-n87ydr1d0f] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-wrap: wrap;
}

.home-switch[b-n87ydr1d0f] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #7f8798;
    font-size: 0.92rem;
    font-style: normal;
}

.home-switch input[b-n87ydr1d0f] {
    display: none;
}

.home-switch span[b-n87ydr1d0f] {
    width: 2rem;
    height: 1.2rem;
    border-radius: 999px;
    background: #edf0f5;
    position: relative;
    display: inline-block;
}

.home-switch span[b-n87ydr1d0f]::after {
    content: "";
    position: absolute;
    top: 0.12rem;
    left: 0.14rem;
    width: 0.95rem;
    height: 0.95rem;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.home-switch em[b-n87ydr1d0f] {
    font-style: normal;
}

.home-trend-card__range[b-n87ydr1d0f] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 2.2rem;
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--home-border-strong);
    border-radius: 0.8rem;
    color: #5e6679;
    font-size: 0.92rem;
    font-weight: 500;
}

.home-trend-card__chart[b-n87ydr1d0f] {
    margin-top: 1rem;
    height: 20rem;
}

.home-trend-card__chart svg[b-n87ydr1d0f] {
    width: 100%;
    height: 100%;
}

.home-trend-card__grid-line[b-n87ydr1d0f] {
    stroke: #edf1f7;
    stroke-width: 1;
}

.home-trend-card__area[b-n87ydr1d0f] {
    fill: url(#dashboardTrendFill);
}

.home-trend-card__line[b-n87ydr1d0f] {
    fill: none;
    stroke: #5776ed;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.home-trend-card__point[b-n87ydr1d0f] {
    fill: #ffffff;
    stroke: #5776ed;
    stroke-width: 2.5;
}

.home-trend-card__labels[b-n87ydr1d0f] {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0.35rem;
    color: #8f98aa;
    font-size: 0.82rem;
    margin-top: 0.2rem;
}

@media (max-width: 1280px) {
    .home-dashboard__grid[b-n87ydr1d0f] {
        grid-template-columns: 1fr;
        grid-template-areas:
            "stats"
            "news"
            "highlight"
            "trend";
    }

    .home-dashboard__stats[b-n87ydr1d0f] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 920px) {
    .home-dashboard__stats[b-n87ydr1d0f] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-news-card__line[b-n87ydr1d0f],
    .home-section-head[b-n87ydr1d0f] {
        grid-template-columns: 1fr;
        display: block;
    }

    .home-section-head[b-n87ydr1d0f] {
        display: flex;
        flex-direction: column;
    }

    .home-trend-card__tools[b-n87ydr1d0f] {
        margin-top: 0.75rem;
    }
}

@media (max-width: 640px) {
    .home-dashboard__tabs[b-n87ydr1d0f] {
        overflow-x: auto;
        white-space: nowrap;
    }

    .home-dashboard__stats[b-n87ydr1d0f] {
        grid-template-columns: 1fr;
    }

    .home-stat-card[b-n87ydr1d0f] {
        min-height: 0;
    }

    .home-highlight-card__value[b-n87ydr1d0f] {
        font-size: 2.1rem;
    }

    .home-news-card__line h3[b-n87ydr1d0f],
    .home-news-card__head h2[b-n87ydr1d0f],
    .home-section-head h2[b-n87ydr1d0f] {
        font-size: 1.25rem;
    }

    .home-trend-card__chart[b-n87ydr1d0f] {
        height: 16rem;
    }
}
/* /Module/Apy/Feature/Portal/Page/ExecutiveDashboard.razor.rz.scp.css */
/* Dashboard Eksekutif (R10) - gaya disalin dari mockup
   YAPAYS-Report-Mockups.html. Warna, ukuran, dan radius dipertahankan apa
   adanya supaya tampilannya sama dengan mockup yang disetujui, bukan
   diselaraskan dengan komponen lain di aplikasi. */

.r10[b-63jdqdnqjg] {
    --r10-brand: #006CB7;
    --r10-green: #70BE45;
    --r10-danger: #E53935;
    --r10-warn: #FB8C00;
    --r10-ink: #0F172A;
    --r10-muted: #64748B;
    --r10-line: #E2E8F0;
    --r10-surface: #fff;

    color: var(--r10-ink);
    font-size: 13px;
}

.tnum[b-63jdqdnqjg] {
    font-variant-numeric: tabular-nums;
}

/* ── Header ── */
.r10-head[b-63jdqdnqjg] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

    .r10-head h1[b-63jdqdnqjg] {
        font-size: 20px;
        font-weight: 700;
        margin: 0;
        color: var(--r10-ink);
    }

.r10-sub[b-63jdqdnqjg] {
    color: var(--r10-muted);
    font-size: 12.5px;
    margin-top: 3px;
}

.r10-head-ctl[b-63jdqdnqjg] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.r10-ctl[b-63jdqdnqjg] {
    min-width: 90px;
    height: 34px;
    padding: 0 10px;
    font-size: 12.5px;
    font-family: inherit;
    color: #475569;
    background: #fff;
    border: 1px solid #CBD5E1;
    border-radius: 4px;
}

    .r10-ctl:disabled[b-63jdqdnqjg] {
        background: #F8FAFC;
        color: #94A3B8;
    }

.r10-ctl-wide[b-63jdqdnqjg] {
    min-width: 150px;
}

.r10-btn[b-63jdqdnqjg] {
    border: none;
    border-radius: 4px;
    padding: 8px 16px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}

    .r10-btn:disabled[b-63jdqdnqjg] {
        opacity: .55;
        cursor: default;
    }

.r10-btn-p[b-63jdqdnqjg] {
    background: var(--r10-brand);
    color: #fff;
}

/* Tombol ikon (layar penuh). Tingginya disamakan dengan .r10-ctl supaya
   sebaris rapi dengan kedua dropdown dan tombol Cetak PDF di sebelahnya. */
.r10-btn-icon[b-63jdqdnqjg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    background: #fff;
    color: #475569;
    border: 1px solid #CBD5E1;
}

    .r10-btn-icon svg[b-63jdqdnqjg] {
        width: 17px;
        height: 17px;
    }

    .r10-btn-icon:hover:not(:disabled)[b-63jdqdnqjg] {
        border-color: var(--r10-brand);
        color: var(--r10-brand);
    }

/* Saat layar penuh, elemen .r10 menjadi akar tampilan: tanpa latar dan padding
   sendiri ia digambar di atas backdrop hitam bawaan browser dan isinya menempel
   ke tepi layar. overflow:auto membuat halaman yang lebih tinggi dari layar
   tetap bisa digulir - akar fullscreen tidak ikut menggulir <body>. */
.r10:fullscreen[b-63jdqdnqjg] {
    background: #fff;
    padding: 24px;
    overflow: auto;
}

/* ── Status memuat / gagal / kosong ── */
.r10-state[b-63jdqdnqjg] {
    background: var(--r10-surface);
    border: 1px solid var(--r10-line);
    border-radius: 6px;
    padding: 28px 20px;
    text-align: center;
    color: var(--r10-muted);
    font-size: 13px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.r10-state-error[b-63jdqdnqjg] {
    border-color: #FECACA;
    background: #FEF2F2;
    color: #991B1B;
}

.r10-state-detail[b-63jdqdnqjg] {
    font-size: 12px;
    max-width: 60ch;
    word-break: break-word;
}

.r10-empty[b-63jdqdnqjg] {
    color: var(--r10-muted);
    font-size: 12.5px;
    text-align: center;
    margin: 24px 0;
}

/* ── KPI ── */
.r10-kpis[b-63jdqdnqjg] {
    display: grid;
    gap: 11px;
    margin-bottom: 14px;
    /* auto-fit + minmax, bukan repeat(6,1fr) seperti mockup: enam kartu pada
       layar sempit akan menyusut sampai angkanya terpotong. Di layar lebar
       hasilnya tetap enam kolom sejajar. */
    grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
}

.r10-kpi[b-63jdqdnqjg] {
    background: var(--r10-surface);
    border: 1px solid var(--r10-line);
    border-radius: 6px;
    padding: 12px 14px;
    border-top: 3px solid var(--r10-brand);
}

    .r10-kpi .l[b-63jdqdnqjg] {
        font-size: 10px;
        font-weight: 600;
        color: var(--r10-muted);
        text-transform: uppercase;
        letter-spacing: .5px;
    }

    .r10-kpi .v[b-63jdqdnqjg] {
        font-size: 21px;
        font-weight: 700;
        margin: 5px 0 3px;
        line-height: 1.1;
    }

    .r10-kpi .s[b-63jdqdnqjg] {
        font-size: 11.5px;
        color: var(--r10-muted);
    }

    .r10-kpi .bar[b-63jdqdnqjg] {
        height: 5px;
        background: #EEF2F6;
        border-radius: 3px;
        overflow: hidden;
        margin-top: 6px;
    }

        .r10-kpi .bar > i[b-63jdqdnqjg] {
            display: block;
            height: 100%;
        }

/* ── Card & grid ── */
/* DUA kolom tetap - grafiknya tersusun 2 x 2, seperti mockup.
   Sebelumnya repeat(auto-fit, minmax(340px, 1fr)): pada layar lebar auto-fit
   memuat tiga sampai empat kolom, sehingga keempat kartu berjajar dalam satu
   baris alih-alih 2 x 2.

   minmax(0, 1fr), bukan 1fr: kolom grid punya min-width:auto, dan isi yang
   lebar (SVG, legenda donat) akan mendorong kolomnya melewati lebar kartu. */
.r10-g2[b-63jdqdnqjg] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 14px;
}

/* Di bawah ~860px dua kolom membuat grafik terlalu sempit untuk dibaca,
   jadi kartunya ditumpuk satu per baris. */
@media (max-width: 860px) {
    .r10-g2[b-63jdqdnqjg] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.r10-card[b-63jdqdnqjg] {
    background: var(--r10-surface);
    border: 1px solid var(--r10-line);
    border-radius: 6px;
    overflow: hidden;
    /* Kolom flex supaya badan kartu ikut tinggi kartu - di dalam grid
       kartu diregangkan mengikuti tetangganya yang lebih tinggi. */
    display: flex;
    flex-direction: column;
}

    .r10-card > h2[b-63jdqdnqjg] {
        padding: 12px 14px;
        border-bottom: 1px solid var(--r10-line);
        margin: 0;
        font-size: 13px;
        font-weight: 600;
        color: var(--r10-ink);
    }

.r10-card-body[b-63jdqdnqjg] {
    padding: 16px 18px;
    flex: 1 1 auto;
    min-height: 0;
}

.r10-svg[b-63jdqdnqjg] {
    width: 100%;
    height: auto;
}

/* ── Donut ── */
.r10-donut-body[b-63jdqdnqjg] {
    display: flex;
    gap: 20px;
    align-items: center;
    flex-wrap: wrap;
}

/* Donat mengisi ruang yang ada, bukan lagi 150px tetap.

   calc(100% - 200px), bukan angka tetap atau persen biasa: 200px = gap 20px
   + min-width legenda 180px, jadi donat hanya mengambil sisa lebar yang
   benar-benar tersisa. Kalau lebih besar dari itu, legenda melewati batas
   satu baris dan flex-wrap melemparnya ke bawah donat (flex membungkus
   SEBELUM menyusutkan, jadi flex-shrink saja tidak menolong). Dibatasi
   150-300px: 300px agar tidak berlebihan di layar lebar.

   max-height:100% menjaga donat tetap utuh kalau badan kartu lebih pendek
   dari lebarnya; aspect-ratio menjaganya tetap bulat. */
.r10-donut[b-63jdqdnqjg] {
    width: clamp(150px, calc(100% - 200px), 300px);
    max-height: 100%;
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
}

.r10-legend-list[b-63jdqdnqjg] {
    flex: 1;
    min-width: 180px;
    font-size: 12px;
    line-height: 2.1;
}

    .r10-legend-list > div[b-63jdqdnqjg] {
        display: flex;
        align-items: center;
    }

    /* Deskripsi akun bisa jauh lebih panjang dari kode yang dulu ditampilkan;
       dipotong satu baris supaya baris legenda tidak melipat dan mendorong
       tinggi kartu. Nama utuhnya tetap terbaca lewat title pada barisnya. */
    .r10-legend-list > div > span[b-63jdqdnqjg] {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .r10-legend-list i[b-63jdqdnqjg] {
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 2px;
        margin-right: 7px;
        flex-shrink: 0;
    }

    /* margin-left:auto, bukan float:right seperti mockup - float di dalam flex
       row tidak berlaku, dan angkanya akan menempel pada namanya. */
    .r10-legend-list b[b-63jdqdnqjg] {
        margin-left: auto;
        padding-left: 10px;
        /* Angka persen tidak boleh ikut menyusut saat nama kategori panjang -
           yang dipotong adalah namanya, bukan angkanya. */
        flex-shrink: 0;
    }

/* ── Footer ── */
.r10-foot[b-63jdqdnqjg] {
    background: #F8FAFC;
    border: 1px solid var(--r10-line);
    border-radius: 6px;
    padding: 9px 13px;
    font-size: 11px;
    color: var(--r10-muted);
    line-height: 1.6;
}

    .r10-foot b[b-63jdqdnqjg] {
        color: #334155;
    }

.r10-caveat[b-63jdqdnqjg] {
    color: #B45309;
    margin-top: 3px;
}

/* Kerangka aplikasi disembunyikan oleh aturan bersama di
   css/assistance.base.css; yang di bawah ini khusus isi halaman R10. */
@media print {
    /* Kontrol periode dan tombol cetak tidak perlu ikut tercetak. */
    .r10-head-ctl[b-63jdqdnqjg] {
        display: none;
    }

    /* Enam kartu berjajar menjadi terlalu sempit di lebar kertas; dijadikan
       dua baris berisi tiga. */
    .r10-kpis[b-63jdqdnqjg] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* Kartu tidak boleh terpotong di antara dua halaman - grafik yang
       terbelah kepala dan badannya tidak terbaca. */
    .r10-kpi[b-63jdqdnqjg],
    .r10-card[b-63jdqdnqjg] {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /* Bayangan dan sudut membulat tidak menambah apa pun di atas kertas. */
    .r10-card[b-63jdqdnqjg] {
        box-shadow: none;
    }
}
/* /Module/Apy/Feature/TaxDocument/Component/VendorSearchSelect.razor.rz.scp.css */
.vendor-search-select[b-36vfuhjgs3] {
    position: relative;
}

.vendor-search-trigger[b-36vfuhjgs3] {
    align-items: center;
    display: flex;
    justify-content: space-between;
    text-align: left;
    width: 100%;
}

.vendor-search-popup[b-36vfuhjgs3] {
    background: var(--popover, var(--card));
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    box-shadow: 0 0.75rem 2rem rgb(0 0 0 / 0.12);
    left: 0;
    margin-top: 0.375rem;
    min-width: 100%;
    padding: 0.5rem;
    position: absolute;
    right: 0;
    z-index: 30;
}

.vendor-search-box[b-36vfuhjgs3] {
    align-items: center;
    display: flex;
    gap: 0.5rem;
    padding-bottom: 0.5rem;
}

.vendor-search-results[b-36vfuhjgs3] {
    max-height: 16rem;
    overflow-y: auto;
}

.vendor-search-option[b-36vfuhjgs3] {
    align-items: flex-start;
    background: transparent;
    border: 0;
    border-radius: 0.5rem;
    color: var(--foreground);
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.625rem 0.75rem;
    text-align: left;
    width: 100%;
}

.vendor-search-option:hover[b-36vfuhjgs3],
.vendor-search-option.active[b-36vfuhjgs3] {
    background: color-mix(in srgb, var(--primary) 8%, transparent);
}

.vendor-search-empty[b-36vfuhjgs3] {
    color: var(--muted-foreground);
    font-size: 0.8125rem;
    padding: 0.75rem;
    text-align: center;
}
/* /Module/Apy/Feature/TaxDocument/Page/TaxDocuments.razor.rz.scp.css */
[b-3xkepcrnio] .content-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
    margin-bottom: 1.25rem;
    overflow: hidden;
}

.tax-document-form-card[b-3xkepcrnio] {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
    box-sizing: border-box;
    gap: 0;
    margin-bottom: 1.25rem;
    max-width: 100%;
    overflow: hidden;
    padding: 0;
    width: 100%;
}

.tax-document-form-footer[b-3xkepcrnio] {
    box-sizing: border-box;
    flex: 0 0 auto;
    max-width: 100%;
    min-width: 0;
    width: 100%;
}

@media (min-width: 40rem) {
    .tax-document-upload-button[b-3xkepcrnio] {
        margin-left: auto;
    }
}
[b-3xkepcrnio] .content-card-header {
    align-items: center;
    background: var(--card);
    border-bottom: 1px solid var(--border);
    display: flex;
    min-height: 4rem;
    padding: 1rem 1.25rem;
}

[b-3xkepcrnio] .content-card-body {
    padding: 1.25rem;
}

[b-3xkepcrnio] .form-section-title {
    color: var(--foreground);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0;
}

[b-3xkepcrnio] .form-label {
    color: var(--foreground);
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

[b-3xkepcrnio] .kt-table thead th {
    color: var(--muted-foreground);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

[b-3xkepcrnio] .kt-table tbody td {
    padding-block: 0.875rem;
}

[b-3xkepcrnio] .kt-table tbody tr:hover {
    background: color-mix(in srgb, var(--primary) 4%, transparent);
}

.alert[b-3xkepcrnio] {
    align-items: center;
    border: 1px solid var(--border);
    border-inline-start-width: 3px;
    border-radius: 0.75rem;
    display: flex;
    font-size: 0.875rem;
    margin-bottom: 1.25rem;
    padding: 0.875rem 1rem;
}

.alert-success[b-3xkepcrnio] {
    background: color-mix(in srgb, var(--success) 8%, var(--card));
    border-inline-start-color: var(--success);
    color: var(--foreground);
}

.alert-danger[b-3xkepcrnio] {
    background: color-mix(in srgb, var(--destructive) 8%, var(--card));
    border-inline-start-color: var(--destructive);
    color: var(--foreground);
}

.tax-document-filter-grid[b-3xkepcrnio] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.tax-document-table[b-3xkepcrnio] {
    min-width: 72rem;
}

@media (min-width: 768px) {
    .tax-document-filter-grid[b-3xkepcrnio] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1280px) {
    .tax-document-filter-grid[b-3xkepcrnio] {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .tax-document-filter-grid > .xl\:col-span-3[b-3xkepcrnio] {
        grid-column: span 3 / span 3;
    }

    .tax-document-filter-grid > .xl\:col-span-2[b-3xkepcrnio] {
        grid-column: span 2 / span 2;
    }

    .tax-document-filter-grid > .xl\:col-span-1[b-3xkepcrnio] {
        grid-column: span 1 / span 1;
    }

    .tax-document-table[b-3xkepcrnio] {
        min-width: 100%;
    }
}
[b-3xkepcrnio] .kt-btn:focus-visible,
[b-3xkepcrnio] .kt-input:focus-visible,
[b-3xkepcrnio] .kt-select:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

@media (max-width: 767px) {
    [b-3xkepcrnio] .content-card-body,
    [b-3xkepcrnio] .content-card-header {
        padding: 1rem;
    }

    [b-3xkepcrnio] .kt-table {
        min-width: 72rem;
    }
}
/* /Module/Apy/Layout/BudgetLayout3.razor.rz.scp.css */
/* Soft, tilted YAKKAP watermark that fills the empty band between the brand
   and the topbar icons, so the header's white space doesn't read as bare.
   The PNG is already faded (~16% opacity) and rotated; CSS just tiles it. */
.header-watermark[b-7yacg8cyhy] {
    background-image: url('/assets/media/app/logo-watermark.png');
    background-repeat: repeat-x;
    background-position: left center;
    background-size: auto 82%;
    min-width: 0;        /* allow the grow item to flex without overflowing */
    pointer-events: none; /* purely decorative - never intercept clicks */
}
/* /Module/Apy/Layout/MainLayout.razor.rz.scp.css */
/* Soft, tilted YAKKAP watermark that fills the empty band between the brand
   and the topbar icons, so the header's white space doesn't read as bare.
   The PNG is already faded (~16% opacity) and rotated; CSS just tiles it. */
.header-watermark[b-4bk5m463o4] {
    background-image: url('/assets/media/app/logo-watermark.png');
    background-repeat: repeat-x;
    background-position: left center;
    background-size: auto 82%;
    min-width: 0;        /* allow the grow item to flex without overflowing */
    pointer-events: none; /* purely decorative - never intercept clicks */
}
/* /Module/Apy/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-ayxqh2jg81] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-ayxqh2jg81] {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row[b-ayxqh2jg81] {
    min-height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-ayxqh2jg81] {
    font-size: 1.1rem;
}

.bi[b-ayxqh2jg81] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-ayxqh2jg81] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-ayxqh2jg81] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-ayxqh2jg81] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.nav-item[b-ayxqh2jg81] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-ayxqh2jg81] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-ayxqh2jg81] {
        padding-bottom: 1rem;
    }

    .nav-item[b-ayxqh2jg81]  .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

.nav-item[b-ayxqh2jg81]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-ayxqh2jg81]  .nav-link:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

.nav-scrollable[b-ayxqh2jg81] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-ayxqh2jg81] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-ayxqh2jg81] {
        display: none;
    }

    .nav-scrollable[b-ayxqh2jg81] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Module/Apy/Shared/Feedback/DocumentReviewDialog.razor.rz.scp.css */
.doc-review-overlay[b-d9pb2lqdio] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
}
.doc-review-overlay.doc-review-open[b-d9pb2lqdio] {
    display: flex;
}

.doc-review-modal[b-d9pb2lqdio] {
    width: 95vw;
    height: 95vh;
    max-width: 1400px;
    background: #fff;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}

.doc-review-topbar[b-d9pb2lqdio] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid #e9ecef;
    flex-shrink: 0;
    background: #fafafa;
}

.doc-review-close[b-d9pb2lqdio] {
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    color: #666;
    line-height: 1;
}
.doc-review-close:hover[b-d9pb2lqdio] {
    background: #eee;
    color: #333;
}

.doc-review-topbar-info[b-d9pb2lqdio] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.doc-review-filename[b-d9pb2lqdio] {
    font-weight: 600;
    font-size: 0.95rem;
    color: #222;
}
.doc-review-filesize[b-d9pb2lqdio] {
    font-size: 0.75rem;
    color: #999;
}

.doc-review-body[b-d9pb2lqdio] {
    display: flex;
    flex: 1;
    overflow: hidden;
}

.doc-review-preview[b-d9pb2lqdio] {
    position: relative;
    flex: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    border-right: 1px solid #e9ecef;
    min-width: 0;
}

.doc-review-pdf-placeholder[b-d9pb2lqdio] {
    text-align: center;
    color: #999;
}
.pdf-icon[b-d9pb2lqdio] {
    font-size: 4rem;
    margin-bottom: 12px;
}
.pdf-name[b-d9pb2lqdio] {
    font-size: 1rem;
    font-weight: 600;
    color: #444;
    margin-bottom: 4px;
}
.pdf-size[b-d9pb2lqdio] {
    font-size: 0.85rem;
    color: #888;
    margin-bottom: 16px;
}
.pdf-note[b-d9pb2lqdio] {
    font-size: 0.75rem;
    color: #bbb;
    font-style: italic;
}

.doc-review-comments[b-d9pb2lqdio] {
    flex: 2;
    display: flex;
    flex-direction: column;
    background: #fff;
    min-width: 320px;
    max-width: 480px;
}

.doc-review-comments-header[b-d9pb2lqdio] {
    padding: 14px 16px;
    font-weight: 600;
    font-size: 0.9rem;
    border-bottom: 1px solid #e9ecef;
    color: #333;
    flex-shrink: 0;
}

.doc-review-comments-list[b-d9pb2lqdio] {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.doc-review-empty[b-d9pb2lqdio] {
    text-align: center;
    color: #bbb;
    font-size: 0.85rem;
    padding: 40px 0;
}

.doc-review-bubble[b-d9pb2lqdio] {
    display: flex;
    gap: 10px;
    max-width: 100%;
}

.bubble-avatar[b-d9pb2lqdio] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    margin-top: 4px;
}
.bubble-other .bubble-avatar[b-d9pb2lqdio] {
    background: #4361ee;
}
.bubble-self .bubble-avatar[b-d9pb2lqdio] {
    background: #06d6a0;
}

.bubble-content[b-d9pb2lqdio] {
    flex: 1;
    min-width: 0;
}
.bubble-header[b-d9pb2lqdio] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}
.bubble-name[b-d9pb2lqdio] {
    font-weight: 600;
    font-size: 0.8rem;
    color: #222;
}
.bubble-role[b-d9pb2lqdio] {
    font-size: 0.7rem;
    color: #999;
}
.bubble-text[b-d9pb2lqdio] {
    font-size: 0.85rem;
    color: #444;
    line-height: 1.4;
    margin-top: 2px;
    white-space: pre-wrap;
    word-break: break-word;
}
.bubble-time[b-d9pb2lqdio] {
    font-size: 0.65rem;
    color: #bbb;
    margin-top: 4px;
}

.doc-review-input[b-d9pb2lqdio] {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 10px 16px;
    border-top: 1px solid #e9ecef;
    flex-shrink: 0;
    background: #fafafa;
}

.doc-review-textarea[b-d9pb2lqdio] {
    flex: 1;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 0.85rem;
    font-family: inherit;
    resize: none;
    outline: none;
    min-height: 36px;
    max-height: 80px;
    line-height: 1.4;
}
.doc-review-textarea:focus[b-d9pb2lqdio] {
    border-color: #4361ee;
    box-shadow: 0 0 0 2px rgba(67,97,238,0.15);
}

.doc-review-send[b-d9pb2lqdio] {
    background: #4361ee;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
    flex-shrink: 0;
    transition: background 0.15s;
}
.doc-review-send:hover:not(:disabled)[b-d9pb2lqdio] {
    background: #3651d4;
}
.doc-review-send:disabled[b-d9pb2lqdio] {
    background: #ccc;
    cursor: default;
}

@media (max-width: 768px) {
    .doc-review-modal[b-d9pb2lqdio] {
        width: 100vw;
        height: 100vh;
        border-radius: 0;
    }
    .doc-review-body[b-d9pb2lqdio] {
        flex-direction: column;
    }
    .doc-review-preview[b-d9pb2lqdio] {
        flex: none;
        height: auto;
    }
    .doc-review-preview-frame[b-d9pb2lqdio],
    .doc-review-preview-image[b-d9pb2lqdio],
    .doc-review-preview-frame--pdf[b-d9pb2lqdio] {
        height: min(900px, 60vh);
        min-height: 360px;
    }
    .doc-review-comments[b-d9pb2lqdio] {
        max-width: none;
        flex: 1;
    }
}
.doc-review-modal.doc-review-modal--external[b-d9pb2lqdio] {
    width: 98vw;
    height: 96vh;
    max-width: 1800px;
}

.doc-review-modal--external .doc-review-preview-frame[b-d9pb2lqdio],
.doc-review-modal--external .doc-review-preview-image[b-d9pb2lqdio] {
    display: block;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    border: 0;
    object-fit: contain;
}

.doc-review-modal--external .doc-review-comments[b-d9pb2lqdio] {
    flex: 0 0 380px;
    width: 380px;
    max-width: 380px;
}

@media (max-width: 768px) {
    .doc-review-modal.doc-review-modal--external[b-d9pb2lqdio] {
        width: 100vw;
        height: 100vh;
    }

    .doc-review-modal--external .doc-review-comments[b-d9pb2lqdio] {
        width: 100%;
        max-width: none;
        flex: 1;
    }
}
.doc-review-preview-loading[b-d9pb2lqdio] {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px;
    background: rgba(245, 247, 250, 0.96);
    color: #334155;
    text-align: center;
}

.doc-review-preview-loading span:last-child[b-d9pb2lqdio] {
    max-width: 80%;
    color: #64748b;
    font-size: 0.82rem;
    overflow-wrap: anywhere;
}

.doc-review-preview-spinner[b-d9pb2lqdio] {
    width: 38px;
    height: 38px;
    border: 4px solid #dbe4f0;
    border-top-color: #4361ee;
    border-radius: 50%;
    animation: doc-review-spin-b-d9pb2lqdio 0.8s linear infinite;
}

@keyframes doc-review-spin-b-d9pb2lqdio {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .doc-review-preview-spinner[b-d9pb2lqdio] {
        animation-duration: 1.8s;
    }
}
.doc-review-file-nav[b-d9pb2lqdio] {
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: min(42vw, 620px);
    padding: 2px 4px;
    overflow-x: auto;
    scrollbar-width: thin;
}

.doc-review-file-nav-item[b-d9pb2lqdio] {
    position: relative;
    display: inline-flex;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 7px;
    font-size: 0.78rem;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.doc-review-file-nav-item.is-mandatory[b-d9pb2lqdio] {
    border-color: #f59e0b;
    background: #fff7ed;
    color: #9a3412;
}

.doc-review-file-nav-item.is-optional[b-d9pb2lqdio] {
    border-color: #93c5fd;
    background: #eff6ff;
    color: #1d4ed8;
}

.doc-review-file-nav-item:hover[b-d9pb2lqdio],
.doc-review-file-nav-item:focus-visible[b-d9pb2lqdio] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.16);
    outline: none;
}

.doc-review-file-nav-item.is-active[b-d9pb2lqdio] {
    border-color: #172033;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #172033;
}

@media (max-width: 768px) {
    .doc-review-topbar[b-d9pb2lqdio] {
        flex-wrap: wrap;
    }

    .doc-review-file-nav[b-d9pb2lqdio] {
        order: 3;
        width: 100%;
        max-width: none;
    }
}
.doc-review-file-nav-item.is-header[b-d9pb2lqdio] {
    flex-basis: 48px;
    width: 48px;
    border-color: #94a3b8;
    background: #f8fafc;
    color: #172033;
}

.doc-review-file-count[b-d9pb2lqdio] {
    position: absolute;
    top: -7px;
    right: -7px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border: 2px solid #fff;
    border-radius: 999px;
    background: #475569;
    color: #fff;
    font-size: 0.62rem;
    line-height: 13px;
    text-align: center;
}

.doc-review-file-unread[b-d9pb2lqdio] {
    position: absolute;
    right: -3px;
    bottom: -3px;
    width: 9px;
    height: 9px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #dc2626;
}
.doc-review-rfp-number[b-d9pb2lqdio] {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    padding-left: 12px;
    border-left: 1px solid #dbe2ea;
    white-space: nowrap;
}

.doc-review-rfp-number span[b-d9pb2lqdio] {
    color: #64748b;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.doc-review-rfp-number strong[b-d9pb2lqdio] {
    color: #172033;
    font-size: 0.84rem;
}

@media (max-width: 768px) {
    .doc-review-rfp-number[b-d9pb2lqdio] {
        margin-left: auto;
    }
}

.doc-review-comment-context[b-d9pb2lqdio] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
    width: 100%;
    margin-bottom: 8px;
}

.doc-review-comment-context label[b-d9pb2lqdio] { display: grid; gap: 4px; }
.doc-review-comment-context label > span[b-d9pb2lqdio] { color: #64748b; font-size: .68rem; font-weight: 700; text-transform: uppercase; }
.doc-review-comment-context select[b-d9pb2lqdio] { min-height: 34px; border: 1px solid #cbd5e1; border-radius: 6px; background: #fff; padding: 5px 8px; color: #172033; font-size: .78rem; }
.bubble-context[b-d9pb2lqdio] { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 5px; }
.bubble-context span[b-d9pb2lqdio] { border-radius: 999px; background: #e9f1fb; color: #315a84; padding: 2px 7px; font-size: .65rem; font-weight: 700; }

@media (max-width: 768px) {
    .doc-review-comment-context[b-d9pb2lqdio] { grid-template-columns: 1fr; }
}
.doc-review-rfp-summary[b-d9pb2lqdio] {
    align-self: stretch;
    width: 100%;
    overflow-y: auto;
    padding: 28px;
    color: #1f2937;
    background: #f7f8fa;
}
.doc-review-rfp-summary-header[b-d9pb2lqdio] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 22px;
    margin-bottom: 18px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
}
.doc-review-rfp-summary-eyebrow[b-d9pb2lqdio] { display:block; margin-bottom:5px; color:#64748b; font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.doc-review-rfp-summary-header h2[b-d9pb2lqdio] { margin:0; color:#111827; font-size:1.2rem; }
.doc-review-rfp-summary-header p[b-d9pb2lqdio] { margin:7px 0 0; color:#64748b; font-size:.86rem; line-height:1.5; }
.doc-review-rfp-summary-status[b-d9pb2lqdio] { flex:0 0 auto; padding:6px 10px; border-radius:999px; color:#9a3412; background:#ffedd5; font-size:.72rem; font-weight:700; }
.doc-review-rfp-summary-grid[b-d9pb2lqdio] { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.doc-review-rfp-summary-section[b-d9pb2lqdio] { padding:18px; border:1px solid #e5e7eb; border-radius:10px; background:#fff; }
.doc-review-rfp-summary-section h3[b-d9pb2lqdio] { margin:0 0 14px; color:#111827; font-size:.9rem; font-weight:700; }
.doc-review-rfp-summary-item + .doc-review-rfp-summary-item[b-d9pb2lqdio] { margin-top:12px; padding-top:12px; border-top:1px solid #f1f5f9; }
.doc-review-rfp-summary-item span[b-d9pb2lqdio],.doc-review-rfp-summary-item strong[b-d9pb2lqdio] { display:block; }
.doc-review-rfp-summary-item span[b-d9pb2lqdio] { margin-bottom:3px; color:#64748b; font-size:.7rem; font-weight:600; text-transform:uppercase; }
.doc-review-rfp-summary-item strong[b-d9pb2lqdio] { color:#1f2937; font-size:.82rem; overflow-wrap:anywhere; }
@media (max-width:900px) {
    .doc-review-rfp-summary-grid[b-d9pb2lqdio] { grid-template-columns:1fr; }
    .doc-review-rfp-summary-header[b-d9pb2lqdio] { flex-direction:column; }
}
/* Structured comment composer: context selectors occupy their own row. */
.doc-review-input[b-d9pb2lqdio] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 36px;
    align-items: end;
    gap: 8px;
}

.doc-review-input > .doc-review-comment-context[b-d9pb2lqdio] {
    grid-column: 1 / -1;
    min-width: 0;
    margin-bottom: 0;
}

.doc-review-comment-context label[b-d9pb2lqdio],
.doc-review-comment-context select[b-d9pb2lqdio],
.doc-review-textarea[b-d9pb2lqdio] {
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}

.doc-review-input > .doc-review-textarea[b-d9pb2lqdio] {
    grid-column: 1;
}

.doc-review-input > .doc-review-send[b-d9pb2lqdio] {
    grid-column: 2;
}

@media (max-width: 768px) {
    .doc-review-overlay[b-d9pb2lqdio] {
        align-items: stretch;
        overflow: hidden;
    }

    .doc-review-modal[b-d9pb2lqdio],
    .doc-review-modal.doc-review-modal--external[b-d9pb2lqdio] {
        height: 100dvh;
        max-height: 100dvh;
    }

    .doc-review-body[b-d9pb2lqdio] {
        display: block;
        flex: 1 1 auto;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .doc-review-preview[b-d9pb2lqdio] {
        width: 100%;
        min-height: min(420px, 52dvh);
        border-right: 0;
        border-bottom: 1px solid #e9ecef;
    }

    .doc-review-rfp-summary[b-d9pb2lqdio] {
        max-height: none;
        overflow: visible;
    }

    .doc-review-comments[b-d9pb2lqdio],
    .doc-review-modal--external .doc-review-comments[b-d9pb2lqdio] {
        width: 100%;
        min-width: 0;
        max-width: none;
        height: max(520px, 68dvh);
        min-height: max(520px, 68dvh);
        flex: none;
    }

    .doc-review-comments-list[b-d9pb2lqdio] {
        min-height: 160px;
    }

    .doc-review-input[b-d9pb2lqdio] {
        position: relative;
        flex-shrink: 0;
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }

    .doc-review-comment-context[b-d9pb2lqdio] {
        grid-template-columns: 1fr;
    }
}
.doc-review-preview-loading[b-d9pb2lqdio] {
    z-index: 3;
    background: rgba(248, 250, 252, 0.94);
    pointer-events: none;
}

.doc-review-preview-frame[b-d9pb2lqdio],
.doc-review-preview-image[b-d9pb2lqdio] {
    z-index: 1;
}
.doc-review-pagination[b-d9pb2lqdio] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    border-top: 1px solid #e9ecef;
    background: #fff;
    flex-shrink: 0;
}

.doc-review-page-button[b-d9pb2lqdio] {
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    border: 1px solid #d9dee7;
    border-radius: 6px;
    background: #fff;
    color: #4b5563;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
}

.doc-review-page-button:hover:not(:disabled)[b-d9pb2lqdio] {
    border-color: #2563eb;
    color: #2563eb;
}

.doc-review-page-button.is-active[b-d9pb2lqdio] {
    border-color: #2563eb;
    background: #2563eb;
    color: #fff;
}

.doc-review-page-button:disabled[b-d9pb2lqdio] {
    cursor: not-allowed;
    opacity: .4;
}
/* /Module/Apy/Shared/Feedback/DocumentTrackerDrawer.razor.rz.scp.css */
/* ---------- Document tracker (slide-in drawer) ---------- */
.tracker-overlay[b-m8m7sij641] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .35);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
    z-index: 1000;
}

.tracker-overlay.show[b-m8m7sij641] {
    opacity: 1;
    pointer-events: auto;
}

.tracker-drawer[b-m8m7sij641] {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 460px;
    max-width: 92vw;
    background: #fff;
    box-shadow: -12px 0 40px rgba(15, 23, 42, .18);
    transform: translateX(100%);
    transition: transform .28s ease;
    z-index: 1001;
    display: flex;
    flex-direction: column;
}

.tracker-drawer.show[b-m8m7sij641] {
    transform: translateX(0);
}

.tracker-drawer.tracker-inline-panel[b-m8m7sij641] {
    position: static;
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 320px;
    background: #fff;
    box-shadow: none;
    transform: none;
    transition: none;
    z-index: auto;
    border: 1px solid #eef1f4;
    border-radius: 12px;
}

.tracker-head[b-m8m7sij641] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid #eef1f4;
    flex: 0 0 auto;
}

.tracker-head > div:first-child[b-m8m7sij641] {
    min-width: 0;
    max-width: 100%;
}

.tracker-head h2[b-m8m7sij641] {
    font-size: 17px;
    font-weight: 700;
    color: #111827;
    margin: 0;
}

.tracker-sub[b-m8m7sij641] {
    font-size: 12.5px;
    color: #6b7280;
    margin-top: 2px;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.tracker-close[b-m8m7sij641] {
    border: none;
    background: none;
    font-size: 26px;
    line-height: 1;
    color: #6b7280;
    cursor: pointer;
    padding: 0 2px;
}

.tracker-close:hover[b-m8m7sij641] {
    color: #111827;
}

.tracker-tabs[b-m8m7sij641] {
    display: flex;
    gap: 4px;
    padding: 0 22px;
    border-bottom: 1px solid #eef1f4;
    flex: 0 0 auto;
}

.tracker-tab[b-m8m7sij641] {
    border: none;
    background: none;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    color: #6b7280;
    padding: 12px 14px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.tracker-tab:hover[b-m8m7sij641] {
    color: #111827;
}

.tracker-tab.active[b-m8m7sij641] {
    color: #2563eb;
    border-bottom-color: #2563eb;
}

.tracker-body[b-m8m7sij641] {
    padding: 24px 22px;
    overflow-y: auto;
    flex: 1;
}

/* ---------- Tracker checklist table ---------- */
.track-table[b-m8m7sij641] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #eef1f4;
    border-radius: 10px;
    overflow: hidden;
    font-size: 13.5px;
}

.track-table th[b-m8m7sij641] {
    text-align: left;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: #6b7280;
    background: #f8fafc;
    padding: 10px 14px;
    border-bottom: 1px solid #eef1f4;
}

.track-table td[b-m8m7sij641] {
    padding: 11px 14px;
    border-bottom: 1px solid #f1f4f8;
    color: #1f2937;
    vertical-align: middle;
}

.track-table tr:last-child td[b-m8m7sij641] {
    border-bottom: none;
}

.ts-col-no[b-m8m7sij641] {
    width: 38px;
}

.ts-col-status[b-m8m7sij641] {
    width: 140px;
}

.ts-no[b-m8m7sij641] {
    color: #9ca3af;
    font-variant-numeric: tabular-nums;
}

.ts-name[b-m8m7sij641] {
    font-weight: 600;
    color: #111827;
}

.ts-row-current[b-m8m7sij641] {
    background: #f5f8ff;
}

.ts-badge[b-m8m7sij641] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

.ts-badge svg[b-m8m7sij641] {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
}

.ts-done[b-m8m7sij641] {
    background: #edfaf0;
    color: #15803d;
}

.ts-current[b-m8m7sij641] {
    background: #eaf1ff;
    color: #1d4ed8;
}

.ts-pending[b-m8m7sij641] {
    background: #f1f3f6;
    color: #6b7280;
}

.ts-returned[b-m8m7sij641] {
    background: #fff4e5;
    color: #b45309;
}

.ts-rejected[b-m8m7sij641] {
    background: #fdecec;
    color: #b91c1c;
}

.ts-dot[b-m8m7sij641] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
    animation: ts-pulse-b-m8m7sij641 1.4s ease-in-out infinite;
}

.ts-ring[b-m8m7sij641] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 2px solid currentColor;
    opacity: .55;
    flex: 0 0 auto;
}

@keyframes ts-pulse-b-m8m7sij641 {
    0%, 100% { opacity: 1; }
    50%      { opacity: .35; }
}

/* ---------- Timeline (log tab) ---------- */
.timeline[b-m8m7sij641] {
    position: relative;
}

.tl-item[b-m8m7sij641] {
    position: relative;
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 16px;
    padding-bottom: 26px;
}

.tl-item:last-child[b-m8m7sij641] {
    padding-bottom: 0;
}

.tl-item[b-m8m7sij641]::before {
    content: "";
    position: absolute;
    left: 19px;
    top: 38px;
    bottom: -4px;
    width: 2px;
    background: #eef1f4;
}

.tl-item:last-child[b-m8m7sij641]::before {
    display: none;
}

.tl-marker[b-m8m7sij641] {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid #e5e7eb;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    position: relative;
    z-index: 1;
}

.tl-marker svg[b-m8m7sij641] {
    width: 17px;
    height: 17px;
}

.tl-content[b-m8m7sij641] {
    min-width: 0;
    padding-top: 3px;
}

.tl-title[b-m8m7sij641] {
    font-size: 14.5px;
    font-weight: 600;
    color: #111827;
    line-height: 1.4;
}

.tl-time[b-m8m7sij641] {
    font-size: 12.5px;
    color: #6b7280;
    margin-top: 3px;
}

.tl-note[b-m8m7sij641] {
    font-size: 13px;
    color: #4b5563;
    margin-top: 6px;
    line-height: 1.5;
}

.tl-empty[b-m8m7sij641] {
    font-size: 13px;
    color: #6b7280;
    text-align: center;
    padding: 24px 8px;
    background: #f9fafb;
    border: 1px dashed #e5e7eb;
    border-radius: 10px;
}
/* /Module/Apy/Shared/Feedback/NotificationsDrawerContent.razor.rz.scp.css */
/* Tampilan daftar notifikasi (drawer). Ditulis sebagai CSS biasa, BUKAN
   utility Tailwind, karena bundle Metronic (assets/css/styles.css) hanya
   memuat kelas yang sudah terpakai saat bundle-nya di-build - utility baru
   diam-diam tidak berefek.

   Rule .notif-root/.notif-scroll di bawah menggantikan blok <style> inline
   yang sebelumnya ada di NotificationsDrawer.razor dan menargetkan
   #notifications_tabs. Blok itu ikut dihapus karena id-nya sudah tidak ada. */

.notif-root[b-dzjvvkwbrj] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;   /* wajib: tanpa ini anak flex tidak boleh menyusut dan panel jadi meluber */
    overflow: hidden;
}

.notif-scroll[b-dzjvvkwbrj] {
    flex: 1 1 0%;
    min-height: 0;
    overflow-y: auto;
    /* Cegah scroll "menular" ke halaman di belakang drawer saat daftar mentok. */
    overscroll-behavior: contain;
}

/* ---------- Satu baris notifikasi ---------- */
.notif-item[b-dzjvvkwbrj] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    /* Padding kiri/kanan disamakan dengan header drawer (px-5) supaya judul
       notifikasi lurus dengan tulisan "Notifications" di atasnya. */
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border, #eef1f4);
    transition: background-color .15s ease;
}

    /* Garis terakhir dihilangkan agar tidak ada border menggantung di ujung daftar. */
    .notif-item:last-child[b-dzjvvkwbrj] {
        border-bottom: 0;
    }

    .notif-item:hover[b-dzjvvkwbrj] {
        background-color: rgb(0 0 0 / 0.02);
    }

.notif-title[b-dzjvvkwbrj] {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--foreground, #1f2937);
    overflow-wrap: anywhere;
}

/* ---------- Baris meta: waktu - pelaku - nomor RFP ---------- */
.notif-meta[b-dzjvvkwbrj] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.375rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--muted-foreground, #6b7280);
}

.notif-dot[b-dzjvvkwbrj] {
    flex: 0 0 auto;
    width: 3px;
    height: 3px;
    border-radius: 9999px;
    background-color: currentColor;
    opacity: 0.5;
}

.notif-ref[b-dzjvvkwbrj] {
    color: var(--primary, #1460b3);
    font-weight: 600;
}

/* ---------- Isi pesan ---------- */
.notif-body[b-dzjvvkwbrj] {
    margin-top: 0.125rem;
    padding: 0.75rem 0.875rem;
    border-radius: 0.5rem;
    background-color: var(--muted, #f6f7f9);
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--secondary-foreground, #4b5563);
    /* Pesan bisa memuat nomor dokumen panjang tanpa spasi - paksa bungkus
       supaya tidak melebarkan drawer. */
    overflow-wrap: anywhere;
}

.notif-flag[b-dzjvvkwbrj] {
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    background-color: color-mix(in srgb, var(--primary, #1460b3) 10%, transparent);
    color: var(--primary, #1460b3);
    font-size: 0.6875rem;
    font-weight: 600;
}

.notif-actions[b-dzjvvkwbrj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 1.75rem;
    margin-top: 0.125rem;
}

.notif-open[b-dzjvvkwbrj] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: auto;
    border: 0;
    padding: 0.25rem 0;
    background: transparent;
    color: var(--primary, #1460b3);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
}

.notif-open:hover[b-dzjvvkwbrj] {
    text-decoration: underline;
}

.notif-open:focus-visible[b-dzjvvkwbrj] {
    border-radius: 0.25rem;
    outline: 2px solid var(--primary, #1460b3);
    outline-offset: 2px;
}

/* ---------- Status kosong / memuat / gagal ---------- */
.notif-state[b-dzjvvkwbrj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2.5rem 1.25rem;
    text-align: center;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--muted-foreground, #6b7280);
}

    .notif-state-empty i[b-dzjvvkwbrj] {
        font-size: 2.25rem;
        opacity: 0.3;
    }

.notif-state-error[b-dzjvvkwbrj] {
    color: var(--destructive, #b00020);
}
/* /Module/Apy/Shared/Feedback/RfpReviewCommentsDrawer.razor.rz.scp.css */
/* ---------- Komentar & Catatan Review (slide-in chat drawer) ---------- */
.rc-overlay[b-gpzhpi17bt] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .35);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
    z-index: 1000;
}

.rc-overlay.show[b-gpzhpi17bt] {
    opacity: 1;
    pointer-events: auto;
}

.rc-drawer[b-gpzhpi17bt] {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 460px;
    max-width: 92vw;
    background: #fff;
    box-shadow: -12px 0 40px rgba(15, 23, 42, .18);
    transform: translateX(100%);
    transition: transform .28s ease;
    z-index: 1001;
    display: flex;
    flex-direction: column;
}

.rc-drawer.show[b-gpzhpi17bt] {
    transform: translateX(0);
}

.rc-head[b-gpzhpi17bt] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid #e2e8f0;
}

.rc-head h2[b-gpzhpi17bt] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #0f172a;
}

.rc-sub[b-gpzhpi17bt] {
    margin-top: 2px;
    font-size: .78rem;
    color: #64748b;
}

.rc-close[b-gpzhpi17bt] {
    border: 0;
    background: transparent;
    font-size: 1.4rem;
    line-height: 1;
    color: #64748b;
    cursor: pointer;
    padding: 0 4px;
}

.rc-close:hover[b-gpzhpi17bt] {
    color: #0f172a;
}

/* ---------- Catatan verifikasi ---------- */
.rc-notes[b-gpzhpi17bt] {
    padding: 12px 18px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.rc-notes-title[b-gpzhpi17bt] {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #64748b;
    margin-bottom: 6px;
}

.rc-note[b-gpzhpi17bt] {
    display: flex;
    gap: 8px;
    font-size: .82rem;
    color: #0f172a;
    padding: 2px 0;
}

.rc-note-label[b-gpzhpi17bt] {
    flex: 0 0 84px;
    color: #64748b;
}

/* ---------- Percakapan ---------- */
.rc-body[b-gpzhpi17bt] {
    flex: 1;
    overflow-y: auto;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: #f1f5f9;
}

.rc-empty[b-gpzhpi17bt] {
    margin: auto;
    text-align: center;
    font-size: .85rem;
    color: #64748b;
}

.rc-bubble-row[b-gpzhpi17bt] {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}

.rc-bubble-row.self[b-gpzhpi17bt] {
    justify-content: flex-end;
}

.rc-avatar[b-gpzhpi17bt] {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #cbd5e1;
    color: #0f172a;
    font-size: .74rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rc-bubble[b-gpzhpi17bt] {
    max-width: 78%;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px 12px 12px 4px;
    padding: 8px 10px;
}

.rc-bubble-row.self .rc-bubble[b-gpzhpi17bt] {
    background: #dcfce7;
    border-color: #bbf7d0;
    border-radius: 12px 12px 4px 12px;
}

.rc-bubble-head[b-gpzhpi17bt] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 2px;
}

.rc-author[b-gpzhpi17bt] {
    font-size: .78rem;
    font-weight: 600;
    color: #0f172a;
}

.rc-role[b-gpzhpi17bt] {
    font-size: .68rem;
    color: #64748b;
    background: #f1f5f9;
    border-radius: 999px;
    padding: 1px 6px;
}

.rc-docref[b-gpzhpi17bt] {
    font-size: .72rem;
    color: #0369a1;
    margin-bottom: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rc-message[b-gpzhpi17bt] {
    font-size: .85rem;
    color: #0f172a;
    white-space: pre-wrap;
    word-break: break-word;
}

.rc-time[b-gpzhpi17bt] {
    margin-top: 3px;
    font-size: .68rem;
    color: #94a3b8;
    text-align: right;
}

/* ---------- Kotak kirim ---------- */
.rc-composer[b-gpzhpi17bt] {
    border-top: 1px solid #e2e8f0;
    padding: 10px 18px 14px;
    background: #fff;
}

.rc-composer-disabled[b-gpzhpi17bt] {
    font-size: .78rem;
    color: #64748b;
    text-align: center;
}

.rc-error[b-gpzhpi17bt] {
    font-size: .76rem;
    color: #b91c1c;
    margin-bottom: 6px;
}

.rc-composer-row[b-gpzhpi17bt] {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}

.rc-input[b-gpzhpi17bt] {
    flex: 1;
    resize: none;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: .85rem;
    font-family: inherit;
    color: #0f172a;
}

.rc-input:focus[b-gpzhpi17bt] {
    outline: none;
    border-color: #70BE45;
    box-shadow: 0 0 0 3px rgba(112, 190, 69, .15);
}

.rc-send[b-gpzhpi17bt] {
    flex: 0 0 auto;
    border: 0;
    border-radius: 8px;
    background: #70BE45;
    color: #fff;
    font-size: .82rem;
    font-weight: 600;
    padding: 9px 16px;
    cursor: pointer;
}

.rc-send:disabled[b-gpzhpi17bt] {
    background: #cbd5e1;
    cursor: not-allowed;
}
/* /Module/Apy/Shared/Field/CurrencyInput.razor.rz.scp.css */
.currency-input-wrapper[b-nyj4wb91gq] {
    display: block;
    width: 100%;
    min-width: 0;
}

.currency-label[b-nyj4wb91gq] {
    display: block;
    font-size: 0.8125rem;
    font-weight: 700;
    margin-bottom: 2px;
    color: #1a1a1a;
}

.currency-label.required[b-nyj4wb91gq]::after {
    content: " *";
    color: var(--app-error, #dc3545);
}

.currency-input[b-nyj4wb91gq] {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 12px;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: #1a1a1a;
    background-color: #fff;
    border: 1px solid var(--app-border, #ccc);
    border-radius: 4px;
    outline: none;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.currency-input:focus[b-nyj4wb91gq] {
    border-color: var(--app-primary, #0066cc);
    box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.25);
}

.currency-input:disabled[b-nyj4wb91gq] {
    background-color: #f5f5f5;
    opacity: 0.7;
    cursor: not-allowed;
}

.currency-input.invalid[b-nyj4wb91gq] {
    border-color: var(--app-error, #dc3545);
}

.currency-input.invalid:focus[b-nyj4wb91gq] {
    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.25);
}

.currency-error[b-nyj4wb91gq] {
    display: block;
    width: 100%;
    margin-top: 4px;
    color: #b42318;
    font-size: 0.78rem;
    line-height: 1.25;
}
/* /Module/Apy/Shared/Field/IgniteDecimalField.razor.rz.scp.css */
igc-input[b-y70xau6ouh]::part(label) {
    font-weight: 700;
}

igc-input[required][b-y70xau6ouh]::part(label) {
    color: var(--app-error);
}
/* /Module/Apy/Shared/Field/IgniteSelectField.razor.rz.scp.css */
igc-select[b-mqj4qu8gec]::part(label) {
    font-weight: 700;
}

igc-select[required][invalid][b-mqj4qu8gec]::part(label) {
    color: var(--app-error);
}
igc-select[invalid][b-mqj4qu8gec] {
    --ig-input-border-color: var(--app-error, #dc2626);
    --ig-input-focus-border-color: var(--app-error, #dc2626);
    --ig-input-hover-border-color: var(--app-error, #dc2626);
}

igc-select[invalid][b-mqj4qu8gec]::part(label) {
    color: var(--app-error, #dc2626);
}

igc-select[invalid]:focus-within[b-mqj4qu8gec] {
    filter: drop-shadow(0 0 0.2rem rgba(220, 38, 38, 0.16));
}
/* /Module/Apy/Shared/Field/IgniteTextareaField.razor.rz.scp.css */
igc-textarea[b-5a0rk790n0]::part(label) {
    font-weight: 700;
}

igc-textarea[required][invalid][b-5a0rk790n0]::part(label) {
    color: var(--app-error);
}
igc-textarea[invalid][b-5a0rk790n0] {
    --ig-input-border-color: var(--app-error, #dc2626);
    --ig-input-focus-border-color: var(--app-error, #dc2626);
    --ig-input-hover-border-color: var(--app-error, #dc2626);
}

igc-textarea[invalid][b-5a0rk790n0]::part(label) {
    color: var(--app-error, #dc2626);
}

igc-textarea[invalid]:focus-within[b-5a0rk790n0] {
    filter: drop-shadow(0 0 0.2rem rgba(220, 38, 38, 0.16));
}
/* /Module/Apy/Shared/Field/IgniteTextField.razor.rz.scp.css */
igc-input[b-diqb6lleq0]::part(label) {
    font-weight: 700;
}

igc-input[required][invalid][b-diqb6lleq0]::part(label) {
    color: var(--app-error);
}
igc-input[invalid][b-diqb6lleq0] {
    --ig-input-border-color: var(--app-error, #dc2626);
    --ig-input-focus-border-color: var(--app-error, #dc2626);
    --ig-input-hover-border-color: var(--app-error, #dc2626);
}

igc-input[invalid][b-diqb6lleq0]::part(label) {
    color: var(--app-error, #dc2626);
}

igc-input[invalid]:focus-within[b-diqb6lleq0] {
    filter: drop-shadow(0 0 0.2rem rgba(220, 38, 38, 0.16));
}
/* /Module/Mdt/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-laiuwqtyh6] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-laiuwqtyh6] {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row[b-laiuwqtyh6] {
    min-height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-laiuwqtyh6] {
    font-size: 1.1rem;
}

.bi[b-laiuwqtyh6] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-laiuwqtyh6] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-laiuwqtyh6] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-laiuwqtyh6] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.nav-item[b-laiuwqtyh6] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-laiuwqtyh6] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-laiuwqtyh6] {
        padding-bottom: 1rem;
    }

    .nav-item[b-laiuwqtyh6]  .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

.nav-item[b-laiuwqtyh6]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-laiuwqtyh6]  .nav-link:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

.nav-scrollable[b-laiuwqtyh6] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-laiuwqtyh6] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-laiuwqtyh6] {
        display: none;
    }

    .nav-scrollable[b-laiuwqtyh6] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Module/Pci/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-hro7i7bhzg] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-hro7i7bhzg] {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row[b-hro7i7bhzg] {
    min-height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-hro7i7bhzg] {
    font-size: 1.1rem;
}

.bi[b-hro7i7bhzg] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-hro7i7bhzg] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-hro7i7bhzg] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-hro7i7bhzg] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.nav-item[b-hro7i7bhzg] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-hro7i7bhzg] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-hro7i7bhzg] {
        padding-bottom: 1rem;
    }

    .nav-item[b-hro7i7bhzg]  .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

.nav-item[b-hro7i7bhzg]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-hro7i7bhzg]  .nav-link:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

.nav-scrollable[b-hro7i7bhzg] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-hro7i7bhzg] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-hro7i7bhzg] {
        display: none;
    }

    .nav-scrollable[b-hro7i7bhzg] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Module/Uar/Feature/Portal/Page/Home.razor.rz.scp.css */
/* Scoped to Home.razor. Variables live on .dash-page (not :root) to survive
   Blazor CSS isolation - same convention used by pgVerificationList.razor.css. */
.dash-page[b-8r9p8lcwrf] {
    --bg: #f4f6f9;
    --card: #ffffff;
    --ink: #1f2937;
    --muted: #6b7280;
    --label: #6b7280;
    --line: #eef1f4;
    --radius: 16px;
    --shadow: 0 1px 2px rgba(16,24,40,.04), 0 8px 24px rgba(16,24,40,.05);
    --blue: #2563eb;
    --blue-strong: #1d4ed8;
    --blue-soft: #eaf2fe;
    --green: #16a34a;
    --green-strong: #15803d;
    --green-soft: #edfaf0;
    --orange: #e0901a;
    --orange-soft: #fdf3e3;
    --purple: #7c3aed;
    --purple-strong: #6d28d9;
    --purple-soft: #f1eafe;
    --red: #b00020;
    color: var(--ink);
    line-height: 1.45;
    max-width: 1280px;
    margin: 0 auto;
    padding: 4px 4px 40px;
    -webkit-font-smoothing: antialiased;
}

/* ---------- Header sapaan + aksen dekoratif ---------- */
.dash-head[b-8r9p8lcwrf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.dash-greet[b-8r9p8lcwrf] {
    min-width: 0; /* biar teks panjang membungkus, bukan mendorong aksen keluar */
}

/* Bobot dan font sapaan TIDAK diatur di sini, melainkan sebagai style inline
   di Home.razor. Percobaan sebelumnya memakai aturan di file ini dan namanya
   tetap tidak tebal: bundle CSS isolation di proyek ini beberapa kali terbukti
   tidak ikut regenerate pada build inkremental, dan gagalnya tidak bersuara -
   teks tetap tampil, hanya gayanya yang tidak berubah. Style inline ikut dalam
   markup sehingga tidak bisa tertinggal versi lama. */
.dash-head h1[b-8r9p8lcwrf] {
    margin: 0 0 4px;
    font-size: 26px;
    letter-spacing: -0.01em;
}

.dash-head p[b-8r9p8lcwrf] {
    margin: 0 0 22px;
    color: var(--muted);
    font-size: 14px;
}

/* Aksen brand di kanan header. Dipasang sebagai background (bukan <img>)
   supaya rasionya bisa dipangkas bebas lewat background-size tanpa
   menggepengkan gambar, dan tidak pernah menangkap klik. */
.dash-head-art[b-8r9p8lcwrf] {
    flex: 0 0 auto;
    width: 300px;
    height: 76px;
    margin-bottom: 18px;
    background-image: url('/assets/media/app/dashboard-accent.svg');
    background-repeat: no-repeat;
    background-position: right center;
    background-size: contain;
    pointer-events: none;
}

/* Di layar sempit aksen hanya memakan ruang teks - sembunyikan saja. */
@media (max-width: 900px) {
    .dash-head-art[b-8r9p8lcwrf] {
        display: none;
    }
}

/* ---------- Grid layout ---------- */
.dash-grid[b-8r9p8lcwrf] {
    display: grid;
    grid-template-columns: minmax(280px, 360px) 1fr;
    grid-template-areas:
        "bento    announce"
        "highlights trend";
    gap: 20px;
}

.dash-bento[b-8r9p8lcwrf] {
    grid-area: bento;
}

.announce-card[b-8r9p8lcwrf] {
    grid-area: announce;
}

.highlights-card[b-8r9p8lcwrf] {
    grid-area: highlights;
}

.trend-card[b-8r9p8lcwrf] {
    grid-area: trend;
}

@media (max-width: 900px) {
    .dash-grid[b-8r9p8lcwrf] {
        grid-template-columns: 1fr;
        grid-template-areas:
            "bento"
            "announce"
            "highlights"
            "trend";
    }
}

/* ---------- Shared card shell ---------- */
.card[b-8r9p8lcwrf] {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 20px;
}

.card-head[b-8r9p8lcwrf] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 14px;
}

    .card-head h2[b-8r9p8lcwrf] {
        margin: 0;
        font-size: 15px;
        font-weight: 700;
    }

.kebab-btn[b-8r9p8lcwrf] {
    border: none;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    line-height: 0;
}

    .kebab-btn:hover[b-8r9p8lcwrf] {
        background: var(--bg);
    }

/* ---------- Bento tiles (2x2) ---------- */
.dash-bento[b-8r9p8lcwrf] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    height: 100%;
}

.bento-tile[b-8r9p8lcwrf] {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    text-decoration: none;
    color: inherit;
    transition: transform .12s ease, box-shadow .12s ease;
}

    .bento-tile:hover[b-8r9p8lcwrf] {
        transform: translateY(-2px);
        box-shadow: 0 4px 10px rgba(16,24,40,.08), 0 12px 28px rgba(16,24,40,.07);
    }

.bento-icon[b-8r9p8lcwrf] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .bento-icon svg[b-8r9p8lcwrf] {
        width: 18px;
        height: 18px;
    }

.accent-blue[b-8r9p8lcwrf] {
    background: var(--blue-soft);
    color: var(--blue-strong);
}

.accent-green[b-8r9p8lcwrf] {
    background: var(--green-soft);
    color: var(--green-strong);
}

.accent-orange[b-8r9p8lcwrf] {
    background: var(--orange-soft);
    color: var(--orange);
}

.accent-purple[b-8r9p8lcwrf] {
    background: var(--purple-soft);
    color: var(--purple-strong);
}

.bento-count[b-8r9p8lcwrf] {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.bento-label[b-8r9p8lcwrf] {
    font-size: 13px;
    color: var(--muted);
}

/* ---------- Announcements card ---------- */
.announce-head[b-8r9p8lcwrf] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}

.announce-badge[b-8r9p8lcwrf] {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--blue-soft);
    color: var(--blue-strong);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.announce-head h2[b-8r9p8lcwrf] {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
}

.announce-head p[b-8r9p8lcwrf] {
    margin: 2px 0 0;
    font-size: 13px;
    color: var(--muted);
}

.announce-list[b-8r9p8lcwrf] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.announce-item[b-8r9p8lcwrf] {
    display: flex;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
}

    .announce-item:last-child[b-8r9p8lcwrf] {
        border-bottom: none;
        padding-bottom: 0;
    }

.announce-tag[b-8r9p8lcwrf] {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    padding: 3px 8px;
    border-radius: 999px;
    height: fit-content;
    white-space: nowrap;
}

.tag-blue[b-8r9p8lcwrf] {
    background: var(--blue-soft);
    color: var(--blue-strong);
}

.tag-orange[b-8r9p8lcwrf] {
    background: var(--orange-soft);
    color: var(--orange);
}

.tag-purple[b-8r9p8lcwrf] {
    background: var(--purple-soft);
    color: var(--purple-strong);
}

.announce-title[b-8r9p8lcwrf] {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 3px;
}

/* .announce-excerpt and its nested p/ol/ul/li rules live in the global
   wwwroot/app.css instead - see the comment there for why. */

.announce-date[b-8r9p8lcwrf] {
    font-size: 12px;
    color: #9aa3b2;
}

.announce-state[b-8r9p8lcwrf] {
    margin: 4px 0;
    font-size: 13px;
    color: var(--muted);
}

    .announce-state.announce-state-error[b-8r9p8lcwrf] {
        color: #b00020;
    }

.announce-more[b-8r9p8lcwrf] {
    display: inline-block;
    margin-top: 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--blue-strong);
    text-decoration: none;
}

    .announce-more:hover[b-8r9p8lcwrf] {
        text-decoration: underline;
    }

/* ---------- Highlights card ---------- */
.hl-total-label[b-8r9p8lcwrf] {
    font-size: 13px;
    color: var(--muted);
}

.hl-total-row[b-8r9p8lcwrf] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 4px 0 16px;
}

.hl-total-value[b-8r9p8lcwrf] {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.hl-badge[b-8r9p8lcwrf] {
    font-size: 12px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
}

.hl-badge-up[b-8r9p8lcwrf] {
    background: var(--green-soft);
    color: var(--green-strong);
}

.hl-segbar[b-8r9p8lcwrf] {
    display: flex;
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--bg);
    margin-bottom: 12px;
}

.hl-seg-blue[b-8r9p8lcwrf] {
    background: var(--blue);
}

.hl-seg-green[b-8r9p8lcwrf] {
    background: var(--green);
}

.hl-seg-orange[b-8r9p8lcwrf] {
    background: var(--orange);
}

.hl-seg-purple[b-8r9p8lcwrf] {
    background: var(--purple);
}

.hl-legend[b-8r9p8lcwrf] {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 18px;
}

.hl-legend-item[b-8r9p8lcwrf] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--muted);
}

.hl-dot[b-8r9p8lcwrf] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.dot-blue[b-8r9p8lcwrf] {
    background: var(--blue);
}

.dot-green[b-8r9p8lcwrf] {
    background: var(--green);
}

.dot-orange[b-8r9p8lcwrf] {
    background: var(--orange);
}

.dot-purple[b-8r9p8lcwrf] {
    background: var(--purple);
}

.hl-rows[b-8r9p8lcwrf] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.hl-row[b-8r9p8lcwrf] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
}

.hl-row-icon[b-8r9p8lcwrf] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.hl-row-name[b-8r9p8lcwrf] {
    flex: 1 1 auto;
    color: var(--ink);
    font-weight: 500;
}

.hl-row-value[b-8r9p8lcwrf] {
    font-weight: 600;
}

.hl-row-change[b-8r9p8lcwrf] {
    min-width: 62px;
    text-align: right;
    font-weight: 600;
    font-size: 12px;
}

.hl-up[b-8r9p8lcwrf] {
    color: var(--green-strong);
}

.hl-down[b-8r9p8lcwrf] {
    color: var(--red);
}

/* ---------- Trend (chart) card ---------- */
.trend-controls[b-8r9p8lcwrf] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.trend-toggle[b-8r9p8lcwrf] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--muted);
    cursor: not-allowed;
}

    .trend-toggle input[b-8r9p8lcwrf] {
        display: none;
    }

.trend-toggle-track[b-8r9p8lcwrf] {
    width: 30px;
    height: 17px;
    border-radius: 999px;
    background: var(--line);
    position: relative;
    display: inline-block;
}

.trend-toggle-thumb[b-8r9p8lcwrf] {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16,24,40,.2);
}

.trend-period[b-8r9p8lcwrf] {
    font-size: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 5px 10px;
    color: var(--ink);
    background: var(--card);
}

.trend-chart[b-8r9p8lcwrf] {
    margin-top: 6px;
}

.trend-svg[b-8r9p8lcwrf] {
    width: 100%;
    height: 220px;
    display: block;
    overflow: visible;
}

.trend-gridline[b-8r9p8lcwrf] {
    stroke: var(--line);
    stroke-width: 1;
}

/* Legenda grafik. Memakai .hl-dot + .dot-* yang sudah ada di kartu Highlights
   supaya satu perubahan warna berlaku untuk keduanya. */
.trend-legend[b-8r9p8lcwrf] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
    margin-top: 4px;
    font-size: 12px;
    color: var(--muted);
}

.trend-legend-item[b-8r9p8lcwrf] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

/* Bentuk garis dipisah dari warnanya: .trend-line mengatur bentuk, kelas
   .trend-line-* hanya menimpa stroke. */
.trend-line[b-8r9p8lcwrf] {
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.trend-line-blue[b-8r9p8lcwrf] {
    stroke: var(--blue);
}

.trend-line-green[b-8r9p8lcwrf] {
    stroke: var(--green);
}

.trend-line-orange[b-8r9p8lcwrf] {
    stroke: var(--orange);
}

.trend-line-purple[b-8r9p8lcwrf] {
    stroke: var(--purple);
}

.trend-dot[b-8r9p8lcwrf] {
    fill: var(--card);
    stroke-width: 2;
}

.trend-dot-blue[b-8r9p8lcwrf] {
    stroke: var(--blue);
}

.trend-dot-green[b-8r9p8lcwrf] {
    stroke: var(--green);
}

.trend-dot-orange[b-8r9p8lcwrf] {
    stroke: var(--orange);
}

.trend-dot-purple[b-8r9p8lcwrf] {
    stroke: var(--purple);
}

.trend-x-labels[b-8r9p8lcwrf] {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    padding: 0 2px;
}

    .trend-x-labels span[b-8r9p8lcwrf] {
        font-size: 11px;
        color: var(--muted);
    }
/* /Module/Uar/Feature/Portal/Page/Me.razor.rz.scp.css */
/* Grid "Informasi Akun".

   Nilai-nilainya SENGAJA disalin persis dari .summary milik
   Component/Page/Verification/Page/VerificationDetails.razor.css (bagian
   "Header data summary grid"), supaya kedua panel terlihat sama: padding,
   jarak antar sel, ukuran/tebal huruf label, dan warna nilainya.

   Disalin, bukan di-import, karena CSS isolation Blazor membatasi berkas .css
   ke komponennya masing-masing - tidak ada cara mengacu ke aturan milik
   komponen lain. Kalau .summary di halaman verifikasi diubah, berkas ini perlu
   ikut disesuaikan.

   Warna ditulis sebagai nilai literal, bukan var(--line)/var(--label): kedua
   variabel itu didefinisikan pada .pay-page di halaman verifikasi dan tidak
   terjangkau dari sini. */
.summary[b-pf28jt2sc5] {
    background: #fafbfc;
    border: 1px solid #e3e7ec;
    border-radius: 10px;
    padding: 22px 24px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px 28px;
}

    .summary .k[b-pf28jt2sc5] {
        font-size: 0.875rem;
        font-weight: 700;
        letter-spacing: .03em;
        color: #6b7280;
        text-transform: uppercase;
        margin-bottom: 6px;
    }

    .summary .v[b-pf28jt2sc5] {
        font-size: 14px;
        color: #111827;
    }

/* Breakpoint 980px sama dengan halaman verifikasi. */
@media (max-width: 980px) {
    .summary[b-pf28jt2sc5] {
        grid-template-columns: 1fr 1fr;
    }
}
/* /Module/Uar/Feature/Portal/Page/Profile.razor.rz.scp.css */
/* Grid "Informasi Akun".

   Nilainya disalin dari Me.razor.css supaya panel identitas di /profile dan /me
   terlihat sama persis. Disalin, bukan di-import: CSS isolation Blazor membatasi
   berkas .css ke komponennya masing-masing, tidak ada cara mengacu ke aturan
   milik komponen lain. Kalau .summary di Me.razor.css diubah, berkas ini perlu
   ikut disesuaikan. */
.summary[b-pf5wawetgg] {
    background: #fafbfc;
    border: 1px solid #e3e7ec;
    border-radius: 10px;
    padding: 22px 24px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px 28px;
}

    .summary .k[b-pf5wawetgg] {
        font-size: 0.875rem;
        font-weight: 700;
        letter-spacing: .03em;
        color: #6b7280;
        text-transform: uppercase;
        margin-bottom: 6px;
    }

    .summary .v[b-pf5wawetgg] {
        font-size: 14px;
        color: #111827;
        word-break: break-word;
    }

@media (max-width: 1280px) {
    .summary[b-pf5wawetgg] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 980px) {
    .summary[b-pf5wawetgg] {
        grid-template-columns: 1fr 1fr;
    }
}
/* /Module/Uar/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-2imd3gmeks] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-2imd3gmeks] {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row[b-2imd3gmeks] {
    min-height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-2imd3gmeks] {
    font-size: 1.1rem;
}

.bi[b-2imd3gmeks] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-2imd3gmeks] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-2imd3gmeks] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-2imd3gmeks] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.nav-item[b-2imd3gmeks] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-2imd3gmeks] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-2imd3gmeks] {
        padding-bottom: 1rem;
    }

    .nav-item[b-2imd3gmeks]  .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

.nav-item[b-2imd3gmeks]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-2imd3gmeks]  .nav-link:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

.nav-scrollable[b-2imd3gmeks] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-2imd3gmeks] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-2imd3gmeks] {
        display: none;
    }

    .nav-scrollable[b-2imd3gmeks] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}