/* _content/P2PPortal.UI/Components/Delivery/RecipientDestinationCell.razor.rz.scp.css */
.rcp-cell[b-yozmsrne4h] { font-size: 0.76rem; line-height: 1.25; }

.rcp-cell__empty[b-yozmsrne4h] { color: var(--rz-text-secondary-color); }

.rcp-cell__head[b-yozmsrne4h] {
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

.rcp-cell__name[b-yozmsrne4h] { font-weight: 600; }

.rcp-cell__toggle[b-yozmsrne4h] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    color: var(--rz-primary);
    cursor: pointer;
    line-height: 1;
}

.rcp-cell__toggle .rz-icon[b-yozmsrne4h] {
    font-size: 1rem;
}

.rcp-cell__address[b-yozmsrne4h] {
    margin-top: 0.15rem;
    color: var(--rz-text-secondary-color);
    font-size: 0.72rem;
    word-break: break-word;
}
/* _content/P2PPortal.UI/Components/NotificationPicker.razor.rz.scp.css */
/* Lonceng notifikasi di header.

   Scoped CSS, bukan <style> di dalam .razor seperti sebelumnya: aturan lonceng tidak punya
   urusan dengan sisa aplikasi, dan blok <style> global sempat bertabrakan dengan popup Radzen
   lain di header yang sama.

   RadzenIcon merender <i class="rzi"> di dalam komponennya sendiri, jadi atribut scope tidak
   menempel padanya - selektornya selalu lewat pembungkus yang memang milik komponen ini.       */

.bell-root[b-k93jigtyyi] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    box-sizing: border-box;
    vertical-align: middle;
}

/* ---- Tombol lonceng ---------------------------------------------------------------------- */

.bell-trigger[b-k93jigtyyi] {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.bell-trigger .rzi[b-k93jigtyyi] {
    font-size: 20px;
}

/* Header-nya gelap di tema default, terang di tema light - hover-nya harus mengikuti, bukan
   dipatok satu warna.                                                                          */
.bell-trigger:hover[b-k93jigtyyi] {
    background-color: rgba(255, 255, 255, 0.1);
}

.rz-theme-light .bell-trigger:hover[b-k93jigtyyi] {
    background-color: rgba(0, 0, 0, 0.06);
}

.bell-badge[b-k93jigtyyi] {
    position: absolute;
    top: 2px;
    right: -1px;
    min-width: 17px;
    height: 17px;
    padding: 2px 4px;
    border-radius: 10px;
    border: 2px solid var(--rz-header-background-color, currentColor);
    background-color: var(--rz-danger, #dc3545);
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    pointer-events: none;
}

/* ---- Panel ------------------------------------------------------------------------------- */

/* Backdrop harus fixed selebar viewport, bukan absolut di dalam header: klik di mana pun pada
   halaman harus menutup panel, termasuk di area yang jauh dari lonceng.                        */
.bell-backdrop[b-k93jigtyyi] {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: transparent;
}

/* position: fixed, BUKAN absolute terhadap .bell-root.

   Panel ini menggantung di bawah header, jadi kalau ia diposisikan absolut ia bergantung pada
   tidak adanya satu pun leluhur di header yang memotong isinya. Header Portal sudah terbukti
   memotong: template RadzenProfileMenu di MainLayout terpaksa memasang "overflow: visible"
   sendiri supaya isinya tidak terpangkas.

   Fixed melepaskan panel dari seluruh rantai itu - tidak ada leluhur yang bisa memotongnya.
   Konsekuensinya panel rata kanan ke viewport dan tidak persis di bawah loncengnya; itu
   pertukaran yang disengaja, dan bentuknya sama dengan dropdown notifikasi yang biasa dilihat
   orang.                                                                                       */
.bell-popup[b-k93jigtyyi] {
    position: fixed;
    top: var(--rz-header-height, 3.5rem);
    right: 1rem;
    z-index: 1201;
    width: 22rem;
    max-width: calc(100vw - 2rem);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--rz-border-color, rgba(128, 128, 128, 0.25));
    border-radius: 0.5rem;
    /* Warna teks dipatok ulang: lonceng tinggal di dalam header yang mewarisi warna terang,
       sedangkan panelnya berdiri di atas latar panel biasa. */
    background: var(--rz-panel-background-color, var(--rz-base-background-color, #fff));
    color: var(--rz-text-color);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    text-align: left;
    cursor: default;
}

.bell-popup__head[b-k93jigtyyi] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.625rem 0.875rem;
    border-bottom: 1px solid var(--rz-border-color, rgba(128, 128, 128, 0.2));
}

.bell-popup__title[b-k93jigtyyi] {
    font-size: 0.875rem;
    font-weight: 700;
}

.bell-popup__unread[b-k93jigtyyi] {
    font-size: 0.75rem;
    color: var(--rz-danger, #dc3545);
    font-weight: 600;
}

/* Dibatasi tingginya lalu digulir: selusin notifikasi melebihi tinggi layar laptop dan tautan
   "See all" di dasarnya jadi tidak pernah terlihat.                                            */
.bell-popup__list[b-k93jigtyyi] {
    max-height: 24rem;
    overflow-y: auto;
}

/* ---- Satu baris notifikasi ---------------------------------------------------------------- */

/* Dulu <button>, sekarang <div>: barisnya tidak bisa diklik lagi.

   cursor: default dan HILANGNYA aturan :hover bukan sekadar kerapian - keduanya satu-satunya
   isyarat yang dipunyai vendor tentang bisa-tidaknya sesuatu ditekan. Baris yang menyala saat
   disentuh tapi tidak melakukan apa pun saat diklik terbaca sebagai fitur rusak, bukan sebagai
   daftar bacaan.

   Sifat reset milik <button> (border, background, font, text-align) tetap ditulis: <div> tidak
   mewarisi font tombol, tapi ia MEWARISI text-align dan color dari header yang rata tengah dan
   berwarna terang - dua hal yang harus tetap dipatok di sini.                                  */
.bell-item[b-k93jigtyyi] {
    display: flex;
    gap: 0.625rem;
    align-items: flex-start;
    width: 100%;
    padding: 0.625rem 0.875rem;
    border-bottom: 1px solid var(--rz-border-color, rgba(128, 128, 128, 0.12));
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: default;
    box-sizing: border-box;
}

.bell-item--unread[b-k93jigtyyi] {
    background: color-mix(in srgb, var(--rz-primary) 7%, transparent);
}

.bell-item .rzi[b-k93jigtyyi] {
    font-size: 18px;
    color: var(--rz-text-secondary-color);
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.bell-item__body[b-k93jigtyyi] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    flex: 1;
    min-width: 0;
}

/* Satu baris saja. Judul notifikasi P2P membawa nomor dokumen di ekornya ("... RFQ.048/08/2026
   - Tissue"), jadi memotongnya di tengah tetap menyisakan bagian yang berarti - dan tanpa
   potongan ini satu judul panjang sudah setinggi tiga notifikasi.                              */
.bell-item__title[b-k93jigtyyi] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--rz-text-color);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bell-item--unread .bell-item__title[b-k93jigtyyi] {
    font-weight: 700;
}

/* Dua baris: cukup menangkap inti kalimat, cukup pendek supaya selusin notifikasi tetap muat. */
.bell-item__message[b-k93jigtyyi] {
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bell-item__age[b-k93jigtyyi] {
    font-size: 0.6875rem;
    color: var(--rz-text-disabled-color);
}

.bell-item__dot[b-k93jigtyyi] {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--rz-primary);
    flex-shrink: 0;
    margin-top: 0.375rem;
}

/* ---- Kosong & footer ---------------------------------------------------------------------- */

.bell-empty[b-k93jigtyyi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    padding: 1.75rem 0.875rem;
    color: var(--rz-text-secondary-color);
    font-size: 0.8125rem;
}

.bell-empty .rzi[b-k93jigtyyi] {
    font-size: 1.5rem;
}

.bell-footer[b-k93jigtyyi] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: none;
    border-top: 1px solid var(--rz-border-color, rgba(128, 128, 128, 0.2));
    background: transparent;
    color: var(--rz-primary);
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    box-sizing: border-box;
}

.bell-footer:hover[b-k93jigtyyi] {
    background: color-mix(in srgb, var(--rz-primary) 10%, transparent);
}

.bell-footer .rzi[b-k93jigtyyi] {
    font-size: 1rem;
}
/* _content/P2PPortal.UI/Components/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-lx1o2lvq8q],
.components-reconnect-repeated-attempt-visible[b-lx1o2lvq8q],
.components-reconnect-failed-visible[b-lx1o2lvq8q],
.components-pause-visible[b-lx1o2lvq8q],
.components-resume-failed-visible[b-lx1o2lvq8q],
.components-rejoining-animation[b-lx1o2lvq8q] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-lx1o2lvq8q],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-lx1o2lvq8q],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-lx1o2lvq8q],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-lx1o2lvq8q],
#components-reconnect-modal.components-reconnect-retrying[b-lx1o2lvq8q],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-lx1o2lvq8q],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-lx1o2lvq8q],
#components-reconnect-modal.components-reconnect-failed[b-lx1o2lvq8q],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-lx1o2lvq8q] {
    display: block;
}


#components-reconnect-modal[b-lx1o2lvq8q] {
    background-color: var(--rz-dialog-background-color);
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: var(--rz-dialog-border-radius);
    box-shadow: var(--rz-dialog-shadow);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-lx1o2lvq8q 0.5s both;

    &[open] {
        animation: components-reconnect-modal-slideUp-b-lx1o2lvq8q 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-lx1o2lvq8q 0.5s ease-in-out 0.3s;
        animation-fill-mode: both;
    }
}

    #components-reconnect-modal[b-lx1o2lvq8q]::backdrop {
        background-color: var(--rz-dialog-mask-background-color);
        animation: components-reconnect-modal-fadeInOpacity-b-lx1o2lvq8q 0.5s ease-in-out;
        opacity: 1;
    }

@keyframes components-reconnect-modal-slideUp-b-lx1o2lvq8q {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-lx1o2lvq8q {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-lx1o2lvq8q {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-lx1o2lvq8q] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-lx1o2lvq8q] {
    margin: 0;
    text-align: center;
}

.components-rejoining-animation[b-lx1o2lvq8q] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-lx1o2lvq8q] {
        position: absolute;
        border: 3px solid var(--rz-primary);
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-lx1o2lvq8q 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-lx1o2lvq8q] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-lx1o2lvq8q {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* _content/P2PPortal.UI/Components/SuccessAlert.razor.rz.scp.css */
.portal-alert[b-gs4yarqkl5] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.55rem 0.75rem;
    margin-bottom: 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    line-height: 1.35;
}

.portal-alert--success[b-gs4yarqkl5] {
    background: #ecfdf3;
    border: 1px solid #bbf7d0;
    color: #166534;
}

.portal-alert__content[b-gs4yarqkl5] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    min-width: 0;
}

.portal-alert__icon[b-gs4yarqkl5] {
    color: #16a34a;
    font-size: 1.125rem;
    flex-shrink: 0;
    margin-top: 0.05rem;
}

.portal-alert__message[b-gs4yarqkl5] {
    flex: 1 1 auto;
    min-width: 0;
}

.portal-alert__close[b-gs4yarqkl5] {
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0.15rem;
    color: #166534;
    display: inline-flex;
    align-items: center;
    border-radius: 0.25rem;
    flex-shrink: 0;
}

.portal-alert__close:hover[b-gs4yarqkl5] {
    background: rgba(22, 163, 74, 0.12);
}
/* _content/P2PPortal.UI/Components/VendorBrandingHeader.razor.rz.scp.css */
.vendor-brand[b-bmbvrcyxph] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    width: 100%;
    min-width: 0;
}

/* Logo vendor bisa berapa pun rasionya, jadi yang dipasang adalah KOTAKNYA - gambarnya
   menyesuaikan di dalamnya lewat object-fit: contain, tidak pernah teregang.

   Sebelumnya batasnya 186x48 - ukuran wordmark CodeID yang lebar. Logo vendor yang bujur
   sangkar (kebanyakan begitu) ikut terkunci di tinggi 48px dan tampil jauh lebih kecil dari
   ruang yang tersedia. Sekarang tingginya 88px dan lebarnya mengikuti sidebar: logo persegi
   jadi ~88x88, logo lebar tetap melebar sampai 200px seperti sebelumnya. */
.vendor-brand__logo[b-bmbvrcyxph] {
    width: 100%;
    max-width: 200px;
    height: 88px;
    object-fit: contain;

    /* Logo kecil yang di-scale ke atas jadi lebih halus di sebagian besar browser. */
    image-rendering: auto;
}

.vendor-brand__name[b-bmbvrcyxph] {
    max-width: 100%;
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1.2;
    text-align: center;
    color: var(--rz-text-color);

    /* Nama vendor bisa panjang ("PT Sumber Makmur Sentosa Abadi") - dipotong dua baris. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.vendor-brand__code[b-bmbvrcyxph] {
    font-size: 0.72rem;
    letter-spacing: 0.02em;
    color: var(--rz-text-secondary-color);
}
/* _content/P2PPortal.UI/Components/WarningAlert.razor.rz.scp.css */
.portal-alert[b-3iz25vizwe] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.55rem 0.75rem;
    margin-bottom: 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    line-height: 1.35;
}

.portal-alert--warning[b-3iz25vizwe] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}

.portal-alert__content[b-3iz25vizwe] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    min-width: 0;
}

.portal-alert__icon[b-3iz25vizwe] {
    color: #dc2626;
    font-size: 1.125rem;
    flex-shrink: 0;
    margin-top: 0.05rem;
}

.portal-alert__message[b-3iz25vizwe] {
    flex: 1 1 auto;
    min-width: 0;
}

.portal-alert__close[b-3iz25vizwe] {
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0.15rem;
    color: #991b1b;
    display: inline-flex;
    align-items: center;
    border-radius: 0.25rem;
    flex-shrink: 0;
}

