/* /Component/Layout/MainLayout.razor.rz.scp.css */
/* Soft, tilted brand 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/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, refresh right */
.documents-header-row:first-child[b-ymh6vb9dbs] {
    justify-content: space-between;
}

.documents-header-actions[b-ymh6vb9dbs] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    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;
}



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

.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; }
}
/* /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(2, 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: 8px;
    min-height: 44px;
    min-width: 0;
    width: 100%;
    padding: 11px 14px;
    border-radius: 10px;
    border: 1px solid #d7dee8;
    background: #ffffff;
    color: #1f6feb;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    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-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: 1rem;
}

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

.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;
    }
}
/* 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;
    }
}
/* /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;
}

/* 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] {
        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-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(2, 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: 8px;
    min-height: 44px;
    min-width: 0;
    width: 100%;
    padding: 11px 14px;
    border-radius: 10px;
    border: 1px solid #d7dee8;
    background: #ffffff;
    color: #1f6feb;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    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-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: 1rem;
}

.rfp-internal-documents-current-action span[b-862i1dt17o] {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

@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;
    }
}
/* /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;
}

.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;
    }
}
/* /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 */
/* Scoped to PayDocument.razor. CSS variables live on .pay-page (not :root)
   so they survive Blazor's CSS isolation. */
.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;
    /* Sebelumnya `max-width:1680px; margin:0 auto`. Di monitor lebar itu
       menyisakan pita kosong di kiri-kanan sementara grid G/L di dalamnya
       justru harus digeser horizontal. Lebar halaman sekarang mengikuti
       .kt-container-fluid milik MainLayout - padding tepi tetap diurus
       container itu, bukan di sini. */
    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;
    }

/* ---------- Header banner ---------- */

/* Breadcrumb + judul RFP sekarang duduk di dalam .card (.page-head) supaya
   sama dengan halaman Purchase Requisition. Margin bawah .crumbs dan .banner
   dinolkan/dikecilkan di dalam card karena jarak ke tepi sudah diurus padding
   card - kalau tidak, bagian bawah card jadi menggantung 20px. */
.page-head[b-5m3uo638se] {
    margin-bottom: 20px;
}

    .page-head .crumbs[b-5m3uo638se] {
        margin-bottom: 12px;
    }

    .page-head .banner[b-5m3uo638se] {
        margin-bottom: 0;
    }

/* Breadcrumb (kiri) + status pill (kanan) dalam satu baris. Margin bawah
   .crumbs dinolkan di sini dan dipindah ke pembungkusnya, supaya pill dan
   breadcrumb benar-benar sejajar secara vertikal. */
.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;
    /* stretch (bukan flex-start): banner-actions perlu mengisi tinggi penuh
       baris ini supaya justify-content:space-between di dalamnya bisa
       menahan tombol Document Tracking / Return Document ke tepi BAWAH,
       sejajar dengan tepi bawah card header - bukan menempel di atas,
       persis di bawah status pill. */
    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;
        /* Flex + baseline-nya diurus align-items:center, bukan vertical-align:
           ikonnya SVG setinggi 1em dan menyelaraskannya lewat vertical-align
           menghasilkan geseran 1-2px yang berbeda antar font. */
        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;
}

    /* Colour variants by document status */
    .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;
    }

/* ---------- Tabs ---------- */

/* Tab strip + isi tab = SATU card (.tab-shell).

   .tab-shell sendiri padding:0 karena paddingnya dibagi dua: .tab-strip untuk
   baris tab, .tab-body untuk konten. Sengaja TIDAK memakai overflow:hidden
   walaupun card punya radius - dropdown auto-suggest G/L (.gl-ac-list) adalah
   elemen absolut yang menjorok keluar area grid dan akan terpotong. */
/* `.card.tab-shell`, bukan `.tab-shell` saja: aturan .card { padding: 26px 28px }
   ada lebih bawah di file ini dan specificity-nya sama, jadi padding:0 akan
   kalah kalau selektornya cuma satu class. */
.card.tab-shell[b-5m3uo638se] {
    padding: 0;
    margin-bottom: 20px;
}

.tab-strip[b-5m3uo638se] {
    /* Padding atas-bawah simetris: barisan tab sekarang berupa kontrol
       segmented yang berdiri sendiri, bukan tab berindikator yang harus
       menempel ke garis bawah strip. */
    padding: 14px 24px;
    border-bottom: 1px solid var(--line);
    /* Radius atas card diikuti supaya sudut strip tidak menonjol keluar
       bingkai saat nanti diberi warna latar. */
    border-radius: var(--radius) var(--radius) 0 0;
}

    .tab-strip .tabs[b-5m3uo638se] {
        margin: 0;
    }

.tab-body[b-5m3uo638se] {
    padding: 26px 28px;
}

