/* _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/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/Pages/App/Index.razor.rz.scp.css */
.vp-dashboard[b-daq2ib6ej7] {
    font-size: 0.8125rem;
    line-height: 1.35;
    color: #1f2937;
}

.vp-section-title[b-daq2ib6ej7] {
    margin: 0 0 0.5rem 0 !important;
    font-weight: 600 !important;
    font-size: 0.9375rem !important;
    color: #111827 !important;
}

.vp-section-title--inline[b-daq2ib6ej7] {
    margin: 0 !important;
}

/* Ringkasan cards */
.vp-summary-card[b-daq2ib6ej7] {
    padding: 0.65rem 0.75rem !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

.vp-summary-card__inner[b-daq2ib6ej7] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.vp-icon-tile[b-daq2ib6ej7] {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.25rem;
}

.vp-summary-card__info[b-daq2ib6ej7] {
    flex: 1 1 10rem;
    min-width: 0;
}

.vp-summary-card__title[b-daq2ib6ej7] {
    font-weight: 600;
    font-size: 0.8125rem;
    color: #111827;
    margin-bottom: 0.15rem;
}

.vp-summary-card__desc[b-daq2ib6ej7] {
    font-size: 0.6875rem;
    color: #6b7280;
    line-height: 1.3;
}

.vp-summary-card__metrics[b-daq2ib6ej7] {
    display: flex;
    gap: 1.25rem;
    flex-shrink: 0;
}

.vp-metric[b-daq2ib6ej7] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 4.5rem;
}

.vp-metric__label[b-daq2ib6ej7] {
    font-size: 0.6875rem;
    color: #9ca3af;
    margin-bottom: 0.1rem;
}

.vp-metric__value[b-daq2ib6ej7] {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.1;
}

.metric-primary[b-daq2ib6ej7] {
    color: #2563eb;
}

.metric-warning[b-daq2ib6ej7] {
    color: #ea580c;
}

.vp-detail-link[b-daq2ib6ej7] {
    font-size: 0.75rem !important;
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: auto;
}

/* Panels kanan */
.vp-panel[b-daq2ib6ej7] {
    padding: 0.75rem !important;
    margin-bottom: 0.75rem;
    border: 1px solid #e5e7eb !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

.vp-panel--pic[b-daq2ib6ej7] {
    margin-bottom: 0;
}

.vp-panel__header[b-daq2ib6ej7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.vp-panel__subtitle[b-daq2ib6ej7] {
    font-size: 0.75rem;
    color: #6b7280;
    margin: -0.15rem 0 0.5rem 0;
}

.vp-see-all[b-daq2ib6ej7] {
    font-size: 0.75rem !important;
    white-space: nowrap;
}

/* News list */
.vp-news-item[b-daq2ib6ej7] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid #f3f4f6;
    width: 100%;
    text-align: left;
}

.vp-news-item--clickable[b-daq2ib6ej7] {
    background: transparent;
    border: none;
    border-bottom: 1px solid #f3f4f6;
    border-radius: 0.25rem;
    cursor: pointer;
    margin: 0;
    font: inherit;
    color: inherit;
}

.vp-news-item--clickable:hover[b-daq2ib6ej7] {
    background: #f9fafb;
}

.vp-news-item--clickable:last-child[b-daq2ib6ej7] {
    border-bottom: none;
    padding-bottom: 0;
}

.vp-news-item:last-child[b-daq2ib6ej7] {
    border-bottom: none;
    padding-bottom: 0;
}

.vp-news-item__icon[b-daq2ib6ej7] {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.375rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.vp-news-item__body[b-daq2ib6ej7] {
    flex: 1 1 auto;
    min-width: 0;
}

.vp-news-item__title[b-daq2ib6ej7] {
    font-weight: 600;
    font-size: 0.75rem;
    color: #111827;
    margin-bottom: 0.1rem;
}

.vp-news-item__snippet[b-daq2ib6ej7] {
    font-size: 0.6875rem;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vp-news-item__date[b-daq2ib6ej7] {
    font-size: 0.6875rem;
    color: #9ca3af;
    white-space: nowrap;
    flex-shrink: 0;
    padding-top: 0.1rem;
}

/* PIC table */
.vp-pic-table-wrap[b-daq2ib6ej7] {
    overflow-x: auto;
}

.vp-pic-table[b-daq2ib6ej7] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
}

.vp-pic-table th[b-daq2ib6ej7],
.vp-pic-table td[b-daq2ib6ej7] {
    padding: 0.4rem 0.35rem;
    text-align: left;
    border-bottom: 1px solid #f3f4f6;
    vertical-align: middle;
}

.vp-pic-table th[b-daq2ib6ej7] {
    font-weight: 600;
    color: #6b7280;
    font-size: 0.6875rem;
    white-space: nowrap;
}

.vp-pic-table td[b-daq2ib6ej7] {
    color: #374151;
}

.vp-status-badge[b-daq2ib6ej7] {
    display: inline-block;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: #dcfce7;
    color: #15803d;
    font-size: 0.6875rem;
    font-weight: 600;
}

.vp-pic-note[b-daq2ib6ej7] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.55rem;
    font-size: 0.6875rem;
    color: #6b7280;
}

/* Icon tone backgrounds */
.tone-green[b-daq2ib6ej7] {
    background: #dcfce7;
    color: #16a34a;
}

.tone-purple[b-daq2ib6ej7] {
    background: #f3e8ff;
    color: #9333ea;
}

.tone-blue[b-daq2ib6ej7] {
    background: #dbeafe;
    color: #2563eb;
}

.tone-orange[b-daq2ib6ej7] {
    background: #ffedd5;
    color: #ea580c;
}

.tone-teal[b-daq2ib6ej7] {
    background: #ccfbf1;
    color: #0d9488;
}

@media (max-width: 991.98px) {
    .vp-summary-card__inner[b-daq2ib6ej7] {
        align-items: flex-start;
    }

    .vp-detail-link[b-daq2ib6ej7] {
        margin-left: 0;
        width: 100%;
    }

    .vp-news-item__snippet[b-daq2ib6ej7] {
        white-space: normal;
    }
}
/* _content/P2PPortal.UI/Pages/AppLogs/IntegrationMonitor.razor.rz.scp.css */
/* ============================ Monitoring Integrasi ============================ */
.int-header[b-yar7lzz2ac] {
    display: flex; align-items: center; 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(190px, 1fr)); gap: 0.75rem; margin-bottom: 1.15rem; }
