/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-6wjvikjbrz],
.components-reconnect-repeated-attempt-visible[b-6wjvikjbrz],
.components-reconnect-failed-visible[b-6wjvikjbrz],
.components-pause-visible[b-6wjvikjbrz],
.components-resume-failed-visible[b-6wjvikjbrz],
.components-rejoining-animation[b-6wjvikjbrz] {
    display: none;
}

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


#components-reconnect-modal[b-6wjvikjbrz] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-6wjvikjbrz 0.5s both;
    &[open]

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

}

#components-reconnect-modal[b-6wjvikjbrz]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-6wjvikjbrz 0.5s ease-in-out;
    opacity: 1;
}

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

#components-reconnect-modal button[b-6wjvikjbrz] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-6wjvikjbrz] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-6wjvikjbrz] {
        background-color: #6b9ed2;
    }

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

    .components-rejoining-animation div[b-6wjvikjbrz] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-6wjvikjbrz 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

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

@keyframes components-rejoining-animation-b-6wjvikjbrz {
    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;
    }
}
/* /Components/Pages/Assets/Detail.razor.rz.scp.css */
@* scoped CSS for Pages/Assets/Detail.razor *@
@* Wireframe reference: R04 AI-S03 (frames 7PVEJ dark / hJDdt light) *@

/* ============================================================
   PAGE WRAPPER
   ============================================================ */

.aims-detail-page {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* ============================================================
   TOP BAR (breadcrumb + title)
   ============================================================ */

.aims-detail-topbar[b-me6wjake32] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 64px;
    padding: 0 24px;
    background: #1A2332;
}

[data-theme="light"] .aims-detail-topbar[b-me6wjake32] {
    background: #FFFFFF;
}

.aims-detail-topbar-left[b-me6wjake32] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.aims-detail-breadcrumb[b-me6wjake32] {
    font-family: 'Manrope', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #A0AEC0;
}

.aims-detail-pagetitle[b-me6wjake32] {
    font-family: 'Manrope', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #E2E8F0;
    margin: 0;
}

[data-theme="light"] .aims-detail-pagetitle[b-me6wjake32] {
    color: #0D1B2A;
}

/* ============================================================
   CONTENT AREA
   ============================================================ */

.aims-detail-content[b-me6wjake32] {
    flex: 1;
    background: #0F1923;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow-y: auto;
}

[data-theme="light"] .aims-detail-content[b-me6wjake32] {
    background: #F7F8FA;
}

/* ============================================================
   ASSET HEADER CARD
   ============================================================ */

.aims-detail-summary[b-me6wjake32] {
    background: #1A2332;
    border-radius: 8px;
    padding: 24px;
}

[data-theme="light"] .aims-detail-summary[b-me6wjake32] {
    background: #FFFFFF;
}

.aims-summary-top[b-me6wjake32] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.aims-summary-info[b-me6wjake32] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Asset name + warning badge row */
.aims-summary-name-row[b-me6wjake32] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.aims-summary-assetname[b-me6wjake32] {
    font-family: 'Manrope', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #E2E8F0;
}

[data-theme="light"] .aims-summary-assetname[b-me6wjake32] {
    color: #0D1B2A;
}

/* Asset number */
.aims-summary-assetno[b-me6wjake32] {
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #A0AEC0;
}

/* Meta info row with icons */
.aims-summary-meta[b-me6wjake32] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.aims-summary-meta-item[b-me6wjake32] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    color: #A0AEC0;
}

/* Action buttons */
.aims-summary-actions[b-me6wjake32] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.aims-btn-edit[b-me6wjake32] {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 16px;
    border: none;
    border-radius: 8px;
    background: #4DD9C0;
    color: #0D1B2A;
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.aims-btn-edit:hover[b-me6wjake32] {
    opacity: 0.9;
}

[data-theme="light"] .aims-btn-edit[b-me6wjake32] {
    background: #0D1B2A;
    color: #FFFFFF;
}

[data-theme="light"] .aims-btn-edit:hover[b-me6wjake32] {
    background: #1A2332;
}

.aims-btn-secondary[b-me6wjake32] {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 16px;
    border: none;
    border-radius: 8px;
    background: #0D1B2A;
    color: #A0AEC0;
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.aims-btn-secondary:hover[b-me6wjake32] {
    color: #E2E8F0;
}

[data-theme="light"] .aims-btn-secondary[b-me6wjake32] {
    background: #F0F1F3;
    color: #0D1B2A;
}

[data-theme="light"] .aims-btn-secondary:hover[b-me6wjake32] {
    background: #E2E8F0;
}

/* ============================================================
   TAB NAVIGATION
   ============================================================ */

.aims-tabs[b-me6wjake32] {
    display: flex;
    align-items: flex-end;
    background: #1A2332;
    border-radius: 8px 8px 0 0;
    padding: 0 16px;
    height: 48px;
    gap: 0;
    overflow-x: auto;
}

[data-theme="light"] .aims-tabs[b-me6wjake32] {
    background: #FFFFFF;
}

.aims-tab[b-me6wjake32] {
    position: relative;
    display: flex;
    align-items: center;
    height: 44px;
    padding: 0 16px;
    border: none;
    background: none;
    cursor: pointer;
    white-space: nowrap;
}

.aims-tab-label[b-me6wjake32] {
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #A0AEC0;
}

.aims-tab-active .aims-tab-label[b-me6wjake32] {
    font-weight: 600;
    color: #E2E8F0;
}

[data-theme="light"] .aims-tab-active .aims-tab-label[b-me6wjake32] {
    color: #0D1B2A;
}

.aims-tab-indicator[b-me6wjake32] {
    position: absolute;
    bottom: 0;
    left: 16px;
    right: 16px;
    height: 3px;
    border-radius: 2px;
    background: #4DD9C0;
}

/* ============================================================
   TAB CONTENT PANEL
   ============================================================ */

.aims-tab-content[b-me6wjake32] {
    background: #1A2332;
    border-radius: 0 0 8px 8px;
    padding: 24px;
    min-height: 200px;
}

[data-theme="light"] .aims-tab-content[b-me6wjake32] {
    background: #FFFFFF;
}

.aims-tab-content-title[b-me6wjake32] {
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #E2E8F0;
    margin: 0 0 20px 0;
}

[data-theme="light"] .aims-tab-content-title[b-me6wjake32] {
    color: #0D1B2A;
}

/* ============================================================
   FORM GRID (2 columns)
   ============================================================ */

.aims-form-grid[b-me6wjake32] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 24px;
}

.aims-form-col[b-me6wjake32] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ============================================================
   FIELD with PILL VALUE (matching wireframe)
   ============================================================ */

.aims-field[b-me6wjake32] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.aims-field-label[b-me6wjake32] {
    font-family: 'Manrope', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #E2E8F0;
}

[data-theme="light"] .aims-field-label[b-me6wjake32] {
    color: #0D1B2A;
}

.aims-field-pill[b-me6wjake32] {
    display: flex;
    align-items: center;
    height: 36px;
    padding: 0 12px;
    border-radius: 6px;
    background: #0D1B2A;
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    color: #A0AEC0;
}

[data-theme="light"] .aims-field-pill[b-me6wjake32] {
    background: #F0F1F3;
    color: #0D1B2A;
}

/* Post-generation read-only fields (AC7) */
.aims-field-readonly[b-me6wjake32] {
    opacity: 0.6;
    font-style: italic;
}

/* Monospace for asset numbers */
.aims-field-mono[b-me6wjake32] {
    font-family: 'Courier New', monospace;
    font-weight: 600;
    color: #4DD9C0;
}

[data-theme="light"] .aims-field-mono[b-me6wjake32] {
    color: #0D1B2A;
}

/* ============================================================
   COMPONENT TABLE
   ============================================================ */

.aims-comp-table[b-me6wjake32] {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
}

.aims-comp-table th[b-me6wjake32] {
    text-align: left;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #A0AEC0;
    border-bottom: 1px solid #334155;
}

[data-theme="light"] .aims-comp-table th[b-me6wjake32] {
    border-bottom-color: #E2E8F0;
}

.aims-comp-table td[b-me6wjake32] {
    padding: 10px 12px;
    border-bottom: 1px solid #1E293B;
    color: #E2E8F0;
}

[data-theme="light"] .aims-comp-table td[b-me6wjake32] {
    border-bottom-color: #F1F5F9;
    color: #0D1B2A;
}

.aims-comp-table tbody tr:last-child td[b-me6wjake32] {
    border-bottom: none;
}

/* Component status badges */
.aims-comp-status[b-me6wjake32] {
    display: inline-block;
    font-size: 12px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 9999px;
}

.aims-comp-active[b-me6wjake32] {
    background: #052e16;
    color: #4ade80;
}

[data-theme="light"] .aims-comp-active[b-me6wjake32] {
    background: #DCFCE7;
    color: #166534;
}

.aims-comp-inactive[b-me6wjake32] {
    background: #1E293B;
    color: #94A3B8;
}

[data-theme="light"] .aims-comp-inactive[b-me6wjake32] {
    background: #F1F5F9;
    color: #64748B;
}

/* ============================================================
   EMPTY STATE
   ============================================================ */

.aims-empty[b-me6wjake32] {
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    color: #A0AEC0;
    font-style: italic;
}

/* ============================================================
   LOADING STATE
   ============================================================ */

.aims-detail-loading[b-me6wjake32] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 24px;
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    color: #A0AEC0;
    background: #0F1923;
}

[data-theme="light"] .aims-detail-loading[b-me6wjake32] {
    background: #F7F8FA;
}

/* ============================================================
   ERROR STATE
   ============================================================ */

.aims-detail-error[b-me6wjake32] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 24px;
    text-align: center;
    gap: 16px;
    background: #0F1923;
}

[data-theme="light"] .aims-detail-error[b-me6wjake32] {
    background: #F7F8FA;
}

.aims-detail-error h3[b-me6wjake32] {
    font-family: 'Manrope', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: #E2E8F0;
    margin: 0;
}

[data-theme="light"] .aims-detail-error h3[b-me6wjake32] {
    color: #0D1B2A;
}

.aims-detail-error p[b-me6wjake32] {
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    color: #A0AEC0;
    margin: 0;
}

.aims-detail-err-btn[b-me6wjake32] {
    height: 36px;
    padding: 0 16px;
    border: none;
    border-radius: 8px;
    background: #0D1B2A;
    color: #A0AEC0;
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

[data-theme="light"] .aims-detail-err-btn[b-me6wjake32] {
    background: #F0F1F3;
    color: #0D1B2A;
}

/* ============================================================
   QR PLACEHOLDER
   ============================================================ */

.aims-qr-placeholder[b-me6wjake32] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px;
    margin-top: 20px;
    border: 2px dashed #334155;
    border-radius: 8px;
    gap: 8px;
    color: #A0AEC0;
}

[data-theme="light"] .aims-qr-placeholder[b-me6wjake32] {
    border-color: #E2E8F0;
}

.aims-qr-placeholder p[b-me6wjake32] {
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    color: #A0AEC0;
    margin: 0;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
    .aims-summary-top[b-me6wjake32] {
        flex-direction: column;
        gap: 16px;
    }

    .aims-summary-actions[b-me6wjake32] {
        width: 100%;
    }

    .aims-form-grid[b-me6wjake32] {
        grid-template-columns: 1fr;
    }

    .aims-tabs[b-me6wjake32] {
        overflow-x: auto;
    }
}
/* /Components/Pages/Assets/List.razor.rz.scp.css */
@* scoped CSS for Pages/Assets/List.razor *@

/* Lesson 0.8: Prevent CSS grid column expansion by constraining overflow */
.aims-welcome {
    overflow: hidden;
}

.aims-user-toolbar[b-5z4d663gxi] {
    overflow: hidden;
}

/* Grid items within the toolbar flex layout — prevent overflow expansion */
.aims-auth-input-group[b-5z4d663gxi] {
    min-width: 0;
    overflow: hidden;
}

/* AssetNo column — unregistered indicator */
.aims-assetno-unregistered[b-5z4d663gxi] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #A0AEC0;
    font-style: italic;
}

.aims-assetno-unregistered[b-5z4d663gxi]::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #EAB308;
    display: inline-block;
    flex-shrink: 0;
}

/* AssetNo column — real generated number */
.aims-assetno-real[b-5z4d663gxi] {
    font-family: 'Courier New', monospace;
    font-weight: 500;
}
/* /Components/Pages/Assets/Register.razor.rz.scp.css */
/* ============================================================================
   Asset Registration Wizard — Step 1 (Profil Aset) + Step 2 (Komponen Aset)
   ============================================================================ */

/* --- Wizard Container --- */
.aims-wizard[b-onm55f13m8] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.aims-wizard-header h2[b-onm55f13m8] {
    font-size: 24px;
    font-weight: 700;
    color: var(--aims-text-primary);
    margin: 0 0 8px;
}

.aims-wizard-header p[b-onm55f13m8] {
    font-size: 14px;
    color: var(--aims-text-secondary);
    margin: 0;
}

/* ============================================================================
   Stepper (Wireframe-aligned: circles on top, labels below)
   ============================================================================ */
.aims-stepper[b-onm55f13m8] {
    background: #1A2332;
    border: none;
    border-radius: 8px;
    padding: 24px 32px;
}

[data-theme="light"] .aims-stepper[b-onm55f13m8] {
    background: #FFFFFF;
}

.aims-stepper-steps[b-onm55f13m8] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.aims-step[b-onm55f13m8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: default;
    user-select: none;
    min-width: 0;
}

.aims-step[role="button"][b-onm55f13m8] {
    cursor: pointer;
}

.aims-step[role="button"]:hover .aims-step-circle[b-onm55f13m8] {
    box-shadow: 0 0 0 3px rgba(77, 217, 192, 0.2);
}

.aims-step-circle[b-onm55f13m8] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

/* Active step — white filled circle */
.aims-step-active .aims-step-circle[b-onm55f13m8] {
    background-color: #FFFFFF;
    color: #0D1B2A;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.aims-step-active .aims-step-label[b-onm55f13m8] {
    color: #E2E8F0;
    font-weight: 600;
}

[data-theme="light"] .aims-step-active .aims-step-circle[b-onm55f13m8] {
    background-color: #0D1B2A;
    color: #FFFFFF;
}

[data-theme="light"] .aims-step-active .aims-step-label[b-onm55f13m8] {
    color: #0D1B2A;
}

/* Completed step — teal filled circle */
.aims-step-completed .aims-step-circle[b-onm55f13m8] {
    background-color: #4DD9C0;
    color: #0D1B2A;
}

.aims-step-completed .aims-step-label[b-onm55f13m8] {
    color: #E2E8F0;
    font-weight: 600;
}

[data-theme="light"] .aims-step-completed .aims-step-label[b-onm55f13m8] {
    color: #0D1B2A;
}

/* Pending step — dark circle with grey border */
.aims-step-pending .aims-step-circle[b-onm55f13m8] {
    background-color: #0D1B2A;
    color: #A0AEC0;
    border: 1.5px solid #2D3748;
}

.aims-step-pending .aims-step-label[b-onm55f13m8] {
    color: #A0AEC0;
    font-weight: 500;
}

[data-theme="light"] .aims-step-pending .aims-step-circle[b-onm55f13m8] {
    background-color: #FFFFFF;
    border-color: #E2E8F0;
    color: #A0AEC0;
}

[data-theme="light"] .aims-step-pending .aims-step-label[b-onm55f13m8] {
    color: #A0AEC0;
}

.aims-step-label[b-onm55f13m8] {
    font-size: 12px;
    white-space: nowrap;
    text-align: center;
}

/* Connector line between steps */
.aims-step-connector[b-onm55f13m8] {
    flex: 0 0 60px;
    height: 2px;
    background-color: #2D3748;
    margin: -26px 8px 0 8px;
    transition: background-color 0.2s ease;
}

.aims-step-connector.aims-connector-completed[b-onm55f13m8] {
    background-color: #4DD9C0;
}

[data-theme="light"] .aims-step-connector[b-onm55f13m8] {
    background-color: #E2E8F0;
}

/* ============================================================================
   Wizard Card
   ============================================================================ */
.aims-wizard-card[b-onm55f13m8] {
    background: #1A2332;
    border: none;
    border-radius: 8px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

[data-theme="light"] .aims-wizard-card[b-onm55f13m8] {
    background: #FFFFFF;
}

.aims-wizard-card-header[b-onm55f13m8] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--aims-border-color);
    font-size: 16px;
    font-weight: 700;
    color: var(--aims-text-primary);
}

/* ============================================================================
   Two-Column Grid (Step 1)
   ============================================================================ */
.aims-wizard-grid[b-onm55f13m8] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 32px;
}

.aims-wizard-grid-compact[b-onm55f13m8] {
    gap: 16px 24px;
}

.aims-wizard-column[b-onm55f13m8] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow: hidden;
}

/* ============================================================================
   Row Fields (side-by-side within a field)
   ============================================================================ */
.aims-wizard-row-fields[b-onm55f13m8] {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

/* ============================================================================
   Textarea
   ============================================================================ */
.aims-wizard-textarea[b-onm55f13m8] {
    min-height: 80px;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    resize: vertical;
    line-height: 1.5;
}

/* ============================================================================
   Toggle Switch
   ============================================================================ */
.aims-toggle-row[b-onm55f13m8] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
}

.aims-toggle[b-onm55f13m8] {
    position: relative;
    display: inline-flex;
    cursor: pointer;
}

.aims-toggle-input[b-onm55f13m8] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.aims-toggle-slider[b-onm55f13m8] {
    display: inline-block;
    width: 44px;
    height: 24px;
    background-color: #CBD5E1;
    border-radius: 12px;
    position: relative;
    transition: background-color 0.2s ease;
}

.aims-toggle-slider[b-onm55f13m8]::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #FFFFFF;
    top: 2px;
    left: 2px;
    transition: transform 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.aims-toggle-input:checked + .aims-toggle-slider[b-onm55f13m8] {
    background-color: #004D46;
}

.aims-toggle-input:checked + .aims-toggle-slider[b-onm55f13m8]::after {
    transform: translateX(20px);
}

.aims-toggle-text[b-onm55f13m8] {
    font-size: 14px;
    color: var(--aims-text-primary);
    font-weight: 500;
}

[data-theme="dark"] .aims-toggle-slider[b-onm55f13m8] {
    background-color: #475569;
}

[data-theme="dark"] .aims-toggle-input:checked + .aims-toggle-slider[b-onm55f13m8] {
    background-color: #4DD9C0;
}

/* ============================================================================
   Image Gallery (Gambar Aset — Wireframe Gallery)
   ============================================================================ */

/* Empty state (fixed height to match populated gallery) */
.aims-gallery-empty[b-onm55f13m8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 130px;
    padding: 0 20px;
    border-radius: 8px;
    background-color: #0D1B2A;
    border: 1px dashed #2D3748;
    box-sizing: border-box;
}

[data-theme="light"] .aims-gallery-empty[b-onm55f13m8] {
    background-color: #FFFFFF;
    border-color: #E2E8F0;
}

.aims-gallery-empty-inner[b-onm55f13m8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--aims-text-secondary);
    font-size: 13px;
}

.aims-gallery-empty-btn[b-onm55f13m8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 16px;
    border-radius: 6px;
    background-color: #4DD9C0;
    color: #0D1B2A;
    font-size: 12px;
    font-weight: 600;
    font-family: 'Manrope', sans-serif;
    cursor: pointer;
    border: none;
}

.aims-gallery-empty-btn:hover[b-onm55f13m8] {
    background-color: #3BC4AB;
}

.aims-gallery-hint[b-onm55f13m8] {
    font-size: 11px;
    color: var(--aims-text-muted, #94A3B8);
}

/* Gallery Wrapper — horizontal layout */
.aims-gallery-wrapper[b-onm55f13m8] {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 130px;
    max-height: 130px;
    overflow: hidden;
    flex-shrink: 0;
}

/* Chevron arrows */
.aims-gallery-arrow[b-onm55f13m8] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 14px;
    background-color: #1A2332;
    border: 1px solid #2D3748;
    color: #A0AEC0;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
}

.aims-gallery-arrow:disabled[b-onm55f13m8] {
    opacity: 0.4;
    cursor: not-allowed;
}

.aims-gallery-arrow:hover:not(:disabled)[b-onm55f13m8] {
    background-color: #2D3748;
}

[data-theme="light"] .aims-gallery-arrow[b-onm55f13m8] {
    background-color: #FFFFFF;
    border-color: #E2E8F0;
}

[data-theme="light"] .aims-gallery-arrow:hover:not(:disabled)[b-onm55f13m8] {
    background-color: #F1F5F9;
}

/* Thumbnail strip (clipped) */
.aims-gallery-strip[b-onm55f13m8] {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
    border-radius: 8px;
    background-color: #0D1B2A;
    padding: 8px;
    flex: 1;
    height: 100%;
    box-sizing: border-box;
}

[data-theme="light"] .aims-gallery-strip[b-onm55f13m8] {
    background-color: #F7F8FA;
}

/* Individual thumbnail */
.aims-gallery-thumb[b-onm55f13m8] {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 6px;
    background-color: #1A2332;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    overflow: hidden;
    box-sizing: border-box;
}

[data-theme="light"] .aims-gallery-thumb[b-onm55f13m8] {
    background-color: #FFFFFF;
    border: 1px solid #E2E8F0;
}

.aims-gallery-thumb:hover[b-onm55f13m8] {
    box-shadow: 0 0 0 2px #4DD9C0;
}

.aims-gallery-thumb-img[b-onm55f13m8] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Delete X on thumbnail */
.aims-gallery-thumb-del[b-onm55f13m8] {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.9);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.aims-gallery-thumb:hover .aims-gallery-thumb-del[b-onm55f13m8] {
    opacity: 1;
}

[data-theme="dark"] .aims-gallery-thumb-del[b-onm55f13m8] {
    background-color: rgba(0, 0, 0, 0.7);
}

/* Add More card */
.aims-gallery-add[b-onm55f13m8] {
    width: 80px;
    min-width: 80px;
    height: 80px;
    border-radius: 6px;
    background-color: #0D1B2A;
    border: 1px dashed #2D3748;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 500;
    color: #A0AEC0;
    font-family: 'Manrope', sans-serif;
    overflow: hidden;
    line-height: 1.2;
    text-align: center;
    box-sizing: border-box;
}

.aims-gallery-add:hover[b-onm55f13m8] {
    border-color: #4DD9C0;
    background-color: #1A2332;
}

[data-theme="light"] .aims-gallery-add[b-onm55f13m8] {
    background-color: #FFFFFF;
    border-color: #E2E8F0;
}

[data-theme="light"] .aims-gallery-add:hover[b-onm55f13m8] {
    border-color: #4DD9C0;
    background-color: #F0FDFB;
}

/* ============================================================================
   Image Preview Popup
   ============================================================================ */
.aims-gallery-overlay[b-onm55f13m8] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
}

.aims-gallery-preview[b-onm55f13m8] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 90vw;
    max-height: 85vh;
}

.aims-gallery-preview-close[b-onm55f13m8] {
    position: absolute;
    top: -40px;
    right: 0;
    background: none;
    border: none;
    color: #FFFFFF;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.aims-gallery-preview-close:hover[b-onm55f13m8] {
    color: #4DD9C0;
}

.aims-gallery-preview-nav[b-onm55f13m8] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    background-color: rgba(255, 255, 255, 0.15);
    border: none;
    color: #FFFFFF;
    cursor: pointer;
    flex-shrink: 0;
}

.aims-gallery-preview-nav:disabled[b-onm55f13m8] {
    opacity: 0.3;
    cursor: not-allowed;
}

.aims-gallery-preview-nav:hover:not(:disabled)[b-onm55f13m8] {
    background-color: rgba(255, 255, 255, 0.25);
}

.aims-gallery-preview-img[b-onm55f13m8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.aims-gallery-preview-img img[b-onm55f13m8] {
    max-width: 70vw;
    max-height: 70vh;
    border-radius: 8px;
    object-fit: contain;
}

.aims-gallery-preview-name[b-onm55f13m8] {
    font-size: 13px;
    color: #A0AEC0;
    text-align: center;
    font-family: 'Manrope', sans-serif;
}

/* ============================================================================
   Dark mode overrides for gallery
   ============================================================================ */
[data-theme="dark"] .aims-gallery-empty[b-onm55f13m8] {
    background-color: #0D1B2A;
    border-color: #2D3748;
}

/* ============================================================================
   Wizard Actions (Button Row)
   ============================================================================ */
.aims-wizard-actions[b-onm55f13m8] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 8px;
    border-top: 1px solid var(--aims-border-color);
}

/* ============================================================================
   Step 2 — Wireframe-aligned Component Section
   ============================================================================ */

/* Role Badge */
.aims-step2-role-badge[b-onm55f13m8] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 4px;
    background-color: #E8F8F5;
    color: #0D1B2A;
    font-size: 11px;
    font-weight: 600;
    font-family: 'Manrope', sans-serif;
    width: fit-content;
}

[data-theme="dark"] .aims-step2-role-badge[b-onm55f13m8] {
    background-color: #1A3A3A;
    color: #4DD9C0;
}

/* Step Title */
.aims-step2-title[b-onm55f13m8] {
    font-size: 16px;
    font-weight: 600;
    color: var(--aims-text-primary);
    font-family: 'Manrope', sans-serif;
    margin: 0;
}

/* Step Subtitle */
.aims-step2-subtitle[b-onm55f13m8] {
    font-size: 13px;
    font-weight: 400;
    color: #A0AEC0;
    font-family: 'Manrope', sans-serif;
    margin-top: -12px;
}

/* Counter Row */
.aims-step2-counter-row[b-onm55f13m8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.aims-step2-counter-badge[b-onm55f13m8] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 12px;
    background-color: #E8F8F5;
    color: #0D1B2A;
    font-size: 12px;
    font-weight: 600;
    font-family: 'Manrope', sans-serif;
}

[data-theme="dark"] .aims-step2-counter-badge[b-onm55f13m8] {
    background-color: #1A3A3A;
    color: #4DD9C0;
}

/* Tambah Komponen Button */
.aims-step2-btn-add[b-onm55f13m8] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 16px;
    border-radius: 8px;
    border: none;
    background-color: #0D1B2A;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Manrope', sans-serif;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.aims-step2-btn-add:hover[b-onm55f13m8] {
    background-color: #1A2332;
}

[data-theme="dark"] .aims-step2-btn-add[b-onm55f13m8] {
    background-color: #4DD9C0;
    color: #0D1B2A;
}

[data-theme="dark"] .aims-step2-btn-add:hover[b-onm55f13m8] {
    background-color: #3BC4AB;
}

/* ============================================================================
   Step 2 — Inline Add Form
   ============================================================================ */
.aims-step2-add-form[b-onm55f13m8] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #4DD9C0;
    background-color: #F0FDFB;
}

[data-theme="dark"] .aims-step2-add-form[b-onm55f13m8] {
    background-color: #0A1520;
}

/* Form Header */
.aims-step2-form-header[b-onm55f13m8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.aims-step2-form-title[b-onm55f13m8] {
    font-size: 14px;
    font-weight: 600;
    color: #0D1B2A;
    font-family: 'Manrope', sans-serif;
}

[data-theme="dark"] .aims-step2-form-title[b-onm55f13m8] {
    color: #E2E8F0;
}

.aims-step2-form-close[b-onm55f13m8] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: #A0AEC0;
    cursor: pointer;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    padding: 0;
}

.aims-step2-form-close:hover[b-onm55f13m8] {
    background-color: rgba(0,0,0,0.05);
}

[data-theme="dark"] .aims-step2-form-close:hover[b-onm55f13m8] {
    background-color: rgba(255,255,255,0.1);
}

/* Form Two-Column Fields */
.aims-step2-form-fields[b-onm55f13m8] {
    display: flex;
    gap: 16px;
}

.aims-step2-form-col[b-onm55f13m8] {
    flex: 1;
}

.aims-step2-form-col-status[b-onm55f13m8] {
    flex: 0 0 200px;
}

/* Field Label */
.aims-step2-field-label[b-onm55f13m8] {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #0D1B2A;
    font-family: 'Manrope', sans-serif;
    margin-bottom: 6px;
}

[data-theme="dark"] .aims-step2-field-label[b-onm55f13m8] {
    color: #E2E8F0;
}

/* Text Input */
.aims-step2-input[b-onm55f13m8] {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #E2E8F0;
    border-radius: 6px;
    background-color: #FFFFFF;
    font-size: 13px;
    font-family: 'Manrope', sans-serif;
    color: #0D1B2A;
    box-sizing: border-box;
    outline: none;
}

.aims-step2-input:focus[b-onm55f13m8] {
    border-color: #4DD9C0;
    box-shadow: 0 0 0 2px rgba(77, 217, 192, 0.15);
}

[data-theme="dark"] .aims-step2-input[b-onm55f13m8] {
    background-color: #1A2332;
    border-color: #475569;
    color: #E2E8F0;
}

[data-theme="dark"] .aims-step2-input:focus[b-onm55f13m8] {
    border-color: #4DD9C0;
    box-shadow: 0 0 0 2px rgba(77, 217, 192, 0.2);
}

/* Placeholder styling */
.aims-step2-input[b-onm55f13m8]::placeholder {
    color: #A0AEC0;
    font-size: 11px;
}

/* Status selector (toggle in form) */
.aims-step2-status-selector[b-onm55f13m8] {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #E2E8F0;
    border-radius: 6px;
    background-color: #FFFFFF;
}

[data-theme="dark"] .aims-step2-status-selector[b-onm55f13m8] {
    background-color: #1A2332;
    border-color: #475569;
}

/* Textarea */
.aims-step2-textarea[b-onm55f13m8] {
    width: 100%;
    min-height: 72px;
    padding: 10px 12px;
    border: 1px solid #E2E8F0;
    border-radius: 6px;
    background-color: #FFFFFF;
    font-size: 13px;
    font-family: 'Manrope', sans-serif;
    color: #0D1B2A;
    box-sizing: border-box;
    outline: none;
    resize: vertical;
    line-height: 1.5;
}

.aims-step2-textarea:focus[b-onm55f13m8] {
    border-color: #4DD9C0;
    box-shadow: 0 0 0 2px rgba(77, 217, 192, 0.15);
}

.aims-step2-textarea[b-onm55f13m8]::placeholder {
    color: #A0AEC0;
    font-size: 11px;
}

[data-theme="dark"] .aims-step2-textarea[b-onm55f13m8] {
    background-color: #1A2332;
    border-color: #475569;
    color: #E2E8F0;
}

[data-theme="dark"] .aims-step2-textarea:focus[b-onm55f13m8] {
    border-color: #4DD9C0;
}

/* Form field wrap */
.aims-step2-field[b-onm55f13m8] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Form Buttons */
.aims-step2-form-buttons[b-onm55f13m8] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.aims-step2-btn-cancel[b-onm55f13m8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 20px;
    border-radius: 8px;
    border: none;
    background-color: #F0F1F3;
    color: #0D1B2A;
    font-size: 13px;
    font-weight: 500;
    font-family: 'Manrope', sans-serif;
    cursor: pointer;
}

.aims-step2-btn-cancel:hover[b-onm55f13m8] {
    background-color: #E2E8F0;
}

[data-theme="dark"] .aims-step2-btn-cancel[b-onm55f13m8] {
    background-color: #1E293B;
    color: #E2E8F0;
}

[data-theme="dark"] .aims-step2-btn-cancel:hover[b-onm55f13m8] {
    background-color: #334155;
}

.aims-step2-btn-save[b-onm55f13m8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 36px;
    padding: 0 20px;
    border-radius: 8px;
    border: none;
    background-color: #0D1B2A;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Manrope', sans-serif;
    cursor: pointer;
}

.aims-step2-btn-save:hover[b-onm55f13m8] {
    background-color: #1A2332;
}

.aims-step2-btn-save:disabled[b-onm55f13m8] {
    opacity: 0.6;
    cursor: not-allowed;
}

[data-theme="dark"] .aims-step2-btn-save[b-onm55f13m8] {
    background-color: #4DD9C0;
    color: #0D1B2A;
}

[data-theme="dark"] .aims-step2-btn-save:hover[b-onm55f13m8] {
    background-color: #3BC4AB;
}

/* ============================================================================
   Step 2 — Component Table (Flexbox layout matching wireframe)
   ============================================================================ */
.aims-step2-table[b-onm55f13m8] {
    border: 1px solid var(--aims-border-color);
    border-radius: 8px;
    overflow: hidden;
}

.aims-step2-table-header[b-onm55f13m8] {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    background-color: var(--aims-page-bg);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--aims-text-secondary);
}

.aims-step2-table-row[b-onm55f13m8] {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    font-size: 13px;
    color: var(--aims-text-primary);
}

.aims-step2-row-even[b-onm55f13m8] {
    background-color: var(--aims-surface-bg);
}

[data-theme="dark"] .aims-step2-row-even[b-onm55f13m8] {
    background-color: #0D1B2A;
}

.aims-step2-row-odd[b-onm55f13m8] {
    background-color: #FAFBFC;
}

[data-theme="dark"] .aims-step2-row-odd[b-onm55f13m8] {
    background-color: #0A1520;
}

.aims-step2-row-divider[b-onm55f13m8] {
    height: 1px;
    background-color: var(--aims-border-color);
}

[data-theme="dark"] .aims-step2-row-divider[b-onm55f13m8] {
    background-color: #1A2332;
}

/* Column widths */
.aims-step2-col-name[b-onm55f13m8] {
    flex: 1;
    font-weight: 500;
}

.aims-step2-col-status[b-onm55f13m8] {
    flex: 0 0 140px;
}

.aims-step2-col-notes[b-onm55f13m8] {
    flex: 1;
    color: var(--aims-text-secondary);
}

.aims-step2-col-actions[b-onm55f13m8] {
    flex: 0 0 60px;
    display: flex;
    justify-content: center;
}

/* Status Pill Badges */
.aims-step2-status-pill[b-onm55f13m8] {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}

.aims-pill-active[b-onm55f13m8] {
    background-color: #E8F8F5;
    color: #059669;
}

[data-theme="dark"] .aims-pill-active[b-onm55f13m8] {
    background-color: #1A3A3A;
    color: #4DD9C0;
}

.aims-pill-inactive[b-onm55f13m8] {
    background-color: #F0F1F3;
    color: #A0AEC0;
}

[data-theme="dark"] .aims-pill-inactive[b-onm55f13m8] {
    background-color: #1A2332;
    color: #94A3B8;
}

/* Delete Button */
.aims-step2-btn-delete[b-onm55f13m8] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: #E53E3E;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    padding: 0;
}

.aims-step2-btn-delete:hover[b-onm55f13m8] {
    background-color: rgba(229, 62, 62, 0.08);
}

.aims-step2-btn-delete:disabled[b-onm55f13m8] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ============================================================================
   Step 2 — Empty State
   ============================================================================ */
.aims-step2-empty[b-onm55f13m8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 40px 20px;
    text-align: center;
    border: 1px solid var(--aims-border-color);
    border-radius: 8px;
}

.aims-step2-empty-title[b-onm55f13m8] {
    font-size: 14px;
    font-weight: 500;
    color: var(--aims-text-secondary);
}

.aims-step2-empty-hint[b-onm55f13m8] {
    font-size: 12px;
    font-weight: 400;
    color: var(--aims-text-muted, #94A3B8);
}

/* ============================================================================
   Step 2 — Delete Confirmation Dialog
   ============================================================================ */
.aims-step2-overlay[b-onm55f13m8] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.aims-step2-dialog[b-onm55f13m8] {
    width: 420px;
    background-color: #FFFFFF;
    border-radius: 12px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
}

[data-theme="dark"] .aims-step2-dialog[b-onm55f13m8] {
    background-color: #1A2332;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}

.aims-step2-dialog-header[b-onm55f13m8] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.aims-step2-dialog-icon[b-onm55f13m8] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background-color: #FEE2E2;
    flex-shrink: 0;
}

.aims-step2-dialog-title[b-onm55f13m8] {
    font-size: 16px;
    font-weight: 600;
    color: #0D1B2A;
    font-family: 'Manrope', sans-serif;
}

[data-theme="dark"] .aims-step2-dialog-title[b-onm55f13m8] {
    color: #E2E8F0;
}

.aims-step2-dialog-msg[b-onm55f13m8] {
    font-size: 13px;
    font-weight: 400;
    color: #A0AEC0;
    line-height: 1.5;
}

.aims-step2-dialog-buttons[b-onm55f13m8] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.aims-step2-dialog-btn-cancel[b-onm55f13m8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 20px;
    border-radius: 8px;
    border: none;
    background-color: #F0F1F3;
    color: #0D1B2A;
    font-size: 13px;
    font-weight: 500;
    font-family: 'Manrope', sans-serif;
    cursor: pointer;
}

.aims-step2-dialog-btn-cancel:hover[b-onm55f13m8] {
    background-color: #E2E8F0;
}

[data-theme="dark"] .aims-step2-dialog-btn-cancel[b-onm55f13m8] {
    background-color: #1E293B;
    color: #E2E8F0;
}

[data-theme="dark"] .aims-step2-dialog-btn-cancel:hover[b-onm55f13m8] {
    background-color: #334155;
}

.aims-step2-dialog-btn-delete[b-onm55f13m8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 20px;
    border-radius: 8px;
    border: none;
    background-color: #E53E3E;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Manrope', sans-serif;
    cursor: pointer;
}

.aims-step2-dialog-btn-delete:hover[b-onm55f13m8] {
    background-color: #C53030;
}

.aims-step2-dialog-btn-delete:disabled[b-onm55f13m8] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ============================================================================
   Step 2 — Wizard Navigation
   ============================================================================ */
.aims-step2-navigation[b-onm55f13m8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--aims-border-color);
}