.portal-alert__close:hover[b-3iz25vizwe] {
    background: rgba(220, 38, 38, 0.12);
}
/* _content/P2PPortal.UI/Layouts/AnonLayout.razor.rz.scp.css */
.anon-layout-root[b-0atw69jqlx] {
    min-height: 100vh;
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: #f8fafc;
}
/* _content/P2PPortal.UI/Layouts/LoginLayout.razor.rz.scp.css */
.login-container-wrapper[b-tvhcckq5or] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 16px;
    background-color: #0b0c1e;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 900' preserveAspectRatio='xMidYMid slice'%3E%3Cg fill='none' stroke='rgba(130, 80, 240, 0.18)' stroke-width='1.2'%3E%3Cpath d='M-100,200 C300,600 800,100 1540,700' /%3E%3Cpath d='M-100,240 C320,620 820,120 1540,720' /%3E%3Cpath d='M-100,280 C340,640 840,140 1540,740' /%3E%3Cpath d='M-100,320 C360,660 860,160 1540,760' /%3E%3Cpath d='M-100,360 C380,680 880,180 1540,780' /%3E%3Cpath d='M-100,400 C400,700 900,200 1540,800' /%3E%3Cpath d='M-100,440 C420,720 920,220 1540,820' /%3E%3Cpath d='M-100,480 C440,740 940,240 1540,840' /%3E%3C/g%3E%3Cg fill='none' stroke='rgba(95, 45, 180, 0.12)' stroke-width='1'%3E%3Cpath d='M-100,100 C400,800 700,50 1540,500' /%3E%3Cpath d='M-100,130 C420,810 720,70 1540,520' /%3E%3Cpath d='M-100,160 C440,820 740,90 1540,540' /%3E%3Cpath d='M-100,190 C460,830 760,110 1540,560' /%3E%3C/g%3E%3C/svg%3E"), radial-gradient(ellipse at 50% 40%, #2b174f 0%, #150f33 50%, #070814 100%);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.login-card[b-tvhcckq5or] {
    width: 100%;
    max-width: 440px;
    animation: fadeIn 0.5s ease-out-back;
}
/* _content/P2PPortal.UI/Pages/App/Dashboard.razor.rz.scp.css */
/* Dashboard — style reusable ada di portal-surface.css (portal-summary-*, portal-news-item, portal-panel-loading, portal-icon-tile). */
/* _content/P2PPortal.UI/Pages/AppLogs/IntegrationMonitor.razor.rz.scp.css */
/* ============================ Monitoring Integrasi ============================ */
.int-header[b-yar7lzz2ac] {
    display: flex; align-items: center; justify-content: space-between; gap: 0.85rem; padding: 0.85rem 1.15rem;
    background: linear-gradient(100deg, var(--rz-primary-lighter), color-mix(in srgb, var(--rz-primary) 6%, transparent));
    border-bottom: 1px solid var(--rz-border-color-lighter);
}
.int-header__left[b-yar7lzz2ac] { display: flex; align-items: center; gap: 0.85rem; min-width: 0; }
.int-header__icon[b-yar7lzz2ac] {
    width: 48px; height: 48px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center;
    background: var(--rz-primary); color: #fff; flex-shrink: 0; box-shadow: 0 6px 16px color-mix(in srgb, var(--rz-primary) 35%, transparent);
}
.int-body[b-yar7lzz2ac] { padding: 1rem 1.15rem 2rem; }