.int-stat[b-yar7lzz2ac] {
    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);
}
.int-stat[b-yar7lzz2ac]  .rzi { font-size: 1.7rem; width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; }
.int-stat__value[b-yar7lzz2ac] { font-size: 1.4rem; font-weight: 700; line-height: 1.1; }
.int-stat__label[b-yar7lzz2ac] { font-size: 0.72rem; 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--fail[b-yar7lzz2ac]  .rzi { background: color-mix(in srgb, #f59e0b 18%, transparent); color: #d97706; }
.int-stat--dead[b-yar7lzz2ac]  .rzi { background: color-mix(in srgb, #ef4444 15%, transparent); color: #dc2626; }

/* toolbar */
.int-toolbar[b-yar7lzz2ac] { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 1rem; }
.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.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;
}
.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.7rem; 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-filters[b-yar7lzz2ac] { display: inline-flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.int-module[b-yar7lzz2ac] { min-width: 150px; }
.int-search[b-yar7lzz2ac] {
    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: 220px;
}
.int-search[b-yar7lzz2ac]  .rzi { color: var(--rz-text-secondary-color); font-size: 1.1rem; }
.int-search input[b-yar7lzz2ac] { border: none; outline: none; background: transparent; color: var(--rz-text-color); font-size: 0.85rem; width: 100%; }

/* table */
.int-tablewrap[b-yar7lzz2ac] { overflow-x: auto; border: 1px solid var(--rz-border-color-lighter); border-radius: 12px; background: var(--rz-base-background-color); }
.int-table[b-yar7lzz2ac] { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.int-table thead th[b-yar7lzz2ac] {
    text-align: left; padding: 0.55rem 0.7rem; background: var(--rz-primary-lighter);
    font-weight: 700; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.02em; white-space: nowrap;
}
.int-table tbody td[b-yar7lzz2ac] { padding: 0.5rem 0.7rem; border-top: 1px solid var(--rz-border-color-lighter); vertical-align: middle; }
.int-row:hover[b-yar7lzz2ac] { background: color-mix(in srgb, var(--rz-primary) 4%, transparent); }
.int-row--attention[b-yar7lzz2ac] { background: color-mix(in srgb, #f59e0b 6%, transparent); }
.int-row--attention:hover[b-yar7lzz2ac] { background: color-mix(in srgb, #f59e0b 10%, transparent); }
.int-num[b-yar7lzz2ac] { text-align: left; font-variant-numeric: tabular-nums; }
.int-table code[b-yar7lzz2ac] { font-size: 0.72rem; background: color-mix(in srgb, var(--rz-text-color) 7%, transparent); padding: 0.02rem 0.3rem; border-radius: 4px; }

.int-expand[b-yar7lzz2ac] { background: none; border: none; cursor: pointer; padding: 0; color: var(--rz-text-secondary-color); }
.int-expand[b-yar7lzz2ac]  .rzi { font-size: 1.2rem; vertical-align: middle; }

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

.int-ref[b-yar7lzz2ac] { font-size: 0.64rem; font-weight: 700; padding: 0.05rem 0.35rem; border-radius: 5px; background: color-mix(in srgb, var(--rz-text-color) 8%, transparent); color: var(--rz-text-secondary-color); }

/* 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--dead[b-yar7lzz2ac] { background: color-mix(in srgb, #ef4444 16%, transparent); color: #dc2626; }
.int-chip--skipped[b-yar7lzz2ac] { background: color-mix(in srgb, #6b7280 12%, transparent); color: #6b7280; }

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

/* expanded detail */
.int-subrow > td[b-yar7lzz2ac] { background: color-mix(in srgb, var(--rz-primary) 3%, transparent); padding: 0.7rem 0.8rem !important; }
.int-error[b-yar7lzz2ac] {
    display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.7rem; padding: 0.5rem 0.7rem;
    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 1.4fr; 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; justify-content: space-between; font-size: 0.76rem; font-weight: 700; margin-bottom: 0.4rem; }
.int-block-head span[b-yar7lzz2ac] { display: inline-flex; align-items: center; gap: 0.35rem; }
.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;
}

.int-subtable[b-yar7lzz2ac] { width: 100%; border-collapse: collapse; font-size: 0.74rem; }
.int-subtable thead th[b-yar7lzz2ac] { text-align: left; padding: 0.3rem 0.5rem; background: color-mix(in srgb, var(--rz-primary) 8%, transparent); font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.02em; font-weight: 700; white-space: nowrap; }
.int-subtable tbody td[b-yar7lzz2ac] { padding: 0.3rem 0.5rem; border-top: 1px solid var(--rz-border-color-lighter); }

.int-empty-inline[b-yar7lzz2ac] { padding: 0.5rem; color: var(--rz-text-secondary-color); font-size: 0.78rem; }
.int-empty[b-yar7lzz2ac] { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 3rem 1rem; color: var(--rz-text-secondary-color); }
.int-empty[b-yar7lzz2ac]  .rzi { font-size: 2.5rem; opacity: 0.5; }

@media (max-width: 820px) {
    .int-detail-grid[b-yar7lzz2ac] { grid-template-columns: 1fr; }
}
/* _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; }
}
/* _content/P2PPortal.UI/Pages/Biding/Bidings.razor.rz.scp.css */
/* ============================ Vendor Bidding - LIST ============================ */
.bid-header[b-z9m3l7h42d] {
    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);
}

.bid-header__left[b-z9m3l7h42d] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
}

.bid-header__icon[b-z9m3l7h42d] {
    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);
}

.bid-viewtoggle[b-z9m3l7h42d] {
    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);
}

.bid-body[b-z9m3l7h42d] {
    padding: 1rem 1.15rem 2rem;
}

/* ---- stat cards ---- */
.bid-stats[b-z9m3l7h42d] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.15rem;
}

.bid-stat[b-z9m3l7h42d] {
    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);
}

.bid-stat[b-z9m3l7h42d]  .rzi {
    font-size: 1.7rem;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.bid-stat__value[b-z9m3l7h42d] {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.1;
}

.bid-stat__label[b-z9m3l7h42d] {
    font-size: 0.72rem;
    color: var(--rz-text-secondary-color);
}

.bid-stat--open[b-z9m3l7h42d]  .rzi { background: color-mix(in srgb, #16a34a 15%, transparent); color: #16a34a; }
.bid-stat--submitted[b-z9m3l7h42d]  .rzi { background: color-mix(in srgb, var(--rz-primary) 15%, transparent); color: var(--rz-primary); }
.bid-stat--closing[b-z9m3l7h42d]  .rzi { background: color-mix(in srgb, #f59e0b 18%, transparent); color: #d97706; }
.bid-stat--closed[b-z9m3l7h42d]  .rzi { background: color-mix(in srgb, #6b7280 15%, transparent); color: #6b7280; }

/* ---- toolbar: tabs + search ---- */
.bid-toolbar[b-z9m3l7h42d] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.bid-tabs[b-z9m3l7h42d] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.bid-tab[b-z9m3l7h42d] {
    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;
}

.bid-tab:hover[b-z9m3l7h42d] { border-color: var(--rz-primary); }

.bid-tab[b-z9m3l7h42d]  .rzi { font-size: 1rem; }

.bid-tab--active[b-z9m3l7h42d] {
    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);
}

.bid-tab__count[b-z9m3l7h42d] {
    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);
}

.bid-tab--active .bid-tab__count[b-z9m3l7h42d] { background: rgba(255, 255, 255, 0.25); }

.bid-search[b-z9m3l7h42d] {
    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: 240px;
}

.bid-search[b-z9m3l7h42d]  .rzi { color: var(--rz-text-secondary-color); font-size: 1.1rem; }

.bid-search input[b-z9m3l7h42d] {
    border: none;
    outline: none;
    background: transparent;
    color: var(--rz-text-color);
    font-size: 0.85rem;
    width: 100%;
}

/* ---- card grid ---- */
.bid-cards[b-z9m3l7h42d] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 0.9rem;
}

.bid-card[b-z9m3l7h42d] {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    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;
}

.bid-card[b-z9m3l7h42d]::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 4px; height: 100%;
    background: var(--rz-primary);
}

.bid-card--closed[b-z9m3l7h42d]::before { background: #9ca3af; }

.bid-card:hover[b-z9m3l7h42d] {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
}

.bid-card__top[b-z9m3l7h42d] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.bid-card__title[b-z9m3l7h42d] {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bid-card__sub[b-z9m3l7h42d] {
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
    margin-top: -0.35rem;
}

.bid-card__meta[b-z9m3l7h42d] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.4rem;
    padding: 0.55rem 0;
    border-top: 1px dashed var(--rz-border-color-lighter);
    border-bottom: 1px dashed var(--rz-border-color-lighter);
}

.bid-card__meta > div[b-z9m3l7h42d] { display: flex; flex-direction: column; gap: 0.1rem; }
.bid-card__meta span[b-z9m3l7h42d] { font-size: 0.66rem; color: var(--rz-text-secondary-color); text-transform: uppercase; letter-spacing: 0.03em; }
.bid-card__meta strong[b-z9m3l7h42d] { font-size: 0.82rem; }

.bid-card__period[b-z9m3l7h42d] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: var(--rz-text-secondary-color);
    flex-wrap: wrap;
}

.bid-card__period[b-z9m3l7h42d]  .rzi { font-size: 1rem; }

.bid-daysleft[b-z9m3l7h42d] {
    margin-left: auto;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: color-mix(in srgb, #16a34a 14%, transparent);
    color: #16a34a;
}

.bid-daysleft--urgent[b-z9m3l7h42d] {
    background: color-mix(in srgb, #ef4444 15%, transparent);
    color: #dc2626;
}

.bid-card__footer[b-z9m3l7h42d] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

/* ---- chips ---- */
.bid-chip[b-z9m3l7h42d] {
    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[b-z9m3l7h42d]  .rzi { font-size: 0.7rem; }

.bid-chip--type-1[b-z9m3l7h42d] { background: color-mix(in srgb, #8b5cf6 15%, transparent); color: #7c3aed; }
.bid-chip--type-2[b-z9m3l7h42d] { background: color-mix(in srgb, #0ea5e9 15%, transparent); color: #0284c7; }
.bid-chip--open[b-z9m3l7h42d] { background: color-mix(in srgb, #16a34a 15%, transparent); color: #16a34a; }
.bid-chip--open[b-z9m3l7h42d]  .rzi { font-size: 0.55rem; }
.bid-chip--closed[b-z9m3l7h42d] { background: color-mix(in srgb, #6b7280 15%, transparent); color: #6b7280; }
.bid-chip--new[b-z9m3l7h42d] { background: color-mix(in srgb, #f59e0b 18%, transparent); color: #d97706; }
.bid-chip--new[b-z9m3l7h42d]  .rzi { font-size: 0.8rem; }
.bid-chip--declined[b-z9m3l7h42d] { background: color-mix(in srgb, #ef4444 15%, transparent); color: #dc2626; }
.bid-chip--declined[b-z9m3l7h42d]  .rzi { font-size: 0.8rem; }

/* ---- submission badge ---- */
.bid-sub-badge[b-z9m3l7h42d] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.74rem;
    color: var(--rz-text-secondary-color);
}

.bid-sub-badge[b-z9m3l7h42d]  .rzi { font-size: 0.95rem; }
.bid-sub-badge--none[b-z9m3l7h42d] { color: var(--rz-text-disabled-color); }

.bid-sub-badge__status[b-z9m3l7h42d] {
    font-size: 0.66rem;
    font-weight: 700;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
}

.bid-sub-badge__status--winner[b-z9m3l7h42d] { background: color-mix(in srgb, #16a34a 16%, transparent); color: #16a34a; }
.bid-sub-badge__status--submitted[b-z9m3l7h42d] { background: color-mix(in srgb, var(--rz-primary) 16%, transparent); color: var(--rz-primary); }
.bid-sub-badge__status--rejected[b-z9m3l7h42d] { background: color-mix(in srgb, #ef4444 16%, transparent); color: #dc2626; }
.bid-sub-badge__status--none[b-z9m3l7h42d] { background: color-mix(in srgb, #6b7280 14%, transparent); color: #6b7280; }

.bid-text-urgent[b-z9m3l7h42d] { color: #dc2626; font-weight: 600; }

/* ---- empty ---- */
.bid-empty[b-z9m3l7h42d] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 3rem 1rem;
    color: var(--rz-text-secondary-color);
}

.bid-empty[b-z9m3l7h42d]  .rzi { font-size: 2.5rem; opacity: 0.5; }

.bid-grid[b-z9m3l7h42d] { border-radius: 12px; overflow: hidden; }
/* _content/P2PPortal.UI/Pages/DeliveryOrder/DeliveryOrder.razor.rz.scp.css */
/* ======================= Vendor Delivery - DETAIL PO + FORM ======================= */
.dlvd-header[b-t2giaukeht] {
    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;
}
.dlvd-header__left[b-t2giaukeht] { display: flex; align-items: center; gap: 0.7rem; min-width: 0; }
.dlvd-header__icon[b-t2giaukeht] {
    width: 46px; height: 46px; border-radius: 13px; 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);
}
.dlvd-header__title[b-t2giaukeht] { font-size: 1.05rem; font-weight: 700; line-height: 1.2; }
.dlvd-header__sub[b-t2giaukeht] { font-size: 0.78rem; color: var(--rz-text-secondary-color); }

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

/* PO summary */
.dlvd-po-summary[b-t2giaukeht] { display: grid; grid-template-columns: 2fr 1fr; gap: 1rem; }
.dlvd-po-info[b-t2giaukeht] {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.75rem;
    background: var(--rz-base-background-color); border: 1px solid var(--rz-border-color-lighter);
    border-radius: 14px; padding: 1rem;
}
.dlvd-po-info > div[b-t2giaukeht] { display: flex; flex-direction: column; gap: 0.15rem; }
.dlvd-po-info span[b-t2giaukeht] { font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--rz-text-secondary-color); }
.dlvd-po-info strong[b-t2giaukeht] { font-size: 0.85rem; }
.dlvd-po-info__wide[b-t2giaukeht] { grid-column: 1 / -1; }

.dlvd-po-price[b-t2giaukeht] {
    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;
}
.dlvd-price-row[b-t2giaukeht] { display: flex; justify-content: space-between; font-size: 0.82rem; }
.dlvd-price-row span:last-child[b-t2giaukeht] { font-variant-numeric: tabular-nums; }
.dlvd-price-row--total[b-t2giaukeht] { border-top: 2px solid var(--rz-border-color); margin-top: 0.3rem; padding-top: 0.4rem; font-weight: 700; }
.dlvd-price-row--total span:last-child[b-t2giaukeht] { color: var(--rz-primary); font-size: 0.95rem; }

/* tabs */
.dlvd-tabs[b-t2giaukeht] { display: inline-flex; gap: 0.35rem; }
.dlvd-tab[b-t2giaukeht] {
    display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.5rem 1rem; border-radius: 10px 10px 0 0;
    border: 1px solid var(--rz-border-color-lighter); border-bottom: none; background: var(--rz-base-background-color);
    color: var(--rz-text-color); font-size: 0.85rem; font-weight: 600; cursor: pointer;
}
.dlvd-tab:disabled[b-t2giaukeht] { opacity: 0.5; cursor: not-allowed; }
.dlvd-tab[b-t2giaukeht]  .rzi { font-size: 1.05rem; }
.dlvd-tab--active[b-t2giaukeht] { background: var(--rz-primary); border-color: var(--rz-primary); color: #fff; }

/* section */
.dlvd-section[b-t2giaukeht] {
    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);
}
.dlvd-section__head[b-t2giaukeht] {
    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);
}
.dlvd-section__head[b-t2giaukeht]  .rzi { color: var(--rz-primary); }
.dlvd-section__badge[b-t2giaukeht] { 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); }

.dlvd-two-col[b-t2giaukeht] { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* tables */
.dlvd-tablewrap[b-t2giaukeht] { overflow-x: auto; border: 1px solid var(--rz-border-color-lighter); border-radius: 10px; }
.dlvd-table[b-t2giaukeht] { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.dlvd-table thead th[b-t2giaukeht] {
    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;
}
.dlvd-table tbody td[b-t2giaukeht] { padding: 0.4rem 0.6rem; border-top: 1px solid var(--rz-border-color-lighter); vertical-align: middle; }
.dlvd-table tbody tr:hover[b-t2giaukeht] { background: color-mix(in srgb, var(--rz-primary) 4%, transparent); }
.dlvd-num[b-t2giaukeht] { text-align: right; font-variant-numeric: tabular-nums; }
.dlvd-cell-hi[b-t2giaukeht] { font-weight: 700; color: var(--rz-primary); }
.dlvd-table tfoot td[b-t2giaukeht] { 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); }
.dlvd-foot-label[b-t2giaukeht] { text-align: right; }
.dlvd-hint[b-t2giaukeht] { display: flex; align-items: center; gap: 0.4rem; font-size: 0.76rem; color: var(--rz-text-secondary-color); margin-bottom: 0.6rem; }
.dlvd-hint[b-t2giaukeht]  .rzi { font-size: 1rem; color: var(--rz-primary); }

.dlvd-franco[b-t2giaukeht] { display: inline-block; font-size: 0.72rem; font-weight: 600; padding: 0.1rem 0.45rem; border-radius: 6px; background: color-mix(in srgb, #8b5cf6 12%, transparent); color: #7c3aed; white-space: nowrap; }
.dlvd-mini-bar[b-t2giaukeht] { height: 6px; border-radius: 999px; background: var(--rz-base-300, #e5e7eb); overflow: hidden; margin-bottom: 2px; }
.dlvd-mini-fill[b-t2giaukeht] { height: 100%; background: linear-gradient(90deg, var(--rz-primary), #0ea5e9); border-radius: 999px; }

/* expandable delivery rows */
.dlvd-clickable[b-t2giaukeht] { cursor: pointer; }
.dlvd-clickable:hover[b-t2giaukeht] { background: color-mix(in srgb, var(--rz-primary) 5%, transparent) !important; }
.dlvd-clickable[b-t2giaukeht]  .rzi { font-size: 1.1rem; color: var(--rz-text-secondary-color); vertical-align: middle; }
.dlvd-subrow > td[b-t2giaukeht] { background: color-mix(in srgb, var(--rz-primary) 3%, transparent); padding: 0.5rem 0.6rem 0.7rem !important; }
.dlvd-subtitle[b-t2giaukeht] { display: flex; align-items: center; gap: 0.35rem; font-size: 0.76rem; font-weight: 700; color: var(--rz-primary); margin-bottom: 0.4rem; }
.dlvd-subtitle[b-t2giaukeht]  .rzi { font-size: 0.95rem; }
.dlvd-subtable[b-t2giaukeht] { width: 100%; border-collapse: collapse; font-size: 0.76rem; background: var(--rz-base-background-color); border: 1px solid var(--rz-border-color-lighter); border-radius: 8px; overflow: hidden; }
.dlvd-subtable thead th[b-t2giaukeht] { text-align: left; padding: 0.35rem 0.55rem; background: color-mix(in srgb, var(--rz-primary) 8%, transparent); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.02em; font-weight: 700; white-space: nowrap; }
.dlvd-subtable tbody td[b-t2giaukeht] { padding: 0.35rem 0.55rem; border-top: 1px solid var(--rz-border-color-lighter); }
.dlvd-dochip[b-t2giaukeht] { display: inline-flex; align-items: center; font-size: 0.68rem; font-weight: 600; padding: 0.05rem 0.4rem; border-radius: 5px; background: color-mix(in srgb, var(--rz-primary) 10%, transparent); color: var(--rz-primary); white-space: nowrap; }

.dlvd-viewall[b-t2giaukeht] {
    display: inline-flex; align-items: center; gap: 0.25rem; margin-top: 0.5rem;
    background: none; border: none; cursor: pointer; padding: 0.3rem 0.2rem;
    color: var(--rz-primary); font-size: 0.78rem; font-weight: 600;
}
.dlvd-viewall:hover[b-t2giaukeht] { text-decoration: underline; }
.dlvd-viewall[b-t2giaukeht]  .rzi { font-size: 1rem; }

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

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

.dlvd-upload-row[b-t2giaukeht] { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.dlvd-upload[b-t2giaukeht]  .rz-fileupload-button { border-radius: 8px; }

.dlvd-row[b-t2giaukeht] { display: flex; align-items: flex-start; gap: 0.6rem; flex-wrap: wrap; }
.dlvd-label[b-t2giaukeht] { min-width: 150px; font-size: 0.8rem; font-weight: 600; color: var(--rz-text-secondary-color); padding-top: 0.4rem; }

.dlvd-preview-head[b-t2giaukeht] { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin: 1rem 0 0.5rem; flex-wrap: wrap; }
.dlvd-preview-badges[b-t2giaukeht] { display: inline-flex; gap: 0.35rem; }
.dlvd-badge[b-t2giaukeht] { font-size: 0.68rem; font-weight: 700; padding: 0.12rem 0.5rem; border-radius: 999px; }
.dlvd-badge--info[b-t2giaukeht] { background: color-mix(in srgb, var(--rz-primary) 15%, transparent); color: var(--rz-primary); }
.dlvd-badge--ok[b-t2giaukeht] { background: color-mix(in srgb, #16a34a 16%, transparent); color: #16a34a; }
.dlvd-badge--err[b-t2giaukeht] { background: color-mix(in srgb, #ef4444 16%, transparent); color: #dc2626; }
.dlvd-row-err[b-t2giaukeht] { background: color-mix(in srgb, #ef4444 6%, transparent); }

.dlvd-form-actions[b-t2giaukeht] { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.8rem; flex-wrap: wrap; }
.dlvd-closebar[b-t2giaukeht] { display: flex; justify-content: flex-end; padding: 0.25rem 0 0.5rem; }

.dlvd-upload-empty[b-t2giaukeht] {
    display: flex; flex-direction: column; align-items: center; gap: 0.5rem; text-align: center;
    padding: 2.5rem 1rem; margin-top: 1rem; border: 2px dashed var(--rz-border-color-lighter); border-radius: 12px;
    color: var(--rz-text-secondary-color); font-size: 0.85rem;
}
.dlvd-upload-empty[b-t2giaukeht]  .rzi { font-size: 2.5rem; opacity: 0.5; }

/* guide */
.dlvd-guide[b-t2giaukeht] { margin-top: 1rem; border: 1px solid var(--rz-border-color-lighter); border-radius: 10px; overflow: hidden; }
.dlvd-guide__head[b-t2giaukeht] { 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-t2giaukeht] { display: inline-flex; align-items: center; gap: 0.4rem; }
.dlvd-guide__body[b-t2giaukeht] { padding: 0.6rem 0.9rem; display: grid; grid-template-columns: 1fr; gap: 0.4rem; }
.dlvd-guide__item[b-t2giaukeht] { display: grid; grid-template-columns: 160px 80px 1fr; gap: 0.5rem; align-items: center; font-size: 0.78rem; }
.dlvd-guide__name[b-t2giaukeht] { font-weight: 600; }
.dlvd-guide__req[b-t2giaukeht] { font-size: 0.66rem; font-weight: 700; padding: 0.05rem 0.4rem; border-radius: 999px; text-align: center; }
.dlvd-guide__req.req[b-t2giaukeht] { background: color-mix(in srgb, #ef4444 14%, transparent); color: #dc2626; }
.dlvd-guide__req.opt[b-t2giaukeht] { background: color-mix(in srgb, #6b7280 12%, transparent); color: #6b7280; }
.dlvd-guide__desc[b-t2giaukeht] { color: var(--rz-text-secondary-color); }

/* shared chips (scoped CSS tidak lintas halaman) */
.dlv-chip[b-t2giaukeht] { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.7rem; font-weight: 700; padding: 0.15rem 0.55rem; border-radius: 999px; white-space: nowrap; }
.dlv-chip--submitted[b-t2giaukeht] { background: color-mix(in srgb, #0ea5e9 15%, transparent); color: #0284c7; }
.dlv-chip--partial[b-t2giaukeht] { background: color-mix(in srgb, #f59e0b 18%, transparent); color: #d97706; }
.dlv-chip--received[b-t2giaukeht] { background: color-mix(in srgb, #16a34a 16%, transparent); color: #16a34a; }
.dlv-chip--cancelled[b-t2giaukeht] { background: color-mix(in srgb, #6b7280 15%, transparent); color: #6b7280; }

.dlv-pay-chip[b-t2giaukeht] { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.7rem; font-weight: 700; padding: 0.15rem 0.55rem; border-radius: 999px; }
.dlv-pay-chip--paid[b-t2giaukeht] { background: color-mix(in srgb, #16a34a 16%, transparent); color: #16a34a; }
.dlv-pay-chip--unpaid[b-t2giaukeht] { background: color-mix(in srgb, #ef4444 15%, transparent); color: #dc2626; }
.dlv-pay-chip--na[b-t2giaukeht] { background: color-mix(in srgb, #6b7280 12%, transparent); color: #6b7280; }

.dlv-text-warn[b-t2giaukeht] { color: #d97706; }
.dlv-text-accent[b-t2giaukeht] { color: var(--rz-primary); }

/* Konfirmasi retur (Ack) di dalam sub-row */
.dlvd-retur-ack[b-t2giaukeht] { margin-top: 0.6rem; display: flex; flex-direction: column; gap: 0.5rem; }
.dlvd-retur-ack__note[b-t2giaukeht] { display: flex; align-items: flex-start; gap: 0.4rem; font-size: 0.74rem; color: var(--rz-text-secondary-color); }
.dlvd-retur-ack__note[b-t2giaukeht]  .rzi { font-size: 0.95rem; color: #d97706; margin-top: 1px; }
.dlvd-retur-ack__input[b-t2giaukeht] { width: 100%; }
.dlvd-retur-ack__actions[b-t2giaukeht] { display: flex; justify-content: flex-end; }
.dlvd-retur-ack__done[b-t2giaukeht] { display: flex; align-items: center; gap: 0.35rem; font-size: 0.76rem; font-weight: 600; color: #16a34a; }
.dlvd-retur-ack__done[b-t2giaukeht]  .rzi { font-size: 0.95rem; }
.dlvd-retur-ack__remark[b-t2giaukeht] { font-size: 0.76rem; color: var(--rz-text-color); }
.dlvd-retur-ack__remark span[b-t2giaukeht] { color: var(--rz-text-secondary-color); font-weight: 600; margin-right: 0.25rem; }

@media (max-width: 820px) {
    .dlvd-po-summary[b-t2giaukeht] { grid-template-columns: 1fr; }
    .dlvd-two-col[b-t2giaukeht] { grid-template-columns: 1fr; }
    .dlvd-guide__item[b-t2giaukeht] { grid-template-columns: 1fr; }
}
/* _content/P2PPortal.UI/Pages/DeliveryOrder/DeliveryOrders.razor.rz.scp.css */
/* ============================ Vendor Delivery - LIST / MONITORING ============================ */
.dlv-header[b-8egqt1yvf4] {
    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);
}
.dlv-header__left[b-8egqt1yvf4] { display: flex; align-items: center; gap: 0.85rem; min-width: 0; }
.dlv-header__icon[b-8egqt1yvf4] {
    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);
}
.dlv-viewtoggle[b-8egqt1yvf4] {
    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);
}
.dlv-body[b-8egqt1yvf4] { padding: 1rem 1.15rem 2rem; }

/* stats */
.dlv-stats[b-8egqt1yvf4] { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0.75rem; margin-bottom: 1.15rem; }
.dlv-stat[b-8egqt1yvf4] {
    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);
}
.dlv-stat[b-8egqt1yvf4]  .rzi { font-size: 1.7rem; width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; }
.dlv-stat__value[b-8egqt1yvf4] { font-size: 1.4rem; font-weight: 700; line-height: 1.1; }
.dlv-stat__label[b-8egqt1yvf4] { font-size: 0.72rem; color: var(--rz-text-secondary-color); }
.dlv-stat--po[b-8egqt1yvf4]  .rzi { background: color-mix(in srgb, var(--rz-primary) 15%, transparent); color: var(--rz-primary); }
.dlv-stat--need[b-8egqt1yvf4]  .rzi { background: color-mix(in srgb, #f59e0b 18%, transparent); color: #d97706; }
.dlv-stat--partial[b-8egqt1yvf4]  .rzi { background: color-mix(in srgb, #0ea5e9 15%, transparent); color: #0284c7; }
.dlv-stat--done[b-8egqt1yvf4]  .rzi { background: color-mix(in srgb, #16a34a 15%, transparent); color: #16a34a; }

/* toolbar */
.dlv-toolbar[b-8egqt1yvf4] { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 1rem; }
.dlv-tabs[b-8egqt1yvf4] { display: inline-flex; flex-wrap: wrap; gap: 0.35rem; }
.dlv-tab[b-8egqt1yvf4] {
    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;
}
.dlv-tab:hover[b-8egqt1yvf4] { border-color: var(--rz-primary); }
.dlv-tab[b-8egqt1yvf4]  .rzi { font-size: 1rem; }
.dlv-tab--active[b-8egqt1yvf4] { 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); }
.dlv-tab__count[b-8egqt1yvf4] { 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); }
.dlv-tab--active .dlv-tab__count[b-8egqt1yvf4] { background: rgba(255,255,255,0.25); }
.dlv-search[b-8egqt1yvf4] {
    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: 240px;
}
.dlv-search[b-8egqt1yvf4]  .rzi { color: var(--rz-text-secondary-color); font-size: 1.1rem; }
.dlv-search input[b-8egqt1yvf4] { border: none; outline: none; background: transparent; color: var(--rz-text-color); font-size: 0.85rem; width: 100%; }

/* cards */
.dlv-cards[b-8egqt1yvf4] { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 0.9rem; }
.dlv-card[b-8egqt1yvf4] {
    display: flex; flex-direction: column; gap: 0.55rem; 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;
}
.dlv-card[b-8egqt1yvf4]::before { content: ""; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: var(--rz-primary); }
.dlv-card:hover[b-8egqt1yvf4] { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,0.1); }
.dlv-card__top[b-8egqt1yvf4] { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.dlv-card__po[b-8egqt1yvf4] { font-weight: 700; font-size: 0.95rem; }
.dlv-card__title[b-8egqt1yvf4] { font-size: 0.92rem; font-weight: 600; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dlv-card__sub[b-8egqt1yvf4] { font-size: 0.74rem; color: var(--rz-text-secondary-color); margin-top: -0.3rem; }

/* progress */
.dlv-progress[b-8egqt1yvf4] { display: flex; flex-direction: column; gap: 0.25rem; }
.dlv-progress__bar[b-8egqt1yvf4] { height: 8px; border-radius: 999px; background: var(--rz-base-300, #e5e7eb); overflow: hidden; }
.dlv-progress__fill[b-8egqt1yvf4] { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--rz-primary), #0ea5e9); }
.dlv-progress__label[b-8egqt1yvf4] { font-size: 0.72rem; color: var(--rz-text-secondary-color); }

.dlv-card__meta[b-8egqt1yvf4] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4rem; padding: 0.55rem 0; border-top: 1px dashed var(--rz-border-color-lighter); border-bottom: 1px dashed var(--rz-border-color-lighter); }
.dlv-card__meta > div[b-8egqt1yvf4] { display: flex; flex-direction: column; gap: 0.1rem; }
.dlv-card__meta span[b-8egqt1yvf4] { font-size: 0.62rem; color: var(--rz-text-secondary-color); text-transform: uppercase; letter-spacing: 0.02em; }
.dlv-card__meta strong[b-8egqt1yvf4] { font-size: 0.85rem; }

.dlv-card__pay[b-8egqt1yvf4] { display: flex; }
.dlv-card__footer[b-8egqt1yvf4] { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.15rem; }

/* chips */
.dlv-chip[b-8egqt1yvf4] { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.7rem; font-weight: 700; padding: 0.15rem 0.55rem; border-radius: 999px; white-space: nowrap; }
.dlv-chip--submitted[b-8egqt1yvf4] { background: color-mix(in srgb, #0ea5e9 15%, transparent); color: #0284c7; }
.dlv-chip--partial[b-8egqt1yvf4] { background: color-mix(in srgb, #f59e0b 18%, transparent); color: #d97706; }
.dlv-chip--received[b-8egqt1yvf4] { background: color-mix(in srgb, #16a34a 16%, transparent); color: #16a34a; }
.dlv-chip--cancelled[b-8egqt1yvf4] { background: color-mix(in srgb, #6b7280 15%, transparent); color: #6b7280; }
.dlv-chip--draft[b-8egqt1yvf4] { background: color-mix(in srgb, #6b7280 12%, transparent); color: #6b7280; }

.dlv-pay-chip[b-8egqt1yvf4] { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.7rem; font-weight: 700; padding: 0.15rem 0.55rem; border-radius: 999px; }
.dlv-pay-chip[b-8egqt1yvf4]  .rzi { font-size: 0.8rem; }
.dlv-pay-chip--paid[b-8egqt1yvf4] { background: color-mix(in srgb, #16a34a 16%, transparent); color: #16a34a; }
.dlv-pay-chip--unpaid[b-8egqt1yvf4] { background: color-mix(in srgb, #ef4444 15%, transparent); color: #dc2626; }
.dlv-pay-chip--na[b-8egqt1yvf4] { background: color-mix(in srgb, #6b7280 12%, transparent); color: #6b7280; }

.dlv-text-warn[b-8egqt1yvf4] { color: #d97706; }
.dlv-text-accent[b-8egqt1yvf4] { color: var(--rz-primary); }

.dlv-empty[b-8egqt1yvf4] { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 3rem 1rem; color: var(--rz-text-secondary-color); }
.dlv-empty[b-8egqt1yvf4]  .rzi { font-size: 2.5rem; opacity: 0.5; }
.dlv-grid[b-8egqt1yvf4] { border-radius: 12px; overflow: hidden; }

/* Banner "retur baru perlu konfirmasi" */
.dlv-ackbanner[b-8egqt1yvf4] {
    width: 100%; display: flex; align-items: center; gap: 0.75rem; text-align: left; cursor: pointer;
    padding: 0.7rem 1rem; margin-bottom: 0.85rem; border-radius: 12px;
    background: color-mix(in srgb, #f59e0b 12%, var(--rz-base-background-color));
    border: 1px solid color-mix(in srgb, #f59e0b 40%, transparent);
    color: var(--rz-text-color); transition: background 0.15s ease;
}
.dlv-ackbanner:hover[b-8egqt1yvf4] { background: color-mix(in srgb, #f59e0b 18%, var(--rz-base-background-color)); }
.dlv-ackbanner[b-8egqt1yvf4] >  .rzi { font-size: 1.5rem; color: #d97706; flex-shrink: 0; }
.dlv-ackbanner__text[b-8egqt1yvf4] { display: flex; flex-direction: column; gap: 0.1rem; flex: 1; min-width: 0; }
.dlv-ackbanner__text strong[b-8egqt1yvf4] { font-size: 0.9rem; color: #b45309; }
.dlv-ackbanner__text span[b-8egqt1yvf4] { font-size: 0.76rem; color: var(--rz-text-secondary-color); }
.dlv-ackbanner__cta[b-8egqt1yvf4] { display: inline-flex; align-items: center; gap: 0.15rem; font-size: 0.8rem; font-weight: 700; color: #d97706; white-space: nowrap; }
.dlv-ackbanner__cta[b-8egqt1yvf4]  .rzi { font-size: 1rem; }

/* Badge kecil di kolom Retur */
.dlv-ackbadge[b-8egqt1yvf4] {
    display: inline-flex; align-items: center; gap: 0.2rem; margin-left: 0.4rem;
    font-size: 0.64rem; font-weight: 700; padding: 0.1rem 0.4rem; border-radius: 999px;
    background: color-mix(in srgb, #f59e0b 18%, transparent); color: #d97706; white-space: nowrap;
}
.dlv-ackbadge[b-8egqt1yvf4]  .rzi { font-size: 0.75rem; }
/* _content/P2PPortal.UI/Pages/Invoice/InvoiceDetail.razor.rz.scp.css */
/* ======================= Vendor Invoice - DETAIL (read-only) ======================= */
.invd-header[b-s6q4dyw2ih] {
    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);
}
.invd-header__left[b-s6q4dyw2ih] { display: flex; align-items: center; gap: 0.7rem; min-width: 0; }
.invd-header__icon[b-s6q4dyw2ih] {
    width: 46px; height: 46px; border-radius: 13px; 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);
}
.invd-header__icon--muted[b-s6q4dyw2ih] { background: #9ca3af; box-shadow: none; }
.invd-header__title[b-s6q4dyw2ih] { font-size: 1.05rem; font-weight: 700; line-height: 1.2; }
.invd-header__sub[b-s6q4dyw2ih] { font-size: 0.78rem; color: var(--rz-text-secondary-color); }

/* status chip (samakan warna dengan list invoice) */
.invd-status[b-s6q4dyw2ih] { font-size: 0.76rem; font-weight: 700; padding: 0.25rem 0.7rem; border-radius: 999px; white-space: nowrap; }
.invd-status--draft[b-s6q4dyw2ih] { background: color-mix(in srgb, #6b7280 15%, transparent); color: #4b5563; }
.invd-status--submitted[b-s6q4dyw2ih] { background: color-mix(in srgb, #0284c7 15%, transparent); color: #0369a1; }
.invd-status--verified[b-s6q4dyw2ih] { background: color-mix(in srgb, #16a34a 15%, transparent); color: #15803d; }
.invd-status--paid[b-s6q4dyw2ih] { background: color-mix(in srgb, #7c3aed 15%, transparent); color: #6d28d9; }
.invd-status--revise[b-s6q4dyw2ih] { background: color-mix(in srgb, #f59e0b 16%, transparent); color: #d97706; }

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

.invd-section[b-s6q4dyw2ih] {
    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);
}
.invd-section__head[b-s6q4dyw2ih] {
    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);
}
.invd-section__head[b-s6q4dyw2ih]  .rzi { color: var(--rz-primary); }

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

.invd-statusline[b-s6q4dyw2ih] { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.invd-note[b-s6q4dyw2ih] { font-size: 0.85rem; color: var(--rz-text-secondary-color); }

.invd-tablewrap[b-s6q4dyw2ih] { overflow-x: auto; border: 1px solid var(--rz-border-color-lighter); border-radius: 10px; }
.invd-table[b-s6q4dyw2ih] { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.invd-table thead th[b-s6q4dyw2ih] {
    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;
}
.invd-table tbody td[b-s6q4dyw2ih] { padding: 0.4rem 0.5rem; border-top: 1px solid var(--rz-border-color-lighter); vertical-align: middle; }
.invd-num[b-s6q4dyw2ih] { text-align: right; font-variant-numeric: tabular-nums; }
.invd-cell-hi[b-s6q4dyw2ih] { font-weight: 700; color: var(--rz-primary); }
.invd-tax[b-s6q4dyw2ih] { font-size: 0.68rem; font-weight: 700; color: #0284c7; }

.invd-summary[b-s6q4dyw2ih] {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
    position: sticky; bottom: 0; padding: 0.9rem 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);
}
.invd-summary__rows[b-s6q4dyw2ih] { display: flex; flex-direction: column; gap: 0.25rem; min-width: 260px; }
.invd-srow[b-s6q4dyw2ih] { display: flex; justify-content: space-between; gap: 2rem; font-size: 0.82rem; }
.invd-srow span:last-child[b-s6q4dyw2ih] { font-variant-numeric: tabular-nums; }
.invd-srow--total[b-s6q4dyw2ih] { border-top: 2px solid var(--rz-border-color); margin-top: 0.3rem; padding-top: 0.4rem; font-weight: 700; }
.invd-srow--total span:last-child[b-s6q4dyw2ih] { color: var(--rz-primary); font-size: 1rem; }
.invd-actions[b-s6q4dyw2ih] { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.invd-empty[b-s6q4dyw2ih] {
    display: flex; flex-direction: column; align-items: center; gap: 0.75rem;
    padding: 3rem 1rem; color: var(--rz-text-secondary-color);
}
.invd-empty[b-s6q4dyw2ih]  .rzi { font-size: 2.5rem; opacity: 0.6; }
/* _content/P2PPortal.UI/Pages/Invoice/InvoiceForm.razor.rz.scp.css */
/* ======================= Vendor Invoice - FORM ======================= */
.invf-header[b-82rivs8833] {
    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;
}
.invf-header__left[b-82rivs8833] { display: flex; align-items: center; gap: 0.7rem; min-width: 0; }
.invf-header__icon[b-82rivs8833] {
    width: 46px; height: 46px; border-radius: 13px; 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);
}
.invf-header__title[b-82rivs8833] { font-size: 1.05rem; font-weight: 700; line-height: 1.2; }
.invf-header__sub[b-82rivs8833] { font-size: 0.78rem; color: var(--rz-text-secondary-color); }
.invf-status[b-82rivs8833] { font-size: 0.76rem; font-weight: 700; padding: 0.25rem 0.7rem; border-radius: 999px; }
.invf-status--draft[b-82rivs8833] { background: color-mix(in srgb, #6b7280 15%, transparent); color: #6b7280; }

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

.invf-section[b-82rivs8833] {
    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);
}
.invf-section__head[b-82rivs8833] {
    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);
}
.invf-section__head[b-82rivs8833]  .rzi { color: var(--rz-primary); }
.invf-section__hint[b-82rivs8833] { font-size: 0.72rem; font-weight: 400; color: var(--rz-text-secondary-color); }

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

.invf-form-grid[b-82rivs8833] { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 1.5rem; }
.invf-row[b-82rivs8833] { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.invf-row--wide[b-82rivs8833] { grid-column: 1 / -1; align-items: flex-start; }
.invf-label[b-82rivs8833] { min-width: 150px; font-size: 0.8rem; font-weight: 600; color: var(--rz-text-secondary-color); }
.invf-req[b-82rivs8833] { color: #dc2626; }

.invf-tablewrap[b-82rivs8833] { overflow-x: auto; border: 1px solid var(--rz-border-color-lighter); border-radius: 10px; }
.invf-table[b-82rivs8833] { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.invf-table thead th[b-82rivs8833] {
    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;
}
.invf-table tbody td[b-82rivs8833] { padding: 0.4rem 0.5rem; border-top: 1px solid var(--rz-border-color-lighter); vertical-align: middle; }
.invf-num[b-82rivs8833] { text-align: right; font-variant-numeric: tabular-nums; }
.invf-cell-hi[b-82rivs8833] { font-weight: 700; color: var(--rz-primary); }
.invf-inp[b-82rivs8833] { width: 100%; }
.invf-inp--num[b-82rivs8833]  input { text-align: right; }
.invf-tax[b-82rivs8833] { font-size: 0.68rem; font-weight: 700; color: #0284c7; }
.invf-tax--off[b-82rivs8833] { color: var(--rz-text-disabled-color); }

.invf-summary[b-82rivs8833] {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
    position: sticky; bottom: 0; padding: 0.9rem 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);
}
.invf-summary__rows[b-82rivs8833] { display: flex; flex-direction: column; gap: 0.25rem; min-width: 260px; }
.invf-srow[b-82rivs8833] { display: flex; justify-content: space-between; gap: 2rem; font-size: 0.82rem; }
.invf-srow span:last-child[b-82rivs8833] { font-variant-numeric: tabular-nums; }
.invf-srow--total[b-82rivs8833] { border-top: 2px solid var(--rz-border-color); margin-top: 0.3rem; padding-top: 0.4rem; font-weight: 700; }
.invf-srow--total span:last-child[b-82rivs8833] { color: var(--rz-primary); font-size: 1rem; }
.invf-actions[b-82rivs8833] { display: flex; gap: 0.5rem; flex-wrap: wrap; }

@media (max-width: 760px) {
    .invf-form-grid[b-82rivs8833] { grid-template-columns: 1fr; }
    .invf-label[b-82rivs8833] { min-width: 120px; }
}
/* _content/P2PPortal.UI/Pages/Invoice/Invoices.razor.rz.scp.css */
/* ============================ Invoice - LIST / MONITORING ============================ */
.inv-body[b-um6ndasz6y] { padding: 1rem 1.15rem 2rem; }

.inv-stats[b-um6ndasz6y] { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0.75rem; margin-bottom: 1.15rem; }
.inv-stat[b-um6ndasz6y] {
    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);
}
.inv-stat[b-um6ndasz6y]  .rzi { font-size: 1.7rem; width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; }
.inv-stat__value[b-um6ndasz6y] { font-size: 1.4rem; font-weight: 700; line-height: 1.1; }
.inv-stat__value.pr-sm[b-um6ndasz6y] { font-size: 1.05rem; }
.inv-stat__label[b-um6ndasz6y] { font-size: 0.72rem; color: var(--rz-text-secondary-color); }
.inv-stat--submitted[b-um6ndasz6y]  .rzi { background: color-mix(in srgb, #0ea5e9 15%, transparent); color: #0284c7; }
.inv-stat--verified[b-um6ndasz6y]  .rzi { background: color-mix(in srgb, #16a34a 15%, transparent); color: #16a34a; }
.inv-stat--paid[b-um6ndasz6y]  .rzi { background: color-mix(in srgb, var(--rz-primary) 15%, transparent); color: var(--rz-primary); }
.inv-stat--revise[b-um6ndasz6y]  .rzi { background: color-mix(in srgb, #f59e0b 16%, transparent); color: #d97706; }

.inv-toolbar[b-um6ndasz6y] { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 1rem; }
.inv-tabs[b-um6ndasz6y] { display: inline-flex; flex-wrap: wrap; gap: 0.35rem; }
.inv-tab[b-um6ndasz6y] {
    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;
}
.inv-tab:hover[b-um6ndasz6y] { border-color: var(--rz-primary); }
.inv-tab[b-um6ndasz6y]  .rzi { font-size: 1rem; }
.inv-tab--active[b-um6ndasz6y] { 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); }
.inv-tab__count[b-um6ndasz6y] { 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); }
.inv-tab--active .inv-tab__count[b-um6ndasz6y] { background: rgba(255,255,255,0.25); }

.inv-right[b-um6ndasz6y] { display: inline-flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.inv-search[b-um6ndasz6y] {
    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: 220px;
}
.inv-search[b-um6ndasz6y]  .rzi { color: var(--rz-text-secondary-color); font-size: 1.1rem; }
.inv-search input[b-um6ndasz6y] { border: none; outline: none; background: transparent; color: var(--rz-text-color); font-size: 0.85rem; width: 100%; }

.inv-grid[b-um6ndasz6y] { border-radius: 12px; overflow: hidden; }

/* status chips */
.inv-chip[b-um6ndasz6y] { display: inline-flex; align-items: center; font-size: 0.7rem; font-weight: 700; padding: 0.15rem 0.55rem; border-radius: 999px; white-space: nowrap; }
.inv-chip--draft[b-um6ndasz6y] { background: color-mix(in srgb, #6b7280 14%, transparent); color: #6b7280; }
.inv-chip--submitted[b-um6ndasz6y] { background: color-mix(in srgb, #0ea5e9 15%, transparent); color: #0284c7; }
.inv-chip--verified[b-um6ndasz6y] { background: color-mix(in srgb, #16a34a 16%, transparent); color: #16a34a; }
.inv-chip--paid[b-um6ndasz6y] { background: color-mix(in srgb, var(--rz-primary) 16%, transparent); color: var(--rz-primary); }
.inv-chip--revise[b-um6ndasz6y] { background: color-mix(in srgb, #f59e0b 16%, transparent); color: #d97706; }

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

.inv-empty[b-um6ndasz6y] { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 3rem 1rem; color: var(--rz-text-secondary-color); }
.inv-empty[b-um6ndasz6y]  .rzi { font-size: 2.5rem; opacity: 0.5; }
/* _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: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.45rem;
    color: var(--rz-primary);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.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__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/PurchaseOrder/PurchaseOrderDetail.razor.rz.scp.css */
/* ============================ Vendor Portal - PURCHASE ORDER DETAIL ==========================
   Mengikuti bahasa visual Delivery Order detail (DeliveryOrder.razor.css).
   ============================================================================================ */
.pod-body[b-pad2owud8j] { padding: 1rem 1.15rem 2rem; display: flex; flex-direction: column; gap: 1rem; }

/* keterangan PO — tepat 2 kolom, mengalir kiri→kanan per baris */
.pod-po-info[b-pad2owud8j] {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2rem; row-gap: 0.7rem;
}
.pod-po-info > div[b-pad2owud8j] {
    display: grid; grid-template-columns: 130px minmax(0, 1fr); align-items: baseline; gap: 0.5rem;
    padding-bottom: 0.5rem; border-bottom: 1px dashed var(--rz-border-color-lighter);
}
.pod-po-info span[b-pad2owud8j] { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--rz-text-secondary-color); }
.pod-po-info strong[b-pad2owud8j] { font-size: 0.85rem; overflow-wrap: anywhere; }
.pod-po-info__wide[b-pad2owud8j] { grid-column: 1 / -1; }

/* payment summary di bawah tabel produk — rata kanan, lebar terbatas */
.pod-paysummary[b-pad2owud8j] { display: flex; justify-content: flex-end; margin-top: 0.9rem; }
.pod-paysummary .pod-po-price[b-pad2owud8j] { min-width: 320px; max-width: 420px; width: 100%; }

.pod-po-price[b-pad2owud8j] {
    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;
}
.pod-price-row[b-pad2owud8j] { display: flex; justify-content: space-between; font-size: 0.82rem; }
.pod-price-row span:last-child[b-pad2owud8j] { font-variant-numeric: tabular-nums; }
.pod-price-row--total[b-pad2owud8j] { border-top: 2px solid var(--rz-border-color); margin-top: 0.3rem; padding-top: 0.4rem; font-weight: 700; }
.pod-price-row--total span:last-child[b-pad2owud8j] { color: var(--rz-primary); font-size: 0.95rem; }

/* tabs */
.pod-tabs[b-pad2owud8j] { display: inline-flex; flex-wrap: wrap; gap: 0.35rem; }
.pod-tab[b-pad2owud8j] {
    display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.5rem 1rem; border-radius: 10px 10px 0 0;
    border: 1px solid var(--rz-border-color-lighter); border-bottom: none; background: var(--rz-base-background-color);
    color: var(--rz-text-color); font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: all 0.15s ease;
}
.pod-tab:hover[b-pad2owud8j] { border-color: var(--rz-primary); }
.pod-tab[b-pad2owud8j]  .rzi { font-size: 1.05rem; }
.pod-tab--active[b-pad2owud8j] { background: var(--rz-primary); border-color: var(--rz-primary); color: #fff; }

/* section */
.pod-section[b-pad2owud8j] {
    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);
}
.pod-section__head[b-pad2owud8j] {
    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);
}
.pod-section__head[b-pad2owud8j]  .rzi { color: var(--rz-primary); }
.pod-section__badge[b-pad2owud8j] { 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); }

/* tables */
.pod-tablewrap[b-pad2owud8j] { overflow-x: auto; border: 1px solid var(--rz-border-color-lighter); border-radius: 10px; }
.pod-table[b-pad2owud8j] { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.pod-table thead th[b-pad2owud8j] {
    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;
}
.pod-table tbody td[b-pad2owud8j] { padding: 0.4rem 0.6rem; border-top: 1px solid var(--rz-border-color-lighter); vertical-align: middle; white-space: nowrap; }
.pod-table tbody tr:hover[b-pad2owud8j] { background: color-mix(in srgb, var(--rz-primary) 4%, transparent); }
.pod-table tfoot td[b-pad2owud8j] { 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); }
.pod-num[b-pad2owud8j] { text-align: right; font-variant-numeric: tabular-nums; }
.pod-foot-label[b-pad2owud8j] { text-align: right; }
.pod-cell-hi[b-pad2owud8j] { font-weight: 700; color: var(--rz-primary); }

/* preview report PDF */
.pod-report__actions[b-pad2owud8j] { margin-left: auto; display: inline-flex; gap: 0.3rem; align-items: center; }
.pod-report[b-pad2owud8j] {
    border: 1px solid var(--rz-border-color-lighter); border-radius: 10px; overflow: hidden;
    background: var(--rz-base-200, #f3f4f6);
}
.pod-report iframe[b-pad2owud8j] { display: block; width: 100%; height: 72vh; min-height: 420px; border: 0; }

@media (max-width: 900px) {
    .pod-report iframe[b-pad2owud8j] { height: 60vh; }
}

/* term & condition */
.pod-terms-text[b-pad2owud8j] { font-size: 0.83rem; line-height: 1.6; white-space: pre-line; color: var(--rz-text-color); }

/* action bar bawah */
.pod-actions[b-pad2owud8j] {
    display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 0.5rem;
    padding-top: 0.25rem;
}

/* chips & badges */
.pod-chip[b-pad2owud8j] { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.72rem; font-weight: 700; padding: 0.2rem 0.6rem; border-radius: 999px; white-space: nowrap; }
.pod-chip--new[b-pad2owud8j] { background: color-mix(in srgb, #0ea5e9 15%, transparent); color: #0284c7; }
.pod-chip--inprogress[b-pad2owud8j] { background: color-mix(in srgb, #f59e0b 18%, transparent); color: #d97706; }
.pod-chip--rejected[b-pad2owud8j] { background: color-mix(in srgb, #ef4444 15%, transparent); color: #dc2626; }
.pod-chip--completed[b-pad2owud8j] { background: color-mix(in srgb, #16a34a 16%, transparent); color: #16a34a; }
.pod-chip--partialdelivery[b-pad2owud8j] { background: color-mix(in srgb, #6366f1 15%, transparent); color: #4f46e5; }

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

@media (max-width: 900px) {
    .pod-po-info[b-pad2owud8j] { grid-template-columns: minmax(0, 1fr); }
    .pod-paysummary .pod-po-price[b-pad2owud8j] { min-width: 0; max-width: none; }
}
/* _content/P2PPortal.UI/Pages/PurchaseOrder/PurchaseOrderList.razor.rz.scp.css */
/* ============================ Vendor Portal - PURCHASE ORDER LIST ============================
   Mengikuti bahasa visual Delivery Order (DeliveryOrders.razor.css): stats, pill tabs, chip, card.
   ============================================================================================ */
.pol-body[b-ixdoesut8w] { padding: 1rem 1.15rem 2rem; }

/* stats */
.pol-stats[b-ixdoesut8w] { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0.75rem; margin-bottom: 1.15rem; }
.pol-stat[b-ixdoesut8w] {
    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);
}
.pol-stat[b-ixdoesut8w]  .rzi { font-size: 1.7rem; width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; }
.pol-stat__value[b-ixdoesut8w] { font-size: 1.4rem; font-weight: 700; line-height: 1.1; }
.pol-stat__label[b-ixdoesut8w] { font-size: 0.72rem; color: var(--rz-text-secondary-color); }
.pol-stat--po[b-ixdoesut8w]  .rzi { background: color-mix(in srgb, var(--rz-primary) 15%, transparent); color: var(--rz-primary); }
.pol-stat--new[b-ixdoesut8w]  .rzi { background: color-mix(in srgb, #0ea5e9 15%, transparent); color: #0284c7; }
.pol-stat--progress[b-ixdoesut8w]  .rzi { background: color-mix(in srgb, #f59e0b 18%, transparent); color: #d97706; }
.pol-stat--done[b-ixdoesut8w]  .rzi { background: color-mix(in srgb, #16a34a 15%, transparent); color: #16a34a; }

/* toolbar */
.pol-toolbar[b-ixdoesut8w] { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 1rem; }
.pol-tabs[b-ixdoesut8w] { display: inline-flex; flex-wrap: wrap; gap: 0.35rem; }
.pol-tab[b-ixdoesut8w] {
    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;
}
.pol-tab:hover[b-ixdoesut8w] { border-color: var(--rz-primary); }
.pol-tab[b-ixdoesut8w]  .rzi { font-size: 1rem; }
.pol-tab--active[b-ixdoesut8w] { 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); }
.pol-tab__count[b-ixdoesut8w] { 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); }
.pol-tab--active .pol-tab__count[b-ixdoesut8w] { background: rgba(255,255,255,0.25); }

.pol-search[b-ixdoesut8w] {
    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: 240px;
}
.pol-search[b-ixdoesut8w]  .rzi { color: var(--rz-text-secondary-color); font-size: 1.1rem; }
.pol-search input[b-ixdoesut8w] { border: none; outline: none; background: transparent; color: var(--rz-text-color); font-size: 0.85rem; width: 100%; }

/* chips status */
.pol-chip[b-ixdoesut8w] { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.7rem; font-weight: 700; padding: 0.15rem 0.55rem; border-radius: 999px; white-space: nowrap; }
.pol-chip--new[b-ixdoesut8w] { background: color-mix(in srgb, #0ea5e9 15%, transparent); color: #0284c7; }
.pol-chip--inprogress[b-ixdoesut8w] { background: color-mix(in srgb, #f59e0b 18%, transparent); color: #d97706; }
.pol-chip--rejected[b-ixdoesut8w] { background: color-mix(in srgb, #ef4444 15%, transparent); color: #dc2626; }
.pol-chip--completed[b-ixdoesut8w] { background: color-mix(in srgb, #16a34a 16%, transparent); color: #16a34a; }
.pol-chip--partialdelivery[b-ixdoesut8w] { background: color-mix(in srgb, #6366f1 15%, transparent); color: #4f46e5; }

/* chips pembayaran */
.pol-pay-chip[b-ixdoesut8w] { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.7rem; font-weight: 700; padding: 0.15rem 0.55rem; border-radius: 999px; white-space: nowrap; }
.pol-pay-chip[b-ixdoesut8w]  .rzi { font-size: 0.8rem; }
.pol-pay-chip--paid[b-ixdoesut8w] { background: color-mix(in srgb, #16a34a 16%, transparent); color: #16a34a; }
.pol-pay-chip--unpaid[b-ixdoesut8w] { background: color-mix(in srgb, #f59e0b 18%, transparent); color: #d97706; }

.pol-num[b-ixdoesut8w] { font-variant-numeric: tabular-nums; }
.pol-empty[b-ixdoesut8w] { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 3rem 1rem; color: var(--rz-text-secondary-color); }
.pol-empty[b-ixdoesut8w]  .rzi { font-size: 2.5rem; opacity: 0.5; }
.pol-grid[b-ixdoesut8w] { border-radius: 12px; overflow: hidden; }
/* _content/P2PPortal.UI/Pages/VendorManagement/CompletionDocumentRequestForm.razor.rz.scp.css */
.cdr-page-header[b-8wi7gkajwa] {
    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);
}

.cdr-page-header__left[b-8wi7gkajwa] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.w-100[b-8wi7gkajwa] {
    width: 100%;
}

.cdr-doc-table[b-8wi7gkajwa] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    margin-top: 0.35rem;
}

.cdr-doc-table th[b-8wi7gkajwa],
.cdr-doc-table td[b-8wi7gkajwa] {
    border: 1px solid var(--rz-border-color-lighter);
    padding: 0.35rem 0.45rem;
    vertical-align: middle;
    text-align: left;
}

.cdr-doc-table th[b-8wi7gkajwa] {
    background: color-mix(in srgb, var(--rz-base) 70%, transparent);
    font-weight: 600;
    font-size: 0.78rem;
    color: var(--rz-text-secondary-color);
    white-space: nowrap;
}

/* Upload per baris dokumen — page scoped, bukan master */
.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;
}
/* _content/P2PPortal.UI/Pages/VendorManagement/CompletionDocumentRequestList.razor.rz.scp.css */
/* CDR list — ikutin pola visual Purchase Order list (stats, pill tabs, chip, compact grid) */
.cdr-body[b-2mjtpcetji] { padding: 1rem 1.15rem 2rem; }

.cdr-stats[b-2mjtpcetji] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.15rem;
}

.cdr-stat[b-2mjtpcetji] {
    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);
}

.cdr-stat[b-2mjtpcetji]  .rzi {
    font-size: 1.7rem;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cdr-stat__value[b-2mjtpcetji] { font-size: 1.4rem; font-weight: 700; line-height: 1.1; }
.cdr-stat__label[b-2mjtpcetji] { font-size: 0.72rem; color: var(--rz-text-secondary-color); }

.cdr-stat--total[b-2mjtpcetji]  .rzi { background: color-mix(in srgb, var(--rz-primary) 15%, transparent); color: var(--rz-primary); }
.cdr-stat--open[b-2mjtpcetji]  .rzi { background: color-mix(in srgb, #0ea5e9 15%, transparent); color: #0284c7; }
.cdr-stat--progress[b-2mjtpcetji]  .rzi { background: color-mix(in srgb, #f59e0b 18%, transparent); color: #d97706; }
.cdr-stat--done[b-2mjtpcetji]  .rzi { background: color-mix(in srgb, #16a34a 15%, transparent); color: #16a34a; }

.cdr-toolbar[b-2mjtpcetji] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.cdr-tabs[b-2mjtpcetji] { display: inline-flex; flex-wrap: wrap; gap: 0.35rem; }

.cdr-tab[b-2mjtpcetji] {
    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;
}

.cdr-tab:hover[b-2mjtpcetji] { border-color: var(--rz-primary); }
.cdr-tab[b-2mjtpcetji]  .rzi { font-size: 1rem; }

.cdr-tab--active[b-2mjtpcetji] {
    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);
}

.cdr-tab__count[b-2mjtpcetji] {
    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);
}

.cdr-tab--active .cdr-tab__count[b-2mjtpcetji] { background: rgba(255, 255, 255, 0.25); }

.cdr-search[b-2mjtpcetji] {
    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: 240px;
}

.cdr-search[b-2mjtpcetji]  .rzi { color: var(--rz-text-secondary-color); font-size: 1.1rem; }
.cdr-search input[b-2mjtpcetji] {
    border: none;
    outline: none;
    background: transparent;
    color: var(--rz-text-color);
    font-size: 0.85rem;
    width: 100%;
}

.cdr-chip[b-2mjtpcetji] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    white-space: nowrap;
}

.cdr-chip--open[b-2mjtpcetji] { background: color-mix(in srgb, #0ea5e9 15%, transparent); color: #0284c7; }
.cdr-chip--inprogress[b-2mjtpcetji] { background: color-mix(in srgb, #f59e0b 18%, transparent); color: #d97706; }
.cdr-chip--completed[b-2mjtpcetji] { background: color-mix(in srgb, #16a34a 16%, transparent); color: #16a34a; }
.cdr-chip--overdue[b-2mjtpcetji] { background: color-mix(in srgb, #ef4444 15%, transparent); color: #dc2626; }
.cdr-chip--rejected[b-2mjtpcetji] { background: color-mix(in srgb, #ef4444 15%, transparent); color: #dc2626; }

.cdr-chip--prio-high[b-2mjtpcetji] { background: color-mix(in srgb, #ef4444 15%, transparent); color: #dc2626; }
.cdr-chip--prio-medium[b-2mjtpcetji] { background: color-mix(in srgb, #f59e0b 18%, transparent); color: #d97706; }
.cdr-chip--prio-low[b-2mjtpcetji] { background: color-mix(in srgb, #0ea5e9 15%, transparent); color: #0284c7; }
.cdr-chip--prio-info[b-2mjtpcetji] { background: color-mix(in srgb, #16a34a 16%, transparent); color: #16a34a; }

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

.cdr-empty[b-2mjtpcetji]  .rzi { font-size: 2.5rem; opacity: 0.5; }
.cdr-grid[b-2mjtpcetji] { border-radius: 12px; overflow: hidden; }
/* _content/P2PPortal.UI/Pages/VendorManagement/CompletionDocumentRequestView.razor.rz.scp.css */
.cdr-page-header[b-g74aooytb0] {
    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);
}

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

.w-100[b-g74aooytb0] {
    width: 100%;
}

.cdr-doc-table[b-g74aooytb0] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    margin-top: 0.35rem;
}

.cdr-doc-table th[b-g74aooytb0],
.cdr-doc-table td[b-g74aooytb0] {
    border: 1px solid var(--rz-border-color-lighter);
    padding: 0.35rem 0.45rem;
    vertical-align: middle;
    text-align: left;
}

.cdr-doc-table th[b-g74aooytb0] {
    background: color-mix(in srgb, var(--rz-base) 70%, transparent);
    font-weight: 600;
    font-size: 0.78rem;
    color: var(--rz-text-secondary-color);
    white-space: nowrap;
}
/* _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: 1.4fr 1fr; 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; }
}