.aims-step2-nav-back[b-onm55f13m8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 20px;
    border-radius: 8px;
    border: none;
    background-color: #F0F1F3;
    color: #0D1B2A;
    font-size: 13px;
    font-weight: 500;
    font-family: 'Manrope', sans-serif;
    cursor: pointer;
}

.aims-step2-nav-back:hover[b-onm55f13m8] {
    background-color: #E2E8F0;
}

[data-theme="dark"] .aims-step2-nav-back[b-onm55f13m8] {
    background-color: #0D1B2A;
    color: #E2E8F0;
}

[data-theme="dark"] .aims-step2-nav-back:hover[b-onm55f13m8] {
    background-color: #1E293B;
}

.aims-step2-nav-next[b-onm55f13m8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 20px;
    border-radius: 8px;
    border: none;
    background-color: #0D1B2A;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Manrope', sans-serif;
    cursor: pointer;
}

.aims-step2-nav-next:hover[b-onm55f13m8] {
    background-color: #1A2332;
}

[data-theme="dark"] .aims-step2-nav-next[b-onm55f13m8] {
    background-color: #4DD9C0;
    color: #0D1B2A;
}

[data-theme="dark"] .aims-step2-nav-next:hover[b-onm55f13m8] {
    background-color: #3BC4AB;
}

/* ============================================================================
   Dark Mode Overrides for Step 1 elements
   ============================================================================ */
/* /Components/Pages/Assets/RegisterStep1.razor.rz.scp.css */
/* ============================================================================
   Asset Registration Wizard — Step 1 (Profil Aset) + Step 2 (Komponen Aset)
   ============================================================================ */

/* --- Wizard Container --- */
.aims-wizard[b-0f51zx3p3t] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.aims-wizard-header h2[b-0f51zx3p3t] {
    font-size: 24px;
    font-weight: 700;
    color: var(--aims-text-primary);
    margin: 0 0 8px;
}

.aims-wizard-header p[b-0f51zx3p3t] {
    font-size: 14px;
    color: var(--aims-text-secondary);
    margin: 0;
}

/* ============================================================================
   Stepper (Wireframe-aligned: circles on top, labels below)
   ============================================================================ */
.aims-stepper[b-0f51zx3p3t] {
    background: #1A2332;
    border: none;
    border-radius: 8px;
    padding: 24px 32px;
}

[data-theme="light"] .aims-stepper[b-0f51zx3p3t] {
    background: #FFFFFF;
}

.aims-stepper-steps[b-0f51zx3p3t] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.aims-step[b-0f51zx3p3t] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: default;
    user-select: none;
    min-width: 0;
}

.aims-step[role="button"][b-0f51zx3p3t] {
    cursor: pointer;
}

.aims-step[role="button"]:hover .aims-step-circle[b-0f51zx3p3t] {
    box-shadow: 0 0 0 3px rgba(77, 217, 192, 0.2);
}

.aims-step-circle[b-0f51zx3p3t] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

/* Active step — white filled circle */
.aims-step-active .aims-step-circle[b-0f51zx3p3t] {
    background-color: #FFFFFF;
    color: #0D1B2A;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.aims-step-active .aims-step-label[b-0f51zx3p3t] {
    color: #E2E8F0;
    font-weight: 600;
}

[data-theme="light"] .aims-step-active .aims-step-circle[b-0f51zx3p3t] {
    background-color: #0D1B2A;
    color: #FFFFFF;
}

[data-theme="light"] .aims-step-active .aims-step-label[b-0f51zx3p3t] {
    color: #0D1B2A;
}

/* Completed step — teal filled circle */
.aims-step-completed .aims-step-circle[b-0f51zx3p3t] {
    background-color: #4DD9C0;
    color: #0D1B2A;
}

.aims-step-completed .aims-step-label[b-0f51zx3p3t] {
    color: #E2E8F0;
    font-weight: 600;
}

[data-theme="light"] .aims-step-completed .aims-step-label[b-0f51zx3p3t] {
    color: #0D1B2A;
}

/* Pending step — dark circle with grey border */
.aims-step-pending .aims-step-circle[b-0f51zx3p3t] {
    background-color: #0D1B2A;
    color: #A0AEC0;
    border: 1.5px solid #2D3748;
}

.aims-step-pending .aims-step-label[b-0f51zx3p3t] {
    color: #A0AEC0;
    font-weight: 500;
}

[data-theme="light"] .aims-step-pending .aims-step-circle[b-0f51zx3p3t] {
    background-color: #FFFFFF;
    border-color: #E2E8F0;
    color: #A0AEC0;
}

[data-theme="light"] .aims-step-pending .aims-step-label[b-0f51zx3p3t] {
    color: #A0AEC0;
}

.aims-step-label[b-0f51zx3p3t] {
    font-size: 12px;
    white-space: nowrap;
    text-align: center;
}

/* Connector line between steps */
.aims-step-connector[b-0f51zx3p3t] {
    flex: 0 0 60px;
    height: 2px;
    background-color: #2D3748;
    margin: -26px 8px 0 8px;
    transition: background-color 0.2s ease;
}

.aims-step-connector.aims-connector-completed[b-0f51zx3p3t] {
    background-color: #4DD9C0;
}

[data-theme="light"] .aims-step-connector[b-0f51zx3p3t] {
    background-color: #E2E8F0;
}

/* ============================================================================
   Wizard Card
   ============================================================================ */
.aims-wizard-card[b-0f51zx3p3t] {
    background: #1A2332;
    border: none;
    border-radius: 8px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

[data-theme="light"] .aims-wizard-card[b-0f51zx3p3t] {
    background: #FFFFFF;
}

.aims-wizard-card-header[b-0f51zx3p3t] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--aims-border-color);
    font-size: 16px;
    font-weight: 700;
    color: var(--aims-text-primary);
}

/* ============================================================================
   Two-Column Grid (Step 1)
   ============================================================================ */
.aims-wizard-grid[b-0f51zx3p3t] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 32px;
}

.aims-wizard-grid-compact[b-0f51zx3p3t] {
    gap: 16px 24px;
}

.aims-wizard-column[b-0f51zx3p3t] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow: hidden;
}

/* ============================================================================
   Row Fields (side-by-side within a field)
   ============================================================================ */
.aims-wizard-row-fields[b-0f51zx3p3t] {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

/* ============================================================================
   Textarea
   ============================================================================ */
.aims-wizard-textarea[b-0f51zx3p3t] {
    min-height: 80px;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    resize: vertical;
    line-height: 1.5;
}

/* ============================================================================
   Toggle Switch
   ============================================================================ */
.aims-toggle-row[b-0f51zx3p3t] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
}

.aims-toggle[b-0f51zx3p3t] {
    position: relative;
    display: inline-flex;
    cursor: pointer;
}

.aims-toggle-input[b-0f51zx3p3t] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.aims-toggle-slider[b-0f51zx3p3t] {
    display: inline-block;
    width: 44px;
    height: 24px;
    background-color: #CBD5E1;
    border-radius: 12px;
    position: relative;
    transition: background-color 0.2s ease;
}

.aims-toggle-slider[b-0f51zx3p3t]::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #FFFFFF;
    top: 2px;
    left: 2px;
    transition: transform 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.aims-toggle-input:checked + .aims-toggle-slider[b-0f51zx3p3t] {
    background-color: #004D46;
}

.aims-toggle-input:checked + .aims-toggle-slider[b-0f51zx3p3t]::after {
    transform: translateX(20px);
}

.aims-toggle-text[b-0f51zx3p3t] {
    font-size: 14px;
    color: var(--aims-text-primary);
    font-weight: 500;
}

[data-theme="dark"] .aims-toggle-slider[b-0f51zx3p3t] {
    background-color: #475569;
}

[data-theme="dark"] .aims-toggle-input:checked + .aims-toggle-slider[b-0f51zx3p3t] {
    background-color: #4DD9C0;
}

/* ============================================================================
   Image Gallery (Gambar Aset — Wireframe Gallery)
   ============================================================================ */

/* Empty state (fixed height to match populated gallery) */
.aims-gallery-empty[b-0f51zx3p3t] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 130px;
    padding: 0 20px;
    border-radius: 8px;
    background-color: #0D1B2A;
    border: 1px dashed #2D3748;
    box-sizing: border-box;
}

[data-theme="light"] .aims-gallery-empty[b-0f51zx3p3t] {
    background-color: #FFFFFF;
    border-color: #E2E8F0;
}

.aims-gallery-empty-inner[b-0f51zx3p3t] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--aims-text-secondary);
    font-size: 13px;
}

.aims-gallery-empty-btn[b-0f51zx3p3t] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 16px;
    border-radius: 6px;
    background-color: #4DD9C0;
    color: #0D1B2A;
    font-size: 12px;
    font-weight: 600;
    font-family: 'Manrope', sans-serif;
    cursor: pointer;
    border: none;
}

.aims-gallery-empty-btn:hover[b-0f51zx3p3t] {
    background-color: #3BC4AB;
}

.aims-gallery-hint[b-0f51zx3p3t] {
    font-size: 11px;
    color: var(--aims-text-muted, #94A3B8);
}

/* Gallery Wrapper — horizontal layout */
.aims-gallery-wrapper[b-0f51zx3p3t] {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 130px;
    max-height: 130px;
    overflow: hidden;
    flex-shrink: 0;
}

/* Chevron arrows */
.aims-gallery-arrow[b-0f51zx3p3t] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 14px;
    background-color: #1A2332;
    border: 1px solid #2D3748;
    color: #A0AEC0;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
}

.aims-gallery-arrow:disabled[b-0f51zx3p3t] {
    opacity: 0.4;
    cursor: not-allowed;
}

.aims-gallery-arrow:hover:not(:disabled)[b-0f51zx3p3t] {
    background-color: #2D3748;
}

[data-theme="light"] .aims-gallery-arrow[b-0f51zx3p3t] {
    background-color: #FFFFFF;
    border-color: #E2E8F0;
}

[data-theme="light"] .aims-gallery-arrow:hover:not(:disabled)[b-0f51zx3p3t] {
    background-color: #F1F5F9;
}

/* Thumbnail strip (clipped) */
.aims-gallery-strip[b-0f51zx3p3t] {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
    border-radius: 8px;
    background-color: #0D1B2A;
    padding: 8px;
    flex: 1;
    height: 100%;
    box-sizing: border-box;
}

[data-theme="light"] .aims-gallery-strip[b-0f51zx3p3t] {
    background-color: #F7F8FA;
}

/* Individual thumbnail */
.aims-gallery-thumb[b-0f51zx3p3t] {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 6px;
    background-color: #1A2332;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    overflow: hidden;
    box-sizing: border-box;
}

[data-theme="light"] .aims-gallery-thumb[b-0f51zx3p3t] {
    background-color: #FFFFFF;
    border: 1px solid #E2E8F0;
}

.aims-gallery-thumb:hover[b-0f51zx3p3t] {
    box-shadow: 0 0 0 2px #4DD9C0;
}

.aims-gallery-thumb-img[b-0f51zx3p3t] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Delete X on thumbnail */
.aims-gallery-thumb-del[b-0f51zx3p3t] {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.9);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.aims-gallery-thumb:hover .aims-gallery-thumb-del[b-0f51zx3p3t] {
    opacity: 1;
}

[data-theme="dark"] .aims-gallery-thumb-del[b-0f51zx3p3t] {
    background-color: rgba(0, 0, 0, 0.7);
}

/* Add More card */
.aims-gallery-add[b-0f51zx3p3t] {
    width: 80px;
    min-width: 80px;
    height: 80px;
    border-radius: 6px;
    background-color: #0D1B2A;
    border: 1px dashed #2D3748;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 500;
    color: #A0AEC0;
    font-family: 'Manrope', sans-serif;
    overflow: hidden;
    line-height: 1.2;
    text-align: center;
    box-sizing: border-box;
}

.aims-gallery-add:hover[b-0f51zx3p3t] {
    border-color: #4DD9C0;
    background-color: #1A2332;
}

[data-theme="light"] .aims-gallery-add[b-0f51zx3p3t] {
    background-color: #FFFFFF;
    border-color: #E2E8F0;
}

[data-theme="light"] .aims-gallery-add:hover[b-0f51zx3p3t] {
    border-color: #4DD9C0;
    background-color: #F0FDFB;
}

/* ============================================================================
   Image Preview Popup
   ============================================================================ */
.aims-gallery-overlay[b-0f51zx3p3t] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
}

.aims-gallery-preview[b-0f51zx3p3t] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 90vw;
    max-height: 85vh;
}

.aims-gallery-preview-close[b-0f51zx3p3t] {
    position: absolute;
    top: -40px;
    right: 0;
    background: none;
    border: none;
    color: #FFFFFF;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.aims-gallery-preview-close:hover[b-0f51zx3p3t] {
    color: #4DD9C0;
}

.aims-gallery-preview-nav[b-0f51zx3p3t] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    background-color: rgba(255, 255, 255, 0.15);
    border: none;
    color: #FFFFFF;
    cursor: pointer;
    flex-shrink: 0;
}

.aims-gallery-preview-nav:disabled[b-0f51zx3p3t] {
    opacity: 0.3;
    cursor: not-allowed;
}

.aims-gallery-preview-nav:hover:not(:disabled)[b-0f51zx3p3t] {
    background-color: rgba(255, 255, 255, 0.25);
}

.aims-gallery-preview-img[b-0f51zx3p3t] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.aims-gallery-preview-img img[b-0f51zx3p3t] {
    max-width: 70vw;
    max-height: 70vh;
    border-radius: 8px;
    object-fit: contain;
}

.aims-gallery-preview-name[b-0f51zx3p3t] {
    font-size: 13px;
    color: #A0AEC0;
    text-align: center;
    font-family: 'Manrope', sans-serif;
}

/* ============================================================================
   Dark mode overrides for gallery
   ============================================================================ */
[data-theme="dark"] .aims-gallery-empty[b-0f51zx3p3t] {
    background-color: #0D1B2A;
    border-color: #2D3748;
}

/* ============================================================================
   Wizard Actions (Button Row)
   ============================================================================ */
.aims-wizard-actions[b-0f51zx3p3t] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 8px;
    border-top: 1px solid var(--aims-border-color);
}

/* ============================================================================
   Step 2 — Wireframe-aligned Component Section
   ============================================================================ */

/* Role Badge */
.aims-step2-role-badge[b-0f51zx3p3t] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 4px;
    background-color: #E8F8F5;
    color: #0D1B2A;
    font-size: 11px;
    font-weight: 600;
    font-family: 'Manrope', sans-serif;
    width: fit-content;
}

[data-theme="dark"] .aims-step2-role-badge[b-0f51zx3p3t] {
    background-color: #1A3A3A;
    color: #4DD9C0;
}

/* Step Title */
.aims-step2-title[b-0f51zx3p3t] {
    font-size: 16px;
    font-weight: 600;
    color: var(--aims-text-primary);
    font-family: 'Manrope', sans-serif;
    margin: 0;
}

/* Step Subtitle */
.aims-step2-subtitle[b-0f51zx3p3t] {
    font-size: 13px;
    font-weight: 400;
    color: #A0AEC0;
    font-family: 'Manrope', sans-serif;
    margin-top: -12px;
}

/* Counter Row */
.aims-step2-counter-row[b-0f51zx3p3t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.aims-step2-counter-badge[b-0f51zx3p3t] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 12px;
    background-color: #E8F8F5;
    color: #0D1B2A;
    font-size: 12px;
    font-weight: 600;
    font-family: 'Manrope', sans-serif;
}

[data-theme="dark"] .aims-step2-counter-badge[b-0f51zx3p3t] {
    background-color: #1A3A3A;
    color: #4DD9C0;
}

/* Tambah Komponen Button */
.aims-step2-btn-add[b-0f51zx3p3t] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 16px;
    border-radius: 8px;
    border: none;
    background-color: #0D1B2A;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Manrope', sans-serif;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.aims-step2-btn-add:hover[b-0f51zx3p3t] {
    background-color: #1A2332;
}

[data-theme="dark"] .aims-step2-btn-add[b-0f51zx3p3t] {
    background-color: #4DD9C0;
    color: #0D1B2A;
}

[data-theme="dark"] .aims-step2-btn-add:hover[b-0f51zx3p3t] {
    background-color: #3BC4AB;
}

/* ============================================================================
   Step 2 — Inline Add Form
   ============================================================================ */
.aims-step2-add-form[b-0f51zx3p3t] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #4DD9C0;
    background-color: #F0FDFB;
}

[data-theme="dark"] .aims-step2-add-form[b-0f51zx3p3t] {
    background-color: #0A1520;
}

/* Form Header */
.aims-step2-form-header[b-0f51zx3p3t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.aims-step2-form-title[b-0f51zx3p3t] {
    font-size: 14px;
    font-weight: 600;
    color: #0D1B2A;
    font-family: 'Manrope', sans-serif;
}

[data-theme="dark"] .aims-step2-form-title[b-0f51zx3p3t] {
    color: #E2E8F0;
}

.aims-step2-form-close[b-0f51zx3p3t] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: #A0AEC0;
    cursor: pointer;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    padding: 0;
}

.aims-step2-form-close:hover[b-0f51zx3p3t] {
    background-color: rgba(0,0,0,0.05);
}

[data-theme="dark"] .aims-step2-form-close:hover[b-0f51zx3p3t] {
    background-color: rgba(255,255,255,0.1);
}

/* Form Two-Column Fields */
.aims-step2-form-fields[b-0f51zx3p3t] {
    display: flex;
    gap: 16px;
}

.aims-step2-form-col[b-0f51zx3p3t] {
    flex: 1;
}

.aims-step2-form-col-status[b-0f51zx3p3t] {
    flex: 0 0 200px;
}

/* Field Label */
.aims-step2-field-label[b-0f51zx3p3t] {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #0D1B2A;
    font-family: 'Manrope', sans-serif;
    margin-bottom: 6px;
}

[data-theme="dark"] .aims-step2-field-label[b-0f51zx3p3t] {
    color: #E2E8F0;
}

/* Text Input */
.aims-step2-input[b-0f51zx3p3t] {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #E2E8F0;
    border-radius: 6px;
    background-color: #FFFFFF;
    font-size: 13px;
    font-family: 'Manrope', sans-serif;
    color: #0D1B2A;
    box-sizing: border-box;
    outline: none;
}

.aims-step2-input:focus[b-0f51zx3p3t] {
    border-color: #4DD9C0;
    box-shadow: 0 0 0 2px rgba(77, 217, 192, 0.15);
}

[data-theme="dark"] .aims-step2-input[b-0f51zx3p3t] {
    background-color: #1A2332;
    border-color: #475569;
    color: #E2E8F0;
}

[data-theme="dark"] .aims-step2-input:focus[b-0f51zx3p3t] {
    border-color: #4DD9C0;
    box-shadow: 0 0 0 2px rgba(77, 217, 192, 0.2);
}

/* Placeholder styling */
.aims-step2-input[b-0f51zx3p3t]::placeholder {
    color: #A0AEC0;
    font-size: 11px;
}

/* Status selector (toggle in form) */
.aims-step2-status-selector[b-0f51zx3p3t] {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #E2E8F0;
    border-radius: 6px;
    background-color: #FFFFFF;
}

[data-theme="dark"] .aims-step2-status-selector[b-0f51zx3p3t] {
    background-color: #1A2332;
    border-color: #475569;
}

/* Textarea */
.aims-step2-textarea[b-0f51zx3p3t] {
    width: 100%;
    min-height: 72px;
    padding: 10px 12px;
    border: 1px solid #E2E8F0;
    border-radius: 6px;
    background-color: #FFFFFF;
    font-size: 13px;
    font-family: 'Manrope', sans-serif;
    color: #0D1B2A;
    box-sizing: border-box;
    outline: none;
    resize: vertical;
    line-height: 1.5;
}

.aims-step2-textarea:focus[b-0f51zx3p3t] {
    border-color: #4DD9C0;
    box-shadow: 0 0 0 2px rgba(77, 217, 192, 0.15);
}

.aims-step2-textarea[b-0f51zx3p3t]::placeholder {
    color: #A0AEC0;
    font-size: 11px;
}

[data-theme="dark"] .aims-step2-textarea[b-0f51zx3p3t] {
    background-color: #1A2332;
    border-color: #475569;
    color: #E2E8F0;
}

[data-theme="dark"] .aims-step2-textarea:focus[b-0f51zx3p3t] {
    border-color: #4DD9C0;
}

/* Form field wrap */
.aims-step2-field[b-0f51zx3p3t] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Form Buttons */
.aims-step2-form-buttons[b-0f51zx3p3t] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.aims-step2-btn-cancel[b-0f51zx3p3t] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 20px;
    border-radius: 8px;
    border: none;
    background-color: #F0F1F3;
    color: #0D1B2A;
    font-size: 13px;
    font-weight: 500;
    font-family: 'Manrope', sans-serif;
    cursor: pointer;
}

.aims-step2-btn-cancel:hover[b-0f51zx3p3t] {
    background-color: #E2E8F0;
}

[data-theme="dark"] .aims-step2-btn-cancel[b-0f51zx3p3t] {
    background-color: #1E293B;
    color: #E2E8F0;
}

[data-theme="dark"] .aims-step2-btn-cancel:hover[b-0f51zx3p3t] {
    background-color: #334155;
}

.aims-step2-btn-save[b-0f51zx3p3t] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 36px;
    padding: 0 20px;
    border-radius: 8px;
    border: none;
    background-color: #0D1B2A;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Manrope', sans-serif;
    cursor: pointer;
}

.aims-step2-btn-save:hover[b-0f51zx3p3t] {
    background-color: #1A2332;
}

.aims-step2-btn-save:disabled[b-0f51zx3p3t] {
    opacity: 0.6;
    cursor: not-allowed;
}

[data-theme="dark"] .aims-step2-btn-save[b-0f51zx3p3t] {
    background-color: #4DD9C0;
    color: #0D1B2A;
}

[data-theme="dark"] .aims-step2-btn-save:hover[b-0f51zx3p3t] {
    background-color: #3BC4AB;
}

/* ============================================================================
   Step 2 — Component Table (Flexbox layout matching wireframe)
   ============================================================================ */
.aims-step2-table[b-0f51zx3p3t] {
    border: 1px solid var(--aims-border-color);
    border-radius: 8px;
    overflow: hidden;
}

.aims-step2-table-header[b-0f51zx3p3t] {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    background-color: var(--aims-page-bg);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--aims-text-secondary);
}

.aims-step2-table-row[b-0f51zx3p3t] {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    font-size: 13px;
    color: var(--aims-text-primary);
}

.aims-step2-row-even[b-0f51zx3p3t] {
    background-color: var(--aims-surface-bg);
}

[data-theme="dark"] .aims-step2-row-even[b-0f51zx3p3t] {
    background-color: #0D1B2A;
}

.aims-step2-row-odd[b-0f51zx3p3t] {
    background-color: #FAFBFC;
}

[data-theme="dark"] .aims-step2-row-odd[b-0f51zx3p3t] {
    background-color: #0A1520;
}

.aims-step2-row-divider[b-0f51zx3p3t] {
    height: 1px;
    background-color: var(--aims-border-color);
}

[data-theme="dark"] .aims-step2-row-divider[b-0f51zx3p3t] {
    background-color: #1A2332;
}

/* Column widths */
.aims-step2-col-name[b-0f51zx3p3t] {
    flex: 1;
    font-weight: 500;
}

.aims-step2-col-status[b-0f51zx3p3t] {
    flex: 0 0 140px;
}

.aims-step2-col-notes[b-0f51zx3p3t] {
    flex: 1;
    color: var(--aims-text-secondary);
}

.aims-step2-col-actions[b-0f51zx3p3t] {
    flex: 0 0 60px;
    display: flex;
    justify-content: center;
}

/* Status Pill Badges */
.aims-step2-status-pill[b-0f51zx3p3t] {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}

.aims-pill-active[b-0f51zx3p3t] {
    background-color: #E8F8F5;
    color: #059669;
}

[data-theme="dark"] .aims-pill-active[b-0f51zx3p3t] {
    background-color: #1A3A3A;
    color: #4DD9C0;
}

.aims-pill-inactive[b-0f51zx3p3t] {
    background-color: #F0F1F3;
    color: #A0AEC0;
}

[data-theme="dark"] .aims-pill-inactive[b-0f51zx3p3t] {
    background-color: #1A2332;
    color: #94A3B8;
}

/* Delete Button */
.aims-step2-btn-delete[b-0f51zx3p3t] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: #E53E3E;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    padding: 0;
}

.aims-step2-btn-delete:hover[b-0f51zx3p3t] {
    background-color: rgba(229, 62, 62, 0.08);
}

.aims-step2-btn-delete:disabled[b-0f51zx3p3t] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ============================================================================
   Step 2 — Empty State
   ============================================================================ */
.aims-step2-empty[b-0f51zx3p3t] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 40px 20px;
    text-align: center;
    border: 1px solid var(--aims-border-color);
    border-radius: 8px;
}

.aims-step2-empty-title[b-0f51zx3p3t] {
    font-size: 14px;
    font-weight: 500;
    color: var(--aims-text-secondary);
}

.aims-step2-empty-hint[b-0f51zx3p3t] {
    font-size: 12px;
    font-weight: 400;
    color: var(--aims-text-muted, #94A3B8);
}

/* ============================================================================
   Step 2 — Delete Confirmation Dialog
   ============================================================================ */
.aims-step2-overlay[b-0f51zx3p3t] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.aims-step2-dialog[b-0f51zx3p3t] {
    width: 420px;
    background-color: #FFFFFF;
    border-radius: 12px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
}

[data-theme="dark"] .aims-step2-dialog[b-0f51zx3p3t] {
    background-color: #1A2332;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}

.aims-step2-dialog-header[b-0f51zx3p3t] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.aims-step2-dialog-icon[b-0f51zx3p3t] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background-color: #FEE2E2;
    flex-shrink: 0;
}

.aims-step2-dialog-title[b-0f51zx3p3t] {
    font-size: 16px;
    font-weight: 600;
    color: #0D1B2A;
    font-family: 'Manrope', sans-serif;
}

[data-theme="dark"] .aims-step2-dialog-title[b-0f51zx3p3t] {
    color: #E2E8F0;
}

.aims-step2-dialog-msg[b-0f51zx3p3t] {
    font-size: 13px;
    font-weight: 400;
    color: #A0AEC0;
    line-height: 1.5;
}

.aims-step2-dialog-buttons[b-0f51zx3p3t] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.aims-step2-dialog-btn-cancel[b-0f51zx3p3t] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 20px;
    border-radius: 8px;
    border: none;
    background-color: #F0F1F3;
    color: #0D1B2A;
    font-size: 13px;
    font-weight: 500;
    font-family: 'Manrope', sans-serif;
    cursor: pointer;
}

.aims-step2-dialog-btn-cancel:hover[b-0f51zx3p3t] {
    background-color: #E2E8F0;
}

[data-theme="dark"] .aims-step2-dialog-btn-cancel[b-0f51zx3p3t] {
    background-color: #1E293B;
    color: #E2E8F0;
}

[data-theme="dark"] .aims-step2-dialog-btn-cancel:hover[b-0f51zx3p3t] {
    background-color: #334155;
}

.aims-step2-dialog-btn-delete[b-0f51zx3p3t] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 20px;
    border-radius: 8px;
    border: none;
    background-color: #E53E3E;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Manrope', sans-serif;
    cursor: pointer;
}

.aims-step2-dialog-btn-delete:hover[b-0f51zx3p3t] {
    background-color: #C53030;
}

.aims-step2-dialog-btn-delete:disabled[b-0f51zx3p3t] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ============================================================================
   Step 2 — Wizard Navigation
   ============================================================================ */
.aims-step2-navigation[b-0f51zx3p3t] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--aims-border-color);
}

.aims-step2-nav-back[b-0f51zx3p3t] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 20px;
    border-radius: 8px;
    border: none;
    background-color: #F0F1F3;
    color: #0D1B2A;
    font-size: 13px;
    font-weight: 500;
    font-family: 'Manrope', sans-serif;
    cursor: pointer;
}

.aims-step2-nav-back:hover[b-0f51zx3p3t] {
    background-color: #E2E8F0;
}

[data-theme="dark"] .aims-step2-nav-back[b-0f51zx3p3t] {
    background-color: #0D1B2A;
    color: #E2E8F0;
}

[data-theme="dark"] .aims-step2-nav-back:hover[b-0f51zx3p3t] {
    background-color: #1E293B;
}

.aims-step2-nav-next[b-0f51zx3p3t] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 20px;
    border-radius: 8px;
    border: none;
    background-color: #0D1B2A;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Manrope', sans-serif;
    cursor: pointer;
}

.aims-step2-nav-next:hover[b-0f51zx3p3t] {
    background-color: #1A2332;
}

[data-theme="dark"] .aims-step2-nav-next[b-0f51zx3p3t] {
    background-color: #4DD9C0;
    color: #0D1B2A;
}

[data-theme="dark"] .aims-step2-nav-next:hover[b-0f51zx3p3t] {
    background-color: #3BC4AB;
}

/* ============================================================================
   Dark Mode Overrides for Step 1 elements
   ============================================================================ */
/* /Components/Pages/Assets/RegisterStep2.razor.rz.scp.css */
/* ============================================================================
   Asset Registration Wizard — Step 1 (Profil Aset) + Step 2 (Komponen Aset)
   ============================================================================ */

/* --- Wizard Container --- */
.aims-wizard[b-sm72t20103] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.aims-wizard-header h2[b-sm72t20103] {
    font-size: 24px;
    font-weight: 700;
    color: var(--aims-text-primary);
    margin: 0 0 8px;
}

.aims-wizard-header p[b-sm72t20103] {
    font-size: 14px;
    color: var(--aims-text-secondary);
    margin: 0;
}

/* ============================================================================
   Stepper (Wireframe-aligned: circles on top, labels below)
   ============================================================================ */
.aims-stepper[b-sm72t20103] {
    background: #1A2332;
    border: none;
    border-radius: 8px;
    padding: 24px 32px;
}

[data-theme="light"] .aims-stepper[b-sm72t20103] {
    background: #FFFFFF;
}

.aims-stepper-steps[b-sm72t20103] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.aims-step[b-sm72t20103] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: default;
    user-select: none;
    min-width: 0;
}

.aims-step[role="button"][b-sm72t20103] {
    cursor: pointer;
}

.aims-step[role="button"]:hover .aims-step-circle[b-sm72t20103] {
    box-shadow: 0 0 0 3px rgba(77, 217, 192, 0.2);
}

.aims-step-circle[b-sm72t20103] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

/* Active step — white filled circle */
.aims-step-active .aims-step-circle[b-sm72t20103] {
    background-color: #FFFFFF;
    color: #0D1B2A;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.aims-step-active .aims-step-label[b-sm72t20103] {
    color: #E2E8F0;
    font-weight: 600;
}

[data-theme="light"] .aims-step-active .aims-step-circle[b-sm72t20103] {
    background-color: #0D1B2A;
    color: #FFFFFF;
}

[data-theme="light"] .aims-step-active .aims-step-label[b-sm72t20103] {
    color: #0D1B2A;
}

/* Completed step — teal filled circle */
.aims-step-completed .aims-step-circle[b-sm72t20103] {
    background-color: #4DD9C0;
    color: #0D1B2A;
}

.aims-step-completed .aims-step-label[b-sm72t20103] {
    color: #E2E8F0;
    font-weight: 600;
}

[data-theme="light"] .aims-step-completed .aims-step-label[b-sm72t20103] {
    color: #0D1B2A;
}

/* Pending step — dark circle with grey border */
.aims-step-pending .aims-step-circle[b-sm72t20103] {
    background-color: #0D1B2A;
    color: #A0AEC0;
    border: 1.5px solid #2D3748;
}

.aims-step-pending .aims-step-label[b-sm72t20103] {
    color: #A0AEC0;
    font-weight: 500;
}

[data-theme="light"] .aims-step-pending .aims-step-circle[b-sm72t20103] {
    background-color: #FFFFFF;
    border-color: #E2E8F0;
    color: #A0AEC0;
}

[data-theme="light"] .aims-step-pending .aims-step-label[b-sm72t20103] {
    color: #A0AEC0;
}

.aims-step-label[b-sm72t20103] {
    font-size: 12px;
    white-space: nowrap;
    text-align: center;
}

/* Connector line between steps */
.aims-step-connector[b-sm72t20103] {
    flex: 0 0 60px;
    height: 2px;
    background-color: #2D3748;
    margin: -26px 8px 0 8px;
    transition: background-color 0.2s ease;
}

.aims-step-connector.aims-connector-completed[b-sm72t20103] {
    background-color: #4DD9C0;
}

[data-theme="light"] .aims-step-connector[b-sm72t20103] {
    background-color: #E2E8F0;
}

/* ============================================================================
   Wizard Card
   ============================================================================ */
.aims-wizard-card[b-sm72t20103] {
    background: #1A2332;
    border: none;
    border-radius: 8px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

[data-theme="light"] .aims-wizard-card[b-sm72t20103] {
    background: #FFFFFF;
}

.aims-wizard-card-header[b-sm72t20103] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--aims-border-color);
    font-size: 16px;
    font-weight: 700;
    color: var(--aims-text-primary);
}

/* ============================================================================
   Two-Column Grid (Step 1)
   ============================================================================ */
.aims-wizard-grid[b-sm72t20103] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 32px;
}

.aims-wizard-grid-compact[b-sm72t20103] {
    gap: 16px 24px;
}

.aims-wizard-column[b-sm72t20103] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow: hidden;
}

/* ============================================================================
   Row Fields (side-by-side within a field)
   ============================================================================ */
.aims-wizard-row-fields[b-sm72t20103] {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

/* ============================================================================
   Textarea
   ============================================================================ */
.aims-wizard-textarea[b-sm72t20103] {
    min-height: 80px;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    resize: vertical;
    line-height: 1.5;
}

/* ============================================================================
   Toggle Switch
   ============================================================================ */
.aims-toggle-row[b-sm72t20103] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
}

.aims-toggle[b-sm72t20103] {
    position: relative;
    display: inline-flex;
    cursor: pointer;
}

.aims-toggle-input[b-sm72t20103] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.aims-toggle-slider[b-sm72t20103] {
    display: inline-block;
    width: 44px;
    height: 24px;
    background-color: #CBD5E1;
    border-radius: 12px;
    position: relative;
    transition: background-color 0.2s ease;
}

.aims-toggle-slider[b-sm72t20103]::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #FFFFFF;
    top: 2px;
    left: 2px;
    transition: transform 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.aims-toggle-input:checked + .aims-toggle-slider[b-sm72t20103] {
    background-color: #004D46;
}

.aims-toggle-input:checked + .aims-toggle-slider[b-sm72t20103]::after {
    transform: translateX(20px);
}

.aims-toggle-text[b-sm72t20103] {
    font-size: 14px;
    color: var(--aims-text-primary);
    font-weight: 500;
}

[data-theme="dark"] .aims-toggle-slider[b-sm72t20103] {
    background-color: #475569;
}

[data-theme="dark"] .aims-toggle-input:checked + .aims-toggle-slider[b-sm72t20103] {
    background-color: #4DD9C0;
}

/* ============================================================================
   Image Gallery (Gambar Aset — Wireframe Gallery)
   ============================================================================ */

/* Empty state (fixed height to match populated gallery) */
.aims-gallery-empty[b-sm72t20103] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 130px;
    padding: 0 20px;
    border-radius: 8px;
    background-color: #0D1B2A;
    border: 1px dashed #2D3748;
    box-sizing: border-box;
}

[data-theme="light"] .aims-gallery-empty[b-sm72t20103] {
    background-color: #FFFFFF;
    border-color: #E2E8F0;
}

.aims-gallery-empty-inner[b-sm72t20103] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--aims-text-secondary);
    font-size: 13px;
}

.aims-gallery-empty-btn[b-sm72t20103] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 16px;
    border-radius: 6px;
    background-color: #4DD9C0;
    color: #0D1B2A;
    font-size: 12px;
    font-weight: 600;
    font-family: 'Manrope', sans-serif;
    cursor: pointer;
    border: none;
}

.aims-gallery-empty-btn:hover[b-sm72t20103] {
    background-color: #3BC4AB;
}

.aims-gallery-hint[b-sm72t20103] {
    font-size: 11px;
    color: var(--aims-text-muted, #94A3B8);
}

/* Gallery Wrapper — horizontal layout */
.aims-gallery-wrapper[b-sm72t20103] {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 130px;
    max-height: 130px;
    overflow: hidden;
    flex-shrink: 0;
}

/* Chevron arrows */
.aims-gallery-arrow[b-sm72t20103] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 14px;
    background-color: #1A2332;
    border: 1px solid #2D3748;
    color: #A0AEC0;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
}

.aims-gallery-arrow:disabled[b-sm72t20103] {
    opacity: 0.4;
    cursor: not-allowed;
}

.aims-gallery-arrow:hover:not(:disabled)[b-sm72t20103] {
    background-color: #2D3748;
}

[data-theme="light"] .aims-gallery-arrow[b-sm72t20103] {
    background-color: #FFFFFF;
    border-color: #E2E8F0;
}

[data-theme="light"] .aims-gallery-arrow:hover:not(:disabled)[b-sm72t20103] {
    background-color: #F1F5F9;
}

