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

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

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