/* Card lama di dalam tab di-flatten jadi section biasa. Class .card-nya tetap
   ada di markup karena selektor grid (.card ::deep igc-grid) bergantung
   padanya - yang dimatikan hanya bingkainya. */
.tab-body .card[b-5m3uo638se] {
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

    /* Pemisah antar section: garis tipis, bukan bingkai baru. */
    .tab-body .card + .card[b-5m3uo638se] {
        margin-top: 24px;
        padding-top: 24px;
        border-top: 1px solid var(--line);
    }

/* Footer aksi (Back / Save Draft / Release) sudah punya border-top sendiri;
   di dalam card tunggal ia jadi penutup card, jadi jaraknya sedikit dirapatkan
   ke tepi bawah .tab-body. */
.tab-body .footer[b-5m3uo638se] {
    margin-top: 24px;
}

/* Kontrol "segmented": alas abu muda dengan satu pill putih menandai tab aktif.
   Menggantikan barisan tab berindikator garis bawah.

   GRID, bukan flex, dan itu yang membuat lebar tiap pill SAMA. grid-auto-columns:
   1fr membagi lebar rata ke semua kolom, sehingga setiap kolom selebar tab
   dengan label terpanjang ("Transfer List") - flex + flex:1 tidak menjamin ini
   karena basis flex ikut menimbang panjang teks masing-masing.

   width: max-content menahan wadahnya memeluk isi; tanpa itu, kolom 1fr akan
   memanjang mengikuti lebar card dan pill-nya jadi sangat lebar di monitor
   besar. max-width + overflow-x menjaganya tetap terpakai di layar sempit
   alih-alih menjebol lebar card. */
.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;
    /* Ikon + label dipusatkan: pill-nya lebih lebar dari teksnya sendiri karena
       lebarnya diseragamkan, jadi teks rata kiri akan terlihat menggantung. */
    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;
        /* Putih semi-transparan, bukan var(--card): pill aktif yang putih pekat
           harus tetap terbaca sebagai satu-satunya yang terpilih. */
        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);
    }

/* ---------- Cards ---------- */
.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;
}

/* Keterangan satu baris di bawah judul card (tab Transfer List). Margin bawah
   .card-title dinolkan lewat aturan berpasangan di bawah supaya jaraknya tidak
   menganga saat keduanya dipakai bersama. */
.card-title + .card-subtitle[b-5m3uo638se] {
    margin: -12px 0 18px;
    font-size: 14px;
    color: var(--muted);
}

/* ---- IgbGrid styled to match the PgVerificationList grid ----
   Same token set as the list page: medium density, light header strip with a
   muted gray label, uniformly white rows (no zebra), neutral gray hover, and
   light row separators. The grid reads --ig-grid-* custom properties that
   inherit through its shadow DOM; font-family/size cascade from the host.
   New-row highlighting (RowStylesScript="NewRowStyles") still wins per row. */
.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; /* body cell text */
    border: 1px solid #eef1f4;
    border-radius: 10px; /* rounded corners (matches the card frame) */
    overflow: hidden; /* clip the header strip / rows to the radius */
    background: #fff;
    /* compact density → ~16px horizontal / ~13px vertical cell padding */
    --ig-size: var(--ig-size-medium, 2);
    /* Header: light strip, hairline bottom rule, muted gray label */
    --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;
    /* Body: white content, dark ink, light row separators */
    --ig-grid-content-background: #ffffff;
    --ig-grid-content-text-color: #1b1f2b;
    --ig-grid-row-border-color: #f0f2f5;
    /* No zebra striping - rows are uniformly white */
    --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;
    /* Hover: neutral gray wash */
    --ig-grid-row-hover-background: #f7f9fb;
    --ig-grid-row-hover-text-color: #1b1f2b;
    /* Selection / active cell kept subtle and on-brand */
    --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;
    /* Card supplies the outer frame - avoid a doubled grid border */
    --ig-grid-grid-border-color: transparent;
}

/* ---------- Forms ---------- */
.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-label textarea (Budget tab Description) ----------
   Plain <textarea>, not IgbTextarea: the animation relies on native
   :focus / :placeholder-shown CSS, which can't reach into an Ignite UI
   component's shadow DOM the way it can a normal element. */
.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;
    }

/* Sits in the placeholder's resting position until focus or content moves it up. */
.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; /* "cuts" a gap in the top border, standard floating-label trick */
}

.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-column tab layout ---------- */
.two-col[b-5m3uo638se] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
}

/* ---------- AI assistant box ---------- */
.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 toolbar (Add New / Delete) ---------- */
.grid-head[b-5m3uo638se] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* Accounting grid has no section-label, so add the gap the Tax tab gets from it. */
.grid-head-gap[b-5m3uo638se] {
    margin-bottom: 16px;
}