/* Thumbnail strip (clipped) */
.aims-gallery-strip[b-sm72t20103] {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
    border-radius: 8px;
    background-color: #0D1B2A;
    padding: 8px;
    flex: 1;
    height: 100%;
    box-sizing: border-box;
}

[data-theme="light"] .aims-gallery-strip[b-sm72t20103] {
    background-color: #F7F8FA;
}

/* Individual thumbnail */
.aims-gallery-thumb[b-sm72t20103] {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 6px;
    background-color: #1A2332;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    overflow: hidden;
    box-sizing: border-box;
}

[data-theme="light"] .aims-gallery-thumb[b-sm72t20103] {
    background-color: #FFFFFF;
    border: 1px solid #E2E8F0;
}

.aims-gallery-thumb:hover[b-sm72t20103] {
    box-shadow: 0 0 0 2px #4DD9C0;
}

.aims-gallery-thumb-img[b-sm72t20103] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Delete X on thumbnail */
.aims-gallery-thumb-del[b-sm72t20103] {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.9);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.aims-gallery-thumb:hover .aims-gallery-thumb-del[b-sm72t20103] {
    opacity: 1;
}

[data-theme="dark"] .aims-gallery-thumb-del[b-sm72t20103] {
    background-color: rgba(0, 0, 0, 0.7);
}

/* Add More card */
.aims-gallery-add[b-sm72t20103] {
    width: 80px;
    min-width: 80px;
    height: 80px;
    border-radius: 6px;
    background-color: #0D1B2A;
    border: 1px dashed #2D3748;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 500;
    color: #A0AEC0;
    font-family: 'Manrope', sans-serif;
    overflow: hidden;
    line-height: 1.2;
    text-align: center;
    box-sizing: border-box;
}

.aims-gallery-add:hover[b-sm72t20103] {
    border-color: #4DD9C0;
    background-color: #1A2332;
}

[data-theme="light"] .aims-gallery-add[b-sm72t20103] {
    background-color: #FFFFFF;
    border-color: #E2E8F0;
}

[data-theme="light"] .aims-gallery-add:hover[b-sm72t20103] {
    border-color: #4DD9C0;
    background-color: #F0FDFB;
}

/* ============================================================================
   Image Preview Popup
   ============================================================================ */
.aims-gallery-overlay[b-sm72t20103] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
}

.aims-gallery-preview[b-sm72t20103] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 90vw;
    max-height: 85vh;
}

.aims-gallery-preview-close[b-sm72t20103] {
    position: absolute;
    top: -40px;
    right: 0;
    background: none;
    border: none;
    color: #FFFFFF;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.aims-gallery-preview-close:hover[b-sm72t20103] {
    color: #4DD9C0;
}

.aims-gallery-preview-nav[b-sm72t20103] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    background-color: rgba(255, 255, 255, 0.15);
    border: none;
    color: #FFFFFF;
    cursor: pointer;
    flex-shrink: 0;
}

.aims-gallery-preview-nav:disabled[b-sm72t20103] {
    opacity: 0.3;
    cursor: not-allowed;
}

.aims-gallery-preview-nav:hover:not(:disabled)[b-sm72t20103] {
    background-color: rgba(255, 255, 255, 0.25);
}

.aims-gallery-preview-img[b-sm72t20103] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.aims-gallery-preview-img img[b-sm72t20103] {
    max-width: 70vw;
    max-height: 70vh;
    border-radius: 8px;
    object-fit: contain;
}

.aims-gallery-preview-name[b-sm72t20103] {
    font-size: 13px;
    color: #A0AEC0;
    text-align: center;
    font-family: 'Manrope', sans-serif;
}

/* ============================================================================
   Dark mode overrides for gallery
   ============================================================================ */
[data-theme="dark"] .aims-gallery-empty[b-sm72t20103] {
    background-color: #0D1B2A;
    border-color: #2D3748;
}

/* ============================================================================
   Wizard Actions (Button Row)
   ============================================================================ */
.aims-wizard-actions[b-sm72t20103] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 8px;
    border-top: 1px solid var(--aims-border-color);
}

/* ============================================================================
   Step 2 — Wireframe-aligned Component Section
   ============================================================================ */

/* Role Badge */
.aims-step2-role-badge[b-sm72t20103] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 4px;
    background-color: #E8F8F5;
    color: #0D1B2A;
    font-size: 11px;
    font-weight: 600;
    font-family: 'Manrope', sans-serif;
    width: fit-content;
}

[data-theme="dark"] .aims-step2-role-badge[b-sm72t20103] {
    background-color: #1A3A3A;
    color: #4DD9C0;
}

/* Step Title */
.aims-step2-title[b-sm72t20103] {
    font-size: 16px;
    font-weight: 600;
    color: var(--aims-text-primary);
    font-family: 'Manrope', sans-serif;
    margin: 0;
}

/* Step Subtitle */
.aims-step2-subtitle[b-sm72t20103] {
    font-size: 13px;
    font-weight: 400;
    color: #A0AEC0;
    font-family: 'Manrope', sans-serif;
    margin-top: -12px;
}

/* Counter Row */
.aims-step2-counter-row[b-sm72t20103] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.aims-step2-counter-badge[b-sm72t20103] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 12px;
    background-color: #E8F8F5;
    color: #0D1B2A;
    font-size: 12px;
    font-weight: 600;
    font-family: 'Manrope', sans-serif;
}

[data-theme="dark"] .aims-step2-counter-badge[b-sm72t20103] {
    background-color: #1A3A3A;
    color: #4DD9C0;
}

/* Tambah Komponen Button */
.aims-step2-btn-add[b-sm72t20103] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 16px;
    border-radius: 8px;
    border: none;
    background-color: #0D1B2A;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Manrope', sans-serif;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.aims-step2-btn-add:hover[b-sm72t20103] {
    background-color: #1A2332;
}

[data-theme="dark"] .aims-step2-btn-add[b-sm72t20103] {
    background-color: #4DD9C0;
    color: #0D1B2A;
}

[data-theme="dark"] .aims-step2-btn-add:hover[b-sm72t20103] {
    background-color: #3BC4AB;
}

/* ============================================================================
   Step 2 — Inline Add Form
   ============================================================================ */
.aims-step2-add-form[b-sm72t20103] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #4DD9C0;
    background-color: #F0FDFB;
}

[data-theme="dark"] .aims-step2-add-form[b-sm72t20103] {
    background-color: #0A1520;
}

/* Form Header */
.aims-step2-form-header[b-sm72t20103] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.aims-step2-form-title[b-sm72t20103] {
    font-size: 14px;
    font-weight: 600;
    color: #0D1B2A;
    font-family: 'Manrope', sans-serif;
}

[data-theme="dark"] .aims-step2-form-title[b-sm72t20103] {
    color: #E2E8F0;
}

.aims-step2-form-close[b-sm72t20103] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: #A0AEC0;
    cursor: pointer;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    padding: 0;
}

.aims-step2-form-close:hover[b-sm72t20103] {
    background-color: rgba(0,0,0,0.05);
}

[data-theme="dark"] .aims-step2-form-close:hover[b-sm72t20103] {
    background-color: rgba(255,255,255,0.1);
}

/* Form Two-Column Fields */
.aims-step2-form-fields[b-sm72t20103] {
    display: flex;
    gap: 16px;
}

.aims-step2-form-col[b-sm72t20103] {
    flex: 1;
}

.aims-step2-form-col-status[b-sm72t20103] {
    flex: 0 0 200px;
}

/* Field Label */
.aims-step2-field-label[b-sm72t20103] {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #0D1B2A;
    font-family: 'Manrope', sans-serif;
    margin-bottom: 6px;
}

[data-theme="dark"] .aims-step2-field-label[b-sm72t20103] {
    color: #E2E8F0;
}

/* Text Input */
.aims-step2-input[b-sm72t20103] {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #E2E8F0;
    border-radius: 6px;
    background-color: #FFFFFF;
    font-size: 13px;
    font-family: 'Manrope', sans-serif;
    color: #0D1B2A;
    box-sizing: border-box;
    outline: none;
}

.aims-step2-input:focus[b-sm72t20103] {
    border-color: #4DD9C0;
    box-shadow: 0 0 0 2px rgba(77, 217, 192, 0.15);
}

[data-theme="dark"] .aims-step2-input[b-sm72t20103] {
    background-color: #1A2332;
    border-color: #475569;
    color: #E2E8F0;
}

[data-theme="dark"] .aims-step2-input:focus[b-sm72t20103] {
    border-color: #4DD9C0;
    box-shadow: 0 0 0 2px rgba(77, 217, 192, 0.2);
}

/* Placeholder styling */
.aims-step2-input[b-sm72t20103]::placeholder {
    color: #A0AEC0;
    font-size: 11px;
}

/* Status selector (toggle in form) */
.aims-step2-status-selector[b-sm72t20103] {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #E2E8F0;
    border-radius: 6px;
    background-color: #FFFFFF;
}

[data-theme="dark"] .aims-step2-status-selector[b-sm72t20103] {
    background-color: #1A2332;
    border-color: #475569;
}

/* Textarea */
.aims-step2-textarea[b-sm72t20103] {
    width: 100%;
    min-height: 72px;
    padding: 10px 12px;
    border: 1px solid #E2E8F0;
    border-radius: 6px;
    background-color: #FFFFFF;
    font-size: 13px;
    font-family: 'Manrope', sans-serif;
    color: #0D1B2A;
    box-sizing: border-box;
    outline: none;
    resize: vertical;
    line-height: 1.5;
}

.aims-step2-textarea:focus[b-sm72t20103] {
    border-color: #4DD9C0;
    box-shadow: 0 0 0 2px rgba(77, 217, 192, 0.15);
}

.aims-step2-textarea[b-sm72t20103]::placeholder {
    color: #A0AEC0;
    font-size: 11px;
}

[data-theme="dark"] .aims-step2-textarea[b-sm72t20103] {
    background-color: #1A2332;
    border-color: #475569;
    color: #E2E8F0;
}

[data-theme="dark"] .aims-step2-textarea:focus[b-sm72t20103] {
    border-color: #4DD9C0;
}

/* Form field wrap */
.aims-step2-field[b-sm72t20103] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Form Buttons */
.aims-step2-form-buttons[b-sm72t20103] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.aims-step2-btn-cancel[b-sm72t20103] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 20px;
    border-radius: 8px;
    border: none;
    background-color: #F0F1F3;
    color: #0D1B2A;
    font-size: 13px;
    font-weight: 500;
    font-family: 'Manrope', sans-serif;
    cursor: pointer;
}

.aims-step2-btn-cancel:hover[b-sm72t20103] {
    background-color: #E2E8F0;
}

[data-theme="dark"] .aims-step2-btn-cancel[b-sm72t20103] {
    background-color: #1E293B;
    color: #E2E8F0;
}

[data-theme="dark"] .aims-step2-btn-cancel:hover[b-sm72t20103] {
    background-color: #334155;
}

.aims-step2-btn-save[b-sm72t20103] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 36px;
    padding: 0 20px;
    border-radius: 8px;
    border: none;
    background-color: #0D1B2A;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Manrope', sans-serif;
    cursor: pointer;
}

.aims-step2-btn-save:hover[b-sm72t20103] {
    background-color: #1A2332;
}

.aims-step2-btn-save:disabled[b-sm72t20103] {
    opacity: 0.6;
    cursor: not-allowed;
}

[data-theme="dark"] .aims-step2-btn-save[b-sm72t20103] {
    background-color: #4DD9C0;
    color: #0D1B2A;
}

[data-theme="dark"] .aims-step2-btn-save:hover[b-sm72t20103] {
    background-color: #3BC4AB;
}

/* ============================================================================
   Step 2 — Component Table (Flexbox layout matching wireframe)
   ============================================================================ */
.aims-step2-table[b-sm72t20103] {
    border: 1px solid var(--aims-border-color);
    border-radius: 8px;
    overflow: hidden;
}

.aims-step2-table-header[b-sm72t20103] {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    background-color: var(--aims-page-bg);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--aims-text-secondary);
}

.aims-step2-table-row[b-sm72t20103] {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    font-size: 13px;
    color: var(--aims-text-primary);
}

.aims-step2-row-even[b-sm72t20103] {
    background-color: var(--aims-surface-bg);
}

[data-theme="dark"] .aims-step2-row-even[b-sm72t20103] {
    background-color: #0D1B2A;
}

.aims-step2-row-odd[b-sm72t20103] {
    background-color: #FAFBFC;
}

[data-theme="dark"] .aims-step2-row-odd[b-sm72t20103] {
    background-color: #0A1520;
}

.aims-step2-row-divider[b-sm72t20103] {
    height: 1px;
    background-color: var(--aims-border-color);
}

[data-theme="dark"] .aims-step2-row-divider[b-sm72t20103] {
    background-color: #1A2332;
}

/* Column widths */
.aims-step2-col-name[b-sm72t20103] {
    flex: 1;
    font-weight: 500;
}

.aims-step2-col-status[b-sm72t20103] {
    flex: 0 0 140px;
}

.aims-step2-col-notes[b-sm72t20103] {
    flex: 1;
    color: var(--aims-text-secondary);
}

.aims-step2-col-actions[b-sm72t20103] {
    flex: 0 0 60px;
    display: flex;
    justify-content: center;
}

/* Status Pill Badges */
.aims-step2-status-pill[b-sm72t20103] {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}

.aims-pill-active[b-sm72t20103] {
    background-color: #E8F8F5;
    color: #059669;
}

[data-theme="dark"] .aims-pill-active[b-sm72t20103] {
    background-color: #1A3A3A;
    color: #4DD9C0;
}

.aims-pill-inactive[b-sm72t20103] {
    background-color: #F0F1F3;
    color: #A0AEC0;
}

[data-theme="dark"] .aims-pill-inactive[b-sm72t20103] {
    background-color: #1A2332;
    color: #94A3B8;
}

/* Delete Button */
.aims-step2-btn-delete[b-sm72t20103] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: #E53E3E;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    padding: 0;
}

.aims-step2-btn-delete:hover[b-sm72t20103] {
    background-color: rgba(229, 62, 62, 0.08);
}

.aims-step2-btn-delete:disabled[b-sm72t20103] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ============================================================================
   Step 2 — Empty State
   ============================================================================ */
.aims-step2-empty[b-sm72t20103] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 40px 20px;
    text-align: center;
    border: 1px solid var(--aims-border-color);
    border-radius: 8px;
}

.aims-step2-empty-title[b-sm72t20103] {
    font-size: 14px;
    font-weight: 500;
    color: var(--aims-text-secondary);
}

.aims-step2-empty-hint[b-sm72t20103] {
    font-size: 12px;
    font-weight: 400;
    color: var(--aims-text-muted, #94A3B8);
}

/* ============================================================================
   Step 2 — Delete Confirmation Dialog
   ============================================================================ */
.aims-step2-overlay[b-sm72t20103] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.aims-step2-dialog[b-sm72t20103] {
    width: 420px;
    background-color: #FFFFFF;
    border-radius: 12px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
}

[data-theme="dark"] .aims-step2-dialog[b-sm72t20103] {
    background-color: #1A2332;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}

.aims-step2-dialog-header[b-sm72t20103] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.aims-step2-dialog-icon[b-sm72t20103] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background-color: #FEE2E2;
    flex-shrink: 0;
}

.aims-step2-dialog-title[b-sm72t20103] {
    font-size: 16px;
    font-weight: 600;
    color: #0D1B2A;
    font-family: 'Manrope', sans-serif;
}

[data-theme="dark"] .aims-step2-dialog-title[b-sm72t20103] {
    color: #E2E8F0;
}

.aims-step2-dialog-msg[b-sm72t20103] {
    font-size: 13px;
    font-weight: 400;
    color: #A0AEC0;
    line-height: 1.5;
}

.aims-step2-dialog-buttons[b-sm72t20103] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.aims-step2-dialog-btn-cancel[b-sm72t20103] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 20px;
    border-radius: 8px;
    border: none;
    background-color: #F0F1F3;
    color: #0D1B2A;
    font-size: 13px;
    font-weight: 500;
    font-family: 'Manrope', sans-serif;
    cursor: pointer;
}

.aims-step2-dialog-btn-cancel:hover[b-sm72t20103] {
    background-color: #E2E8F0;
}

[data-theme="dark"] .aims-step2-dialog-btn-cancel[b-sm72t20103] {
    background-color: #1E293B;
    color: #E2E8F0;
}

[data-theme="dark"] .aims-step2-dialog-btn-cancel:hover[b-sm72t20103] {
    background-color: #334155;
}

.aims-step2-dialog-btn-delete[b-sm72t20103] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 20px;
    border-radius: 8px;
    border: none;
    background-color: #E53E3E;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Manrope', sans-serif;
    cursor: pointer;
}

.aims-step2-dialog-btn-delete:hover[b-sm72t20103] {
    background-color: #C53030;
}

.aims-step2-dialog-btn-delete:disabled[b-sm72t20103] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ============================================================================
   Step 2 — Wizard Navigation
   ============================================================================ */
.aims-step2-navigation[b-sm72t20103] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--aims-border-color);
}

.aims-step2-nav-back[b-sm72t20103] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 20px;
    border-radius: 8px;
    border: none;
    background-color: #F0F1F3;
    color: #0D1B2A;
    font-size: 13px;
    font-weight: 500;
    font-family: 'Manrope', sans-serif;
    cursor: pointer;
}

.aims-step2-nav-back:hover[b-sm72t20103] {
    background-color: #E2E8F0;
}

[data-theme="dark"] .aims-step2-nav-back[b-sm72t20103] {
    background-color: #0D1B2A;
    color: #E2E8F0;
}

[data-theme="dark"] .aims-step2-nav-back:hover[b-sm72t20103] {
    background-color: #1E293B;
}

.aims-step2-nav-next[b-sm72t20103] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 20px;
    border-radius: 8px;
    border: none;
    background-color: #0D1B2A;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Manrope', sans-serif;
    cursor: pointer;
}

.aims-step2-nav-next:hover[b-sm72t20103] {
    background-color: #1A2332;
}

[data-theme="dark"] .aims-step2-nav-next[b-sm72t20103] {
    background-color: #4DD9C0;
    color: #0D1B2A;
}

[data-theme="dark"] .aims-step2-nav-next:hover[b-sm72t20103] {
    background-color: #3BC4AB;
}

/* ============================================================================
   Dark Mode Overrides for Step 1 elements
   ============================================================================ */
/* /Components/Pages/Assets/RegisterStep3.razor.rz.scp.css */
/* ============================================================================
   Asset Registration Wizard — Step 3 (Lokasi Aset)
   ============================================================================ */

/* --- Wizard Container --- */
.aims-wizard[b-mxefnhq21z] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.aims-wizard-header h2[b-mxefnhq21z] {
    font-size: 24px;
    font-weight: 700;
    color: var(--aims-text-primary);
    margin: 0 0 8px;
}

.aims-wizard-header p[b-mxefnhq21z] {
    font-size: 14px;
    color: var(--aims-text-secondary);
    margin: 0;
}

/* --- Stepper --- */
.aims-stepper[b-mxefnhq21z] {
    background: #1A2332;
    border: none;
    border-radius: 8px;
    padding: 24px 32px;
}

[data-theme="light"] .aims-stepper[b-mxefnhq21z] {
    background: #FFFFFF;
}

.aims-stepper-steps[b-mxefnhq21z] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.aims-step[b-mxefnhq21z] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: default;
    user-select: none;
    min-width: 0;
}

.aims-step[role="button"][b-mxefnhq21z] {
    cursor: pointer;
}

.aims-step[role="button"]:hover .aims-step-circle[b-mxefnhq21z] {
    box-shadow: 0 0 0 3px rgba(77, 217, 192, 0.2);
}

.aims-step-circle[b-mxefnhq21z] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

/* Active step — white filled circle */
.aims-step-active .aims-step-circle[b-mxefnhq21z] {
    background-color: #FFFFFF;
    color: #0D1B2A;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.aims-step-active .aims-step-label[b-mxefnhq21z] {
    color: #E2E8F0;
    font-weight: 600;
}

[data-theme="light"] .aims-step-active .aims-step-circle[b-mxefnhq21z] {
    background-color: #0D1B2A;
    color: #FFFFFF;
}

[data-theme="light"] .aims-step-active .aims-step-label[b-mxefnhq21z] {
    color: #0D1B2A;
}

/* Completed step — teal filled circle */
.aims-step-completed .aims-step-circle[b-mxefnhq21z] {
    background-color: #4DD9C0;
    color: #0D1B2A;
}

.aims-step-completed .aims-step-label[b-mxefnhq21z] {
    color: #E2E8F0;
    font-weight: 600;
}

[data-theme="light"] .aims-step-completed .aims-step-label[b-mxefnhq21z] {
    color: #0D1B2A;
}

/* Pending step — dark circle with grey border */
.aims-step-pending .aims-step-circle[b-mxefnhq21z] {
    background-color: #0D1B2A;
    color: #A0AEC0;
    border: 1.5px solid #2D3748;
}

.aims-step-pending .aims-step-label[b-mxefnhq21z] {
    color: #A0AEC0;
    font-weight: 500;
}

[data-theme="light"] .aims-step-pending .aims-step-circle[b-mxefnhq21z] {
    background-color: #FFFFFF;
    border-color: #E2E8F0;
    color: #A0AEC0;
}

[data-theme="light"] .aims-step-pending .aims-step-label[b-mxefnhq21z] {
    color: #A0AEC0;
}

.aims-step-label[b-mxefnhq21z] {
    font-size: 12px;
    white-space: nowrap;
    text-align: center;
}

/* Connector line between steps */
.aims-step-connector[b-mxefnhq21z] {
    flex: 0 0 60px;
    height: 2px;
    background-color: #2D3748;
    margin: -26px 8px 0 8px;
    transition: background-color 0.2s ease;
}

.aims-step-connector.aims-connector-completed[b-mxefnhq21z] {
    background-color: #4DD9C0;
}

[data-theme="light"] .aims-step-connector[b-mxefnhq21z] {
    background-color: #E2E8F0;
}

/* --- Wizard Card --- */
.aims-wizard-card[b-mxefnhq21z] {
    background: #1A2332;
    border: none;
    border-radius: 8px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

[data-theme="light"] .aims-wizard-card[b-mxefnhq21z] {
    background: #FFFFFF;
}

.aims-wizard-card-header[b-mxefnhq21z] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--aims-border-color);
    font-size: 16px;
    font-weight: 700;
    color: var(--aims-text-primary);
}

/* --- Textarea --- */
.aims-wizard-textarea[b-mxefnhq21z] {
    min-height: 80px;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    resize: vertical;
    line-height: 1.5;
}

/* --- Helper Link --- */
.aims-step3-helper-link[b-mxefnhq21z] {
    margin-top: -8px;
}

.aims-step3-helper-link a[b-mxefnhq21z] {
    font-size: 13px;
    font-weight: 500;
    color: #4DD9C0;
    text-decoration: none;
    cursor: pointer;
}

.aims-step3-helper-link a:hover[b-mxefnhq21z] {
    text-decoration: underline;
}

[data-theme="dark"] .aims-step3-helper-link a[b-mxefnhq21z] {
    color: #4DD9C0;
}

/* --- Wizard Actions (Button Row) --- */
.aims-wizard-actions[b-mxefnhq21z] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--aims-border-color);
}

/* --- Back Button --- */
.aims-step3-btn-back[b-mxefnhq21z] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 20px;
    border-radius: 8px;
    border: none;
    background-color: #F0F1F3;
    color: #0D1B2A;
    font-size: 13px;
    font-weight: 500;
    font-family: 'Manrope', sans-serif;
    cursor: pointer;
}

.aims-step3-btn-back:hover[b-mxefnhq21z] {
    background-color: #E2E8F0;
}

[data-theme="dark"] .aims-step3-btn-back[b-mxefnhq21z] {
    background-color: #0D1B2A;
    color: #E2E8F0;
}

[data-theme="dark"] .aims-step3-btn-back:hover[b-mxefnhq21z] {
    background-color: #1E293B;
}

/* --- Save Button --- */
.aims-step3-btn-save[b-mxefnhq21z] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 20px;
    border-radius: 8px;
    border: none;
    background-color: #0D1B2A;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Manrope', sans-serif;
    cursor: pointer;
}

.aims-step3-btn-save:hover[b-mxefnhq21z] {
    background-color: #1A2332;
}

.aims-step3-btn-save:disabled[b-mxefnhq21z] {
    opacity: 0.6;
    cursor: not-allowed;
}

[data-theme="dark"] .aims-step3-btn-save[b-mxefnhq21z] {
    background-color: #4DD9C0;
    color: #0D1B2A;
}

[data-theme="dark"] .aims-step3-btn-save:hover[b-mxefnhq21z] {
    background-color: #3BC4AB;
}
/* /Components/Pages/Assets/RegisterStep4.razor.rz.scp.css */
/* ============================================================================
   Asset Registration Wizard — Step 4 (Maklumat Kewangan)
   Wireframe reference: Node AEMP4 — R05 AI-S02 Step 4 - Bahagian Kewangan View
   ============================================================================ */

/* --- Wizard Container --- */
.aims-wizard[b-sv5w46sroh] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.aims-wizard-header h2[b-sv5w46sroh] {
    font-size: 24px;
    font-weight: 700;
    color: var(--aims-text-primary);
    margin: 0 0 8px;
}

.aims-wizard-header p[b-sv5w46sroh] {
    font-size: 14px;
    color: var(--aims-text-secondary);
    margin: 0;
}

/* --- Stepper (copied verbatim from RegisterStep3.razor.css — Lesson A6) --- */
.aims-stepper[b-sv5w46sroh] {
    background: #1A2332;
    border: none;
    border-radius: 8px;
    padding: 24px 32px;
}

[data-theme="light"] .aims-stepper[b-sv5w46sroh] {
    background: #FFFFFF;
}

.aims-stepper-steps[b-sv5w46sroh] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.aims-step[b-sv5w46sroh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: default;
    user-select: none;
    min-width: 0;
}

.aims-step-circle[b-sv5w46sroh] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.aims-step-active .aims-step-circle[b-sv5w46sroh] {
    background-color: #FFFFFF;
    color: #0D1B2A;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.aims-step-active .aims-step-label[b-sv5w46sroh] {
    color: #E2E8F0;
    font-weight: 600;
}

[data-theme="light"] .aims-step-active .aims-step-circle[b-sv5w46sroh] {
    background-color: #0D1B2A;
    color: #FFFFFF;
}

[data-theme="light"] .aims-step-active .aims-step-label[b-sv5w46sroh] {
    color: #0D1B2A;
}

.aims-step-completed .aims-step-circle[b-sv5w46sroh] {
    background-color: #4DD9C0;
    color: #0D1B2A;
}

.aims-step-completed .aims-step-label[b-sv5w46sroh] {
    color: #E2E8F0;
    font-weight: 600;
}

[data-theme="light"] .aims-step-completed .aims-step-label[b-sv5w46sroh] {
    color: #0D1B2A;
}

.aims-step-pending .aims-step-circle[b-sv5w46sroh] {
    background-color: #0D1B2A;
    color: #A0AEC0;
    border: 1.5px solid #2D3748;
}

.aims-step-pending .aims-step-label[b-sv5w46sroh] {
    color: #A0AEC0;
    font-weight: 500;
}

[data-theme="light"] .aims-step-pending .aims-step-circle[b-sv5w46sroh] {
    background-color: #FFFFFF;
    border-color: #E2E8F0;
    color: #A0AEC0;
}

[data-theme="light"] .aims-step-pending .aims-step-label[b-sv5w46sroh] {
    color: #A0AEC0;
}

.aims-step-label[b-sv5w46sroh] {
    font-size: 12px;
    white-space: nowrap;
    text-align: center;
}

.aims-step-connector[b-sv5w46sroh] {
    flex: 0 0 60px;
    height: 2px;
    background-color: #2D3748;
    margin: -26px 8px 0 8px;
    transition: background-color 0.2s ease;
}

.aims-step-connector.aims-connector-completed[b-sv5w46sroh] {
    background-color: #4DD9C0;
}

[data-theme="light"] .aims-step-connector[b-sv5w46sroh] {
    background-color: #E2E8F0;
}

/* --- Wizard Card --- */
.aims-wizard-card[b-sv5w46sroh] {
    background: #1A2332;
    border: none;
    border-radius: 8px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow: hidden;
}

[data-theme="light"] .aims-wizard-card[b-sv5w46sroh] {
    background: #FFFFFF;
}

/* --- Required Field Marker --- */
.aims-required[b-sv5w46sroh] {
    color: #EF4444;
    font-weight: 700;
}

/* --- Role Context Banner (wireframe: orange/amber #3A2510 bg, #FFB74D text) --- */
.aims-step4-role-banner[b-sv5w46sroh] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: #3A2510;
    border: none;
    border-radius: 8px;
    padding: 16px;
}

[data-theme="light"] .aims-step4-role-banner[b-sv5w46sroh] {
    background: #FFF3E0;
}

.aims-step4-role-banner-row[b-sv5w46sroh] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.aims-step4-role-banner-title[b-sv5w46sroh] {
    font-size: 14px;
    font-weight: 700;
    color: #FFB74D;
}

[data-theme="light"] .aims-step4-role-banner-title[b-sv5w46sroh] {
    color: #E65100;
}

.aims-step4-role-banner-subtitle[b-sv5w46sroh] {
    font-size: 12px;
    font-weight: 400;
    color: #E65100;
    margin-left: 32px;
}

[data-theme="light"] .aims-step4-role-banner-subtitle[b-sv5w46sroh] {
    color: #BF360C;
}

/* --- Handoff Banner (wireframe: orange/amber, #3A2510 bg) --- */
.aims-step4-handoff-banner[b-sv5w46sroh] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #3A2510;
    border: none;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 500;
    color: #FFB74D;
}

[data-theme="light"] .aims-step4-handoff-banner[b-sv5w46sroh] {
    background: #FFF3E0;
    color: #E65100;
}

/* --- Step Heading --- */
.aims-step4-heading[b-sv5w46sroh] {
    font-size: 16px;
    font-weight: 600;
    color: #E2E8F0;
}

[data-theme="light"] .aims-step4-heading[b-sv5w46sroh] {
    color: #0D1B2A;
}

.aims-step4-subtitle[b-sv5w46sroh] {
    font-size: 13px;
    font-weight: 400;
    color: #718096;
    margin-top: -16px;
}

/* --- Card Header (added 2026-09-12) ---
   Byte-identical to the copies in Register / RegisterStep1 / RegisterStep2 /
   RegisterStep3 / RegisterStep5.razor.css, so Step 4's icon header renders exactly
   like the other steps. Needed here because scoped CSS means a class only applies
   if the page's own stylesheet defines it — Step4 previously had no such rule. */
.aims-wizard-card-header[b-sv5w46sroh] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--aims-border-color);
    font-size: 16px;
    font-weight: 700;
    color: var(--aims-text-primary);
}

[data-theme="light"] .aims-step4-subtitle[b-sv5w46sroh] {
    color: #64748B;
}

/* --- 2-Column Form Grid (wireframe-aligned) --- */
.aims-step4-form-grid[b-sv5w46sroh] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.aims-step4-form-col[b-sv5w46sroh] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* --- Form Field --- */
.aims-step4-field[b-sv5w46sroh] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.aims-step4-field label[b-sv5w46sroh] {
    font-size: 12px;
    font-weight: 600;
    color: #E2E8F0;
}

[data-theme="light"] .aims-step4-field label[b-sv5w46sroh] {
    color: #0D1B2A;
}

/* --- Input Wrapper (for prefix/suffix/chevron positioning) --- */
.aims-step4-input-wrapper[b-sv5w46sroh] {
    position: relative;
    display: flex;
    align-items: center;
}

/* --- Input Field --- */
.aims-step4-input[b-sv5w46sroh] {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border-radius: 6px;
    border: none;
    background: #0D1B2A;
    color: #E2E8F0;
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    font-weight: 400;
    outline: none;
    box-sizing: border-box;
}

.aims-step4-input[b-sv5w46sroh]::placeholder {
    color: #718096;
}

[data-theme="light"] .aims-step4-input[b-sv5w46sroh] {
    background: #FFFFFF;
    color: #0D1B2A;
    border: 1px solid #E2E8F0;
}

[data-theme="light"] .aims-step4-input[b-sv5w46sroh]::placeholder {
    color: #A0AEC0;
}

/* --- Select (dropdown) with border in dark mode --- */
.aims-step4-select[b-sv5w46sroh] {
    background: #1A2332;
    border: 1px solid #E2E8F0;
    color: #E2E8F0;
    appearance: auto;
    cursor: pointer;
    padding-right: 36px;
}

[data-theme="light"] .aims-step4-select[b-sv5w46sroh] {
    background: #FFFFFF;
    color: #0D1B2A;
}

/* --- Input with prefix (e.g. RM) --- */
.aims-step4-input-with-prefix[b-sv5w46sroh] {
    padding-left: 36px;
}

.aims-step4-input-prefix[b-sv5w46sroh] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    font-weight: 600;
    color: #E2E8F0;
    pointer-events: none;
    z-index: 1;
}

[data-theme="light"] .aims-step4-input-prefix[b-sv5w46sroh] {
    color: #0D1B2A;
}

/* --- Input with suffix (e.g. %) --- */
.aims-step4-input-suffix[b-sv5w46sroh] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    font-weight: 600;
    color: #E2E8F0;
    pointer-events: none;
    z-index: 1;
}

[data-theme="light"] .aims-step4-input-suffix[b-sv5w46sroh] {
    color: #0D1B2A;
}

/* --- Review From Fasiliti Section (wireframe) --- */
.aims-step4-review[b-sv5w46sroh] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: #0D1B2A;
    border: none;
    border-radius: 8px;
    padding: 16px;
}

[data-theme="light"] .aims-step4-review[b-sv5w46sroh] {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
}

.aims-step4-review-title[b-sv5w46sroh] {
    font-size: 12px;
    font-weight: 600;
    color: #718096;
}

[data-theme="light"] .aims-step4-review-title[b-sv5w46sroh] {
    color: #64748B;
}

.aims-step4-review-grid[b-sv5w46sroh] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.aims-step4-review-col[b-sv5w46sroh] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.aims-step4-review-item[b-sv5w46sroh] {
    font-size: 12px;
    font-weight: 400;
    color: #718096;
}

[data-theme="light"] .aims-step4-review-item[b-sv5w46sroh] {
    color: #64748B;
}

/* --- Wizard Actions (Button Row) --- */
.aims-wizard-actions[b-sv5w46sroh] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--aims-border-color);
}

/* --- Back Button (wireframe: #0D1B2A bg, #A0AEC0 text) --- */
.aims-step4-btn-back[b-sv5w46sroh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 20px;
    border-radius: 8px;
    border: none;
    background-color: #0D1B2A;
    color: #A0AEC0;
    font-size: 13px;
    font-weight: 500;
    font-family: 'Manrope', sans-serif;
    cursor: pointer;
}

.aims-step4-btn-back:hover[b-sv5w46sroh] {
    background-color: #1A2332;
}

[data-theme="light"] .aims-step4-btn-back[b-sv5w46sroh] {
    background-color: #F0F1F3;
    color: #0D1B2A;
}

[data-theme="light"] .aims-step4-btn-back:hover[b-sv5w46sroh] {
    background-color: #E2E8F0;
}

/* --- Submit Button (wireframe: #E65100 orange, white text) --- */
.aims-step4-btn-submit[b-sv5w46sroh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 20px;
    border-radius: 8px;
    border: none;
    background-color: #E65100;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Manrope', sans-serif;
    cursor: pointer;
}

.aims-step4-btn-submit:hover[b-sv5w46sroh] {
    background-color: #D84315;
}

.aims-step4-btn-submit:disabled[b-sv5w46sroh] {
    opacity: 0.6;
    cursor: not-allowed;
}

[data-theme="dark"] .aims-step4-btn-submit[b-sv5w46sroh] {
    background-color: #E65100;
    color: #FFFFFF;
}

[data-theme="dark"] .aims-step4-btn-submit:hover[b-sv5w46sroh] {
    background-color: #D84315;
}

/* --- Error --- */
.aims-auth-error[b-sv5w46sroh] {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: 8px;
    padding: 14px 18px;
    font-size: 14px;
    font-weight: 500;
    color: var(--aims-text-primary);
}

[data-theme="light"] .aims-auth-error[b-sv5w46sroh] {
    background: #FEF2F2;
    border-color: #FECACA;
    color: #991B1B;
}

/* --- Success --- */
.aims-auth-success[b-sv5w46sroh] {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.25);
    border-radius: 8px;
    padding: 14px 18px;
    font-size: 14px;
    font-weight: 500;
}

[data-theme="light"] .aims-auth-success[b-sv5w46sroh] {
    background: #F0FDF4;
    border-color: #BBF7D0;
    color: #166534;
}

/* --- Field Error --- */
.aims-field-error[b-sv5w46sroh] {
    font-size: 12px;
    color: #EF4444;
    margin-top: 2px;
}
/* /Components/Pages/Assets/RegisterStep5.razor.rz.scp.css */
/* ============================================================================
   Asset Registration Wizard — Step 5 (Jana No Aset)
   Wireframe reference: u3A2I (dark) / aAvx4 (light) — R04 AI-S02
   ============================================================================ */