/* stats */
.int-stats[b-yar7lzz2ac] { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.65rem; margin-bottom: 1rem; }
.int-stat[b-yar7lzz2ac] {
    display: flex; align-items: center; gap: 0.65rem; padding: 0.7rem 0.85rem; border-radius: 12px;
    background: var(--rz-base-background-color); border: 1px solid var(--rz-border-color-lighter); box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.int-stat[b-yar7lzz2ac]  .rzi { font-size: 1.5rem; width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; }
.int-stat__value[b-yar7lzz2ac] { font-size: 1.25rem; font-weight: 700; line-height: 1.1; }
.int-stat__label[b-yar7lzz2ac] { font-size: 0.7rem; color: var(--rz-text-secondary-color); }
.int-stat--ok[b-yar7lzz2ac]  .rzi { background: color-mix(in srgb, #16a34a 15%, transparent); color: #16a34a; }
.int-stat--pending[b-yar7lzz2ac]  .rzi { background: color-mix(in srgb, #0ea5e9 15%, transparent); color: #0284c7; }
.int-stat--error[b-yar7lzz2ac]  .rzi { background: color-mix(in srgb, #ef4444 15%, transparent); color: #dc2626; }
.int-stat--cancelled[b-yar7lzz2ac]  .rzi { background: color-mix(in srgb, #6b7280 14%, transparent); color: #4b5563; }

/* shortcut tabs (CDR-style) */
.int-toolbar[b-yar7lzz2ac] {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 0.6rem; margin-bottom: 0.85rem;
}
.int-tabs[b-yar7lzz2ac] { display: inline-flex; flex-wrap: wrap; gap: 0.35rem; }
.int-tab[b-yar7lzz2ac] {
    display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.75rem; border-radius: 999px;
    border: 1px solid var(--rz-border-color-lighter); background: var(--rz-base-background-color);
    color: var(--rz-text-color); font-size: 0.78rem; cursor: pointer; transition: all 0.15s ease;
}
.int-tab:hover[b-yar7lzz2ac] { border-color: var(--rz-primary); }
.int-tab[b-yar7lzz2ac]  .rzi { font-size: 1rem; }
.int-tab--active[b-yar7lzz2ac] {
    background: var(--rz-primary); border-color: var(--rz-primary); color: #fff;
    box-shadow: 0 3px 10px color-mix(in srgb, var(--rz-primary) 30%, transparent);
}
.int-tab__count[b-yar7lzz2ac] {
    font-size: 0.68rem; font-weight: 700; padding: 0.05rem 0.4rem; border-radius: 999px;
    background: color-mix(in srgb, var(--rz-text-color) 10%, transparent);
}
.int-tab__count--alert[b-yar7lzz2ac] { background: #ef4444; color: #fff; }
.int-tab--active .int-tab__count[b-yar7lzz2ac] { background: rgba(255,255,255,0.25); }

.int-grid[b-yar7lzz2ac] { font-size: 0.82rem; }
.int-grid[b-yar7lzz2ac]  th { white-space: nowrap; overflow: visible; }
.int-grid[b-yar7lzz2ac]  .rz-column-title { white-space: nowrap; }
.int-num[b-yar7lzz2ac] { font-variant-numeric: tabular-nums; }

/* direction pill */
.int-dir[b-yar7lzz2ac] { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.72rem; font-weight: 700; padding: 0.12rem 0.5rem; border-radius: 999px; white-space: nowrap; }
.int-dir[b-yar7lzz2ac]  .rzi { font-size: 0.85rem; }
.int-dir--in[b-yar7lzz2ac] { background: color-mix(in srgb, #0ea5e9 14%, transparent); color: #0284c7; }
.int-dir--out[b-yar7lzz2ac] { background: color-mix(in srgb, #8b5cf6 14%, transparent); color: #7c3aed; }

/* status chips */
.int-chip[b-yar7lzz2ac] { display: inline-flex; align-items: center; font-size: 0.7rem; font-weight: 700; padding: 0.15rem 0.55rem; border-radius: 999px; white-space: nowrap; }
.int-chip--success[b-yar7lzz2ac] { background: color-mix(in srgb, #16a34a 16%, transparent); color: #16a34a; }
.int-chip--pending[b-yar7lzz2ac] { background: color-mix(in srgb, #6b7280 14%, transparent); color: #6b7280; }
.int-chip--processing[b-yar7lzz2ac] { background: color-mix(in srgb, #0ea5e9 15%, transparent); color: #0284c7; }
.int-chip--failed[b-yar7lzz2ac] { background: color-mix(in srgb, #f59e0b 18%, transparent); color: #d97706; }
.int-chip--error[b-yar7lzz2ac] { background: color-mix(in srgb, #ef4444 16%, transparent); color: #dc2626; }
.int-chip--cancelled[b-yar7lzz2ac] { background: color-mix(in srgb, #6b7280 12%, transparent); color: #6b7280; }

.int-noaction[b-yar7lzz2ac] { color: var(--rz-text-disabled-color); }

/* detail under expanded row */
.int-detail-panel[b-yar7lzz2ac] {
    padding: 0.65rem 0.75rem; border-radius: 10px;
    border: 1px solid var(--rz-border-color-lighter);
    background: color-mix(in srgb, var(--rz-primary) 3%, transparent);
}
.int-error[b-yar7lzz2ac] {
    display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.6rem; padding: 0.45rem 0.65rem;
    border-radius: 8px; background: color-mix(in srgb, #ef4444 10%, transparent); color: #b91c1c; font-size: 0.8rem; font-weight: 600;
}
.int-error[b-yar7lzz2ac]  .rzi { font-size: 1.05rem; }

.int-detail-grid[b-yar7lzz2ac] { display: grid; grid-template-columns: 1fr; gap: 0.8rem; }
.int-detail-block[b-yar7lzz2ac] { background: var(--rz-base-background-color); border: 1px solid var(--rz-border-color-lighter); border-radius: 10px; padding: 0.6rem 0.7rem; }
.int-block-head[b-yar7lzz2ac] { display: flex; align-items: center; font-size: 0.76rem; font-weight: 700; margin-bottom: 0.4rem; }
.int-block-head__title[b-yar7lzz2ac] { display: inline-flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }
.int-block-head[b-yar7lzz2ac]  .rzi { font-size: 0.95rem; color: var(--rz-primary); }
.int-link[b-yar7lzz2ac] { background: none; border: none; cursor: pointer; color: var(--rz-primary); font-size: 0.74rem; font-weight: 600; padding: 0; }
.int-link:hover[b-yar7lzz2ac] { text-decoration: underline; }

.int-payload[b-yar7lzz2ac] {
    margin: 0; padding: 0.6rem; border-radius: 8px; font-size: 0.72rem; line-height: 1.5;
    background: #1e293b; color: #e2e8f0; overflow-x: auto; white-space: pre-wrap; word-break: break-word;
}

@media (max-width: 820px) {
    .int-stats[b-yar7lzz2ac] { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
}
/* _content/P2PPortal.UI/Pages/BAST/BastDetail.razor.rz.scp.css */
/* Tabel dan kotak harga cuma dipakai view BAST — Radzen nggak punya padanan. */

.bd-paysummary[b-dzmljioe0o] { display: flex; justify-content: flex-end; margin-top: 0.9rem; }
.bd-paysummary .bd-price[b-dzmljioe0o] { min-width: 320px; max-width: 420px; width: 100%; }
.bd-price[b-dzmljioe0o] {
    background: var(--rz-base-background-color); border: 1px solid var(--rz-border-color-lighter);
    border-radius: 14px; padding: 1rem; display: flex; flex-direction: column; gap: 0.4rem;
}
.bd-price-row[b-dzmljioe0o] { display: flex; justify-content: space-between; font-size: 0.82rem; }
.bd-price-row span:last-child[b-dzmljioe0o] { font-variant-numeric: tabular-nums; }
.bd-price-row--total[b-dzmljioe0o] { border-top: 2px solid var(--rz-border-color); margin-top: 0.3rem; padding-top: 0.4rem; font-weight: 700; }
.bd-price-row--total span:last-child[b-dzmljioe0o] { color: var(--rz-primary); font-size: 0.95rem; }

.bd-tablewrap[b-dzmljioe0o] { overflow-x: auto; border: 1px solid var(--rz-border-color-lighter); border-radius: 10px; }
.bd-table[b-dzmljioe0o] { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.bd-table thead th[b-dzmljioe0o] {
    text-align: left; padding: 0.5rem 0.6rem; background: var(--rz-primary-lighter);
    font-weight: 700; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.02em; white-space: nowrap;
}
.bd-table tbody td[b-dzmljioe0o] { padding: 0.4rem 0.6rem; border-top: 1px solid var(--rz-border-color-lighter); vertical-align: middle; white-space: nowrap; }
.bd-table tbody tr:hover[b-dzmljioe0o] { background: color-mix(in srgb, var(--rz-primary) 4%, transparent); }
.bd-table tfoot td[b-dzmljioe0o] { padding: 0.5rem 0.6rem; border-top: 2px solid var(--rz-border-color); font-weight: 700; background: color-mix(in srgb, var(--rz-primary) 4%, transparent); }
.bd-num[b-dzmljioe0o] { text-align: right; font-variant-numeric: tabular-nums; }
.bd-foot-label[b-dzmljioe0o] { text-align: right; }
.bd-cell-hi[b-dzmljioe0o] { font-weight: 700; color: var(--rz-primary); }
.bd-empty[b-dzmljioe0o] { text-align: center; color: var(--rz-text-secondary-color); padding: 1rem !important; white-space: normal !important; }
.bd-filename[b-dzmljioe0o] { max-width: 260px; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 900px) {
    .bd-paysummary .bd-price[b-dzmljioe0o] { min-width: 0; max-width: none; }
}
/* _content/P2PPortal.UI/Pages/BAST/BastForm.razor.rz.scp.css */
/* Tabel, upload, dan kotak harga cuma dipakai form BAST — Radzen nggak punya padanan. */

.bf-paysummary[b-fog58ozng2] { display: flex; justify-content: flex-end; margin-top: 0.9rem; }
.bf-paysummary .bf-price[b-fog58ozng2] { min-width: 320px; max-width: 420px; width: 100%; }
.bf-price[b-fog58ozng2] {
    background: var(--rz-base-background-color); border: 1px solid var(--rz-border-color-lighter);
    border-radius: 14px; padding: 1rem; display: flex; flex-direction: column; gap: 0.4rem;
}
.bf-price-row[b-fog58ozng2] { display: flex; justify-content: space-between; font-size: 0.82rem; }
.bf-price-row span:last-child[b-fog58ozng2] { font-variant-numeric: tabular-nums; }
.bf-price-row--total[b-fog58ozng2] { border-top: 2px solid var(--rz-border-color); margin-top: 0.3rem; padding-top: 0.4rem; font-weight: 700; }
.bf-price-row--total span:last-child[b-fog58ozng2] { color: var(--rz-primary); font-size: 0.95rem; }

.bf-tablewrap[b-fog58ozng2] { overflow-x: auto; border: 1px solid var(--rz-border-color-lighter); border-radius: 10px; }
.bf-table[b-fog58ozng2] { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.bf-table thead th[b-fog58ozng2] {
    text-align: left; padding: 0.5rem 0.6rem; background: var(--rz-primary-lighter);
    font-weight: 700; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.02em; white-space: nowrap;
}
.bf-table tbody td[b-fog58ozng2] { padding: 0.4rem 0.6rem; border-top: 1px solid var(--rz-border-color-lighter); vertical-align: middle; white-space: nowrap; }
.bf-table tbody tr:hover[b-fog58ozng2] { background: color-mix(in srgb, var(--rz-primary) 4%, transparent); }
.bf-table tfoot td[b-fog58ozng2] { padding: 0.5rem 0.6rem; border-top: 2px solid var(--rz-border-color); font-weight: 700; background: color-mix(in srgb, var(--rz-primary) 4%, transparent); }
.bf-row--current > td[b-fog58ozng2] { background: color-mix(in srgb, var(--rz-primary) 10%, transparent); font-weight: 600; }
.bf-row--blocked > td[b-fog58ozng2] { background: color-mix(in srgb, var(--rz-danger) 8%, transparent); }
.bf-num[b-fog58ozng2] { text-align: right; font-variant-numeric: tabular-nums; }
.bf-foot-label[b-fog58ozng2] { text-align: right; }
.bf-cell-hi[b-fog58ozng2] { font-weight: 700; color: var(--rz-primary); }
.bf-empty[b-fog58ozng2] { text-align: center; color: var(--rz-text-secondary-color); padding: 1rem !important; white-space: normal !important; }
.bf-note[b-fog58ozng2] { margin-top: 0.6rem; font-size: 0.78rem; font-style: italic; color: var(--rz-text-secondary-color); }

.bf-required[b-fog58ozng2] { color: var(--rz-danger); font-weight: 700; }
.bf-upload[b-fog58ozng2] {
    position: relative; display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.2rem 0.6rem; font-size: 0.78rem; font-weight: 600; line-height: 1.2;
    border: 1px solid var(--rz-primary); border-radius: var(--rz-border-radius);
    background: var(--rz-base-background-color); color: var(--rz-primary);
    cursor: pointer; white-space: nowrap; user-select: none; overflow: hidden;
}
.bf-upload:hover[b-fog58ozng2] { background: color-mix(in srgb, var(--rz-primary) 8%, transparent); }
.bf-upload:has(input:disabled)[b-fog58ozng2] { opacity: 0.5; cursor: not-allowed; }
/* InputFile child — harus ::deep biar native "No file chosen" ketutup */
[b-fog58ozng2] .bf-upload__input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 0; }
.bf-filename[b-fog58ozng2] { max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.bf-cell-input[b-fog58ozng2] { min-width: 220px; }

.bf-badge[b-fog58ozng2] { font-size: 0.68rem; font-weight: 700; padding: 0.1rem 0.5rem; border-radius: 999px; white-space: nowrap; }
.bf-badge--ok[b-fog58ozng2] { background: color-mix(in srgb, #16a34a 16%, transparent); color: #16a34a; }
.bf-badge--info[b-fog58ozng2] { background: color-mix(in srgb, #6366f1 15%, transparent); color: #4f46e5; }
.bf-badge--err[b-fog58ozng2] { background: color-mix(in srgb, #ef4444 15%, transparent); color: #dc2626; }

@media (max-width: 900px) {
    .bf-paysummary .bf-price[b-fog58ozng2] { min-width: 0; max-width: none; }
}
/* _content/P2PPortal.UI/Pages/Biding/Biding.razor.rz.scp.css */
/* ======================= Vendor Bidding - DETAIL / FORM PENAWARAN ======================= */
.bidf-header[b-zo1df26qkd] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1.15rem;
    background: linear-gradient(100deg, var(--rz-primary-lighter), color-mix(in srgb, var(--rz-primary) 6%, transparent));
    border-bottom: 1px solid var(--rz-border-color-lighter);
    position: sticky;
    top: 0;
    z-index: 5;
}

.bidf-header__left[b-zo1df26qkd] { display: flex; align-items: center; gap: 0.7rem; min-width: 0; }

.bidf-header__icon[b-zo1df26qkd] {
    width: 46px; height: 46px; border-radius: 13px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; flex-shrink: 0;
}
.bidf-header__icon--type-1[b-zo1df26qkd] { background: #7c3aed; box-shadow: 0 6px 16px color-mix(in srgb, #7c3aed 35%, transparent); }
.bidf-header__icon--type-2[b-zo1df26qkd] { background: #0284c7; box-shadow: 0 6px 16px color-mix(in srgb, #0284c7 35%, transparent); }

.bidf-header__title[b-zo1df26qkd] { font-size: 1.05rem; font-weight: 700; line-height: 1.2; }
.bidf-header__sub[b-zo1df26qkd] { font-size: 0.76rem; color: var(--rz-text-secondary-color); }

.bidf-header__right[b-zo1df26qkd] { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

.bidf-status[b-zo1df26qkd] {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.76rem; font-weight: 700; padding: 0.25rem 0.7rem; border-radius: 999px;
}
.bidf-status--open[b-zo1df26qkd] { background: color-mix(in srgb, #16a34a 15%, transparent); color: #16a34a; }
.bidf-status--open[b-zo1df26qkd]  .rzi { font-size: 0.55rem; }
.bidf-status--closed[b-zo1df26qkd] { background: color-mix(in srgb, #6b7280 15%, transparent); color: #6b7280; }

.bidf-countdown[b-zo1df26qkd] {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.76rem; font-weight: 700; padding: 0.25rem 0.7rem; border-radius: 999px;
    background: color-mix(in srgb, #16a34a 12%, transparent); color: #16a34a;
}
.bidf-countdown--urgent[b-zo1df26qkd] { background: color-mix(in srgb, #ef4444 14%, transparent); color: #dc2626; }
.bidf-countdown[b-zo1df26qkd]  .rzi { font-size: 0.9rem; }

.bidf-body[b-zo1df26qkd] { padding: 1rem 1.15rem 2.5rem; display: flex; flex-direction: column; gap: 1rem; }

/* ---- section card ---- */
.bidf-section[b-zo1df26qkd] {
    background: var(--rz-base-background-color);
    border: 1px solid var(--rz-border-color-lighter);
    border-radius: 14px;
    padding: 1rem 1.1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.bidf-section__head[b-zo1df26qkd] {
    display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap;
    font-size: 0.95rem; font-weight: 700; margin-bottom: 0.85rem;
    padding-bottom: 0.6rem; border-bottom: 1px solid var(--rz-border-color-lighter);
}
.bidf-section__head[b-zo1df26qkd]  .rzi { color: var(--rz-primary); }

.bidf-section__badge[b-zo1df26qkd] {
    font-size: 0.7rem; font-weight: 700; padding: 0.1rem 0.5rem; border-radius: 999px;
    background: color-mix(in srgb, var(--rz-primary) 14%, transparent); color: var(--rz-primary);
}
.bidf-section__hint[b-zo1df26qkd] { font-size: 0.72rem; font-weight: 400; color: var(--rz-text-secondary-color); }
.bidf-section__action[b-zo1df26qkd] { margin-left: auto; }

.bidf-subhead[b-zo1df26qkd] {
    display: flex; align-items: center; gap: 0.4rem;
    font-size: 0.82rem; font-weight: 700; margin: 0.9rem 0 0.5rem;
}
.bidf-subhead[b-zo1df26qkd]  .rzi { font-size: 1rem; color: var(--rz-primary); }

/* ---- info grid ---- */
.bidf-info-grid[b-zo1df26qkd] {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.75rem;
}
.bidf-info-grid > div[b-zo1df26qkd] { display: flex; flex-direction: column; gap: 0.15rem; }
.bidf-info-grid span[b-zo1df26qkd] { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--rz-text-secondary-color); }
.bidf-info-grid strong[b-zo1df26qkd] { font-size: 0.85rem; }
.bidf-info-grid__wide[b-zo1df26qkd] { grid-column: 1 / -1; }

/* ---- timeline ---- */
.bidf-timeline[b-zo1df26qkd] { display: flex; flex-direction: column; gap: 0.2rem; }
.bidf-tl-item[b-zo1df26qkd] { display: flex; gap: 0.7rem; padding: 0.4rem 0; position: relative; }
.bidf-tl-dot[b-zo1df26qkd] {
    width: 12px; height: 12px; border-radius: 50%; margin-top: 0.3rem; flex-shrink: 0;
    background: var(--rz-border-color); border: 2px solid var(--rz-base-background-color);
    box-shadow: 0 0 0 2px var(--rz-border-color);
}
.bidf-tl-item--latest .bidf-tl-dot[b-zo1df26qkd] { background: var(--rz-primary); box-shadow: 0 0 0 2px var(--rz-primary); }
.bidf-tl-body[b-zo1df26qkd] { flex: 1; }
.bidf-tl-top[b-zo1df26qkd] { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.bidf-tl-meta[b-zo1df26qkd] { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 0.15rem; font-size: 0.75rem; color: var(--rz-text-secondary-color); }
.bidf-tl-meta span[b-zo1df26qkd] { display: inline-flex; align-items: center; gap: 0.25rem; }
.bidf-tl-meta[b-zo1df26qkd]  .rzi { font-size: 0.9rem; }

.bidf-tag[b-zo1df26qkd] {
    font-size: 0.66rem; font-weight: 700; padding: 0.08rem 0.45rem; border-radius: 999px; white-space: nowrap;
}
.bidf-tag--latest[b-zo1df26qkd] { background: color-mix(in srgb, var(--rz-primary) 15%, transparent); color: var(--rz-primary); }
.bidf-tag--winner[b-zo1df26qkd] { background: color-mix(in srgb, #16a34a 16%, transparent); color: #16a34a; }
.bidf-tag--submitted[b-zo1df26qkd] { background: color-mix(in srgb, #0ea5e9 16%, transparent); color: #0284c7; }
.bidf-tag--rejected[b-zo1df26qkd] { background: color-mix(in srgb, #ef4444 16%, transparent); color: #dc2626; }
.bidf-tag--superseded[b-zo1df26qkd] { background: color-mix(in srgb, #6b7280 14%, transparent); color: #6b7280; }
.bidf-tag--new[b-zo1df26qkd] { background: color-mix(in srgb, #16a34a 16%, transparent); color: #16a34a; }
.bidf-tag--rfq[b-zo1df26qkd] { background: color-mix(in srgb, #6b7280 12%, transparent); color: #6b7280; }

/* ---- tables ---- */
.bidf-tablewrap[b-zo1df26qkd] { overflow-x: auto; border: 1px solid var(--rz-border-color-lighter); border-radius: 10px; }
.bidf-table[b-zo1df26qkd] { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.bidf-table thead th[b-zo1df26qkd] {
    text-align: left; padding: 0.5rem 0.6rem; background: var(--rz-primary-lighter);
    font-weight: 700; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.02em;
    color: var(--rz-text-color); white-space: nowrap;
}
.bidf-table tbody td[b-zo1df26qkd] { padding: 0.35rem 0.5rem; border-top: 1px solid var(--rz-border-color-lighter); vertical-align: middle; }
.bidf-table tbody tr:hover[b-zo1df26qkd] { background: color-mix(in srgb, var(--rz-primary) 4%, transparent); }
.bidf-table tfoot td[b-zo1df26qkd] { padding: 0.5rem 0.6rem; border-top: 2px solid var(--rz-border-color); font-weight: 700; }
.bidf-num[b-zo1df26qkd] { text-align: right; font-variant-numeric: tabular-nums; }
.bidf-cell-total[b-zo1df26qkd] { font-weight: 700; }
.bidf-foot-label[b-zo1df26qkd] { text-align: right; }
.bidf-foot-total[b-zo1df26qkd] { text-align: right; color: var(--rz-primary); font-size: 0.95rem; }

.bidf-table--compare th[b-zo1df26qkd], .bidf-table--compare td[b-zo1df26qkd] { text-align: center; }
.bidf-table--compare td:first-child[b-zo1df26qkd], .bidf-table--compare th:first-child[b-zo1df26qkd] { text-align: left; font-weight: 600; }
.bidf-th-date[b-zo1df26qkd] { font-size: 0.62rem; font-weight: 400; color: var(--rz-text-secondary-color); }
.bidf-compare[b-zo1df26qkd] { margin-top: 0.8rem; }

.bidf-inp[b-zo1df26qkd] { width: 100%; }
.bidf-inp--num[b-zo1df26qkd]  input { text-align: right; }
.bidf-inp--grow[b-zo1df26qkd] { flex: 1; min-width: 120px; }

.bidf-tier-foot[b-zo1df26qkd] { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-top: 0.7rem; flex-wrap: wrap; }
.bidf-tier-note[b-zo1df26qkd] { font-size: 0.8rem; color: var(--rz-text-secondary-color); }

/* ---- rows / labels ---- */
.bidf-row[b-zo1df26qkd] { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.5rem; flex-wrap: wrap; }
.bidf-label[b-zo1df26qkd] { min-width: 150px; font-size: 0.8rem; font-weight: 600; color: var(--rz-text-secondary-color); }
.bidf-inline[b-zo1df26qkd] { display: inline-flex; align-items: center; gap: 0.4rem; }

.bidf-tc-grid[b-zo1df26qkd] { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem 1.5rem; }
.bidf-check[b-zo1df26qkd] { display: flex; align-items: center; gap: 0.5rem; grid-column: 1 / -1; }
.bidf-check > span[b-zo1df26qkd] { font-size: 0.82rem; font-weight: 600; min-width: 140px; }

/* ---- form banner ---- */
.bidf-form-banner[b-zo1df26qkd] {
    display: flex; align-items: center; gap: 0.7rem;
    padding: 0.8rem 1rem; border-radius: 12px;
    background: color-mix(in srgb, var(--rz-primary) 8%, transparent);
    border: 1px dashed color-mix(in srgb, var(--rz-primary) 40%, transparent);
}
.bidf-form-banner[b-zo1df26qkd]  .rzi { font-size: 1.6rem; color: var(--rz-primary); }
.bidf-form-banner strong[b-zo1df26qkd] { font-size: 0.92rem; }
.bidf-form-banner div > div[b-zo1df26qkd] { font-size: 0.76rem; color: var(--rz-text-secondary-color); }

.bidf-formwrap[b-zo1df26qkd] { display: flex; flex-direction: column; gap: 1rem; }

/* ---- warnings ---- */
.bidf-inline-warn[b-zo1df26qkd] {
    display: flex; align-items: center; gap: 0.4rem; margin-top: 0.5rem;
    font-size: 0.78rem; color: #d97706;
}
.bidf-inline-warn[b-zo1df26qkd]  .rzi { font-size: 1rem; }
.bidf-ok[b-zo1df26qkd] { color: #16a34a; }
.bidf-warn[b-zo1df26qkd] { color: #d97706; }

.bidf-empty-inline[b-zo1df26qkd] {
    display: flex; align-items: center; gap: 0.4rem;
    padding: 0.75rem; color: var(--rz-text-secondary-color); font-size: 0.85rem;
}
.bidf-empty-inline[b-zo1df26qkd]  .rzi { font-size: 1.1rem; }

.bidf-locked[b-zo1df26qkd] {
    display: flex; align-items: center; gap: 0.8rem;
    padding: 1.1rem 1.2rem; border-radius: 14px;
    background: color-mix(in srgb, #6b7280 8%, transparent);
    border: 1px solid var(--rz-border-color-lighter);
}
.bidf-locked[b-zo1df26qkd]  .rzi { font-size: 2rem; color: #6b7280; }
.bidf-locked strong[b-zo1df26qkd] { font-size: 0.95rem; }
.bidf-locked div > div[b-zo1df26qkd] { font-size: 0.8rem; color: var(--rz-text-secondary-color); }

/* ---- summary sticky footer ---- */
.bidf-summary[b-zo1df26qkd] {
    position: sticky; bottom: 0;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    padding: 0.85rem 1.1rem; border-radius: 14px;
    background: var(--rz-base-background-color);
    border: 1px solid var(--rz-border-color-lighter);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
}
.bidf-summary__totals[b-zo1df26qkd] { display: flex; gap: 1.6rem; flex-wrap: wrap; }
.bidf-summary__totals > div[b-zo1df26qkd] { display: flex; flex-direction: column; }
.bidf-summary__totals span[b-zo1df26qkd] { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--rz-text-secondary-color); }
.bidf-summary__totals strong[b-zo1df26qkd] { font-size: 1.05rem; color: var(--rz-primary); }
.bidf-summary__actions[b-zo1df26qkd] { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.bidf-closebar[b-zo1df26qkd] { display: flex; justify-content: flex-end; padding: 0.25rem 0 0.5rem; }

/* ---- shared chips (duplikat dari list; scoped CSS tidak lintas halaman) ---- */
.bid-chip[b-zo1df26qkd] {
    display: inline-flex; align-items: center; gap: 0.25rem;
    font-size: 0.72rem; font-weight: 600; padding: 0.15rem 0.55rem; border-radius: 999px; white-space: nowrap;
}
.bid-chip--type-1[b-zo1df26qkd] { background: color-mix(in srgb, #8b5cf6 15%, transparent); color: #7c3aed; }
.bid-chip--type-2[b-zo1df26qkd] { background: color-mix(in srgb, #0ea5e9 15%, transparent); color: #0284c7; }

@media (max-width: 720px) {
    .bidf-tc-grid[b-zo1df26qkd] { grid-template-columns: 1fr; }
    .bidf-label[b-zo1df26qkd] { min-width: 110px; }
}

/* ---- alert aksi (simpan / kirim / gate) ---- */
.bidf-alert[b-zo1df26qkd] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0.75rem 0 0;
    padding: 0.65rem 0.9rem;
    border-radius: 10px;
    font-size: 0.85rem;
}

.bidf-alert span[b-zo1df26qkd] { flex: 1; min-width: 0; }

.bidf-alert--error[b-zo1df26qkd]   { background: color-mix(in srgb, #ef4444 12%, transparent); color: #b91c1c; }
.bidf-alert--success[b-zo1df26qkd] { background: color-mix(in srgb, #16a34a 14%, transparent); color: #15803d; }
.bidf-alert--warn[b-zo1df26qkd]    { background: color-mix(in srgb, #f59e0b 16%, transparent); color: #b45309; }


/* ── Hasil akhir (awarding) ────────────────────────────────────────────────────────────
   Warnanya dicabang dari ANGKA status di code-behind (Item.AwardTone), bukan dari label:
   label parameter boleh diubah admin kapan saja, angkanya kontrak antar sistem. */
.bidf-award[b-zo1df26qkd] {
    display: flex;
    gap: .65rem;
    align-items: flex-start;
    padding: .7rem .85rem;
    border-radius: 8px;
    border-left: 4px solid currentColor;
    margin-bottom: .75rem;
    font-size: .82rem;
}

.bidf-award__body[b-zo1df26qkd]  { flex: 1; min-width: 0; }
.bidf-award__title[b-zo1df26qkd] { font-weight: 600; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.bidf-award__note[b-zo1df26qkd]  { margin-top: .2rem; opacity: .85; font-weight: 400; }

.bidf-award__rank[b-zo1df26qkd] {
    font-size: .72rem;
    font-weight: 600;
    padding: .1rem .45rem;
    border-radius: 999px;
    background: color-mix(in srgb, currentColor 16%, transparent);
}

.bidf-award--win[b-zo1df26qkd]     { background: color-mix(in srgb, #16a34a 14%, transparent); color: #15803d; }
.bidf-award--alt[b-zo1df26qkd]     { background: color-mix(in srgb, #f59e0b 16%, transparent); color: #b45309; }
.bidf-award--rej[b-zo1df26qkd]     { background: color-mix(in srgb, #64748b 16%, transparent); color: #475569; }
.bidf-award--pending[b-zo1df26qkd] { background: color-mix(in srgb, #3b82f6 14%, transparent); color: #1d4ed8; }

/* ---- Draft belum dikirim -------------------------------------------------------------
   Sengaja BUKAN varian bidf-alert: draft bukan peringatan, hanya keterangan keadaan. Warnanya
   netral supaya tidak bersaing dengan alert error/sukses di panel yang sama. */
.bidf-draft[b-zo1df26qkd] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.65rem 0.8rem;
    margin-bottom: 0.7rem;
    border-radius: 8px;
    border: 1px dashed color-mix(in srgb, #6b7280 45%, transparent);
    background: color-mix(in srgb, #6b7280 8%, transparent);
}

.bidf-draft > div[b-zo1df26qkd] { flex: 1; min-width: 0; }
.bidf-draft strong[b-zo1df26qkd] { font-size: 0.88rem; }
.bidf-draft div > div[b-zo1df26qkd] { font-size: 0.76rem; color: var(--rz-text-secondary-color); }
.bidf-draft[b-zo1df26qkd]  .rzi { font-size: 1.3rem; color: #6b7280; }

.bidf-tag--draft[b-zo1df26qkd] { background: color-mix(in srgb, #6b7280 16%, transparent); color: #4b5563; }

/* Tier acuan - baris yang harganya benar-benar dipakai menghitung total. */
.bidf-tier-row--base[b-zo1df26qkd] { background: color-mix(in srgb, var(--rz-primary) 7%, transparent); }
.bidf-tier-row--base[b-zo1df26qkd]  .rzi { font-size: 0.8rem; color: var(--rz-primary); }

/* Daftar penghalang Kirim, di dalam bidf-alert. */
.bidf-errlist__item[b-zo1df26qkd] { font-size: 0.78rem; margin-top: 0.2rem; }
.bidf-errlist__note[b-zo1df26qkd] { font-size: 0.74rem; margin-top: 0.35rem; opacity: 0.85; }

/* ---- Panel rincian per versi di timeline ------------------------------------------------
   Ditarik sedikit ke dalam supaya jelas ia MILIK baris di atasnya, bukan blok baru yang
   sejajar dengan versi berikutnya. */
.bidf-tl-detail-btn[b-zo1df26qkd] { margin-left: auto; }

.bidf-tl-detail[b-zo1df26qkd] {
    margin-top: 0.6rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--rz-border-color-lighter);
    border-radius: 10px;
    background: color-mix(in srgb, var(--rz-primary) 3%, transparent);
}

.bidf-detail-head[b-zo1df26qkd] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--rz-text-secondary-color);
    margin: 0.6rem 0 0.35rem;
}

.bidf-detail-head:first-child[b-zo1df26qkd] { margin-top: 0; }
.bidf-detail-head[b-zo1df26qkd]  .rzi { font-size: 0.95rem; }

.bidf-detail-grid[b-zo1df26qkd] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 0.4rem 1rem;
}

.bidf-detail-grid > div[b-zo1df26qkd] { display: flex; flex-direction: column; gap: 0.1rem; }
.bidf-detail-grid span[b-zo1df26qkd] { font-size: 0.7rem; color: var(--rz-text-secondary-color); }
.bidf-detail-grid strong[b-zo1df26qkd] { font-size: 0.82rem; }

/* Ringkasan termin di tabel perbandingan - boleh membungkus, jangan memaksa kolom melebar. */
.bidf-compare-inst[b-zo1df26qkd] { font-size: 0.74rem; line-height: 1.35; }
/* _content/P2PPortal.UI/Pages/Biding/Bidings.razor.rz.scp.css */
/* Bidings: tampilan memakai komponen native Radzen (sama dengan PurchaseOrderList).
   Gaya custom bid-* lama sudah tidak dipakai di halaman ini. */
/* _content/P2PPortal.UI/Pages/Biding/BidInvitationConfirmation.razor.rz.scp.css */
/* ==================== Vendor Bidding - INVITATION CONFIRMATION ====================

   Scoped CSS. Bentuknya sengaja mengikuti kartu & chip di Bidings/Biding supaya layar ini
   tidak terasa seperti modul lain - tapi kelasnya TIDAK bisa dipakai bersama: scoped CSS
   Blazor menempelkan atribut scope per komponen, jadi .bid-chip milik Bidings.razor.css
   tidak pernah menyentuh markup di sini. Karena itu prefiksnya sendiri, bidc-.            */

.bidc-body[b-v262p4rpe5] {
    padding: 1rem 1.15rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

/* ---- keadaan muat & kosong ---- */

.bidc-loading[b-v262p4rpe5] {
    display: flex;
    justify-content: center;
    padding: 3rem 0;
}

.bidc-empty[b-v262p4rpe5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    padding: 3rem 1rem;
    color: var(--rz-text-secondary-color);
    text-align: center;
}

.bidc-empty[b-v262p4rpe5]  .rzi {
    font-size: 2rem;
}

/* ---- spanduk ---- */

.bidc-alert[b-v262p4rpe5] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 0.9rem;
    border-radius: 10px;
    font-size: 0.85rem;
}

.bidc-alert span[b-v262p4rpe5] { flex: 1; min-width: 0; }

.bidc-alert--error[b-v262p4rpe5] {
    background: color-mix(in srgb, #ef4444 12%, transparent);
    color: #b91c1c;
}

.bidc-alert--warn[b-v262p4rpe5] {
    background: color-mix(in srgb, #f59e0b 14%, transparent);
    color: #b45309;
}

/* ---- kartu bagian ---- */

.bidc-section[b-v262p4rpe5] {
    border: 1px solid var(--rz-border-color-lighter);
    border-radius: 14px;
    background: var(--rz-base-background-color);
    overflow: hidden;
}

.bidc-section__head[b-v262p4rpe5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    border-bottom: 1px solid var(--rz-border-color-lighter);
    background: color-mix(in srgb, var(--rz-primary) 5%, transparent);
}

.bidc-section__head[b-v262p4rpe5]  .rzi { font-size: 1.05rem; color: var(--rz-primary); }

/* ---- grid pasangan label/nilai ---- */

.bidc-grid[b-v262p4rpe5] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.85rem 1.25rem;
    padding: 1rem;
}

.bidc-grid > div[b-v262p4rpe5] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

/* Alamat dan deskripsi menempati satu baris penuh: keduanya kalimat, bukan nilai pendek,
   dan dipaksa masuk kolom sempit membuatnya terpotong jadi tangga.                        */
.bidc-grid__wide[b-v262p4rpe5] { grid-column: 1 / -1; }

.bidc-grid span[b-v262p4rpe5] {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--rz-text-secondary-color);
}

.bidc-grid strong[b-v262p4rpe5] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--rz-text-color);
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.bidc-urgent[b-v262p4rpe5] { color: #dc2626; }

/* ---- chip tipe item ---- */

.bidc-chip[b-v262p4rpe5] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    white-space: nowrap;
    align-self: flex-start;
}

.bidc-chip--type-1[b-v262p4rpe5] { background: color-mix(in srgb, #8b5cf6 15%, transparent); color: #7c3aed; }
.bidc-chip--type-2[b-v262p4rpe5] { background: color-mix(in srgb, #0ea5e9 15%, transparent); color: #0284c7; }

/* ---- tabel spesifikasi ---- */

/* Dibungkus dan digulir sendiri: spesifikasi bisa panjang, dan tabel yang melebar membuat
   SELURUH halaman punya scroll horizontal - termasuk tombol keputusannya.                  */
.bidc-table-wrap[b-v262p4rpe5] {
    overflow-x: auto;
    padding: 0.25rem 0 0;
}

.bidc-table[b-v262p4rpe5] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    min-width: 720px;
}

.bidc-table th[b-v262p4rpe5] {
    text-align: left;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--rz-text-secondary-color);
    font-weight: 600;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--rz-border-color-lighter);
    white-space: nowrap;
}

.bidc-table td[b-v262p4rpe5] {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--rz-border-color-lighter);
    vertical-align: top;
}

.bidc-table tbody tr:last-child td[b-v262p4rpe5] { border-bottom: none; }

.bidc-table__name[b-v262p4rpe5] { font-weight: 600; }

/* pre-line, bukan normal: spesifikasi dari RFQ sering ditulis berbaris-baris, dan
   meratakannya jadi satu paragraf menghilangkan daftarnya.                                 */
.bidc-table__spec[b-v262p4rpe5] {
    white-space: pre-line;
    color: var(--rz-text-secondary-color);
    overflow-wrap: anywhere;
}

.bidc-note[b-v262p4rpe5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    color: var(--rz-text-secondary-color);
    font-size: 0.85rem;
}

/* ---- panel keputusan ---- */

.bidc-section--decision[b-v262p4rpe5] { border-color: color-mix(in srgb, var(--rz-primary) 35%, transparent); }

.bidc-section--decision > label[b-v262p4rpe5],
.bidc-decision__hint[b-v262p4rpe5],
.bidc-decision__note[b-v262p4rpe5],
.bidc-error[b-v262p4rpe5],
.bidc-section--decision > textarea[b-v262p4rpe5] {
    display: block;
    margin: 0 1rem;
}

.bidc-decision__hint[b-v262p4rpe5] {
    margin-top: 1rem;
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
    color: var(--rz-text-secondary-color);
}

.bidc-section--decision > label[b-v262p4rpe5] {
    font-size: 0.82rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.bidc-required[b-v262p4rpe5] {
    font-weight: 500;
    color: #dc2626;
    margin-left: 0.3rem;
}

.bidc-section--decision > textarea[b-v262p4rpe5] {
    width: calc(100% - 2rem);
    resize: vertical;
    padding: 0.55rem 0.7rem;
    border-radius: 8px;
    border: 1px solid var(--rz-border-color-lighter);
    font: inherit;
    background: transparent;
    color: inherit;
}

.bidc-section--decision > textarea:focus[b-v262p4rpe5] {
    outline: none;
    border-color: var(--rz-primary);
}

.bidc-decision__note[b-v262p4rpe5] {
    margin-top: 0.35rem;
    font-size: 0.75rem;
    color: var(--rz-text-disabled-color);
}

.bidc-error[b-v262p4rpe5] {
    margin-top: 0.4rem;
    font-size: 0.8rem;
    color: #dc2626;
}

.bidc-decision__actions[b-v262p4rpe5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
}

.bidc-decision__spacer[b-v262p4rpe5] { flex: 1; }

.bidc-decision__actions--blocked[b-v262p4rpe5] { padding: 0; }
/* _content/P2PPortal.UI/Pages/DeliveryOrder/DeliveryOrders.razor.rz.scp.css */
/* Delivery list — sisa CSS minimal; layout pakai native Radzen. */
/* _content/P2PPortal.UI/Pages/DeliveryOrder/DeliveryOrderShip.razor.rz.scp.css */
/* DO ship — cuma yang Radzen gak punya: dropzone, file-sink, validation, guide. */

.dlvd-upload-panel[b-cq0s0z2alu] { display: flex; flex-direction: column; gap: 0.65rem; position: relative; }

.dlvd-upload-toolbar[b-cq0s0z2alu] {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem;
}

.dlvd-upload-filename[b-cq0s0z2alu] {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.74rem; color: var(--rz-text-secondary-color);
    max-width: min(100%, 420px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.dlvd-file-sink[b-cq0s0z2alu] {
    position: fixed;
    left: -10000px;
    top: 0;
    width: 0;
    height: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

/* InputFile = native input — harus ::deep di root */
[b-cq0s0z2alu] .dlvd-file-sink__input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    opacity: 0;
    font-size: 0;
}

.dlvd-dropzone[b-cq0s0z2alu] {
    position: relative; border: 2px dashed var(--rz-border-color);
    border-radius: 12px; background: var(--rz-base-background-color);
    transition: border-color 0.15s ease, background 0.15s ease;
    cursor: pointer;
}

.dlvd-dropzone.is-dragover[b-cq0s0z2alu] {
    border-color: var(--rz-primary);
    background: color-mix(in srgb, var(--rz-primary) 6%, transparent);
}

.dlvd-required[b-cq0s0z2alu] {
    color: var(--rz-danger);
    font-weight: 700;
    font-style: normal;
}

.dlvd-upload-label[b-cq0s0z2alu] {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--rz-text-secondary-color);
    margin: 0.35rem 0 0.25rem;
}

.dlvd-dropzone__inner[b-cq0s0z2alu] {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0.35rem; padding: 1.35rem 1rem; text-align: center;
}

.dlvd-dropzone__icon[b-cq0s0z2alu] { font-size: 2rem !important; color: var(--rz-primary); opacity: 0.85; }
.dlvd-dropzone__title[b-cq0s0z2alu] { font-size: 0.84rem; font-weight: 600; color: var(--rz-text-color); }
.dlvd-dropzone__hint[b-cq0s0z2alu] { font-size: 0.72rem; color: var(--rz-text-secondary-color); max-width: 520px; }

.dlvd-validation[b-cq0s0z2alu] {
    background: #fef3c7; border: 1px solid #fcd34d; border-radius: 8px; padding: 0.5rem 0.65rem;
    font-size: 0.76rem; color: #92400e;
}
.dlvd-validation__item + .dlvd-validation__item[b-cq0s0z2alu] { margin-top: 0.25rem; }
.dlvd-validation__details[b-cq0s0z2alu] { margin-top: 0.4rem; border-top: 1px solid #fcd34d; padding-top: 0.35rem; }
.dlvd-validation__details-head[b-cq0s0z2alu] {
    display: flex; align-items: center; justify-content: space-between;
    cursor: pointer; font-weight: 600; font-size: 0.74rem; user-select: none;
}
.dlvd-validation__details-body[b-cq0s0z2alu] { margin-top: 0.35rem; }

.dlvd-row-err[b-cq0s0z2alu] { background: color-mix(in srgb, #ef4444 6%, transparent); }

.dlvd-guide__head[b-cq0s0z2alu] {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.6rem 0.9rem; cursor: pointer;
    background: var(--rz-primary-lighter); font-size: 0.82rem; font-weight: 600;
}
.dlvd-guide__head span[b-cq0s0z2alu] { display: inline-flex; align-items: center; gap: 0.4rem; }
.dlvd-guide__body[b-cq0s0z2alu] { padding: 0.6rem 0.9rem; display: grid; grid-template-columns: 1fr; gap: 0.4rem; }
.dlvd-guide__item[b-cq0s0z2alu] {
    display: grid; grid-template-columns: 160px auto 1fr; gap: 0.5rem;
    align-items: center; font-size: 0.78rem;
}
.dlvd-guide__name[b-cq0s0z2alu] { font-weight: 600; }
.dlvd-guide__desc[b-cq0s0z2alu] { color: var(--rz-text-secondary-color); }

@media (max-width: 820px) {
    .dlvd-guide__item[b-cq0s0z2alu] { grid-template-columns: 1fr; }
}
/* _content/P2PPortal.UI/Pages/Invoice/PaymentReminders.razor.rz.scp.css */
/* ============================ Payment Reminder ============================ */
.pr-header[b-ylwvupdchn] {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem;
    padding: 0.85rem 1.15rem;
    background: linear-gradient(100deg, var(--rz-primary-lighter), color-mix(in srgb, var(--rz-primary) 6%, transparent));
    border-bottom: 1px solid var(--rz-border-color-lighter);
}
.pr-header__left[b-ylwvupdchn] { display: flex; align-items: center; gap: 0.85rem; min-width: 0; }
.pr-header__icon[b-ylwvupdchn] {
    width: 48px; height: 48px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center;
    background: var(--rz-primary); color: #fff; flex-shrink: 0; box-shadow: 0 6px 16px color-mix(in srgb, var(--rz-primary) 35%, transparent);
}
.pr-viewtoggle[b-ylwvupdchn] { display: inline-flex; gap: 0.15rem; padding: 0.15rem; border-radius: 10px; background: var(--rz-base-background-color); border: 1px solid var(--rz-border-color-lighter); }
.pr-body[b-ylwvupdchn] { padding: 1rem 1.15rem 2rem; }

/* stats */
.pr-stats[b-ylwvupdchn] { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.75rem; margin-bottom: 1.15rem; }
.pr-stat[b-ylwvupdchn] {
    display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem 1rem; border-radius: 14px;
    background: var(--rz-base-background-color); border: 1px solid var(--rz-border-color-lighter); box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.pr-stat[b-ylwvupdchn]  .rzi { font-size: 1.7rem; width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; }
.pr-stat__value[b-ylwvupdchn] { font-size: 1.4rem; font-weight: 700; line-height: 1.1; }
.pr-stat__value--sm[b-ylwvupdchn] { font-size: 1.05rem; }
.pr-stat__label[b-ylwvupdchn] { font-size: 0.72rem; color: var(--rz-text-secondary-color); }
.pr-stat--ready[b-ylwvupdchn]  .rzi { background: color-mix(in srgb, #16a34a 15%, transparent); color: #16a34a; }
.pr-stat--amount[b-ylwvupdchn]  .rzi { background: color-mix(in srgb, var(--rz-primary) 15%, transparent); color: var(--rz-primary); }
.pr-stat--soon[b-ylwvupdchn]  .rzi { background: color-mix(in srgb, #0ea5e9 15%, transparent); color: #0284c7; }
.pr-stat--bast[b-ylwvupdchn]  .rzi { background: color-mix(in srgb, #f59e0b 18%, transparent); color: #d97706; }

/* toolbar */
.pr-toolbar[b-ylwvupdchn] { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 1rem; }
.pr-tabs[b-ylwvupdchn] { display: inline-flex; flex-wrap: wrap; gap: 0.35rem; }
.pr-tab[b-ylwvupdchn] {
    display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.4rem 0.8rem; border-radius: 999px;
    border: 1px solid var(--rz-border-color-lighter); background: var(--rz-base-background-color);
    color: var(--rz-text-color); font-size: 0.82rem; cursor: pointer; transition: all 0.15s ease;
}
.pr-tab:hover[b-ylwvupdchn] { border-color: var(--rz-primary); }
.pr-tab[b-ylwvupdchn]  .rzi { font-size: 1rem; }
.pr-tab--active[b-ylwvupdchn] { background: var(--rz-primary); border-color: var(--rz-primary); color: #fff; box-shadow: 0 3px 10px color-mix(in srgb, var(--rz-primary) 30%, transparent); }
.pr-tab__count[b-ylwvupdchn] { font-size: 0.7rem; font-weight: 700; padding: 0.05rem 0.4rem; border-radius: 999px; background: color-mix(in srgb, var(--rz-text-color) 10%, transparent); }
.pr-tab--active .pr-tab__count[b-ylwvupdchn] { background: rgba(255,255,255,0.25); }

.pr-filters[b-ylwvupdchn] { display: inline-flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.pr-type[b-ylwvupdchn] { min-width: 130px; }
.pr-search[b-ylwvupdchn] {
    display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.7rem; border-radius: 10px;
    border: 1px solid var(--rz-border-color-lighter); background: var(--rz-base-background-color); min-width: 200px;
}
.pr-search[b-ylwvupdchn]  .rzi { color: var(--rz-text-secondary-color); font-size: 1.1rem; }
.pr-search input[b-ylwvupdchn] { border: none; outline: none; background: transparent; color: var(--rz-text-color); font-size: 0.85rem; width: 100%; }

/* cards */
.pr-cards[b-ylwvupdchn] { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 0.9rem; }
.pr-card[b-ylwvupdchn] {
    display: flex; flex-direction: column; gap: 0.5rem; padding: 1rem; border-radius: 16px;
    background: var(--rz-base-background-color); border: 1px solid var(--rz-border-color-lighter);
    box-shadow: 0 1px 3px rgba(0,0,0,0.05); transition: transform 0.15s ease, box-shadow 0.15s ease;
    position: relative; overflow: hidden;
}
.pr-card[b-ylwvupdchn]::before { content: ""; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: var(--rz-border-color); }
.pr-card--ready[b-ylwvupdchn]::before { background: #16a34a; }
.pr-card--soon[b-ylwvupdchn]::before { background: #0ea5e9; }
.pr-card--bast[b-ylwvupdchn]::before { background: #f59e0b; }
.pr-card--invoiced[b-ylwvupdchn]::before { background: #9ca3af; }
.pr-card:hover[b-ylwvupdchn] { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,0.1); }

.pr-card__top[b-ylwvupdchn] { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.pr-card__po[b-ylwvupdchn] { font-weight: 700; font-size: 0.95rem; }
.pr-card__title[b-ylwvupdchn] { font-size: 0.88rem; font-weight: 600; color: var(--rz-text-color); }
.pr-card__tags[b-ylwvupdchn] { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.pr-card__amount[b-ylwvupdchn] { font-size: 1.25rem; font-weight: 800; color: var(--rz-primary); }
.pr-card__meta[b-ylwvupdchn] { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; padding: 0.5rem 0; border-top: 1px dashed var(--rz-border-color-lighter); border-bottom: 1px dashed var(--rz-border-color-lighter); }
.pr-card__meta > div[b-ylwvupdchn] { display: flex; flex-direction: column; gap: 0.1rem; }
.pr-card__meta span[b-ylwvupdchn] { font-size: 0.64rem; color: var(--rz-text-secondary-color); text-transform: uppercase; letter-spacing: 0.02em; }
.pr-card__meta strong[b-ylwvupdchn] { font-size: 0.85rem; }
.pr-card__reason[b-ylwvupdchn] { display: flex; align-items: flex-start; gap: 0.35rem; font-size: 0.76rem; color: var(--rz-text-secondary-color); }
.pr-card__reason[b-ylwvupdchn]  .rzi { font-size: 0.95rem; margin-top: 1px; }
.pr-card__footer[b-ylwvupdchn] { display: flex; justify-content: flex-end; margin-top: 0.15rem; }

/* chips */
.pr-chip[b-ylwvupdchn] { display: inline-flex; align-items: center; font-size: 0.7rem; font-weight: 700; padding: 0.15rem 0.55rem; border-radius: 999px; white-space: nowrap; }
.pr-chip--ready[b-ylwvupdchn] { background: color-mix(in srgb, #16a34a 16%, transparent); color: #16a34a; }
.pr-chip--soon[b-ylwvupdchn] { background: color-mix(in srgb, #0ea5e9 15%, transparent); color: #0284c7; }
.pr-chip--bast[b-ylwvupdchn] { background: color-mix(in srgb, #f59e0b 18%, transparent); color: #d97706; }
.pr-chip--invoiced[b-ylwvupdchn] { background: color-mix(in srgb, #6b7280 14%, transparent); color: #6b7280; }

.pr-type-chip[b-ylwvupdchn] { display: inline-flex; align-items: center; font-size: 0.66rem; font-weight: 700; padding: 0.1rem 0.45rem; border-radius: 6px; white-space: nowrap; }
.pr-type-chip--1[b-ylwvupdchn] { background: color-mix(in srgb, #8b5cf6 14%, transparent); color: #7c3aed; }
.pr-type-chip--2[b-ylwvupdchn] { background: color-mix(in srgb, #0ea5e9 14%, transparent); color: #0284c7; }
.pr-type-chip--3[b-ylwvupdchn] { background: color-mix(in srgb, #16a34a 14%, transparent); color: #16a34a; }
.pr-type-chip--svc[b-ylwvupdchn] { background: color-mix(in srgb, #f59e0b 16%, transparent); color: #d97706; }

.pr-text-urgent[b-ylwvupdchn] { color: #dc2626; font-weight: 700; }

.pr-empty[b-ylwvupdchn] { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 3rem 1rem; color: var(--rz-text-secondary-color); }
.pr-empty[b-ylwvupdchn]  .rzi { font-size: 2.5rem; opacity: 0.5; }
.pr-grid[b-ylwvupdchn] { border-radius: 12px; overflow: hidden; }
/* _content/P2PPortal.UI/Pages/News/News.razor.rz.scp.css */
.news-page-header[b-723as8dmky] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--rz-primary-lighter);
    border-bottom: 1px solid var(--rz-border-color-lighter);
}

.news-page-header__left[b-723as8dmky] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.news-page-header__icon[b-723as8dmky] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--rz-primary) 12%, transparent);
    color: var(--rz-primary);
    flex-shrink: 0;
}

.news-select-dot[b-723as8dmky] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    background: var(--rz-border-color);
}

.news-select-dot.is-selected[b-723as8dmky] {
    background: var(--rz-primary);
}
/* _content/P2PPortal.UI/Pages/News/NewsReadDialog.razor.rz.scp.css */
.news-read-dialog[b-kv5oecjmfv] {
    max-height: 78vh;
    overflow: auto;
    padding: 1.25rem 1.35rem 1rem;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.98)),
        repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.025) 0, rgba(0, 0, 0, 0.025) 1px, transparent 1px, transparent 9px);
}

.news-read-dialog__header[b-kv5oecjmfv] {
    text-align: center;
}

.news-read-dialog__kicker[b-kv5oecjmfv] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.35rem;
    margin: 0 0 0.85rem 0;
    color: var(--rz-primary);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
}

.news-read-dialog__kicker:hover[b-kv5oecjmfv] {
    text-decoration: underline;
}

.news-read-dialog__kicker .rz-icon[b-kv5oecjmfv] {
    font-size: 1rem;
}

.news-read-dialog__title[b-kv5oecjmfv] {
    color: #202020;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.35rem, 3vw, 2.2rem);
    font-weight: 700;
    line-height: 1.08;
    margin: 0 auto;
    max-width: 820px;
}

.news-read-dialog__title[b-kv5oecjmfv]  :is(h1, h2, h3, h4, h5, h6, p, div) {
    margin: 0;
}

.news-read-dialog__meta[b-kv5oecjmfv] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    margin-top: 0.75rem;
    color: #6c757d;
    font-size: 0.76rem;
}

.news-read-dialog__divider[b-kv5oecjmfv] {
    border-top: 2px solid #2d2d2d;
    border-bottom: 1px solid #b7b7b7;
    height: 0.25rem;
    margin: 1rem 0;
}

.news-read-dialog__thumb-wrap[b-kv5oecjmfv] {
    display: flex;
    justify-content: center;
    margin: 0 auto 1rem;
}

.news-read-dialog__thumb[b-kv5oecjmfv] {
    display: block;
    width: auto;
    max-width: 70%;
    height: auto;
    border-radius: 0.45rem;
    border: 1px solid var(--rz-border-color-lighter);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
    object-fit: contain;
}

.news-read-dialog__body[b-kv5oecjmfv] {
    color: #2f2f2f;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 0.95rem;
    line-height: 1.62;
    margin: 0 auto;
    max-width: 860px;
}

.news-read-dialog__body[b-kv5oecjmfv]  :is(p, ul, ol, blockquote, table, pre) {
    margin-bottom: 0.75rem;
}

.news-read-dialog__body[b-kv5oecjmfv]  :is(h1, h2, h3, h4, h5, h6) {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 700;
    line-height: 1.2;
    margin: 1rem 0 0.45rem;
}

.news-read-dialog__body[b-kv5oecjmfv]  a {
    color: var(--rz-primary);
    text-decoration: underline;
}

.news-read-dialog__body[b-kv5oecjmfv]  blockquote {
    border-left: 3px solid var(--rz-primary);
    color: #555;
    font-style: italic;
    padding-left: 0.85rem;
}

.news-read-dialog__body[b-kv5oecjmfv]  table {
    border-collapse: collapse;
    font-family: var(--rz-text-font-family);
    font-size: 0.82rem;
    width: 100%;
}

.news-read-dialog__body[b-kv5oecjmfv]  th,
.news-read-dialog__body[b-kv5oecjmfv]  td {
    border: 1px solid var(--rz-border-color-lighter);
    padding: 0.35rem 0.45rem;
    vertical-align: top;
}

.news-read-dialog__footer[b-kv5oecjmfv] {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
}
/* _content/P2PPortal.UI/Pages/Notification/Notifications.razor.rz.scp.css */
/* Halaman daftar notifikasi.

   Warna diambil dari variabel tema Radzen (--rz-*), bukan hex: Portal punya pemilih tema di
   sidebar dan warna yang dipatok akan salah di separuh temanya. color-mix dipakai untuk
   turunan lembutnya supaya satu variabel tetap jadi sumber warna.                              */

.notif-body[b-3ylgytmgeg] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* ---- Toolbar: tab + saringan ------------------------------------------------------------ */

.notif-toolbar[b-3ylgytmgeg] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.notif-tabs[b-3ylgytmgeg] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.notif-tab[b-3ylgytmgeg] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--rz-border-color, rgba(128, 128, 128, 0.25));
    border-radius: 999px;
    background: transparent;
    color: var(--rz-text-color);
    font-size: 0.8125rem;
    font-family: inherit;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.notif-tab:hover[b-3ylgytmgeg] {
    background: color-mix(in srgb, var(--rz-primary) 8%, transparent);
}

.notif-tab--active[b-3ylgytmgeg] {
    background: color-mix(in srgb, var(--rz-primary) 14%, transparent);
    border-color: var(--rz-primary);
    color: var(--rz-primary);
    font-weight: 600;
}

.notif-tab .rzi[b-3ylgytmgeg] {
    font-size: 1rem;
}

/* Lencana merah = ada yang belum dibaca. Angka abu = cuma jumlah isi. Dua bentuk berbeda
   supaya "5 belum dibaca" tidak terbaca sama dengan "5 notifikasi".                           */
.notif-tab__badge[b-3ylgytmgeg] {
    min-width: 1.125rem;
    height: 1.125rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: var(--rz-danger, #dc3545);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.notif-tab__count[b-3ylgytmgeg] {
    font-size: 0.6875rem;
    color: var(--rz-text-secondary-color);
}

.notif-toolbar__filters[b-3ylgytmgeg] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

/* RadzenLabel merender <label class="rz-label"> di dalam komponennya sendiri, jadi atribut
   scoped CSS tidak menempel padanya - selektornya harus lewat pembungkus yang memang milik
   halaman ini. */
.notif-toolbar__filters .rz-label[b-3ylgytmgeg] {
    font-size: 0.8125rem;
    color: var(--rz-text-secondary-color);
    cursor: pointer;
    margin: 0;
}

/* ---- Kartu notifikasi -------------------------------------------------------------------- */

.notif-list[b-3ylgytmgeg] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Kartunya tidak bisa diklik lagi - cursor: pointer dan efek angkat saat hover ikut dibuang
   bersamanya. Keduanya adalah janji: yang menyala saat disentuh akan melakukan sesuatu saat
   ditekan. Menyisakan janji itu di kartu yang diam membuat vendor mengklik berkali-kali dan
   menyimpulkan halamannya rusak.

   Teksnya juga jadi bisa diseleksi seperti teks biasa - dulu menyorot pesan untuk disalin
   malah memicu navigasi.                                                                     */
.notif-card[b-3ylgytmgeg] {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--rz-border-color, rgba(128, 128, 128, 0.2));
    border-radius: 0.5rem;
    background: var(--rz-base-background-color, transparent);
}

/* Belum dibaca: latar tipis + garis kiri. Dua penanda sekaligus karena latar tipis saja hampir
   tak terlihat di tema gelap.                                                                  */
.notif-card--unread[b-3ylgytmgeg] {
    background: color-mix(in srgb, var(--rz-primary) 7%, transparent);
    border-left: 3px solid var(--rz-primary);
}

.notif-card__icon[b-3ylgytmgeg] {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: color-mix(in srgb, var(--rz-text-secondary-color) 12%, transparent);
    color: var(--rz-text-secondary-color);
}

.notif-card__icon .rzi[b-3ylgytmgeg] {
    font-size: 1.125rem;
}

.notif-card__body[b-3ylgytmgeg] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
    min-width: 0;
}

.notif-card__head[b-3ylgytmgeg] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.notif-card__title[b-3ylgytmgeg] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--rz-text-color);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notif-card--unread .notif-card__title[b-3ylgytmgeg] {
    font-weight: 700;
}

.notif-card__dot[b-3ylgytmgeg] {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--rz-primary);
    flex-shrink: 0;
}

/* Di halaman ini pesannya boleh tiga baris - ini memang tempat membacanya, tidak seperti
   lonceng yang harus memuat selusin baris di ruang sempit.                                     */
.notif-card__message[b-3ylgytmgeg] {
    font-size: 0.8125rem;
    color: var(--rz-text-secondary-color);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notif-card__meta[b-3ylgytmgeg] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.6875rem;
    color: var(--rz-text-disabled-color);
}

/* Satu-satunya yang bisa ditekan di dalam kartu.

   Dulu ini <span class="notif-card__link"> - hiasan yang menumpang klik milik kartu. Sekarang
   <button> betulan, jadi ia perlu reset milik tombol (border, background, font) plus sasaran
   sentuh yang cukup besar: teks 11px setinggi satu baris nyaris mustahil ditekan di layar
   sentuh, karena itu ada padding dan latar tipis yang membuat batasnya terlihat.              */
.notif-card__action[b-3ylgytmgeg] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.2rem 0.5rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background: color-mix(in srgb, var(--rz-primary) 12%, transparent);
    color: var(--rz-primary);
    font-family: inherit;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
}

.notif-card__action:hover[b-3ylgytmgeg] {
    background: color-mix(in srgb, var(--rz-primary) 22%, transparent);
}

/* Fokus keyboard dipatok eksplisit: kartunya sudah tidak punya tabindex, jadi tombol inilah
   satu-satunya perhentian Tab di dalam kartu - dan ia harus terlihat saat disinggahi.         */
.notif-card__action:focus-visible[b-3ylgytmgeg] {
    outline: none;
    border-color: var(--rz-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--rz-primary) 30%, transparent);
}

/* "Mark as read" bukan tindakan utama - ia hanya membereskan daftar, tidak membawa ke mana
   pun. Warnanya diredam supaya tidak bersaing dengan Open di kartu sebelahnya.                */
.notif-card__action--muted[b-3ylgytmgeg] {
    background: color-mix(in srgb, var(--rz-text-secondary-color) 14%, transparent);
    color: var(--rz-text-secondary-color);
}

.notif-card__action--muted:hover[b-3ylgytmgeg] {
    background: color-mix(in srgb, var(--rz-text-secondary-color) 24%, transparent);
}

.notif-card__action .rzi[b-3ylgytmgeg] {
    font-size: 0.875rem;
}

/* ---- Chip kategori ----------------------------------------------------------------------- */

.notif-chip[b-3ylgytmgeg] {
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    background: color-mix(in srgb, var(--rz-text-secondary-color) 14%, transparent);
    color: var(--rz-text-secondary-color);
}

.notif-chip--bidding[b-3ylgytmgeg],
.notif-card__icon--bidding[b-3ylgytmgeg] {
    background: color-mix(in srgb, var(--rz-info, #0288d1) 16%, transparent);
    color: var(--rz-info, #0288d1);
}

.notif-chip--purchase[b-3ylgytmgeg],
.notif-card__icon--purchase[b-3ylgytmgeg] {
    background: color-mix(in srgb, var(--rz-primary) 16%, transparent);
    color: var(--rz-primary);
}

.notif-chip--delivery[b-3ylgytmgeg],
.notif-card__icon--delivery[b-3ylgytmgeg] {
    background: color-mix(in srgb, var(--rz-warning, #ed6c02) 16%, transparent);
    color: var(--rz-warning, #ed6c02);
}

.notif-chip--payment[b-3ylgytmgeg],
.notif-card__icon--payment[b-3ylgytmgeg] {
    background: color-mix(in srgb, var(--rz-success, #2e7d32) 16%, transparent);
    color: var(--rz-success, #2e7d32);
}

.notif-chip--document[b-3ylgytmgeg],
.notif-card__icon--document[b-3ylgytmgeg] {
    background: color-mix(in srgb, var(--rz-secondary, #6c757d) 18%, transparent);
    color: var(--rz-secondary, #6c757d);
}

/* ---- Keadaan kosong & memuat ------------------------------------------------------------- */

.notif-loading[b-3ylgytmgeg] {
    display: flex;
    justify-content: center;
    padding: 2.5rem 0;
}

.notif-empty[b-3ylgytmgeg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 3rem 1rem;
    color: var(--rz-text-secondary-color);
    border: 1px dashed var(--rz-border-color, rgba(128, 128, 128, 0.3));
    border-radius: 0.5rem;
}

.notif-empty .rzi[b-3ylgytmgeg] {
    font-size: 2rem;
}

.notif-pager[b-3ylgytmgeg] {
    margin-top: 0.25rem;
}

/* ---- Layar sempit ------------------------------------------------------------------------ */

@media (max-width: 640px) {
    .notif-toolbar[b-3ylgytmgeg] {
        align-items: flex-start;
        flex-direction: column;
    }

    .notif-tabs[b-3ylgytmgeg] {
        width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 0.25rem;
    }

    .notif-tab[b-3ylgytmgeg] {
        flex-shrink: 0;
    }
}
/* _content/P2PPortal.UI/Pages/VendorManagement/CompletionDocumentRequestForm.razor.rz.scp.css */
/* CDR form — layout upload & doc-card. Warna kartu pakai token rz-* di markup. */

.cdr-upload-cell[b-8wi7gkajwa] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
}

.cdr-upload-name[b-8wi7gkajwa] {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
}

.cdr-upload[b-8wi7gkajwa] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.45rem;
    font-size: 0.78rem;
    line-height: 1.2;
    border: 1px solid var(--rz-border-color);
    border-radius: var(--rz-border-radius);
    background: var(--rz-base-background-color);
    color: var(--rz-text-color);
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
    overflow: hidden;
}

.cdr-upload:hover[b-8wi7gkajwa] {
    background: var(--rz-base-light);
}

/* InputFile child — harus ::deep biar native "No file chosen" ketutup */
[b-8wi7gkajwa] .cdr-upload__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    font-size: 0;
}

.cdr-doc-cards[b-8wi7gkajwa] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin-top: 0.35rem;
}

.cdr-doc-cards__empty[b-8wi7gkajwa] {
    padding: 0.75rem;
    text-align: center;
    color: var(--rz-text-secondary-color);
    font-size: 0.85rem;
}

.cdr-doc-card[b-8wi7gkajwa] {
    border: 1px solid var(--rz-border-color-lighter);
    border-radius: var(--rz-border-radius);
    padding: 0.45rem 0.55rem;
}

.cdr-doc-card__header[b-8wi7gkajwa] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.35rem;
    flex-wrap: wrap;
    padding: 0.25rem 0.35rem;
    border-radius: calc(var(--rz-border-radius) - 2px);
}

.cdr-doc-card__title[b-8wi7gkajwa] {
    font-size: 0.85rem;
    font-weight: 700;
}

.cdr-doc-card__badge[b-8wi7gkajwa] {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--rz-danger) 14%, transparent);
    color: var(--rz-danger);
}

.cdr-doc-card__grid[b-8wi7gkajwa] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.35rem 0.65rem;
}

@media (max-width: 768px) {
    .cdr-doc-card__grid[b-8wi7gkajwa] {
        grid-template-columns: 1fr;
    }
}

.cdr-doc-field[b-8wi7gkajwa] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.cdr-doc-field__label[b-8wi7gkajwa] {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--rz-text-secondary-color);
}

.cdr-doc-field__value[b-8wi7gkajwa] {
    font-size: 0.82rem;
    min-height: 1.4rem;
    display: flex;
    align-items: center;
}

.cdr-doc-card__upload[b-8wi7gkajwa] {
    margin-top: 0.35rem;
    padding-top: 0.35rem;
    border-top: 1px solid var(--rz-border-color-lighter);
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
/* _content/P2PPortal.UI/Pages/VendorManagement/CompletionDocumentRequestList.razor.rz.scp.css */
/* CDR list — sisa CSS buat tint baris due-soon / overdue saja. */

.cdr-grid[b-2mjtpcetji]  tr.cdr-row--due-soon > td {
    background: color-mix(in srgb, #f59e0b 8%, var(--rz-base-background-color));
}

.cdr-grid[b-2mjtpcetji]  tr.cdr-row--overdue > td {
    background: color-mix(in srgb, #ef4444 8%, var(--rz-base-background-color));
}
/* _content/P2PPortal.UI/Pages/VendorManagement/CompletionDocumentRequestView.razor.rz.scp.css */
/* CDR view — file cell aja. Header tabel pakai portal-doc-table. */

.cdr-file-cell[b-g74aooytb0] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    min-width: 0;
}

.cdr-file-name[b-g74aooytb0] {
    display: block;
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
}
/* _content/P2PPortal.UI/Pages/VendorManagement/VendorProfile.razor.rz.scp.css */
/* ============================ Vendor Profile ============================ */
.vp-hero[b-sv8yousyhn] {
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
    padding: 1.25rem 1.4rem; margin: 0.9rem 1.15rem 0;
    border-radius: 18px; color: #fff;
    background: linear-gradient(115deg, var(--rz-primary), color-mix(in srgb, var(--rz-primary) 55%, #0ea5e9));
    box-shadow: 0 10px 28px color-mix(in srgb, var(--rz-primary) 35%, transparent);
}
.vp-hero__avatar[b-sv8yousyhn] {
    width: 66px; height: 66px; border-radius: 20px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.6rem; font-weight: 800; letter-spacing: 0.02em;
    background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.35);
}
.vp-hero__main[b-sv8yousyhn] { flex: 1; min-width: 0; }
.vp-hero__name[b-sv8yousyhn] { font-size: 1.5rem; font-weight: 800; line-height: 1.15; }
.vp-hero__code[b-sv8yousyhn] { font-size: 0.85rem; opacity: 0.9; }
.vp-hero__badges[b-sv8yousyhn] { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.5rem; }
.vp-hero__actions[b-sv8yousyhn] { display: flex; gap: 0.4rem; flex-wrap: wrap; }

.vp-badge[b-sv8yousyhn] { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.7rem; font-weight: 700; padding: 0.15rem 0.55rem; border-radius: 999px; }
.vp-badge[b-sv8yousyhn]  .rzi { font-size: 0.8rem; }
.vp-badge--ok[b-sv8yousyhn] { background: rgba(255,255,255,0.22); color: #fff; }
.vp-badge--info[b-sv8yousyhn] { background: color-mix(in srgb, #0ea5e9 22%, transparent); color: #fff; }
.vp-badge--muted[b-sv8yousyhn] { background: rgba(255,255,255,0.14); color: #fff; }
.vp-badge--danger[b-sv8yousyhn] { background: color-mix(in srgb, #ef4444 40%, transparent); color: #fff; }

/* badges inside cards (dark text on light) */
.vp-item .vp-badge--ok[b-sv8yousyhn], .vp-pic__name .vp-badge--info[b-sv8yousyhn] { background: color-mix(in srgb, #16a34a 16%, transparent); color: #16a34a; }
.vp-pic__name .vp-badge--info[b-sv8yousyhn] { background: color-mix(in srgb, var(--rz-primary) 15%, transparent); color: var(--rz-primary); }

.vp-editnote[b-sv8yousyhn] {
    display: flex; align-items: center; gap: 0.4rem; margin: 0.75rem 1.15rem 0;
    padding: 0.6rem 0.9rem; border-radius: 12px; font-size: 0.82rem;
    background: color-mix(in srgb, #f59e0b 12%, transparent); color: #b45309;
    border: 1px dashed color-mix(in srgb, #f59e0b 45%, transparent);
}
.vp-editnote[b-sv8yousyhn]  .rzi { color: #d97706; }

.vp-body[b-sv8yousyhn] {
    display: grid;
    grid-template-columns: 1fr 1.8fr;
    gap: 1rem;
    padding: 1rem 1.15rem 2.5rem;
}
.vp-col[b-sv8yousyhn] { display: flex; flex-direction: column; gap: 1rem; }

.vp-card[b-sv8yousyhn] {
    background: var(--rz-base-background-color); border: 1px solid var(--rz-border-color-lighter);
    border-radius: 16px; padding: 1rem 1.1rem; box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.vp-card--editing[b-sv8yousyhn] { border-color: color-mix(in srgb, var(--rz-primary) 45%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rz-primary) 10%, transparent); }
.vp-card__head[b-sv8yousyhn] {
    display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap;
    font-size: 0.95rem; font-weight: 700; margin-bottom: 0.85rem; padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--rz-border-color-lighter);
}
.vp-card__head[b-sv8yousyhn]  .rzi { color: var(--rz-primary); }
.vp-editchip[b-sv8yousyhn] { margin-left: auto; font-size: 0.66rem; font-weight: 700; padding: 0.1rem 0.5rem; border-radius: 999px; background: color-mix(in srgb, var(--rz-primary) 14%, transparent); color: var(--rz-primary); }

/* key-value grid */
.vp-kv[b-sv8yousyhn] { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem 1.2rem; }
.vp-kv > div[b-sv8yousyhn] { display: flex; flex-direction: column; gap: 0.1rem; }
.vp-kv span[b-sv8yousyhn] { font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--rz-text-secondary-color); }
.vp-kv strong[b-sv8yousyhn] { font-size: 0.85rem; }
.vp-kv__wide[b-sv8yousyhn] { grid-column: 1 / -1; }

/* generic list items (address/bank) */
.vp-list[b-sv8yousyhn] { display: flex; flex-direction: column; gap: 0.6rem; }
.vp-item[b-sv8yousyhn] { padding: 0.6rem 0.75rem; border-radius: 12px; background: color-mix(in srgb, var(--rz-primary) 3%, transparent); border: 1px solid var(--rz-border-color-lighter); }
.vp-item__top[b-sv8yousyhn] { display: flex; align-items: center; gap: 0.4rem; }
.vp-item__sub[b-sv8yousyhn] { font-size: 0.78rem; color: var(--rz-text-secondary-color); }
.vp-item__meta[b-sv8yousyhn] { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 0.3rem; font-size: 0.76rem; color: var(--rz-text-secondary-color); }
.vp-item__meta span[b-sv8yousyhn] { display: inline-flex; align-items: center; gap: 0.25rem; }
.vp-item__meta[b-sv8yousyhn]  .rzi { font-size: 0.9rem; }

/* PIC */
.vp-pic[b-sv8yousyhn] { display: flex; align-items: center; gap: 0.7rem; padding: 0.5rem 0; }
.vp-pic--main[b-sv8yousyhn] { padding: 0.6rem 0.75rem; border-radius: 12px; background: color-mix(in srgb, var(--rz-primary) 6%, transparent); }
.vp-pic__avatar[b-sv8yousyhn] {
    width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; color: #fff; background: var(--rz-primary);
}
.vp-pic__avatar--alt[b-sv8yousyhn] { background: #8b5cf6; }
.vp-pic__name[b-sv8yousyhn] { font-weight: 700; font-size: 0.9rem; display: flex; align-items: center; gap: 0.4rem; }
.vp-pic__meta[b-sv8yousyhn] { display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: 0.75rem; color: var(--rz-text-secondary-color); align-items: center; }
.vp-pic__meta[b-sv8yousyhn]  .rzi { font-size: 0.85rem; }
.vp-subhead[b-sv8yousyhn] { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--rz-text-secondary-color); margin: 0.7rem 0 0.3rem; }

/* tables (docs / edit) */
.vp-tablewrap[b-sv8yousyhn] { overflow-x: auto; border: 1px solid var(--rz-border-color-lighter); border-radius: 10px; }
.vp-table[b-sv8yousyhn] { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.vp-table thead th[b-sv8yousyhn] { text-align: left; padding: 0.45rem 0.6rem; background: var(--rz-primary-lighter); font-weight: 700; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.02em; white-space: nowrap; }
.vp-table tbody td[b-sv8yousyhn] { padding: 0.4rem 0.6rem; border-top: 1px solid var(--rz-border-color-lighter); vertical-align: middle; }
.vp-inp[b-sv8yousyhn] { width: 100%; }

/* category chips */
.vp-chips[b-sv8yousyhn] { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.vp-cat-chip[b-sv8yousyhn] { font-size: 0.76rem; font-weight: 600; padding: 0.2rem 0.7rem; border-radius: 999px; background: color-mix(in srgb, #8b5cf6 12%, transparent); color: #7c3aed; }

@media (max-width: 900px) {
    .vp-body[b-sv8yousyhn] { grid-template-columns: 1fr; }
    .vp-kv[b-sv8yousyhn] { grid-template-columns: 1fr; }
}


/* ── Logo perusahaan ───────────────────────────────────────────────────────────────────
   Kotak preview dibuat berukuran tetap dengan object-fit: contain: logo vendor datang
   dengan rasio apa saja, dan meregangkannya agar pas justru merusak merek orang. */
.vp-logo[b-sv8yousyhn] { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-start; }

.vp-logo__preview[b-sv8yousyhn] {
    width: 200px; height: 84px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border: 1px dashed var(--rz-border-color, #d4d4d8);
    border-radius: 12px;
    background: var(--rz-base-background-color, #fff);
    overflow: hidden;
}
.vp-logo__preview img[b-sv8yousyhn] { max-width: 100%; max-height: 100%; object-fit: contain; }

.vp-logo__empty[b-sv8yousyhn] {
    display: flex; flex-direction: column; align-items: center; gap: .2rem;
    font-size: .72rem; color: var(--rz-text-disabled-color, #9ca3af);
}
.vp-logo__empty[b-sv8yousyhn]  .rzi { font-size: 1.5rem; }

.vp-logo__side[b-sv8yousyhn] { flex: 1; min-width: 220px; }
.vp-logo__hint[b-sv8yousyhn] { margin: 0 0 .5rem; font-size: .76rem; color: var(--rz-text-secondary-color, #6b7280); }

.vp-logo__msg[b-sv8yousyhn] {
    display: flex; align-items: center; gap: .4rem;
    font-size: .76rem; padding: .4rem .6rem; border-radius: 8px; margin-bottom: .5rem;
}
.vp-logo__msg--error[b-sv8yousyhn] { background: color-mix(in srgb, #ef4444 12%, transparent); color: #b91c1c; }
.vp-logo__msg--ok[b-sv8yousyhn]    { background: color-mix(in srgb, #16a34a 14%, transparent); color: #15803d; }

.vp-logo__actions[b-sv8yousyhn] { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }

/* InputFile disembunyikan dan digantikan label ber-style, supaya tombolnya sepadan dengan
   RadzenButton di sebelahnya. Jangan pakai display:none - itu membuat input tidak bisa
   dijangkau keyboard. */
.vp-logo__input[b-sv8yousyhn] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }

.vp-logo__btn[b-sv8yousyhn] {
    display: inline-flex; align-items: center; gap: .35rem; cursor: pointer;
    font-size: .8rem; font-weight: 600; padding: .35rem .8rem; border-radius: 6px;
    color: #fff; background: var(--rz-primary);
}
.vp-logo__btn:hover[b-sv8yousyhn] { filter: brightness(1.06); }
.vp-logo__btn--busy[b-sv8yousyhn] { opacity: .6; pointer-events: none; }
.vp-logo__input:focus-visible + .vp-logo__btn[b-sv8yousyhn] { outline: 2px solid var(--rz-primary); outline-offset: 2px; }

.vp-bank-table[b-sv8yousyhn] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

    .vp-bank-table thead th[b-sv8yousyhn] {
        background: var(--rz-primary-lighter);
        color: var(--rz-text-secondary-color);
        font-weight: 700;
        font-size: 0.68rem;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        padding: 0.45rem 0.5rem;
        white-space: nowrap;
        text-align: left;
    }

    .vp-bank-table tbody td[b-sv8yousyhn] {
        padding: 0.4rem 0.5rem;
        border-top: 1px solid var(--rz-border-color-lighter);
        vertical-align: middle;
    }

[b-sv8yousyhn] .vp-bank-table tbody td + td {
    padding-left: 0.75rem;
}

[b-sv8yousyhn] .vp-bank-table thead th + th {
    padding-left: 0.75rem;
}

.vp-card-wide[b-sv8yousyhn] {
    background: var(--rz-base-background-color);
    border: 1px solid var(--rz-border-color-lighter);
    border-radius: 16px;
    padding: 1rem 1.1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    width: 100%;
    overflow-x: auto;
}
/* _content/P2PPortal.UI/Pages/VendorManagement/VendorProfileToBe.razor.rz.scp.css */
/* CSS for VendorProfileToBe component */
/* ============================ Vendor Profile ============================ */
.vp-hero[b-yxyqk23w7s] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1.25rem 1.4rem;
    margin: 0.9rem 1.15rem 0;
    border-radius: 18px;
    color: #fff;
    background: linear-gradient(115deg, var(--rz-primary), color-mix(in srgb, var(--rz-primary) 55%, #0ea5e9));
    box-shadow: 0 10px 28px color-mix(in srgb, var(--rz-primary) 35%, transparent);
}

.vp-hero__avatar[b-yxyqk23w7s] {
    width: 66px;
    height: 66px;
    border-radius: 20px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.35);
}

.vp-hero__main[b-yxyqk23w7s] {
    flex: 1;
    min-width: 0;
}

.vp-hero__name[b-yxyqk23w7s] {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.15;
}

.vp-hero__code[b-yxyqk23w7s] {
    font-size: 0.85rem;
    opacity: 0.9;
}

.vp-hero__badges[b-yxyqk23w7s] {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.vp-hero__actions[b-yxyqk23w7s] {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.vp-badge[b-yxyqk23w7s] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
}

    .vp-badge[b-yxyqk23w7s]  .rzi {
        font-size: 0.8rem;
    }

.vp-badge--ok[b-yxyqk23w7s] {
    background: rgba(255,255,255,0.22);
    color: #fff;
}

.vp-badge--info[b-yxyqk23w7s] {
    background: color-mix(in srgb, #0ea5e9 22%, transparent);
    color: #fff;
}

.vp-badge--muted[b-yxyqk23w7s] {
    background: rgba(255,255,255,0.14);
    color: #fff;
}

.vp-badge--danger[b-yxyqk23w7s] {
    background: color-mix(in srgb, #ef4444 40%, transparent);
    color: #fff;
}

/* badges inside cards (dark text on light) */
.vp-item .vp-badge--ok[b-yxyqk23w7s], .vp-pic__name .vp-badge--info[b-yxyqk23w7s] {
    background: color-mix(in srgb, #16a34a 16%, transparent);
    color: #16a34a;
}

.vp-pic__name .vp-badge--info[b-yxyqk23w7s] {
    background: color-mix(in srgb, var(--rz-primary) 15%, transparent);
    color: var(--rz-primary);
}

.vp-editnote[b-yxyqk23w7s] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.75rem 1.15rem 0;
    padding: 0.6rem 0.9rem;
    border-radius: 12px;
    font-size: 0.82rem;
    background: color-mix(in srgb, #f59e0b 12%, transparent);
    color: #b45309;
    border: 1px dashed color-mix(in srgb, #f59e0b 45%, transparent);
}

    .vp-editnote[b-yxyqk23w7s]  .rzi {
        color: #d97706;
    }

.vp-body[b-yxyqk23w7s] {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 1rem;
    padding: 1rem 1.15rem 2.5rem;
}

.vp-col[b-yxyqk23w7s] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.vp-card[b-yxyqk23w7s] {
    background: var(--rz-base-background-color);
    border: 1px solid var(--rz-border-color-lighter);
    border-radius: 16px;
    padding: 1rem 1.1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.vp-card--editing[b-yxyqk23w7s] {
    border-color: color-mix(in srgb, var(--rz-primary) 45%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--rz-primary) 10%, transparent);
}

.vp-card__head[b-yxyqk23w7s] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 0.85rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--rz-border-color-lighter);
}

    .vp-card__head[b-yxyqk23w7s]  .rzi {
        color: var(--rz-primary);
    }

.vp-editchip[b-yxyqk23w7s] {
    margin-left: auto;
    font-size: 0.66rem;
    font-weight: 700;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--rz-primary) 14%, transparent);
    color: var(--rz-primary);
}

/* key-value grid */
.vp-kv[b-yxyqk23w7s] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem 1.2rem;
}

    .vp-kv > div[b-yxyqk23w7s] {
        display: flex;
        flex-direction: column;
        gap: 0.1rem;
    }

    .vp-kv span[b-yxyqk23w7s] {
        font-size: 0.64rem;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: var(--rz-text-secondary-color);
    }

    .vp-kv strong[b-yxyqk23w7s] {
        font-size: 0.85rem;
    }

.vp-kv__wide[b-yxyqk23w7s] {
    grid-column: 1 / -1;
}

/* generic list items (address/bank) */
.vp-list[b-yxyqk23w7s] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.vp-item[b-yxyqk23w7s] {
    padding: 0.6rem 0.75rem;
    border-radius: 12px;
    background: color-mix(in srgb, var(--rz-primary) 3%, transparent);
    border: 1px solid var(--rz-border-color-lighter);
}

.vp-item__top[b-yxyqk23w7s] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.vp-item__sub[b-yxyqk23w7s] {
    font-size: 0.78rem;
    color: var(--rz-text-secondary-color);
}

.vp-item__meta[b-yxyqk23w7s] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-top: 0.3rem;
    font-size: 0.76rem;
    color: var(--rz-text-secondary-color);
}

    .vp-item__meta span[b-yxyqk23w7s] {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
    }

    .vp-item__meta[b-yxyqk23w7s]  .rzi {
        font-size: 0.9rem;
    }

/* PIC */
.vp-pic[b-yxyqk23w7s] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.5rem 0;
}

.vp-pic--main[b-yxyqk23w7s] {
    padding: 0.6rem 0.75rem;
    border-radius: 12px;
    background: color-mix(in srgb, var(--rz-primary) 6%, transparent);
}

.vp-pic__avatar[b-yxyqk23w7s] {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #fff;
    background: var(--rz-primary);
}

.vp-pic__avatar--alt[b-yxyqk23w7s] {
    background: #8b5cf6;
}

.vp-pic__name[b-yxyqk23w7s] {
    font-weight: 700;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.vp-pic__meta[b-yxyqk23w7s] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
    align-items: center;
}

    .vp-pic__meta[b-yxyqk23w7s]  .rzi {
        font-size: 0.85rem;
    }

.vp-subhead[b-yxyqk23w7s] {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--rz-text-secondary-color);
    margin: 0.7rem 0 0.3rem;
}

/* tables (docs / edit) */
.vp-tablewrap[b-yxyqk23w7s] {
    overflow-x: auto;
    border: 1px solid var(--rz-border-color-lighter);
    border-radius: 10px;
}

.vp-table[b-yxyqk23w7s] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

    .vp-table thead th[b-yxyqk23w7s] {
        text-align: left;
        padding: 0.45rem 0.6rem;
        background: var(--rz-primary-lighter);
        font-weight: 700;
        font-size: 0.68rem;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        white-space: nowrap;
    }

    .vp-table tbody td[b-yxyqk23w7s] {
        padding: 0.4rem 0.6rem;
        border-top: 1px solid var(--rz-border-color-lighter);
        vertical-align: middle;
    }

.vp-inp[b-yxyqk23w7s] {
    width: 100%;
}

/* category chips */
.vp-chips[b-yxyqk23w7s] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.vp-cat-chip[b-yxyqk23w7s] {
    font-size: 0.76rem;
    font-weight: 600;
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    background: color-mix(in srgb, #8b5cf6 12%, transparent);
    color: #7c3aed;
}

@media (max-width: 900px) {
    .vp-body[b-yxyqk23w7s] {
        grid-template-columns: 1fr;
    }

    .vp-kv[b-yxyqk23w7s] {
        grid-template-columns: 1fr;
    }
}


/* ── Logo perusahaan ───────────────────────────────────────────────────────────────────
   Kotak preview dibuat berukuran tetap dengan object-fit: contain: logo vendor datang
   dengan rasio apa saja, dan meregangkannya agar pas justru merusak merek orang. */
.vp-logo[b-yxyqk23w7s] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: flex-start;
}

.vp-logo__preview[b-yxyqk23w7s] {
    width: 200px;
    height: 84px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--rz-border-color, #d4d4d8);
    border-radius: 12px;
    background: var(--rz-base-background-color, #fff);
    overflow: hidden;
}

    .vp-logo__preview img[b-yxyqk23w7s] {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

.vp-logo__empty[b-yxyqk23w7s] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
    font-size: .72rem;
    color: var(--rz-text-disabled-color, #9ca3af);
}

    .vp-logo__empty[b-yxyqk23w7s]  .rzi {
        font-size: 1.5rem;
    }

.vp-logo__side[b-yxyqk23w7s] {
    flex: 1;
    min-width: 220px;
}

.vp-logo__hint[b-yxyqk23w7s] {
    margin: 0 0 .5rem;
    font-size: .76rem;
    color: var(--rz-text-secondary-color, #6b7280);
}

.vp-logo__msg[b-yxyqk23w7s] {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .76rem;
    padding: .4rem .6rem;
    border-radius: 8px;
    margin-bottom: .5rem;
}

.vp-logo__msg--error[b-yxyqk23w7s] {
    background: color-mix(in srgb, #ef4444 12%, transparent);
    color: #b91c1c;
}

.vp-logo__msg--ok[b-yxyqk23w7s] {
    background: color-mix(in srgb, #16a34a 14%, transparent);
    color: #15803d;
}

.vp-logo__actions[b-yxyqk23w7s] {
    display: flex;
    gap: .4rem;
    align-items: center;
    flex-wrap: wrap;
}

/* InputFile disembunyikan dan digantikan label ber-style, supaya tombolnya sepadan dengan
   RadzenButton di sebelahnya. Jangan pakai display:none - itu membuat input tidak bisa
   dijangkau keyboard. */
.vp-logo__input[b-yxyqk23w7s] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}

.vp-logo__btn[b-yxyqk23w7s] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    cursor: pointer;
    font-size: .8rem;
    font-weight: 600;
    padding: .35rem .8rem;
    border-radius: 6px;
    color: #fff;
    background: var(--rz-primary);
}

    .vp-logo__btn:hover[b-yxyqk23w7s] {
        filter: brightness(1.06);
    }

.vp-logo__btn--busy[b-yxyqk23w7s] {
    opacity: .6;
    pointer-events: none;
}

.vp-logo__input:focus-visible + .vp-logo__btn[b-yxyqk23w7s] {
    outline: 2px solid var(--rz-primary);
    outline-offset: 2px;
}