.grid-toolbar[b-5m3uo638se] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* --- Judul kolom komponen pada grid Transfer List KEPEGAWAIAN --------------
   Ignite memberi .igx-grid-th padding-inline 1.5rem dan membungkus template
   judul dalam <span class="igx-grid-th__title"> yang overflow:hidden. Latar
   warna template karena itu berhenti ~24px sebelum tepi sel, sehingga warnanya
   terbaca sebagai kotak mengambang, bukan sebagai pita kolom.

   Dibatasi dengan :has(.tf-kpg-head) - penanda yang dipasang
   KepegawaianHeaderScript - supaya HANYA sel bertemplate itu yang kehilangan
   padding. Kolom biasa di grid yang sama (Recipient, Bank, G/L Account) tetap
   perlu padding-nya, dan tetap perlu overflow:hidden agar ellipsis-nya jalan;
   menyapu seluruh .igx-grid-th akan merusak keduanya. */
.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 membatalkan pemotongan; align-self:stretch + height
       membuat span-nya setinggi sel, karena default-nya hanya setinggi teks
       dan warnanya akan menyisakan celah di atas-bawah. */
    overflow: visible;
    align-self: stretch;
    height: 100%;
}

/* --- Judul kolom SATU BARIS pada grid yang sama ----------------------------
   Tinggi baris header ditentukan kolom berjudul DUA baris (.tf-kpg-head, yang
   meregang setinggi sel). Judul satu baris - No, Recipient, Bank Account, Bank,
   Cost Center, Nilai, Penghasilan Netto - jadi punya ruang sisa di atasnya, dan
   Ignite meratakannya ke DASAR sel sehingga terbaca melayang di bawah.

   :not(:has(.tf-kpg-head)) menyisihkan judul dua baris: keduanya sudah
   align-self:stretch di aturan atas, dan flex-start akan membatalkan peregangan
   itu - warnanya kembali menyisakan celah, persis masalah yang aturan tadi
   perbaiki.

   align-self, bukan align-items pada .igx-grid-th: mekanisme yang sama dengan
   aturan di atas, jadi sudah terbukti berlaku pada struktur header Ignite di
   sini (span judul adalah flex item dari .igx-grid-th).

   Padding blok TIDAK ditambahkan - .igx-grid-th sudah punya sendiri, dan
   menambah lagi hanya akan mendorong judul satu baris turun kembali. */
.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;
    }

/* ---------- Tables ---------- */
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);
}

/* ---------- Dashed add row ---------- */
.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 Data + card Prioritas berdampingan ---------- */

/* align-items:stretch (default) sengaja dipertahankan: card kanan ikut setinggi
   Header Data, sehingga bagian bawah keduanya rata. */