/* --- Wizard Container --- */
.aims-wizard[b-8iuyxl69x8] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.aims-wizard-header h2[b-8iuyxl69x8] {
    font-size: 24px;
    font-weight: 700;
    color: var(--aims-text-primary);
    margin: 0 0 8px;
}

.aims-wizard-header p[b-8iuyxl69x8] {
    font-size: 14px;
    color: var(--aims-text-secondary);
    margin: 0;
}

/* --- Stepper (copied verbatim from RegisterStep3.razor.css — Lesson A6) --- */
.aims-stepper[b-8iuyxl69x8] { background: #1A2332; border: none; border-radius: 8px; padding: 24px 32px; }
[data-theme="light"] .aims-stepper[b-8iuyxl69x8] { background: #FFFFFF; }
.aims-stepper-steps[b-8iuyxl69x8] { display: flex; align-items: center; justify-content: center; gap: 0; }
.aims-step[b-8iuyxl69x8] { display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: default; user-select: none; min-width: 0; }
.aims-step[role="button"][b-8iuyxl69x8] { cursor: pointer; }
.aims-step[role="button"]:hover .aims-step-circle[b-8iuyxl69x8] { box-shadow: 0 0 0 3px rgba(77, 217, 192, 0.2); }
.aims-step-circle[b-8iuyxl69x8] { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; flex-shrink: 0; transition: background-color 0.2s ease, box-shadow 0.2s ease; }
.aims-step-active .aims-step-circle[b-8iuyxl69x8] { background-color: #FFFFFF; color: #0D1B2A; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); }
.aims-step-active .aims-step-label[b-8iuyxl69x8] { color: #E2E8F0; font-weight: 600; }
[data-theme="light"] .aims-step-active .aims-step-circle[b-8iuyxl69x8] { background-color: #0D1B2A; color: #FFFFFF; }
[data-theme="light"] .aims-step-active .aims-step-label[b-8iuyxl69x8] { color: #0D1B2A; }
.aims-step-completed .aims-step-circle[b-8iuyxl69x8] { background-color: #4DD9C0; color: #0D1B2A; }
.aims-step-completed .aims-step-label[b-8iuyxl69x8] { color: #E2E8F0; font-weight: 600; }
[data-theme="light"] .aims-step-completed .aims-step-label[b-8iuyxl69x8] { color: #0D1B2A; }
.aims-step-pending .aims-step-circle[b-8iuyxl69x8] { background-color: #0D1B2A; color: #A0AEC0; border: 1.5px solid #2D3748; }
.aims-step-pending .aims-step-label[b-8iuyxl69x8] { color: #A0AEC0; font-weight: 500; }
[data-theme="light"] .aims-step-pending .aims-step-circle[b-8iuyxl69x8] { background-color: #FFFFFF; border-color: #E2E8F0; color: #A0AEC0; }
[data-theme="light"] .aims-step-pending .aims-step-label[b-8iuyxl69x8] { color: #A0AEC0; }
.aims-step-label[b-8iuyxl69x8] { font-size: 12px; white-space: nowrap; text-align: center; }
.aims-step-connector[b-8iuyxl69x8] { flex: 0 0 60px; height: 2px; background-color: #2D3748; margin: -26px 8px 0 8px; transition: background-color 0.2s ease; }
.aims-step-connector.aims-connector-completed[b-8iuyxl69x8] { background-color: #4DD9C0; }
[data-theme="light"] .aims-step-connector[b-8iuyxl69x8] { background-color: #E2E8F0; }

/* --- Wizard Card (Form Panel) --- */
.aims-wizard-card[b-8iuyxl69x8] {
    background: #1A2332;
    border: none;
    border-radius: 8px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow: hidden;
}
[data-theme="light"] .aims-wizard-card[b-8iuyxl69x8] { background: #FFFFFF; }

/* --- Error / Loading --- */
.aims-auth-error[b-8iuyxl69x8] {
    display: flex; align-items: center; gap: 12px;
    background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: 8px; padding: 14px 18px; font-size: 14px; font-weight: 500; color: var(--aims-text-primary);
}
[data-theme="light"] .aims-auth-error[b-8iuyxl69x8] { background: #FEF2F2; border-color: #FECACA; color: #991B1B; }
.aims-auth-success[b-8iuyxl69x8] {
    display: flex; align-items: center; gap: 12px;
    background: rgba(34, 197, 94, 0.1); border: 1px solid rgba(34, 197, 94, 0.25);
    border-radius: 8px; padding: 14px 18px; font-size: 14px; font-weight: 500;
}
[data-theme="light"] .aims-auth-success[b-8iuyxl69x8] { background: #F0FDF4; border-color: #BBF7D0; color: #166534; }

/* =========================================================================
   Info Banner (b4 — inside form panel, #1A3A3A bg, corner=4)
   ========================================================================= */
.aims-step5-info-banner[b-8iuyxl69x8] {
    display: flex; align-items: center; gap: 6px;
    background: #1A3A3A; border-radius: 4px; padding: 10px 14px;
    font-size: 11px; font-weight: 600; color: #E2E8F0;
}
[data-theme="light"] .aims-step5-info-banner[b-8iuyxl69x8] {
    background: #E8F8F5; color: #0D1B2A;
}

/* =========================================================================
   Status Banner (#1A3A3A bg, corner=6)
   ========================================================================= */
.aims-step5-status-banner[b-8iuyxl69x8] {
    display: flex; align-items: center; gap: 8px;
    border-radius: 6px; padding: 10px 14px; font-size: 12px; font-weight: 500;
}
.aims-step5-status-ready[b-8iuyxl69x8] {
    background: rgba(34, 197, 94, 0.1); border: 1px solid rgba(34, 197, 94, 0.25); color: #22C55E;
}
[data-theme="light"] .aims-step5-status-ready[b-8iuyxl69x8] { background: #F0FDF4; border-color: #BBF7D0; color: #166534; }
.aims-step5-status-incomplete[b-8iuyxl69x8] {
    background: rgba(255, 183, 77, 0.1); border: 1px solid rgba(255, 183, 77, 0.25); color: #FFB74D;
}
[data-theme="light"] .aims-step5-status-incomplete[b-8iuyxl69x8] { background: #FFF3E0; border-color: #FFCC80; color: #E65100; }

/* --- Title (fp4t) & Subtitle (fp4s) --- */
.aims-step5-heading[b-8iuyxl69x8] { font-size: 16px; font-weight: 600; color: #E2E8F0; }
[data-theme="light"] .aims-step5-heading[b-8iuyxl69x8] { color: #0D1B2A; }
.aims-step5-subtitle[b-8iuyxl69x8] { font-size: 13px; font-weight: 400; color: #A0AEC0; margin-top: -16px; }
[data-theme="light"] .aims-step5-subtitle[b-8iuyxl69x8] { color: #64748B; }

/* --- Card Header (added 2026-09-12) ---
   Byte-identical to the copies in Register / RegisterStep1 / RegisterStep2 /
   RegisterStep3.razor.css, so Step 5's icon header renders exactly like Steps 1-3.
   Needed here because scoped CSS means a class only applies if the page's own
   stylesheet defines it — Step5 previously had no such rule. */
.aims-wizard-card-header[b-8iuyxl69x8] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--aims-border-color);
    font-size: 16px;
    font-weight: 700;
    color: var(--aims-text-primary);
}

/* =========================================================================
   Review Cards (#0F1923 bg per wireframe, corner=8, gap=12)
   ========================================================================= */
.aims-step5-review-card[b-8iuyxl69x8] {
    display: flex; flex-direction: column; gap: 12px;
    background: #0F1923; border-radius: 8px; padding: 16px;
}
[data-theme="light"] .aims-step5-review-card[b-8iuyxl69x8] {
    background: #F7F8FA; border: 1px solid #E2E8F0;
}

.aims-step5-review-section-label[b-8iuyxl69x8] {
    font-size: 14px; font-weight: 600; color: #E2E8F0;
}
[data-theme="light"] .aims-step5-review-section-label[b-8iuyxl69x8] { color: #0D1B2A; }

/* 2-column grid for Profil Aset and Kewangan */
.aims-step5-review-grid-2col[b-8iuyxl69x8] {
    display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
}

.aims-step5-review-col[b-8iuyxl69x8] {
    display: flex; flex-direction: column; gap: 8px;
}

.aims-step5-review-item[b-8iuyxl69x8] {
    font-size: 13px; font-weight: 400; color: #E2E8F0;
}
[data-theme="light"] .aims-step5-review-item[b-8iuyxl69x8] { color: #0D1B2A; }

/* =========================================================================
   Generation Area (#0F1923 bg, stroke=#E2E8F0 border, centered)
   ========================================================================= */
.aims-step5-generation-panel[b-8iuyxl69x8] {
    display: flex; flex-direction: column; gap: 16px; align-items: center;
    background: #0F1923; border: 1px solid #E2E8F0; border-radius: 8px; padding: 20px;
}
[data-theme="light"] .aims-step5-generation-panel[b-8iuyxl69x8] {
    background: #F7F8FA;
}

.aims-step5-gen-label[b-8iuyxl69x8] { font-size: 12px; font-weight: 500; color: #A0AEC0; }

.aims-step5-gen-code[b-8iuyxl69x8] {
    font-size: 24px; font-weight: 700; color: #E2E8F0; letter-spacing: 1px; font-family: 'Manrope', monospace;
}
[data-theme="light"] .aims-step5-gen-code[b-8iuyxl69x8] { color: #0D1B2A; }
.aims-step5-gen-code--muted[b-8iuyxl69x8] { color: #A0AEC0; font-size: 20px; }
[data-theme="light"] .aims-step5-gen-code--muted[b-8iuyxl69x8] { color: #A0AEC0; }

.aims-step5-gen-note[b-8iuyxl69x8] { font-size: 11px; font-weight: 400; color: #A0AEC0; }

.aims-step5-gen-breakdown[b-8iuyxl69x8] { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: center; }
.aims-step5-gen-breakdown span[b-8iuyxl69x8] { font-size: 11px; font-weight: 400; color: #718096; }
[data-theme="light"] .aims-step5-gen-breakdown span[b-8iuyxl69x8] { color: #64748B; }

/* QR Placeholder (120x120) */
.aims-step5-qr-preview[b-8iuyxl69x8] {
    display: flex; flex-direction: column; gap: 4px; align-items: center; justify-content: center;
    width: 120px; height: 120px; background: #1A2332; border: 1px solid #E2E8F0; border-radius: 8px;
}
[data-theme="light"] .aims-step5-qr-preview[b-8iuyxl69x8] { background: #FFFFFF; }
.aims-step5-qr-preview-label[b-8iuyxl69x8] { font-size: 10px; font-weight: 400; color: #A0AEC0; }

/* =========================================================================
   Navigation — Kembali left, Preview+Generate right
   ========================================================================= */
.aims-wizard-actions[b-8iuyxl69x8] {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding-top: 16px; border-top: 1px solid var(--aims-border-color);
}

.aims-step5-btn-left-group[b-8iuyxl69x8] { display: flex; gap: 8px; }
.aims-step5-btn-right-group[b-8iuyxl69x8] { display: flex; gap: 8px; align-items: center; }

/* Back button */
.aims-step5-btn-back[b-8iuyxl69x8] {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 40px; padding: 0 20px; border-radius: 8px; border: none;
    background-color: #0D1B2A; color: #A0AEC0; font-size: 13px; font-weight: 500;
    font-family: 'Manrope', sans-serif; cursor: pointer;
}
.aims-step5-btn-back:hover[b-8iuyxl69x8] { background-color: #1A2332; }
[data-theme="light"] .aims-step5-btn-back[b-8iuyxl69x8] { background-color: #F0F1F3; color: #0D1B2A; }
[data-theme="light"] .aims-step5-btn-back:hover[b-8iuyxl69x8] { background-color: #E2E8F0; }

/* Preview button */
.aims-step5-btn-preview[b-8iuyxl69x8] {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 40px; padding: 0 20px; border-radius: 8px; border: none;
    background-color: #0D1B2A; color: #E2E8F0; font-size: 13px; font-weight: 500;
    font-family: 'Manrope', sans-serif; cursor: pointer;
}
.aims-step5-btn-preview:hover[b-8iuyxl69x8] { background-color: #1A2332; }
.aims-step5-btn-preview:disabled[b-8iuyxl69x8] { opacity: 0.5; cursor: not-allowed; }
[data-theme="light"] .aims-step5-btn-preview[b-8iuyxl69x8] { background-color: #F0F1F3; color: #0D1B2A; }
[data-theme="light"] .aims-step5-btn-preview:hover[b-8iuyxl69x8] { background-color: #E2E8F0; }

/* Generate button (primary — teal #4DD9C0 in dark, dark #0D1B2A in light) */
.aims-step5-btn-generate[b-8iuyxl69x8] {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 40px; padding: 0 20px; border-radius: 8px; border: none;
    background-color: #4DD9C0; color: #0D1B2A; font-size: 13px; font-weight: 600;
    font-family: 'Manrope', sans-serif; cursor: pointer;
}
.aims-step5-btn-generate:hover[b-8iuyxl69x8] { background-color: #3BC4AB; }
.aims-step5-btn-generate:disabled[b-8iuyxl69x8] { opacity: 0.6; cursor: not-allowed; }
[data-theme="light"] .aims-step5-btn-generate[b-8iuyxl69x8] { background-color: #0D1B2A; color: #FFFFFF; }
[data-theme="light"] .aims-step5-btn-generate:hover[b-8iuyxl69x8] { background-color: #1E293B; }
/* /Components/Pages/Assets/RegisterStep5Success.razor.rz.scp.css */
/* ============================================================================
   Asset Registration Wizard — Step 5 Success (Post-Generation)
   Wireframe reference: z86Ep (dark) / a3FVe (light) — R04 AI-S02
   ============================================================================ */

/* --- Wizard Container --- */
.aims-wizard[b-f6r9g04syx] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.aims-wizard-header h2[b-f6r9g04syx] {
    font-size: 24px;
    font-weight: 700;
    color: var(--aims-text-primary);
    margin: 0 0 8px;
}

.aims-wizard-header p[b-f6r9g04syx] {
    font-size: 14px;
    color: var(--aims-text-secondary);
    margin: 0;
}

/* --- Stepper (copied verbatim from RegisterStep3.razor.css — Lesson A6) --- */
.aims-stepper[b-f6r9g04syx] {
    background: #1A2332;
    border: none;
    border-radius: 8px;
    padding: 24px 32px;
}

[data-theme="light"] .aims-stepper[b-f6r9g04syx] {
    background: #FFFFFF;
}

.aims-stepper-steps[b-f6r9g04syx] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.aims-step[b-f6r9g04syx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: default;
    user-select: none;
    min-width: 0;
}

.aims-step[role="button"][b-f6r9g04syx] {
    cursor: pointer;
}

.aims-step[role="button"]:hover .aims-step-circle[b-f6r9g04syx] {
    box-shadow: 0 0 0 3px rgba(77, 217, 192, 0.2);
}

.aims-step-circle[b-f6r9g04syx] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.aims-step-active .aims-step-circle[b-f6r9g04syx] {
    background-color: #FFFFFF;
    color: #0D1B2A;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.aims-step-active .aims-step-label[b-f6r9g04syx] {
    color: #E2E8F0;
    font-weight: 600;
}

[data-theme="light"] .aims-step-active .aims-step-circle[b-f6r9g04syx] {
    background-color: #0D1B2A;
    color: #FFFFFF;
}

[data-theme="light"] .aims-step-active .aims-step-label[b-f6r9g04syx] {
    color: #0D1B2A;
}

.aims-step-completed .aims-step-circle[b-f6r9g04syx] {
    background-color: #4DD9C0;
    color: #0D1B2A;
}

.aims-step-completed .aims-step-label[b-f6r9g04syx] {
    color: #E2E8F0;
    font-weight: 600;
}

[data-theme="light"] .aims-step-completed .aims-step-label[b-f6r9g04syx] {
    color: #0D1B2A;
}

.aims-step-pending .aims-step-circle[b-f6r9g04syx] {
    background-color: #0D1B2A;
    color: #A0AEC0;
    border: 1.5px solid #2D3748;
}

.aims-step-pending .aims-step-label[b-f6r9g04syx] {
    color: #A0AEC0;
    font-weight: 500;
}

[data-theme="light"] .aims-step-pending .aims-step-circle[b-f6r9g04syx] {
    background-color: #FFFFFF;
    border-color: #E2E8F0;
    color: #A0AEC0;
}

[data-theme="light"] .aims-step-pending .aims-step-label[b-f6r9g04syx] {
    color: #A0AEC0;
}

.aims-step-label[b-f6r9g04syx] {
    font-size: 12px;
    white-space: nowrap;
    text-align: center;
}

.aims-step-connector[b-f6r9g04syx] {
    flex: 0 0 60px;
    height: 2px;
    background-color: #2D3748;
    margin: -26px 8px 0 8px;
    transition: background-color 0.2s ease;
}

.aims-step-connector.aims-connector-completed[b-f6r9g04syx] {
    background-color: #4DD9C0;
}

[data-theme="light"] .aims-step-connector[b-f6r9g04syx] {
    background-color: #E2E8F0;
}

/* --- Loading / Error States --- */
.aims-success-loading[b-f6r9g04syx] {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(77, 217, 192, 0.1);
    border: 1px solid rgba(77, 217, 192, 0.25);
    border-radius: 8px;
    padding: 14px 18px;
    font-size: 14px;
    font-weight: 500;
    color: #4DD9C0;
}

.aims-success-error[b-f6r9g04syx] {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: 8px;
    padding: 14px 18px;
    font-size: 14px;
    font-weight: 500;
    color: var(--aims-text-primary);
}

[data-theme="light"] .aims-success-error[b-f6r9g04syx] {
    background: #FEF2F2;
    border-color: #FECACA;
    color: #991B1B;
}

/* --- Success Card --- */
.aims-success-card[b-f6r9g04syx] {
    background: #1A2332;
    border: none;
    border-radius: 8px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow: hidden;
}

[data-theme="light"] .aims-success-card[b-f6r9g04syx] {
    background: #FFFFFF;
}

/* =========================================================================
   Success Banner (#1A3A3A bg, 40x40 check circle)
   ========================================================================= */
.aims-success-banner[b-f6r9g04syx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    background: #1A3A3A;
    border: none;
    border-radius: 8px;
    padding: 24px;
    text-align: center;
}

[data-theme="light"] .aims-success-banner[b-f6r9g04syx] {
    background: #F0FDF4;
    border: 1px solid #BBF7D0;
}

.aims-success-check-circle[b-f6r9g04syx] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.aims-success-title[b-f6r9g04syx] {
    font-size: 16px;
    font-weight: 700;
    color: #E2E8F0;
}

[data-theme="light"] .aims-success-title[b-f6r9g04syx] {
    color: #0D1B2A;
}

.aims-success-subtitle[b-f6r9g04syx] {
    font-size: 13px;
    font-weight: 400;
    color: #718096;
    max-width: 480px;
}

[data-theme="light"] .aims-success-subtitle[b-f6r9g04syx] {
    color: #718096;
}

/* =========================================================================
   Asset Number Section
   ========================================================================= */
.aims-success-number-section[b-f6r9g04syx] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

.aims-success-number-label[b-f6r9g04syx] {
    font-size: 12px;
    font-weight: 600;
    color: #A0AEC0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.aims-success-number-box[b-f6r9g04syx] {
    background: #0D1B2A;
    border: 1px solid #2D3748;
    border-radius: 8px;
    padding: 16px 32px;
}

[data-theme="light"] .aims-success-number-box[b-f6r9g04syx] {
    background: #F0F1F3;
    border-color: #E2E8F0;
}

.aims-success-number-value[b-f6r9g04syx] {
    font-size: 28px;
    font-weight: 700;
    color: #E2E8F0;
    letter-spacing: 1.5px;
    font-family: 'Manrope', monospace;
}

[data-theme="light"] .aims-success-number-value[b-f6r9g04syx] {
    color: #0D1B2A;
}

/* =========================================================================
   QR and Actions Row
   ========================================================================= */
.aims-success-qr-actions[b-f6r9g04syx] {
    display: flex;
    gap: 24px;
    align-items: center;
    justify-content: center;
}

/* QR Code display (real SVG inline, constrained to fit) */
.aims-success-qr[b-f6r9g04syx] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    justify-content: center;
    width: 160px;
    height: 160px;
    background: #0D1B2A;
    border: 1px dashed #2D3748;
    border-radius: 12px;
    flex-shrink: 0;
}

[data-theme="light"] .aims-success-qr[b-f6r9g04syx] {
    background: #F0F1F3;
    border-color: #E2E8F0;
}

.aims-success-qr-label[b-f6r9g04syx] {
    font-size: 11px;
    font-weight: 400;
    color: #A0AEC0;
    text-align: center;
    max-width: 140px;
}

/* Actions Column */
.aims-success-actions-col[b-f6r9g04syx] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
}

/* Cetak Label Button (STORY-075: enabled) */
.aims-success-btn-print[b-f6r9g04syx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 200px;
    height: 44px;
    border-radius: 8px;
    border: none;
    background-color: #1a5f6f;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 600;
    font-family: 'Manrope', sans-serif;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.aims-success-btn-print:hover[b-f6r9g04syx] {
    background-color: #004D46;
}

[data-theme="dark"] .aims-success-btn-print[b-f6r9g04syx] {
    background-color: #1a5f6f;
    color: #FFFFFF;
}

[data-theme="dark"] .aims-success-btn-print:hover[b-f6r9g04syx] {
    background-color: #004D46;
}

[data-theme="light"] .aims-success-btn-print[b-f6r9g04syx] {
    background-color: #1a5f6f;
    color: #FFFFFF;
}

[data-theme="light"] .aims-success-btn-print:hover[b-f6r9g04syx] {
    background-color: #004D46;
}

/* Print note */
.aims-success-print-note[b-f6r9g04syx] {
    font-size: 13px;
    font-weight: 400;
    color: #718096;
}

/* =========================================================================
   Divider
   ========================================================================= */
.aims-success-divider[b-f6r9g04syx] {
    height: 1px;
    background-color: #E2E8F0;
    opacity: 0.15;
}

/* =========================================================================
   Navigation Buttons
   ========================================================================= */
.aims-success-nav[b-f6r9g04syx] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

/* Kembali ke Senarai Aset (secondary) */
.aims-success-btn-back[b-f6r9g04syx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 20px;
    border-radius: 8px;
    border: none;
    background-color: #0D1B2A;
    color: #A0AEC0;
    font-size: 13px;
    font-weight: 500;
    font-family: 'Manrope', sans-serif;
    cursor: pointer;
}

.aims-success-btn-back:hover[b-f6r9g04syx] {
    background-color: #1A2332;
}

[data-theme="light"] .aims-success-btn-back[b-f6r9g04syx] {
    background-color: #F0F1F3;
    color: #0D1B2A;
}

[data-theme="light"] .aims-success-btn-back:hover[b-f6r9g04syx] {
    background-color: #E2E8F0;
}

/* Daftar Aset Baru (primary — black/teal) */
.aims-success-btn-new[b-f6r9g04syx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 20px;
    border-radius: 8px;
    border: none;
    background-color: #0D1B2A;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Manrope', sans-serif;
    cursor: pointer;
}

.aims-success-btn-new:hover[b-f6r9g04syx] {
    background-color: #1A2332;
}

[data-theme="light"] .aims-success-btn-new[b-f6r9g04syx] {
    background-color: #0D1B2A;
    color: #FFFFFF;
}

[data-theme="light"] .aims-success-btn-new:hover[b-f6r9g04syx] {
    background-color: #1E293B;
}
/* /Components/Pages/Dashboard/R04FacilityDashboard.razor.rz.scp.css */
/* ============================================================================
   R04 Bahagian Fasiliti Dashboard — scoped styles (STORY-122)
   Governing wireframes per KD-12: Q0FWrI (Light) / cCJ8I (Dark), 1440×2140.
   G59: every hardcoded hex lives in a --r04-* token with a [data-theme="dark"]
   counterpart — no naked hex outside the token blocks.
   G29: RadzenDataGrid styling via --rz-grid-* overrides on the wrapper div only.
   ============================================================================ */

.r04-dash[b-40jgupevjb] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    font-family: 'Inter', 'Manrope', sans-serif;

    /* ── Wireframe palette tokens — Light (Q0FWrI) ── */
    --r04-accent: var(--r04-teal);
    --r04-teal: #4DD9C0;
    --r04-green: #22C55E;
    --r04-blue: #3B82F6;
    --r04-grey: #8899AA;
    --r04-red: #EF4444;
    --r04-orange: #F97316;
    --r04-amber: #EAB308;
    --r04-green-deep: #38A169;
    --r04-red-deep: #E53E3E;
    --r04-purple: #805AD5;
    --r04-blue-deep: #3182CE;
    --r04-jb-orange: #DD6B20;

    --r04-bucket-amber-bg: #FFFBEB;
    --r04-bucket-amber-dot: #F59E0B;
    --r04-bucket-amber-value: #B45309;
    --r04-bucket-orange-bg: #FFF7ED;
    --r04-bucket-orange-dot: #F97316;
    --r04-bucket-orange-value: #C2410C;
    --r04-bucket-red-bg: #FEF2F2;
    --r04-bucket-red-dot: #EF4444;
    --r04-bucket-red-value: #DC2626;

    --r04-table-header-bg: #F1F5F9;
    --r04-table-header-text: #4A5568;
    --r04-row-alt: #FAFBFC;
    --r04-hover-bg: #F7F8FA;
}

[data-theme="dark"] .r04-dash[b-40jgupevjb] {
    /* ── Wireframe dark palette (cCJ8I): lighter urgency variants,
       dark tint buckets, dark table surfaces. ── */
    --r04-accent: var(--r04-teal);
    --r04-teal: #4DD9C0;
    --r04-green: #68D391;
    --r04-blue: #63B3ED;
    --r04-grey: #8899AA;
    --r04-red: #FC8181;
    --r04-orange: #F6AD55;
    --r04-amber: #F6AD55;
    --r04-green-deep: #38A169;
    --r04-red-deep: #E53E3E;
    --r04-purple: #805AD5;
    --r04-blue-deep: #3182CE;
    --r04-jb-orange: #DD6B20;

    --r04-bucket-amber-bg: #2D2416;
    --r04-bucket-amber-dot: #F59E0B;
    --r04-bucket-amber-value: #F59E0B;
    --r04-bucket-orange-bg: #2D1F18;
    --r04-bucket-orange-dot: #DD6B20;
    --r04-bucket-orange-value: #DD6B20;
    --r04-bucket-red-bg: #2D1A1A;
    --r04-bucket-red-dot: #FC8181;
    --r04-bucket-red-value: #FEB2B2;

    --r04-table-header-bg: #151F2B;
    --r04-table-header-text: #8899AA;
    --r04-row-alt: #151F2B;
    --r04-hover-bg: #162230;
}

/* ── Typography ── */

.r04-section[b-40jgupevjb] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Wireframe sections with a 12px title-to-content gap (Asset Information,
   Incident Status, Incident Complaints, CM, PM). */
.r04-section-12[b-40jgupevjb] {
    gap: 12px;
}

.r04-section-title[b-40jgupevjb] {
    font-size: 18px;
    font-weight: 600;
    color: var(--aims-text-primary);
    margin: 0;
}

.r04-card-title[b-40jgupevjb] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--aims-text-primary);
    margin: 0;
}

.r04-sub-title[b-40jgupevjb] {
    font-size: 13px;
    font-weight: 600;
    color: var(--aims-text-secondary);
}

/* ── Cards ── */

.r04-card[b-40jgupevjb] {
    position: relative;
    background: var(--aims-surface-bg);
    border-radius: 8px;
    box-shadow: var(--aims-card-shadow);
}

/* ── Row 1 — Statistics (2 rows of 4, 271×104; accent bar + icon + label + value) ── */

.r04-stat-grid[b-40jgupevjb] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px 16px;
}

.r04-stat-card[b-40jgupevjb] {
    min-height: 104px;
    padding: 18px 16px 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* 4px left accent bar, per-card color via --r04-accent. */
.r04-stat-card[b-40jgupevjb]::before,
.r04-status-card[b-40jgupevjb]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--r04-accent);
    border-radius: 8px 0 0 8px;
}

.r04-stat-top[b-40jgupevjb] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.r04-stat-label[b-40jgupevjb],
.r04-status-label[b-40jgupevjb] {
    font-size: 12px;
    font-weight: 500;
    color: var(--aims-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.r04-stat-value[b-40jgupevjb] {
    font-size: 26px;
    font-weight: 700;
    color: var(--aims-text-primary);
    line-height: 1.2;
}

.r04-accent-teal[b-40jgupevjb]  { --r04-accent: var(--r04-teal); }
.r04-accent-green[b-40jgupevjb] { --r04-accent: var(--r04-green); }
.r04-accent-blue[b-40jgupevjb]  { --r04-accent: var(--r04-blue); }
.r04-accent-grey[b-40jgupevjb]  { --r04-accent: var(--r04-grey); }
.r04-accent-red[b-40jgupevjb]   { --r04-accent: var(--r04-red); }
.r04-accent-orange[b-40jgupevjb]{ --r04-accent: var(--r04-orange); }
.r04-accent-amber[b-40jgupevjb] { --r04-accent: var(--r04-amber); }

/* ── Row 2 — Asset Health (Warranty / License expiry buckets) ── */

.r04-expiry-cols[b-40jgupevjb] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
}

.r04-expiry-card[b-40jgupevjb] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px 20px 18px;
}

.r04-buckets[b-40jgupevjb] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.r04-bucket[b-40jgupevjb] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 16px 12px;
    border-radius: 8px;
}

.r04-bucket-dot[b-40jgupevjb] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.r04-bucket-value[b-40jgupevjb] {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
}

.r04-bucket-label[b-40jgupevjb] {
    font-size: 12px;
    font-weight: 500;
    color: var(--aims-text-secondary);
}

.r04-bucket-amber[b-40jgupevjb]  { background: var(--r04-bucket-amber-bg); }
.r04-bucket-orange[b-40jgupevjb] { background: var(--r04-bucket-orange-bg); }
.r04-bucket-red[b-40jgupevjb]    { background: var(--r04-bucket-red-bg); }

.r04-bucket-amber  .r04-bucket-dot[b-40jgupevjb]   { background: var(--r04-bucket-amber-dot); }
.r04-bucket-amber  .r04-bucket-value[b-40jgupevjb] { color: var(--r04-bucket-amber-value); }
.r04-bucket-orange .r04-bucket-dot[b-40jgupevjb]   { background: var(--r04-bucket-orange-dot); }
.r04-bucket-orange .r04-bucket-value[b-40jgupevjb] { color: var(--r04-bucket-orange-value); }
.r04-bucket-red    .r04-bucket-dot[b-40jgupevjb]   { background: var(--r04-bucket-red-dot); }
.r04-bucket-red    .r04-bucket-value[b-40jgupevjb] { color: var(--r04-bucket-red-value); }

/* ── Row 3 — Asset Information (RadzenDonutSeries per R05 tuned look, D10) ── */

.r04-chart-cols[b-40jgupevjb] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: stretch;
}

.r04-chart-card[b-40jgupevjb] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
}

/* Center content inside the donut hole (RadzenDonutSeries TitleTemplate —
   renders inside .rz-donut-content, the chart's built-in center slot). */
.r04-donut-total[b-40jgupevjb] {
    font-size: 22px;
    font-weight: 700;
    color: var(--aims-text-primary);
}

.r04-donut-center-label[b-40jgupevjb] {
    font-size: 11px;
    font-weight: 400;
    color: var(--aims-text-secondary);
}

/* ── Row 4a — Incident Status (271×88 cards) ── */

.r04-status-grid[b-40jgupevjb] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.r04-status-card[b-40jgupevjb] {
    min-height: 88px;
    padding: 14px 16px 12px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.r04-status-top[b-40jgupevjb] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.r04-status-value-row[b-40jgupevjb] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.r04-status-value[b-40jgupevjb] {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--r04-accent);
}

.r04-status-dot[b-40jgupevjb] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--r04-accent);
}

/* ── Row 4b — Incident Complaints grid ── */

.r04-incident-card[b-40jgupevjb] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
}

/* G29: grid styling entirely via --rz-grid-* overrides on the wrapper div. */
.r04-incident-grid[b-40jgupevjb] {
    --rz-grid-background-color: var(--aims-surface-bg);
    --rz-grid-header-background-color: var(--r04-table-header-bg);
    --rz-grid-header-color: var(--r04-table-header-text);
    --rz-grid-header-font-size: 11px;
    --rz-grid-header-font-weight: 600;
    --rz-grid-header-text-transform: none;
    --rz-grid-header-cell-padding: 10px 12px;
    --rz-grid-header-cell-border-bottom: none;
    --rz-grid-cell-color: var(--aims-text-primary);
    --rz-grid-cell-font-size: 12px;
    --rz-grid-cell-line-height: 1.4;
    --rz-grid-cell-padding: 10px 12px;
    --rz-grid-cell-border: none;
    --rz-grid-bottom-cell-border: none;
    --rz-grid-stripe-background-color: var(--r04-row-alt);
    --rz-grid-stripe-odd-background-color: var(--aims-surface-bg);
    --rz-grid-hover-background-color: var(--r04-hover-bg);
    --rz-grid-hover-color: var(--aims-text-primary);
    overflow-x: auto;
}

.r04-ref[b-40jgupevjb] {
    color: var(--r04-teal);
    font-size: 12px;
    font-weight: 500;
}

.r04-priority[b-40jgupevjb] {
    font-size: 12px;
    font-weight: 600;
}

.r04-priority-high[b-40jgupevjb] {
    color: var(--r04-red);
}

.r04-priority-medium[b-40jgupevjb] {
    color: var(--r04-amber);
}

.r04-priority-low[b-40jgupevjb] {
    color: var(--r04-green);
}

/* ── Row 5 — CM / PM plain tables (wireframe zebra tables) ── */

.r04-maint-card[b-40jgupevjb] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
}

.r04-sub-group[b-40jgupevjb] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.r04-table-scroll[b-40jgupevjb] {
    overflow-x: auto;
}

.r04-plain-table[b-40jgupevjb] {
    width: 100%;
    border-collapse: collapse;
}

.r04-plain-table th[b-40jgupevjb] {
    background: var(--r04-table-header-bg);
    color: var(--r04-table-header-text);
    font-size: 11px;
    font-weight: 600;
    text-align: left;
    padding: 10px 12px;
    white-space: nowrap;
}

.r04-plain-table td[b-40jgupevjb] {
    font-size: 12px;
    color: var(--aims-text-primary);
    padding: 10px 12px;
    white-space: nowrap;
}

.r04-plain-table tbody tr:nth-child(even) td[b-40jgupevjb] {
    background: var(--r04-row-alt);
}

.r04-col-ref[b-40jgupevjb]   { width: 155px; }
.r04-col-loc[b-40jgupevjb]   { width: 120px; }
.r04-col-date[b-40jgupevjb]  { width: 105px; }
.r04-col-vendor[b-40jgupevjb]{ width: 155px; }

/* ── Responsive (canonical 768/480 tiers) ── */

@media (max-width: 768px) {
    .r04-stat-grid[b-40jgupevjb] {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .r04-expiry-cols[b-40jgupevjb],
    .r04-chart-cols[b-40jgupevjb] {
        grid-template-columns: 1fr;
    }

    .r04-status-grid[b-40jgupevjb] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .r04-stat-grid[b-40jgupevjb],
    .r04-status-grid[b-40jgupevjb] {
        grid-template-columns: 1fr;
    }

    .r04-buckets[b-40jgupevjb] {
        grid-template-columns: 1fr;
    }

}
/* /Components/Pages/Dashboard/R05FinanceDashboard.razor.rz.scp.css */
/* ============================================================================
   R05 Bahagian Kewangan (Finance Division) Dashboard — scoped styles (STORY-124)
   Governing wireframes: f6luL (Light, 1440×2504) / o1H3n (Dark, 1440×2576).
   G59: every hardcoded hex lives in a --r05-* token with a [data-theme="dark"]
   counterpart — no naked hex outside the token blocks (G72 cross-checked both
   frames field-by-field: dark lightens navy/grey chart segments and status
   values, keeps the bar chart fills identical).
   G29: RadzenDataGrid styling via --rz-grid-* overrides on the wrapper div only.
   ============================================================================ */

.r05-dash[b-c0udcy63mp] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    font-family: 'Inter', 'Manrope', sans-serif;

    /* ── Wireframe palette tokens — Light (f6luL) ── */
    --r05-text-secondary: #A0AEC0;
    --r05-green: #38A169;
    --r05-red: #E53E3E;
    --r05-orange: #DD6B20;
    --r05-red-deep: #C53030;
    --r05-grey: #A0AEC0;

    /* Chart segments (frame fills): teal/green/blue/purple/jb/red stay constant
       across themes; navy and grey lighten in dark (G72). */
    --r05-chart-teal: #4DD9C0;
    --r05-chart-green: #38A169;
    --r05-chart-navy: #0D1B2A;
    --r05-chart-grey: #A0AEC0;
    --r05-chart-jb: #DD6B20;
    --r05-chart-red: #E53E3E;
    --r05-chart-purple: #805AD5;
    --r05-chart-blue: #3182CE;

    /* Monthly expenditure bars (Jan–Dec fills — identical in o1H3n, G72) */
    --r05-bar-1: #4DD9C0;
    --r05-bar-2: #38B2AC;
    --r05-bar-3: #319795;
    --r05-bar-4: #2C7A78;
    --r05-bar-5: #2B6CB0;
    --r05-bar-6: #3182CE;
    --r05-bar-7: #4299E1;
    --r05-bar-8: #63B3ED;

    --r05-total-bg: #FFF5F5;
    --r05-bucket-bg: #FFF5F5;
    --r05-table-header-bg: #F7F8FA;
    --r05-table-header-text: #4A5568;
    --r05-row-alt: #FAFBFC;
    --r05-hover-bg: #F7F8FA;
    --r05-donut-count-fill: #FFFFFF;
}

[data-theme="dark"] .r05-dash[b-c0udcy63mp] {
    /* ── Wireframe dark palette (o1H3n): lighter status values, dark tint
       buckets/total card, dark table surfaces, lightened chart segments. ── */
    --r05-text-secondary: #8899AA;
    --r05-green: #68D391;
    --r05-red: #FC8181;
    --r05-orange: #F6AD55;
    --r05-red-deep: #FEB2B2;
    --r05-grey: #8899AA;

    --r05-chart-teal: #4DD9C0;
    --r05-chart-green: #38A169;
    --r05-chart-navy: #E2E8F0;
    --r05-chart-grey: #8899AA;
    --r05-chart-jb: #DD6B20;
    --r05-chart-red: #E53E3E;
    --r05-chart-purple: #805AD5;
    --r05-chart-blue: #3182CE;

    /* Bar chart fills are identical in o1H3n (G72 cross-check) — no override. */

    --r05-total-bg: #2D1F1F;
    --r05-bucket-bg: #2D1F1F;
    --r05-table-header-bg: #151F2B;
    --r05-table-header-text: #4A5568;
    --r05-row-alt: #151F2B;
    --r05-hover-bg: #162230;
    --r05-donut-count-fill: #1A2332;
}

/* ── Typography ── */

.r05-section[b-c0udcy63mp] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.r05-section-title[b-c0udcy63mp] {
    font-size: 16px;
    font-weight: 600;
    color: var(--aims-text-primary);
    margin: 0;
}

.r05-subgroup[b-c0udcy63mp] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Cards ── */

.r05-card[b-c0udcy63mp] {
    background: var(--aims-surface-bg);
    border-radius: 8px;
    box-shadow: var(--aims-card-shadow);
}

.r05-stat-card[b-c0udcy63mp] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 20px;
}

.r05-stat-label[b-c0udcy63mp] {
    font-size: 12px;
    font-weight: 400;
    color: var(--r05-text-secondary);
}

.r05-stat-value[b-c0udcy63mp] {
    font-size: 24px;
    font-weight: 700;
    color: var(--aims-text-primary);
    line-height: 1.2;
}

/* Monthly-summary cards render 22px values (frame f6luL) */
.r05-stat-value-sm[b-c0udcy63mp] {
    font-size: 22px;
}

.r05-val-green[b-c0udcy63mp]  { color: var(--r05-green); }
.r05-val-red[b-c0udcy63mp]    { color: var(--r05-red); }
.r05-val-orange[b-c0udcy63mp] { color: var(--r05-orange); }
.r05-val-grey[b-c0udcy63mp]   { color: var(--r05-grey); }

/* S4 Total Disposal Value card — tinted surface (frame #FFF5F5 / #2D1F1F) */
.r05-card-total[b-c0udcy63mp] {
    background: var(--r05-total-bg);
}

/* ── Stat-card row grids — desktop base tier (frames f6luL/o1H3n) ──
   S1/S1b render 2×2 (repeat(2,1fr)), S2/S3/S5 rows of 3, S4 row of 4.
   Base rules MUST exist at the top level — without them the rows fall
   back to block flow and every card stacks full-width 1-per-row at
   desktop (mirrors R04FacilityDashboard.razor.css:131/191/205/250/359).
   Media tiers below narrow to 2 then 1 column. */

.r05-row-2[b-c0udcy63mp] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.r05-row-3[b-c0udcy63mp] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.r05-row-4[b-c0udcy63mp] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

/* ── S1 — Monthly expenditure bar chart ── */

.r05-chart-card[b-c0udcy63mp] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 24px;
    min-height: 320px;
}

.r05-chart-subtitle[b-c0udcy63mp] {
    font-size: 13px;
    font-weight: 500;
    color: var(--r05-text-secondary);
}

.r05-chart-plot[b-c0udcy63mp] {
    display: flex;
    gap: 8px;
    height: 210px;
}

.r05-yaxis[b-c0udcy63mp] {
    width: 56px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* Frame f6luL padding [0,0,20,8]: left 8 (label inset), bottom 20. */
    padding: 0 0 20px 8px;
    align-items: flex-end;
}

.r05-y-label[b-c0udcy63mp] {
    font-size: 10px;
    font-weight: 400;
    color: var(--r05-text-secondary);
}

.r05-bars[b-c0udcy63mp] {
    flex: 1;
    display: flex;
    gap: 6px;
    align-items: flex-end;
    padding-top: 12px;
}

.r05-bar-col[b-c0udcy63mp] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
    min-width: 0;
}

.r05-bar-value[b-c0udcy63mp] {
    font-size: 9px;
    font-weight: 600;
    color: var(--aims-text-primary);
    line-height: 1;
}

.r05-bar[b-c0udcy63mp] {
    width: 100%;
    border-radius: 2px 2px 0 0;
}

.r05-bar-month[b-c0udcy63mp] {
    font-size: 10px;
    font-weight: 500;
    color: var(--r05-text-secondary);
    line-height: 1;
}

/* ── S3 / S6 — DataGrid cards ── */

.r05-table-card[b-c0udcy63mp] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 20px;
}

.r05-table-title[b-c0udcy63mp],
.r05-group-title[b-c0udcy63mp],
.r05-donut-card-title[b-c0udcy63mp] {
    font-size: 13px;
    font-weight: 600;
    color: var(--aims-text-primary);
    margin: 0;
}

/* G29: grid styling entirely via --rz-grid-* overrides on the wrapper div. */
.r05-grid[b-c0udcy63mp] {
    --rz-grid-background-color: var(--aims-surface-bg);
    --rz-grid-header-background-color: var(--r05-table-header-bg);
    --rz-grid-header-color: var(--r05-table-header-text);
    --rz-grid-header-font-size: 11px;
    --rz-grid-header-font-weight: 600;
    --rz-grid-header-text-transform: none;
    --rz-grid-header-cell-padding: 10px 12px;
    --rz-grid-header-cell-border-bottom: none;
    --rz-grid-cell-color: var(--aims-text-primary);
    --rz-grid-cell-font-size: 12px;
    --rz-grid-cell-line-height: 1.4;
    --rz-grid-cell-padding: 10px 12px;
    --rz-grid-cell-border: none;
    --rz-grid-bottom-cell-border: none;
    --rz-grid-stripe-background-color: var(--r05-row-alt);
    --rz-grid-stripe-odd-background-color: var(--aims-surface-bg);
    --rz-grid-hover-background-color: var(--r05-hover-bg);
    --rz-grid-hover-color: var(--aims-text-primary);
    overflow-x: auto;
}

/* VERIFY-3: Radzen's header span clips ("Estimation Cost (...") at the 11px
   header font — allow the two-line wrap the frame shows (f6luL/o1H3n).
   ::deep reaches Radzen's inner span; grid-internal DOM carries no scoped
   attribute (G29 — grid theming stays on the wrapper div). */
.r05-grid[b-c0udcy63mp]  .rz-column-title-content {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

.r05-ref[b-c0udcy63mp] {
    color: var(--r05-chart-teal);
    font-size: 12px;
    font-weight: 500;
}

.r05-cell-end[b-c0udcy63mp] {
    display: block;
    text-align: right;
}

/* S6 Type column colors (frame: Preventive #38A169 / Corrective #DD6B20) */
.r05-type-pm[b-c0udcy63mp] {
    color: var(--r05-green);
    font-size: 12px;
}

.r05-type-cm[b-c0udcy63mp] {
    color: var(--r05-orange);
    font-size: 12px;
}

/* ── S5 — Donut charts (RadzenDonutSeries per user snippet, D10) ── */

.r05-chart-cols[b-c0udcy63mp] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: stretch;
}

.r05-donut-card[b-c0udcy63mp] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 20px;
    min-height: 420px;
}

/* Center content inside the donut hole (RadzenDonutSeries TitleTemplate —
   renders inside .rz-donut-content, the chart's built-in center slot). */
.r05-donut-total[b-c0udcy63mp] {
    font-size: 28px;
    font-weight: 700;
    color: var(--aims-text-primary);
    line-height: 1.1;
}

.r05-donut-center-label[b-c0udcy63mp] {
    font-size: 10px;
    font-weight: 500;
    color: var(--r05-text-secondary);
}

/* ── S6 — Expiry buckets ── */

.r05-expiry-cols[b-c0udcy63mp] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
}

.r05-expiry-card[b-c0udcy63mp] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 20px;
}

.r05-buckets[b-c0udcy63mp] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.r05-bucket[b-c0udcy63mp] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    padding: 12px 14px;
    border-radius: 6px;
    background: var(--r05-bucket-bg);
}

.r05-bucket-value[b-c0udcy63mp] {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
}

.r05-bucket-label[b-c0udcy63mp] {
    font-size: 11px;
    font-weight: 500;
    color: var(--r05-text-secondary);
}

.r05-bucket-6[b-c0udcy63mp] { color: var(--r05-orange); }
.r05-bucket-3[b-c0udcy63mp] { color: var(--r05-red); }
.r05-bucket-1[b-c0udcy63mp] { color: var(--r05-red-deep); }

/* ── Responsive (canonical 768/480 tiers) ── */

@media (max-width: 768px) {
    .r05-row-2[b-c0udcy63mp],
    .r05-row-3[b-c0udcy63mp],
    .r05-row-4[b-c0udcy63mp] {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .r05-chart-cols[b-c0udcy63mp],
    .r05-expiry-cols[b-c0udcy63mp] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .r05-row-2[b-c0udcy63mp],
    .r05-row-3[b-c0udcy63mp],
    .r05-row-4[b-c0udcy63mp] {
        grid-template-columns: 1fr;
    }

    .r05-buckets[b-c0udcy63mp] {
        grid-template-columns: 1fr;
    }

    .r05-donut-visual[b-c0udcy63mp],
    .r05-donut-visual-loc[b-c0udcy63mp] {
        flex-direction: column;
    }
}
/* /Components/Pages/Incidents/Detail.razor.rz.scp.css */
/* scoped CSS for Pages/Incidents/Detail.razor (STORY-130) */
/* Wireframe reference: R04 IC-S02 Incident Detail Screen - Light Mode (frame vNZbW)
   and R04 IC-S02 Incident Detail Screen - Dark Mode (frame AbyQt). Frame *names*
   say IC-S02 while TIS assigns IC-S02 to the assessment screen — the IDs are
   consumed as-is for this story (plan §3 Step 0, G71); the naming mismatch is
   synced in WIREFRAME_PREFIX_ALIGNMENT_PLAN.md at closeout. */
/* Layout classes (md-*) are mirrored from Pages/Maintenance/Detail.razor.css —
   CSS isolation scopes them per-page, so this page carries its own copy. Color
   values come from the AiMS design tokens in wwwroot/app.css (var(--aims-*)),
   which already carry dark values; only badges/chips need explicit
   [data-theme="dark"] overrides (G59). */

/* ============================================================
   PAGE WRAPPER
   ============================================================ */

.md-page[b-puj211yh8l] {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    background: var(--aims-page-bg);
}

/* ============================================================
   TOP BAR (breadcrumb + page title + back button)
   ============================================================ */

.md-topbar[b-puj211yh8l] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 64px;
    padding: 0 24px;
    background: var(--aims-surface-bg);
    border-bottom: 1px solid var(--aims-border-color);
}

.md-topbar-left[b-puj211yh8l] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.md-breadcrumb[b-puj211yh8l] {
    font-family: 'Manrope', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: var(--aims-text-muted);
}

.md-pagetitle[b-puj211yh8l] {
    font-family: 'Manrope', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--aims-text-primary);
    margin: 0;
}

/* ============================================================
   CONTENT AREA
   ============================================================ */

.md-content[b-puj211yh8l] {
    flex: 1;
    background: var(--aims-page-bg);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow-y: auto;
}

/* ============================================================
   BACK BUTTON ROW (wireframe reconcile attempt 2 — left-aligned
   on its own row below the header bar, not inside the topbar)
   ============================================================ */

.md-back-row[b-puj211yh8l] {
    display: flex;
    justify-content: flex-start;
}

/* ============================================================
   SECTION (heading sits on the PAGE BACKGROUND above each card —
   wireframe reconcile attempt 2; the card carries no header band)
   ============================================================ */

.md-section[b-puj211yh8l] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.md-section-heading[b-puj211yh8l] {
    font-family: 'Manrope', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--aims-text-primary);
    margin: 0;
}

.md-card[b-puj211yh8l] {
    background: var(--aims-surface-bg);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--aims-card-shadow);
}

.md-card-body[b-puj211yh8l] {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ============================================================
   FIELD GRID (2-col default; long text spans full width)
   ============================================================ */

.md-grid[b-puj211yh8l] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 24px;
}

.md-field[b-puj211yh8l] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.md-field-wide[b-puj211yh8l] {
    grid-column: 1 / -1;
}

/* Wireframe reconcile (attempt 3): field labels are MUTED gray at regular
   weight (wireframe vNZbW label crop dominant text pixel #A0AEC0), not
   text-primary @600 — this restores the label/value hierarchy where the
   value (.md-input, 13px text-primary) reads darker than its label.
   #A0AEC0 matches the muted hint color used across the Maintenance step
   pages; no light-mode token carries it. */
.md-label[b-puj211yh8l] {
    font-family: 'Manrope', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #A0AEC0;
}

/* Dark-theme override (G59) — #A0AEC0 fails contrast on #1A2332 cards. */
[data-theme="dark"] .md-label[b-puj211yh8l] {
    color: var(--aims-text-muted);
}

/* Read-only value — PLAIN TEXT on the card surface (wireframe reconcile
   attempt 2: values are NOT boxed in bordered input-like fields). */
.md-input[b-puj211yh8l] {
    display: flex;
    align-items: center;
    padding: 0;
    border: none;
    background: transparent;
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    color: var(--aims-text-primary);
    flex-wrap: wrap;
    gap: 6px;
    line-height: 1.5;
    min-height: 20px;
}

.md-mono[b-puj211yh8l] {
    font-family: 'Courier New', monospace;
    font-weight: 600;
}

/* ============================================================
   BADGES — aims-badge-incident-* (G100: class SELECTION comes from
   Web/Services/IncidentBadgeMapper.cs; the CSS definitions are page-scoped
   until a future extraction to app.css — plan §3a).
   Class names match dbo.ComplaintActionStatus seed values
   (AimsComplaintMasterData.cs): Draft, New, Application, Approval,
   Maintenance, Resolved, Closed + default fallback.
   G99: badges keep white-space:nowrap so multi-word labels never wrap.
   ============================================================ */

.aims-badge-incident-new[b-puj211yh8l],
.aims-badge-incident-application[b-puj211yh8l],
.aims-badge-incident-approval[b-puj211yh8l],
.aims-badge-incident-maintenance[b-puj211yh8l],
.aims-badge-incident-resolved[b-puj211yh8l],
.aims-badge-incident-draft[b-puj211yh8l],
.aims-badge-incident-closed[b-puj211yh8l],
.aims-badge-incident-default[b-puj211yh8l],
.aims-badge-incident-verification-complete[b-puj211yh8l],
.aims-badge-incident-verification-incomplete[b-puj211yh8l],
.aims-badge-incident-verification-pending[b-puj211yh8l],
.aims-badge-incident-priority-high[b-puj211yh8l],
.aims-badge-incident-priority-medium[b-puj211yh8l],
.aims-badge-incident-priority-low[b-puj211yh8l],
.aims-badge-incident-severity-critical[b-puj211yh8l],
.aims-badge-incident-severity-major[b-puj211yh8l],
.aims-badge-incident-severity-minor[b-puj211yh8l],
.aims-badge-incident-vendor[b-puj211yh8l] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .6875rem;
    font-weight: 600;
    white-space: nowrap;
    overflow-wrap: normal;
}

.aims-badge-incident-new[b-puj211yh8l] {
    background: #DCFCE7; color: #166534;
}
.aims-badge-incident-application[b-puj211yh8l] {
    background: #DBEAFE; color: #1E40AF;
}
.aims-badge-incident-approval[b-puj211yh8l] {
    background: #F3E8FF; color: #6B21A8;
}
.aims-badge-incident-maintenance[b-puj211yh8l] {
    background: #FEF3C7; color: #92400E;
}
.aims-badge-incident-resolved[b-puj211yh8l] {
    background: #FFEDD5; color: #9A3412;
}
.aims-badge-incident-draft[b-puj211yh8l] {
    background: #F1F5F9; color: #475569; border: 1px solid #CBD5E1;
}
.aims-badge-incident-closed[b-puj211yh8l] {
    background: #E2E8F0; color: #334155;
}
.aims-badge-incident-default[b-puj211yh8l] {
    background: #F8FAFC; color: #64748B; border: 1px solid #E2E8F0;
}

/* Verification Status badges — values map to IncidentComplaintCompletedType
   (Complete = 0, Incomplete = 1, PendingVerification = 2); NULL renders as
   "Pending Verification". Label: IncidentComplaintCompletedTypeExtensions.GetLabel. */
.aims-badge-incident-verification-complete[b-puj211yh8l] {
    background: #DCFCE7; color: #166534;
}
.aims-badge-incident-verification-incomplete[b-puj211yh8l] {
    background: #FEE2E2; color: #991B1B;
}
.aims-badge-incident-verification-pending[b-puj211yh8l] {
    /* Wireframe frames vNZbW/AbyQt render Pending Verification amber (same
       palette as the maintenance badge) in BOTH themes. */
    background: #FEF3C7; color: #92400E;
}

/* Priority chips — wireframe vNZbW shows "High" as a RED chip; Medium amber,
   Low green. Values are free-text (IncidentReporting.PriorityName), matched
   case-insensitively by IncidentBadgeMapper.PriorityClass; unknown → default. */
.aims-badge-incident-priority-high[b-puj211yh8l] {
    background: #FEE2E2; color: #991B1B;
}
.aims-badge-incident-priority-medium[b-puj211yh8l] {
    background: #FEF3C7; color: #92400E;
}
.aims-badge-incident-priority-low[b-puj211yh8l] {
    background: #DCFCE7; color: #166534;
}

/* Severity chips — wireframe vNZbW shows "Major" as an ORANGE chip;
   Critical red, Minor green. Same free-text matching caveat as Priority. */
.aims-badge-incident-severity-critical[b-puj211yh8l] {
    background: #FEE2E2; color: #991B1B;
}
.aims-badge-incident-severity-major[b-puj211yh8l] {
    background: #FEF3C7; color: #92400E;
}
.aims-badge-incident-severity-minor[b-puj211yh8l] {
    background: #DCFCE7; color: #166534;
}

/* Vendor chip — wireframe vNZbW renders the vendor name in a GREEN chip. */
.aims-badge-incident-vendor[b-puj211yh8l] {
    background: #DCFCE7; color: #166534;
}

/* ── Dark theme overrides (G59) ─────────── */
[data-theme="dark"] .aims-badge-incident-priority-high[b-puj211yh8l] {
    background: #991B1B; color: #FEE2E2;
}
[data-theme="dark"] .aims-badge-incident-priority-medium[b-puj211yh8l] {
    background: #78350F; color: #FEF3C7;
}
[data-theme="dark"] .aims-badge-incident-priority-low[b-puj211yh8l] {
    background: #14532D; color: #DCFCE7;
}
[data-theme="dark"] .aims-badge-incident-severity-critical[b-puj211yh8l] {
    background: #991B1B; color: #FEE2E2;
}
[data-theme="dark"] .aims-badge-incident-severity-major[b-puj211yh8l] {
    background: #78350F; color: #FEF3C7;
}
[data-theme="dark"] .aims-badge-incident-severity-minor[b-puj211yh8l] {
    background: #14532D; color: #DCFCE7;
}
[data-theme="dark"] .aims-badge-incident-vendor[b-puj211yh8l] {
    background: #14532D; color: #DCFCE7;
}
[data-theme="dark"] .aims-badge-incident-new[b-puj211yh8l] {
    background: #14532D; color: #DCFCE7;
}
[data-theme="dark"] .aims-badge-incident-application[b-puj211yh8l] {
    background: #1E3A8A; color: #DBEAFE;
}
[data-theme="dark"] .aims-badge-incident-approval[b-puj211yh8l] {
    background: #581C87; color: #F3E8FF;
}
[data-theme="dark"] .aims-badge-incident-maintenance[b-puj211yh8l] {
    background: #78350F; color: #FEF3C7;
}
[data-theme="dark"] .aims-badge-incident-resolved[b-puj211yh8l] {
    background: #7C2D12; color: #FFEDD5;
}
[data-theme="dark"] .aims-badge-incident-draft[b-puj211yh8l] {
    background: #334155; color: #F1F5F9; border-color: #475569;
}
[data-theme="dark"] .aims-badge-incident-closed[b-puj211yh8l] {
    background: #334155; color: #E2E8F0;
}
[data-theme="dark"] .aims-badge-incident-default[b-puj211yh8l] {
    background: #1E293B; color: #94A3B8; border-color: #334155;
}
[data-theme="dark"] .aims-badge-incident-verification-complete[b-puj211yh8l] {
    background: #14532D; color: #DCFCE7;
}
[data-theme="dark"] .aims-badge-incident-verification-incomplete[b-puj211yh8l] {
    background: #991B1B; color: #FEE2E2;
}
[data-theme="dark"] .aims-badge-incident-verification-pending[b-puj211yh8l] {
    background: #78350F; color: #FEF3C7;
}

/* ============================================================
   ASSET WARRANTY CHIP (wireframe "Active — Until 14/03/2027")
   ============================================================ */

.ic-warranty[b-puj211yh8l] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .6875rem;
    font-weight: 600;
    white-space: nowrap;
    overflow-wrap: normal;
}

.ic-warranty-active[b-puj211yh8l] {
    background: #DCFCE7;
    color: #166534;
}

.ic-warranty-expired[b-puj211yh8l] {
    background: #FEE2E2;
    color: #991B1B;
}

/* Dark-theme overrides (G59) */
[data-theme="dark"] .ic-warranty-active[b-puj211yh8l] {
    background: #14532D;
    color: #DCFCE7;
}

[data-theme="dark"] .ic-warranty-expired[b-puj211yh8l] {
    background: #991B1B;
    color: #FEE2E2;
}

/* ============================================================
   BACK BUTTON (AC-10)
   ============================================================ */

/* Wireframe reconcile (attempt 3): the back button is a BORDERLESS
   light-gray filled chip (--aims-icon-btn-bg, #F0F1F3 light / #1A2332 dark —
   adaptive, no dark override needed) with a slightly darker/larger label,
   not a white button with a 1px border. Geometry (h38 / radius 8) unchanged. */
.md-btn[b-puj211yh8l] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 18px;
    border: none;
    border-radius: 8px;
    background: var(--aims-icon-btn-bg);
    color: var(--aims-text-primary);
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}

.md-btn:hover[b-puj211yh8l] {
    background: var(--aims-icon-btn-hover);
    color: var(--aims-text-primary);
}

/* ============================================================
   LOADING STATE (AC-11)
   ============================================================ */

.md-loading[b-puj211yh8l] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 80px 24px;
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    color: var(--aims-text-secondary);
    background: var(--aims-page-bg);
}

.md-spinner[b-puj211yh8l] {
    width: 18px;
    height: 18px;
    border: 2px solid var(--aims-border-color);
    border-top-color: var(--aims-text-primary);
    border-radius: 50%;
    animation: md-spin-b-puj211yh8l 0.7s linear infinite;
}

@keyframes md-spin-b-puj211yh8l {
    to { transform: rotate(360deg); }
}

/* ============================================================
   NOT-FOUND / ERROR STATE (AC-10, AC-11)
   ============================================================ */

.md-error[b-puj211yh8l] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 24px;
    text-align: center;
    gap: 14px;
    background: var(--aims-page-bg);
}

.md-error-icon[b-puj211yh8l] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #FEE2E2;
    color: #991B1B;
    font-family: 'Manrope', sans-serif;
    font-size: 26px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Dark-mode error icon contrast override (G59). */
[data-theme="dark"] .md-error-icon[b-puj211yh8l] {
    background: rgba(239, 68, 68, 0.18);
    color: #FCA5A5;
}

.md-error h3[b-puj211yh8l] {
    font-family: 'Manrope', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--aims-text-primary);
    margin: 0;
}

.md-error p[b-puj211yh8l] {
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    color: var(--aims-text-secondary);
    margin: 0;
    max-width: 420px;
}

/* ============================================================
   RESPONSIVE (2-col → 1-col)
   ============================================================ */

@media (max-width: 768px) {
    .md-grid[b-puj211yh8l] {
        grid-template-columns: 1fr;
    }

    .md-content[b-puj211yh8l] {
        padding: 16px;
    }

    .md-topbar[b-puj211yh8l] {
        padding: 0 16px;
    }

    .md-card-body[b-puj211yh8l] {
        padding-left: 16px;
        padding-right: 16px;
    }
}
/* /Components/Pages/Incidents/Verify.razor.rz.scp.css */
/* scoped CSS for Pages/Incidents/Verify.razor (STORY-132) */
/* Wireframe reference: R04 IC-S04 Incident Assessment Screen - Light Mode
   (frame kcZAt) and R04 IC-S04 Incident Assessment Screen - Dark Mode (frame
   yqGJE). Frame *names* say IC-S04 while TIS assigns IC-S02 to the assessment
   screen — the naming drift is flagged to the designer at closeout
   (WIREFRAME_PREFIX_ALIGNMENT_PLAN sync, plan §4 divergence 3).
   Layout classes (md-*) mirror Pages/Incidents/Detail.razor.css (STORY-130)
   — CSS isolation scopes them per-page, so this page carries its own copy.
   Unlike the Detail screen (heading above the card), this wireframe carries a
   grey CARD-HEADER BAND inside each card (kcZAt "Card Header" #F7F8FA) — the
   md-card-header block below implements it.
   Color values come from the AiMS design tokens in wwwroot/app.css
   (var(--aims-*), which already carry dark values) or get explicit
   [data-theme="dark"] overrides (G59). Badge base rules reuse the SHIPPED
   incident palette from Detail.razor.css (G103 — shared classes must not
   drift between screens); the dark-mode treatment deliberately diverges
   (see the badge block below — yqGJE keeps light pastel fills in dark
   mode, so the inverted dark overrides were dropped on this page). */

/* ============================================================
   PAGE WRAPPER
   ============================================================ */

.md-page[b-27xr802n3b] {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    background: var(--aims-page-bg);
}

/* ============================================================
   CONTENT AREA
   The wireframe renders a SINGLE 64px header bar (breadcrumb eyebrow
   + title + right cluster) — that is the shared TopBar
   (aims-header), so this page has NO page-level topbar band. A
   second 64px band pushed the content 88px lower than the
   wireframe (VERIFY reconcile attempt 2); content starts
   directly below the 64px TopBar.
   VERIFY reconcile (attempt 3): the app shell .aims-content already
   applies the 24px page inset, so a second 24px here doubled it to
   48px (back row y=112 vs wireframe 88; cards x=308/w=1084 vs
   x=284/w=1132). Padding is 0 — the shell owns the inset.
   ============================================================ */

.md-content[b-27xr802n3b] {
    flex: 1;
    background: var(--aims-page-bg);
    padding: 0;
    display: flex;
    flex-direction: column;
    /* Wireframe card-to-card gap is 24px (VERIFY reconcile attempt 2). */
    gap: 24px;
    overflow-y: auto;
}

/* ============================================================
   BACK BUTTON ROW (left-aligned on its own row below the
   header bar — wireframe kcZAt "Btn Kembali")
   ============================================================ */

.md-back-row[b-27xr802n3b] {
    display: flex;
    justify-content: flex-start;
}

/* ============================================================
   CARD (wireframe kcZAt: white card with a grey CARD-HEADER BAND
   — differs from the Detail screen's heading-above-card layout)
   ============================================================ */

.md-card[b-27xr802n3b] {
    background: var(--aims-surface-bg);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--aims-card-shadow);
}

/* Wireframe kcZAt "Card Header" — #F7F8FA light (--aims-page-bg) /
   #0D1B2A dark (--aims-navy) band, G59 dark override. */
.md-card-header[b-27xr802n3b] {
    padding: 12px 20px;
    background: var(--aims-page-bg);
    border-bottom: 1px solid var(--aims-border-color);
}

[data-theme="dark"] .md-card-header[b-27xr802n3b] {
    background: var(--aims-navy);
}

.md-card-heading[b-27xr802n3b] {
    font-family: 'Manrope', sans-serif;
    font-size: 12px;
    font-weight: 600;
    /* VERIFY reconcile (attempt 4): the wireframe Card Header band renders
       the 12px heading with tight leading — default 1.5 made the band 43px
       (12px text + 24px padding + 1px border); 1.33 gives the 41px band the
       kcZAt/yqGJE frames draw (card 475 → 426px target). */
    line-height: 1.33;
    color: var(--aims-text-primary);
    margin: 0;
}

.md-card-body[b-27xr802n3b] {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ============================================================
   FIELD GRID (2-col default; long text spans full width)
   ============================================================ */

.md-grid[b-27xr802n3b] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* VERIFY reconcile (attempt 4): row gap 14px → 12px — the wireframe
       field-row pitch is 49-53px; 14px + 6px field gap + 20px value
       measured 57-60px live. */
    gap: 12px 24px;
}

.md-field[b-27xr802n3b] {
    display: flex;
    flex-direction: column;
    /* VERIFY reconcile (attempt 4): label→value gap 6px → 4px (part of the
       +8-10px/row pitch drift vs the wireframe 49-53px). */
    gap: 4px;
    min-width: 0;
}

.md-field-wide[b-27xr802n3b] {
    grid-column: 1 / -1;
}

/* Field labels — muted gray at regular weight (wireframe kcZAt label
   #A0AEC0), matching the Detail screen and the rest of the incident module.
   VERIFY reconcile (attempt 4): tight 1.33 leading (12px → 16px) — the
   browser default 1.5 (18px) inflated the field-row pitch to 57-60px vs the
   wireframe 49-53px. */
.md-label[b-27xr802n3b] {
    font-family: 'Manrope', sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.33;
    color: #A0AEC0;
}

/* Dark-theme override (G59) — #A0AEC0 fails contrast on #1A2332 cards. */
[data-theme="dark"] .md-label[b-27xr802n3b] {
    color: var(--aims-text-muted);
}

/* Read-only value — PLAIN TEXT on the card surface (wireframe kcZAt).
   VERIFY reconcile (attempt 4): line-height 1.5 → 1.46 (13px → 19px) and
   min-height 20 → 19px — part of the +8-10px/row pitch drift fix (the
   wireframe value rows are ~19px tall). */
.md-input[b-27xr802n3b] {
    display: flex;
    align-items: center;
    padding: 0;
    border: none;
    background: transparent;
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    color: var(--aims-text-primary);
    flex-wrap: wrap;
    gap: 6px;
    line-height: 1.46;
    min-height: 19px;
}

/* ============================================================
   VERIFICATION FORM INPUTS (wireframe kcZAt section 2)
   Dropdown h42 / TextArea h90, both #F7F8FA light / #263040 dark
   with a 1px border. The app-wide dark rule
   [data-theme="dark"] select/textarea { border-color:
   var(--aims-border-color) !important } (0,1,1) is beaten here by the
   attribute+class selectors below (0,2,1) — G59/G47.
   ============================================================ */

.md-select[b-27xr802n3b] {
    width: 100%;
    height: 42px;
    padding: 0 12px;
    border: 1px solid var(--aims-border-color);
    border-radius: 6px;
    background: var(--aims-row-alt);
    color: var(--aims-text-primary);
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    box-sizing: border-box;
}

.md-textarea[b-27xr802n3b] {
    width: 100%;
    min-height: 90px;
    padding: 9px 12px;
    border: 1px solid var(--aims-border-color);
    border-radius: 6px;
    background: var(--aims-row-alt);
    color: var(--aims-text-primary);
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    line-height: 1.5;
    box-sizing: border-box;
    /* Wireframe reconcile (attempt 2): kcZAt shows no resize grip on the
       remarks textarea. */
    resize: none;
}

.md-select[b-27xr802n3b]::placeholder,
.md-textarea[b-27xr802n3b]::placeholder {
    color: #94A3B8;
}

/* Dark inputs — wireframe yqGJE dropdown/textarea #263040 with #4A5568 border.
   !important + attribute+class specificity (0,2,0) beats the app-wide
   [data-theme="dark"] select/textarea !important rules (0,1,1) — G59. */
[data-theme="dark"] .md-select[b-27xr802n3b],
[data-theme="dark"] .md-textarea[b-27xr802n3b] {
    background: #263040 !important;
    border-color: #4A5568 !important;
    color: var(--aims-text-primary) !important;
}

[data-theme="dark"] .md-select[b-27xr802n3b]::placeholder,
[data-theme="dark"] .md-textarea[b-27xr802n3b]::placeholder {
    color: #64748B !important;
}

[data-theme="dark"] .md-select option[b-27xr802n3b] {
    background-color: var(--aims-surface-bg);
    color: var(--aims-text-primary);
}

/* G47 — per-field error border that survives BOTH themes. The light rule
   wins in light mode; the dark prefixed selector (0,2,2 + !important) beats
   the app-wide [data-theme="dark"] select/textarea border !important (0,2,1). */
select.md-input-error[b-27xr802n3b],
[data-theme="dark"] select.md-input-error[b-27xr802n3b] {
    border-color: #EF4444 !important;
}

textarea.md-input-error[b-27xr802n3b],
[data-theme="dark"] textarea.md-input-error[b-27xr802n3b] {
    border-color: #EF4444 !important;
}

/* VERIFY reconcile (attempt 4): the wireframe "Submission Completed *"
   label is a SINGLE text node — the asterisk carries no separate red
   color. The red rule is removed so the asterisk inherits the label
   gray (.md-label: #A0AEC0 light / --aims-text-muted dark, G59). */

/* ============================================================
   VERIFIED BUTTON (wireframe kcZAt — teal fill, navy text+icon)
   ============================================================ */

.md-button-row[b-27xr802n3b] {
    display: flex;
    /* Wireframe reconcile (attempt 2): kcZAt Button Row right-aligns the
       Verified button (button x:972 w:120 in a 1092-wide row — 972+120=1092
       = row right edge). */
    justify-content: flex-end;
    margin-top: 4px;
}

.md-verified-btn[b-27xr802n3b] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 24px;
    border: none;
    border-radius: 8px;
    background: var(--aims-teal);
    color: var(--aims-navy);
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: filter 120ms ease;
}

.md-verified-btn:hover:not(:disabled)[b-27xr802n3b] {
    filter: brightness(0.94);
}

.md-verified-btn:disabled[b-27xr802n3b] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ============================================================
   ALREADY-VERIFIED STATE NOTE (wireframe kcZAt "State Note" —
   replaces the Verified button once state is 0/1, xlsx row 43)
   #E8F8F5 light / #1A3A3A dark, teal check-circle icon
   ============================================================ */

.md-state-note[b-27xr802n3b] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-radius: 8px;
    background: #E8F8F5;
    color: #718096;
    font-family: 'Manrope', sans-serif;
    font-size: 12px;
}

[data-theme="dark"] .md-state-note[b-27xr802n3b] {
    background: #1A3A3A;
    color: #A0AEC0;
}

/* ============================================================
   COMPLAINT IMAGES — EMPTY-STATE PLACEHOLDER TILES
   (wireframe kcZAt "Picture-01..04" — 4 tiles with an image icon
   and a Picture-0N label; wireframe reconcile attempt 2 replaces
   the DocumentManager text empty state on this page).
   Shape mirrors the house aims-thumb precedent
   (Maintenance/Corrective/AcknowledgeStep1.razor) with theme
   tokens + G59 dark overrides — the global .aims-thumb classes
   have no dark override and would stay light in dark mode.
   ============================================================ */

.md-image-placeholder-grid[b-27xr802n3b] {
    /* VERIFY reconcile (attempt 3): wireframe kcZAt tiles are 264x160 and
       fill the 1092px row as 4 equal columns at x=0/276/552/828 (3x12px
       gaps) — a fixed 4-col grid, not a left-clustered flex wrap. */
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
}

.md-image-placeholder-tile[b-27xr802n3b] {
    aspect-ratio: 264 / 160;
    min-height: 0;
    border: 1px solid var(--aims-border-color);
    border-radius: 6px;
    background: var(--aims-row-alt);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
}

.md-image-placeholder-icon[b-27xr802n3b] {
    font-size: 32px;
    line-height: 1;
    color: var(--aims-text-muted);
}

.md-image-placeholder-name[b-27xr802n3b] {
    font-family: 'Manrope', sans-serif;
    font-size: 12px;
    color: var(--aims-text-muted);
}

/* ============================================================
   BADGES — aims-badge-incident-* (G100: class SELECTION comes from
   Web/Services/IncidentBadgeMapper.cs; definitions mirror
   Detail.razor.css byte-for-byte — G103 shared-token parity, the
   STORY-130-accepted palette).
   Class names match dbo.ComplaintActionStatus seed values
   (AimsComplaintMasterData.cs): Draft, New, Application, Approval,
   Maintenance, Resolved, Closed + default fallback.
   G99: badges keep white-space:nowrap so multi-word labels never wrap.
   ============================================================ */

.aims-badge-incident-new[b-27xr802n3b],
.aims-badge-incident-application[b-27xr802n3b],
.aims-badge-incident-approval[b-27xr802n3b],
.aims-badge-incident-maintenance[b-27xr802n3b],
.aims-badge-incident-resolved[b-27xr802n3b],
.aims-badge-incident-draft[b-27xr802n3b],
.aims-badge-incident-closed[b-27xr802n3b],
.aims-badge-incident-default[b-27xr802n3b],
.aims-badge-incident-verification-complete[b-27xr802n3b],
.aims-badge-incident-verification-incomplete[b-27xr802n3b],
.aims-badge-incident-verification-pending[b-27xr802n3b],
.aims-badge-incident-priority-high[b-27xr802n3b],
.aims-badge-incident-priority-medium[b-27xr802n3b],
.aims-badge-incident-priority-low[b-27xr802n3b],
.aims-badge-incident-severity-critical[b-27xr802n3b],
.aims-badge-incident-severity-major[b-27xr802n3b],
.aims-badge-incident-severity-minor[b-27xr802n3b],
.aims-badge-incident-vendor[b-27xr802n3b] {
    display: inline-block;
    padding: 3px 10px;
    /* Wireframe badges are ROUNDED-RECT (cornerRadius 4, padding 3/10), not
       pills (VERIFY reconcile attempt 2). */
    border-radius: 4px;
    font-size: .6875rem;
    font-weight: 600;
    white-space: nowrap;
    overflow-wrap: normal;
}

.aims-badge-incident-new[b-27xr802n3b] {
    /* Wireframe kcZAt Action Status "New" is AMBER #FEF3C7/#92400E (same
       palette as Maintenance/verification-pending) — not green (VERIFY
       reconcile attempt 2). */
    background: #FEF3C7; color: #92400E;
}
.aims-badge-incident-application[b-27xr802n3b] {
    background: #DBEAFE; color: #1E40AF;
}
.aims-badge-incident-approval[b-27xr802n3b] {
    background: #F3E8FF; color: #6B21A8;
}
.aims-badge-incident-maintenance[b-27xr802n3b] {
    background: #FEF3C7; color: #92400E;
}
.aims-badge-incident-resolved[b-27xr802n3b] {
    background: #FFEDD5; color: #9A3412;
}
.aims-badge-incident-draft[b-27xr802n3b] {
    background: #F1F5F9; color: #475569; border: 1px solid #CBD5E1;
}
.aims-badge-incident-closed[b-27xr802n3b] {
    background: #E2E8F0; color: #334155;
}
.aims-badge-incident-default[b-27xr802n3b] {
    background: #F8FAFC; color: #64748B; border: 1px solid #E2E8F0;
}

/* Verification Status badges — values map to IncidentComplaintCompletedType
   (Complete = 0, Incomplete = 1, PendingVerification = 2); NULL renders as
   "Pending Verification". Label: IncidentComplaintCompletedTypeExtensions.GetLabel. */
.aims-badge-incident-verification-complete[b-27xr802n3b] {
    background: #DCFCE7; color: #166534;
}
.aims-badge-incident-verification-incomplete[b-27xr802n3b] {
    background: #FEE2E2; color: #991B1B;
}
.aims-badge-incident-verification-pending[b-27xr802n3b] {
    /* Wireframe frames kcZAt/yqGJE render Pending Verification amber (same
       palette as the maintenance badge) in BOTH themes. */
    background: #FEF3C7; color: #92400E;
}

/* Priority chips — wireframe kcZAt shows "High" as a RED chip; Medium amber,
   Low green. Values are free-text (IncidentReporting.PriorityName), matched
   case-insensitively by IncidentBadgeMapper.PriorityClass; unknown → default. */
.aims-badge-incident-priority-high[b-27xr802n3b] {
    background: #FEE2E2; color: #991B1B;
}
.aims-badge-incident-priority-medium[b-27xr802n3b] {
    background: #FEF3C7; color: #92400E;
}
.aims-badge-incident-priority-low[b-27xr802n3b] {
    background: #DCFCE7; color: #166534;
}

/* Severity chips — wireframe kcZAt shows "Major" as an ORANGE chip;
   Critical red, Minor green. Same free-text matching caveat as Priority. */
.aims-badge-incident-severity-critical[b-27xr802n3b] {
    background: #FEE2E2; color: #991B1B;
}
.aims-badge-incident-severity-major[b-27xr802n3b] {
    /* Wireframe kcZAt Severity "Major" fill is #FFEDD5 (light peach-orange,
       same fill as Resolved) — not the amber #FEF3C7 family (VERIFY
       reconcile attempt 2). */
    background: #FFEDD5; color: #9A3412;
}
.aims-badge-incident-severity-minor[b-27xr802n3b] {
    background: #DCFCE7; color: #166534;
}

/* Vendor chip — wireframe kcZAt renders the vendor name in a GREEN chip. */
.aims-badge-incident-vendor[b-27xr802n3b] {
    background: #DCFCE7; color: #166534;
}

/* ── Dark theme ───────────
   VERIFY reconcile (attempt 3): the wireframe dark frame yqGJE renders
   EVERY badge with the SAME light PASTEL fill as the light frame — New /
   Pending Verification #FEF3C7/#92400E, Major #FFEDD5/#9A3412, vendor
   #DCFCE7/#166534 (live inversion #78350F/#FEF3C7, #14532D/#DCFCE7,
   #581C87/#F3E8FF FAILED attempt 2). The inverted [data-theme="dark"]
   overrides are therefore REMOVED on this page — the base pastel rules
   above apply in both themes. Deliberate page-scoped divergence from
   Detail.razor.css (G103) driven by the yqGJE frame; documented at
   closeout with the IC-S04/IC-S02 naming flag. */

/* ============================================================
   ASSET WARRANTY CHIP (wireframe "Active — Until 14/03/2027")
   VERIFY reconcile (attempt 4): wireframe Badge U92eki renders
   cornerRadius 4 + padding 3/10 (same rounded-rect shape as the
   aims-badge-incident-* chips — NOT a pill). The Active badge is
   pastel #DCFCE7 fill with #92400E text (not the #166534 the
   green family uses), and the yqGJE dark frame keeps the same
   light pastel fill in dark mode — the inverted #14532D/#DCFCE7
   dark overrides are REMOVED here, matching the attempt-3 badge
   fix (last inverted-style badge on the screen).
   ============================================================ */

.ic-warranty[b-27xr802n3b] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: .6875rem;
    font-weight: 600;
    white-space: nowrap;
    overflow-wrap: normal;
}

.ic-warranty-active[b-27xr802n3b] {
    background: #DCFCE7;
    color: #92400E;
}

.ic-warranty-expired[b-27xr802n3b] {
    background: #FEE2E2;
    color: #991B1B;
}

/* ============================================================
   BACK BUTTON (AC-10) — wireframe kcZAt: borderless light-gray
   filled chip h40 (--aims-icon-btn-bg #F0F1F3 light / #1A2332 dark,
   adaptive — no dark override needed)
   ============================================================ */

.md-btn[b-27xr802n3b] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 18px;
    border: none;
    border-radius: 8px;
    background: var(--aims-icon-btn-bg);
    color: var(--aims-text-primary);
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}

.md-btn:hover[b-27xr802n3b] {
    background: var(--aims-icon-btn-hover);
    color: var(--aims-text-primary);
}

/* ============================================================
   LOADING STATE (AC-10)
   ============================================================ */

.md-loading[b-27xr802n3b] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 80px 24px;
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    color: var(--aims-text-secondary);
    background: var(--aims-page-bg);
}

.md-spinner[b-27xr802n3b] {
    width: 18px;
    height: 18px;
    border: 2px solid var(--aims-border-color);
    border-top-color: var(--aims-text-primary);
    border-radius: 50%;
    animation: md-spin-b-27xr802n3b 0.7s linear infinite;
}

@keyframes md-spin-b-27xr802n3b {
    to { transform: rotate(360deg); }
}

/* ============================================================
   NOT-FOUND / ERROR STATE (AC-10 — read-only, G55/G85)
   ============================================================ */

.md-error[b-27xr802n3b] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 24px;
    text-align: center;
    gap: 14px;
    background: var(--aims-page-bg);
}

.md-error-icon[b-27xr802n3b] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #FEE2E2;
    color: #991B1B;
    font-family: 'Manrope', sans-serif;
    font-size: 26px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Dark-mode error icon contrast override (G59). */
[data-theme="dark"] .md-error-icon[b-27xr802n3b] {
    background: rgba(239, 68, 68, 0.18);
    color: #FCA5A5;
}

.md-error h3[b-27xr802n3b] {
    font-family: 'Manrope', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--aims-text-primary);
    margin: 0;
}

.md-error p[b-27xr802n3b] {
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    color: var(--aims-text-secondary);
    margin: 0;
    max-width: 420px;
}

/* ============================================================
   RESPONSIVE (2-col → 1-col)
   ============================================================ */

@media (max-width: 768px) {
    .md-grid[b-27xr802n3b] {
        grid-template-columns: 1fr;
    }

    /* 4-up placeholder tiles squeeze on phones — fall back to 2 columns. */
    .md-image-placeholder-grid[b-27xr802n3b] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* The app shell .aims-content owns the page inset at ALL breakpoints
       (VERIFY reconcile attempt 3 — same reasoning as the desktop rule). */
    .md-content[b-27xr802n3b] {
        padding: 0;
    }

    .md-card-body[b-27xr802n3b] {
        padding-left: 16px;
        padding-right: 16px;
    }
}
/* /Components/Pages/Maintenance/Corrective/AcknowledgeStep1.razor.rz.scp.css */
/* AcknowledgeStep1.razor.css — Corrective Maintenance Facility Acknowledge (Step 1) */
/* All layout and typography styles inherited from app.css (aims-wizard, aims-card, aims-field-row, etc.) */
/* /Components/Pages/Maintenance/Corrective/AcknowledgeStep2.razor.rz.scp.css */
/* AcknowledgeStep2.razor.css — Corrective Maintenance Facility Acknowledge (Step 2) */
/* Print styles are in wwwroot/app.css @media print block */
/* /Components/Pages/Maintenance/Corrective/ApplyStep1.razor.rz.scp.css */

/* /Components/Pages/Maintenance/Detail.razor.rz.scp.css */
/* scoped CSS for Pages/Maintenance/Detail.razor */
/* Wireframe reference: R04 MT-S02 Butiran (Detail View) - Light Mode (frame Bg7Y3)
   and R04 MT-S02 Butiran (Detail View) - Dark Mode (frame eNi2g). */
/* Color values sourced from the AiMS design tokens defined in wwwroot/app.css:
   :root = light, [data-theme="dark"] = dark. Using var(--aims-*) means this page
   renders correctly in BOTH modes without per-mode overrides (except badges). */

/* ============================================================
   PAGE WRAPPER
   ============================================================ */

.md-page[b-mk9l9kc1li] {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    background: var(--aims-page-bg);
}

/* ============================================================
   TOP BAR (breadcrumb + page title)
   ============================================================ */

.md-topbar[b-mk9l9kc1li] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 64px;
    padding: 0 24px;
    background: var(--aims-surface-bg);
    border-bottom: 1px solid var(--aims-border-color);
}

.md-topbar-left[b-mk9l9kc1li] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.md-breadcrumb[b-mk9l9kc1li] {
    font-family: 'Manrope', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: var(--aims-text-muted);
}

.md-pagetitle[b-mk9l9kc1li] {
    font-family: 'Manrope', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--aims-text-primary);
    margin: 0;
}

/* ============================================================
   CONTENT AREA
   ============================================================ */

.md-content[b-mk9l9kc1li] {
    flex: 1;
    background: var(--aims-page-bg);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow-y: auto;
}

/* ============================================================
   SECTION CARD (wireframe Card N)
   ============================================================ */

.md-card[b-mk9l9kc1li] {
    background: var(--aims-surface-bg);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--aims-card-shadow);
}

.md-card-header[b-mk9l9kc1li] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--aims-table-header-bg);
    padding: 14px 20px;
    border-bottom: 1px solid var(--aims-border-color);
}

.md-card-header h2[b-mk9l9kc1li] {
    font-family: 'Manrope', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--aims-text-primary);
    margin: 0;
}

.md-card-hint[b-mk9l9kc1li] {
    font-family: 'Manrope', sans-serif;
    font-size: 12px;
    color: var(--aims-text-muted);
    font-style: italic;
}

.md-card-body[b-mk9l9kc1li] {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ============================================================
   FIELD GRID (2-col default, 3-col variant)
   Each field = bordered label + value (wireframe Input node)
   ============================================================ */

.md-grid[b-mk9l9kc1li] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 24px;
}

.md-grid-2[b-mk9l9kc1li] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.md-grid-3[b-mk9l9kc1li] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.md-field[b-mk9l9kc1li] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.md-field-wide[b-mk9l9kc1li] {
    grid-column: 1 / -1;
}

.md-label[b-mk9l9kc1li] {
    font-family: 'Manrope', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--aims-text-primary);
}

/* Bordered value "Input" — mirrors wireframe Input frame (border + surface bg) */
.md-input[b-mk9l9kc1li] {
    display: flex;
    align-items: center;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid var(--aims-border-color);
    border-radius: 6px;
    background: var(--aims-surface-bg);
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    color: var(--aims-text-primary);
}

/* Empty-value styling (AC-13 — inline em-dash handled in markup; muted tone here) */
.md-input:empty[b-mk9l9kc1li]::before {
    content: "—";
    color: var(--aims-text-muted);
    font-style: italic;
}