.header-row[b-5m3uo638se] {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

    /* margin BLOK dinolkan untuk KEDUA card, dan margin-top-nya penting:
       aturan umum `.card + .card { margin-top: 22px }` ikut menyasar card kanan
       (ia memang .card yang langsung mengikuti .card lain), sehingga card kanan
       turun 22px dan kedua card tidak lagi sejajar. Di dalam .header-row jarak
       antar card diurus `gap`, bukan margin. */
    .header-row > .card[b-5m3uo638se] {
        margin-top: 0;
        margin-bottom: 0;
    }

    /* min-width:0 WAJIB pada anak flex yang berisi grid - tanpa itu lebar
       minimum isinya (16 tile .summary) memaksa card ini melebar dan mendorong
       card kanan keluar layar. */
    .header-row > .header-card[b-5m3uo638se] {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* 300px, bukan 264px: judul "Priority dan Due Date" pada 18px/700 hampir
       persis selebar ruang dalam card 264px (264 - padding 56 - border 2 =
       206px) dan akan terbelah dua baris. */
    .header-row > .header-side-card[b-5m3uo638se] {
        flex: 0 0 300px;
    }

/* Satu kolom, dua field bertumpuk. Kotak abu + bingkainya mengikuti .summary
   supaya kedua card terbaca sebagai satu keluarga. */
.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;
    /* Teks yang terlihat di kotak Priority BUKAN milik igc-select, melainkan
       igc-input yang bersarang DI DALAM shadow DOM-nya - dua lapis shadow.
       ::part() hanya menembus satu lapis, jadi aturan apa pun dari luar tidak
       akan pernah menjangkaunya.

       Aturan di shadow igc-input berbunyi:
           [part~="input"] { font-size: var(--ig-body-1-font-size); }
       dan variabel itu bernilai 1rem (= 14px).

       Custom property DIWARISI menembus batas shadow, jadi menyetel
       variabelnya di sini menjangkau kedua lapis sekaligus - satu-satunya
       jalan masuk yang tersedia, sekaligus yang paling bersih. Cakupannya
       terkunci di .header-side, jadi kontrol Ignite di tempat lain tidak
       terpengaruh. */
    --ig-body-1-font-size: 12px;
}

    /* 12px LITERAL, bukan rem, dan sengaja dipakai seragam untuk label, nilai,
       maupun teks di dalam kontrolnya. Mencampur px dan rem dalam satu blok
       persis yang dulu membuat Header Data terlihat tidak seragam; selama satu
       blok memakai satu satuan, hasilnya pasti sama. */
    .header-side .k[b-5m3uo638se] {
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .03em;
        color: var(--label);
        text-transform: uppercase;
        margin-bottom: 6px;
    }

    /* 0.875rem, satu satuan dengan .summary - lihat catatan di sana. */
    .header-side .v[b-5m3uo638se] {
        font-size: 12px;
        color: #111827;
    }

        .header-side .v.v-editable[b-5m3uo638se] {
            line-height: normal;
        }

/* Di layar sempit keduanya menumpuk - card 264px di samping grid yang sudah
   turun ke 2 kolom akan menyisakan lebar yang tidak terbaca untuk keduanya. */
@media (max-width: 1100px) {
    .header-row[b-5m3uo638se] {
        flex-direction: column;
    }

        .header-row > .header-side-card[b-5m3uo638se] {
            flex: 1 1 auto;
        }

    /* Melebar penuh, jadi dua field-nya lebih baik berdampingan daripada
       menyisakan ruang kosong di kanan. */
    .header-side[b-5m3uo638se] {
        grid-template-columns: 1fr 1fr;
    }
}

/* ---------- Header data summary grid ---------- */
.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;
    /* Diletakkan di WADAH, bukan di tiap tile: dari sini ia diwariskan ke .v,
       sementara .k tetap memakai letter-spacing-nya sendiri (.03em) karena
       aturan .summary .k lebih spesifik - dan label pun sekarang ikut memakai
       nilai yang sama, jadi seluruh teks Header Data satu tracking. */
    letter-spacing: -0.01rem;
}

    .summary .k[b-5m3uo638se] {
        font-size: 0.9rem;
        font-weight: 700;
        /* Ikut -0.01rem seperti .v, menggantikan .03em. Tracking positif itu
           kelaziman untuk teks huruf besar, tapi pada ukuran dan bobot label di
           sini hasilnya sudah dicek dan tetap terbaca. */
        letter-spacing: -0.01rem;
        color: var(--label);
        text-transform: uppercase;
        margin-bottom: 6px;
    }

    /* SATU satuan untuk seluruh teks Header Data - rem, tidak dicampur px.
       Sebelumnya label memakai rem sementara nilai memakai 14px literal;
       keduanya tampak setara kalau root font-size 16px, padahal aplikasi ini
       memakai 14px. Itu yang dulu membuat Amount Header (Gross) terlihat
       berbeda sendiri dari nilai di sebelahnya.

       0.875rem = 12,25px, dan berlaku untuk SEMUA .v tanpa kecuali. */
    .summary .v[b-5m3uo638se] {
        font-size: 0.875rem;
        color: #111827;
    }

        /* Tile yang isinya kontrol input (Priority, Due Date), bukan teks biasa.
           Kontrolnya sudah full-width lewat aturan igc-* di bawah; di sini hanya
           tinggi barisnya yang disamakan supaya tile teks dan tile input tetap
           sejajar dalam satu baris grid. */
        .summary .v.v-editable[b-5m3uo638se] {
            line-height: normal;
        }

    .summary .span-2[b-5m3uo638se] {
        grid-column: span 2;
    }

/* ---------- Footer ---------- */
.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 alerts (Budget release feedback). Success reuses the soft-green
   tokens already defined on .pay-page; error uses the app's existing red. */
.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;
    }

.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;
        }
}

/* Ignite UI form controls fill their field cell, like the old .input did.
   Berlaku juga untuk Priority & Due Date yang kini berada di card sendiri -
   tanpa ini keduanya tampil sempit dan tidak selebar tile sebelahnya. */
igc-input[b-5m3uo638se],
igc-textarea[b-5m3uo638se],
igc-select[b-5m3uo638se],
igc-date-picker[b-5m3uo638se] {
    width: 100%;
}