.md-mono[b-mk9l9kc1li] {
    font-family: 'Courier New', monospace;
    font-weight: 600;
}

.md-num[b-mk9l9kc1li] {
    text-align: right;
    justify-content: flex-end;
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   SUB-GROUP / SECTION LABELS
   ============================================================ */

.md-group-label[b-mk9l9kc1li] {
    font-family: 'Manrope', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--aims-module-header);
    text-transform: uppercase;
    margin-top: 4px;
}

.md-section-sub[b-mk9l9kc1li] {
    font-family: 'Manrope', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--aims-module-header);
    text-transform: uppercase;
}

/* ============================================================
   BADGES (AC-14 color matrix; wireframe palette)
   Semantic colors are largely constant across themes, but on dark surfaces
   the light pastel backgrounds can wash out, so [data-theme="dark"] below
   brightens the text/border for contrast.
   ============================================================ */

.md-badge[b-mk9l9kc1li] {
    display: inline-flex;
    align-items: center;
    font-family: 'Manrope', sans-serif;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 9999px;
    line-height: 1.4;
    white-space: nowrap;
}

/* Approved / Completed / Selected → green */
.md-badge-approved[b-mk9l9kc1li],
.md-badge-completed[b-mk9l9kc1li] {
    background: #DCFCE7;
    color: #166534;
}

/* Rejected / Not Approved → red */
.md-badge-rejected[b-mk9l9kc1li] {
    background: #FEE2E2;
    color: #991B1B;
}

/* Pending / Draft → yellow */
.md-badge-pending[b-mk9l9kc1li] {
    background: #FEF3C7;
    color: #92400E;
}

/* In Progress → blue */
.md-badge-inprogress[b-mk9l9kc1li] {
    background: #DBEAFE;
    color: #1E40AF;
}

/* Muted / not-selected / unknown */
.md-badge-muted[b-mk9l9kc1li] {
    background: var(--aims-bg-secondary);
    color: var(--aims-text-secondary);
}

/* Dark-mode badge contrast overrides — brighten text + soften bg so the pastel
   pills remain legible against dark surfaces. */
[data-theme="dark"] .md-badge-approved[b-mk9l9kc1li],
[data-theme="dark"] .md-badge-completed[b-mk9l9kc1li] {
    background: rgba(34, 197, 94, 0.18);
    color: #86EFAC;
}

[data-theme="dark"] .md-badge-rejected[b-mk9l9kc1li] {
    background: rgba(239, 68, 68, 0.18);
    color: #FCA5A5;
}

[data-theme="dark"] .md-badge-pending[b-mk9l9kc1li] {
    background: rgba(245, 158, 11, 0.18);
    color: #FCD34D;
}

[data-theme="dark"] .md-badge-inprogress[b-mk9l9kc1li] {
    background: rgba(59, 130, 246, 0.18);
    color: #93C5FD;
}

/* ============================================================
   BOOLEAN INDICATOR
   ============================================================ */

.md-bool[b-mk9l9kc1li] {
    display: inline-flex;
    align-items: center;
    font-family: 'Manrope', sans-serif;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 6px;
}

.md-bool-yes[b-mk9l9kc1li] {
    background: #DCFCE7;
    color: #166534;
}

.md-bool-no[b-mk9l9kc1li] {
    background: #FEE2E2;
    color: #991B1B;
}

/* Dark-mode bool contrast overrides (same rationale as badges). */
[data-theme="dark"] .md-bool-yes[b-mk9l9kc1li] {
    background: rgba(34, 197, 94, 0.18);
    color: #86EFAC;
}

[data-theme="dark"] .md-bool-no[b-mk9l9kc1li] {
    background: rgba(239, 68, 68, 0.18);
    color: #FCA5A5;
}

/* ============================================================
   INNER TABLES (asset list / vendors / action plan / docs)
   ============================================================ */

.md-table-scroll[b-mk9l9kc1li] {
    overflow-x: auto;
}

.md-table[b-mk9l9kc1li] {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
}

.md-table thead th[b-mk9l9kc1li] {
    text-align: left;
    padding: 9px 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--aims-table-header-text);
    background: var(--aims-table-header-bg);
    border-bottom: 1px solid var(--aims-border-color);
    text-transform: uppercase;
    white-space: nowrap;
}

.md-table tbody td[b-mk9l9kc1li] {
    padding: 10px 12px;
    border-bottom: 1px solid var(--aims-border-color);
    color: var(--aims-text-primary);
    vertical-align: top;
}

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

.md-col-num[b-mk9l9kc1li] {
    width: 40px;
    text-align: center;
}

.md-col-value[b-mk9l9kc1li] {
    width: 200px;
}

/* Preventive-only columns — MUTED when IsPreventive==false (AC-5).
   The muted class is applied via :host context; here we always render the
   columns but desaturate them for corrective maintenance. */
.md-corrective .md-col-preventive[b-mk9l9kc1li] {
    color: var(--aims-text-muted);
    font-style: italic;
}

.md-col-preventive .md-asterisk[b-mk9l9kc1li] {
    color: var(--aims-text-muted);
    margin-left: 2px;
    font-size: 10px;
}

.md-muted-note[b-mk9l9kc1li] {
    margin: 8px 0 0 0;
    font-family: 'Manrope', sans-serif;
    font-size: 11px;
    color: var(--aims-text-muted);
    font-style: italic;
}

/* Vendor cell stacking (registration no + name) */
.md-vendor-cell[b-mk9l9kc1li] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.md-vendor-reg[b-mk9l9kc1li] {
    font-family: 'Manrope', sans-serif;
    font-size: 11px;
    color: var(--aims-text-muted);
}

.md-vendor-name[b-mk9l9kc1li] {
    font-weight: 600;
    color: var(--aims-text-primary);
}

/* ============================================================
   EVIDENCE THUMBNAILS (wireframe Thumb Row)
   ============================================================ */

.md-thumb-row[b-mk9l9kc1li] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.md-thumb[b-mk9l9kc1li] {
    width: 84px;
    height: 60px;
    border-radius: 6px;
    background: var(--aims-bg-secondary);
    border: 1px solid var(--aims-border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.md-thumb-label[b-mk9l9kc1li] {
    font-family: 'Manrope', sans-serif;
    font-size: 10px;
    font-weight: 600;
    color: var(--aims-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ============================================================
   EMPTY STATES (AC-13)
   ============================================================ */

.md-empty[b-mk9l9kc1li] {
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    color: var(--aims-text-muted);
    font-style: italic;
    margin: 4px 0 0 0;
}

.md-empty-inline[b-mk9l9kc1li] {
    color: var(--aims-text-muted);
    font-style: italic;
}

/* ============================================================
   BACK BAR (AC-15)
   ============================================================ */

.md-back-bar[b-mk9l9kc1li] {
    display: flex;
    justify-content: flex-start;
    padding: 4px 0 8px 0;
}

.md-btn[b-mk9l9kc1li] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 18px;
    border: 1px solid var(--aims-border-color);
    border-radius: 8px;
    background: var(--aims-surface-bg);
    color: var(--aims-text-secondary);
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.md-btn:hover[b-mk9l9kc1li] {
    background: var(--aims-bg-secondary);
    border-color: var(--aims-text-muted);
    color: var(--aims-text-primary);
}

.md-btn-back[b-mk9l9kc1li] {
    /* wireframe Back Button node — bordered, neutral */
}

/* ============================================================
   LOADING STATE
   ============================================================ */

.md-loading[b-mk9l9kc1li] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 80px 24px;
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    color: var(--aims-text-secondary);
    background: var(--aims-page-bg);
}

.md-spinner[b-mk9l9kc1li] {
    width: 18px;
    height: 18px;
    border: 2px solid var(--aims-border-color);
    border-top-color: var(--aims-text-primary);
    border-radius: 50%;
    animation: md-spin-b-mk9l9kc1li 0.7s linear infinite;
}

@keyframes md-spin-b-mk9l9kc1li {
    to { transform: rotate(360deg); }
}

/* ============================================================
   ERROR STATE
   ============================================================ */

.md-error[b-mk9l9kc1li] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 24px;
    text-align: center;
    gap: 14px;
    background: var(--aims-page-bg);
}

.md-error-icon[b-mk9l9kc1li] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #FEE2E2;
    color: #991B1B;
    font-family: 'Manrope', sans-serif;
    font-size: 26px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Dark-mode error icon contrast override. */
[data-theme="dark"] .md-error-icon[b-mk9l9kc1li] {
    background: rgba(239, 68, 68, 0.18);
    color: #FCA5A5;
}

.md-error h3[b-mk9l9kc1li] {
    font-family: 'Manrope', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--aims-text-primary);
    margin: 0;
}

.md-error p[b-mk9l9kc1li] {
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    color: var(--aims-text-secondary);
    margin: 0;
    max-width: 420px;
}

/* ============================================================
   RESPONSIVE (wireframe media queries — 4-col → 2-col → 1-col)
   ============================================================ */

@media (max-width: 1000px) {
    .md-grid-3[b-mk9l9kc1li] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .md-grid[b-mk9l9kc1li],
    .md-grid-2[b-mk9l9kc1li],
    .md-grid-3[b-mk9l9kc1li] {
        grid-template-columns: 1fr;
    }

    .md-content[b-mk9l9kc1li] {
        padding: 16px;
    }

    .md-topbar[b-mk9l9kc1li] {
        padding: 0 16px;
    }

    .md-card-header[b-mk9l9kc1li],
    .md-card-body[b-mk9l9kc1li] {
        padding-left: 16px;
        padding-right: 16px;
    }

    .md-table thead th[b-mk9l9kc1li],
    .md-table tbody td[b-mk9l9kc1li] {
        padding: 8px 10px;
    }
}
/* /Components/Pages/Maintenance/Preventive/AcknowledgeStep1.razor.rz.scp.css */
/* AcknowledgeStep1.razor.css — Preventive Maintenance Facility Acknowledge (Step 1) */
/* All layout and typography styles inherited from app.css (aims-wizard, aims-card, aims-field-row, etc.) */
/* /Components/Pages/Maintenance/Preventive/AcknowledgeStep2.razor.rz.scp.css */
/* AcknowledgeStep2.razor.css — Preventive Maintenance Facility Acknowledge (Step 2) */
/* Print styles are in wwwroot/app.css @media print block */
/* /Components/Pages/Maintenance/Preventive/ApplyStep1.razor.rz.scp.css */
/* ApplyStep1.razor.css — Preventive Maintenance Application Step 1 */
/* Follows aims-wizard design tokens: page #F7F8FA, cards #FFFFFF, Manrope font */

/* Override RadzenDropDown height to match input fields */
:deep(.rz-dropdown)[b-wk6stbc8hj] {
    height: 36px !important;
    font-family: Manrope, sans-serif !important;
    font-size: 13px !important;
}
/* /Components/Pages/Maintenance/Preventive/ApprovalStep1.razor.rz.scp.css */
/* ApprovalStep1.razor.css — Preventive Maintenance Approval (Steps 1-3) */
/* Follows aims-wizard design tokens: page #F7F8FA, cards #FFFFFF, Manrope font */

/* ── Decision card states (used in Step 3 via ::deep in parent pages) ── */
/* NOTE: These classes are applied via GetDecisionCardClass() in Step 3's
   inline <style> block because Blazor CSS isolation cannot pierce across
   sibling components. The definitions here serve as design documentation
   for the color tokens used. */

/* ── Responsive adjustments for approval stepper ── */
@media (max-width: 768px) {
    :deep(.aims-stepper-steps)[b-fi4xnlqv29] {
        gap: 8px;
    }
    :deep(.aims-step-circle)[b-fi4xnlqv29] {
        width: 32px; height: 32px; font-size: 12px;
    }
    :deep(.aims-step-label)[b-fi4xnlqv29] {
        font-size: 10px;
    }
}
/* /Components/Pages/SystemSettings/ActionProposal/ActionProposalForm.razor.rz.scp.css */
/* ============================================================================
   Add/Edit Form — Action Proposal (wireframe p1tR3S / l57EJy, light + dark)

   STORY-143 (AD-S14). Shared by Add.razor and Edit.razor through
   ActionProposalForm.razor.

   G139 — Blazor scoped CSS is PER-COMPONENT. The sibling VendorForm.razor.css
   defines .vendor-form-* and its selectors do NOT reach this component, so the
   rules below are re-expressed rather than inherited. Shipping the markup without
   this file would render the card unstyled (build stays 0/0 — silent).

   These styles are page-scoped ON PURPOSE and live here rather than in
   wwwroot/app.css: they re-skin the form to the wireframe's measured geometry
   (full-width card inside the 24px page padding, padding 40, gap 20, filled
   borderless 44px input, sentence-case 12/600 label, navy primary / filled-neutral
   secondary action row), which is the opposite of the shared aims-profile-*
   design system on every defining property. Per the project's CSS architecture,
   page-specific styling belongs in a scoped .razor.css — the global stylesheet
   keeps only shared component classes and design tokens.

   G143 — the VALUES below are re-derived from the AD-S14 frames, NOT copied from
   VendorForm.razor.css. The structural differences matter:
     (1) this form has TWO fields, not ten — the frame's "Row 1" holds a SINGLE
         full-width field, so there is no two-column pairing and no textarea;
     (2) the frame draws NO tooltip glyph, so the field has no right-side adornment
         and the input needs no right padding;
     (3) the frames are 1440px desktop with everything full-width, so the sibling's
         narrow-viewport stacking media query has no counterpart here.
   The frame also draws the label with the asterisk INSIDE the label text
   ("Action Proposal *") — it renders as plain text, matching the frame.

   The Status toggle is the one Radzen component in this form. Its rules stay in
   app.css alongside allocation-switch / project-switch / vendor-switch (the
   established convention for switch styling), because CSS isolation cannot reach
   Radzen's internal DOM with plain selectors — G29.

   Colours route through --aims-* tokens or pinned hexes with explicit
   [data-theme="dark"] counterparts (G59). Dark values are the dark frame's own
   (#1E293B card / #0F172A input / #F1F5F9 label / #334155 cancel / #4DD9C0 save).
   ============================================================================ */

.action-proposal-form-card[b-6ex7bqyzhq] {
    width: 100%;
    margin: 0;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: var(--aims-surface-bg);
    /* Frame p1tR3S/l57EJy: the card is a rounded surface on the page background. */
    border: none;
    border-radius: 12px;
}

.action-proposal-form-fields[b-6ex7bqyzhq] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Frame "Row 1" — a full-width row (gap 20) holding one field. */
.action-proposal-form-row[b-6ex7bqyzhq] {
    display: flex;
    gap: 20px;
}

.action-proposal-form-row .action-proposal-form-field[b-6ex7bqyzhq] {
    /* G87 — flex-basis 0 keeps the field content-independent; `auto` would let a
       long value widen it away from the frame's fill_container geometry. */
    flex: 1 1 0;
    min-width: 0;
}

.action-proposal-form-field[b-6ex7bqyzhq] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.action-proposal-form-label[b-6ex7bqyzhq] {
    font-size: 12px;
    font-weight: 600;
    line-height: 20px;
    color: var(--aims-text-primary);
}

.action-proposal-form-input[b-6ex7bqyzhq] {
    width: 100%;
    height: 44px;
    /* Transparent border keeps the 44px box stable when the error state paints it. */
    border: 1.5px solid transparent;
    border-radius: 8px;
    padding: 0 14px;
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    color: var(--aims-text-primary);
    background: var(--aims-page-bg);
    outline: none;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.action-proposal-form-input[b-6ex7bqyzhq]::placeholder {
    color: #A0AEC0;
}

/* The field glyph carries NO inline colour: it inherits from this class so the
   theme pair can be expressed. Frame p1tR3S draws it #A0AEC0 and the dark frame
   aTc2T draws it #64748B — the same pair the placeholder uses (G59: an inline
   Style could not carry a dark counterpart). */
.action-proposal-form-icon[b-6ex7bqyzhq] {
    color: #A0AEC0;
}

[data-theme="dark"] .action-proposal-form-icon[b-6ex7bqyzhq] {
    color: #64748B;
}

[data-theme="dark"] .action-proposal-form-input[b-6ex7bqyzhq]::placeholder {
    color: #64748B;
}

.action-proposal-form-input:focus[b-6ex7bqyzhq] {
    box-shadow: 0 0 0 3px rgba(77, 217, 192, 0.15);
}

.action-proposal-form-input.has-icon-left[b-6ex7bqyzhq] {
    padding-left: 44px;
}

/* Dark theme: a PRE-EXISTING global rule — app.css [data-theme="dark"]
   input[type="text"]/textarea/select { border-color: var(--aims-border-color) !important }
   (STORY-091) — pins a visible #334155 border at specificity (0,2,1), which
   outranks the transparent rest border above and made the dark form show
   outlined inputs where the frames (aTc2T / F5ZHr) draw them borderless.
   Same technique as G47: match the global rule's !important with a HIGHER
   specificity (0,3,1) so the frame's treatment wins in dark mode too.
   Placed BEFORE the error rule below, which carries equal specificity — the
   later error rule therefore still wins when a field is invalid. */
[data-theme="dark"] input.action-proposal-form-input[b-6ex7bqyzhq],
[data-theme="dark"] input.action-proposal-form-input.has-icon-left[b-6ex7bqyzhq] {
    border-color: transparent !important;
}

/* G47 — the invalid ring must survive BOTH themes (explicit dark counterpart).
   Without the [data-theme="dark"] selector the app's dark input border rule
   (specificity 0,2,1, !important) silently wins and the field looks valid. */
input.action-proposal-form-input.aims-input-error[b-6ex7bqyzhq],
[data-theme="dark"] input.action-proposal-form-input.aims-input-error[b-6ex7bqyzhq] {
    border-color: #EF4444 !important;
}

.action-proposal-form-actions[b-6ex7bqyzhq] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    /* Frame: Button Row padding [8, 0, 0, 0]. */
    padding-top: 8px;
}

/* Wireframe: navy #0D1B2A primary, filled #F0F1F3 secondary — both 40px tall,
   padding 0 20, radius 8. AimsButton's buttons live in another component's
   markup, so these rules use ::deep to cross the CSS-isolation boundary
   explicitly (the same technique the sibling forms use). */
.action-proposal-form-actions[b-6ex7bqyzhq]  .aims-btn-primary {
    height: 40px;
    background-color: var(--aims-navy);
    color: #FFFFFF;
    font-weight: 600;
    box-shadow: none;
}

.action-proposal-form-actions[b-6ex7bqyzhq]  .aims-btn-primary:hover {
    background-color: var(--aims-navy-light);
}

.action-proposal-form-actions[b-6ex7bqyzhq]  .aims-btn-secondary {
    height: 40px;
    background-color: var(--aims-icon-btn-bg);
    border: none;
    color: var(--aims-text-primary);
    font-weight: 600;
}

.action-proposal-form-actions[b-6ex7bqyzhq]  .aims-btn-secondary:hover {
    background-color: var(--aims-icon-btn-hover);
}

/* Dark-theme counterparts (G59) — mirror the dark wireframe frames aTc2T / F5ZHr. */
[data-theme="dark"] .action-proposal-form-actions[b-6ex7bqyzhq]  .aims-btn-primary {
    background-color: var(--aims-teal);
    color: var(--aims-navy);
}

[data-theme="dark"] .action-proposal-form-actions[b-6ex7bqyzhq]  .aims-btn-primary:hover {
    background-color: #3FC4AE;
}

[data-theme="dark"] .action-proposal-form-actions[b-6ex7bqyzhq]  .aims-btn-secondary {
    background-color: #334155;
    color: #F1F5F9;
}

[data-theme="dark"] .action-proposal-form-actions[b-6ex7bqyzhq]  .aims-btn-secondary:hover {
    background-color: #3E4C63;
}
/* /Components/Pages/SystemSettings/ActionProposal/List.razor.rz.scp.css */
/* ============================================================================
   List page — Action Proposal (wireframe V4HwM / VWcej, light + dark)

   STORY-143 (AD-S14). Page-scoped styling for the Action Proposal register.

   G139 — Blazor scoped CSS is PER-COMPONENT: this file styles THIS page only.
   Vendor/List.razor.css defining .vendor-search-icon proves nothing here; the
   rules below are re-expressed for this page's own class names.

   Why these rules live here rather than in wwwroot/app.css: they are the
   toolbar glyph colours, a badge nowrap guard and the AC2 empty state — all
   page-specific. Per the project's CSS architecture the global stylesheet keeps
   only shared component classes and design tokens. The shared aims-badge-* pair
   is deliberately NOT touched (G103).

   G143 — the VALUES are re-derived from the AD-S14 frames, NOT copied from the
   Vendor sibling: the toolbar has ONE search glyph and ONE clear glyph and no
   extra adornments, and the grid has no long-token column, so the sibling's
   .vendor-email-cell overflow rule has NO counterpart here.

   G29 — RadzenDataGrid's column widths are set on RadzenDataGridColumn
   (Width="..."), never here; the rules below only reach elements this page's own
   templates render (the cell spans) plus AimsButton's root, which would need
   ::deep if styled (it is not — G156 keeps the export pair byte-identical to the
   siblings, which style it globally).

   G59 — every colour carries a [data-theme="dark"] counterpart taken from the
   dark frame VWcej: search glyph #A0AEC0 → #64748B, the clear × is #64748B in
   both, empty-state copy #64748B → #94A3B8.
   ============================================================================ */

/* --- Toolbar glyphs ----------------------------------------------------------
   The search and clear icons carry NO inline colour: they inherit from these
   classes so the theme pair can be expressed. Frame V4HwM — search icon #A0AEC0;
   the clear × is #64748B in both themes (G59). */
.action-proposal-search-icon[b-i689cy59t3] {
    color: #A0AEC0;
}

[data-theme="dark"] .action-proposal-search-icon[b-i689cy59t3] {
    color: #64748B;
}

.action-proposal-clear-icon[b-i689cy59t3] {
    color: #64748B;
}

[data-theme="dark"] .action-proposal-clear-icon[b-i689cy59t3] {
    color: #64748B;
}

/* --- G99: keep the Status badge on one line -------------------------------
   The badge reuses the shared aims-badge-active / -inactive pair (never
   recoloured — G103) but must opt OUT of any cell-level wrapping. Frame V4HwM
   draws the badge as a 90x24 r12 chip with the label centred. */
.action-proposal-status-badge[b-i689cy59t3] {
    white-space: nowrap;
    overflow-wrap: normal;
}

/* --- AC2 empty state ------------------------------------------------------- */
.action-proposal-empty-state[b-i689cy59t3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 28px 20px;
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    color: #64748B;
}

.action-proposal-empty-state p[b-i689cy59t3] {
    margin: 0;
}

[data-theme="dark"] .action-proposal-empty-state[b-i689cy59t3] {
    color: #94A3B8;
}
/* /Components/Pages/SystemSettings/Allocation/AllocationForm.razor.rz.scp.css */
/* ============================================================================
   Add/Edit Form — Allocation Source (wireframe AHZ1n / Uv7X6, light + dark)

   STORY-077. Shared by Add.razor and Edit.razor through AllocationForm.razor.

   These styles are page-scoped ON PURPOSE and live here rather than in
   wwwroot/app.css: they re-skin the form to the wireframe's measured geometry
   (centred 780px card, padding 40, filled borderless 44px inputs, sentence-case
   12/600 labels, navy primary / filled-neutral secondary action row), which is
   the opposite of the shared aims-profile-* design system on every defining
   property. Per the project's CSS architecture, page-specific styling belongs
   in a scoped .razor.css — the global stylesheet keeps only shared component
   classes and design tokens.

   The sibling System Settings forms (Facility Management Code / Financial Code
   / Asset Type) keep the aims-profile-* design system untouched; the divergence
   is recorded as DV-5 in the STORY-077 plan.

   The Status toggle is the one Radzen component in this form. Its rules stay in
   app.css alongside finance-switch / facility-switch / asset-type-switch (the
   established convention for switch styling), because CSS isolation cannot
   reach Radzen's internal DOM with plain selectors — G29.

   Colours route through --aims-* tokens or pinned hexes with explicit
   [data-theme="dark"] counterparts (G59).
   ============================================================================ */

.allocation-form-card[b-4kqwi7bxtx] {
    width: 100%;
    max-width: 780px;
    margin: 12px auto 0;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: var(--aims-surface-bg);
    /* Frame Uv7X6/AHZ1n: the card sits borderless on the page background. */
    border: none;
    border-radius: 12px;
}

.allocation-form-fields[b-4kqwi7bxtx] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.allocation-form-field[b-4kqwi7bxtx] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.allocation-form-label[b-4kqwi7bxtx] {
    font-size: 12px;
    font-weight: 600;
    line-height: 20px;
    color: var(--aims-text-primary);
}

/* Required marker inherits the label colour — the frame does not draw a red asterisk. */
.allocation-form-required[b-4kqwi7bxtx] {
    color: inherit;
}

.allocation-form-input[b-4kqwi7bxtx] {
    width: 100%;
    height: 44px;
    /* Transparent border keeps the 44px box stable when the error state paints it. */
    border: 1.5px solid transparent;
    border-radius: 8px;
    padding: 0 14px;
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    color: var(--aims-text-primary);
    background: var(--aims-page-bg);
    outline: none;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.allocation-form-input[b-4kqwi7bxtx]::placeholder {
    color: #A0AEC0;
}

.allocation-form-input:focus[b-4kqwi7bxtx] {
    box-shadow: 0 0 0 3px rgba(77, 217, 192, 0.15);
}

.allocation-form-input.has-icon-left[b-4kqwi7bxtx] {
    padding-left: 44px;
}

/* Dark theme: a PRE-EXISTING global rule — app.css [data-theme="dark"]
   input[type="text"] { border-color: var(--aims-border-color) !important }
   (STORY-091) — pins a visible #334155 border at specificity (0,2,1), which
   outranks the transparent rest border above and made the dark form show
   outlined inputs where the frame (a52JKu / FpHqE) draws them borderless.
   Same technique as G47: match the global rule's !important with a HIGHER
   specificity (0,3,1) so the frame's treatment wins in dark mode too.
   Placed BEFORE the error rule below, which carries equal specificity — the
   later error rule therefore still wins when a field is invalid. */
[data-theme="dark"] input.allocation-form-input[b-4kqwi7bxtx],
[data-theme="dark"] input.allocation-form-input.has-icon-left[b-4kqwi7bxtx] {
    border-color: transparent !important;
}

/* G47 — the invalid ring must survive both themes (explicit dark counterpart). */
input.allocation-form-input.aims-input-error[b-4kqwi7bxtx],
[data-theme="dark"] input.allocation-form-input.aims-input-error[b-4kqwi7bxtx] {
    border-color: #EF4444 !important;
}

.allocation-form-actions[b-4kqwi7bxtx] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* Wireframe: navy #0D1B2A primary, filled #F0F1F3 secondary — both 40px tall.
   AimsButton's buttons live in another component's markup, so these rules use
   ::deep to cross the CSS-isolation boundary explicitly (the same technique
   R05FinanceDashboard.razor.css / ApplyStep1.razor.css use for child DOM). */
.allocation-form-actions[b-4kqwi7bxtx]  .aims-btn-primary {
    height: 40px;
    background-color: var(--aims-navy);
    color: #FFFFFF;
    font-weight: 600;
    box-shadow: none;
}

.allocation-form-actions[b-4kqwi7bxtx]  .aims-btn-primary:hover {
    background-color: var(--aims-navy-light);
}

.allocation-form-actions[b-4kqwi7bxtx]  .aims-btn-secondary {
    height: 40px;
    background-color: var(--aims-icon-btn-bg);
    border: none;
    color: var(--aims-text-primary);
    font-weight: 600;
}

.allocation-form-actions[b-4kqwi7bxtx]  .aims-btn-secondary:hover {
    background-color: var(--aims-icon-btn-hover);
}

/* Dark-theme counterparts (G59) — mirror the dark wireframe frames a52JKu / FpHqE. */
[data-theme="dark"] .allocation-form-actions[b-4kqwi7bxtx]  .aims-btn-primary {
    background-color: var(--aims-teal);
    color: var(--aims-navy);
}

[data-theme="dark"] .allocation-form-actions[b-4kqwi7bxtx]  .aims-btn-primary:hover {
    background-color: #3FC4AE;
}

[data-theme="dark"] .allocation-form-actions[b-4kqwi7bxtx]  .aims-btn-secondary {
    background-color: #334155;
    color: #F1F5F9;
}

[data-theme="dark"] .allocation-form-actions[b-4kqwi7bxtx]  .aims-btn-secondary:hover {
    background-color: #3E4C63;
}
/* /Components/Pages/SystemSettings/AssetCategory/AssetCategoryForm.razor.rz.scp.css */
/* ============================================================================
   Add/Edit Form — Asset Category (wireframe OuchZ / HJt8W, light + dark)

   STORY-146 (AD-S16). Shared by Add.razor and Edit.razor through
   AssetCategoryForm.razor.

   G139 — Blazor scoped CSS is PER-COMPONENT. The sibling ActionProposalForm.razor.css
   defines .action-proposal-form-* and its selectors do NOT reach this component, so
   the rules below are re-expressed rather than inherited. Shipping the markup without
   this file would render the card unstyled (build stays 0/0 — silent).

   These styles are page-scoped ON PURPOSE and live here rather than in
   wwwroot/app.css: they re-skin the form to the wireframe's measured geometry
   (full-width card inside the 24px page padding, padding 40, gap 20, filled
   borderless 44px input, sentence-case 12/600 label, navy primary / filled-neutral
   secondary action row), which is the opposite of the shared aims-profile-* design
   system on every defining property. Per the project's CSS architecture,
   page-specific styling belongs in a scoped .razor.css — the global stylesheet
   keeps only shared component classes and design tokens.

   G143 — the VALUES below are re-derived from the AD-S16 frames, NOT copied from
   ActionProposalForm.razor.css. The structural differences matter:
     (1) this form has THREE fields, not two — the frame stacks TWO full-width text
         fields (Category Code as a direct child of the card, Category Name inside
         the frame's "Row 1"), each in its own row wrapper, plus the Status field;
     (2) the frame draws NO tooltip glyph, so the fields have no right-side adornment
         and the inputs need no right padding;
     (3) the frames are 1440px desktop with everything full-width, so the sibling's
         narrow-viewport stacking media query has no counterpart here.
   The frame also draws each label with the asterisk INSIDE the label text
   ("Category Code *") — it renders as plain text, matching the frame.

   The Status toggle is the one Radzen component in this form. Its rules stay in
   app.css alongside allocation-switch / project-switch / vendor-switch /
   action-proposal-switch (the established convention for switch styling), because
   CSS isolation cannot reach Radzen's internal DOM with plain selectors — G29.

   Colours route through --aims-* tokens or pinned hexes with explicit
   [data-theme="dark"] counterparts (G59). Dark values are the dark frames' own
   (NvlTj / UUABf: #1E293B card / #0F172A input / #F1F5F9 label / #334155 cancel /
   #4DD9C0 save), and the field glyph pair is #A0AEC0 → #64748B.
   ============================================================================ */

.asset-category-form-card[b-l3eopegk9e] {
    width: 100%;
    margin: 0;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: var(--aims-surface-bg);
    /* Frame OuchZ/HJt8W: the card is a rounded surface on the page background. */
    border: none;
    border-radius: 12px;
}

.asset-category-form-fields[b-l3eopegk9e] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Frames: "Category Code Field" is a card-level child and "Row 1" holds the
   Category Name field — both render full width (gap 20). */
.asset-category-form-row[b-l3eopegk9e] {
    display: flex;
    gap: 20px;
}

.asset-category-form-row .asset-category-form-field[b-l3eopegk9e] {
    /* G87 — flex-basis 0 keeps the field content-independent; `auto` would let a
       long value widen it away from the frame's fill_container geometry. */
    flex: 1 1 0;
    min-width: 0;
}

.asset-category-form-field[b-l3eopegk9e] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.asset-category-form-label[b-l3eopegk9e] {
    font-size: 12px;
    font-weight: 600;
    line-height: 20px;
    color: var(--aims-text-primary);
}

.asset-category-form-input[b-l3eopegk9e] {
    width: 100%;
    height: 44px;
    /* Transparent border keeps the 44px box stable when the error state paints it. */
    border: 1.5px solid transparent;
    border-radius: 8px;
    padding: 0 14px;
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    color: var(--aims-text-primary);
    background: var(--aims-page-bg);
    outline: none;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.asset-category-form-input[b-l3eopegk9e]::placeholder {
    color: #A0AEC0;
}

/* The field glyph carries NO inline colour: it inherits from this class so the
   theme pair can be expressed. Frame OuchZ draws both glyphs #A0AEC0 ('hash' on
   Category Code, 'tag' on Category Name) and the dark frame NvlTj draws them
   #64748B — the same pair the placeholder uses (G59: an inline Style could not
   carry a dark counterpart). */
.asset-category-form-icon[b-l3eopegk9e] {
    color: #A0AEC0;
}

[data-theme="dark"] .asset-category-form-icon[b-l3eopegk9e] {
    color: #64748B;
}

[data-theme="dark"] .asset-category-form-input[b-l3eopegk9e]::placeholder {
    color: #64748B;
}

.asset-category-form-input:focus[b-l3eopegk9e] {
    box-shadow: 0 0 0 3px rgba(77, 217, 192, 0.15);
}

.asset-category-form-input.has-icon-left[b-l3eopegk9e] {
    padding-left: 44px;
}

/* Dark theme: a PRE-EXISTING global rule — app.css [data-theme="dark"]
   input[type="text"]/textarea/select { border-color: var(--aims-border-color) !important }
   (STORY-091) — pins a visible #334155 border at specificity (0,2,1), which
   outranks the transparent rest border above and would make the dark form show
   outlined inputs where the frames (NvlTj / UUABf) draw them borderless.
   Same technique as G47: match the global rule's !important with a HIGHER
   specificity (0,3,1) so the frame's treatment wins in dark mode too.
   Placed BEFORE the error rule below, which carries equal specificity — the
   later error rule therefore still wins when a field is invalid. */
[data-theme="dark"] input.asset-category-form-input[b-l3eopegk9e],
[data-theme="dark"] input.asset-category-form-input.has-icon-left[b-l3eopegk9e] {
    border-color: transparent !important;
}

/* G47 — the invalid ring must survive BOTH themes (explicit dark counterpart).
   Without the [data-theme="dark"] selector the app's dark input border rule
   (specificity 0,2,1, !important) silently wins and the field looks valid. */
input.asset-category-form-input.aims-input-error[b-l3eopegk9e],
[data-theme="dark"] input.asset-category-form-input.aims-input-error[b-l3eopegk9e] {
    border-color: #EF4444 !important;
}

.asset-category-form-actions[b-l3eopegk9e] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    /* Frame: Button Row padding [8, 0, 0, 0]. */
    padding-top: 8px;
}

/* Wireframe: navy #0D1B2A primary, filled #F0F1F3 secondary — both 40px tall,
   padding 0 20, radius 8. AimsButton's buttons live in another component's
   markup, so these rules use ::deep to cross the CSS-isolation boundary
   explicitly (the same technique the sibling forms use). */
.asset-category-form-actions[b-l3eopegk9e]  .aims-btn-primary {
    height: 40px;
    background-color: var(--aims-navy);
    color: #FFFFFF;
    font-weight: 600;
    box-shadow: none;
}

.asset-category-form-actions[b-l3eopegk9e]  .aims-btn-primary:hover {
    background-color: var(--aims-navy-light);
}

.asset-category-form-actions[b-l3eopegk9e]  .aims-btn-secondary {
    height: 40px;
    background-color: var(--aims-icon-btn-bg);
    border: none;
    color: var(--aims-text-primary);
    font-weight: 600;
}

.asset-category-form-actions[b-l3eopegk9e]  .aims-btn-secondary:hover {
    background-color: var(--aims-icon-btn-hover);
}

/* Dark-theme counterparts (G59) — mirror the dark wireframe frames NvlTj / UUABf. */
[data-theme="dark"] .asset-category-form-actions[b-l3eopegk9e]  .aims-btn-primary {
    background-color: var(--aims-teal);
    color: var(--aims-navy);
}

[data-theme="dark"] .asset-category-form-actions[b-l3eopegk9e]  .aims-btn-primary:hover {
    background-color: #3FC4AE;
}

[data-theme="dark"] .asset-category-form-actions[b-l3eopegk9e]  .aims-btn-secondary {
    background-color: #334155;
    color: #F1F5F9;
}

[data-theme="dark"] .asset-category-form-actions[b-l3eopegk9e]  .aims-btn-secondary:hover {
    background-color: #3E4C63;
}
/* /Components/Pages/SystemSettings/AssetCategory/List.razor.rz.scp.css */
/* ============================================================================
   List page — Asset Category (wireframe ZPwfa / U29a1, light + dark)

   STORY-146 (AD-S16). Page-scoped styling for the Asset Category register.

   G139 — Blazor scoped CSS is PER-COMPONENT: this file styles THIS page only.
   ActionProposal/List.razor.css defining .action-proposal-search-icon proves
   nothing here; the rules below are re-expressed for this page's own class names.

   Why these rules live here rather than in wwwroot/app.css: they are the
   toolbar glyph colours, a badge nowrap guard and the AC2 empty state — all
   page-specific. Per the project's CSS architecture the global stylesheet keeps
   only shared component classes and design tokens. The shared aims-badge-* pair
   is deliberately NOT touched (G103).

   G143 — the VALUES are re-derived from the AD-S16 frames, NOT copied from the
   ActionProposal sibling: the toolbar has ONE search glyph and ONE clear glyph and
   no extra adornments, the search glyph is 16x16 in the frame (rendered at 20px like
   the siblings), and the grid has no long-token column, so the sibling's overflow
   rule for a long code cell has NO counterpart here. The dark frame U29a1 carries
   the same glyph pair as the sibling's dark frame (#64748B), so the pinned colours
   coincide — they are still re-read from THIS frame pair.

   G29 — RadzenDataGrid's column widths are set on RadzenDataGridColumn
   (Width="..."), never here; the rules below only reach elements this page's own
   templates render (the cell spans) plus AimsButton's root, which would need
   ::deep if styled (it is not — G156 keeps the export pair byte-identical to the
   siblings, which style it globally).

   G59 — every colour carries a [data-theme="dark"] counterpart taken from the
   dark frame U29a1: search glyph #A0AEC0 → #64748B, the clear × is #64748B in
   both, empty-state copy #64748B → #94A3B8.
   ============================================================================ */

/* --- Toolbar glyphs ----------------------------------------------------------
   The search and clear icons carry NO inline colour: they inherit from these
   classes so the theme pair can be expressed. Frame ZPwfa — search icon #A0AEC0;
   the clear × is #64748B in both themes (G59). */
.asset-category-search-icon[b-b9yw6vt21n] {
    color: #A0AEC0;
}

[data-theme="dark"] .asset-category-search-icon[b-b9yw6vt21n] {
    color: #64748B;
}

.asset-category-clear-icon[b-b9yw6vt21n] {
    color: #64748B;
}

[data-theme="dark"] .asset-category-clear-icon[b-b9yw6vt21n] {
    color: #64748B;
}

/* --- G99: keep the Status badge on one line -------------------------------
   The badge reuses the shared aims-badge-active / -inactive pair (never
   recoloured — G103) but must opt OUT of any cell-level wrapping. Frame ZPwfa
   draws the badge as a 90x24 r12 chip with the label centred. */
.asset-category-status-badge[b-b9yw6vt21n] {
    white-space: nowrap;
    overflow-wrap: normal;
}

/* --- AC2 empty state ------------------------------------------------------- */
.asset-category-empty-state[b-b9yw6vt21n] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 28px 20px;
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    color: #64748B;
}

.asset-category-empty-state p[b-b9yw6vt21n] {
    margin: 0;
}

[data-theme="dark"] .asset-category-empty-state[b-b9yw6vt21n] {
    color: #94A3B8;
}
/* /Components/Pages/SystemSettings/Project/ProjectForm.razor.rz.scp.css */
/* ============================================================================
   Add/Edit Form — Project (wireframe yUSFp / MxHK5, light + dark)

   STORY-090 (AD-S15). Shared by Add.razor and Edit.razor through ProjectForm.razor.

   G139 — Blazor scoped CSS is PER-COMPONENT. The sibling AllocationForm.razor.css
   defines .allocation-form-* and its selectors do NOT reach this component, so the
   rules below are duplicated-and-renamed rather than inherited. Shipping the markup
   without this file would render the card unstyled (build stays 0/0 — silent).

   These styles are page-scoped ON PURPOSE and live here rather than in
   wwwroot/app.css: they re-skin the form to the wireframe's measured geometry
   (full-width card inside the 24px page padding, padding 40, filled borderless
   44px inputs, sentence-case 12/600 labels, navy primary / filled-neutral
   secondary action row), which is the opposite of the shared aims-profile-*
   design system on every defining property. Per the project's CSS architecture,
   page-specific styling belongs in a scoped .razor.css — the global stylesheet
   keeps only shared component classes and design tokens.

   Frame delta vs the Allocation sibling (DV-5 family, recorded in the plan and
   the ui-spec): AD-S15's Content frame carries padding 24 (not the Allocation
   frames' 60/200), so the card is FULL WIDTH here — there is no 780px centred
   cap. Everything else (gap 20, padding 40, radius 12, 44px inputs, 40px action
   row) is identical between the two wireframes.

   The Status toggle is the one Radzen component in this form. Its rules stay in
   app.css alongside finance-switch / asset-type-switch / allocation-switch /
   project-switch (the established convention for switch styling), because CSS
   isolation cannot reach Radzen's internal DOM with plain selectors — G29.

   Colours route through --aims-* tokens or pinned hexes with explicit
   [data-theme="dark"] counterparts (G59).
   ============================================================================ */

.project-form-card[b-h4e0e1kabx] {
    width: 100%;
    margin: 0;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: var(--aims-surface-bg);
    /* Frame yUSFp/MxHK5: the card is a rounded surface on the page background. */
    border: none;
    border-radius: 12px;
}

.project-form-fields[b-h4e0e1kabx] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.project-form-field[b-h4e0e1kabx] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.project-form-label[b-h4e0e1kabx] {
    font-size: 12px;
    font-weight: 600;
    line-height: 20px;
    color: var(--aims-text-primary);
}

/* Required marker inherits the label colour — the frame does not draw a red asterisk. */
.project-form-required[b-h4e0e1kabx] {
    color: inherit;
}

.project-form-input[b-h4e0e1kabx] {
    width: 100%;
    height: 44px;
    /* Transparent border keeps the 44px box stable when the error state paints it. */
    border: 1.5px solid transparent;
    border-radius: 8px;
    padding: 0 14px;
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    color: var(--aims-text-primary);
    background: var(--aims-page-bg);
    outline: none;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.project-form-input[b-h4e0e1kabx]::placeholder {
    color: #A0AEC0;
}

.project-form-input:focus[b-h4e0e1kabx] {
    box-shadow: 0 0 0 3px rgba(77, 217, 192, 0.15);
}

.project-form-input.has-icon-left[b-h4e0e1kabx] {
    padding-left: 44px;
}

/* Dark theme: a PRE-EXISTING global rule — app.css [data-theme="dark"]
   input[type="text"] { border-color: var(--aims-border-color) !important }
   (STORY-091) — pins a visible #334155 border at specificity (0,2,1), which
   outranks the transparent rest border above and made the dark form show
   outlined inputs where the frames (VpHw4 / BCrxG) draw them borderless.
   Same technique as G47: match the global rule's !important with a HIGHER
   specificity (0,3,1) so the frame's treatment wins in dark mode too.
   Placed BEFORE the error rule below, which carries equal specificity — the
   later error rule therefore still wins when a field is invalid. */
[data-theme="dark"] input.project-form-input[b-h4e0e1kabx],
[data-theme="dark"] input.project-form-input.has-icon-left[b-h4e0e1kabx] {
    border-color: transparent !important;
}

/* G47 — the invalid ring must survive BOTH themes (explicit dark counterpart).
   Without the [data-theme="dark"] selector the app's dark input border rule
   (specificity 0,2,1, !important) silently wins and the field looks valid. */
input.project-form-input.aims-input-error[b-h4e0e1kabx],
[data-theme="dark"] input.project-form-input.aims-input-error[b-h4e0e1kabx] {
    border-color: #EF4444 !important;
}

.project-form-actions[b-h4e0e1kabx] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    /* Frame: Button Row padding [8, 0, 0, 0]. */
    padding-top: 8px;
}

/* Wireframe: navy #0D1B2A primary, filled #F0F1F3 secondary — both 40px tall,
   padding 0 20, radius 8. AimsButton's buttons live in another component's
   markup, so these rules use ::deep to cross the CSS-isolation boundary
   explicitly (the same technique the sibling forms and R05FinanceDashboard use). */
.project-form-actions[b-h4e0e1kabx]  .aims-btn-primary {
    height: 40px;
    background-color: var(--aims-navy);
    color: #FFFFFF;
    font-weight: 600;
    box-shadow: none;
}

.project-form-actions[b-h4e0e1kabx]  .aims-btn-primary:hover {
    background-color: var(--aims-navy-light);
}

.project-form-actions[b-h4e0e1kabx]  .aims-btn-secondary {
    height: 40px;
    background-color: var(--aims-icon-btn-bg);
    border: none;
    color: var(--aims-text-primary);
    font-weight: 600;
}

.project-form-actions[b-h4e0e1kabx]  .aims-btn-secondary:hover {
    background-color: var(--aims-icon-btn-hover);
}

/* Dark-theme counterparts (G59) — mirror the dark wireframe frames VpHw4 / BCrxG. */
[data-theme="dark"] .project-form-actions[b-h4e0e1kabx]  .aims-btn-primary {
    background-color: var(--aims-teal);
    color: var(--aims-navy);
}

[data-theme="dark"] .project-form-actions[b-h4e0e1kabx]  .aims-btn-primary:hover {
    background-color: #3FC4AE;
}

[data-theme="dark"] .project-form-actions[b-h4e0e1kabx]  .aims-btn-secondary {
    background-color: #334155;
    color: #F1F5F9;
}

[data-theme="dark"] .project-form-actions[b-h4e0e1kabx]  .aims-btn-secondary:hover {
    background-color: #3E4C63;
}
/* /Components/Pages/SystemSettings/SatelliteLocation/List.razor.rz.scp.css */
/* ============================================================================
   List page — Satellite Location (wireframe NkA6J / Q9K6G, light + dark)

   STORY-148 (AD-S13). Page-scoped styling for the Satellite Location register.

   G139 — Blazor scoped CSS is PER-COMPONENT: AssetCategory/List.razor.css defining
   .asset-category-search-icon proves nothing here; the rules below are re-expressed
   for THIS page's own class names. Shipping the markup without this file would
   render the toolbar glyphs and the empty state unstyled while the build stays 0/0
   (silent).

   Why these rules live here rather than in wwwroot/app.css: they are the toolbar
   glyph colours, a badge nowrap guard and the AC2 empty state — all page-specific.
   Per the project's CSS architecture the global stylesheet keeps only shared
   component classes and design tokens. The shared aims-badge-* pair is deliberately
   NOT touched (G103), and the two classes this story adds globally
   (.satellite-location-switch, .satellite-location-row-inactive) are already in
   app.css with their dark counterparts (G59) because CSS isolation cannot reach
   Radzen's internal DOM nor the <td> of a column template.

   G29 — RadzenDataGrid's column widths are set on RadzenDataGridColumn
   (Width="..."), never here; the rules below only reach elements this page's own
   templates render (the cell spans) plus AimsButton's root, which would need ::deep
   if styled (it is not — G156 keeps the export pair byte-identical to the siblings,
   which style it globally).

   G59 — every colour carries a [data-theme="dark"] counterpart taken from the dark
   frame Q9K6G: search glyph #A0AEC0 → #64748B, the clear × is #64748B in both,
   empty-state copy #64748B → #94A3B8.
   ============================================================================ */

/* --- Toolbar glyphs ----------------------------------------------------------
   The search and clear icons carry NO inline colour: they inherit from these
   classes so the theme pair can be expressed. Frame NkA6J — search icon #A0AEC0;
   the clear × is #64748B in both themes (G59). */
.satellite-location-search-icon[b-zljxrsytvf] {
    color: #A0AEC0;
}

[data-theme="dark"] .satellite-location-search-icon[b-zljxrsytvf] {
    color: #64748B;
}

.satellite-location-clear-icon[b-zljxrsytvf] {
    color: #64748B;
}

[data-theme="dark"] .satellite-location-clear-icon[b-zljxrsytvf] {
    color: #64748B;
}

/* --- G99: keep the Status badge on one line -------------------------------
   The badge reuses the shared aims-badge-active / -inactive pair (never
   recoloured — G103) but must opt OUT of any cell-level wrapping. The clip that
   BUG-032 records is the .rz-cell-data box (overflow:hidden, 16px per side), which
   the 120px column width above clears; this rule only stops the pill from folding
   onto two lines inside that box. Frame NkA6J draws the badge as a 90x24 r12 chip
   with the label centred. */
.satellite-location-status-badge[b-zljxrsytvf] {
    white-space: nowrap;
    overflow-wrap: normal;
}

/* --- AC2 empty state ------------------------------------------------------- */
.satellite-location-empty-state[b-zljxrsytvf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 28px 20px;
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    color: #64748B;
}

.satellite-location-empty-state p[b-zljxrsytvf] {
    margin: 0;
}

[data-theme="dark"] .satellite-location-empty-state[b-zljxrsytvf] {
    color: #94A3B8;
}
/* /Components/Pages/SystemSettings/SatelliteLocation/Rooms/RoomTab.razor.rz.scp.css */
/* ============================================================================
   Room Information tab — Satellite Location (STORY-148, AD-S13, AC10)

   Scoped to Rooms/RoomTab.razor. The AD-S13 Rooms frames (O2uTM5 / Cg6lw) draw
   the tab's grid, its toolbar and its pager; the two modal frames (kWgtZ / kU1cn
   Add, EIToE / j3tqAm Edit) belong to LocationRoomDialog.razor, which has no
   scoped sheet of its own and reuses the global .aims-dialog* classes.

   G139 — Blazor scoped CSS is PER-COMPONENT: AssetCategory/List.razor.css owning
   .asset-category-status-badge proves nothing for the rooms grid. The rules below
   are re-expressed for this component's own class names. Two of the three classes
   the grid needs are NOT here on purpose:
     - the inactive-row treatment is the GLOBAL .satellite-location-row-inactive
       (app.css, with its [data-theme="dark"] counterpart) — shared with tab 1's
       location list, so the two grids of this screen subdue rows identically; and
     - the Status toggle styling is the GLOBAL .satellite-location-switch
       (app.css) — CSS isolation cannot reach Radzen's internal DOM (G29), so a
       scoped rule could never style .rz-switch-circle anyway.

   G143 — every VALUE below is read from the AD-S13 Rooms frame pair, not copied
   from a sibling: the grid renders a chip, a plain-text cell pair and an icon
   slot, so the sibling's long-token overflow rule has no counterpart here.

   G59 — every colour carries a [data-theme="dark"] counterpart. The two mixes
   used here are the family's shared pair: #64748B (light) / #94A3B8 (dark), the
   same values the sibling settings lists pin for their muted copy.
   ============================================================================ */

/* --- G99: keep the Status badge on one line -------------------------------
   The badge reuses the shared aims-badge-active / -inactive pair (never
   recoloured — G103) but must opt OUT of any cell-level wrapping. Frame O2uTM5
   draws the badge as a chip with its label centred. */
.room-tab-status-badge[b-iukl1pnmlw] {
    white-space: nowrap;
    overflow-wrap: normal;
}

/* --- Empty state ----------------------------------------------------------
   Mirrors the sibling lists' empty state (icon + copy + the Add affordance),
   because AC2's "prompt the user" rule is the register family's shared shape and
   this grid is the same kind of paged register one level down. */
.room-tab-empty-state[b-iukl1pnmlw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 28px 20px;
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    color: #64748B;
}

.room-tab-empty-state p[b-iukl1pnmlw] {
    margin: 0;
}

[data-theme="dark"] .room-tab-empty-state[b-iukl1pnmlw] {
    color: #94A3B8;
}

/* --- No-parent guard ------------------------------------------------------
   Rendered instead of the grid when the component is handed no location id.
   The Add page's tab host is expected to keep tab 2 disabled in that state
   (DV-12); this is the component-level defence behind it — a grid pointed at
   location 0 would ask the service for a parent that cannot exist. */
.room-tab-no-parent[b-iukl1pnmlw] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    background: #F7F8FA;
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    color: #64748B;
}

[data-theme="dark"] .room-tab-no-parent[b-iukl1pnmlw] {
    background: var(--aims-surface-bg);
    border-color: #2D3748;
    color: #94A3B8;
}
/* /Components/Pages/SystemSettings/SatelliteLocation/SatelliteLocationForm.razor.rz.scp.css */
/* ============================================================================
   Add/Edit Form — Satellite Location (wireframe I4jxi / h7A2U, light + dark)

   STORY-148 (AD-S13). Shared by Add.razor and Edit.razor through
   SatelliteLocationForm.razor.

   G139 — Blazor scoped CSS is PER-COMPONENT. The sibling AssetCategoryForm.razor.css
   defines .asset-category-form-* and its selectors do NOT reach this component, so the
   rules below are re-expressed rather than inherited. Shipping the markup without this
   file would render the card unstyled (build stays 0/0 — silent).

   These styles are page-scoped ON PURPOSE and live here rather than in
   wwwroot/app.css: they re-skin the form to the wireframe's measured geometry
   (full-width card inside the 24px page padding, padding 40, gap 20, filled borderless
   44px input, sentence-case 12/600 label, navy primary / filled-neutral secondary action
   row), which is the opposite of the shared aims-profile-* design system on every
   defining property. Per the project's CSS architecture, page-specific styling belongs in
   a scoped .razor.css — the global stylesheet keeps only shared component classes and
   design tokens.

   G143 — the VALUES below are re-derived from the AD-S13 frames, NOT copied from
   AssetCategoryForm.razor.css. The structural differences matter:
     (1) this form has TEN fields, not three — five row wrappers (two two-column rows, a
         full-width Address textarea, a two-column Postcode/City row, a two-column
         State/Phone row, then full-width Person In Charge and Floor), plus the Status
         field and the button row;
     (2) it carries a TEXTAREA (Address) the sibling has no counterpart for, so the
         textarea geometry, its wrapping and its top-aligned leading glyph are new here;
     (3) it carries a SELECT (State) with the frame's chevron, so the native control's
         appearance is normalised and the placeholder option is muted;
     (4) it carries the READ-ONLY Location Code surface on Edit (D4(a)), which the sibling
         has no counterpart for at all (STORY-147's WarningParameter form is the family's
         read-only precedent and the treatment below follows it).
   The frames are 1440px desktop with everything full-width, so the sibling's
   narrow-viewport stacking media query has no counterpart here.
   The frame draws each label with the asterisk INSIDE the label text ("Location Code *")
   — it renders as plain text, matching the frame. Floor and Phone No are the two
   optional fields and carry no asterisk.

   The Status toggle is the one Radzen component in this form. Its rules stay in app.css
   alongside the six sibling switch blocks (the established convention for switch styling,
   G29), because CSS isolation cannot reach Radzen's internal DOM with plain selectors.

   Colours route through --aims-* tokens or pinned hexes with explicit
   [data-theme="dark"] counterparts (G59). Dark values come from the dark frames
   J3ZHOA / p3Jhq (#1E293B card / #0F172A input / #F1F5F9 label / #334155 cancel /
   #4DD9C0 save), and the field glyph pair is #A0AEC0 -> #64748B.

   G183 — the leading glyph is a CHILD BOX inside the input group: it is positioned, not
   flowed, so it cannot be cut by the group's box. Nothing here sets overflow:hidden on a
   container holding a fixed-size child.
   ============================================================================ */

.satellite-location-form-card[b-7blodm31qv] {
    width: 100%;
    margin: 0;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: var(--aims-surface-bg);
    /* Frame I4jxi/h7A2U: the card is a rounded surface on the page background. */
    border: none;
    border-radius: 12px;
}

.satellite-location-form-fields[b-7blodm31qv] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.satellite-location-form-row[b-7blodm31qv] {
    display: flex;
    gap: 20px;
}

.satellite-location-form-row .satellite-location-form-field[b-7blodm31qv] {
    /* G87 — flex-basis 0 keeps the field content-independent; `auto` would let a long
       value widen it away from the frame's fill_container geometry. */
    flex: 1 1 0;
    min-width: 0;
}

.satellite-location-form-field[b-7blodm31qv] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.satellite-location-form-label[b-7blodm31qv] {
    font-size: 12px;
    font-weight: 600;
    line-height: 20px;
    color: var(--aims-text-primary);
}

/* One rule reaches all three control types (input, select, textarea) so their filled,
   borderless geometry cannot drift apart. */