/* Teks DI DALAM kontrol Priority & Due Date, disamakan dengan teks Header Data.
   Bawaan tema Ignite memberi keduanya 11,375px - lebih kecil dari isi Header
   Data di sebelahnya, sehingga dua field bertetangga terbaca tidak sederajat.

   ::deep WAJIB di sini, dan ini bagian yang paling mudah salah. Blazor TIDAK
   menstempel atribut scope-nya ke elemen milik komponen anak: <igc-select> yang
   dirender IgbSelect tidak punya atribut b-* sama sekali (diperiksa langsung di
   halaman berjalan). Tanpa ::deep, selektornya dikompilasi menjadi
   `igc-select[b-xxxxx]` dan tidak pernah cocok dengan apa pun - aturannya ada
   di berkas CSS, tersaji ke browser, tapi diam-diam tidak berlaku. Dengan
   ::deep, atribut scope dipasang pada .header-side (elemen milik komponen ini)
   dan bagian setelahnya dibiarkan polos.

   Dua lapis, keduanya perlu: pada host, karena font-size itu properti yang
   diwariskan dan menembus shadow DOM untuk bagian yang tidak menyetel
   ukurannya sendiri; dan lewat ::part(), untuk bagian yang ukurannya disetel
   eksplisit oleh tema sehingga tidak bisa dicapai pewarisan.

   !important DIPERLUKAN, bukan kemalasan. wwwroot/css/app.legacy.css memasang
   aturan global `igc-input, igc-select, igc-date-picker, … { font-size:
   0.8125rem !important }` untuk SELURUH aplikasi. Selama deklarasi itu
   ber-!important, tidak ada selektor sespesifik apa pun yang bisa
   mengalahkannya - satu-satunya jalan adalah !important juga. Cakupannya
   sengaja dikunci ke .header-side supaya kontrol Ignite di halaman lain tetap
   memakai ukuran legacy-nya.

   Part yang disasar adalah `base`, BUKAN `input`/`label`: dibaca langsung dari
   shadow root komponennya di halaman berjalan, igc-select hanya mengekspos
   toggle-icon, base, dan list - tidak ada part bernama input, dan tidak ada
   elemen <input> di dalamnya. Menyasar part yang tidak ada berarti aturannya
   tidak melakukan apa-apa. */
.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;
}

/* Isi dropdown Priority mengikuti ukuran yang sama - app.legacy.css juga
   mengunci igc-select-item ke 0.8125rem !important. */
.header-side[b-5m3uo638se]  igc-select-item,
.header-side[b-5m3uo638se]  igc-select-item::part(content) {
    font-size: 12px !important;
}

/* In-cell dropdown editor for the WHT Type / Code column. */


.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;
    /* flex-end: status pill sudah pindah ke .page-head-top, jadi yang tersisa
       di kolom ini hanya baris tombol - dan tombolnya menempel ke tepi BAWAH
       banner (efeknya datang dari .banner yang align-items:stretch). */
    justify-content: flex-end;
    gap: 10px;
}

.banner-actions-buttons[b-5m3uo638se] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

/* ---- G/L Account auto-suggestion ---- */
.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;
}

/* ---- Breadcrumb ---- */
.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;
}

/* Thin separator between a grid (+ its add button) and the Catatan field */
.grid-note-sep[b-5m3uo638se] {
    border: none;
    border-top: 1px solid #e9edf2;
    margin: 18px 0;
}

/* ---------- Summary (Ringkasan) modal - full-size report ---------- */
.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;
}

/* report fills the full modal width (full window, not a paper sheet) */
.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;
}

/* tables: reduced font + wrapping so wide tables never exceed the form */
.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;
    }

/* label / value tables */
.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;
}

/* ---------- Release confirmation modal (compact, reuses overlay/head/foot) ---------- */
.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);
}

/* ---------- Tombol aksi di header banner ---------- */
/* SATU kelas geometri untuk keempat tombol (.hdr-btn), warna dipisah ke
   kelas modifier. Sebelumnya dua tombol <a> mengambil ukuran dari kelas
   GLOBAL kt-btn/kt-btn-sm sementara dua tombol <button> memakai aturan
   lokal di file ini - dua sumber ukuran yang berbeda, jadi tinggi dan
   ukuran fontnya tidak pernah benar-benar sama dan akan melenceng lagi
   setiap kali salah satu sisi disentuh. Semua ukuran sekarang ditulis
   eksplisit di sini, jadi keempatnya identik tanpa bergantung pada
   cascade global.

   Kelas kt-btn* SENGAJA dilepas dari markup-nya: kalau ikut terpasang,
   height/padding/font-size-nya masih ikut bertanding dan hasilnya kembali
   bergantung pada urutan file CSS. */
.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;
    /* Sama dengan radius kt-btn (calc(var(--radius) - 2px)); --radius di
       halaman ini 12px, jadi hasilnya 10px. */
    border-radius: calc(var(--radius) - 2px);
    font: inherit;
    font-size: 0.75rem; /* = --text-xs milik kt-btn-sm */
    font-weight: 500; /* = --font-weight-medium */
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    color: #fff;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}

    /* Ukuran ikon dipatok di sini, bukan lewat atribut width/height di SVG,
       supaya tidak ada tombol yang ikonnya beda ukuran. */
    .hdr-btn svg[b-5m3uo638se] {
        display: block;
        flex: 0 0 auto;
        width: 14px;
        height: 14px;
    }

    .hdr-btn:focus-visible[b-5m3uo638se] {
        outline: none;
    }

    /* Disabled ditulis eksplisit (bukan opacity) supaya tombol nonaktif
       tidak tampil sebagai warna pudar yang masih mengundang klik. */
    .hdr-btn:disabled[b-5m3uo638se] {
        cursor: not-allowed;
        background: #f1f3f6;
        border-color: #e1e5ea;
        color: #9aa3af;
        box-shadow: none;
        opacity: 1;
    }