.satellite-location-form-input[b-7blodm31qv] {
    width: 100%;
    height: 44px;
    /* Transparent border keeps the 44px box stable when the error state paints it. */
    border: 1.5px solid transparent;
    border-radius: 8px;
    padding: 0 14px;
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    color: var(--aims-text-primary);
    background: var(--aims-page-bg);
    outline: none;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.satellite-location-form-input[b-7blodm31qv]::placeholder {
    color: #A0AEC0;
}

/* --- Address (textarea, full width) ------------------------------------------
   The frame draws a three-line box. `height: auto` overrides the 44px above; the
   min-height is the frame's measured box, and the leading glyph is lifted to the first
   line (the shared icon span is vertically centred, which would float it mid-box on a
   multi-line control). */
.satellite-location-form-textarea[b-7blodm31qv] {
    height: auto;
    min-height: 88px;
    padding: 12px 14px;
    line-height: 1.45;
    resize: vertical;
}

.satellite-location-form-textarea-group[b-7blodm31qv] {
    align-items: flex-start;
}

.satellite-location-form-textarea-group .aims-auth-input-icon-left[b-7blodm31qv] {
    top: 12px;
}

/* --- State dropdown ----------------------------------------------------------
   The native arrow is suppressed so the frame's own chevron is the only affordance;
   the placeholder option is muted until a state is chosen (G27). */
select.satellite-location-form-input[b-7blodm31qv] {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

select.satellite-location-form-input.is-placeholder[b-7blodm31qv] {
    color: #A0AEC0;
}

select.satellite-location-form-input option[b-7blodm31qv] {
    background: var(--aims-surface-bg);
    color: var(--aims-text-primary);
}

[data-theme="dark"] select.satellite-location-form-input.is-placeholder[b-7blodm31qv] {
    color: #64748B;
}

/* The field glyph carries NO inline colour: it inherits from this class so the theme
   pair can be expressed. Frame I4jxi draws every glyph #A0AEC0 and the dark frame
   J3ZHOA draws them #64748B (G59: an inline Style could not carry a dark counterpart). */
.satellite-location-form-icon[b-7blodm31qv] {
    color: #A0AEC0;
}

[data-theme="dark"] .satellite-location-form-icon[b-7blodm31qv] {
    color: #64748B;
}

/* D4(a) — in the Edit frame the Location Code glyph is the ONLY one drawn #64748B (the
   lock). Same colour in both themes: the dark frame p3Jhq keeps the lock at #64748B too,
   and #64748B already contrasts against the dark card. */
.satellite-location-form-icon-lock[b-7blodm31qv] {
    color: #64748B;
}

.satellite-location-form-input:focus[b-7blodm31qv] {
    box-shadow: 0 0 0 3px rgba(77, 217, 192, 0.15);
}

.satellite-location-form-input.has-icon-left[b-7blodm31qv] {
    padding-left: 44px;
}

[data-theme="dark"] .satellite-location-form-input[b-7blodm31qv]::placeholder {
    color: #64748B;
}

/* Dark theme: a PRE-EXISTING global rule — app.css [data-theme="dark"]
   input[type="text"]/textarea/select { background/border-color: ... !important }
   (STORY-091) — pins a visible #334155 border and the page background at specificity
   (0,2,1), which outranks the transparent rest border above and would make the dark form
   show outlined inputs where the frames (J3ZHOA / p3Jhq) draw them borderless. Blazor
   appends the scope attribute to the LAST compound selector, so the rules below resolve
   at (0,3,1) and win — the same technique the sibling forms use.
   Placed BEFORE the error rule below, which carries equal specificity — the later error
   rule therefore still wins when a field is invalid. */
[data-theme="dark"] input.satellite-location-form-input[b-7blodm31qv],
[data-theme="dark"] input.satellite-location-form-input.has-icon-left[b-7blodm31qv],
[data-theme="dark"] textarea.satellite-location-form-input[b-7blodm31qv],
[data-theme="dark"] select.satellite-location-form-input[b-7blodm31qv] {
    border-color: transparent !important;
}

/* G47 — the invalid ring must survive BOTH themes (explicit dark counterpart).
   Without the [data-theme="dark"] selector the app's dark input border rule
   (specificity 0,2,1, !important) silently wins and the field looks valid. */
input.satellite-location-form-input.aims-input-error[b-7blodm31qv],
textarea.satellite-location-form-input.aims-input-error[b-7blodm31qv],
select.satellite-location-form-input.aims-input-error[b-7blodm31qv],
[data-theme="dark"] input.satellite-location-form-input.aims-input-error[b-7blodm31qv],
[data-theme="dark"] textarea.satellite-location-form-input.aims-input-error[b-7blodm31qv],
[data-theme="dark"] select.satellite-location-form-input.aims-input-error[b-7blodm31qv] {
    border-color: #EF4444 !important;
}

/* ----------------------------------------------------------------------------
   READ-ONLY Location Code (D4(a) / AC5) — the family's re-derivation, mirrored from
   WarningParameterForm.razor.css (STORY-147 DV-2), which is the only sibling with a
   read-only field. Surface swap ONLY: light #F0F1F3 (the family's muted-surface token,
   shared with the table header and the icon-button fill) instead of the editable
   --aims-page-bg (#F7F8FA); dark #334155 instead of #0F1923. #F8FAFC was rejected
   (lighter than the editable fill on a white card → it would read as MORE editable), and
   muting the value was rejected on contrast (#A0AEC0 on #F0F1F3 is ~1.9:1, a WCAG AA
   fail) — THE VALUE TEXT STAYS PRIMARY.
   The control here is a RAW <input> in this component's own markup, so the selectors
   below need no ::deep (unlike the sibling's RadzenTextBox, whose <input> is rendered by
   another component and carries none of this file's scope). `!important` is still
   required: the STORY-091 dark rule above sets background and colour with it.
   ---------------------------------------------------------------------------- */
.satellite-location-form-readonly-group[b-7blodm31qv] {
    /* Semantics, not decoration: the field is focusable and readable but cannot be
       edited, so it must not present a text caret affordance. */
    cursor: not-allowed;
}

.satellite-location-form-readonly-group .satellite-location-form-label[b-7blodm31qv] {
    /* No counterpart rule needed on the label — recorded here only to show the label was
       considered: the frame keeps it at the primary colour, unchanged. */
    color: var(--aims-text-primary);
}

input.satellite-location-form-readonly[b-7blodm31qv] {
    /* PRIMARY text colour — do NOT mute it (DV-2: muted-on-muted fails WCAG AA). */
    color: #0D1B2A !important;
    background: #F0F1F3 !important;
    cursor: not-allowed;
}

[data-theme="dark"] input.satellite-location-form-readonly[b-7blodm31qv] {
    color: #F1F5F9 !important;
    /* Deliberately LIGHTER than the dark card (--aims-surface-bg) so the field reads as a
       read-only well rather than an editable one — DV-2, do not "correct" it. */
    background: #334155 !important;
    border-color: transparent !important;
}

/* --- State field's right-hand adornment pair (info + chevron) ----------------- */
.satellite-location-form-tooltip-icon[b-7blodm31qv] {
    color: #64748B;
}

[data-theme="dark"] .satellite-location-form-tooltip-icon[b-7blodm31qv] {
    color: #94A3B8;
}

.satellite-location-form-actions[b-7blodm31qv] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    /* Frame: Button Row padding [8, 0, 0, 0]. */
    padding-top: 8px;
}

/* Wireframe: navy #0D1B2A primary, filled #F0F1F3 secondary — both 40px tall,
   padding 0 20, radius 8. AimsButton's buttons live in another component's markup, so
   these rules use ::deep to cross the CSS-isolation boundary explicitly (the same
   technique the sibling forms use). */
.satellite-location-form-actions[b-7blodm31qv]  .aims-btn-primary {
    height: 40px;
    background-color: var(--aims-navy);
    color: #FFFFFF;
    font-weight: 600;
    box-shadow: none;
}

.satellite-location-form-actions[b-7blodm31qv]  .aims-btn-primary:hover {
    background-color: var(--aims-navy-light);
}

.satellite-location-form-actions[b-7blodm31qv]  .aims-btn-secondary {
    height: 40px;
    background-color: var(--aims-icon-btn-bg);
    border: none;
    color: var(--aims-text-primary);
    font-weight: 600;
}

.satellite-location-form-actions[b-7blodm31qv]  .aims-btn-secondary:hover {
    background-color: var(--aims-icon-btn-hover);
}

/* Dark-theme counterparts (G59) — mirror the dark wireframe frames J3ZHOA / p3Jhq. */
[data-theme="dark"] .satellite-location-form-actions[b-7blodm31qv]  .aims-btn-primary {
    background-color: var(--aims-teal);
    color: var(--aims-navy);
}

[data-theme="dark"] .satellite-location-form-actions[b-7blodm31qv]  .aims-btn-primary:hover {
    background-color: #3FC4AE;
}

[data-theme="dark"] .satellite-location-form-actions[b-7blodm31qv]  .aims-btn-secondary {
    background-color: #334155;
    color: #F1F5F9;
}

[data-theme="dark"] .satellite-location-form-actions[b-7blodm31qv]  .aims-btn-secondary:hover {
    background-color: #3E4C63;
}
/* /Components/Pages/SystemSettings/Vendor/List.razor.rz.scp.css */
/* ============================================================================
   List page — Vendor (wireframe qbmhT / FxzbT, light + dark)

   STORY-106 (AD-S07). Page-scoped styling for the Vendor register.

   G139 — Blazor scoped CSS is PER-COMPONENT: this file styles THIS page only. The
   sibling Project list ships no stylesheet at all, so nothing is inherited.

   Why these rules live here rather than in wwwroot/app.css: they either (a) re-skin
   a control the frame draws differently from the sibling (the two pale-tinted export
   pills), or (b) fix a cell-level wrapping hazard specific to Vendor's column set.
   Per the project's CSS architecture the global stylesheet keeps only shared
   component classes and design tokens; page-specific styling belongs in a scoped
   .razor.css. The shared aims-badge-* pair is deliberately NOT touched (G103).

   G29 — RadzenDataGrid's column widths are set on RadzenDataGridColumn
   (Width="..."), never here; the rules below only reach elements this page's own
   templates render (the cell spans) plus AimsButton's root, which needs ::deep.
   G59 — every colour carries a [data-theme="dark"] counterpart taken from the
   dark frame: PDF pill #3B1C1C / #FCA5A5, Excel pill #064E3B / #86EFAC.
   ============================================================================ */

/* --- Toolbar glyphs ----------------------------------------------------------
   The search and clear icons carry NO inline colour: they inherit from these
   classes so the theme pair can be expressed. Frame values — search icon #A0AEC0
   (light) / #64748B (dark); the clear × is #64748B in both (G59). */
.vendor-search-icon[b-rxegblk54r] {
    color: #A0AEC0;
}

[data-theme="dark"] .vendor-search-icon[b-rxegblk54r] {
    color: #64748B;
}

.vendor-clear-icon[b-rxegblk54r] {
    color: #64748B;
}

[data-theme="dark"] .vendor-clear-icon[b-rxegblk54r] {
    color: #64748B;
}

/* --- Export buttons: REMOVED 2026-09-14 (user-directed) ---------------------
   These were the frame's pale-tinted pills — PDF  #FEF2F2 / #B91C1C and Excel
   #F0FDF4 / #15803D, each with a [data-theme="dark"] counterpart. They made the
   Vendor toolbar visibly different from every other settings list, so the two
   buttons now use the app-wide convention instead: the Danger variant's red for
   PDF, and a Danger button with an inline #217346 green for Excel — identical to
   Project / Asset Type / Facility Management Code. Styling them here is no longer
   needed; the inline green cannot carry a dark counterpart, which is the accepted
   sibling behaviour. If the tinted pills are ever reinstated, restore the rules
   from git history rather than re-deriving the hex values. */

/* --- G97: the Email column holds long unbreakable tokens -------------------
   (bintang.inovasi@example.com, gve.admin@example.com). Without overflow-wrap a
   200px cell paints its text over the neighbouring Status column. */
.vendor-email-cell[b-rxegblk54r] {
    display: inline-block;
    max-width: 100%;
    overflow-wrap: anywhere;
}

/* --- G99: keep the Status badge on one line -------------------------------
   The badge reuses the shared aims-badge-active / -inactive pair (never
   recoloured — G103) but must opt OUT of any cell-level wrapping. */
.vendor-status-badge[b-rxegblk54r] {
    white-space: nowrap;
    overflow-wrap: normal;
}

/* --- AC2 empty state ------------------------------------------------------- */
.vendor-empty-state[b-rxegblk54r] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 28px 20px;
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    color: #64748B;
}

.vendor-empty-state p[b-rxegblk54r] {
    margin: 0;
}

[data-theme="dark"] .vendor-empty-state[b-rxegblk54r] {
    color: #94A3B8;
}
/* /Components/Pages/SystemSettings/Vendor/VendorForm.razor.rz.scp.css */
/* ============================================================================
   Add/Edit Form — Vendor (wireframe PRZ9N / KLgxj, light + dark)

   STORY-106 (AD-S07). Shared by Add.razor and Edit.razor through VendorForm.razor.

   G139 — Blazor scoped CSS is PER-COMPONENT. The sibling ProjectForm.razor.css
   defines .project-form-* and its selectors do NOT reach this component, so the
   rules below are duplicated-and-renamed rather than inherited. Shipping the markup
   without this file would render the card unstyled (build stays 0/0 — silent).

   These styles are page-scoped ON PURPOSE and live here rather than in
   wwwroot/app.css: they re-skin the form to the wireframe's measured geometry
   (full-width card inside the 24px page padding, padding 40, filled borderless
   44px inputs, sentence-case 12/600 labels, navy primary / filled-neutral
   secondary action row), which is the opposite of the shared aims-profile-*
   design system on every defining property. Per the project's CSS architecture,
   page-specific styling belongs in a scoped .razor.css — the global stylesheet
   keeps only shared component classes and design tokens.

   G143 — the VALUES below are re-derived from the AD-S07 frames, NOT copied from
   ProjectForm.razor.css. Two structural differences matter:
     (1) six of the ten fields sit in TWO-COLUMN rows (frame "Row 1/2/3/4",
         gap 20, each field hug-equal at 50%), which the Project form does not
         have — hence .vendor-form-row, with `flex: 1 1 0` per G87 so header and
         data stay content-independent;
     (2) the Address field is a 70px TEXTAREA, not a 44px input.
   The frame also draws the labels with the asterisk inside the label text
   ("Vendor Name *"); it renders as a non-coloured span, matching the sibling.

   The Status toggle is the one Radzen component in this form. Its rules stay in
   app.css alongside finance-switch / asset-type-switch / allocation-switch /
   project-switch / vendor-switch (the established convention for switch styling),
   because CSS isolation cannot reach Radzen's internal DOM with plain selectors — G29.

   Colours route through --aims-* tokens or pinned hexes with explicit
   [data-theme="dark"] counterparts (G59). Dark values are the dark frame's own
   (#1E293B card / #0F172A input / #F1F5F9 label / #334155 cancel / #4DD9C0 save).
   ============================================================================ */

.vendor-form-card[b-8c6r41y7ds] {
    width: 100%;
    margin: 0;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: var(--aims-surface-bg);
    /* Frame PRZ9N/KLgxj: the card is a rounded surface on the page background. */
    border: none;
    border-radius: 12px;
}

.vendor-form-fields[b-8c6r41y7ds] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Frame "Row 1..4" — a two-column row (gap 20). */
.vendor-form-row[b-8c6r41y7ds] {
    display: flex;
    gap: 20px;
}

.vendor-form-row .vendor-form-field[b-8c6r41y7ds] {
    /* G87 — flex-basis 0 keeps the two columns content-independent; `auto` would
       let a long label/value widen one column and drift the pair out of alignment. */
    flex: 1 1 0;
    min-width: 0;
}

.vendor-form-field[b-8c6r41y7ds] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.vendor-form-label[b-8c6r41y7ds] {
    font-size: 12px;
    font-weight: 600;
    line-height: 20px;
    color: var(--aims-text-primary);
}

/* Required marker inherits the label colour — the frame does not draw a red asterisk. */
.vendor-form-required[b-8c6r41y7ds] {
    color: inherit;
}

.vendor-form-input[b-8c6r41y7ds] {
    width: 100%;
    height: 44px;
    /* Transparent border keeps the 44px box stable when the error state paints it. */
    border: 1.5px solid transparent;
    border-radius: 8px;
    padding: 0 14px;
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    color: var(--aims-text-primary);
    background: var(--aims-page-bg);
    outline: none;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.vendor-form-input[b-8c6r41y7ds]::placeholder {
    color: #A0AEC0;
}

/* The field glyphs and the info/chevron glyphs carry NO inline colour: they inherit
   from these classes so the theme pair can be expressed. Frames PRZ9N/KLgxj draw
   them #A0AEC0 and the dark frames W2CvXJ/o1CkPg draw them #64748B — the same pair
   the placeholder uses (G59: an inline Style could not carry a dark counterpart). */
.vendor-field-icon[b-8c6r41y7ds],
.vendor-tooltip-icon[b-8c6r41y7ds] {
    color: #A0AEC0;
}

[data-theme="dark"] .vendor-field-icon[b-8c6r41y7ds],
[data-theme="dark"] .vendor-tooltip-icon[b-8c6r41y7ds] {
    color: #64748B;
}

[data-theme="dark"] .vendor-form-input[b-8c6r41y7ds]::placeholder {
    color: #64748B;
}

.vendor-form-input:focus[b-8c6r41y7ds] {
    box-shadow: 0 0 0 3px rgba(77, 217, 192, 0.15);
}

.vendor-form-input.has-icon-left[b-8c6r41y7ds] {
    padding-left: 44px;
}

/* Frame "Address Field Input Wrap" — the one 70px multi-line control. */
.vendor-form-textarea[b-8c6r41y7ds] {
    height: 70px;
    min-height: 70px;
    padding: 12px 14px;
    line-height: 1.4;
    resize: vertical;
}

/* The State dropdown has no native chevron (the frame draws its own glyph as an
   overlay icon), and renders the placeholder option in the muted colour. */
select.vendor-form-input[b-8c6r41y7ds] {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

select.vendor-form-input.is-placeholder[b-8c6r41y7ds] {
    color: #A0AEC0;
}

select.vendor-form-input option[b-8c6r41y7ds] {
    background: var(--aims-surface-bg);
    color: var(--aims-text-primary);
}

/* Dark theme: a PRE-EXISTING global rule — app.css [data-theme="dark"]
   input[type="text"]/textarea/select { border-color: var(--aims-border-color) !important }
   (STORY-091) — pins a visible #334155 border at specificity (0,2,1), which
   outranks the transparent rest border above and made the dark form show
   outlined inputs where the frames (W2CvXJ / o1CkPg) draw them borderless.
   Same technique as G47: match the global rule's !important with a HIGHER
   specificity (0,3,1) so the frame's treatment wins in dark mode too.
   Placed BEFORE the error rule below, which carries equal specificity — the
   later error rule therefore still wins when a field is invalid. */
[data-theme="dark"] input.vendor-form-input[b-8c6r41y7ds],
[data-theme="dark"] input.vendor-form-input.has-icon-left[b-8c6r41y7ds],
[data-theme="dark"] textarea.vendor-form-input[b-8c6r41y7ds],
[data-theme="dark"] select.vendor-form-input[b-8c6r41y7ds] {
    border-color: transparent !important;
}

/* G47 — the invalid ring must survive BOTH themes (explicit dark counterpart).
   Without the [data-theme="dark"] selector the app's dark input border rule
   (specificity 0,2,1, !important) silently wins and the field looks valid. */
input.vendor-form-input.aims-input-error[b-8c6r41y7ds],
textarea.vendor-form-input.aims-input-error[b-8c6r41y7ds],
select.vendor-form-input.aims-input-error[b-8c6r41y7ds],
[data-theme="dark"] input.vendor-form-input.aims-input-error[b-8c6r41y7ds],
[data-theme="dark"] textarea.vendor-form-input.aims-input-error[b-8c6r41y7ds],
[data-theme="dark"] select.vendor-form-input.aims-input-error[b-8c6r41y7ds] {
    border-color: #EF4444 !important;
}

/* V8 / DV-10 — the non-blocking phone/fax format hint. Amber, never red, and never
   accompanied by the invalid border: the field is still submittable. */
.vendor-form-warning[b-8c6r41y7ds] {
    font-size: 12px;
    line-height: 18px;
    color: #B45309;
}

[data-theme="dark"] .vendor-form-warning[b-8c6r41y7ds] {
    color: #FBBF24;
}

.vendor-form-actions[b-8c6r41y7ds] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    /* Frame: Button Row padding [8, 0, 0, 0]. */
    padding-top: 8px;
}

/* Wireframe: navy #0D1B2A primary, filled #F0F1F3 secondary — both 40px tall,
   padding 0 20, radius 8. AimsButton's buttons live in another component's
   markup, so these rules use ::deep to cross the CSS-isolation boundary
   explicitly (the same technique the sibling forms use). */
.vendor-form-actions[b-8c6r41y7ds]  .aims-btn-primary {
    height: 40px;
    background-color: var(--aims-navy);
    color: #FFFFFF;
    font-weight: 600;
    box-shadow: none;
}

.vendor-form-actions[b-8c6r41y7ds]  .aims-btn-primary:hover {
    background-color: var(--aims-navy-light);
}

.vendor-form-actions[b-8c6r41y7ds]  .aims-btn-secondary {
    height: 40px;
    background-color: var(--aims-icon-btn-bg);
    border: none;
    color: var(--aims-text-primary);
    font-weight: 600;
}

.vendor-form-actions[b-8c6r41y7ds]  .aims-btn-secondary:hover {
    background-color: var(--aims-icon-btn-hover);
}

/* Dark-theme counterparts (G59) — mirror the dark wireframe frames W2CvXJ / o1CkPg. */
[data-theme="dark"] .vendor-form-actions[b-8c6r41y7ds]  .aims-btn-primary {
    background-color: var(--aims-teal);
    color: var(--aims-navy);
}

[data-theme="dark"] .vendor-form-actions[b-8c6r41y7ds]  .aims-btn-primary:hover {
    background-color: #3FC4AE;
}

[data-theme="dark"] .vendor-form-actions[b-8c6r41y7ds]  .aims-btn-secondary {
    background-color: #334155;
    color: #F1F5F9;
}

[data-theme="dark"] .vendor-form-actions[b-8c6r41y7ds]  .aims-btn-secondary:hover {
    background-color: #3E4C63;
}

/* The frames are 1440px desktop; below tablet width the two-column rows stack so
   the fields stay usable (no frame governs a narrow viewport). */
@media (max-width: 900px) {
    .vendor-form-row[b-8c6r41y7ds] {
        flex-direction: column;
        gap: 20px;
    }
}
/* /Components/Pages/SystemSettings/WarningParameter/List.razor.rz.scp.css */
/* ============================================================================
   List page — Warning Notification Parameter (wireframe zaaER / LQJC9, light + dark)

   STORY-147 (AD-S06, UC-PS-SNA). Page-scoped styling for the warning notification
   parameter register.

   G139 — Blazor scoped CSS is PER-COMPONENT: this file styles THIS page only. The
   ActionProposal sibling defining .action-proposal-search-icon proves nothing here;
   the rules below are re-expressed for this page's own class names.

   Why these rules live here rather than in wwwroot/app.css: they are a badge nowrap
   guard and this page's empty state — both page-specific. Per the project's CSS
   architecture the global stylesheet keeps only shared component classes and design
   tokens. The shared aims-badge-* pair is deliberately NOT touched (G103).

   KEEP-ONLY-WHAT-THE-SCREEN-NEEDS (D3c/D6b) — the sibling's toolbar rules have NO
   counterpart here: this page has no search group (so no .warning-parameter-search-icon
   or .warning-parameter-clear-icon) and no export pair (so no rule reaching AimsButton's
   root, which the siblings style globally in any case — G156). The frame draws NO
   toolbar at all: no search box, no export buttons, no Add button.

   G29 — RadzenDataGrid's column widths are set on RadzenDataGridColumn
   (Width="..."), never here; the rules below only reach elements this page's own
   templates render (the cell spans).

   G59 — every colour carries a [data-theme="dark"] counterpart. The empty-state copy
   is the family's muted pair taken from the dark frame LQJC9: #64748B → #94A3B8.
   ============================================================================ */

/* --- Inactive rows ----------------------------------------------------------
   .warning-parameter-row-inactive is deliberately NOT declared in this file.
   G139 says a .razor.css file cannot style ANOTHER page's classes; it does not
   require this page's classes to be declared here. The inactive-row rule is a
   REGISTER-WIDE treatment shared by all six settings lists — ActionProposal, Vendor,
   Project, Asset Category, Facility Management Code and now Warning Parameter — so it
   lives with its siblings in wwwroot/app.css (plan §5), where it maps to the
   --aims-text-muted token (#64748B light / #94A3B8 dark) and also sets
   --rz-grid-cell-color so the rule still lands when the class is placed on the <td>
   rather than on an inner <span>. Declaring a second, page-scoped copy here would
   silently shadow the global one the day either value changes.
   Applied by List.razor to the Warning Category cell of rows whose IsActive is false. */

/* --- G99: keep the Status badge on one line -------------------------------
   The badge reuses the shared aims-badge-active / -inactive pair (never recoloured —
   G103) but must opt OUT of any cell-level wrapping. Frame zaaER draws the badge as a
   90x24 r12 chip with the label centred. */
.warning-parameter-status-badge[b-h84n835et0] {
    white-space: nowrap;
    overflow-wrap: normal;
}

/* --- Empty state -----------------------------------------------------------
   Text only — there is no create path (D3c), so unlike every sibling register this
   empty state carries no icon and no "Add" prompt.
   The frame draws NO empty state (its four rows are the four seeded parameters), so
   there is no AD-S06 value to re-derive from: the copy colour is the family's shared
   muted pair, the same one the five sibling registers use. The sibling's `gap: 12px`
   is dropped with the icon/button stack it spaced. */
.warning-parameter-empty-state[b-h84n835et0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 28px 20px;
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    color: #64748B;
}

.warning-parameter-empty-state p[b-h84n835et0] {
    margin: 0;
}

[data-theme="dark"] .warning-parameter-empty-state[b-h84n835et0] {
    color: #94A3B8;
}
/* /Components/Pages/SystemSettings/WarningParameter/WarningParameterForm.razor.rz.scp.css */
/* ============================================================================
   Edit Form — Warning Notification Parameter (wireframe ejlyy / R2yJL, light + dark)

   STORY-147 (AD-S06). Hosted by Edit.razor through WarningParameterForm.razor.
   There is no Add screen (D3(c) descopes create), so this stylesheet re-skins ONE
   form in ONE mode.

   G139 — Blazor scoped CSS is PER-COMPONENT. The sibling ActionProposalForm.razor.css
   defines .action-proposal-form-* and its selectors do NOT reach this component, so
   the rules below are re-expressed rather than inherited. Shipping the markup without
   this file would render the card unstyled (build stays 0/0 — silent).

   These styles are page-scoped ON PURPOSE and live here rather than in
   wwwroot/app.css: they re-skin the form to the wireframe's measured geometry
   (full-width card inside the 24px page padding, padding 40, gap 20, filled
   borderless 44px input, sentence-case 12/600 label, navy primary / filled-neutral
   secondary action row), which is the opposite of the shared aims-profile-* design
   system on every defining property. Per the project's CSS architecture, page-specific
   styling belongs in a scoped .razor.css — the global stylesheet keeps only shared
   component classes and design tokens. That includes (G29) the Status toggle: its
   .warning-parameter-switch rules live in app.css with the sibling switch blocks,
   because plain scoped selectors cannot reach Radzen's internal DOM.

   G143 — the VALUES below are re-derived from the AD-S06 frames + the read-only
   precedent UIUX specified (plan §9a DV-2), NOT copied from ActionProposalForm.razor.css.
   The structural differences matter:
     (1) this form has FOUR fields — a read-only Warning Category, TWO numeric text
         boxes, and the Status toggle — where the sibling has one text field;
     (2) the read-only field carries a DIFFERENT surface (light #F0F1F3 / dark #334155)
         while keeping every other property identical to its editable siblings
         (h44 / r8 / padding 0 14 / primary value colour / 18px glyph). The surface is
         pinned rather than tokenised because #F0F1F3 is NOT --aims-page-bg and the dark
         value is deliberately LIGHTER than the card (#1E293B) so the field stops
         reading as an inset input well — both are DV-2, do not "correct" them;
     (3) the frames draw NO tooltip glyph, so no field has a right-side adornment and no
         input needs right padding;
     (4) the frames are 1440px desktop with everything full-width, so the sibling's
         narrow-viewport stacking media query has no counterpart here.
   The editable labels draw the asterisk INSIDE the label text ("Number of Days *"),
   matching the frame; the read-only label deliberately does not (DV-2).

   Colours route through --aims-* tokens or pinned hexes with explicit
   [data-theme="dark"] counterparts (G59). Dark values are the dark frame's own
   (#1E293B card / #334155 read-only surface / #F1F5F9 value text / #334155 cancel /
   #4DD9C0 save).
   ============================================================================ */

.warning-parameter-form-card[b-4rw3qklb01] {
    width: 100%;
    margin: 0;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: var(--aims-surface-bg);
    /* Frame ejlyy/R2yJL: the card is a rounded surface on the page background. */
    border: none;
    border-radius: 12px;
}

.warning-parameter-form-fields[b-4rw3qklb01] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Frame "Row 1" / "Row 2" / "Row 3" — each a full-width row (gap 20) holding one field. */
.warning-parameter-form-row[b-4rw3qklb01] {
    display: flex;
    gap: 20px;
}

.warning-parameter-form-row .warning-parameter-form-field[b-4rw3qklb01] {
    /* G87 — flex-basis 0 keeps the field content-independent; `auto` would let a
       long value widen it away from the frame's fill_container geometry. */
    flex: 1 1 0;
    min-width: 0;
}

.warning-parameter-form-field[b-4rw3qklb01] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.warning-parameter-form-label[b-4rw3qklb01] {
    font-size: 12px;
    font-weight: 600;
    line-height: 20px;
    color: var(--aims-text-primary);
}

.warning-parameter-form-input[b-4rw3qklb01] {
    width: 100%;
    height: 44px;
    /* Transparent border keeps the 44px box stable when the error state paints it. */
    border: 1.5px solid transparent;
    border-radius: 8px;
    padding: 0 14px;
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    color: var(--aims-text-primary);
    background: var(--aims-page-bg);
    outline: none;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.warning-parameter-form-input[b-4rw3qklb01]::placeholder {
    color: #A0AEC0;
}

/* The field glyph carries NO inline colour: it inherits from this class so the
   theme pair can be expressed. Frame ejlyy draws it #A0AEC0 and the dark frame
   R2yJL draws it #64748B (G59: an inline Style could not carry a dark counterpart). */
.warning-parameter-form-icon[b-4rw3qklb01] {
    color: #A0AEC0;
}

[data-theme="dark"] .warning-parameter-form-icon[b-4rw3qklb01] {
    color: #64748B;
}

[data-theme="dark"] .warning-parameter-form-input[b-4rw3qklb01]::placeholder {
    color: #64748B;
}

.warning-parameter-form-input:focus[b-4rw3qklb01] {
    box-shadow: 0 0 0 3px rgba(77, 217, 192, 0.15);
}

.warning-parameter-form-input.has-icon-left[b-4rw3qklb01] {
    padding-left: 44px;
}

/* ----------------------------------------------------------------------------
   READ-ONLY Warning Category (AC6 / D5(a), plan §9a DV-2) — STORY-147's re-derivation,
   no sibling precedent. Surface swap ONLY: light #F0F1F3 (the family's muted-surface
   token, shared with the table header and the bell button) instead of the editable
   --aims-page-bg (#F7F8FA); dark #334155 instead of #0F1923. Everything else is
   byte-identical to the editable siblings. #F8FAFC was rejected (lighter than the
   editable fill on a white card → would read as MORE editable); a muted value colour
   was rejected on contrast (#A0AEC0 on #F0F1F3 ≈ 1.9:1, WCAG AA fail).

   This field is a Radzen RadzenTextBox, so its <input> is rendered by ANOTHER
   component and carries none of this file's scope attribute — a plain
   `input.warning-parameter-form-input` selector here would never match it (G29/G139).
   The selectors below therefore reach it from the wrapper, which IS in this
   component's markup and does carry the scope. `!important` is needed on the surface
   and the value colour because Radzen's own `.rz-textbox` rule sets both.
   ---------------------------------------------------------------------------- */
.warning-parameter-form-readonly-group[b-4rw3qklb01] {
    /* Semantics, not decoration: the field is focusable and readable but cannot be
       edited, so it must not present a text caret affordance. */
    cursor: not-allowed;
}

.warning-parameter-form-readonly-group[b-4rw3qklb01]  input {
    width: 100%;
    height: 44px;
    border: 1.5px solid transparent;
    border-radius: 8px;
    padding: 0 14px;
    /* Same 44px geometry as .has-icon-left above — expressed here because the Radzen
       input never receives that class in this stylesheet's scope. */
    padding-left: 44px;
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    /* Radzen's .rz-textbox pins a computed line-height and its own transition; both are
       neutralised here so the read-only field's computed styles match its editable
       siblings exactly rather than differing by framework default. */
    line-height: normal;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
    /* PRIMARY text colour — do NOT mute it (DV-2: muted-on-muted fails WCAG AA). */
    color: #0D1B2A !important;
    background: #F0F1F3 !important;
    box-shadow: none;
    outline: none;
    cursor: not-allowed;
}

[data-theme="dark"] .warning-parameter-form-readonly-group[b-4rw3qklb01]  input {
    color: #F1F5F9 !important;
    /* Deliberately LIGHTER than the dark card (--aims-surface-bg #1A2332) so the field
       stops reading as an inset input well — DV-2, do not "correct" it. */
    background: #334155 !important;
    border-color: transparent !important;
}

/* Dark theme: a PRE-EXISTING global rule — app.css [data-theme="dark"]
   input[type="text"]/textarea/select { border-color: var(--aims-border-color) !important }
   (STORY-091) — pins a visible #334155 border at specificity (0,2,1), which outranks
   the transparent rest border above and made the dark form show outlined inputs where
   the frames (R2yJL) draw them borderless. Same technique as G47: match the global
   rule's !important with a HIGHER specificity (0,3,1 post-isolation) so the frame's
   treatment wins in dark mode too.
   Placed BEFORE the error rule below, which carries equal specificity — the later
   error rule therefore still wins when a field is invalid. */
[data-theme="dark"] input.warning-parameter-form-input[b-4rw3qklb01],
[data-theme="dark"] input.warning-parameter-form-input.has-icon-left[b-4rw3qklb01] {
    border-color: transparent !important;
}

/* G47 — the invalid ring must survive BOTH themes (explicit dark counterpart).
   Without the [data-theme="dark"] selector the app's dark input border rule
   (specificity 0,2,1, !important) silently wins and the field looks valid. The shared
   app.css pair is NOT sufficient here: this form's own
   `input.warning-parameter-form-input` rule and app.css's global dark input rule both
   outrank it. STORY-114 lost exactly this half of the fix — the scoped, dark-prefixed
   pair below is what actually paints the border in dark mode. */
input.warning-parameter-form-input.aims-input-error[b-4rw3qklb01],
[data-theme="dark"] input.warning-parameter-form-input.aims-input-error[b-4rw3qklb01] {
    border-color: #EF4444 !important;
}

.warning-parameter-form-actions[b-4rw3qklb01] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    /* Frame: Button Row padding [8, 0, 0, 0]. */
    padding-top: 8px;
}

/* Wireframe: navy #0D1B2A primary, filled #F0F1F3 secondary — both 40px tall,
   padding 0 20, radius 8. AimsButton's buttons live in another component's
   markup, so these rules use ::deep to cross the CSS-isolation boundary
   explicitly (the same technique the sibling forms use). */
.warning-parameter-form-actions[b-4rw3qklb01]  .aims-btn-primary {
    height: 40px;
    background-color: var(--aims-navy);
    color: #FFFFFF;
    font-weight: 600;
    box-shadow: none;
}

.warning-parameter-form-actions[b-4rw3qklb01]  .aims-btn-primary:hover {
    background-color: var(--aims-navy-light);
}

.warning-parameter-form-actions[b-4rw3qklb01]  .aims-btn-secondary {
    height: 40px;
    background-color: var(--aims-icon-btn-bg);
    border: none;
    color: var(--aims-text-primary);
    font-weight: 600;
}

.warning-parameter-form-actions[b-4rw3qklb01]  .aims-btn-secondary:hover {
    background-color: var(--aims-icon-btn-hover);
}

/* Dark-theme counterparts (G59) — mirror the dark wireframe frame R2yJL. */
[data-theme="dark"] .warning-parameter-form-actions[b-4rw3qklb01]  .aims-btn-primary {
    background-color: var(--aims-teal);
    color: var(--aims-navy);
}

[data-theme="dark"] .warning-parameter-form-actions[b-4rw3qklb01]  .aims-btn-primary:hover {
    background-color: #3FC4AE;
}

[data-theme="dark"] .warning-parameter-form-actions[b-4rw3qklb01]  .aims-btn-secondary {
    background-color: #334155;
    color: #F1F5F9;
}

[data-theme="dark"] .warning-parameter-form-actions[b-4rw3qklb01]  .aims-btn-secondary:hover {
    background-color: #3E4C63;
}
/* /Components/Shared/DocumentManager.razor.rz.scp.css */
/* ============================================================================
   DocumentManager.razor.css — scoped styles for the reusable document manager.
   STORY-095: ports the proven aims-gallery-* thumbnail-strip / lightbox UX from
   RegisterStep1.razor.css so Gallery mode renders image documents identically.
   (Scoped CSS only applies to markup authored inside DocumentManager.razor.)
   ============================================================================ */

.aims-docman[b-0x37r1byne] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ============================================================================
   Image Gallery (Gambar Aset) — ported verbatim from RegisterStep1.razor.css
   ============================================================================ */

.aims-gallery-wrapper[b-0x37r1byne] {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 130px;
    max-height: 130px;
    overflow: hidden;
    flex-shrink: 0;
}

/* Chevron arrows */
.aims-gallery-arrow[b-0x37r1byne] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 14px;
    background-color: #1A2332;
    border: 1px solid #2D3748;
    color: #A0AEC0;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
}

.aims-gallery-arrow:disabled[b-0x37r1byne] {
    opacity: 0.4;
    cursor: not-allowed;
}

.aims-gallery-arrow:hover:not(:disabled)[b-0x37r1byne] {
    background-color: #2D3748;
}

[data-theme="light"] .aims-gallery-arrow[b-0x37r1byne] {
    background-color: #FFFFFF;
    border-color: #E2E8F0;
}

[data-theme="light"] .aims-gallery-arrow:hover:not(:disabled)[b-0x37r1byne] {
    background-color: #F1F5F9;
}

/* Thumbnail strip (clipped) */
.aims-gallery-strip[b-0x37r1byne] {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
    border-radius: 8px;
    background-color: #0D1B2A;
    padding: 8px;
    flex: 1;
    height: 100%;
    box-sizing: border-box;
}

[data-theme="light"] .aims-gallery-strip[b-0x37r1byne] {
    background-color: #F7F8FA;
}

/* Individual thumbnail */
.aims-gallery-thumb[b-0x37r1byne] {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 6px;
    background-color: #1A2332;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    overflow: hidden;
    box-sizing: border-box;
}

[data-theme="light"] .aims-gallery-thumb[b-0x37r1byne] {
    background-color: #FFFFFF;
    border: 1px solid #E2E8F0;
}

.aims-gallery-thumb:hover[b-0x37r1byne] {
    box-shadow: 0 0 0 2px #4DD9C0;
}

.aims-gallery-thumb-img[b-0x37r1byne] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Delete X on thumbnail */
.aims-gallery-thumb-del[b-0x37r1byne] {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.9);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.aims-gallery-thumb:hover .aims-gallery-thumb-del[b-0x37r1byne] {
    opacity: 1;
}

[data-theme="dark"] .aims-gallery-thumb-del[b-0x37r1byne] {
    background-color: rgba(0, 0, 0, 0.7);
}

.aims-gallery-hint[b-0x37r1byne] {
    font-size: 11px;
    color: var(--aims-text-muted, #94A3B8);
}

/* ============================================================================
   Image Preview Popup (lightbox)
   ============================================================================ */

.aims-gallery-overlay[b-0x37r1byne] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
}

.aims-gallery-preview[b-0x37r1byne] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 90vw;
    max-height: 85vh;
}

.aims-gallery-preview-close[b-0x37r1byne] {
    position: absolute;
    top: -40px;
    right: 0;
    background: none;
    border: none;
    color: #FFFFFF;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.aims-gallery-preview-close:hover[b-0x37r1byne] {
    color: #4DD9C0;
}

.aims-gallery-preview-nav[b-0x37r1byne] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    background-color: rgba(255, 255, 255, 0.15);
    border: none;
    color: #FFFFFF;
    cursor: pointer;
    flex-shrink: 0;
}

.aims-gallery-preview-nav:disabled[b-0x37r1byne] {
    opacity: 0.3;
    cursor: not-allowed;
}

.aims-gallery-preview-nav:hover:not(:disabled)[b-0x37r1byne] {
    background-color: rgba(255, 255, 255, 0.25);
}

.aims-gallery-preview-img[b-0x37r1byne] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.aims-gallery-preview-img img[b-0x37r1byne] {
    max-width: 70vw;
    max-height: 70vh;
    border-radius: 8px;
    object-fit: contain;
}

.aims-gallery-preview-name[b-0x37r1byne] {
    font-size: 13px;
    color: #A0AEC0;
    text-align: center;
    font-family: 'Manrope', sans-serif;
}