/* RFP Details - ungu. */
.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);
    }

/* Supporting Documents - biru. */
.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);
    }

/* Document Tracking - hijau. */
.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);
    }

/* ---------- Menu dropdown header (References / Other Actions) ---------- */

/* SENGAJA TANPA z-index. Tugasnya hanya menjadi jangkar posisi bagi panel
   menu; begitu ia diberi z-index, ia membuat KONTEKS PENUMPUKAN baru dan
   seluruh tombol di dalamnya ikut terangkat di atas konten lain - termasuk
   menaungi dropdown profil milik layout, yang justru harus berada di atas
   segalanya. Yang perlu ditinggikan cukup panelnya sendiri. */
.hdr-menu[b-5m3uo638se] {
    position: relative;
}

/* Chevron pembeda tombol bermenu dari tombol aksi biasa. Ikut berputar saat
   menunya terbuka - petunjuk arah yang murah dan langsung terbaca. */
.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);
    /* Angka KECIL dengan sengaja. Panel ini hanya perlu mengalahkan konten
       halaman di sekitarnya (yang tidak memakai z-index sama sekali) dan
       backdrop-nya sendiri di bawah - bukan chrome aplikasi seperti dropdown
       profil, yang memakai angka jauh lebih besar. Nilai besar di sini justru
       yang membuat menu halaman menaungi menu layout. */
    z-index: 5;
    /* Keadaan TERTUTUP. visibility (bukan display) supaya transisinya bisa
       berjalan; pointer-events:none supaya panel tak terlihat ini tidak
       mencuri klik. Keduanya perlu - opacity:0 saja tetap bisa diklik. */
    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;
}

    /* Keadaan TERBUKA. visibility dipindah ke 0s tanpa penundaan supaya panel
       langsung dapat menerima klik begitu animasinya mulai. */
    .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);
        }

    /* Reject bersifat merusak dan tidak bisa dibatalkan - diberi warna merah
       supaya tidak tertekan sebagai "salah satu pilihan biasa" di daftar yang
       isinya navigasi. Merahnya baru muncul saat item ini bisa ditekan; dalam
       keadaan disabled ia ikut aturan :disabled di bawah. */
    .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);
        }

/* Penutup "klik di luar". Transparan dan tepat DI BAWAH panel menu, jadi klik
   di mana pun selain panel menutup menunya tanpa perlu JS interop. */
.hdr-menu-backdrop[b-5m3uo638se] {
    position: fixed;
    inset: 0;
    /* Tepat satu tingkat di bawah .hdr-menu-pop, dan tetap kecil - lihat
       alasannya di sana. */
    z-index: 4;
    background: transparent;
}

/* Save Draft - abu tua. Sengaja netral, bukan warna aksi: ia berdampingan
   dengan Release yang hijau, dan dua tombol berwarna kuat bersebelahan membuat
   keduanya sama-sama menuntut perhatian. */
.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 ---- */
.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;
    }

    /* connecting line */
    .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;
}

/* ---------- Document tracker tabs + checklist table ---------- */
.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;
    }
}


/* ---------- G/L grid footer (total calculated retention) ---------- */
.gl-grid-footer[b-5m3uo638se] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: #fbfcfd; /* matches --ig-grid-header-background */
    border: 1px solid #eef1f4; /* matches --ig-grid-header-border-color */
    border-top: none;
    border-radius: 0 0 10px 10px;
    margin-top: -1px; /* sit flush against the grid's bottom border */
    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; /* matches --ig-grid-header-text-color */
    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;
}

/* ---------- Angka bertanda (arah pajak) ----------

   Dipakai di rekap pajak tab Tax, footer tab Accounting, dan tabel modal
   Simulate. Warna SELALU didampingi tanda "+"/"-" yang ditulis eksplisit -
   warna saja tidak cukup, baik untuk cetak hitam-putih maupun untuk pengguna
   dengan defisiensi persepsi warna. */
.amount-plus[b-5m3uo638se] {
    color: #1e7e34;
}

.amount-minus[b-5m3uo638se] {
    color: #b91c1c;
}

/* Baris total pada tabel perpajakan di modal Simulate. */
.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;
    }

/* ---------- Tombol Reject ----------

   Ditulis sebagai CSS biasa, BUKAN utility Metronic/Tailwind.

   Sebelumnya tombol Reject memakai `kt-btn-outline kt-btn-destructive`.
   Kombinasi keduanya menghasilkan tombol merah pekat DENGAN warna teks yang
   juga merah: kt-btn-destructive mengisi background, sementara kt-btn-outline
   menetapkan warna teks mengikuti warna aksen yang sama, dan tidak ada satu pun
   dari keduanya yang menyetel foreground yang kontras. Hasilnya tulisan
   "Reject" hilang di dalam kotaknya sendiri.

   Warnanya sekarang eksplisit dan tidak bergantung pada variabel bundle.
   !important dipakai karena kelas kt-btn tetap dipertahankan (untuk padding,
   radius, dan tipografi) dan aturan warnanya berasal dari stylesheet global
   yang dimuat setelah CSS terisolasi ini. */
.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;
    }

/* Varian solid untuk tombol konfirmasi "Ya, Reject" di dalam modal. */
.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;
    }

/* Pesan galat di dalam modal konfirmasi Release/Reject. Panel tab ada di balik
   overlay, jadi alert yang hanya tampil di sana tidak pernah terbaca saat modal
   masih terbuka. */
.confirm-modal-alert[b-5m3uo638se] {
    margin: 14px 0 0 !important;
}
/* /Component/Page/Verification/Page/VerificationList.razor.rz.scp.css */
/* Scoped to PgVerificationList.razor. Variables live on .pr-page (not :root) to survive CSS isolation. */
.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;
    /* Sebelumnya `max-width:1280px; margin:0 auto`. Di layar lebar itu membuat
       konten mengumpul di tengah dengan pita kosong kiri-kanan, padahal grid
       RFP-nya sendiri justru kekurangan lebar (Request Title terpotong dan
       muncul scroll horizontal). Lebar sekarang mengikuti .kt-container-fluid
       milik MainLayout - padding tepi diurus container itu. */
    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;
    }

/* Header

   .card di halaman ini sengaja padding:0 supaya grid menempel rapat ke tepi,
   jadi card judul perlu padding sendiri.

   PENTING: selektornya `.card.head-card`, bukan `.head-card` saja. Keduanya
   sama-sama specificity satu class, dan `.card { padding: 0 }` berada LEBIH
   BAWAH di file ini - jadi aturan itu yang menang dan padding header tidak
   pernah benar-benar terpasang (breadcrumb menempel ke tepi card). Menaikkan
   specificity dengan menggabung kedua class memutus ketergantungan pada urutan
   penulisan aturan.

   .crumbs dan .page-head margin-bottom dinolkan/dikecilkan di dalamnya - kalau
   tidak, dasar card menggantung 20px di bawah subtitle. */
.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;
    }

/* Pesan sukses setelah release, dibawa dari halaman detail lewat ?released=.
   Hijau lembut, bukan hijau pekat: ini konfirmasi yang sudah terjadi, bukan
   tombol yang menunggu ditekan. */
.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;
    }

/* Aturan .search dihapus bersama kotak "Cari RFP Number.." - penyaringan kini
   dikerjakan baris filter bawaan grid. */

/* Card wrapper around the grid - mirrors the attached table's container:
   white, hairline #E8ECF1 border, 12px radius, soft shadow, flush table. */
.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;
}

    /* ---- IgbGrid styled to resemble the attached HTML table ----
   The grid reads --ig-grid-* custom properties that inherit through its shadow
   DOM. Density (padding/row height) comes from --ig-size (medium ≈ 13px/16px
   cell padding, ~40px header). font-family/size cascade from the host. */
    .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; /* body cell text (matches td: 13.5px) */
        border: none;
        background: #fff;
        /* compact density → ~16px horizontal / ~13px vertical cell padding */
        --ig-size: var(--ig-size-medium, 2);
        /* Header: light strip, hairline bottom rule, muted gray label */
        --ig-grid-header-background: #fbfcfd; /* th background */
        --ig-grid-header-text-color: #8b93a7; /* th color */
        --ig-grid-header-border-width: 1px;
        --ig-grid-header-border-style: solid;
        --ig-grid-header-border-color: #eef1f4; /* th border-bottom */
        /* Body: white content, dark ink, light row separators */
        --ig-grid-content-background: #ffffff;
        --ig-grid-content-text-color: #1b1f2b; /* td color */
        --ig-grid-row-border-color: #f0f2f5; /* td border-bottom */
        /* No zebra striping - the attached table rows are uniformly white */
        --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;
        /* Hover: neutral gray wash (tbody tr:hover background:#F7F9FB) */
        --ig-grid-row-hover-background: #f7f9fb;
        --ig-grid-row-hover-text-color: #1b1f2b;
        /* Selected row: clear light-blue highlight (distinct from gray hover) */
        --ig-grid-row-selected-background: #eaf2fb;
        --ig-grid-row-selected-text-color: #1b1f2b;
        /* Cell selection is disabled on this grid (row selection only), so the
       active-cell box is hidden - selecting a row never leaves a cell outline. */
        --ig-grid-cell-selected-background: transparent;
        --ig-grid-cell-selected-text-color: #1b1f2b;
        --ig-grid-cell-active-border-color: transparent;
        /* Card supplies the outer frame - avoid a doubled grid border */
        --ig-grid-grid-border-color: transparent;
    }

/* .grid-toolbar dihapus bersama kotak pencarian - satu-satunya isi baris itu
   adalah search dan Verify, dan Verify kini pindah ke .list-filter. */

/* Pemilih daftar (Outstanding / Open / Complete) + tombol Verify di ujung
   kanan. Padding-nya ditulis di sini, bukan di .card, karena .card padding:0
   supaya grid menempel rapat ke tepi. */
.list-filter[b-q8fk6qcaws] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
}

/* --- Baris ringkasan grid ("Total Rows" / "Total Amount") ------------------
   Ignite merender tiap ringkasan sebagai dua <span> berdampingan di dalam
   .igx-grid-summary__item: label lalu hasilnya, masing-masing memotong diri
   dengan ellipsis begitu selnya sempit. Itu sebabnya "Total Amount" sempat
   tampil sebagai "Total ..." dengan angka ikut terpotong.

   Melebarkan kolom saja TIDAK cukup: selama keduanya berdampingan, angka hanya
   mendapat sisa lebar setelah label, dan angka miliaran berprefiks IDR tetap
   menabrak tepi sel. Karena itu keduanya DITUMPUK - label di atas, angka di
   bawah - sehingga angkanya mendapat SELURUH lebar sel.

   Tingginya diberi ruang lewat SummaryRowHeight="52" pada IgbGrid; tanpa itu
   baris ringkasan hanya setinggi satu baris teks dan baris keduanya terpotong.
   height:auto membatalkan tinggi satu-baris yang dipasang Ignite langsung pada
   elemen .igx-grid-summary__item.

   align-items:flex-end - keduanya dirapatkan ke kanan, mengikuti perataan
   kolom Base Amount yang juga rata kanan.

   Dibatasi ke .pr-page (root halaman ini) - file CSS ini memang sudah
   ter-scope ke komponennya, tapi jangkar itu tetap diperlukan agar ::deep
   punya induk. */
.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;
}

/* Angka TIDAK dipotong sama sekali: angka terpotong menyesatkan, tidak seperti
   teks biasa yang masih bisa ditebak. tabular-nums menyamakan lebar digit
   supaya angkanya tidak "bergoyang" saat filter mengubah nilainya. */
.pr-page[b-q8fk6qcaws]  .igx-grid-summary__result {
    overflow: visible;
    text-overflow: clip;
    font-variant-numeric: tabular-nums;
}

/* margin-left:auto, BUKAN justify-content:space-between pada .list-filter:
   tag-nya harus tetap rapat berderet di kiri. space-between akan menyebarkan
   keempat tag itu memenuhi lebar baris. */
.list-filter-action[b-q8fk6qcaws] {
    margin-left: auto;
    /* min-width + padding, bukan salah satunya saja: padding melebarkan
       menurut panjang teks ("Verify" pendek, jadi hasilnya masih sempit),
       sedangkan min-width memberi lantai lebar yang pasti. */
    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);
    }

    /* Nonaktif saat belum ada baris terpilih - warnanya diredupkan supaya
       hijau pekat tidak terbaca sebagai tombol yang siap ditekan. */
    .list-filter-action:disabled[b-q8fk6qcaws] {
        background: #a7d8b9;
        border-color: #a7d8b9;
        color: #f3f8f5;
        cursor: not-allowed;
    }

/* Pembungkus pesan error + tombol Retry. Perlu padding sendiri karena
   .card padding:0. */
.state-wrap[b-q8fk6qcaws] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 16px 24px;
}

    /* .state-msg bawa padding 24px 6px sendiri - dinolkan di sini supaya tidak
       dobel dengan padding .state-wrap. */
    .state-wrap .state-msg[b-q8fk6qcaws] {
        padding: 0;
    }

/* Action button (Verify / Retry) */
.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;
    }

/* Loading / error states */
.state-msg[b-q8fk6qcaws] {
    margin: 0;
    padding: 24px 6px;
    color: #6b7280;
    font-size: 14px;
}

.loader-card[b-q8fk6qcaws] {
    /* Tinggi sebenarnya datang dari inline style di markup (GridHeight), satu
       nilai yang sama dengan IgbGrid supaya keduanya tidak bisa berselisih.
       Nilai di sini hanya cadangan kalau inline style itu suatu saat dilepas. */
    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;
}

/* ---- Breadcrumb ---- */
.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 brand 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 brand 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;
    }
}