/* /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/AssetHealth/AssetHealthDetail.razor.rz.scp.css */
/* Scoped CSS for Pages/AssetHealth/AssetHealthDetail.razor (STORY-154).
   Wireframe authority: the six KA-S01 Asset Health Detail frames — primary pair
   R04 light KgpyH / R04 dark IV9zp; R03 (ffuA0 / JsGDD) and R05 (EyQVT / weID1)
   corroborate the same content. G139 — the maintenance page's md-* family does NOT
   cross pages, so every class this page's markup uses is declared HERE.
   Colours: tokens from wwwroot/app.css where the token pair matches the frame in
   BOTH themes; an explicit [data-theme="dark"] override (G59) where it does not.
   The .aims-health-badge-* family deliberately lives in app.css only (G103 — it
   serves the list too); it is NOT re-declared or forked here. */

/* ============================================================
   PAGE WRAPPER
   The app shell (.aims-content) already supplies the 24px inset
   the frame's Content region draws — the page adds the 16px gap.
   ============================================================ */

.ah-page[b-dg637utmp6] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ============================================================
   DETAIL CARD — frame 'Detail Card' (GsZwU / J8OIRt):
   surface bg, radius 8, 1px border
   ============================================================ */

.ah-card[b-dg637utmp6] {
    background: var(--aims-surface-bg);
    border: 1px solid var(--aims-border-color);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--aims-card-shadow);
}

/* Card Header — frame fill #F8FAFC (light) / #263449 (dark). The shared
   --aims-table-header-bg pair (#F7F8FA / #0D1B2A) does not match the dark
   frame, so this pair is page-local with an explicit dark override. */
.ah-card-header[b-dg637utmp6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px;
    background: #F8FAFC;
    border-bottom: 1px solid var(--aims-border-color);
}

[data-theme="dark"] .ah-card-header[b-dg637utmp6] {
    background: #263449;
}

.ah-title-block[b-dg637utmp6] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ah-asset-name[b-dg637utmp6] {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--aims-text-primary);
    overflow-wrap: anywhere;
}

/* Frame asset-no colour: #64748B light / #94A3B8 dark — the --aims-text-muted pair. */
.ah-asset-no[b-dg637utmp6] {
    font-size: 12px;
    font-weight: 500;
    color: var(--aims-text-muted);
    overflow-wrap: anywhere;
}

.ah-card-body[b-dg637utmp6] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 20px;
}

/* ============================================================
   SECTIONS — frame Section 1/3 gap 10, Section 2 gap 12
   ============================================================ */

.ah-section[b-dg637utmp6] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ah-section-info[b-dg637utmp6],
.ah-section-total[b-dg637utmp6] {
    gap: 10px;
}

/* Section 2 keeps the base 12px gap (frame 'Section 2' gap=12). */
.ah-section-criteria[b-dg637utmp6] {
    gap: 12px;
}

/* Section Label — 11px/600, uppercase text is in the markup (frame content),
   colour #64748B light / #94A3B8 dark = the --aims-text-muted pair. */
.ah-section-label[b-dg637utmp6] {
    margin: 0;
    font-size: 11px;
    font-weight: 600;
    color: var(--aims-text-muted);
}

/* ============================================================
   SECTION 1 — field grid. Frame 'Fields Row' = two stacked COLUMNS
   (col 1: Asset No./Asset Name/Asset Type/Location; col 2: Serial No./
   Date Purchase/Lifespan), so the grid flows column-major; each field is
   label (110px) + value on one row (frame 'Field *' gap 8).
   ============================================================ */

.ah-fields[b-dg637utmp6] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(4, auto);
    grid-auto-flow: column;
    gap: 10px 24px;
}

.ah-field[b-dg637utmp6] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.ah-label[b-dg637utmp6] {
    flex: 0 0 110px;
    width: 110px;
    font-size: 12px;
    font-weight: 500;
    color: var(--aims-text-muted);
}

/* G87 — the flexible column is flex: 1 1 0 (never 1 1 auto), so the value
   column aligns across every row regardless of content length. */
.ah-value[b-dg637utmp6] {
    flex: 1 1 0;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--aims-text-primary);
    overflow-wrap: anywhere;
}

.ah-mono[b-dg637utmp6] {
    font-family: 'Courier New', monospace;
}

/* ============================================================
   SECTION 2 — criteria rows + PM sub-list + notes
   ============================================================ */

.ah-criterion[b-dg637utmp6] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ah-criterion-row[b-dg637utmp6] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ah-criterion-name[b-dg637utmp6] {
    flex: 1 1 0;
    min-width: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--aims-text-primary);
}

.ah-score[b-dg637utmp6] {
    font-size: 13px;
    font-weight: 700;
    text-align: right;
    color: var(--aims-text-primary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Progress track — frame fill #E2E8F0 light / #334155 dark = --aims-border-color
   in both themes (token pair; no override needed). */
.ah-track[b-dg637utmp6] {
    height: 6px;
    border-radius: 3px;
    background: var(--aims-border-color);
    overflow: hidden;
}

/* Progress fill — the frame draws #2563EB in BOTH themes. No app token matches,
   so the value is page-local with the explicit dark override G59 requires. */
.ah-fill[b-dg637utmp6] {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: #2563EB;
}

[data-theme="dark"] .ah-fill[b-dg637utmp6] {
    background: #2563EB;
}

/* PM assessment sub-list — frame 'PM Assessment List' (gap 4, indent 18px).
   The middle (reference) column grows: flex: 1 1 0 per G87. */
.ah-pm-list[b-dg637utmp6] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px 0 0 18px;
}

.ah-pm-row[b-dg637utmp6] {
    display: flex;
    gap: 8px;
    font-size: 12px;
    color: var(--aims-text-muted);
}

.ah-pm-head[b-dg637utmp6] {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.ah-pm-date[b-dg637utmp6],
.ah-pm-score[b-dg637utmp6] {
    white-space: nowrap;
}

.ah-pm-ref[b-dg637utmp6] {
    flex: 1 1 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

.ah-pm-score[b-dg637utmp6] {
    text-align: right;
    font-weight: 600;
    color: var(--aims-text-primary);
    font-variant-numeric: tabular-nums;
}

/* Criteria notes — frame Note fill is #94A3B8 in LIGHT and #64748B in DARK
   (the inverse of the token pair), so it is emitted as an explicit page-local
   pair with its dark override (G59). */
.ah-note[b-dg637utmp6] {
    margin: 0;
    font-size: 11px;
    font-weight: 500;
    color: #94A3B8;
    overflow-wrap: anywhere;
}

[data-theme="dark"] .ah-note[b-dg637utmp6] {
    color: #64748B;
}

/* ============================================================
   SECTION 3 — total panel (frame 'Total Panel' fill #F0F1F3 light /
   #263449 dark, radius 8, padding 14, row space-between) and the
   red-override variant (DV-8; the frames draw only the green state —
   the override is styled from asset-health-detail.html with an
   explicit dark counterpart).
   ============================================================ */

.ah-total-panel[b-dg637utmp6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding: 14px;
    border-radius: 8px;
    background: #F0F1F3;
}

[data-theme="dark"] .ah-total-panel[b-dg637utmp6] {
    background: #263449;
}

.ah-formula[b-dg637utmp6] {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Frame Formula Text #64748B light / #94A3B8 dark = --aims-text-muted. */
.ah-formula-text[b-dg637utmp6] {
    font-size: 13px;
    font-weight: 500;
    color: var(--aims-text-muted);
}

.ah-total-value[b-dg637utmp6] {
    font-size: 16px;
    font-weight: 700;
    color: var(--aims-text-primary);
}

/* Forced-red variant (C4 <= 25): the panel re-tints red and the A40 sentence
   replaces the averaging formula (AC5). */
.ah-total-panel-override[b-dg637utmp6] {
    background: #FEE2E2;
    border: 1px solid #FECACA;
}

[data-theme="dark"] .ah-total-panel-override[b-dg637utmp6] {
    background: rgba(239, 68, 68, 0.15);
    border-color: #7F1D1D;
}

.ah-override-text[b-dg637utmp6] {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    color: #991B1B;
    overflow-wrap: anywhere;
}

[data-theme="dark"] .ah-override-text[b-dg637utmp6] {
    color: #FCA5A5;
}

/* Corrective-cap variant (C3 = 75, BUG-054): the panel re-tints Yellow, the band the cap
   lands on, and the cap sentence replaces the averaging formula. Tokens mirror
   .aims-health-badge-yellow in app.css so panel and badge cannot diverge. */
.ah-total-panel-capped[b-dg637utmp6] {
    background: #FEF9C3;
    border: 1px solid #FDE68A;
}

[data-theme="dark"] .ah-total-panel-capped[b-dg637utmp6] {
    background: rgba(202, 138, 4, 0.15);
    border-color: #78350F;
}

.ah-capped-text[b-dg637utmp6] {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    color: #854D0E;
    overflow-wrap: anywhere;
}

[data-theme="dark"] .ah-capped-text[b-dg637utmp6] {
    color: #FEF3C7;
}

/* ============================================================
   FOOTER BACK BAR — frame 'Footer Back Bar' / 'Back Button'
   (surface fill, 1px border, radius 8, padding [8, 14])
   ============================================================ */

.ah-back-bar[b-dg637utmp6] {
    display: flex;
    justify-content: flex-start;
}

.ah-back-btn[b-dg637utmp6] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--aims-border-color);
    border-radius: 8px;
    background: var(--aims-surface-bg);
    color: var(--aims-text-primary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
}

.ah-back-btn:hover[b-dg637utmp6] {
    background: var(--aims-bg-secondary);
    border-color: var(--aims-text-muted);
}

/* Frame Back Icon #64748B light / #94A3B8 dark = --aims-text-muted pair. */
.ah-back-icon[b-dg637utmp6] {
    font-size: 16px;
    line-height: 1;
    color: var(--aims-text-muted);
}

/* ============================================================
   STATES — loading / empty / error (AC9)
   ============================================================ */

.ah-state[b-dg637utmp6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 80px 24px;
    text-align: center;
}

.ah-state-text[b-dg637utmp6] {
    margin: 0;
    font-size: 13px;
    color: var(--aims-text-secondary);
    max-width: 480px;
}

.ah-state-title[b-dg637utmp6] {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--aims-text-primary);
}

/* The app's link family colours (#004D46 light / #4DD9C0 dark). */
.ah-link[b-dg637utmp6] {
    color: #004D46;
    font-weight: 600;
}

[data-theme="dark"] .ah-link[b-dg637utmp6] {
    color: #4DD9C0;
}

.ah-spinner[b-dg637utmp6] {
    width: 18px;
    height: 18px;
    border: 2px solid var(--aims-border-color);
    border-top-color: var(--aims-text-primary);
    border-radius: 50%;
    animation: ah-spin-b-dg637utmp6 0.7s linear infinite;
}

@keyframes ah-spin-b-dg637utmp6 {
    to { transform: rotate(360deg); }
}

.ah-error-icon[b-dg637utmp6] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #FEE2E2;
    color: #991B1B;
    font-size: 26px;
    font-weight: 700;
}

[data-theme="dark"] .ah-error-icon[b-dg637utmp6] {
    background: rgba(239, 68, 68, 0.18);
    color: #FCA5A5;
}

/* ============================================================
   RESPONSIVE — the frames are desktop-only and do not specify
   breakpoints; the single-column collapse matches the family's
   768px rule (Maintenance/Detail.razor.css).
   ============================================================ */

@media (max-width: 768px) {
    .ah-fields[b-dg637utmp6] {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
        grid-auto-flow: row;
    }

    .ah-card-header[b-dg637utmp6],
    .ah-card-body[b-dg637utmp6] {
        padding-left: 16px;
        padding-right: 16px;
    }
}

@media (max-width: 480px) {
    .ah-field[b-dg637utmp6] {
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
    }

    .ah-label[b-dg637utmp6] {
        flex: none;
        width: auto;
    }
}
/* /Components/Pages/AssetHealth/AssetHealthList.razor.rz.scp.css */
@* scoped CSS for Pages/AssetHealth/AssetHealthList.razor *@

/* Lesson 0.8: Prevent CSS grid column expansion by constraining overflow.
   The data grid itself is styled by app.css's .aims-base-grid plus the page-scoped
   <style> block in the .razor (G29 — scoped CSS cannot pierce Radzen's internal DOM,
   so no ::deep rule reaches into it from here). This file carries the layout guards
   only. */

.aims-welcome {
    overflow: hidden;
}

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

/* Toolbar controls within the flex layout — prevent overflow expansion */
.aims-auth-input-group[b-f49tv1fjhs] {
    min-width: 0;
    overflow: hidden;
}
/* /Components/Pages/Assets/AprReport.razor.rz.scp.css */
/* AprReport.razor.css — STORY-169 Asset Performance Report (APR), print view.

   Values are read from the Pencil frames Qqp3c (light) and QzwIo (dark) in
   aims_wireframes_desktop_v1.pen (see the plan's §3a table). Two label
   treatments exist on purpose (D-13):

     .apr-lbl   the page-1/page-3 label chips — #F7F9FB with #1A1A1A text in
                BOTH themes, because both frames draw them identically.
     .apr-thead the PM / CM / TOTAL COST table headers — theme-aware.

   The value beside a chip is a SIBLING of the chip, never part of it, and it is
   theme-aware.

   Blazor scoped CSS does not cross pages (G139), so every class the markup uses
   is declared here; app.css carries no apr-* name. */

.apr-root[b-dcv4n62sfs] {
    --apr-sheet-bg: #FFFFFF;
    --apr-head-bg: #F7F9FB;
    --apr-ink: #1A1A1A;
    --apr-muted: #555555;
    --apr-line: #444444;
    --apr-accent: #0F4C81;
    --apr-on-accent: #FFFFFF;

    /* D-13 — the label chip never changes between themes: these two are
       declared once and are NOT overridden in the dark block below. */
    --apr-lbl-bg: #F7F9FB;
    --apr-lbl-ink: #1A1A1A;

    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-bottom: 24px;
    background: #F7F8FA;
}

[data-theme="dark"] .apr-root[b-dcv4n62sfs] {
    --apr-sheet-bg: #1A2332;
    --apr-head-bg: #151F2B;
    --apr-ink: #E2E8F0;
    --apr-muted: #94A3B8;
    --apr-line: #4A5568;

    background: #0F1923;
}

/* ── toolbars (top / bottom) ─────────────────────────────────────────── */

.apr-toolbar[b-dcv4n62sfs] {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

/* The frame draws both toolbar labels at 600; the shared AimsButton label is 700. */
.apr-toolbar [data-spec-id$="print-label"][b-dcv4n62sfs] {
    font-weight: 600;
}

/* ── A4 sheets ───────────────────────────────────────────────────────── */

.apr-sheet[b-dcv4n62sfs] {
    width: 210mm;
    max-width: 100%;
    min-height: 297mm;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 32px 36px;
    background: var(--apr-sheet-bg);
    color: var(--apr-ink);
    font-family: Manrope, "Segoe UI", sans-serif;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.12);
}

/* ── title area — text lockup (left), title (centre), QR (right) ─────── */

.apr-title-area[b-dcv4n62sfs] {
    display: grid;
    grid-template-columns: 95px 1fr 76px;
    align-items: center;
    gap: 12px;
}

/* There is no logo image for this report in the web app's wwwroot, so the
   lockup is a wordmark inside the frame's 95 px (25 mm) logo area. */
.apr-logo[b-dcv4n62sfs] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 95px;
    color: var(--apr-ink);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 0.5px;
}

.apr-title[b-dcv4n62sfs] {
    margin: 0;
    color: var(--apr-ink);
    font-size: 27px;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
}

.apr-qr[b-dcv4n62sfs] {
    width: 76px;
    height: 76px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    border-radius: 4px;
    overflow: hidden;
}

/* The QR is injected as a MarkupString, so its SVG carries no scope attribute.
   ::deep is the only way scoped CSS reaches it. */
.apr-qr[b-dcv4n62sfs]  svg {
    width: 68px;
    height: 68px;
    display: block;
}

.apr-qr-placeholder[b-dcv4n62sfs] {
    color: #1A1A1A;
    font-size: 10px;
    font-weight: 700;
}

/* ── blocks, rows, label chips and values ────────────────────────────── */

.apr-block[b-dcv4n62sfs] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.apr-row[b-dcv4n62sfs] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;
    padding: 2px 0;
}

/* D-13 — identical in both themes. */
.apr-lbl[b-dcv4n62sfs] {
    flex: 0 0 150px;
    box-sizing: border-box;
    padding: 5px 8px;
    background: var(--apr-lbl-bg);
    color: var(--apr-lbl-ink);
    font-size: 10.5px;
    font-weight: 700;
    border-radius: 3px;
}

.apr-val[b-dcv4n62sfs] {
    flex: 1 1 0;
    min-width: 0;
    padding: 5px 0;
    color: var(--apr-ink);
    font-size: 10.5px;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.apr-val-strong[b-dcv4n62sfs] {
    font-weight: 700;
}

.apr-health-suffix[b-dcv4n62sfs] {
    margin-left: 4px;
    font-weight: 500;
}

.apr-assess-desc[b-dcv4n62sfs] {
    margin-left: 6px;
}

/* Health criteria line, colour scale line and the assessment legend. */
.apr-line[b-dcv4n62sfs] {
    color: var(--apr-muted);
    font-size: 9.5px;
    font-weight: 500;
    line-height: 1.35;
}

/* ── section bars — accent fill, white 11/700, LEFT aligned (frames) ─── */

.apr-sect[b-dcv4n62sfs] {
    box-sizing: border-box;
    padding: 6px 10px;
    background: var(--apr-accent);
    color: var(--apr-on-accent);
    font-size: 11px;
    font-weight: 700;
    text-align: left;
    border-radius: 4px;
}

/* ── badges ──────────────────────────────────────────────────────────── */

.apr-badge[b-dcv4n62sfs] {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    color: #FFFFFF;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}

/* The warranty badge's default fill. It is declared BEFORE the colour classes
   so that a Red/Orange/Expired warranty wins on source order (equal
   specificity). */
.apr-badge-warranty[b-dcv4n62sfs] {
    background: #16A34A;
}

.apr-badge-green[b-dcv4n62sfs] {
    background: #16A34A;
}

.apr-badge-orange[b-dcv4n62sfs] {
    background: #EA580C;
}

.apr-badge-yellow[b-dcv4n62sfs] {
    background: #CA8A04;
}

.apr-badge-red[b-dcv4n62sfs] {
    background: #DC2626;
}

.apr-badge-expired[b-dcv4n62sfs] {
    background: #6B7280;
}

/* ── report tables (PM / CM / TOTAL COST) ────────────────────────────── */

.apr-table[b-dcv4n62sfs] {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

.apr-table th[b-dcv4n62sfs],
.apr-table td[b-dcv4n62sfs] {
    box-sizing: border-box;
    padding: 4px 8px;
    border: 1px solid var(--apr-line);
    font-size: 10px;
    text-align: left;
    vertical-align: top;
}

.apr-table th[b-dcv4n62sfs] {
    font-weight: 700;
}

.apr-table td[b-dcv4n62sfs] {
    color: var(--apr-ink);
    font-weight: 500;
}

/* The ui-spec centres the Cost and CM Status headers; the ordinal column reads
   better centred in both the header and the body. `.apr-th-center` carries the
   CM Status header, which is not the last cell of its row. */
.apr-thead th:first-child[b-dcv4n62sfs],
.apr-thead th:last-child[b-dcv4n62sfs],
.apr-thead th.apr-th-center[b-dcv4n62sfs] {
    text-align: center;
}

/* Theme-aware table header (D-13, the second of the two label treatments). */
.apr-thead[b-dcv4n62sfs] {
    background: var(--apr-head-bg);
    color: var(--apr-ink);
}

/* NOTE: `.apr-table td` outranks a single class, so each override below is
   written as `.apr-table td.<class>` (the STORY-167 lesson). */
.apr-table td.apr-c-num[b-dcv4n62sfs] {
    text-align: center;
}

.apr-table td.apr-c-money[b-dcv4n62sfs] {
    text-align: center;
}

.apr-table td.apr-c-strong[b-dcv4n62sfs] {
    font-weight: 700;
}

/* A long unbreakable token wraps INSIDE its column instead of overflowing the
   sheet (G97 / G183). */
.apr-table td.apr-c-comments[b-dcv4n62sfs] {
    overflow-wrap: anywhere;
}

/* The three TOTAL COST headings are centred over their centred money cells. */
.apr-table-total th[b-dcv4n62sfs] {
    text-align: center;
}

/* ── KPI cards ───────────────────────────────────────────────────────── */

.apr-kpi-cards[b-dcv4n62sfs] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.apr-kpi-card[b-dcv4n62sfs] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 14px;
    /* The frame gives the card the sheet's own fill, so a hairline border keeps
       the card readable on that fill. */
    border: 1px solid var(--apr-head-bg);
    border-radius: 8px;
    background: var(--apr-sheet-bg);
}

.apr-kpi-head[b-dcv4n62sfs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.apr-kpi-title[b-dcv4n62sfs] {
    color: var(--apr-ink);
    font-size: 12.5px;
    font-weight: 700;
}

.apr-kpi-chip[b-dcv4n62sfs] {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 3px 8px;
    background: var(--apr-accent);
    color: var(--apr-on-accent);
    border-radius: 4px;
}

.apr-kpi-chip-label[b-dcv4n62sfs] {
    font-size: 9.5px;
    font-weight: 600;
}

.apr-kpi-chip-value[b-dcv4n62sfs] {
    font-size: 13px;
    font-weight: 800;
}

.apr-kpi-body[b-dcv4n62sfs] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.apr-kpi-line[b-dcv4n62sfs] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    font-size: 10.5px;
}

.apr-kpi-line-label[b-dcv4n62sfs] {
    color: var(--apr-muted);
    font-weight: 500;
}

.apr-kpi-line-value[b-dcv4n62sfs] {
    color: var(--apr-ink);
    font-weight: 700;
    overflow-wrap: anywhere;
}

/* ── NOTES ───────────────────────────────────────────────────────────── */

.apr-notes[b-dcv4n62sfs] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.apr-note[b-dcv4n62sfs] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 10.5px;
}

.apr-note-label[b-dcv4n62sfs] {
    color: var(--apr-muted);
    font-weight: 700;
}

.apr-note-text[b-dcv4n62sfs] {
    color: var(--apr-ink);
    font-weight: 500;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

/* ── page footer ─────────────────────────────────────────────────────── */

/* `margin-top: auto` pushes the footer to the bottom of a 297 mm sheet. */
.apr-page-foot[b-dcv4n62sfs] {
    margin-top: auto;
    padding-top: 6px;
    border-top: 1px solid var(--apr-line);
    color: var(--apr-muted);
    font-size: 10px;
    font-weight: 500;
    text-align: center;
}

/* ── print ───────────────────────────────────────────────────────────── */

@media print {
    /* Paper is white: force the light palette even when the app is dark.
       `!important` is required — `[data-theme="dark"] .apr-root` is more
       specific and would otherwise win in print. */
    .apr-root[b-dcv4n62sfs] {
        --apr-sheet-bg: #FFFFFF !important;
        --apr-head-bg: #F7F9FB !important;
        --apr-ink: #1A1A1A !important;
        --apr-muted: #555555 !important;
        --apr-line: #444444 !important;

        gap: 0;
        padding: 0;
        /* Print needs BLOCK layout: a flex container is monolithic in Chromium's
           paged output, so `break-after: page` is ignored and the whole report
           collapses onto one page (measured on the CM report). */
        display: block !important;
        background: #FFFFFF !important;
    }

    .apr-toolbar[b-dcv4n62sfs] {
        display: none !important;
    }

    .apr-sheet[b-dcv4n62sfs] {
        width: 210mm;
        min-height: 0;
        margin: 0;
        padding: 32px 36px;
        box-shadow: none;
        border-radius: 0;
        break-after: page;
        page-break-after: always;
    }

    /* The bottom toolbar follows the last sheet, so no sheet is ever a
       `:last-child`; the explicit marker class is what actually stops a
       trailing blank page, and `:last-child` is kept for the flat case. */
    .apr-sheet:last-child[b-dcv4n62sfs],
    .apr-sheet-final[b-dcv4n62sfs] {
        break-after: auto;
        page-break-after: auto;
    }

    .apr-title[b-dcv4n62sfs],
    .apr-logo[b-dcv4n62sfs],
    .apr-kpi-title[b-dcv4n62sfs],
    .apr-kpi-line-value[b-dcv4n62sfs],
    .apr-note-text[b-dcv4n62sfs] {
        color: #1A1A1A !important;
    }

    .apr-lbl[b-dcv4n62sfs] {
        background: #F7F9FB !important;
        color: #1A1A1A !important;
    }

    .apr-thead[b-dcv4n62sfs] {
        background: #F7F9FB !important;
        color: #1A1A1A !important;
    }

    .apr-sect[b-dcv4n62sfs],
    .apr-kpi-chip[b-dcv4n62sfs] {
        background: #0F4C81 !important;
        color: #FFFFFF !important;
    }

    .apr-kpi-card[b-dcv4n62sfs] {
        background: #FFFFFF !important;
        border-color: #F7F9FB !important;
    }

    .apr-line[b-dcv4n62sfs],
    .apr-kpi-line-label[b-dcv4n62sfs],
    .apr-note-label[b-dcv4n62sfs],
    .apr-page-foot[b-dcv4n62sfs] {
        color: #555555 !important;
    }
}
/* /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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* --- Input Field ---
   BUG-042: Asset Value and Purchase Price now render through the shared
   AimsCurrencyInput component, whose <input> is NOT part of this page's markup and
   therefore carries no CSS-isolation attribute. The ::deep forms anchor the scope
   attribute on the wrapper (which IS page markup) so the rules still reach the
   input. The percent input and both selects stay plain page markup and keep
   matching through the same descendant selector. */
.aims-step4-input-wrapper[b-sv5w46sroh]  .aims-step4-input {
    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-wrapper[b-sv5w46sroh]  .aims-step4-input::placeholder {
    color: #718096;
}

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

[data-theme="light"] .aims-step4-input-wrapper[b-sv5w46sroh]  .aims-step4-input::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) ---
   BUG-042: ::deep for the same reason as the base .aims-step4-input rule above. */
.aims-step4-input-wrapper[b-sv5w46sroh]  .aims-step4-input-with-prefix {
    padding-left: 36px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Generate button (primary — teal #4DD9C0 in dark, dark #0D1B2A in light) */
.aims-step5-btn-generate[b-8iuyxl69x8] {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 40px; padding: 0 20px; border-radius: 8px; border: none;
    background-color: #4DD9C0; color: #0D1B2A; font-size: 13px; font-weight: 600;
    font-family: 'Manrope', sans-serif; cursor: pointer;
}
.aims-step5-btn-generate:hover[b-8iuyxl69x8] { background-color: #3BC4AB; }
.aims-step5-btn-generate:disabled[b-8iuyxl69x8] { opacity: 0.6; cursor: not-allowed; }
[data-theme="light"] .aims-step5-btn-generate[b-8iuyxl69x8] { background-color: #0D1B2A; color: #FFFFFF; }
[data-theme="light"] .aims-step5-btn-generate:hover[b-8iuyxl69x8] { background-color: #1E293B; }
/* /Components/Pages/Assets/RegisterStep5Success.razor.rz.scp.css */
/* ============================================================================
   Asset Registration Wizard — Step 5 Success (Post-Generation)
   Wireframe reference: z86Ep (dark) / a3FVe (light) — R04 AI-S02
   ============================================================================ */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* --- Loading / Error States --- */
.aims-success-loading[b-f6r9g04syx] {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(77, 217, 192, 0.1);
    border: 1px solid rgba(77, 217, 192, 0.25);
    border-radius: 8px;
    padding: 14px 18px;
    font-size: 14px;
    font-weight: 500;
    color: #4DD9C0;
}

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

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

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

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

/* =========================================================================
   Success Banner (#1A3A3A bg, 40x40 check circle)
   ========================================================================= */
.aims-success-banner[b-f6r9g04syx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    background: #1A3A3A;
    border: none;
    border-radius: 8px;
    padding: 24px;
    text-align: center;
}

[data-theme="light"] .aims-success-banner[b-f6r9g04syx] {
    background: #F0FDF4;
    border: 1px solid #BBF7D0;
}

.aims-success-check-circle[b-f6r9g04syx] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.aims-success-title[b-f6r9g04syx] {
    font-size: 16px;
    font-weight: 700;
    color: #E2E8F0;
}

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

.aims-success-subtitle[b-f6r9g04syx] {
    font-size: 13px;
    font-weight: 400;
    color: #718096;
    max-width: 480px;
}

[data-theme="light"] .aims-success-subtitle[b-f6r9g04syx] {
    color: #718096;
}

/* =========================================================================
   Asset Number Section
   ========================================================================= */
.aims-success-number-section[b-f6r9g04syx] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

.aims-success-number-label[b-f6r9g04syx] {
    font-size: 12px;
    font-weight: 600;
    color: #A0AEC0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.aims-success-number-box[b-f6r9g04syx] {
    background: #0D1B2A;
    border: 1px solid #2D3748;
    border-radius: 8px;
    padding: 16px 32px;
}

[data-theme="light"] .aims-success-number-box[b-f6r9g04syx] {
    background: #F0F1F3;
    border-color: #E2E8F0;
}

.aims-success-number-value[b-f6r9g04syx] {
    font-size: 28px;
    font-weight: 700;
    color: #E2E8F0;
    letter-spacing: 1.5px;
    font-family: 'Manrope', monospace;
}

[data-theme="light"] .aims-success-number-value[b-f6r9g04syx] {
    color: #0D1B2A;
}

/* =========================================================================
   QR and Actions Row
   ========================================================================= */
.aims-success-qr-actions[b-f6r9g04syx] {
    display: flex;
    gap: 24px;
    align-items: center;
    justify-content: center;
}

/* QR Code display (real SVG inline, constrained to fit) */
.aims-success-qr[b-f6r9g04syx] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    justify-content: center;
    width: 160px;
    height: 160px;
    background: #0D1B2A;
    border: 1px dashed #2D3748;
    border-radius: 12px;
    flex-shrink: 0;
}

[data-theme="light"] .aims-success-qr[b-f6r9g04syx] {
    background: #F0F1F3;
    border-color: #E2E8F0;
}

.aims-success-qr-label[b-f6r9g04syx] {
    font-size: 11px;
    font-weight: 400;
    color: #A0AEC0;
    text-align: center;
    max-width: 140px;
}

/* Actions Column */
.aims-success-actions-col[b-f6r9g04syx] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
}

/* Cetak Label Button (STORY-075: enabled) */
.aims-success-btn-print[b-f6r9g04syx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 200px;
    height: 44px;
    border-radius: 8px;
    border: none;
    background-color: #1a5f6f;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 600;
    font-family: 'Manrope', sans-serif;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.aims-success-btn-print:hover[b-f6r9g04syx] {
    background-color: #004D46;
}

[data-theme="dark"] .aims-success-btn-print[b-f6r9g04syx] {
    background-color: #1a5f6f;
    color: #FFFFFF;
}

[data-theme="dark"] .aims-success-btn-print:hover[b-f6r9g04syx] {
    background-color: #004D46;
}

[data-theme="light"] .aims-success-btn-print[b-f6r9g04syx] {
    background-color: #1a5f6f;
    color: #FFFFFF;
}

[data-theme="light"] .aims-success-btn-print:hover[b-f6r9g04syx] {
    background-color: #004D46;
}

/* Print note */
.aims-success-print-note[b-f6r9g04syx] {
    font-size: 13px;
    font-weight: 400;
    color: #718096;
}

/* =========================================================================
   Divider
   ========================================================================= */
.aims-success-divider[b-f6r9g04syx] {
    height: 1px;
    background-color: #E2E8F0;
    opacity: 0.15;
}

/* =========================================================================
   Navigation Buttons
   ========================================================================= */
.aims-success-nav[b-f6r9g04syx] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

/* Kembali ke Senarai Aset (secondary) */
.aims-success-btn-back[b-f6r9g04syx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 20px;
    border-radius: 8px;
    border: none;
    background-color: #0D1B2A;
    color: #A0AEC0;
    font-size: 13px;
    font-weight: 500;
    font-family: 'Manrope', sans-serif;
    cursor: pointer;
}

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

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

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

/* Daftar Aset Baru (primary — black/teal) */
.aims-success-btn-new[b-f6r9g04syx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 20px;
    border-radius: 8px;
    border: none;
    background-color: #0D1B2A;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Manrope', sans-serif;
    cursor: pointer;
}

.aims-success-btn-new:hover[b-f6r9g04syx] {
    background-color: #1A2332;
}

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

[data-theme="light"] .aims-success-btn-new:hover[b-f6r9g04syx] {
    background-color: #1E293B;
}
/* /Components/Pages/Dashboard/R04FacilityDashboard.razor.rz.scp.css */
/* ============================================================================
   R04 Bahagian Fasiliti Dashboard — scoped styles (STORY-122)
   Governing wireframes per KD-12: Q0FWrI (Light) / cCJ8I (Dark), 1440×2140.
   G59: every hardcoded hex lives in a --r04-* token with a [data-theme="dark"]
   counterpart — no naked hex outside the token blocks.
   G29: RadzenDataGrid styling via --rz-grid-* overrides on the wrapper div only.
   ============================================================================ */

.r04-dash[b-40jgupevjb] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    font-family: 'Inter', 'Manrope', sans-serif;

    /* ── Wireframe palette tokens — Light (Q0FWrI) ── */
    --r04-accent: var(--r04-teal);
    --r04-teal: #4DD9C0;
    --r04-green: #22C55E;
    --r04-blue: #3B82F6;
    --r04-grey: #8899AA;
    --r04-red: #EF4444;
    --r04-orange: #F97316;
    --r04-amber: #EAB308;
    --r04-green-deep: #38A169;
    --r04-red-deep: #E53E3E;
    --r04-purple: #805AD5;
    --r04-blue-deep: #3182CE;
    --r04-jb-orange: #DD6B20;

    --r04-bucket-amber-bg: #FFFBEB;
    --r04-bucket-amber-dot: #F59E0B;
    --r04-bucket-amber-value: #B45309;
    --r04-bucket-orange-bg: #FFF7ED;
    --r04-bucket-orange-dot: #F97316;
    --r04-bucket-orange-value: #C2410C;
    --r04-bucket-red-bg: #FEF2F2;
    --r04-bucket-red-dot: #EF4444;
    --r04-bucket-red-value: #DC2626;

    --r04-table-header-bg: #F1F5F9;
    --r04-table-header-text: #4A5568;
    --r04-row-alt: #FAFBFC;
    --r04-hover-bg: #F7F8FA;
}

[data-theme="dark"] .r04-dash[b-40jgupevjb] {
    /* ── Wireframe dark palette (cCJ8I): lighter urgency variants,
       dark tint buckets, dark table surfaces. ── */
    --r04-accent: var(--r04-teal);
    --r04-teal: #4DD9C0;
    --r04-green: #68D391;
    --r04-blue: #63B3ED;
    --r04-grey: #8899AA;
    --r04-red: #FC8181;
    --r04-orange: #F6AD55;
    --r04-amber: #F6AD55;
    --r04-green-deep: #38A169;
    --r04-red-deep: #E53E3E;
    --r04-purple: #805AD5;
    --r04-blue-deep: #3182CE;
    --r04-jb-orange: #DD6B20;

    --r04-bucket-amber-bg: #2D2416;
    --r04-bucket-amber-dot: #F59E0B;
    --r04-bucket-amber-value: #F59E0B;
    --r04-bucket-orange-bg: #2D1F18;
    --r04-bucket-orange-dot: #DD6B20;
    --r04-bucket-orange-value: #DD6B20;
    --r04-bucket-red-bg: #2D1A1A;
    --r04-bucket-red-dot: #FC8181;
    --r04-bucket-red-value: #FEB2B2;

    --r04-table-header-bg: #151F2B;
    --r04-table-header-text: #8899AA;
    --r04-row-alt: #151F2B;
    --r04-hover-bg: #162230;
}

/* ── Typography ── */

.r04-section[b-40jgupevjb] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Wireframe sections with a 12px title-to-content gap (Asset Information,
   Incident Status, Incident Complaints, CM, PM). */
.r04-section-12[b-40jgupevjb] {
    gap: 12px;
}

.r04-section-title[b-40jgupevjb] {
    font-size: 18px;
    font-weight: 600;
    color: var(--aims-text-primary);
    margin: 0;
}

.r04-card-title[b-40jgupevjb] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--aims-text-primary);
    margin: 0;
}

.r04-sub-title[b-40jgupevjb] {
    font-size: 13px;
    font-weight: 600;
    color: var(--aims-text-secondary);
}

/* ── Cards ── */

.r04-card[b-40jgupevjb] {
    position: relative;
    background: var(--aims-surface-bg);
    border-radius: 8px;
    box-shadow: var(--aims-card-shadow);
}

/* ── Row 1 — Statistics (2 rows of 4, 271×104; accent bar + icon + label + value) ── */

.r04-stat-grid[b-40jgupevjb] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px 16px;
}

.r04-stat-card[b-40jgupevjb] {
    min-height: 104px;
    padding: 18px 16px 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* 4px left accent bar, per-card color via --r04-accent. */
.r04-stat-card[b-40jgupevjb]::before,
.r04-status-card[b-40jgupevjb]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--r04-accent);
    border-radius: 8px 0 0 8px;
}

.r04-stat-top[b-40jgupevjb] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.r04-stat-label[b-40jgupevjb],
.r04-status-label[b-40jgupevjb] {
    font-size: 12px;
    font-weight: 500;
    color: var(--aims-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.r04-stat-value[b-40jgupevjb] {
    font-size: 26px;
    font-weight: 700;
    color: var(--aims-text-primary);
    line-height: 1.2;
}

.r04-accent-teal[b-40jgupevjb]  { --r04-accent: var(--r04-teal); }
.r04-accent-green[b-40jgupevjb] { --r04-accent: var(--r04-green); }
.r04-accent-blue[b-40jgupevjb]  { --r04-accent: var(--r04-blue); }
.r04-accent-grey[b-40jgupevjb]  { --r04-accent: var(--r04-grey); }
.r04-accent-red[b-40jgupevjb]   { --r04-accent: var(--r04-red); }
.r04-accent-orange[b-40jgupevjb]{ --r04-accent: var(--r04-orange); }
.r04-accent-amber[b-40jgupevjb] { --r04-accent: var(--r04-amber); }

/* ── Row 2 — Asset Health (Warranty / License expiry buckets) ── */

.r04-expiry-cols[b-40jgupevjb] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
}

.r04-expiry-card[b-40jgupevjb] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px 20px 18px;
}

.r04-buckets[b-40jgupevjb] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.r04-bucket[b-40jgupevjb] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 16px 12px;
    border-radius: 8px;
}

.r04-bucket-dot[b-40jgupevjb] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.r04-bucket-value[b-40jgupevjb] {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
}

.r04-bucket-label[b-40jgupevjb] {
    font-size: 12px;
    font-weight: 500;
    color: var(--aims-text-secondary);
}

.r04-bucket-amber[b-40jgupevjb]  { background: var(--r04-bucket-amber-bg); }
.r04-bucket-orange[b-40jgupevjb] { background: var(--r04-bucket-orange-bg); }
.r04-bucket-red[b-40jgupevjb]    { background: var(--r04-bucket-red-bg); }

.r04-bucket-amber  .r04-bucket-dot[b-40jgupevjb]   { background: var(--r04-bucket-amber-dot); }
.r04-bucket-amber  .r04-bucket-value[b-40jgupevjb] { color: var(--r04-bucket-amber-value); }
.r04-bucket-orange .r04-bucket-dot[b-40jgupevjb]   { background: var(--r04-bucket-orange-dot); }
.r04-bucket-orange .r04-bucket-value[b-40jgupevjb] { color: var(--r04-bucket-orange-value); }
.r04-bucket-red    .r04-bucket-dot[b-40jgupevjb]   { background: var(--r04-bucket-red-dot); }
.r04-bucket-red    .r04-bucket-value[b-40jgupevjb] { color: var(--r04-bucket-red-value); }

/* ── Row 3 — Asset Information (RadzenDonutSeries per R05 tuned look, D10) ── */

.r04-chart-cols[b-40jgupevjb] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: stretch;
}

.r04-chart-card[b-40jgupevjb] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
}

/* Center content inside the donut hole (RadzenDonutSeries TitleTemplate —
   renders inside .rz-donut-content, the chart's built-in center slot). */
.r04-donut-total[b-40jgupevjb] {
    font-size: 22px;
    font-weight: 700;
    color: var(--aims-text-primary);
}

.r04-donut-center-label[b-40jgupevjb] {
    font-size: 11px;
    font-weight: 400;
    color: var(--aims-text-secondary);
}

/* ── Row 4a — Incident Status (271×88 cards) ── */

.r04-status-grid[b-40jgupevjb] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.r04-status-card[b-40jgupevjb] {
    min-height: 88px;
    padding: 14px 16px 12px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.r04-status-top[b-40jgupevjb] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.r04-status-value-row[b-40jgupevjb] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.r04-status-value[b-40jgupevjb] {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--r04-accent);
}

.r04-status-dot[b-40jgupevjb] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--r04-accent);
}

/* ── Row 4b — Incident Complaints grid ── */

.r04-incident-card[b-40jgupevjb] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
}

/* G29: grid styling entirely via --rz-grid-* overrides on the wrapper div. */
.r04-incident-grid[b-40jgupevjb] {
    --rz-grid-background-color: var(--aims-surface-bg);
    --rz-grid-header-background-color: var(--r04-table-header-bg);
    --rz-grid-header-color: var(--r04-table-header-text);
    --rz-grid-header-font-size: 11px;
    --rz-grid-header-font-weight: 600;
    --rz-grid-header-text-transform: none;
    --rz-grid-header-cell-padding: 10px 12px;
    --rz-grid-header-cell-border-bottom: none;
    --rz-grid-cell-color: var(--aims-text-primary);
    --rz-grid-cell-font-size: 12px;
    --rz-grid-cell-line-height: 1.4;
    --rz-grid-cell-padding: 10px 12px;
    --rz-grid-cell-border: none;
    --rz-grid-bottom-cell-border: none;
    --rz-grid-stripe-background-color: var(--r04-row-alt);
    --rz-grid-stripe-odd-background-color: var(--aims-surface-bg);
    --rz-grid-hover-background-color: var(--r04-hover-bg);
    --rz-grid-hover-color: var(--aims-text-primary);
    overflow-x: auto;
}

.r04-ref[b-40jgupevjb] {
    color: var(--r04-teal);
    font-size: 12px;
    font-weight: 500;
}

.r04-priority[b-40jgupevjb] {
    font-size: 12px;
    font-weight: 600;
}

.r04-priority-high[b-40jgupevjb] {
    color: var(--r04-red);
}

.r04-priority-medium[b-40jgupevjb] {
    color: var(--r04-amber);
}

.r04-priority-low[b-40jgupevjb] {
    color: var(--r04-green);
}

/* ── Row 5 — CM / PM plain tables (wireframe zebra tables) ── */

.r04-maint-card[b-40jgupevjb] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
}

.r04-sub-group[b-40jgupevjb] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.r04-table-scroll[b-40jgupevjb] {
    overflow-x: auto;
}

.r04-plain-table[b-40jgupevjb] {
    width: 100%;
    border-collapse: collapse;
}

.r04-plain-table th[b-40jgupevjb] {
    background: var(--r04-table-header-bg);
    color: var(--r04-table-header-text);
    font-size: 11px;
    font-weight: 600;
    text-align: left;
    padding: 10px 12px;
    white-space: nowrap;
}

.r04-plain-table td[b-40jgupevjb] {
    font-size: 12px;
    color: var(--aims-text-primary);
    padding: 10px 12px;
    white-space: nowrap;
}

.r04-plain-table tbody tr:nth-child(even) td[b-40jgupevjb] {
    background: var(--r04-row-alt);
}

.r04-col-ref[b-40jgupevjb]   { width: 155px; }
.r04-col-loc[b-40jgupevjb]   { width: 120px; }
.r04-col-date[b-40jgupevjb]  { width: 105px; }
.r04-col-vendor[b-40jgupevjb]{ width: 155px; }

/* ── Responsive (canonical 768/480 tiers) ── */

@media (max-width: 768px) {
    .r04-stat-grid[b-40jgupevjb] {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .r04-expiry-cols[b-40jgupevjb],
    .r04-chart-cols[b-40jgupevjb] {
        grid-template-columns: 1fr;
    }

    .r04-status-grid[b-40jgupevjb] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .r04-stat-grid[b-40jgupevjb],
    .r04-status-grid[b-40jgupevjb] {
        grid-template-columns: 1fr;
    }

    .r04-buckets[b-40jgupevjb] {
        grid-template-columns: 1fr;
    }

}
/* /Components/Pages/Dashboard/R05FinanceDashboard.razor.rz.scp.css */
/* ============================================================================
   R05 Bahagian Kewangan (Finance Division) Dashboard — scoped styles (STORY-124)
   Governing wireframes: f6luL (Light, 1440×2504) / o1H3n (Dark, 1440×2576).
   G59: every hardcoded hex lives in a --r05-* token with a [data-theme="dark"]
   counterpart — no naked hex outside the token blocks (G72 cross-checked both
   frames field-by-field: dark lightens navy/grey chart segments and status
   values, keeps the bar chart fills identical).
   G29: RadzenDataGrid styling via --rz-grid-* overrides on the wrapper div only.
   ============================================================================ */

.r05-dash[b-c0udcy63mp] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    font-family: 'Inter', 'Manrope', sans-serif;

    /* ── Wireframe palette tokens — Light (f6luL) ── */
    --r05-text-secondary: #A0AEC0;
    --r05-green: #38A169;
    --r05-red: #E53E3E;
    --r05-orange: #DD6B20;
    --r05-red-deep: #C53030;
    --r05-grey: #A0AEC0;

    /* Chart segments (frame fills): teal/green/blue/purple/jb/red stay constant
       across themes; navy and grey lighten in dark (G72). */
    --r05-chart-teal: #4DD9C0;
    --r05-chart-green: #38A169;
    --r05-chart-navy: #0D1B2A;
    --r05-chart-grey: #A0AEC0;
    --r05-chart-jb: #DD6B20;
    --r05-chart-red: #E53E3E;
    --r05-chart-purple: #805AD5;
    --r05-chart-blue: #3182CE;

    /* Monthly expenditure bars (Jan–Dec fills — identical in o1H3n, G72) */
    --r05-bar-1: #4DD9C0;
    --r05-bar-2: #38B2AC;
    --r05-bar-3: #319795;
    --r05-bar-4: #2C7A78;
    --r05-bar-5: #2B6CB0;
    --r05-bar-6: #3182CE;
    --r05-bar-7: #4299E1;
    --r05-bar-8: #63B3ED;

    --r05-total-bg: #FFF5F5;
    --r05-bucket-bg: #FFF5F5;
    --r05-table-header-bg: #F7F8FA;
    --r05-table-header-text: #4A5568;
    --r05-row-alt: #FAFBFC;
    --r05-hover-bg: #F7F8FA;
    --r05-donut-count-fill: #FFFFFF;
}

[data-theme="dark"] .r05-dash[b-c0udcy63mp] {
    /* ── Wireframe dark palette (o1H3n): lighter status values, dark tint
       buckets/total card, dark table surfaces, lightened chart segments. ── */
    --r05-text-secondary: #8899AA;
    --r05-green: #68D391;
    --r05-red: #FC8181;
    --r05-orange: #F6AD55;
    --r05-red-deep: #FEB2B2;
    --r05-grey: #8899AA;

    --r05-chart-teal: #4DD9C0;
    --r05-chart-green: #38A169;
    --r05-chart-navy: #E2E8F0;
    --r05-chart-grey: #8899AA;
    --r05-chart-jb: #DD6B20;
    --r05-chart-red: #E53E3E;
    --r05-chart-purple: #805AD5;
    --r05-chart-blue: #3182CE;

    /* Bar chart fills are identical in o1H3n (G72 cross-check) — no override. */

    --r05-total-bg: #2D1F1F;
    --r05-bucket-bg: #2D1F1F;
    --r05-table-header-bg: #151F2B;
    --r05-table-header-text: #4A5568;
    --r05-row-alt: #151F2B;
    --r05-hover-bg: #162230;
    --r05-donut-count-fill: #1A2332;
}

/* ── Typography ── */

.r05-section[b-c0udcy63mp] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.r05-section-title[b-c0udcy63mp] {
    font-size: 16px;
    font-weight: 600;
    color: var(--aims-text-primary);
    margin: 0;
}

.r05-subgroup[b-c0udcy63mp] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Cards ── */

.r05-card[b-c0udcy63mp] {
    background: var(--aims-surface-bg);
    border-radius: 8px;
    box-shadow: var(--aims-card-shadow);
}

.r05-stat-card[b-c0udcy63mp] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 20px;
}

.r05-stat-label[b-c0udcy63mp] {
    font-size: 12px;
    font-weight: 400;
    color: var(--r05-text-secondary);
}

.r05-stat-value[b-c0udcy63mp] {
    font-size: 24px;
    font-weight: 700;
    color: var(--aims-text-primary);
    line-height: 1.2;
}

/* Monthly-summary cards render 22px values (frame f6luL) */
.r05-stat-value-sm[b-c0udcy63mp] {
    font-size: 22px;
}

.r05-val-green[b-c0udcy63mp]  { color: var(--r05-green); }
.r05-val-red[b-c0udcy63mp]    { color: var(--r05-red); }
.r05-val-orange[b-c0udcy63mp] { color: var(--r05-orange); }
.r05-val-grey[b-c0udcy63mp]   { color: var(--r05-grey); }

/* S4 Total Disposal Value card — tinted surface (frame #FFF5F5 / #2D1F1F) */
.r05-card-total[b-c0udcy63mp] {
    background: var(--r05-total-bg);
}

/* ── Stat-card row grids — desktop base tier (frames f6luL/o1H3n) ──
   S1/S1b render 2×2 (repeat(2,1fr)), S2/S3/S5 rows of 3, S4 row of 4.
   Base rules MUST exist at the top level — without them the rows fall
   back to block flow and every card stacks full-width 1-per-row at
   desktop (mirrors R04FacilityDashboard.razor.css:131/191/205/250/359).
   Media tiers below narrow to 2 then 1 column. */

.r05-row-2[b-c0udcy63mp] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.r05-row-3[b-c0udcy63mp] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.r05-row-4[b-c0udcy63mp] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

/* ── S1 — Monthly expenditure bar chart ── */

.r05-chart-card[b-c0udcy63mp] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 24px;
    min-height: 320px;
}

.r05-chart-subtitle[b-c0udcy63mp] {
    font-size: 13px;
    font-weight: 500;
    color: var(--r05-text-secondary);
}

.r05-chart-plot[b-c0udcy63mp] {
    display: flex;
    gap: 8px;
    height: 210px;
}

.r05-yaxis[b-c0udcy63mp] {
    width: 56px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* Frame f6luL padding [0,0,20,8]: left 8 (label inset), bottom 20. */
    padding: 0 0 20px 8px;
    align-items: flex-end;
}

.r05-y-label[b-c0udcy63mp] {
    font-size: 10px;
    font-weight: 400;
    color: var(--r05-text-secondary);
}

.r05-bars[b-c0udcy63mp] {
    flex: 1;
    display: flex;
    gap: 6px;
    align-items: flex-end;
    padding-top: 12px;
}

.r05-bar-col[b-c0udcy63mp] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
    min-width: 0;
}

.r05-bar-value[b-c0udcy63mp] {
    font-size: 9px;
    font-weight: 600;
    color: var(--aims-text-primary);
    line-height: 1;
}

.r05-bar[b-c0udcy63mp] {
    width: 100%;
    border-radius: 2px 2px 0 0;
}

.r05-bar-month[b-c0udcy63mp] {
    font-size: 10px;
    font-weight: 500;
    color: var(--r05-text-secondary);
    line-height: 1;
}

/* ── S3 / S6 — DataGrid cards ── */

.r05-table-card[b-c0udcy63mp] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 20px;
}

.r05-table-title[b-c0udcy63mp],
.r05-group-title[b-c0udcy63mp],
.r05-donut-card-title[b-c0udcy63mp] {
    font-size: 13px;
    font-weight: 600;
    color: var(--aims-text-primary);
    margin: 0;
}

/* G29: grid styling entirely via --rz-grid-* overrides on the wrapper div. */
.r05-grid[b-c0udcy63mp] {
    --rz-grid-background-color: var(--aims-surface-bg);
    --rz-grid-header-background-color: var(--r05-table-header-bg);
    --rz-grid-header-color: var(--r05-table-header-text);
    --rz-grid-header-font-size: 11px;
    --rz-grid-header-font-weight: 600;
    --rz-grid-header-text-transform: none;
    --rz-grid-header-cell-padding: 10px 12px;
    --rz-grid-header-cell-border-bottom: none;
    --rz-grid-cell-color: var(--aims-text-primary);
    --rz-grid-cell-font-size: 12px;
    --rz-grid-cell-line-height: 1.4;
    --rz-grid-cell-padding: 10px 12px;
    --rz-grid-cell-border: none;
    --rz-grid-bottom-cell-border: none;
    --rz-grid-stripe-background-color: var(--r05-row-alt);
    --rz-grid-stripe-odd-background-color: var(--aims-surface-bg);
    --rz-grid-hover-background-color: var(--r05-hover-bg);
    --rz-grid-hover-color: var(--aims-text-primary);
    overflow-x: auto;
}

/* VERIFY-3: Radzen's header span clips ("Estimation Cost (...") at the 11px
   header font — allow the two-line wrap the frame shows (f6luL/o1H3n).
   ::deep reaches Radzen's inner span; grid-internal DOM carries no scoped
   attribute (G29 — grid theming stays on the wrapper div). */
.r05-grid[b-c0udcy63mp]  .rz-column-title-content {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

.r05-ref[b-c0udcy63mp] {
    color: var(--r05-chart-teal);
    font-size: 12px;
    font-weight: 500;
}

.r05-cell-end[b-c0udcy63mp] {
    display: block;
    text-align: right;
}

/* S6 Type column colors (frame: Preventive #38A169 / Corrective #DD6B20) */
.r05-type-pm[b-c0udcy63mp] {
    color: var(--r05-green);
    font-size: 12px;
}

.r05-type-cm[b-c0udcy63mp] {
    color: var(--r05-orange);
    font-size: 12px;
}

/* ── S5 — Donut charts (RadzenDonutSeries per user snippet, D10) ── */

.r05-chart-cols[b-c0udcy63mp] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: stretch;
}

.r05-donut-card[b-c0udcy63mp] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 20px;
    min-height: 420px;
}

/* Center content inside the donut hole (RadzenDonutSeries TitleTemplate —
   renders inside .rz-donut-content, the chart's built-in center slot). */
.r05-donut-total[b-c0udcy63mp] {
    font-size: 28px;
    font-weight: 700;
    color: var(--aims-text-primary);
    line-height: 1.1;
}

.r05-donut-center-label[b-c0udcy63mp] {
    font-size: 10px;
    font-weight: 500;
    color: var(--r05-text-secondary);
}

/* ── S6 — Expiry buckets ── */

.r05-expiry-cols[b-c0udcy63mp] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
}

.r05-expiry-card[b-c0udcy63mp] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 20px;
}

.r05-buckets[b-c0udcy63mp] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.r05-bucket[b-c0udcy63mp] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    padding: 12px 14px;
    border-radius: 6px;
    background: var(--r05-bucket-bg);
}

.r05-bucket-value[b-c0udcy63mp] {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
}

.r05-bucket-label[b-c0udcy63mp] {
    font-size: 11px;
    font-weight: 500;
    color: var(--r05-text-secondary);
}

.r05-bucket-6[b-c0udcy63mp] { color: var(--r05-orange); }
.r05-bucket-3[b-c0udcy63mp] { color: var(--r05-red); }
.r05-bucket-1[b-c0udcy63mp] { color: var(--r05-red-deep); }

/* ── Responsive (canonical 768/480 tiers) ── */

@media (max-width: 768px) {
    .r05-row-2[b-c0udcy63mp],
    .r05-row-3[b-c0udcy63mp],
    .r05-row-4[b-c0udcy63mp] {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .r05-chart-cols[b-c0udcy63mp],
    .r05-expiry-cols[b-c0udcy63mp] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .r05-row-2[b-c0udcy63mp],
    .r05-row-3[b-c0udcy63mp],
    .r05-row-4[b-c0udcy63mp] {
        grid-template-columns: 1fr;
    }

    .r05-buckets[b-c0udcy63mp] {
        grid-template-columns: 1fr;
    }

    .r05-donut-visual[b-c0udcy63mp],
    .r05-donut-visual-loc[b-c0udcy63mp] {
        flex-direction: column;
    }
}
/* /Components/Pages/Idmc/Users/Create.razor.rz.scp.css */
/* STORY-150 — Create User: Location Lists table + form chrome.
   Scoped to Create.razor (G139 — classes must be defined in THIS page's own stylesheet).
   Every color introduced here carries a [data-theme="dark"] counterpart (G59). */

.aims-form-title-row[b-3guwi9idwp] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}

.aims-form-legend[b-3guwi9idwp] {
    font-size: 12px;
    font-weight: 500;
    color: #DC2626;
}

[data-theme="dark"] .aims-form-legend[b-3guwi9idwp] {
    color: #f87171;
}

.aims-form-section-title[b-3guwi9idwp] {
    font-size: 15px;
    font-weight: 700;
    color: #004D46;
    margin: 0;
}

[data-theme="dark"] .aims-form-section-title[b-3guwi9idwp] {
    color: var(--aims-teal);
}

/* ---- Location Lists table ---- */

.aims-loc-table[b-3guwi9idwp] {
    border: 1px solid var(--aims-border-color);
    border-radius: 8px;
    overflow: hidden;
}

.aims-loc-header[b-3guwi9idwp] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: var(--aims-table-header-bg);
    color: var(--aims-text-secondary);
    font-size: 11px;
    font-weight: 600;
}

.aims-loc-row[b-3guwi9idwp] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
}

.aims-loc-row + .aims-loc-row[b-3guwi9idwp] {
    border-top: 1px solid var(--aims-border-color);
}

.aims-loc-cell[b-3guwi9idwp] {
    display: flex;
    align-items: center;
    min-width: 0;
}

.aims-loc-center[b-3guwi9idwp] {
    justify-content: center;
}

.aims-loc-w-selection[b-3guwi9idwp] {
    flex: 0 0 90px;
}

.aims-loc-w-name[b-3guwi9idwp] {
    flex: 1 1 0;
}

.aims-loc-w-active[b-3guwi9idwp] {
    flex: 0 0 90px;
}

.aims-loc-w-default[b-3guwi9idwp] {
    flex: 0 0 130px;
}

.aims-loc-name[b-3guwi9idwp] {
    color: var(--aims-text-primary);
    font-size: 13px;
}

.aims-loc-checkbox[b-3guwi9idwp],
.aims-loc-radio[b-3guwi9idwp] {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--aims-teal-dark);
    cursor: pointer;
}

[data-theme="dark"] .aims-loc-checkbox[b-3guwi9idwp],
[data-theme="dark"] .aims-loc-radio[b-3guwi9idwp] {
    accent-color: var(--aims-teal);
}

.aims-loc-hint[b-3guwi9idwp] {
    margin-top: 6px;
    font-size: 11px;
    color: #8A9AAA;
}

[data-theme="dark"] .aims-loc-hint[b-3guwi9idwp] {
    color: #94A3B8;
}

.aims-activation-note[b-3guwi9idwp] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    border-radius: 8px;
    background: rgba(77, 217, 192, 0.06);
    color: #004D46;
    font-size: 12px;
    font-weight: 500;
}

[data-theme="dark"] .aims-activation-note[b-3guwi9idwp] {
    background: rgba(77, 217, 192, 0.10);
    color: var(--aims-teal);
}
/* /Components/Pages/Idmc/Users/Detail.razor.rz.scp.css */
/* STORY-150 — User Detail: read-only Locations list.
   Scoped to Detail.razor (G139 — classes must be defined in THIS page's own stylesheet).
   Every color introduced here carries a [data-theme="dark"] counterpart (G59). */

.aims-loc-section[b-tp0uhxp9o1] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.aims-form-section-title[b-tp0uhxp9o1] {
    font-size: 15px;
    font-weight: 700;
    color: #004D46;
    margin: 0;
}

[data-theme="dark"] .aims-form-section-title[b-tp0uhxp9o1] {
    color: var(--aims-teal);
}

.aims-loc-table[b-tp0uhxp9o1] {
    border: 1px solid var(--aims-border-color);
    border-radius: 8px;
    overflow: hidden;
}

.aims-loc-header[b-tp0uhxp9o1] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: var(--aims-table-header-bg);
    color: var(--aims-text-secondary);
    font-size: 11px;
    font-weight: 600;
}

.aims-loc-row[b-tp0uhxp9o1] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
}

.aims-loc-row + .aims-loc-row[b-tp0uhxp9o1] {
    border-top: 1px solid var(--aims-border-color);
}

.aims-loc-row-inactive[b-tp0uhxp9o1] {
    opacity: 0.6;
}

.aims-loc-cell[b-tp0uhxp9o1] {
    display: flex;
    align-items: center;
    min-width: 0;
}

.aims-loc-center[b-tp0uhxp9o1] {
    justify-content: center;
}

.aims-loc-w-name[b-tp0uhxp9o1] {
    flex: 1 1 0;
}

.aims-loc-w-active[b-tp0uhxp9o1] {
    flex: 0 0 110px;
}

.aims-loc-w-default[b-tp0uhxp9o1] {
    flex: 0 0 130px;
}

.aims-loc-name[b-tp0uhxp9o1] {
    color: var(--aims-text-primary);
    font-size: 13px;
    font-weight: 500;
}

.aims-loc-dash[b-tp0uhxp9o1] {
    color: #8A9AAA;
    font-size: 13px;
}

[data-theme="dark"] .aims-loc-dash[b-tp0uhxp9o1] {
    color: #94A3B8;
}

.aims-loc-badge-active[b-tp0uhxp9o1] {
    padding: 2px 8px;
    border-radius: 50px;
    background: rgba(77, 217, 192, 0.12);
    color: #004D46;
    font-size: 10px;
    font-weight: 600;
}

[data-theme="dark"] .aims-loc-badge-active[b-tp0uhxp9o1] {
    background: rgba(77, 217, 192, 0.16);
    color: var(--aims-teal);
}

.aims-loc-badge-inactive[b-tp0uhxp9o1] {
    padding: 2px 8px;
    border-radius: 50px;
    background: #E2E8F0;
    color: #64748B;
    font-size: 10px;
    font-weight: 600;
}

[data-theme="dark"] .aims-loc-badge-inactive[b-tp0uhxp9o1] {
    background: #334155;
    color: #A0AEC0;
}

.aims-loc-badge-default[b-tp0uhxp9o1] {
    padding: 2px 8px;
    border-radius: 50px;
    background: #004D46;
    color: #FFFFFF;
    font-size: 10px;
    font-weight: 600;
}

[data-theme="dark"] .aims-loc-badge-default[b-tp0uhxp9o1] {
    background: var(--aims-teal);
    color: #0D1B2A;
}
/* /Components/Pages/Idmc/Users/Edit.razor.rz.scp.css */
/* STORY-150 — Edit User: Location Lists table + read-only trio chrome.
   Scoped to Edit.razor (G139 — classes must be defined in THIS page's own stylesheet).
   Every color introduced here carries a [data-theme="dark"] counterpart (G59). */

.aims-form-section-title[b-y6jfm1ep46] {
    font-size: 15px;
    font-weight: 700;
    color: #004D46;
    margin: 0;
}

[data-theme="dark"] .aims-form-section-title[b-y6jfm1ep46] {
    color: var(--aims-teal);
}

/* ---- Read-only trio (Employee Name / IC Number / Email) ---- */

.aims-readonly-box[b-y6jfm1ep46] {
    display: flex;
    align-items: center;
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid var(--aims-border-color);
    border-radius: 8px;
    background: var(--aims-bg-secondary);
    color: #94A3B8;
    font-size: 13px;
    font-weight: 500;
}

[data-theme="dark"] .aims-readonly-box[b-y6jfm1ep46] {
    background: var(--aims-bg-secondary);
    color: #94A3B8;
}

.aims-immutable-hint[b-y6jfm1ep46] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 0;
    color: #94A3B8;
    font-size: 11px;
}

[data-theme="dark"] .aims-immutable-hint[b-y6jfm1ep46] {
    color: #94A3B8;
}

/* ---- Location Lists table ---- */

.aims-loc-table[b-y6jfm1ep46] {
    border: 1px solid var(--aims-border-color);
    border-radius: 8px;
    overflow: hidden;
}

.aims-loc-header[b-y6jfm1ep46] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: var(--aims-table-header-bg);
    color: var(--aims-text-secondary);
    font-size: 11px;
    font-weight: 600;
}

.aims-loc-row[b-y6jfm1ep46] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
}

.aims-loc-row + .aims-loc-row[b-y6jfm1ep46] {
    border-top: 1px solid var(--aims-border-color);
}

.aims-loc-cell[b-y6jfm1ep46] {
    display: flex;
    align-items: center;
    min-width: 0;
}

.aims-loc-center[b-y6jfm1ep46] {
    justify-content: center;
}

.aims-loc-w-selection[b-y6jfm1ep46] {
    flex: 0 0 90px;
}

.aims-loc-w-name[b-y6jfm1ep46] {
    flex: 1 1 0;
}

.aims-loc-w-active[b-y6jfm1ep46] {
    flex: 0 0 90px;
}

.aims-loc-w-default[b-y6jfm1ep46] {
    flex: 0 0 130px;
}

.aims-loc-name[b-y6jfm1ep46] {
    color: var(--aims-text-primary);
    font-size: 13px;
}

.aims-loc-checkbox[b-y6jfm1ep46],
.aims-loc-radio[b-y6jfm1ep46] {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--aims-teal-dark);
    cursor: pointer;
}

[data-theme="dark"] .aims-loc-checkbox[b-y6jfm1ep46],
[data-theme="dark"] .aims-loc-radio[b-y6jfm1ep46] {
    accent-color: var(--aims-teal);
}

.aims-loc-hint[b-y6jfm1ep46] {
    margin-top: 6px;
    font-size: 11px;
    color: #8A9AAA;
}

[data-theme="dark"] .aims-loc-hint[b-y6jfm1ep46] {
    color: #94A3B8;
}
/* /Components/Pages/Incidents/Detail.razor.rz.scp.css */
/* scoped CSS for Pages/Incidents/Detail.razor (STORY-130) */
/* Wireframe reference: R04 IC-S02 Incident Detail Screen - Light Mode (frame vNZbW)
   and R04 IC-S02 Incident Detail Screen - Dark Mode (frame AbyQt). Frame *names*
   say IC-S02 while TIS assigns IC-S02 to the assessment screen — the IDs are
   consumed as-is for this story (plan §3 Step 0, G71); the naming mismatch is
   synced in WIREFRAME_PREFIX_ALIGNMENT_PLAN.md at closeout. */
/* Layout classes (md-*) are mirrored from Pages/Maintenance/Detail.razor.css —
   CSS isolation scopes them per-page, so this page carries its own copy. Color
   values come from the AiMS design tokens in wwwroot/app.css (var(--aims-*)),
   which already carry dark values; only badges/chips need explicit
   [data-theme="dark"] overrides (G59). */

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

.md-page[b-puj211yh8l] {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    background: var(--aims-page-bg);
}

/* ============================================================
   TOP BAR (breadcrumb + page title + back button)
   ============================================================ */

.md-topbar[b-puj211yh8l] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 64px;
    padding: 0 24px;
    background: var(--aims-surface-bg);
    border-bottom: 1px solid var(--aims-border-color);
}

.md-topbar-left[b-puj211yh8l] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.md-breadcrumb[b-puj211yh8l] {
    font-family: 'Manrope', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: var(--aims-text-muted);
}

.md-pagetitle[b-puj211yh8l] {
    font-family: 'Manrope', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--aims-text-primary);
    margin: 0;
}

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

.md-content[b-puj211yh8l] {
    flex: 1;
    background: var(--aims-page-bg);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow-y: auto;
}

/* ============================================================
   BACK BUTTON ROW (wireframe reconcile attempt 2 — left-aligned
   on its own row below the header bar, not inside the topbar)
   ============================================================ */

.md-back-row[b-puj211yh8l] {
    display: flex;
    justify-content: flex-start;
}

/* ============================================================
   SECTION (heading sits on the PAGE BACKGROUND above each card —
   wireframe reconcile attempt 2; the card carries no header band)
   ============================================================ */

.md-section[b-puj211yh8l] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.md-section-heading[b-puj211yh8l] {
    font-family: 'Manrope', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--aims-text-primary);
    margin: 0;
}

.md-card[b-puj211yh8l] {
    background: var(--aims-surface-bg);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--aims-card-shadow);
}

.md-card-body[b-puj211yh8l] {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ============================================================
   FIELD GRID (2-col default; long text spans full width)
   ============================================================ */

.md-grid[b-puj211yh8l] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 24px;
}

.md-field[b-puj211yh8l] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.md-field-wide[b-puj211yh8l] {
    grid-column: 1 / -1;
}

/* Wireframe reconcile (attempt 3): field labels are MUTED gray at regular
   weight (wireframe vNZbW label crop dominant text pixel #A0AEC0), not
   text-primary @600 — this restores the label/value hierarchy where the
   value (.md-input, 13px text-primary) reads darker than its label.
   #A0AEC0 matches the muted hint color used across the Maintenance step
   pages; no light-mode token carries it. */
.md-label[b-puj211yh8l] {
    font-family: 'Manrope', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #A0AEC0;
}

/* Dark-theme override (G59) — #A0AEC0 fails contrast on #1A2332 cards. */
[data-theme="dark"] .md-label[b-puj211yh8l] {
    color: var(--aims-text-muted);
}

/* Read-only value — PLAIN TEXT on the card surface (wireframe reconcile
   attempt 2: values are NOT boxed in bordered input-like fields). */
.md-input[b-puj211yh8l] {
    display: flex;
    align-items: center;
    padding: 0;
    border: none;
    background: transparent;
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    color: var(--aims-text-primary);
    flex-wrap: wrap;
    gap: 6px;
    line-height: 1.5;
    min-height: 20px;
}

.md-mono[b-puj211yh8l] {
    font-family: 'Courier New', monospace;
    font-weight: 600;
}

/* ============================================================
   BADGES — aims-badge-incident-* (G100: class SELECTION comes from
   Web/Services/IncidentBadgeMapper.cs; the CSS definitions are page-scoped
   until a future extraction to app.css — plan §3a).
   Class names match dbo.ComplaintActionStatus seed values
   (AimsComplaintMasterData.cs): Draft, New, Application, Approval,
   Maintenance, Resolved, Closed + default fallback.
   G99: badges keep white-space:nowrap so multi-word labels never wrap.
   ============================================================ */

.aims-badge-incident-new[b-puj211yh8l],
.aims-badge-incident-application[b-puj211yh8l],
.aims-badge-incident-approval[b-puj211yh8l],
.aims-badge-incident-maintenance[b-puj211yh8l],
.aims-badge-incident-resolved[b-puj211yh8l],
.aims-badge-incident-draft[b-puj211yh8l],
.aims-badge-incident-closed[b-puj211yh8l],
.aims-badge-incident-default[b-puj211yh8l],
.aims-badge-incident-verification-complete[b-puj211yh8l],
.aims-badge-incident-verification-incomplete[b-puj211yh8l],
.aims-badge-incident-verification-pending[b-puj211yh8l],
.aims-badge-incident-priority-high[b-puj211yh8l],
.aims-badge-incident-priority-medium[b-puj211yh8l],
.aims-badge-incident-priority-low[b-puj211yh8l],
.aims-badge-incident-severity-critical[b-puj211yh8l],
.aims-badge-incident-severity-major[b-puj211yh8l],
.aims-badge-incident-severity-minor[b-puj211yh8l],
.aims-badge-incident-vendor[b-puj211yh8l] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .6875rem;
    font-weight: 600;
    white-space: nowrap;
    overflow-wrap: normal;
}

.aims-badge-incident-new[b-puj211yh8l] {
    background: #DCFCE7; color: #166534;
}
.aims-badge-incident-application[b-puj211yh8l] {
    background: #DBEAFE; color: #1E40AF;
}
.aims-badge-incident-approval[b-puj211yh8l] {
    background: #F3E8FF; color: #6B21A8;
}
.aims-badge-incident-maintenance[b-puj211yh8l] {
    background: #FEF3C7; color: #92400E;
}
.aims-badge-incident-resolved[b-puj211yh8l] {
    background: #FFEDD5; color: #9A3412;
}
.aims-badge-incident-draft[b-puj211yh8l] {
    background: #F1F5F9; color: #475569; border: 1px solid #CBD5E1;
}
.aims-badge-incident-closed[b-puj211yh8l] {
    background: #E2E8F0; color: #334155;
}
.aims-badge-incident-default[b-puj211yh8l] {
    background: #F8FAFC; color: #64748B; border: 1px solid #E2E8F0;
}

/* Verification Status badges — values map to IncidentComplaintCompletedType
   (Complete = 0, Incomplete = 1, PendingVerification = 2); NULL renders as
   "Pending Verification". Label: IncidentComplaintCompletedTypeExtensions.GetLabel. */
.aims-badge-incident-verification-complete[b-puj211yh8l] {
    background: #DCFCE7; color: #166534;
}
.aims-badge-incident-verification-incomplete[b-puj211yh8l] {
    background: #FEE2E2; color: #991B1B;
}
.aims-badge-incident-verification-pending[b-puj211yh8l] {
    /* Wireframe frames vNZbW/AbyQt render Pending Verification amber (same
       palette as the maintenance badge) in BOTH themes. */
    background: #FEF3C7; color: #92400E;
}

/* Priority chips — wireframe vNZbW shows "High" as a RED chip; Medium amber,
   Low green. Values are free-text (IncidentReporting.PriorityName), matched
   case-insensitively by IncidentBadgeMapper.PriorityClass; unknown → default. */
.aims-badge-incident-priority-high[b-puj211yh8l] {
    background: #FEE2E2; color: #991B1B;
}
.aims-badge-incident-priority-medium[b-puj211yh8l] {
    background: #FEF3C7; color: #92400E;
}
.aims-badge-incident-priority-low[b-puj211yh8l] {
    background: #DCFCE7; color: #166534;
}

/* Severity chips — wireframe vNZbW shows "Major" as an ORANGE chip;
   Critical red, Minor green. Same free-text matching caveat as Priority. */
.aims-badge-incident-severity-critical[b-puj211yh8l] {
    background: #FEE2E2; color: #991B1B;
}
.aims-badge-incident-severity-major[b-puj211yh8l] {
    background: #FEF3C7; color: #92400E;
}
.aims-badge-incident-severity-minor[b-puj211yh8l] {
    background: #DCFCE7; color: #166534;
}

/* Vendor chip — wireframe vNZbW renders the vendor name in a GREEN chip. */
.aims-badge-incident-vendor[b-puj211yh8l] {
    background: #DCFCE7; color: #166534;
}

/* ── Dark theme overrides (G59) ─────────── */
[data-theme="dark"] .aims-badge-incident-priority-high[b-puj211yh8l] {
    background: #991B1B; color: #FEE2E2;
}
[data-theme="dark"] .aims-badge-incident-priority-medium[b-puj211yh8l] {
    background: #78350F; color: #FEF3C7;
}
[data-theme="dark"] .aims-badge-incident-priority-low[b-puj211yh8l] {
    background: #14532D; color: #DCFCE7;
}
[data-theme="dark"] .aims-badge-incident-severity-critical[b-puj211yh8l] {
    background: #991B1B; color: #FEE2E2;
}
[data-theme="dark"] .aims-badge-incident-severity-major[b-puj211yh8l] {
    background: #78350F; color: #FEF3C7;
}
[data-theme="dark"] .aims-badge-incident-severity-minor[b-puj211yh8l] {
    background: #14532D; color: #DCFCE7;
}
[data-theme="dark"] .aims-badge-incident-vendor[b-puj211yh8l] {
    background: #14532D; color: #DCFCE7;
}
[data-theme="dark"] .aims-badge-incident-new[b-puj211yh8l] {
    background: #14532D; color: #DCFCE7;
}
[data-theme="dark"] .aims-badge-incident-application[b-puj211yh8l] {
    background: #1E3A8A; color: #DBEAFE;
}
[data-theme="dark"] .aims-badge-incident-approval[b-puj211yh8l] {
    background: #581C87; color: #F3E8FF;
}
[data-theme="dark"] .aims-badge-incident-maintenance[b-puj211yh8l] {
    background: #78350F; color: #FEF3C7;
}
[data-theme="dark"] .aims-badge-incident-resolved[b-puj211yh8l] {
    background: #7C2D12; color: #FFEDD5;
}
[data-theme="dark"] .aims-badge-incident-draft[b-puj211yh8l] {
    background: #334155; color: #F1F5F9; border-color: #475569;
}
[data-theme="dark"] .aims-badge-incident-closed[b-puj211yh8l] {
    background: #334155; color: #E2E8F0;
}
[data-theme="dark"] .aims-badge-incident-default[b-puj211yh8l] {
    background: #1E293B; color: #94A3B8; border-color: #334155;
}
[data-theme="dark"] .aims-badge-incident-verification-complete[b-puj211yh8l] {
    background: #14532D; color: #DCFCE7;
}
[data-theme="dark"] .aims-badge-incident-verification-incomplete[b-puj211yh8l] {
    background: #991B1B; color: #FEE2E2;
}
[data-theme="dark"] .aims-badge-incident-verification-pending[b-puj211yh8l] {
    background: #78350F; color: #FEF3C7;
}

/* ============================================================
   ASSET WARRANTY CHIP (wireframe "Active — Until 14/03/2027")
   ============================================================ */

.ic-warranty[b-puj211yh8l] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .6875rem;
    font-weight: 600;
    white-space: nowrap;
    overflow-wrap: normal;
}

.ic-warranty-active[b-puj211yh8l] {
    background: #DCFCE7;
    color: #166534;
}

.ic-warranty-expired[b-puj211yh8l] {
    background: #FEE2E2;
    color: #991B1B;
}

/* Dark-theme overrides (G59) */
[data-theme="dark"] .ic-warranty-active[b-puj211yh8l] {
    background: #14532D;
    color: #DCFCE7;
}

[data-theme="dark"] .ic-warranty-expired[b-puj211yh8l] {
    background: #991B1B;
    color: #FEE2E2;
}

/* ============================================================
   BACK BUTTON (AC-10)
   ============================================================ */

/* Wireframe reconcile (attempt 3): the back button is a BORDERLESS
   light-gray filled chip (--aims-icon-btn-bg, #F0F1F3 light / #1A2332 dark —
   adaptive, no dark override needed) with a slightly darker/larger label,
   not a white button with a 1px border. Geometry (h38 / radius 8) unchanged. */
.md-btn[b-puj211yh8l] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 18px;
    border: none;
    border-radius: 8px;
    background: var(--aims-icon-btn-bg);
    color: var(--aims-text-primary);
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}

.md-btn:hover[b-puj211yh8l] {
    background: var(--aims-icon-btn-hover);
    color: var(--aims-text-primary);
}

/* ============================================================
   LOADING STATE (AC-11)
   ============================================================ */

.md-loading[b-puj211yh8l] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 80px 24px;
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    color: var(--aims-text-secondary);
    background: var(--aims-page-bg);
}

.md-spinner[b-puj211yh8l] {
    width: 18px;
    height: 18px;
    border: 2px solid var(--aims-border-color);
    border-top-color: var(--aims-text-primary);
    border-radius: 50%;
    animation: md-spin-b-puj211yh8l 0.7s linear infinite;
}

@keyframes md-spin-b-puj211yh8l {
    to { transform: rotate(360deg); }
}

/* ============================================================
   NOT-FOUND / ERROR STATE (AC-10, AC-11)
   ============================================================ */

.md-error[b-puj211yh8l] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 24px;
    text-align: center;
    gap: 14px;
    background: var(--aims-page-bg);
}

.md-error-icon[b-puj211yh8l] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #FEE2E2;
    color: #991B1B;
    font-family: 'Manrope', sans-serif;
    font-size: 26px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Dark-mode error icon contrast override (G59). */
[data-theme="dark"] .md-error-icon[b-puj211yh8l] {
    background: rgba(239, 68, 68, 0.18);
    color: #FCA5A5;
}

.md-error h3[b-puj211yh8l] {
    font-family: 'Manrope', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--aims-text-primary);
    margin: 0;
}

.md-error p[b-puj211yh8l] {
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    color: var(--aims-text-secondary);
    margin: 0;
    max-width: 420px;
}

/* ============================================================
   RESPONSIVE (2-col → 1-col)
   ============================================================ */

@media (max-width: 768px) {
    .md-grid[b-puj211yh8l] {
        grid-template-columns: 1fr;
    }

    .md-content[b-puj211yh8l] {
        padding: 16px;
    }

    .md-topbar[b-puj211yh8l] {
        padding: 0 16px;
    }

    .md-card-body[b-puj211yh8l] {
        padding-left: 16px;
        padding-right: 16px;
    }
}
/* /Components/Pages/Incidents/Verify.razor.rz.scp.css */
/* scoped CSS for Pages/Incidents/Verify.razor (STORY-132) */
/* Wireframe reference: R04 IC-S04 Incident Assessment Screen - Light Mode
   (frame kcZAt) and R04 IC-S04 Incident Assessment Screen - Dark Mode (frame
   yqGJE). Frame *names* say IC-S04 while TIS assigns IC-S02 to the assessment
   screen — the naming drift is flagged to the designer at closeout
   (WIREFRAME_PREFIX_ALIGNMENT_PLAN sync, plan §4 divergence 3).
   Layout classes (md-*) mirror Pages/Incidents/Detail.razor.css (STORY-130)
   — CSS isolation scopes them per-page, so this page carries its own copy.
   Unlike the Detail screen (heading above the card), this wireframe carries a
   grey CARD-HEADER BAND inside each card (kcZAt "Card Header" #F7F8FA) — the
   md-card-header block below implements it.
   Color values come from the AiMS design tokens in wwwroot/app.css
   (var(--aims-*), which already carry dark values) or get explicit
   [data-theme="dark"] overrides (G59). Badge base rules reuse the SHIPPED
   incident palette from Detail.razor.css (G103 — shared classes must not
   drift between screens); the dark-mode treatment deliberately diverges
   (see the badge block below — yqGJE keeps light pastel fills in dark
   mode, so the inverted dark overrides were dropped on this page). */

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

.md-page[b-27xr802n3b] {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    background: var(--aims-page-bg);
}

/* ============================================================
   CONTENT AREA
   The wireframe renders a SINGLE 64px header bar (breadcrumb eyebrow
   + title + right cluster) — that is the shared TopBar
   (aims-header), so this page has NO page-level topbar band. A
   second 64px band pushed the content 88px lower than the
   wireframe (VERIFY reconcile attempt 2); content starts
   directly below the 64px TopBar.
   VERIFY reconcile (attempt 3): the app shell .aims-content already
   applies the 24px page inset, so a second 24px here doubled it to
   48px (back row y=112 vs wireframe 88; cards x=308/w=1084 vs
   x=284/w=1132). Padding is 0 — the shell owns the inset.
   ============================================================ */

.md-content[b-27xr802n3b] {
    flex: 1;
    background: var(--aims-page-bg);
    padding: 0;
    display: flex;
    flex-direction: column;
    /* Wireframe card-to-card gap is 24px (VERIFY reconcile attempt 2). */
    gap: 24px;
    overflow-y: auto;
}

/* ============================================================
   BACK BUTTON ROW (left-aligned on its own row below the
   header bar — wireframe kcZAt "Btn Kembali")
   ============================================================ */

.md-back-row[b-27xr802n3b] {
    display: flex;
    justify-content: flex-start;
}

/* ============================================================
   CARD (wireframe kcZAt: white card with a grey CARD-HEADER BAND
   — differs from the Detail screen's heading-above-card layout)
   ============================================================ */

.md-card[b-27xr802n3b] {
    background: var(--aims-surface-bg);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--aims-card-shadow);
}

/* Wireframe kcZAt "Card Header" — #F7F8FA light (--aims-page-bg) /
   #0D1B2A dark (--aims-navy) band, G59 dark override. */
.md-card-header[b-27xr802n3b] {
    padding: 12px 20px;
    background: var(--aims-page-bg);
    border-bottom: 1px solid var(--aims-border-color);
}

[data-theme="dark"] .md-card-header[b-27xr802n3b] {
    background: var(--aims-navy);
}

.md-card-heading[b-27xr802n3b] {
    font-family: 'Manrope', sans-serif;
    font-size: 12px;
    font-weight: 600;
    /* VERIFY reconcile (attempt 4): the wireframe Card Header band renders
       the 12px heading with tight leading — default 1.5 made the band 43px
       (12px text + 24px padding + 1px border); 1.33 gives the 41px band the
       kcZAt/yqGJE frames draw (card 475 → 426px target). */
    line-height: 1.33;
    color: var(--aims-text-primary);
    margin: 0;
}

.md-card-body[b-27xr802n3b] {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ============================================================
   FIELD GRID (2-col default; long text spans full width)
   ============================================================ */

.md-grid[b-27xr802n3b] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* VERIFY reconcile (attempt 4): row gap 14px → 12px — the wireframe
       field-row pitch is 49-53px; 14px + 6px field gap + 20px value
       measured 57-60px live. */
    gap: 12px 24px;
}

.md-field[b-27xr802n3b] {
    display: flex;
    flex-direction: column;
    /* VERIFY reconcile (attempt 4): label→value gap 6px → 4px (part of the
       +8-10px/row pitch drift vs the wireframe 49-53px). */
    gap: 4px;
    min-width: 0;
}

.md-field-wide[b-27xr802n3b] {
    grid-column: 1 / -1;
}

/* Field labels — muted gray at regular weight (wireframe kcZAt label
   #A0AEC0), matching the Detail screen and the rest of the incident module.
   VERIFY reconcile (attempt 4): tight 1.33 leading (12px → 16px) — the
   browser default 1.5 (18px) inflated the field-row pitch to 57-60px vs the
   wireframe 49-53px. */
.md-label[b-27xr802n3b] {
    font-family: 'Manrope', sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.33;
    color: #A0AEC0;
}

/* Dark-theme override (G59) — #A0AEC0 fails contrast on #1A2332 cards. */
[data-theme="dark"] .md-label[b-27xr802n3b] {
    color: var(--aims-text-muted);
}

/* Read-only value — PLAIN TEXT on the card surface (wireframe kcZAt).
   VERIFY reconcile (attempt 4): line-height 1.5 → 1.46 (13px → 19px) and
   min-height 20 → 19px — part of the +8-10px/row pitch drift fix (the
   wireframe value rows are ~19px tall). */
.md-input[b-27xr802n3b] {
    display: flex;
    align-items: center;
    padding: 0;
    border: none;
    background: transparent;
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    color: var(--aims-text-primary);
    flex-wrap: wrap;
    gap: 6px;
    line-height: 1.46;
    min-height: 19px;
}

/* ============================================================
   VERIFICATION FORM INPUTS (wireframe kcZAt section 2)
   Dropdown h42 / TextArea h90, both #F7F8FA light / #263040 dark
   with a 1px border. The app-wide dark rule
   [data-theme="dark"] select/textarea { border-color:
   var(--aims-border-color) !important } (0,1,1) is beaten here by the
   attribute+class selectors below (0,2,1) — G59/G47.
   ============================================================ */

.md-select[b-27xr802n3b] {
    width: 100%;
    height: 42px;
    padding: 0 12px;
    border: 1px solid var(--aims-border-color);
    border-radius: 6px;
    background: var(--aims-row-alt);
    color: var(--aims-text-primary);
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    box-sizing: border-box;
}

.md-textarea[b-27xr802n3b] {
    width: 100%;
    min-height: 90px;
    padding: 9px 12px;
    border: 1px solid var(--aims-border-color);
    border-radius: 6px;
    background: var(--aims-row-alt);
    color: var(--aims-text-primary);
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    line-height: 1.5;
    box-sizing: border-box;
    /* Wireframe reconcile (attempt 2): kcZAt shows no resize grip on the
       remarks textarea. */
    resize: none;
}

.md-select[b-27xr802n3b]::placeholder,
.md-textarea[b-27xr802n3b]::placeholder {
    color: #94A3B8;
}

/* Dark inputs — wireframe yqGJE dropdown/textarea #263040 with #4A5568 border.
   !important + attribute+class specificity (0,2,0) beats the app-wide
   [data-theme="dark"] select/textarea !important rules (0,1,1) — G59. */
[data-theme="dark"] .md-select[b-27xr802n3b],
[data-theme="dark"] .md-textarea[b-27xr802n3b] {
    background: #263040 !important;
    border-color: #4A5568 !important;
    color: var(--aims-text-primary) !important;
}

[data-theme="dark"] .md-select[b-27xr802n3b]::placeholder,
[data-theme="dark"] .md-textarea[b-27xr802n3b]::placeholder {
    color: #64748B !important;
}

[data-theme="dark"] .md-select option[b-27xr802n3b] {
    background-color: var(--aims-surface-bg);
    color: var(--aims-text-primary);
}

/* G47 — per-field error border that survives BOTH themes. The light rule
   wins in light mode; the dark prefixed selector (0,2,2 + !important) beats
   the app-wide [data-theme="dark"] select/textarea border !important (0,2,1). */
select.md-input-error[b-27xr802n3b],
[data-theme="dark"] select.md-input-error[b-27xr802n3b] {
    border-color: #EF4444 !important;
}

textarea.md-input-error[b-27xr802n3b],
[data-theme="dark"] textarea.md-input-error[b-27xr802n3b] {
    border-color: #EF4444 !important;
}

/* VERIFY reconcile (attempt 4): the wireframe "Submission Completed *"
   label is a SINGLE text node — the asterisk carries no separate red
   color. The red rule is removed so the asterisk inherits the label
   gray (.md-label: #A0AEC0 light / --aims-text-muted dark, G59). */

/* ============================================================
   VERIFIED BUTTON (wireframe kcZAt — teal fill, navy text+icon)
   ============================================================ */

.md-button-row[b-27xr802n3b] {
    display: flex;
    /* Wireframe reconcile (attempt 2): kcZAt Button Row right-aligns the
       Verified button (button x:972 w:120 in a 1092-wide row — 972+120=1092
       = row right edge). */
    justify-content: flex-end;
    margin-top: 4px;
}

.md-verified-btn[b-27xr802n3b] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 24px;
    border: none;
    border-radius: 8px;
    background: var(--aims-teal);
    color: var(--aims-navy);
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: filter 120ms ease;
}

.md-verified-btn:hover:not(:disabled)[b-27xr802n3b] {
    filter: brightness(0.94);
}

.md-verified-btn:disabled[b-27xr802n3b] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ============================================================
   ALREADY-VERIFIED STATE NOTE (wireframe kcZAt "State Note" —
   replaces the Verified button once state is 0/1, xlsx row 43)
   #E8F8F5 light / #1A3A3A dark, teal check-circle icon
   ============================================================ */

.md-state-note[b-27xr802n3b] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-radius: 8px;
    background: #E8F8F5;
    color: #718096;
    font-family: 'Manrope', sans-serif;
    font-size: 12px;
}

[data-theme="dark"] .md-state-note[b-27xr802n3b] {
    background: #1A3A3A;
    color: #A0AEC0;
}

/* ============================================================
   COMPLAINT IMAGES — EMPTY-STATE PLACEHOLDER TILES
   (wireframe kcZAt "Picture-01..04" — 4 tiles with an image icon
   and a Picture-0N label; wireframe reconcile attempt 2 replaces
   the DocumentManager text empty state on this page).
   Shape mirrors the house aims-thumb precedent
   (Maintenance/Corrective/AcknowledgeStep1.razor) with theme
   tokens + G59 dark overrides — the global .aims-thumb classes
   have no dark override and would stay light in dark mode.
   ============================================================ */

.md-image-placeholder-grid[b-27xr802n3b] {
    /* VERIFY reconcile (attempt 3): wireframe kcZAt tiles are 264x160 and
       fill the 1092px row as 4 equal columns at x=0/276/552/828 (3x12px
       gaps) — a fixed 4-col grid, not a left-clustered flex wrap. */
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
}

.md-image-placeholder-tile[b-27xr802n3b] {
    aspect-ratio: 264 / 160;
    min-height: 0;
    border: 1px solid var(--aims-border-color);
    border-radius: 6px;
    background: var(--aims-row-alt);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
}

.md-image-placeholder-icon[b-27xr802n3b] {
    font-size: 32px;
    line-height: 1;
    color: var(--aims-text-muted);
}

.md-image-placeholder-name[b-27xr802n3b] {
    font-family: 'Manrope', sans-serif;
    font-size: 12px;
    color: var(--aims-text-muted);
}

/* ============================================================
   BADGES — aims-badge-incident-* (G100: class SELECTION comes from
   Web/Services/IncidentBadgeMapper.cs; definitions mirror
   Detail.razor.css byte-for-byte — G103 shared-token parity, the
   STORY-130-accepted palette).
   Class names match dbo.ComplaintActionStatus seed values
   (AimsComplaintMasterData.cs): Draft, New, Application, Approval,
   Maintenance, Resolved, Closed + default fallback.
   G99: badges keep white-space:nowrap so multi-word labels never wrap.
   ============================================================ */

.aims-badge-incident-new[b-27xr802n3b],
.aims-badge-incident-application[b-27xr802n3b],
.aims-badge-incident-approval[b-27xr802n3b],
.aims-badge-incident-maintenance[b-27xr802n3b],
.aims-badge-incident-resolved[b-27xr802n3b],
.aims-badge-incident-draft[b-27xr802n3b],
.aims-badge-incident-closed[b-27xr802n3b],
.aims-badge-incident-default[b-27xr802n3b],
.aims-badge-incident-verification-complete[b-27xr802n3b],
.aims-badge-incident-verification-incomplete[b-27xr802n3b],
.aims-badge-incident-verification-pending[b-27xr802n3b],
.aims-badge-incident-priority-high[b-27xr802n3b],
.aims-badge-incident-priority-medium[b-27xr802n3b],
.aims-badge-incident-priority-low[b-27xr802n3b],
.aims-badge-incident-severity-critical[b-27xr802n3b],
.aims-badge-incident-severity-major[b-27xr802n3b],
.aims-badge-incident-severity-minor[b-27xr802n3b],
.aims-badge-incident-vendor[b-27xr802n3b] {
    display: inline-block;
    padding: 3px 10px;
    /* Wireframe badges are ROUNDED-RECT (cornerRadius 4, padding 3/10), not
       pills (VERIFY reconcile attempt 2). */
    border-radius: 4px;
    font-size: .6875rem;
    font-weight: 600;
    white-space: nowrap;
    overflow-wrap: normal;
}

.aims-badge-incident-new[b-27xr802n3b] {
    /* Wireframe kcZAt Action Status "New" is AMBER #FEF3C7/#92400E (same
       palette as Maintenance/verification-pending) — not green (VERIFY
       reconcile attempt 2). */
    background: #FEF3C7; color: #92400E;
}
.aims-badge-incident-application[b-27xr802n3b] {
    background: #DBEAFE; color: #1E40AF;
}
.aims-badge-incident-approval[b-27xr802n3b] {
    background: #F3E8FF; color: #6B21A8;
}
.aims-badge-incident-maintenance[b-27xr802n3b] {
    background: #FEF3C7; color: #92400E;
}
.aims-badge-incident-resolved[b-27xr802n3b] {
    background: #FFEDD5; color: #9A3412;
}
.aims-badge-incident-draft[b-27xr802n3b] {
    background: #F1F5F9; color: #475569; border: 1px solid #CBD5E1;
}
.aims-badge-incident-closed[b-27xr802n3b] {
    background: #E2E8F0; color: #334155;
}
.aims-badge-incident-default[b-27xr802n3b] {
    background: #F8FAFC; color: #64748B; border: 1px solid #E2E8F0;
}

/* Verification Status badges — values map to IncidentComplaintCompletedType
   (Complete = 0, Incomplete = 1, PendingVerification = 2); NULL renders as
   "Pending Verification". Label: IncidentComplaintCompletedTypeExtensions.GetLabel. */
.aims-badge-incident-verification-complete[b-27xr802n3b] {
    background: #DCFCE7; color: #166534;
}
.aims-badge-incident-verification-incomplete[b-27xr802n3b] {
    background: #FEE2E2; color: #991B1B;
}
.aims-badge-incident-verification-pending[b-27xr802n3b] {
    /* Wireframe frames kcZAt/yqGJE render Pending Verification amber (same
       palette as the maintenance badge) in BOTH themes. */
    background: #FEF3C7; color: #92400E;
}

/* Priority chips — wireframe kcZAt shows "High" as a RED chip; Medium amber,
   Low green. Values are free-text (IncidentReporting.PriorityName), matched
   case-insensitively by IncidentBadgeMapper.PriorityClass; unknown → default. */
.aims-badge-incident-priority-high[b-27xr802n3b] {
    background: #FEE2E2; color: #991B1B;
}
.aims-badge-incident-priority-medium[b-27xr802n3b] {
    background: #FEF3C7; color: #92400E;
}
.aims-badge-incident-priority-low[b-27xr802n3b] {
    background: #DCFCE7; color: #166534;
}

/* Severity chips — wireframe kcZAt shows "Major" as an ORANGE chip;
   Critical red, Minor green. Same free-text matching caveat as Priority. */
.aims-badge-incident-severity-critical[b-27xr802n3b] {
    background: #FEE2E2; color: #991B1B;
}
.aims-badge-incident-severity-major[b-27xr802n3b] {
    /* Wireframe kcZAt Severity "Major" fill is #FFEDD5 (light peach-orange,
       same fill as Resolved) — not the amber #FEF3C7 family (VERIFY
       reconcile attempt 2). */
    background: #FFEDD5; color: #9A3412;
}
.aims-badge-incident-severity-minor[b-27xr802n3b] {
    background: #DCFCE7; color: #166534;
}

/* Vendor chip — wireframe kcZAt renders the vendor name in a GREEN chip. */
.aims-badge-incident-vendor[b-27xr802n3b] {
    background: #DCFCE7; color: #166534;
}

/* ── Dark theme ───────────
   VERIFY reconcile (attempt 3): the wireframe dark frame yqGJE renders
   EVERY badge with the SAME light PASTEL fill as the light frame — New /
   Pending Verification #FEF3C7/#92400E, Major #FFEDD5/#9A3412, vendor
   #DCFCE7/#166534 (live inversion #78350F/#FEF3C7, #14532D/#DCFCE7,
   #581C87/#F3E8FF FAILED attempt 2). The inverted [data-theme="dark"]
   overrides are therefore REMOVED on this page — the base pastel rules
   above apply in both themes. Deliberate page-scoped divergence from
   Detail.razor.css (G103) driven by the yqGJE frame; documented at
   closeout with the IC-S04/IC-S02 naming flag. */

/* ============================================================
   ASSET WARRANTY CHIP (wireframe "Active — Until 14/03/2027")
   VERIFY reconcile (attempt 4): wireframe Badge U92eki renders
   cornerRadius 4 + padding 3/10 (same rounded-rect shape as the
   aims-badge-incident-* chips — NOT a pill). The Active badge is
   pastel #DCFCE7 fill with #92400E text (not the #166534 the
   green family uses), and the yqGJE dark frame keeps the same
   light pastel fill in dark mode — the inverted #14532D/#DCFCE7
   dark overrides are REMOVED here, matching the attempt-3 badge
   fix (last inverted-style badge on the screen).
   ============================================================ */

.ic-warranty[b-27xr802n3b] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: .6875rem;
    font-weight: 600;
    white-space: nowrap;
    overflow-wrap: normal;
}

.ic-warranty-active[b-27xr802n3b] {
    background: #DCFCE7;
    color: #92400E;
}

.ic-warranty-expired[b-27xr802n3b] {
    background: #FEE2E2;
    color: #991B1B;
}

/* ============================================================
   BACK BUTTON (AC-10) — wireframe kcZAt: borderless light-gray
   filled chip h40 (--aims-icon-btn-bg #F0F1F3 light / #1A2332 dark,
   adaptive — no dark override needed)
   ============================================================ */

.md-btn[b-27xr802n3b] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 18px;
    border: none;
    border-radius: 8px;
    background: var(--aims-icon-btn-bg);
    color: var(--aims-text-primary);
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}

.md-btn:hover[b-27xr802n3b] {
    background: var(--aims-icon-btn-hover);
    color: var(--aims-text-primary);
}

/* ============================================================
   LOADING STATE (AC-10)
   ============================================================ */

.md-loading[b-27xr802n3b] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 80px 24px;
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    color: var(--aims-text-secondary);
    background: var(--aims-page-bg);
}

.md-spinner[b-27xr802n3b] {
    width: 18px;
    height: 18px;
    border: 2px solid var(--aims-border-color);
    border-top-color: var(--aims-text-primary);
    border-radius: 50%;
    animation: md-spin-b-27xr802n3b 0.7s linear infinite;
}

@keyframes md-spin-b-27xr802n3b {
    to { transform: rotate(360deg); }
}

/* ============================================================
   NOT-FOUND / ERROR STATE (AC-10 — read-only, G55/G85)
   ============================================================ */

.md-error[b-27xr802n3b] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 24px;
    text-align: center;
    gap: 14px;
    background: var(--aims-page-bg);
}

.md-error-icon[b-27xr802n3b] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #FEE2E2;
    color: #991B1B;
    font-family: 'Manrope', sans-serif;
    font-size: 26px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Dark-mode error icon contrast override (G59). */
[data-theme="dark"] .md-error-icon[b-27xr802n3b] {
    background: rgba(239, 68, 68, 0.18);
    color: #FCA5A5;
}

.md-error h3[b-27xr802n3b] {
    font-family: 'Manrope', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--aims-text-primary);
    margin: 0;
}

.md-error p[b-27xr802n3b] {
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    color: var(--aims-text-secondary);
    margin: 0;
    max-width: 420px;
}

/* ============================================================
   RESPONSIVE (2-col → 1-col)
   ============================================================ */

@media (max-width: 768px) {
    .md-grid[b-27xr802n3b] {
        grid-template-columns: 1fr;
    }

    /* 4-up placeholder tiles squeeze on phones — fall back to 2 columns. */
    .md-image-placeholder-grid[b-27xr802n3b] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* The app shell .aims-content owns the page inset at ALL breakpoints
       (VERIFY reconcile attempt 3 — same reasoning as the desktop rule). */
    .md-content[b-27xr802n3b] {
        padding: 0;
    }

    .md-card-body[b-27xr802n3b] {
        padding-left: 16px;
        padding-right: 16px;
    }
}
/* /Components/Pages/Maintenance/Corrective/AcknowledgeStep1.razor.rz.scp.css */
/* AcknowledgeStep1.razor.css — Corrective Maintenance Facility Acknowledge (Step 1) */
/* All layout and typography styles inherited from app.css (aims-wizard, aims-card, aims-field-row, etc.) */
/* /Components/Pages/Maintenance/Corrective/AcknowledgeStep2.razor.rz.scp.css */
/* AcknowledgeStep2.razor.css — Corrective Maintenance Facility Acknowledge (Step 2) */
/* Print styles are in wwwroot/app.css @media print block */
/* /Components/Pages/Maintenance/Corrective/ApplyStep1.razor.rz.scp.css */

/* /Components/Pages/Maintenance/Corrective/VerificationReport.razor.rz.scp.css */
/* VerificationReport.razor.css — STORY-167 Laporan Corrective Maintenance (CM)

   Values are read from the Pencil frames lGFL8 (light) and b0MS1r (dark) in
   aims_wireframes_desktop_v1.pen (restyle 2026-10-27, retrospective §7).
   The sheet is theme-aware: dark mode draws the dark frame's #1A2332 paper,
   and print always uses the light palette because paper is white. */

.cmr-root[b-fo4mzso0i8] {
    --cmr-sheet-bg: #FFFFFF;
    --cmr-head-bg: #F7F9FB;
    --cmr-ink: #0D1B2A;
    --cmr-muted: #64748B;
    --cmr-line: #444444;
    --cmr-line-strong: #444444;
    --cmr-accent: #0F4C81;
    --cmr-on-accent: #FFFFFF;
    --cmr-tick: #4DD9C0;
    --cmr-toolbar-surface: #FFFFFF;
    --cmr-toolbar-icon: #64748B;
    --cmr-toolbar-text: #0D1B2A;

    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-bottom: 24px;
}

[data-theme="dark"] .cmr-root[b-fo4mzso0i8] {
    --cmr-sheet-bg: #1A2332;
    --cmr-head-bg: #151F2B;
    --cmr-ink: #E2E8F0;
    --cmr-muted: #8899AA;
    --cmr-line: #4A5568;
    --cmr-line-strong: #8899AA;
    --cmr-toolbar-surface: #1A2332;
    --cmr-toolbar-icon: #8899AA;
    --cmr-toolbar-text: #E2E8F0;
}

/* ── toolbars (top / bottom) ────────────────────────────────────────── */

.cmr-toolbar[b-fo4mzso0i8] {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.cmr-btn[b-fo4mzso0i8] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 16px;
    border: 0;
    border-radius: 6px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
}

.cmr-btn:hover[b-fo4mzso0i8] {
    opacity: 0.85;
}

.cmr-btn-back[b-fo4mzso0i8] {
    background: var(--cmr-toolbar-surface);
    color: var(--cmr-toolbar-text);
}

.cmr-btn-back i[b-fo4mzso0i8] {
    color: var(--cmr-toolbar-icon);
    font-size: 16px;
}

.cmr-btn-print[b-fo4mzso0i8] {
    background: var(--cmr-tick);
    color: #0D1B2A;
    font-weight: 700;
}

.cmr-btn-print i[b-fo4mzso0i8] {
    color: #0D1B2A;
    font-size: 18px;
}

/* ── A4 sheets ──────────────────────────────────────────────────────── */

.cmr-sheet[b-fo4mzso0i8] {
    width: 210mm;
    max-width: 100%;
    min-height: 297mm;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 36px;
    background: var(--cmr-sheet-bg);
    color: var(--cmr-ink);
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    font-size: 11px;
    line-height: 1.35;
}

/* AC-11 fixes the page-1 table spacing at 6 mm. The frame draws 12 px on both
   sheets; page 2 has no AC override, so it takes the frame value there. */
.cmr-sheet-1 > * + *[b-fo4mzso0i8] {
    margin-top: 6mm;
}

.cmr-sheet-2 > * + *[b-fo4mzso0i8] {
    margin-top: 12px;
}

/* ── title box ──────────────────────────────────────────────────────── */

.cmr-title-box[b-fo4mzso0i8] {
    box-sizing: border-box;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    background: var(--cmr-head-bg);
    border: 1px solid var(--cmr-line-strong);
    color: var(--cmr-ink);
    font-size: 13px;
    font-weight: 700;
    text-align: center;
}

/* ── section bands ──────────────────────────────────────────────────── */

.cmr-band[b-fo4mzso0i8] {
    box-sizing: border-box;
    height: 27px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    background: var(--cmr-accent);
    color: var(--cmr-on-accent);
    font-size: 11px;
    font-weight: 700;
}

/* ── report tables ──────────────────────────────────────────────────── */

.cmr-table[b-fo4mzso0i8] {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--cmr-line);
}

.cmr-meta[b-fo4mzso0i8] {
    border-color: var(--cmr-line-strong);
}

/* NOTE: the generic `.cmr-table td` rule outranks a single class, so every
   override below is written as `.cmr-table td.<class>` (STORY-167 lesson). */
.cmr-table td[b-fo4mzso0i8] {
    padding: 6px 10px;
    border: 0;
    border-bottom: 1px solid var(--cmr-line);
    color: var(--cmr-ink);
    font-size: 11px;
    font-weight: 500;
    text-align: left;
    vertical-align: top;
}

/* Only the body's last row loses its rule; the header row keeps its bottom
   rule (the frame draws it). */
.cmr-table tbody tr:last-child td[b-fo4mzso0i8] {
    border-bottom: 0;
}

.cmr-table td.cmr-label[b-fo4mzso0i8] {
    width: 21%;
    color: var(--cmr-muted);
    font-weight: 600;
}

.cmr-table td.cmr-label-inline[b-fo4mzso0i8] {
    width: 11%;
}

.cmr-table td.cmr-head[b-fo4mzso0i8] {
    padding: 7px 8px;
    background: var(--cmr-head-bg);
    color: var(--cmr-muted);
    font-size: 10px;
    font-weight: 600;
    text-align: center;
    vertical-align: middle;
}

.cmr-table td.cmr-bil[b-fo4mzso0i8] {
    width: 5%;
}

.cmr-table td.cmr-num[b-fo4mzso0i8] {
    width: 5%;
    text-align: center;
    vertical-align: middle;
    font-weight: 600;
}

.cmr-table td.cmr-tick[b-fo4mzso0i8] {
    width: 6%;
    text-align: center;
    vertical-align: middle;
}

.cmr-table td.cmr-ulasan-head[b-fo4mzso0i8] {
    width: 52%;
}

.cmr-table td.cmr-ya[b-fo4mzso0i8],
.cmr-table td.cmr-tidak[b-fo4mzso0i8] {
    width: 10.5%;
    text-align: center;
    vertical-align: middle;
}

.cmr-table td.cmr-comment[b-fo4mzso0i8] {
    color: var(--cmr-muted);
    font-size: 10px;
    font-weight: 500;
    vertical-align: top;
    white-space: pre-wrap;
    border-left: 1px solid var(--cmr-line);
}

/* Checklist data rows are 32 px tall in the frame. */
.cmr-checklist td[b-fo4mzso0i8] {
    padding: 8px;
}

.cmr-checklist td.cmr-head[b-fo4mzso0i8] {
    padding: 7px 8px;
}

.cmr-tick-mark[b-fo4mzso0i8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--cmr-tick);
    font-size: 14px;
    line-height: 1;
}

/* ── PENGESAHAN — outer box only, no internal rules ─────────────────── */

.cmr-signoff[b-fo4mzso0i8] {
    display: flex;
    gap: 24px;
    padding: 12px 14px;
    border: 1px solid var(--cmr-line);
}

.cmr-sign-col[b-fo4mzso0i8] {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cmr-sign-title[b-fo4mzso0i8] {
    color: var(--cmr-ink);
    font-size: 11px;
    font-weight: 700;
}

.cmr-sign-row[b-fo4mzso0i8] {
    display: flex;
    gap: 6px;
    color: var(--cmr-ink);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.35;
}

.cmr-sign-label[b-fo4mzso0i8] {
    flex: 0 0 80px;
    width: 80px;
}

/* ── page-2 photo sections ──────────────────────────────────────────── */

.cmr-photo-heading[b-fo4mzso0i8] {
    color: var(--cmr-ink);
    font-size: 11px;
    font-weight: 700;
}

.cmr-photo-grid[b-fo4mzso0i8] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 12px;
}

.cmr-photo[b-fo4mzso0i8] {
    /* Two per row, and a lone photo never stretches to the full sheet width. */
    flex: 0 0 calc(50% - 6px);
    max-width: calc(50% - 6px);
    margin: 0;
    box-sizing: border-box;
    padding: 4px;
    background: var(--cmr-head-bg);
    text-align: center;
}

.cmr-photo img[b-fo4mzso0i8] {
    display: block;
    width: 100%;
    /* Fixed height keeps the two-page base template inside A4 no matter how
       many photos a section carries; extra rows grow the page (AC-02). */
    height: 46mm;
    object-fit: cover;
    background: var(--cmr-sheet-bg);
}

.cmr-photo-caption[b-fo4mzso0i8] {
    padding-top: 4px;
    color: var(--cmr-muted);
    font-size: 10px;
    font-weight: 500;
}

/* ── MAKLUMAT INVOIS (30 px top margin — AC-11) ─────────────────────── */

.cmr-invoice-block[b-fo4mzso0i8] {
    margin-top: 30px;
}

.cmr-invoice-block > * + *[b-fo4mzso0i8] {
    margin-top: 12px;
}

.cmr-doc-link[b-fo4mzso0i8] {
    color: var(--cmr-accent);
    font-weight: 600;
    text-decoration: underline;
}

.cmr-doc-hint[b-fo4mzso0i8] {
    color: var(--cmr-accent);
    font-weight: 600;
    margin-left: 6px;
}

.cmr-screen-tag[b-fo4mzso0i8] {
    display: inline-flex;
    align-items: center;
    margin-left: 10px;
    padding: 4px 8px;
    background: var(--cmr-head-bg);
    color: var(--cmr-muted);
    font-size: 10px;
    font-weight: 600;
}

/* ── print ──────────────────────────────────────────────────────────── */

@media print {
    /* Paper is white: force the light palette even when the app is dark. */
    .cmr-root[b-fo4mzso0i8] {
        /* `!important` is required here: `[data-theme="dark"] .cmr-root` is more
           specific and would otherwise win in print, producing dark paper. */
        --cmr-sheet-bg: #FFFFFF !important;
        --cmr-head-bg: #F7F9FB !important;
        --cmr-ink: #0D1B2A !important;
        --cmr-muted: #64748B !important;
        --cmr-line: #444444 !important;
        --cmr-line-strong: #444444 !important;

        gap: 0;
        padding: 0;
        /* Print needs BLOCK layout: a flex container is monolithic in Chromium's
           paged output, so `break-after: page` on sheet 1 is ignored and the whole
           report collapses onto one page (measured). The PM report carries the
           same rule for the same reason. */
        display: block;
        background: #FFFFFF !important;
    }

    /* AC-11 — the toolbars never print. */
    .cmr-toolbar[b-fo4mzso0i8] {
        display: none !important;
    }

    /* AC-10 — the Dokumen Invois row is screen-only. */
    .cmr-invoice-doc-row[b-fo4mzso0i8] {
        display: none !important;
    }

    .cmr-sheet[b-fo4mzso0i8] {
        width: 210mm;
        min-height: 0;
        margin: 0;
        padding: 36px;
    }

    /* Exactly one page break, after sheet 1. Sheet 2 (and any overflow page)
       flows naturally, so a report that grows never gains a trailing blank page. */
    .cmr-sheet-1[b-fo4mzso0i8] {
        break-after: page;
        page-break-after: always;
    }
}
/* /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;
}

/* BUG-053 — the tile is a <button> so the photo opens the shared preview dialog.
   These declarations strip the browser's button chrome; the 84x60 wireframe box,
   its border and its radius are unchanged. The focus outline is deliberately kept. */
.md-thumb[b-mk9l9kc1li] {
    width: 84px;
    height: 60px;
    padding: 0;
    border-radius: 6px;
    background: var(--aims-bg-secondary);
    border: 1px solid var(--aims-border-color);
    font: inherit;
    color: inherit;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Shared teal token (app.css :root) — the same accent the app's primary actions
   use. It has no per-theme override, so hover looks the same in both themes. */
.md-thumb:hover[b-mk9l9kc1li] {
    border-color: var(--aims-teal);
}

/* BUG-053 — the tile now carries the photograph. object-fit: cover keeps the
   84x60 box from the wireframe and crops the image to it instead of distorting. */
.md-thumb img[b-mk9l9kc1li] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ============================================================
   EMPTY STATES (AC-13)
   ============================================================ */

.md-empty[b-mk9l9kc1li] {
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    color: var(--aims-text-muted);
    font-style: italic;
    margin: 4px 0 0 0;
}

.md-empty-inline[b-mk9l9kc1li] {
    color: var(--aims-text-muted);
    font-style: italic;
}

/* ============================================================
   BACK BAR (AC-15)
   ============================================================ */

.md-back-bar[b-mk9l9kc1li] {
    display: flex;
    justify-content: flex-start;
    padding: 4px 0 8px 0;
}

.md-btn[b-mk9l9kc1li] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 18px;
    border: 1px solid var(--aims-border-color);
    border-radius: 8px;
    background: var(--aims-surface-bg);
    color: var(--aims-text-secondary);
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.md-btn:hover[b-mk9l9kc1li] {
    background: var(--aims-bg-secondary);
    border-color: var(--aims-text-muted);
    color: var(--aims-text-primary);
}

.md-btn-back[b-mk9l9kc1li] {
    /* wireframe Back Button node — bordered, neutral */
}

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

.md-loading[b-mk9l9kc1li] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 80px 24px;
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    color: var(--aims-text-secondary);
    background: var(--aims-page-bg);
}

.md-spinner[b-mk9l9kc1li] {
    width: 18px;
    height: 18px;
    border: 2px solid var(--aims-border-color);
    border-top-color: var(--aims-text-primary);
    border-radius: 50%;
    animation: md-spin-b-mk9l9kc1li 0.7s linear infinite;
}

@keyframes md-spin-b-mk9l9kc1li {
    to { transform: rotate(360deg); }
}

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

.md-error[b-mk9l9kc1li] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 24px;
    text-align: center;
    gap: 14px;
    background: var(--aims-page-bg);
}

.md-error-icon[b-mk9l9kc1li] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #FEE2E2;
    color: #991B1B;
    font-family: 'Manrope', sans-serif;
    font-size: 26px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Dark-mode error icon contrast override. */
[data-theme="dark"] .md-error-icon[b-mk9l9kc1li] {
    background: rgba(239, 68, 68, 0.18);
    color: #FCA5A5;
}

.md-error h3[b-mk9l9kc1li] {
    font-family: 'Manrope', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--aims-text-primary);
    margin: 0;
}

.md-error p[b-mk9l9kc1li] {
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    color: var(--aims-text-secondary);
    margin: 0;
    max-width: 420px;
}

/* ============================================================
   RESPONSIVE (wireframe media queries — 4-col → 2-col → 1-col)
   ============================================================ */

@media (max-width: 1000px) {
    .md-grid-3[b-mk9l9kc1li] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .md-grid[b-mk9l9kc1li],
    .md-grid-2[b-mk9l9kc1li],
    .md-grid-3[b-mk9l9kc1li] {
        grid-template-columns: 1fr;
    }

    .md-content[b-mk9l9kc1li] {
        padding: 16px;
    }

    .md-topbar[b-mk9l9kc1li] {
        padding: 0 16px;
    }

    .md-card-header[b-mk9l9kc1li],
    .md-card-body[b-mk9l9kc1li] {
        padding-left: 16px;
        padding-right: 16px;
    }

    .md-table thead th[b-mk9l9kc1li],
    .md-table tbody td[b-mk9l9kc1li] {
        padding: 8px 10px;
    }
}
/* /Components/Pages/Maintenance/Preventive/AcknowledgeStep1.razor.rz.scp.css */
/* AcknowledgeStep1.razor.css — Preventive Maintenance Facility Acknowledge (Step 1) */
/* All layout and typography styles inherited from app.css (aims-wizard, aims-card, aims-field-row, etc.) */
/* /Components/Pages/Maintenance/Preventive/AcknowledgeStep2.razor.rz.scp.css */
/* AcknowledgeStep2.razor.css — Preventive Maintenance Facility Acknowledge (Step 2) */
/* Print styles are in wwwroot/app.css @media print block */
/* /Components/Pages/Maintenance/Preventive/ApplyStep1.razor.rz.scp.css */
/* ApplyStep1.razor.css — Preventive Maintenance Application Step 1 */
/* Follows aims-wizard design tokens: page #F7F8FA, cards #FFFFFF, Manrope font */

/* Override RadzenDropDown height to match input fields */
:deep(.rz-dropdown)[b-wk6stbc8hj] {
    height: 36px !important;
    font-family: Manrope, sans-serif !important;
    font-size: 13px !important;
}
/* /Components/Pages/Maintenance/Preventive/ApprovalStep1.razor.rz.scp.css */
/* ApprovalStep1.razor.css — Preventive Maintenance Approval (Steps 1-3) */
/* Follows aims-wizard design tokens: page #F7F8FA, cards #FFFFFF, Manrope font */

/* ── Decision card states (used in Step 3 via ::deep in parent pages) ── */
/* NOTE: These classes are applied via GetDecisionCardClass() in Step 3's
   inline <style> block because Blazor CSS isolation cannot pierce across
   sibling components. The definitions here serve as design documentation
   for the color tokens used. */

/* ── Responsive adjustments for approval stepper ── */
@media (max-width: 768px) {
    :deep(.aims-stepper-steps)[b-fi4xnlqv29] {
        gap: 8px;
    }
    :deep(.aims-step-circle)[b-fi4xnlqv29] {
        width: 32px; height: 32px; font-size: 12px;
    }
    :deep(.aims-step-label)[b-fi4xnlqv29] {
        font-size: 10px;
    }
}
/* /Components/Pages/Maintenance/Preventive/PmVerificationReport.razor.rz.scp.css */
/* PmVerificationReport.razor.css — STORY-168 Laporan Preventive Maintenance (PM)

   Values are read from the Pencil frames SrFEa (print, light), z9HWNx (print,
   dark), hjoMh (landscape, light) and AfVK0 (landscape, dark) in
   aims_wireframes_desktop_v1.pen (restyle 2026-10-27, retrospective §8).
   The sheet is theme-aware: dark mode draws the dark frame's #1A2332 paper,
   and print always uses the light palette because paper is white. */

.pmr-root[b-2t718n0en0] {
    --pmr-sheet-bg: #FFFFFF;
    --pmr-head-bg: #F7F9FB;
    --pmr-ink: #0D1B2A;
    --pmr-muted: #64748B;
    /* Frame: outer box and header rules are #444; body row rules are #E2E8F0. */
    --pmr-line: #444444;
    --pmr-rule-soft: #E2E8F0;
    --pmr-accent: #0F4C81;
    --pmr-on-accent: #FFFFFF;
    --pmr-tick: #4DD9C0;
    --pmr-link: #0F4C81;
    --pmr-photo-bg: #F7F8FA;
    --pmr-toolbar-surface: #FFFFFF;
    --pmr-toolbar-icon: #64748B;
    --pmr-toolbar-text: #0D1B2A;

    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-bottom: 24px;
}

[data-theme="dark"] .pmr-root[b-2t718n0en0] {
    --pmr-sheet-bg: #1A2332;
    --pmr-head-bg: #151F2B;
    --pmr-ink: #E2E8F0;
    --pmr-muted: #8899AA;
    /* The dark frame draws every rule in #4A5568, body rows included. */
    --pmr-line: #4A5568;
    --pmr-rule-soft: #4A5568;
    --pmr-link: #4DD9C0;
    --pmr-photo-bg: #151F2B;
    --pmr-toolbar-surface: #1A2332;
    --pmr-toolbar-icon: #8899AA;
    --pmr-toolbar-text: #E2E8F0;
}

/* ── toolbars (top / bottom) ────────────────────────────────────────── */

.pmr-toolbar[b-2t718n0en0] {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.pmr-btn[b-2t718n0en0] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 16px;
    border: 0;
    border-radius: 6px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
}

.pmr-btn:hover[b-2t718n0en0] {
    opacity: 0.85;
}

.pmr-btn-back[b-2t718n0en0] {
    background: var(--pmr-toolbar-surface);
    color: var(--pmr-toolbar-text);
}

.pmr-btn-back i[b-2t718n0en0] {
    color: var(--pmr-toolbar-icon);
    font-size: 16px;
}

.pmr-btn-print[b-2t718n0en0] {
    background: var(--pmr-tick);
    color: #0D1B2A;
    font-weight: 700;
}

.pmr-btn-print i[b-2t718n0en0] {
    color: #0D1B2A;
    font-size: 18px;
}

/* ── A4 sheets ──────────────────────────────────────────────────────── */

.pmr-sheet[b-2t718n0en0] {
    /* Frame: 794 × 1123 px paper with a 32 px / 36 px inset. */
    width: 210mm;
    max-width: 100%;
    min-height: 297mm;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 32px 36px;
    background: var(--pmr-sheet-bg);
    color: var(--pmr-ink);
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    /* Frame typography: 11 px body, 10 px column headers, 13 px title. */
    font-size: 11px;
    line-height: 1.35;
}

/* One uniform block gap. Page 1 still fits A4: measured content height is well
   inside the 1059 px content box even with the frame's 5 assets. */
.pmr-sheet > * + *[b-2t718n0en0] {
    margin-top: 12px;
}

/* Landscape ASSET CHECKLIST sheet — A4 landscape (AC-02 / AC-10).
   Frame padding: [24, 32] px and an 8 px gap. */
.pmr-sheet-landscape[b-2t718n0en0] {
    width: 297mm;
    min-height: 210mm;
    padding: 24px 32px;
    display: flex;
    flex-direction: column;
}

.pmr-sheet-landscape > * + *[b-2t718n0en0] {
    margin-top: 8px;
}

/* ── title box ──────────────────────────────────────────────────────── */

.pmr-title-box[b-2t718n0en0] {
    box-sizing: border-box;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    background: var(--pmr-head-bg);
    border: 1px solid var(--pmr-line);
    color: var(--pmr-ink);
    font-size: 13px;
    font-weight: 700;
    text-align: center;
}

/* The landscape frame draws a smaller title box: 11 px in a 29 px box. */
.pmr-sheet-landscape .pmr-title-box[b-2t718n0en0] {
    height: 29px;
    font-size: 11px;
}

/* ── section bands ──────────────────────────────────────────────────── */

.pmr-band[b-2t718n0en0] {
    box-sizing: border-box;
    height: 27px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    background: var(--pmr-accent);
    color: var(--pmr-on-accent);
    font-size: 11px;
    font-weight: 700;
}

/* ── metadata block ─────────────────────────────────────────────────── */

/* Outer box plus a rule under every row. Labels are muted, values are ink;
   there is no shaded label column (the frame has none). */
.pmr-meta[b-2t718n0en0] {
    box-sizing: border-box;
    border: 1px solid var(--pmr-line);
    padding: 4px 10px;
}

.pmr-meta-row[b-2t718n0en0] {
    display: flex;
    gap: 12px;
    padding: 5px 0;
    border-bottom: 1px solid var(--pmr-rule-soft);
}

.pmr-meta-row:last-child[b-2t718n0en0] {
    border-bottom: 0;
}

.pmr-meta-label[b-2t718n0en0] {
    flex: 0 0 150px;
    width: 150px;
    color: var(--pmr-muted);
    font-size: 11px;
    font-weight: 600;
}

.pmr-meta-label-inline[b-2t718n0en0] {
    flex: 0 0 80px;
    width: 80px;
}

.pmr-meta-value[b-2t718n0en0] {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--pmr-ink);
    font-size: 11px;
    font-weight: 500;
}

.pmr-meta-value-inline[b-2t718n0en0] {
    flex: 0 0 177px;
    width: 177px;
}

/* ── report tables ──────────────────────────────────────────────────── */

/* Frame border treatment: one outer box, a #444 rule under the header row, a
   soft rule under the body rows, and no rule on the last row. */
.pmr-table[b-2t718n0en0] {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--pmr-line);
}

/* NOTE: the generic `.pmr-table td` rule outranks a single class, so every
   override below is written as `.pmr-table td.<class>` (STORY-167 lesson). */
.pmr-table td[b-2t718n0en0] {
    /* border-box so a frame column width is the cell's total width, padding
       included — the frame draws a bare text width, a cell adds 16 px. */
    box-sizing: border-box;
    padding: 6px 8px;
    border: 0;
    border-bottom: 1px solid var(--pmr-rule-soft);
    color: var(--pmr-ink);
    font-size: 11px;
    font-weight: 500;
    text-align: left;
    vertical-align: top;
}

.pmr-table tbody tr:last-child td[b-2t718n0en0] {
    border-bottom: 0;
}

.pmr-table td.pmr-head[b-2t718n0en0] {
    height: 26px;
    padding: 0 8px;
    background: var(--pmr-head-bg);
    color: var(--pmr-muted);
    font-size: 10px;
    font-weight: 600;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--pmr-line);
}

.pmr-table td.pmr-label[b-2t718n0en0] {
    width: 150px;
    color: var(--pmr-muted);
    font-weight: 600;
}

.pmr-table td.pmr-bil[b-2t718n0en0] {
    width: 46px;
}

.pmr-table td.pmr-noaset[b-2t718n0en0] {
    width: 266px;
}

/* The frame left-aligns the ordinal cells (x = 8 px inside the padded row). */
.pmr-table td.pmr-num[b-2t718n0en0] {
    text-align: left;
    vertical-align: middle;
    font-weight: 600;
}

.pmr-table td.pmr-tick[b-2t718n0en0] {
    width: 36px;
    text-align: center;
    vertical-align: middle;
}

.pmr-table td.pmr-ya[b-2t718n0en0],
.pmr-table td.pmr-tidak[b-2t718n0en0] {
    width: 60px;
    text-align: center;
    vertical-align: middle;
}

/* Checklist rows are 30 px tall in the frame. */
.pmr-checklist td[b-2t718n0en0],
.pmr-action td[b-2t718n0en0] {
    padding: 8px;
}

/* The frame splits the checklist 50 / 50. The app's font stack falls back to
   Arial here and the Keadaan header needs 267 px against a 258 px content box
   at exactly 50 %, so Ulasan gives up 2 % and the header stays on one line. */
.pmr-table td.pmr-comment[b-2t718n0en0] {
    width: 48%;
    color: var(--pmr-muted);
    font-size: 10px;
    font-weight: 500;
    vertical-align: top;
    white-space: pre-wrap;
}

.pmr-tick-mark[b-2t718n0en0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--pmr-tick);
    font-size: 14px;
    line-height: 1;
}

/* ── PENGESAHAN — outer box only, no internal rules ─────────────────── */

.pmr-signoff[b-2t718n0en0] {
    display: flex;
    gap: 24px;
    padding: 12px 14px;
    border: 1px solid var(--pmr-line);
}

.pmr-sign-col[b-2t718n0en0] {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.pmr-sign-title[b-2t718n0en0] {
    color: var(--pmr-ink);
    font-size: 11px;
    font-weight: 700;
}

.pmr-sign-row[b-2t718n0en0] {
    display: flex;
    gap: 6px;
    color: var(--pmr-ink);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.35;
}

.pmr-sign-label[b-2t718n0en0] {
    flex: 0 0 80px;
    width: 80px;
}

/* ── page-2 photo sections ──────────────────────────────────────────── */

.pmr-photo-heading[b-2t718n0en0] {
    color: var(--pmr-ink);
    font-size: 11px;
    font-weight: 700;
}

.pmr-photo-grid[b-2t718n0en0] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 12px;
}

.pmr-photo[b-2t718n0en0] {
    /* Two per row, and a lone photo never stretches to the full sheet width. */
    flex: 0 0 calc(50% - 6px);
    max-width: calc(50% - 6px);
    margin: 0;
    box-sizing: border-box;
    padding: 4px;
    background: var(--pmr-photo-bg);
    text-align: center;
}

.pmr-photo img[b-2t718n0en0] {
    display: block;
    width: 100%;
    /* Fixed height keeps the base template inside A4 no matter how many photos
       a section carries; extra rows grow the page. */
    height: 46mm;
    object-fit: cover;
    background: var(--pmr-sheet-bg);
}

.pmr-photo-caption[b-2t718n0en0] {
    display: block;
    padding-top: 4px;
    color: var(--pmr-muted);
    font-size: 10px;
    font-weight: 500;
}

/* ── MAKLUMAT INVOIS ────────────────────────────────────────────────── */

.pmr-doc-link[b-2t718n0en0] {
    color: var(--pmr-link);
    font-weight: 600;
    text-decoration: underline;
}

.pmr-doc-hint[b-2t718n0en0] {
    color: var(--pmr-link);
    font-weight: 600;
    margin-left: 6px;
}

/* ── landscape ASSET CHECKLIST table ────────────────────────────────── */

.pmr-asset-heading[b-2t718n0en0] {
    display: flex;
    gap: 6px;
    font-size: 11px;
}

.pmr-asset-no-label[b-2t718n0en0] {
    color: var(--pmr-ink);
    font-weight: 700;
}

.pmr-asset-no-value[b-2t718n0en0] {
    color: var(--pmr-ink);
    font-weight: 600;
}

.pmr-asset-name[b-2t718n0en0] {
    color: var(--pmr-muted);
    font-weight: 500;
}

/* The frame draws no outer box here: a header row with a #444 bottom rule and
   a borderless content row that fills the rest of the page. */
.pmr-asset-table[b-2t718n0en0] {
    table-layout: fixed;
    border: 0;
    /* Grow into the remaining page height; a longer checklist still grows the
       row instead of clipping it. */
    flex: 1 1 auto;
}

.pmr-asset-table tbody tr[b-2t718n0en0] {
    height: 100%;
}

.pmr-asset-table td[b-2t718n0en0] {
    border: 0;
    padding: 6px 8px;
    font-size: 10px;
    vertical-align: top;
}

.pmr-table td.pmr-asset-colhead[b-2t718n0en0] {
    height: 32px;
    padding: 0 8px;
    background: var(--pmr-head-bg);
    color: var(--pmr-muted);
    font-size: 10px;
    font-weight: 600;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--pmr-line);
}

/* Column widths mirror the frame: 15 / 460 / 70 / 60 / 90 / 90 / 70 / auto.
   The frame's 15 px is a bare text width; a table cell adds 2 × 8 px padding,
   which clipped the "Bil" header — widened to 36 px so the header and the
   ordinal both fit (G228). */
.pmr-table td.pmr-asset-bil[b-2t718n0en0] {
    width: 36px;
    text-align: center;
    vertical-align: top;
    padding-left: 4px;
    padding-right: 4px;
}

/* The frame puts every value at the TOP of the tall asset row; the generic
   `.pmr-table td.pmr-num` rule centres vertically, so each landscape cell
   restates the vertical alignment. */
.pmr-table td.pmr-asset-spec[b-2t718n0en0] {
    width: 460px;
    vertical-align: top;
}

.pmr-table td.pmr-asset-freq[b-2t718n0en0] {
    width: 70px;
    text-align: center;
    vertical-align: top;
}

.pmr-table td.pmr-asset-flag[b-2t718n0en0] {
    width: 60px;
    text-align: center;
    vertical-align: top;
}

.pmr-table td.pmr-asset-condition[b-2t718n0en0] {
    width: 90px;
    text-align: center;
    vertical-align: top;
}

.pmr-table td.pmr-asset-score[b-2t718n0en0] {
    width: 70px;
    text-align: center;
    vertical-align: top;
}

.pmr-table td.pmr-asset-nota[b-2t718n0en0] {
    width: auto;
    vertical-align: top;
    font-size: 9px;
    color: var(--pmr-muted);
}

/* The Nota HEADER carries the same class for its width; restore the header
   typography (higher specificity beats the data-cell rule above). */
.pmr-table td.pmr-asset-colhead.pmr-asset-nota[b-2t718n0en0] {
    font-size: 10px;
    font-weight: 600;
    color: var(--pmr-muted);
}

/* Boolean glyph cells (AC-06). The size/colour live on the SVG element (set in
   the component's RenderFragment) because Blazor scoped CSS adds no scope
   attribute to elements built through RenderTreeBuilder — a class rule here
   would not match (measured: 45 × 45 px until the attributes were added). */
.pmr-icon[b-2t718n0en0] {
    display: inline-block;
    vertical-align: middle;
}

/* The rich checklist document (MaintenanceItem.Details) is injected through a
   MarkupString, so it needs ::deep. Item rows carry the frame's soft rule. */
.pmr-asset-doc[b-2t718n0en0]  p {
    margin: 0;
    padding: 3px 0;
    border-bottom: 1px solid var(--pmr-rule-soft);
    font-size: 10px;
}

.pmr-asset-doc[b-2t718n0en0]  h1 {
    font-size: 11px;
    font-weight: 700;
    margin: 0 0 4px;
}

.pmr-asset-doc[b-2t718n0en0]  h2 {
    font-size: 10px;
    font-weight: 600;
    margin: 6px 0 3px;
}

.pmr-asset-doc[b-2t718n0en0]  h3,
.pmr-asset-doc[b-2t718n0en0]  h4 {
    font-size: 10px;
    font-weight: 700;
    margin: 4px 0 2px;
}

.pmr-asset-doc[b-2t718n0en0]  ol,
.pmr-asset-doc[b-2t718n0en0]  ul {
    margin: 0 0 3px;
    padding-left: 18px;
}

.pmr-asset-doc[b-2t718n0en0]  li {
    font-size: 9px;
    margin: 0;
    padding: 2px 0;
    border-bottom: 1px solid var(--pmr-rule-soft);
}

.pmr-asset-doc[b-2t718n0en0]  table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 4px;
}

.pmr-asset-doc[b-2t718n0en0]  table th,
.pmr-asset-doc[b-2t718n0en0]  table td {
    border: 0;
    border-bottom: 1px solid var(--pmr-rule-soft);
    padding: 2px 4px;
    font-size: 9px;
    text-align: left;
    vertical-align: top;
}

.pmr-asset-doc[b-2t718n0en0]  table th {
    background: var(--pmr-head-bg);
    font-weight: 700;
    text-align: center;
}

.pmr-asset-doc[b-2t718n0en0]  strong {
    font-weight: 700;
}

/* ── print ──────────────────────────────────────────────────────────── */

@media print {
    /* Paper is white: force the light palette even when the app is dark.
       `!important` is required here: `[data-theme="dark"] .pmr-root` is more
       specific and would otherwise win in print, producing dark paper. */
    .pmr-root[b-2t718n0en0] {
        --pmr-sheet-bg: #FFFFFF !important;
        --pmr-head-bg: #F7F9FB !important;
        --pmr-ink: #0D1B2A !important;
        --pmr-muted: #64748B !important;
        --pmr-line: #444444 !important;
        --pmr-rule-soft: #E2E8F0 !important;
        --pmr-link: #0F4C81 !important;
        --pmr-photo-bg: #F7F8FA !important;

        gap: 0;
        padding: 0;
        /* Print needs BLOCK layout: a flex container is monolithic in Chromium's
           paged output, so `break-before: page` is ignored and the whole report
           collapses onto one page (measured). */
        display: block;
        background: #FFFFFF !important;
    }

    /* AC-10 — the toolbars never print. */
    .pmr-toolbar[b-2t718n0en0] {
        display: none !important;
    }

    /* AC-09 — the Dokumen Invois row is screen-only. */
    .pmr-invoice-doc-row[b-2t718n0en0] {
        display: none !important;
    }

    .pmr-sheet[b-2t718n0en0] {
        width: 210mm;
        min-height: 0;
        margin: 0;
        padding: 32px 36px;
        /* break-BEFORE (not after) so the final sheet never emits a blank page. */
        break-before: page;
        page-break-before: always;
    }

    .pmr-sheet-1[b-2t718n0en0] {
        break-before: auto;
        page-break-before: auto;
    }

    /* AC-10 — the asset checklist sheets print on A4 landscape. The sheet is
       one millimetre shorter than the page so the paged renderer never spills
       a hairline onto a second page; the asset table fills the sheet. */
    .pmr-sheet-landscape[b-2t718n0en0] {
        width: 297mm;
        height: 209mm;
        padding: 24px 32px;
        page: landscape;
    }
}
/* /Components/Pages/SystemSettings/ActionProposal/ActionProposalForm.razor.rz.scp.css */
/* ============================================================================
   Add/Edit Form — Action Proposal (wireframe p1tR3S / l57EJy, light + dark)

   STORY-143 (AD-S14). Shared by Add.razor and Edit.razor through
   ActionProposalForm.razor.

   G139 — Blazor scoped CSS is PER-COMPONENT. The sibling VendorForm.razor.css
   defines .vendor-form-* and its selectors do NOT reach this component, so the
   rules below are re-expressed rather than inherited. Shipping the markup without
   this file would render the card unstyled (build stays 0/0 — silent).

   These styles are page-scoped ON PURPOSE and live here rather than in
   wwwroot/app.css: they re-skin the form to the wireframe's measured geometry
   (full-width card inside the 24px page padding, padding 40, gap 20, filled
   borderless 44px input, sentence-case 12/600 label, navy primary / filled-neutral
   secondary action row), which is the opposite of the shared aims-profile-*
   design system on every defining property. Per the project's CSS architecture,
   page-specific styling belongs in a scoped .razor.css — the global stylesheet
   keeps only shared component classes and design tokens.

   G143 — the VALUES below are re-derived from the AD-S14 frames, NOT copied from
   VendorForm.razor.css. The structural differences matter:
     (1) this form has TWO fields, not ten — the frame's "Row 1" holds a SINGLE
         full-width field, so there is no two-column pairing and no textarea;
     (2) the frame draws NO tooltip glyph, so the field has no right-side adornment
         and the input needs no right padding;
     (3) the frames are 1440px desktop with everything full-width, so the sibling's
         narrow-viewport stacking media query has no counterpart here.
   The frame also draws the label with the asterisk INSIDE the label text
   ("Action Proposal *") — it renders as plain text, matching the frame.

   The Status toggle is the one Radzen component in this form. Its rules stay in
   app.css alongside allocation-switch / project-switch / vendor-switch (the
   established convention for switch styling), because CSS isolation cannot reach
   Radzen's internal DOM with plain selectors — G29.

   Colours route through --aims-* tokens or pinned hexes with explicit
   [data-theme="dark"] counterparts (G59). Dark values are the dark frame's own
   (#1E293B card / #0F172A input / #F1F5F9 label / #334155 cancel / #4DD9C0 save).
   ============================================================================ */

.action-proposal-form-card[b-6ex7bqyzhq] {
    width: 100%;
    margin: 0;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: var(--aims-surface-bg);
    /* Frame p1tR3S/l57EJy: the card is a rounded surface on the page background. */
    border: none;
    border-radius: 12px;
}

.action-proposal-form-fields[b-6ex7bqyzhq] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Frame "Row 1" — a full-width row (gap 20) holding one field. */
.action-proposal-form-row[b-6ex7bqyzhq] {
    display: flex;
    gap: 20px;
}

.action-proposal-form-row .action-proposal-form-field[b-6ex7bqyzhq] {
    /* G87 — flex-basis 0 keeps the field content-independent; `auto` would let a
       long value widen it away from the frame's fill_container geometry. */
    flex: 1 1 0;
    min-width: 0;
}

.action-proposal-form-field[b-6ex7bqyzhq] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.action-proposal-form-label[b-6ex7bqyzhq] {
    font-size: 12px;
    font-weight: 600;
    line-height: 20px;
    color: var(--aims-text-primary);
}

.action-proposal-form-input[b-6ex7bqyzhq] {
    width: 100%;
    height: 44px;
    /* Transparent border keeps the 44px box stable when the error state paints it. */
    border: 1.5px solid transparent;
    border-radius: 8px;
    padding: 0 14px;
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    color: var(--aims-text-primary);
    background: var(--aims-page-bg);
    outline: none;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.action-proposal-form-input[b-6ex7bqyzhq]::placeholder {
    color: #A0AEC0;
}

/* The field glyph carries NO inline colour: it inherits from this class so the
   theme pair can be expressed. Frame p1tR3S draws it #A0AEC0 and the dark frame
   aTc2T draws it #64748B — the same pair the placeholder uses (G59: an inline
   Style could not carry a dark counterpart). */
.action-proposal-form-icon[b-6ex7bqyzhq] {
    color: #A0AEC0;
}

[data-theme="dark"] .action-proposal-form-icon[b-6ex7bqyzhq] {
    color: #64748B;
}

[data-theme="dark"] .action-proposal-form-input[b-6ex7bqyzhq]::placeholder {
    color: #64748B;
}

.action-proposal-form-input:focus[b-6ex7bqyzhq] {
    box-shadow: 0 0 0 3px rgba(77, 217, 192, 0.15);
}

.action-proposal-form-input.has-icon-left[b-6ex7bqyzhq] {
    padding-left: 44px;
}

/* Dark theme: a PRE-EXISTING global rule — app.css [data-theme="dark"]
   input[type="text"]/textarea/select { border-color: var(--aims-border-color) !important }
   (STORY-091) — pins a visible #334155 border at specificity (0,2,1), which
   outranks the transparent rest border above and made the dark form show
   outlined inputs where the frames (aTc2T / F5ZHr) draw them borderless.
   Same technique as G47: match the global rule's !important with a HIGHER
   specificity (0,3,1) so the frame's treatment wins in dark mode too.
   Placed BEFORE the error rule below, which carries equal specificity — the
   later error rule therefore still wins when a field is invalid. */
[data-theme="dark"] input.action-proposal-form-input[b-6ex7bqyzhq],
[data-theme="dark"] input.action-proposal-form-input.has-icon-left[b-6ex7bqyzhq] {
    border-color: transparent !important;
}

/* G47 — the invalid ring must survive BOTH themes (explicit dark counterpart).
   Without the [data-theme="dark"] selector the app's dark input border rule
   (specificity 0,2,1, !important) silently wins and the field looks valid. */
input.action-proposal-form-input.aims-input-error[b-6ex7bqyzhq],
[data-theme="dark"] input.action-proposal-form-input.aims-input-error[b-6ex7bqyzhq] {
    border-color: #EF4444 !important;
}

.action-proposal-form-actions[b-6ex7bqyzhq] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    /* Frame: Button Row padding [8, 0, 0, 0]. */
    padding-top: 8px;
}

/* Wireframe: navy #0D1B2A primary, filled #F0F1F3 secondary — both 40px tall,
   padding 0 20, radius 8. AimsButton's buttons live in another component's
   markup, so these rules use ::deep to cross the CSS-isolation boundary
   explicitly (the same technique the sibling forms use). */
.action-proposal-form-actions[b-6ex7bqyzhq]  .aims-btn-primary {
    height: 40px;
    background-color: var(--aims-navy);
    color: #FFFFFF;
    font-weight: 600;
    box-shadow: none;
}

.action-proposal-form-actions[b-6ex7bqyzhq]  .aims-btn-primary:hover {
    background-color: var(--aims-navy-light);
}

.action-proposal-form-actions[b-6ex7bqyzhq]  .aims-btn-secondary {
    height: 40px;
    background-color: var(--aims-icon-btn-bg);
    border: none;
    color: var(--aims-text-primary);
    font-weight: 600;
}

.action-proposal-form-actions[b-6ex7bqyzhq]  .aims-btn-secondary:hover {
    background-color: var(--aims-icon-btn-hover);
}

/* Dark-theme counterparts (G59) — mirror the dark wireframe frames aTc2T / F5ZHr. */
[data-theme="dark"] .action-proposal-form-actions[b-6ex7bqyzhq]  .aims-btn-primary {
    background-color: var(--aims-teal);
    color: var(--aims-navy);
}

[data-theme="dark"] .action-proposal-form-actions[b-6ex7bqyzhq]  .aims-btn-primary:hover {
    background-color: #3FC4AE;
}

[data-theme="dark"] .action-proposal-form-actions[b-6ex7bqyzhq]  .aims-btn-secondary {
    background-color: #334155;
    color: #F1F5F9;
}

[data-theme="dark"] .action-proposal-form-actions[b-6ex7bqyzhq]  .aims-btn-secondary:hover {
    background-color: #3E4C63;
}
/* /Components/Pages/SystemSettings/ActionProposal/List.razor.rz.scp.css */
/* ============================================================================
   List page — Action Proposal (wireframe V4HwM / VWcej, light + dark)

   STORY-143 (AD-S14). Page-scoped styling for the Action Proposal register.

   G139 — Blazor scoped CSS is PER-COMPONENT: this file styles THIS page only.
   Vendor/List.razor.css defining .vendor-search-icon proves nothing here; the
   rules below are re-expressed for this page's own class names.

   Why these rules live here rather than in wwwroot/app.css: they are the
   toolbar glyph colours, a badge nowrap guard and the AC2 empty state — all
   page-specific. Per the project's CSS architecture the global stylesheet keeps
   only shared component classes and design tokens. The shared aims-badge-* pair
   is deliberately NOT touched (G103).

   G143 — the VALUES are re-derived from the AD-S14 frames, NOT copied from the
   Vendor sibling: the toolbar has ONE search glyph and ONE clear glyph and no
   extra adornments, and the grid has no long-token column, so the sibling's
   .vendor-email-cell overflow rule has NO counterpart here.

   G29 — RadzenDataGrid's column widths are set on RadzenDataGridColumn
   (Width="..."), never here; the rules below only reach elements this page's own
   templates render (the cell spans) plus AimsButton's root, which would need
   ::deep if styled (it is not — G156 keeps the export pair byte-identical to the
   siblings, which style it globally).

   G59 — every colour carries a [data-theme="dark"] counterpart taken from the
   dark frame VWcej: search glyph #A0AEC0 → #64748B, the clear × is #64748B in
   both, empty-state copy #64748B → #94A3B8.
   ============================================================================ */

/* --- Toolbar glyphs ----------------------------------------------------------
   The search and clear icons carry NO inline colour: they inherit from these
   classes so the theme pair can be expressed. Frame V4HwM — search icon #A0AEC0;
   the clear × is #64748B in both themes (G59). */
.action-proposal-search-icon[b-i689cy59t3] {
    color: #A0AEC0;
}

[data-theme="dark"] .action-proposal-search-icon[b-i689cy59t3] {
    color: #64748B;
}

.action-proposal-clear-icon[b-i689cy59t3] {
    color: #64748B;
}

[data-theme="dark"] .action-proposal-clear-icon[b-i689cy59t3] {
    color: #64748B;
}

/* --- G99: keep the Status badge on one line -------------------------------
   The badge reuses the shared aims-badge-active / -inactive pair (never
   recoloured — G103) but must opt OUT of any cell-level wrapping. Frame V4HwM
   draws the badge as a 90x24 r12 chip with the label centred. */
.action-proposal-status-badge[b-i689cy59t3] {
    white-space: nowrap;
    overflow-wrap: normal;
}

/* --- AC2 empty state ------------------------------------------------------- */
.action-proposal-empty-state[b-i689cy59t3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 28px 20px;
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    color: #64748B;
}

.action-proposal-empty-state p[b-i689cy59t3] {
    margin: 0;
}

[data-theme="dark"] .action-proposal-empty-state[b-i689cy59t3] {
    color: #94A3B8;
}
/* /Components/Pages/SystemSettings/Allocation/AllocationForm.razor.rz.scp.css */
/* ============================================================================
   Add/Edit Form — Allocation Source (wireframe AHZ1n / Uv7X6, light + dark)

   STORY-077. Shared by Add.razor and Edit.razor through AllocationForm.razor.

   These styles are page-scoped ON PURPOSE and live here rather than in
   wwwroot/app.css: they re-skin the form to the wireframe's measured geometry
   (centred 780px card, padding 40, filled borderless 44px inputs, sentence-case
   12/600 labels, navy primary / filled-neutral secondary action row), which is
   the opposite of the shared aims-profile-* design system on every defining
   property. Per the project's CSS architecture, page-specific styling belongs
   in a scoped .razor.css — the global stylesheet keeps only shared component
   classes and design tokens.

   The sibling System Settings forms (Facility Management Code / Financial Code
   / Asset Type) keep the aims-profile-* design system untouched; the divergence
   is recorded as DV-5 in the STORY-077 plan.

   The Status toggle is the one Radzen component in this form. Its rules stay in
   app.css alongside finance-switch / facility-switch / asset-type-switch (the
   established convention for switch styling), because CSS isolation cannot
   reach Radzen's internal DOM with plain selectors — G29.

   Colours route through --aims-* tokens or pinned hexes with explicit
   [data-theme="dark"] counterparts (G59).
   ============================================================================ */

.allocation-form-card[b-4kqwi7bxtx] {
    width: 100%;
    max-width: 780px;
    margin: 12px auto 0;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: var(--aims-surface-bg);
    /* Frame Uv7X6/AHZ1n: the card sits borderless on the page background. */
    border: none;
    border-radius: 12px;
}

.allocation-form-fields[b-4kqwi7bxtx] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.allocation-form-field[b-4kqwi7bxtx] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.allocation-form-label[b-4kqwi7bxtx] {
    font-size: 12px;
    font-weight: 600;
    line-height: 20px;
    color: var(--aims-text-primary);
}

/* Required marker inherits the label colour — the frame does not draw a red asterisk. */
.allocation-form-required[b-4kqwi7bxtx] {
    color: inherit;
}

.allocation-form-input[b-4kqwi7bxtx] {
    width: 100%;
    height: 44px;
    /* Transparent border keeps the 44px box stable when the error state paints it. */
    border: 1.5px solid transparent;
    border-radius: 8px;
    padding: 0 14px;
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    color: var(--aims-text-primary);
    background: var(--aims-page-bg);
    outline: none;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.allocation-form-input[b-4kqwi7bxtx]::placeholder {
    color: #A0AEC0;
}

.allocation-form-input:focus[b-4kqwi7bxtx] {
    box-shadow: 0 0 0 3px rgba(77, 217, 192, 0.15);
}

.allocation-form-input.has-icon-left[b-4kqwi7bxtx] {
    padding-left: 44px;
}

/* Dark theme: a PRE-EXISTING global rule — app.css [data-theme="dark"]
   input[type="text"] { border-color: var(--aims-border-color) !important }
   (STORY-091) — pins a visible #334155 border at specificity (0,2,1), which
   outranks the transparent rest border above and made the dark form show
   outlined inputs where the frame (a52JKu / FpHqE) draws them borderless.
   Same technique as G47: match the global rule's !important with a HIGHER
   specificity (0,3,1) so the frame's treatment wins in dark mode too.
   Placed BEFORE the error rule below, which carries equal specificity — the
   later error rule therefore still wins when a field is invalid. */
[data-theme="dark"] input.allocation-form-input[b-4kqwi7bxtx],
[data-theme="dark"] input.allocation-form-input.has-icon-left[b-4kqwi7bxtx] {
    border-color: transparent !important;
}

/* G47 — the invalid ring must survive both themes (explicit dark counterpart). */
input.allocation-form-input.aims-input-error[b-4kqwi7bxtx],
[data-theme="dark"] input.allocation-form-input.aims-input-error[b-4kqwi7bxtx] {
    border-color: #EF4444 !important;
}

.allocation-form-actions[b-4kqwi7bxtx] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* Wireframe: navy #0D1B2A primary, filled #F0F1F3 secondary — both 40px tall.
   AimsButton's buttons live in another component's markup, so these rules use
   ::deep to cross the CSS-isolation boundary explicitly (the same technique
   R05FinanceDashboard.razor.css / ApplyStep1.razor.css use for child DOM). */
.allocation-form-actions[b-4kqwi7bxtx]  .aims-btn-primary {
    height: 40px;
    background-color: var(--aims-navy);
    color: #FFFFFF;
    font-weight: 600;
    box-shadow: none;
}

.allocation-form-actions[b-4kqwi7bxtx]  .aims-btn-primary:hover {
    background-color: var(--aims-navy-light);
}

.allocation-form-actions[b-4kqwi7bxtx]  .aims-btn-secondary {
    height: 40px;
    background-color: var(--aims-icon-btn-bg);
    border: none;
    color: var(--aims-text-primary);
    font-weight: 600;
}

.allocation-form-actions[b-4kqwi7bxtx]  .aims-btn-secondary:hover {
    background-color: var(--aims-icon-btn-hover);
}

/* Dark-theme counterparts (G59) — mirror the dark wireframe frames a52JKu / FpHqE. */
[data-theme="dark"] .allocation-form-actions[b-4kqwi7bxtx]  .aims-btn-primary {
    background-color: var(--aims-teal);
    color: var(--aims-navy);
}

[data-theme="dark"] .allocation-form-actions[b-4kqwi7bxtx]  .aims-btn-primary:hover {
    background-color: #3FC4AE;
}

[data-theme="dark"] .allocation-form-actions[b-4kqwi7bxtx]  .aims-btn-secondary {
    background-color: #334155;
    color: #F1F5F9;
}

[data-theme="dark"] .allocation-form-actions[b-4kqwi7bxtx]  .aims-btn-secondary:hover {
    background-color: #3E4C63;
}
/* /Components/Pages/SystemSettings/AssetCategory/AssetCategoryForm.razor.rz.scp.css */
/* ============================================================================
   Add/Edit Form — Asset Category (wireframe OuchZ / HJt8W, light + dark)

   STORY-146 (AD-S16). Shared by Add.razor and Edit.razor through
   AssetCategoryForm.razor.

   G139 — Blazor scoped CSS is PER-COMPONENT. The sibling ActionProposalForm.razor.css
   defines .action-proposal-form-* and its selectors do NOT reach this component, so
   the rules below are re-expressed rather than inherited. Shipping the markup without
   this file would render the card unstyled (build stays 0/0 — silent).

   These styles are page-scoped ON PURPOSE and live here rather than in
   wwwroot/app.css: they re-skin the form to the wireframe's measured geometry
   (full-width card inside the 24px page padding, padding 40, gap 20, filled
   borderless 44px input, sentence-case 12/600 label, navy primary / filled-neutral
   secondary action row), which is the opposite of the shared aims-profile-* design
   system on every defining property. Per the project's CSS architecture,
   page-specific styling belongs in a scoped .razor.css — the global stylesheet
   keeps only shared component classes and design tokens.

   G143 — the VALUES below are re-derived from the AD-S16 frames, NOT copied from
   ActionProposalForm.razor.css. The structural differences matter:
     (1) this form has THREE fields, not two — the frame stacks TWO full-width text
         fields (Category Code as a direct child of the card, Category Name inside
         the frame's "Row 1"), each in its own row wrapper, plus the Status field;
     (2) the frame draws NO tooltip glyph, so the fields have no right-side adornment
         and the inputs need no right padding;
     (3) the frames are 1440px desktop with everything full-width, so the sibling's
         narrow-viewport stacking media query has no counterpart here.
   The frame also draws each label with the asterisk INSIDE the label text
   ("Category Code *") — it renders as plain text, matching the frame.

   The Status toggle is the one Radzen component in this form. Its rules stay in
   app.css alongside allocation-switch / project-switch / vendor-switch /
   action-proposal-switch (the established convention for switch styling), because
   CSS isolation cannot reach Radzen's internal DOM with plain selectors — G29.

   Colours route through --aims-* tokens or pinned hexes with explicit
   [data-theme="dark"] counterparts (G59). Dark values are the dark frames' own
   (NvlTj / UUABf: #1E293B card / #0F172A input / #F1F5F9 label / #334155 cancel /
   #4DD9C0 save), and the field glyph pair is #A0AEC0 → #64748B.
   ============================================================================ */

.asset-category-form-card[b-l3eopegk9e] {
    width: 100%;
    margin: 0;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: var(--aims-surface-bg);
    /* Frame OuchZ/HJt8W: the card is a rounded surface on the page background. */
    border: none;
    border-radius: 12px;
}

.asset-category-form-fields[b-l3eopegk9e] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Frames: "Category Code Field" is a card-level child and "Row 1" holds the
   Category Name field — both render full width (gap 20). */
.asset-category-form-row[b-l3eopegk9e] {
    display: flex;
    gap: 20px;
}

.asset-category-form-row .asset-category-form-field[b-l3eopegk9e] {
    /* G87 — flex-basis 0 keeps the field content-independent; `auto` would let a
       long value widen it away from the frame's fill_container geometry. */
    flex: 1 1 0;
    min-width: 0;
}

.asset-category-form-field[b-l3eopegk9e] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.asset-category-form-label[b-l3eopegk9e] {
    font-size: 12px;
    font-weight: 600;
    line-height: 20px;
    color: var(--aims-text-primary);
}

.asset-category-form-input[b-l3eopegk9e] {
    width: 100%;
    height: 44px;
    /* Transparent border keeps the 44px box stable when the error state paints it. */
    border: 1.5px solid transparent;
    border-radius: 8px;
    padding: 0 14px;
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    color: var(--aims-text-primary);
    background: var(--aims-page-bg);
    outline: none;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.asset-category-form-input[b-l3eopegk9e]::placeholder {
    color: #A0AEC0;
}

/* The field glyph carries NO inline colour: it inherits from this class so the
   theme pair can be expressed. Frame OuchZ draws both glyphs #A0AEC0 ('hash' on
   Category Code, 'tag' on Category Name) and the dark frame NvlTj draws them
   #64748B — the same pair the placeholder uses (G59: an inline Style could not
   carry a dark counterpart). */
.asset-category-form-icon[b-l3eopegk9e] {
    color: #A0AEC0;
}

[data-theme="dark"] .asset-category-form-icon[b-l3eopegk9e] {
    color: #64748B;
}

[data-theme="dark"] .asset-category-form-input[b-l3eopegk9e]::placeholder {
    color: #64748B;
}

.asset-category-form-input:focus[b-l3eopegk9e] {
    box-shadow: 0 0 0 3px rgba(77, 217, 192, 0.15);
}

.asset-category-form-input.has-icon-left[b-l3eopegk9e] {
    padding-left: 44px;
}

/* Dark theme: a PRE-EXISTING global rule — app.css [data-theme="dark"]
   input[type="text"]/textarea/select { border-color: var(--aims-border-color) !important }
   (STORY-091) — pins a visible #334155 border at specificity (0,2,1), which
   outranks the transparent rest border above and would make the dark form show
   outlined inputs where the frames (NvlTj / UUABf) draw them borderless.
   Same technique as G47: match the global rule's !important with a HIGHER
   specificity (0,3,1) so the frame's treatment wins in dark mode too.
   Placed BEFORE the error rule below, which carries equal specificity — the
   later error rule therefore still wins when a field is invalid. */
[data-theme="dark"] input.asset-category-form-input[b-l3eopegk9e],
[data-theme="dark"] input.asset-category-form-input.has-icon-left[b-l3eopegk9e] {
    border-color: transparent !important;
}

/* G47 — the invalid ring must survive BOTH themes (explicit dark counterpart).
   Without the [data-theme="dark"] selector the app's dark input border rule
   (specificity 0,2,1, !important) silently wins and the field looks valid. */
input.asset-category-form-input.aims-input-error[b-l3eopegk9e],
[data-theme="dark"] input.asset-category-form-input.aims-input-error[b-l3eopegk9e] {
    border-color: #EF4444 !important;
}

.asset-category-form-actions[b-l3eopegk9e] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    /* Frame: Button Row padding [8, 0, 0, 0]. */
    padding-top: 8px;
}

/* Wireframe: navy #0D1B2A primary, filled #F0F1F3 secondary — both 40px tall,
   padding 0 20, radius 8. AimsButton's buttons live in another component's
   markup, so these rules use ::deep to cross the CSS-isolation boundary
   explicitly (the same technique the sibling forms use). */
.asset-category-form-actions[b-l3eopegk9e]  .aims-btn-primary {
    height: 40px;
    background-color: var(--aims-navy);
    color: #FFFFFF;
    font-weight: 600;
    box-shadow: none;
}

.asset-category-form-actions[b-l3eopegk9e]  .aims-btn-primary:hover {
    background-color: var(--aims-navy-light);
}

.asset-category-form-actions[b-l3eopegk9e]  .aims-btn-secondary {
    height: 40px;
    background-color: var(--aims-icon-btn-bg);
    border: none;
    color: var(--aims-text-primary);
    font-weight: 600;
}

.asset-category-form-actions[b-l3eopegk9e]  .aims-btn-secondary:hover {
    background-color: var(--aims-icon-btn-hover);
}

/* Dark-theme counterparts (G59) — mirror the dark wireframe frames NvlTj / UUABf. */
[data-theme="dark"] .asset-category-form-actions[b-l3eopegk9e]  .aims-btn-primary {
    background-color: var(--aims-teal);
    color: var(--aims-navy);
}

[data-theme="dark"] .asset-category-form-actions[b-l3eopegk9e]  .aims-btn-primary:hover {
    background-color: #3FC4AE;
}

[data-theme="dark"] .asset-category-form-actions[b-l3eopegk9e]  .aims-btn-secondary {
    background-color: #334155;
    color: #F1F5F9;
}

[data-theme="dark"] .asset-category-form-actions[b-l3eopegk9e]  .aims-btn-secondary:hover {
    background-color: #3E4C63;
}
/* /Components/Pages/SystemSettings/AssetCategory/List.razor.rz.scp.css */
/* ============================================================================
   List page — Asset Category (wireframe ZPwfa / U29a1, light + dark)

   STORY-146 (AD-S16). Page-scoped styling for the Asset Category register.

   G139 — Blazor scoped CSS is PER-COMPONENT: this file styles THIS page only.
   ActionProposal/List.razor.css defining .action-proposal-search-icon proves
   nothing here; the rules below are re-expressed for this page's own class names.

   Why these rules live here rather than in wwwroot/app.css: they are the
   toolbar glyph colours, a badge nowrap guard and the AC2 empty state — all
   page-specific. Per the project's CSS architecture the global stylesheet keeps
   only shared component classes and design tokens. The shared aims-badge-* pair
   is deliberately NOT touched (G103).

   G143 — the VALUES are re-derived from the AD-S16 frames, NOT copied from the
   ActionProposal sibling: the toolbar has ONE search glyph and ONE clear glyph and
   no extra adornments, the search glyph is 16x16 in the frame (rendered at 20px like
   the siblings), and the grid has no long-token column, so the sibling's overflow
   rule for a long code cell has NO counterpart here. The dark frame U29a1 carries
   the same glyph pair as the sibling's dark frame (#64748B), so the pinned colours
   coincide — they are still re-read from THIS frame pair.

   G29 — RadzenDataGrid's column widths are set on RadzenDataGridColumn
   (Width="..."), never here; the rules below only reach elements this page's own
   templates render (the cell spans) plus AimsButton's root, which would need
   ::deep if styled (it is not — G156 keeps the export pair byte-identical to the
   siblings, which style it globally).

   G59 — every colour carries a [data-theme="dark"] counterpart taken from the
   dark frame U29a1: search glyph #A0AEC0 → #64748B, the clear × is #64748B in
   both, empty-state copy #64748B → #94A3B8.
   ============================================================================ */

/* --- Toolbar glyphs ----------------------------------------------------------
   The search and clear icons carry NO inline colour: they inherit from these
   classes so the theme pair can be expressed. Frame ZPwfa — search icon #A0AEC0;
   the clear × is #64748B in both themes (G59). */
.asset-category-search-icon[b-b9yw6vt21n] {
    color: #A0AEC0;
}

[data-theme="dark"] .asset-category-search-icon[b-b9yw6vt21n] {
    color: #64748B;
}

.asset-category-clear-icon[b-b9yw6vt21n] {
    color: #64748B;
}

[data-theme="dark"] .asset-category-clear-icon[b-b9yw6vt21n] {
    color: #64748B;
}

/* --- G99: keep the Status badge on one line -------------------------------
   The badge reuses the shared aims-badge-active / -inactive pair (never
   recoloured — G103) but must opt OUT of any cell-level wrapping. Frame ZPwfa
   draws the badge as a 90x24 r12 chip with the label centred. */
.asset-category-status-badge[b-b9yw6vt21n] {
    white-space: nowrap;
    overflow-wrap: normal;
}

/* --- AC2 empty state ------------------------------------------------------- */
.asset-category-empty-state[b-b9yw6vt21n] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 28px 20px;
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    color: #64748B;
}

.asset-category-empty-state p[b-b9yw6vt21n] {
    margin: 0;
}

[data-theme="dark"] .asset-category-empty-state[b-b9yw6vt21n] {
    color: #94A3B8;
}
/* /Components/Pages/SystemSettings/AssetChecklist/AssetChecklistForm.razor.rz.scp.css */
/* ============================================================================
   Register/Update Form — Asset Checklist (wireframe H9mzdw / z0Uav, light + dark)

   STORY-149 (AD-S08). Hosted by Edit.razor through AssetChecklistForm.razor.

   G139 — Blazor scoped CSS is PER-COMPONENT. The sibling AssetCategoryForm.razor.css
   defines .asset-category-form-* and its selectors do NOT reach this component, so the
   rules below are re-expressed rather than inherited. Shipping the markup without this
   file would render the card unstyled (build stays 0/0 — silent).

   These styles are page-scoped ON PURPOSE and live here rather than in
   wwwroot/app.css: they re-skin the form to the wireframe's measured geometry
   (full-width card, padding 40, gap 20, filled 44px inputs, sentence-case 12/600
   labels, navy primary / filled-neutral secondary action row), which is the opposite of
   the shared aims-profile-* design system on every defining property. Per the project's
   CSS architecture, page-specific styling belongs in a scoped .razor.css — the global
   stylesheet keeps only shared component classes and design tokens.

   G143 — the VALUES below are re-derived from the AD-S08 frames (measured from
   reference-pngs/H9mzdw.png and z0Uav.png at 2x), NOT copied from
   AssetCategoryForm.razor.css. The structural differences matter:
     (1) TWO read-only fields side by side in "Row 1" with a 24px gap (the sibling's
         Row 1 holds a single editable input and has no read-only treatment at all);
     (2) a RadzenHtmlEditor where the sibling has none: toolbar 40h / #F0F1F3 / r8 with
         9 tools at 28x28 and 4px gaps, then a 280h / r8 content box stroked #E2E8F0 on
         #FFFFFF, the two 20px apart;
     (3) the export pair sits on the LABEL ROW rather than in a page toolbar, as the frame
         draws it. The buttons themselves are the standard settings pair (AimsButton
         Danger + picture_as_pdf / the Excel-green override) — the frame's emoji pills were
         deliberately NOT reproduced; see the AC8 note below and STORY-106 DV-21;
     (4) the frames are 1440px desktop with everything full-width, so the sibling's
         narrow-viewport stacking media query has no counterpart here.
   The frame also draws the Checklist label with the asterisk INSIDE the label text
   ("Checklist *"), and the two asset labels with NO asterisk (they are read-only).

   ── Radzen chrome (G139/G59) ────────────────────────────────────────────────
   RadzenHtmlEditor ships its own light-defaulted stylesheet for .rz-html-editor,
   .rz-html-editor-toolbar and .rz-html-editor-content. Those are Radzen's internal DOM,
   but they are DESCENDANTS of this component's own wrapper element, so the ::deep
   combinator reaches them from this scoped file (the same technique the sibling forms
   use for AimsButton's internals). Every value carries an explicit [data-theme="dark"]
   counterpart, so no Radzen chrome is left light-on-dark.
   A global override is NOT required for the in-place chrome; the block is reported in
   the implementation notes so the owner of app.css can decide whether to hoist it.

   ── The G47 invalid-field pair (WHY IT IS HERE) ─────────────────────────────
   The shared app.css rule alone is NOT sufficient for this field. In dark mode two
   higher-specificity rules outrank a plain .aims-input-error: the global
   [data-theme="dark"] input/textarea/select { border-color: var(--aims-border-color)
   !important } rule and this file's own .rz-html-editor border reset. The field then
   silently looks VALID in dark mode. Writing the pair with an explicit dark prefix and
   !important is the exact fix STORY-114 shipped and is mirrored verbatim from
   ActionProposalForm.razor.css:139-149 (the file the plan names as the model).
   ============================================================================ */

.asset-checklist-form-card[b-5bxidhyrfy] {
    width: 100%;
    margin: 0;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: var(--aims-surface-bg);
    /* Frame H9mzdw/z0Uav: the card is a rounded surface on the page background. */
    border: none;
    border-radius: 12px;
}

.asset-checklist-form-fields[b-5bxidhyrfy] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Frame "Row 1" — Asset No. + Asset Name, two full-width read-only fields.
   The 24px gap is the frame's own (measured 1728-1671 raw = 24px logical); it is
   deliberately NOT the sibling's 20px row gap. */
.asset-checklist-form-row[b-5bxidhyrfy] {
    display: flex;
    gap: 24px;
}

.asset-checklist-form-row .asset-checklist-form-field[b-5bxidhyrfy] {
    /* G87 — flex-basis 0 keeps the field content-independent; `auto` would let a long
       asset name widen its column away from the frame's fill_container geometry. */
    flex: 1 1 0;
    min-width: 0;
}

.asset-checklist-form-field[b-5bxidhyrfy] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* The Checklist block: label row -> editor, 20px apart (frame 268-247.5 = 20.5). */
.asset-checklist-form-editor-field[b-5bxidhyrfy] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Frame: the label sits left, the two export buttons right, vertically centred on the
   same line (both centred on the frame's y=231 row). */
.asset-checklist-form-label-row[b-5bxidhyrfy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.asset-checklist-form-label[b-5bxidhyrfy] {
    font-size: 12px;
    font-weight: 600;
    line-height: 20px;
    color: var(--aims-text-primary);
}

.asset-checklist-form-input[b-5bxidhyrfy] {
    width: 100%;
    height: 44px;
    /* Transparent border keeps the 44px box stable when a state paints it. */
    border: 1.5px solid transparent;
    border-radius: 8px;
    padding: 0 14px;
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    color: var(--aims-text-primary);
    background: var(--aims-page-bg);
    outline: none;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.asset-checklist-form-input[b-5bxidhyrfy]::placeholder {
    color: #A0AEC0;
}

[data-theme="dark"] .asset-checklist-form-input[b-5bxidhyrfy]::placeholder {
    color: #64748B;
}

.asset-checklist-form-input:focus[b-5bxidhyrfy] {
    box-shadow: 0 0 0 3px rgba(77, 217, 192, 0.15);
}

/* Read-only cue — SURFACE SWAP ONLY (STORY-147 DV-2, the family's ReadOnly contrast).
   Light #F0F1F3 / dark #334155; the VALUE TEXT STAYS PRIMARY (#0D1B2A light /
   #F1F5F9 dark). Muting it was rejected: muted-on-muted is ~1.9:1 and fails WCAG AA.
   #F8FAFC is explicitly NOT used — on the white card it is LIGHTER than an editable
   fill and would read as MORE editable. The markup pairs this with readonly +
   aria-readonly + cursor: not-allowed (never `disabled`, which drops AT reachability).

   `!important` is REQUIRED on both colours and on the dark border, and the element name
   is part of the selector, because the STORY-091 global rules below set background,
   colour AND border-color on input[type="text"] with !important. An !important
   declaration beats a non-important one at ANY specificity — so without it the read-only
   well would silently render as an ordinary editable input. Mirrors
   SatelliteLocationForm.razor.css:246-258 (the family's only other read-only field).

   The dark border reset is placed BEFORE the error rule further down, which carries
   equal specificity, so a future invalid state would still win. */
input.asset-checklist-form-input-readonly[b-5bxidhyrfy] {
    background: #F0F1F3 !important;
    color: #0D1B2A !important;
    cursor: not-allowed;
}

[data-theme="dark"] input.asset-checklist-form-input-readonly[b-5bxidhyrfy] {
    background: #334155 !important;
    color: #F1F5F9 !important;
    /* The global dark rule pins a visible #334155 border; the frames draw this well
       borderless, so the rest border stays transparent in both themes. */
    border-color: transparent !important;
}

/* ── AC8 — the export pair ──────────────────────────────────────────────────
   LAYOUT ONLY. The buttons themselves are the shared AimsButton pair, byte-identical to
   Project/List.razor and AssetCategory/List.razor; they carry their own solid fills, so
   there are no colour rules here.

   The eight pale-tint rules that used to live here (PDF #FEF2F2 / Excel #F0FDF4 plus
   their four dark counterparts, and the hand-rolled .asset-checklist-export-btn box) were
   DELETED on 2026-10-07, when the user ruled that the emoji pills were inconsistent with
   every other screen. This is the same correction STORY-106 DV-21 made to Vendor for the
   identical frame components (WT7EF / in2Ui) — the story repeated the mistake because its
   screen is a FORM, so the G156 "byte-identical to every other list screen" rule did not
   obviously reach it. Do not reintroduce the tints to "match the frame": the frame delta
   is the accepted divergence, not the sibling markup.

   The group stays: it right-aligns the pair on the label row, 8px apart. AimsButton
   carries its own theme treatment (G59 applies to the component, not here). */
.asset-checklist-form-export-group[b-5bxidhyrfy] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── AC5 — the RadzenHtmlEditor ─────────────────────────────────────────────
   The wrapper owns the invalid ring; Radzen's own border is removed so there is exactly
   one ring in each state. Radzen's internal DOM is reached with ::deep. */

.asset-checklist-editor[b-5bxidhyrfy] {
    /* Transparent border keeps the box stable when the G47 error ring paints it —
       the same technique the sibling inputs use. */
    border: 1.5px solid transparent;
    border-radius: 8px;
}

.asset-checklist-editor[b-5bxidhyrfy]  .rz-html-editor {
    display: flex;
    flex-direction: column;
    /* Frame: toolbar bottom (308) -> content top (328) = 20px. */
    gap: 20px;
    border: none;
    border-radius: 8px;
    overflow: visible;
}

/* Frame: 40px tall, #F0F1F3, radius 8, tools left-aligned with 8px horizontal padding.
   Radzen's own .rz-html-editor-toolbar carries padding .25rem + a border-bottom and the
   border-bottom would draw the very line the frame does not. */
.asset-checklist-editor[b-5bxidhyrfy]  .rz-html-editor-toolbar {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    height: 40px;
    min-height: 40px;
    padding: 0 8px;
    gap: 4px;
    border: none;
    border-bottom: none;
    border-radius: 8px;
    background-color: #F0F1F3;
}

[data-theme="dark"] .asset-checklist-editor[b-5bxidhyrfy]  .rz-html-editor-toolbar {
    background-color: #334155;
}

/* The tool buttons: the frame's 28x28 with 4px gaps. Radzen sizes its toolbar buttons
   from .rz-button-sm, so the Radzen class is matched as well as the element — and a
   `> *` arm covers the case where a tool renders its own wrapper element instead of a
   bare button. The frame draws nine uniform squares, so forcing the cell size is
   faithful whichever element Radzen picks; no separator or extra chrome is declared
   between the tools, so there is nothing else in the toolbar to catch. */
.asset-checklist-editor[b-5bxidhyrfy]  .rz-html-editor-toolbar > *,
.asset-checklist-editor[b-5bxidhyrfy]  .rz-html-editor-toolbar button,
.asset-checklist-editor[b-5bxidhyrfy]  .rz-html-editor-toolbar .rz-button {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 6px;
    background-color: transparent;
    /* Frame: the glyphs are #64748B in BOTH themes (measured in H9mzdw and z0Uav). */
    color: #64748B;
    box-shadow: none;
    font-size: 18px;
}

.asset-checklist-editor[b-5bxidhyrfy]  .rz-html-editor-toolbar > *:hover,
.asset-checklist-editor[b-5bxidhyrfy]  .rz-html-editor-toolbar button:hover,
.asset-checklist-editor[b-5bxidhyrfy]  .rz-html-editor-toolbar .rz-button:hover {
    background-color: #E2E8F0;
}

[data-theme="dark"] .asset-checklist-editor[b-5bxidhyrfy]  .rz-html-editor-toolbar > *:hover,
[data-theme="dark"] .asset-checklist-editor[b-5bxidhyrfy]  .rz-html-editor-toolbar button:hover,
[data-theme="dark"] .asset-checklist-editor[b-5bxidhyrfy]  .rz-html-editor-toolbar .rz-button:hover {
    background-color: #475569;
}

/* Frame: 280px tall, radius 8, 1px #E2E8F0 stroke on #FFFFFF.
   `flex: 0 0 auto` is load-bearing — Radzen ships `flex: 1` on this element, and in a
   column flex container flex-basis wins over height, so without it the box would stretch
   to the editor's content instead of holding the frame's 280. */
.asset-checklist-editor[b-5bxidhyrfy]  .rz-html-editor-content {
    flex: 0 0 auto;
    height: 280px;
    padding: 20px;
    overflow: auto;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    background-color: #FFFFFF;
    color: var(--aims-text-primary);
    outline: none;
}

[data-theme="dark"] .asset-checklist-editor[b-5bxidhyrfy]  .rz-html-editor-content {
    border-color: #475569;
    background-color: #1E293B;
}

/* G47 — the invalid ring must survive BOTH themes (explicit dark counterpart).
   Without the [data-theme="dark"] selector the two higher-specificity dark rules above
   and in app.css silently win and the field looks valid. Mirrors
   ActionProposalForm.razor.css:139-149. */
.asset-checklist-editor.aims-input-error[b-5bxidhyrfy],
[data-theme="dark"] .asset-checklist-editor.aims-input-error[b-5bxidhyrfy] {
    border-color: #EF4444 !important;
}

/* The editor's own box carries the frame's neutral stroke; when the field is invalid the
   inner ring turns red as well so the whole field reads invalid, not just its outline. */
.asset-checklist-editor.aims-input-error[b-5bxidhyrfy]  .rz-html-editor-content,
[data-theme="dark"] .asset-checklist-editor.aims-input-error[b-5bxidhyrfy]  .rz-html-editor-content {
    border-color: #EF4444 !important;
}

.asset-checklist-form-actions[b-5bxidhyrfy] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    /* Frame: Button Row padding [8, 0, 0, 0]. */
    padding-top: 8px;
}

/* Wireframe: navy #0D1B2A primary, filled #F0F1F3 secondary — both 40px tall,
   padding 0 20, radius 8. AimsButton's buttons live in another component's markup, so
   these rules use ::deep to cross the CSS-isolation boundary explicitly (the same
   technique the sibling forms use). */
.asset-checklist-form-actions[b-5bxidhyrfy]  .aims-btn-primary {
    height: 40px;
    background-color: var(--aims-navy);
    color: #FFFFFF;
    font-weight: 600;
    box-shadow: none;
}

.asset-checklist-form-actions[b-5bxidhyrfy]  .aims-btn-primary:hover {
    background-color: var(--aims-navy-light);
}

.asset-checklist-form-actions[b-5bxidhyrfy]  .aims-btn-secondary {
    height: 40px;
    background-color: var(--aims-icon-btn-bg);
    border: none;
    color: var(--aims-text-primary);
    font-weight: 600;
}

.asset-checklist-form-actions[b-5bxidhyrfy]  .aims-btn-secondary:hover {
    background-color: var(--aims-icon-btn-hover);
}

/* Dark-theme counterparts (G59) — mirror the dark wireframe frame z0Uav. */
[data-theme="dark"] .asset-checklist-form-actions[b-5bxidhyrfy]  .aims-btn-primary {
    background-color: var(--aims-teal);
    color: var(--aims-navy);
}

[data-theme="dark"] .asset-checklist-form-actions[b-5bxidhyrfy]  .aims-btn-primary:hover {
    background-color: #3FC4AE;
}

[data-theme="dark"] .asset-checklist-form-actions[b-5bxidhyrfy]  .aims-btn-secondary {
    background-color: #334155;
    color: #F1F5F9;
}

[data-theme="dark"] .asset-checklist-form-actions[b-5bxidhyrfy]  .aims-btn-secondary:hover {
    background-color: #3E4C63;
}
/* /Components/Pages/SystemSettings/AssetChecklist/AssetList.razor.rz.scp.css */
/* ============================================================================
   Asset List page — Maintenance Asset Checklist (wireframe KTkIp / sCay8, light + dark)

   STORY-149 (AD-S08). Page-scoped styling for the asset-first register.

   G139 — Blazor scoped CSS is PER-COMPONENT: this file styles THIS page only.
   AssetCategory/List.razor.css defining .asset-category-search-icon proves
   nothing here; the rules below are re-expressed for this page's own class names.

   Why these rules live here rather than in wwwroot/app.css: they are the toolbar
   glyph colours and the empty state — all page-specific. The global stylesheet
   keeps only shared component classes and design tokens. The dropdowns and the
   Search button need nothing here: RadzenDropDown inherits the theme's shared
   .rz-dropdown treatment (app.css already carries its dark overrides) and the
   Search button is the shared AimsButton primary, so both themes are covered by
   chrome this page does not own.

   G143 — the VALUES are re-derived from the AD-S08 frames, not copied from a
   sibling. The search glyph is #A0AEC0 in KTkIp and #64748B in sCay8 — the same
   pair the Asset Category frame pair carries, re-read from THIS frame pair.

   G59 — every colour carries a [data-theme="dark"] counterpart taken from the
   dark frame sCay8: the search glyph flips #A0AEC0 -> #64748B; the clear × is
   #64748B in both.
   ============================================================================ */

/* --- Toolbar glyphs ----------------------------------------------------------
   The two glyphs carry NO inline colour: they inherit from these classes so the
   theme pair can be expressed. Frame KTkIp — search icon #A0AEC0, and the clear ×
   is #64748B in both themes (G59). */
.asset-checklist-search-icon[b-ycq3jul19g] {
    color: #A0AEC0;
}

[data-theme="dark"] .asset-checklist-search-icon[b-ycq3jul19g] {
    color: #64748B;
}

/* The clear × is only rendered while a search term is present — the frame draws it
   over its own CLIPPED placeholder, which is a frame artefact (the box is too
   narrow to hold the placeholder it draws), so its colour is taken from the
   family's settled pair rather than measured off that overlap. */
.asset-checklist-clear-icon[b-ycq3jul19g] {
    color: #64748B;
}

[data-theme="dark"] .asset-checklist-clear-icon[b-ycq3jul19g] {
    color: #64748B;
}

/* --- Empty state -------------------------------------------------------------
   Text only: this screen has no create path (D5(a)), so the empty state carries
   no icon and no Add prompt, unlike the sibling registers. The frame draws seven
   rows and no empty state, so the copy colour pair is the family's
   (--aims-text-muted: #64748B light / #94A3B8 dark). */
.asset-checklist-empty-state[b-ycq3jul19g] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 28px 20px;
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    color: #64748B;
}

.asset-checklist-empty-state p[b-ycq3jul19g] {
    margin: 0;
}

[data-theme="dark"] .asset-checklist-empty-state[b-ycq3jul19g] {
    color: #94A3B8;
}
/* /Components/Pages/SystemSettings/AssetChecklist/ItemList.razor.rz.scp.css */
/* ============================================================================
   ItemList page — Maintenance Asset Checklist, per-asset work-item list
   (STORY-149 / AC2, route /app|/idmc/settings/asset-checklists/{AssetId:int}).

   ⚠️ THIS SCREEN HAS NO WIREFRAME (plan §3a / §9a DV-9). The four AD-S08 frames
   draw only the Asset List and the Edit form. Every rule below is therefore
   re-expressed from the SIBLING screens' chrome — the Edit frame's read-only
   asset fields and the settings lists' empty state — not from a frame of its
   own. Nothing here is invented chrome: the page carries no search box, no
   filter, no export and no delete, and this file defines no rule for them.

   G139 — Blazor scoped CSS is PER-COMPONENT: a class only applies if THIS file
   defines it. WarningParameterForm.razor.css's .warning-parameter-form-readonly*
   rules prove nothing here; the rules below are re-expressed for this page's own
   class names. (.aims-profile-card, .aims-auth-input-group, .aims-auth-error and
   .aims-profile-loading are GLOBAL classes in wwwroot/app.css and are used as
   such.)

   G29 — RadzenDataGrid column widths are set on RadzenDataGridColumn
   (Width="..."), never here; these rules only reach elements this page's own
   markup renders, plus the RadzenTextBox input through ::deep (its <input> is
   rendered by ANOTHER component, so a plain `input.…` selector would never match
   it — G29/G139).

   G59 — every colour carries a [data-theme="dark"] counterpart. The read-only
   pair is STORY-147's DV-2 treatment verbatim: surface #F0F1F3 light / #334155
   dark; VALUE TEXT STAYS PRIMARY (#0D1B2A / #F1F5F9 — #A0AEC0 on #F0F1F3 is
   ≈1.9:1, a WCAG AA fail); #F8FAFC was rejected because on the white card it is
   LIGHTER than an editable fill and would read as MORE editable. The empty-state
   copy is the settings lists' pair (#64748B → #94A3B8).
   ============================================================================ */

/* --- Asset summary: the two read-only fields, side by side ------------------
   The Edit frame (H9mzdw) draws Asset No. / Asset Name as one row of two equal
   fields with no leading glyph, so there is no icon offset here and no icon name
   to validate (G172). Geometry mirrors the sibling form: 12px/600 label, 44px
   field, radius 8. */
.asset-checklist-item-summary-row[b-zov1t6zouk] {
    display: flex;
    gap: 20px;
}

.asset-checklist-item-summary-field[b-zov1t6zouk] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    /* G87 — flex-basis 0 keeps the field content-independent; `auto` would let a
       long asset name widen it away from the frame's fill_container geometry. */
    flex: 1 1 0;
    min-width: 0;
}

.asset-checklist-item-summary-label[b-zov1t6zouk] {
    font-size: 12px;
    font-weight: 600;
    line-height: 20px;
    color: var(--aims-text-primary);
}

/* --- G85 / DV-2 read-only cue (STORY-147's, re-expressed) -------------------
   Semantics, not decoration: the field is focusable and readable but cannot be
   edited, so it must not present a text caret affordance. ReadOnly="true" (not
   Disabled) keeps tab order and assistive-tech reachability. */
.asset-checklist-item-readonly-group[b-zov1t6zouk] {
    cursor: not-allowed;
}

.asset-checklist-item-readonly-group[b-zov1t6zouk]  input {
    width: 100%;
    height: 44px;
    /* Transparent border keeps the 44px box stable if the global error ring ever
       paints it. */
    border: 1.5px solid transparent;
    border-radius: 8px;
    padding: 0 14px;
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    /* Radzen's .rz-textbox pins a computed line-height and its own transition; both
       are neutralised so the read-only field matches its editable siblings rather
       than differing by framework default. */
    line-height: normal;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
    /* PRIMARY text colour — do NOT mute it (DV-2: muted-on-muted fails WCAG AA).
       !important is required because Radzen's own .rz-textbox rule sets both the
       colour and the background. */
    color: #0D1B2A !important;
    background: #F0F1F3 !important;
    box-shadow: none;
    outline: none;
    cursor: not-allowed;
}

[data-theme="dark"] .asset-checklist-item-readonly-group[b-zov1t6zouk]  input {
    color: #F1F5F9 !important;
    /* Deliberately LIGHTER than the dark card (--aims-surface-bg #1A2332) so the
       field stops reading as an inset input well — DV-2, do not "correct" it. */
    background: #334155 !important;
    border-color: transparent !important;
}

/* Dark theme: a PRE-EXISTING global rule — app.css [data-theme="dark"]
   input[type="text"] { border-color: var(--aims-border-color) !important }
   (specificity 0,2,1) — would otherwise pin a visible #334155 border on a field
   the frame draws borderless. Matching that rule's !important at a HIGHER
   specificity makes the field's own treatment win in dark mode too. Same
   technique (and the same reason) as STORY-147's proven sibling rule
   [data-theme="dark"] .warning-parameter-form-readonly-group ::deep input. */
[data-theme="dark"] input.asset-checklist-item-summary-input[b-zov1t6zouk] {
    border-color: transparent !important;
}

/* --- Empty state (AC2 — the Add / Register affordance's home) ---------------
   The Add affordance renders ONLY when the asset has no rows, so it lives in the
   grid's <EmptyTemplate>; this block is that state's chrome. Re-expressed from
   the settings lists' empty state (AssetCategory/List.razor.css), because no
   AD-S08 frame draws this screen. */
.asset-checklist-item-empty-state[b-zov1t6zouk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 28px 20px;
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    color: #64748B;
}

.asset-checklist-item-empty-state p[b-zov1t6zouk] {
    margin: 0;
}

[data-theme="dark"] .asset-checklist-item-empty-state[b-zov1t6zouk] {
    color: #94A3B8;
}
/* /Components/Pages/SystemSettings/Project/ProjectForm.razor.rz.scp.css */
/* ============================================================================
   Add/Edit Form — Project (wireframe yUSFp / MxHK5, light + dark)

   STORY-090 (AD-S15). Shared by Add.razor and Edit.razor through ProjectForm.razor.

   G139 — Blazor scoped CSS is PER-COMPONENT. The sibling AllocationForm.razor.css
   defines .allocation-form-* and its selectors do NOT reach this component, so the
   rules below are duplicated-and-renamed rather than inherited. Shipping the markup
   without this file would render the card unstyled (build stays 0/0 — silent).

   These styles are page-scoped ON PURPOSE and live here rather than in
   wwwroot/app.css: they re-skin the form to the wireframe's measured geometry
   (full-width card inside the 24px page padding, padding 40, filled borderless
   44px inputs, sentence-case 12/600 labels, navy primary / filled-neutral
   secondary action row), which is the opposite of the shared aims-profile-*
   design system on every defining property. Per the project's CSS architecture,
   page-specific styling belongs in a scoped .razor.css — the global stylesheet
   keeps only shared component classes and design tokens.

   Frame delta vs the Allocation sibling (DV-5 family, recorded in the plan and
   the ui-spec): AD-S15's Content frame carries padding 24 (not the Allocation
   frames' 60/200), so the card is FULL WIDTH here — there is no 780px centred
   cap. Everything else (gap 20, padding 40, radius 12, 44px inputs, 40px action
   row) is identical between the two wireframes.

   The Status toggle is the one Radzen component in this form. Its rules stay in
   app.css alongside finance-switch / asset-type-switch / allocation-switch /
   project-switch (the established convention for switch styling), because CSS
   isolation cannot reach Radzen's internal DOM with plain selectors — G29.

   Colours route through --aims-* tokens or pinned hexes with explicit
   [data-theme="dark"] counterparts (G59).
   ============================================================================ */

.project-form-card[b-h4e0e1kabx] {
    width: 100%;
    margin: 0;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: var(--aims-surface-bg);
    /* Frame yUSFp/MxHK5: the card is a rounded surface on the page background. */
    border: none;
    border-radius: 12px;
}

.project-form-fields[b-h4e0e1kabx] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.project-form-field[b-h4e0e1kabx] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.project-form-label[b-h4e0e1kabx] {
    font-size: 12px;
    font-weight: 600;
    line-height: 20px;
    color: var(--aims-text-primary);
}

/* Required marker inherits the label colour — the frame does not draw a red asterisk. */
.project-form-required[b-h4e0e1kabx] {
    color: inherit;
}

.project-form-input[b-h4e0e1kabx] {
    width: 100%;
    height: 44px;
    /* Transparent border keeps the 44px box stable when the error state paints it. */
    border: 1.5px solid transparent;
    border-radius: 8px;
    padding: 0 14px;
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    color: var(--aims-text-primary);
    background: var(--aims-page-bg);
    outline: none;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.project-form-input[b-h4e0e1kabx]::placeholder {
    color: #A0AEC0;
}

.project-form-input:focus[b-h4e0e1kabx] {
    box-shadow: 0 0 0 3px rgba(77, 217, 192, 0.15);
}

.project-form-input.has-icon-left[b-h4e0e1kabx] {
    padding-left: 44px;
}

/* Dark theme: a PRE-EXISTING global rule — app.css [data-theme="dark"]
   input[type="text"] { border-color: var(--aims-border-color) !important }
   (STORY-091) — pins a visible #334155 border at specificity (0,2,1), which
   outranks the transparent rest border above and made the dark form show
   outlined inputs where the frames (VpHw4 / BCrxG) draw them borderless.
   Same technique as G47: match the global rule's !important with a HIGHER
   specificity (0,3,1) so the frame's treatment wins in dark mode too.
   Placed BEFORE the error rule below, which carries equal specificity — the
   later error rule therefore still wins when a field is invalid. */
[data-theme="dark"] input.project-form-input[b-h4e0e1kabx],
[data-theme="dark"] input.project-form-input.has-icon-left[b-h4e0e1kabx] {
    border-color: transparent !important;
}

/* G47 — the invalid ring must survive BOTH themes (explicit dark counterpart).
   Without the [data-theme="dark"] selector the app's dark input border rule
   (specificity 0,2,1, !important) silently wins and the field looks valid. */
input.project-form-input.aims-input-error[b-h4e0e1kabx],
[data-theme="dark"] input.project-form-input.aims-input-error[b-h4e0e1kabx] {
    border-color: #EF4444 !important;
}

.project-form-actions[b-h4e0e1kabx] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    /* Frame: Button Row padding [8, 0, 0, 0]. */
    padding-top: 8px;
}

/* Wireframe: navy #0D1B2A primary, filled #F0F1F3 secondary — both 40px tall,
   padding 0 20, radius 8. AimsButton's buttons live in another component's
   markup, so these rules use ::deep to cross the CSS-isolation boundary
   explicitly (the same technique the sibling forms and R05FinanceDashboard use). */
.project-form-actions[b-h4e0e1kabx]  .aims-btn-primary {
    height: 40px;
    background-color: var(--aims-navy);
    color: #FFFFFF;
    font-weight: 600;
    box-shadow: none;
}

.project-form-actions[b-h4e0e1kabx]  .aims-btn-primary:hover {
    background-color: var(--aims-navy-light);
}

.project-form-actions[b-h4e0e1kabx]  .aims-btn-secondary {
    height: 40px;
    background-color: var(--aims-icon-btn-bg);
    border: none;
    color: var(--aims-text-primary);
    font-weight: 600;
}

.project-form-actions[b-h4e0e1kabx]  .aims-btn-secondary:hover {
    background-color: var(--aims-icon-btn-hover);
}

/* Dark-theme counterparts (G59) — mirror the dark wireframe frames VpHw4 / BCrxG. */
[data-theme="dark"] .project-form-actions[b-h4e0e1kabx]  .aims-btn-primary {
    background-color: var(--aims-teal);
    color: var(--aims-navy);
}

[data-theme="dark"] .project-form-actions[b-h4e0e1kabx]  .aims-btn-primary:hover {
    background-color: #3FC4AE;
}

[data-theme="dark"] .project-form-actions[b-h4e0e1kabx]  .aims-btn-secondary {
    background-color: #334155;
    color: #F1F5F9;
}

[data-theme="dark"] .project-form-actions[b-h4e0e1kabx]  .aims-btn-secondary:hover {
    background-color: #3E4C63;
}
/* /Components/Pages/SystemSettings/SatelliteLocation/List.razor.rz.scp.css */
/* ============================================================================
   List page — Satellite Location (wireframe NkA6J / Q9K6G, light + dark)

   STORY-148 (AD-S13). Page-scoped styling for the Satellite Location register.

   G139 — Blazor scoped CSS is PER-COMPONENT: AssetCategory/List.razor.css defining
   .asset-category-search-icon proves nothing here; the rules below are re-expressed
   for THIS page's own class names. Shipping the markup without this file would
   render the toolbar glyphs and the empty state unstyled while the build stays 0/0
   (silent).

   Why these rules live here rather than in wwwroot/app.css: they are the toolbar
   glyph colours, a badge nowrap guard and the AC2 empty state — all page-specific.
   Per the project's CSS architecture the global stylesheet keeps only shared
   component classes and design tokens. The shared aims-badge-* pair is deliberately
   NOT touched (G103), and the two classes this story adds globally
   (.satellite-location-switch, .satellite-location-row-inactive) are already in
   app.css with their dark counterparts (G59) because CSS isolation cannot reach
   Radzen's internal DOM nor the <td> of a column template.

   G29 — RadzenDataGrid's column widths are set on RadzenDataGridColumn
   (Width="..."), never here; the rules below only reach elements this page's own
   templates render (the cell spans) plus AimsButton's root, which would need ::deep
   if styled (it is not — G156 keeps the export pair byte-identical to the siblings,
   which style it globally).

   G59 — every colour carries a [data-theme="dark"] counterpart taken from the dark
   frame Q9K6G: search glyph #A0AEC0 → #64748B, the clear × is #64748B in both,
   empty-state copy #64748B → #94A3B8.
   ============================================================================ */

/* --- Toolbar glyphs ----------------------------------------------------------
   The search and clear icons carry NO inline colour: they inherit from these
   classes so the theme pair can be expressed. Frame NkA6J — search icon #A0AEC0;
   the clear × is #64748B in both themes (G59). */
.satellite-location-search-icon[b-zljxrsytvf] {
    color: #A0AEC0;
}

[data-theme="dark"] .satellite-location-search-icon[b-zljxrsytvf] {
    color: #64748B;
}

.satellite-location-clear-icon[b-zljxrsytvf] {
    color: #64748B;
}

[data-theme="dark"] .satellite-location-clear-icon[b-zljxrsytvf] {
    color: #64748B;
}

/* --- G99: keep the Status badge on one line -------------------------------
   The badge reuses the shared aims-badge-active / -inactive pair (never
   recoloured — G103) but must opt OUT of any cell-level wrapping. The clip that
   BUG-032 records is the .rz-cell-data box (overflow:hidden, 16px per side), which
   the 120px column width above clears; this rule only stops the pill from folding
   onto two lines inside that box. Frame NkA6J draws the badge as a 90x24 r12 chip
   with the label centred. */
.satellite-location-status-badge[b-zljxrsytvf] {
    white-space: nowrap;
    overflow-wrap: normal;
}

/* --- AC2 empty state ------------------------------------------------------- */
.satellite-location-empty-state[b-zljxrsytvf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 28px 20px;
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    color: #64748B;
}

.satellite-location-empty-state p[b-zljxrsytvf] {
    margin: 0;
}

[data-theme="dark"] .satellite-location-empty-state[b-zljxrsytvf] {
    color: #94A3B8;
}
/* /Components/Pages/SystemSettings/SatelliteLocation/Rooms/RoomTab.razor.rz.scp.css */
/* ============================================================================
   Room Information tab — Satellite Location (STORY-148, AD-S13, AC10)

   Scoped to Rooms/RoomTab.razor. The AD-S13 Rooms frames (O2uTM5 / Cg6lw) draw
   the tab's grid, its toolbar and its pager; the two modal frames (kWgtZ / kU1cn
   Add, EIToE / j3tqAm Edit) belong to LocationRoomDialog.razor, which has no
   scoped sheet of its own and reuses the global .aims-dialog* classes.

   G139 — Blazor scoped CSS is PER-COMPONENT: AssetCategory/List.razor.css owning
   .asset-category-status-badge proves nothing for the rooms grid. The rules below
   are re-expressed for this component's own class names. Two of the three classes
   the grid needs are NOT here on purpose:
     - the inactive-row treatment is the GLOBAL .satellite-location-row-inactive
       (app.css, with its [data-theme="dark"] counterpart) — shared with tab 1's
       location list, so the two grids of this screen subdue rows identically; and
     - the Status toggle styling is the GLOBAL .satellite-location-switch
       (app.css) — CSS isolation cannot reach Radzen's internal DOM (G29), so a
       scoped rule could never style .rz-switch-circle anyway.

   G143 — every VALUE below is read from the AD-S13 Rooms frame pair, not copied
   from a sibling: the grid renders a chip, a plain-text cell pair and an icon
   slot, so the sibling's long-token overflow rule has no counterpart here.

   G59 — every colour carries a [data-theme="dark"] counterpart. The two mixes
   used here are the family's shared pair: #64748B (light) / #94A3B8 (dark), the
   same values the sibling settings lists pin for their muted copy.
   ============================================================================ */

/* --- G99: keep the Status badge on one line -------------------------------
   The badge reuses the shared aims-badge-active / -inactive pair (never
   recoloured — G103) but must opt OUT of any cell-level wrapping. Frame O2uTM5
   draws the badge as a chip with its label centred. */
.room-tab-status-badge[b-iukl1pnmlw] {
    white-space: nowrap;
    overflow-wrap: normal;
}

/* --- Empty state ----------------------------------------------------------
   Mirrors the sibling lists' empty state (icon + copy + the Add affordance),
   because AC2's "prompt the user" rule is the register family's shared shape and
   this grid is the same kind of paged register one level down. */
.room-tab-empty-state[b-iukl1pnmlw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 28px 20px;
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    color: #64748B;
}

.room-tab-empty-state p[b-iukl1pnmlw] {
    margin: 0;
}

[data-theme="dark"] .room-tab-empty-state[b-iukl1pnmlw] {
    color: #94A3B8;
}

/* --- No-parent guard ------------------------------------------------------
   Rendered instead of the grid when the component is handed no location id.
   The Add page's tab host is expected to keep tab 2 disabled in that state
   (DV-12); this is the component-level defence behind it — a grid pointed at
   location 0 would ask the service for a parent that cannot exist. */
.room-tab-no-parent[b-iukl1pnmlw] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    background: #F7F8FA;
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    color: #64748B;
}

[data-theme="dark"] .room-tab-no-parent[b-iukl1pnmlw] {
    background: var(--aims-surface-bg);
    border-color: #2D3748;
    color: #94A3B8;
}
/* /Components/Pages/SystemSettings/SatelliteLocation/SatelliteLocationForm.razor.rz.scp.css */
/* ============================================================================
   Add/Edit Form — Satellite Location (wireframe I4jxi / h7A2U, light + dark)

   STORY-148 (AD-S13). Shared by Add.razor and Edit.razor through
   SatelliteLocationForm.razor.

   G139 — Blazor scoped CSS is PER-COMPONENT. The sibling AssetCategoryForm.razor.css
   defines .asset-category-form-* and its selectors do NOT reach this component, so the
   rules below are re-expressed rather than inherited. Shipping the markup without this
   file would render the card unstyled (build stays 0/0 — silent).

   These styles are page-scoped ON PURPOSE and live here rather than in
   wwwroot/app.css: they re-skin the form to the wireframe's measured geometry
   (full-width card inside the 24px page padding, padding 40, gap 20, filled borderless
   44px input, sentence-case 12/600 label, navy primary / filled-neutral secondary action
   row), which is the opposite of the shared aims-profile-* design system on every
   defining property. Per the project's CSS architecture, page-specific styling belongs in
   a scoped .razor.css — the global stylesheet keeps only shared component classes and
   design tokens.

   G143 — the VALUES below are re-derived from the AD-S13 frames, NOT copied from
   AssetCategoryForm.razor.css. The structural differences matter:
     (1) this form has TEN fields, not three — five row wrappers (two two-column rows, a
         full-width Address textarea, a two-column Postcode/City row, a two-column
         State/Phone row, then full-width Person In Charge and Floor), plus the Status
         field and the button row;
     (2) it carries a TEXTAREA (Address) the sibling has no counterpart for, so the
         textarea geometry, its wrapping and its top-aligned leading glyph are new here;
     (3) it carries a SELECT (State) with the frame's chevron, so the native control's
         appearance is normalised and the placeholder option is muted;
     (4) it carries the READ-ONLY Location Code surface on Edit (D4(a)), which the sibling
         has no counterpart for at all (STORY-147's WarningParameter form is the family's
         read-only precedent and the treatment below follows it).
   The frames are 1440px desktop with everything full-width, so the sibling's
   narrow-viewport stacking media query has no counterpart here.
   The frame draws each label with the asterisk INSIDE the label text ("Location Code *")
   — it renders as plain text, matching the frame. Floor and Phone No are the two
   optional fields and carry no asterisk.

   The Status toggle is the one Radzen component in this form. Its rules stay in app.css
   alongside the six sibling switch blocks (the established convention for switch styling,
   G29), because CSS isolation cannot reach Radzen's internal DOM with plain selectors.

   Colours route through --aims-* tokens or pinned hexes with explicit
   [data-theme="dark"] counterparts (G59). Dark values come from the dark frames
   J3ZHOA / p3Jhq (#1E293B card / #0F172A input / #F1F5F9 label / #334155 cancel /
   #4DD9C0 save), and the field glyph pair is #A0AEC0 -> #64748B.

   G183 — the leading glyph is a CHILD BOX inside the input group: it is positioned, not
   flowed, so it cannot be cut by the group's box. Nothing here sets overflow:hidden on a
   container holding a fixed-size child.
   ============================================================================ */

.satellite-location-form-card[b-7blodm31qv] {
    width: 100%;
    margin: 0;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: var(--aims-surface-bg);
    /* Frame I4jxi/h7A2U: the card is a rounded surface on the page background. */
    border: none;
    border-radius: 12px;
}

.satellite-location-form-fields[b-7blodm31qv] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.satellite-location-form-row[b-7blodm31qv] {
    display: flex;
    gap: 20px;
}

.satellite-location-form-row .satellite-location-form-field[b-7blodm31qv] {
    /* G87 — flex-basis 0 keeps the field content-independent; `auto` would let a long
       value widen it away from the frame's fill_container geometry. */
    flex: 1 1 0;
    min-width: 0;
}

.satellite-location-form-field[b-7blodm31qv] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.satellite-location-form-label[b-7blodm31qv] {
    font-size: 12px;
    font-weight: 600;
    line-height: 20px;
    color: var(--aims-text-primary);
}

/* One rule reaches all three control types (input, select, textarea) so their filled,
   borderless geometry cannot drift apart. */
.satellite-location-form-input[b-7blodm31qv] {
    width: 100%;
    height: 44px;
    /* Transparent border keeps the 44px box stable when the error state paints it. */
    border: 1.5px solid transparent;
    border-radius: 8px;
    padding: 0 14px;
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    color: var(--aims-text-primary);
    background: var(--aims-page-bg);
    outline: none;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.satellite-location-form-input[b-7blodm31qv]::placeholder {
    color: #A0AEC0;
}

/* --- Address (textarea, full width) ------------------------------------------
   The frame draws a three-line box. `height: auto` overrides the 44px above; the
   min-height is the frame's measured box, and the leading glyph is lifted to the first
   line (the shared icon span is vertically centred, which would float it mid-box on a
   multi-line control). */
.satellite-location-form-textarea[b-7blodm31qv] {
    height: auto;
    min-height: 88px;
    padding: 12px 14px;
    line-height: 1.45;
    resize: vertical;
}

.satellite-location-form-textarea-group[b-7blodm31qv] {
    align-items: flex-start;
}

.satellite-location-form-textarea-group .aims-auth-input-icon-left[b-7blodm31qv] {
    top: 12px;
}

/* --- State dropdown ----------------------------------------------------------
   The native arrow is suppressed so the frame's own chevron is the only affordance;
   the placeholder option is muted until a state is chosen (G27). */
select.satellite-location-form-input[b-7blodm31qv] {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

select.satellite-location-form-input.is-placeholder[b-7blodm31qv] {
    color: #A0AEC0;
}

select.satellite-location-form-input option[b-7blodm31qv] {
    background: var(--aims-surface-bg);
    color: var(--aims-text-primary);
}

[data-theme="dark"] select.satellite-location-form-input.is-placeholder[b-7blodm31qv] {
    color: #64748B;
}

/* The field glyph carries NO inline colour: it inherits from this class so the theme
   pair can be expressed. Frame I4jxi draws every glyph #A0AEC0 and the dark frame
   J3ZHOA draws them #64748B (G59: an inline Style could not carry a dark counterpart). */
.satellite-location-form-icon[b-7blodm31qv] {
    color: #A0AEC0;
}

[data-theme="dark"] .satellite-location-form-icon[b-7blodm31qv] {
    color: #64748B;
}

/* D4(a) — in the Edit frame the Location Code glyph is the ONLY one drawn #64748B (the
   lock). Same colour in both themes: the dark frame p3Jhq keeps the lock at #64748B too,
   and #64748B already contrasts against the dark card. */
.satellite-location-form-icon-lock[b-7blodm31qv] {
    color: #64748B;
}

.satellite-location-form-input:focus[b-7blodm31qv] {
    box-shadow: 0 0 0 3px rgba(77, 217, 192, 0.15);
}

.satellite-location-form-input.has-icon-left[b-7blodm31qv] {
    padding-left: 44px;
}

[data-theme="dark"] .satellite-location-form-input[b-7blodm31qv]::placeholder {
    color: #64748B;
}

/* Dark theme: a PRE-EXISTING global rule — app.css [data-theme="dark"]
   input[type="text"]/textarea/select { background/border-color: ... !important }
   (STORY-091) — pins a visible #334155 border and the page background at specificity
   (0,2,1), which outranks the transparent rest border above and would make the dark form
   show outlined inputs where the frames (J3ZHOA / p3Jhq) draw them borderless. Blazor
   appends the scope attribute to the LAST compound selector, so the rules below resolve
   at (0,3,1) and win — the same technique the sibling forms use.
   Placed BEFORE the error rule below, which carries equal specificity — the later error
   rule therefore still wins when a field is invalid. */
[data-theme="dark"] input.satellite-location-form-input[b-7blodm31qv],
[data-theme="dark"] input.satellite-location-form-input.has-icon-left[b-7blodm31qv],
[data-theme="dark"] textarea.satellite-location-form-input[b-7blodm31qv],
[data-theme="dark"] select.satellite-location-form-input[b-7blodm31qv] {
    border-color: transparent !important;
}

/* G47 — the invalid ring must survive BOTH themes (explicit dark counterpart).
   Without the [data-theme="dark"] selector the app's dark input border rule
   (specificity 0,2,1, !important) silently wins and the field looks valid. */
input.satellite-location-form-input.aims-input-error[b-7blodm31qv],
textarea.satellite-location-form-input.aims-input-error[b-7blodm31qv],
select.satellite-location-form-input.aims-input-error[b-7blodm31qv],
[data-theme="dark"] input.satellite-location-form-input.aims-input-error[b-7blodm31qv],
[data-theme="dark"] textarea.satellite-location-form-input.aims-input-error[b-7blodm31qv],
[data-theme="dark"] select.satellite-location-form-input.aims-input-error[b-7blodm31qv] {
    border-color: #EF4444 !important;
}

/* ----------------------------------------------------------------------------
   READ-ONLY Location Code (D4(a) / AC5) — the family's re-derivation, mirrored from
   WarningParameterForm.razor.css (STORY-147 DV-2), which is the only sibling with a
   read-only field. Surface swap ONLY: light #F0F1F3 (the family's muted-surface token,
   shared with the table header and the icon-button fill) instead of the editable
   --aims-page-bg (#F7F8FA); dark #334155 instead of #0F1923. #F8FAFC was rejected
   (lighter than the editable fill on a white card → it would read as MORE editable), and
   muting the value was rejected on contrast (#A0AEC0 on #F0F1F3 is ~1.9:1, a WCAG AA
   fail) — THE VALUE TEXT STAYS PRIMARY.
   The control here is a RAW <input> in this component's own markup, so the selectors
   below need no ::deep (unlike the sibling's RadzenTextBox, whose <input> is rendered by
   another component and carries none of this file's scope). `!important` is still
   required: the STORY-091 dark rule above sets background and colour with it.
   ---------------------------------------------------------------------------- */
.satellite-location-form-readonly-group[b-7blodm31qv] {
    /* Semantics, not decoration: the field is focusable and readable but cannot be
       edited, so it must not present a text caret affordance. */
    cursor: not-allowed;
}

.satellite-location-form-readonly-group .satellite-location-form-label[b-7blodm31qv] {
    /* No counterpart rule needed on the label — recorded here only to show the label was
       considered: the frame keeps it at the primary colour, unchanged. */
    color: var(--aims-text-primary);
}

input.satellite-location-form-readonly[b-7blodm31qv] {
    /* PRIMARY text colour — do NOT mute it (DV-2: muted-on-muted fails WCAG AA). */
    color: #0D1B2A !important;
    background: #F0F1F3 !important;
    cursor: not-allowed;
}

[data-theme="dark"] input.satellite-location-form-readonly[b-7blodm31qv] {
    color: #F1F5F9 !important;
    /* Deliberately LIGHTER than the dark card (--aims-surface-bg) so the field reads as a
       read-only well rather than an editable one — DV-2, do not "correct" it. */
    background: #334155 !important;
    border-color: transparent !important;
}

/* --- State field's right-hand adornment pair (info + chevron) ----------------- */
.satellite-location-form-tooltip-icon[b-7blodm31qv] {
    color: #64748B;
}

[data-theme="dark"] .satellite-location-form-tooltip-icon[b-7blodm31qv] {
    color: #94A3B8;
}

.satellite-location-form-actions[b-7blodm31qv] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    /* Frame: Button Row padding [8, 0, 0, 0]. */
    padding-top: 8px;
}

/* Wireframe: navy #0D1B2A primary, filled #F0F1F3 secondary — both 40px tall,
   padding 0 20, radius 8. AimsButton's buttons live in another component's markup, so
   these rules use ::deep to cross the CSS-isolation boundary explicitly (the same
   technique the sibling forms use). */
.satellite-location-form-actions[b-7blodm31qv]  .aims-btn-primary {
    height: 40px;
    background-color: var(--aims-navy);
    color: #FFFFFF;
    font-weight: 600;
    box-shadow: none;
}

.satellite-location-form-actions[b-7blodm31qv]  .aims-btn-primary:hover {
    background-color: var(--aims-navy-light);
}

.satellite-location-form-actions[b-7blodm31qv]  .aims-btn-secondary {
    height: 40px;
    background-color: var(--aims-icon-btn-bg);
    border: none;
    color: var(--aims-text-primary);
    font-weight: 600;
}

.satellite-location-form-actions[b-7blodm31qv]  .aims-btn-secondary:hover {
    background-color: var(--aims-icon-btn-hover);
}

/* Dark-theme counterparts (G59) — mirror the dark wireframe frames J3ZHOA / p3Jhq. */
[data-theme="dark"] .satellite-location-form-actions[b-7blodm31qv]  .aims-btn-primary {
    background-color: var(--aims-teal);
    color: var(--aims-navy);
}

[data-theme="dark"] .satellite-location-form-actions[b-7blodm31qv]  .aims-btn-primary:hover {
    background-color: #3FC4AE;
}

[data-theme="dark"] .satellite-location-form-actions[b-7blodm31qv]  .aims-btn-secondary {
    background-color: #334155;
    color: #F1F5F9;
}

[data-theme="dark"] .satellite-location-form-actions[b-7blodm31qv]  .aims-btn-secondary:hover {
    background-color: #3E4C63;
}
/* /Components/Pages/SystemSettings/Vendor/List.razor.rz.scp.css */
/* ============================================================================
   List page — Vendor (wireframe qbmhT / FxzbT, light + dark)

   STORY-106 (AD-S07). Page-scoped styling for the Vendor register.

   G139 — Blazor scoped CSS is PER-COMPONENT: this file styles THIS page only. The
   sibling Project list ships no stylesheet at all, so nothing is inherited.

   Why these rules live here rather than in wwwroot/app.css: they either (a) re-skin
   a control the frame draws differently from the sibling (the two pale-tinted export
   pills), or (b) fix a cell-level wrapping hazard specific to Vendor's column set.
   Per the project's CSS architecture the global stylesheet keeps only shared
   component classes and design tokens; page-specific styling belongs in a scoped
   .razor.css. The shared aims-badge-* pair is deliberately NOT touched (G103).

   G29 — RadzenDataGrid's column widths are set on RadzenDataGridColumn
   (Width="..."), never here; the rules below only reach elements this page's own
   templates render (the cell spans) plus AimsButton's root, which needs ::deep.
   G59 — every colour carries a [data-theme="dark"] counterpart taken from the
   dark frame: PDF pill #3B1C1C / #FCA5A5, Excel pill #064E3B / #86EFAC.
   ============================================================================ */

/* --- Toolbar glyphs ----------------------------------------------------------
   The search and clear icons carry NO inline colour: they inherit from these
   classes so the theme pair can be expressed. Frame values — search icon #A0AEC0
   (light) / #64748B (dark); the clear × is #64748B in both (G59). */
.vendor-search-icon[b-rxegblk54r] {
    color: #A0AEC0;
}

[data-theme="dark"] .vendor-search-icon[b-rxegblk54r] {
    color: #64748B;
}

.vendor-clear-icon[b-rxegblk54r] {
    color: #64748B;
}

[data-theme="dark"] .vendor-clear-icon[b-rxegblk54r] {
    color: #64748B;
}

/* --- Export buttons: REMOVED 2026-09-14 (user-directed) ---------------------
   These were the frame's pale-tinted pills — PDF  #FEF2F2 / #B91C1C and Excel
   #F0FDF4 / #15803D, each with a [data-theme="dark"] counterpart. They made the
   Vendor toolbar visibly different from every other settings list, so the two
   buttons now use the app-wide convention instead: the Danger variant's red for
   PDF, and a Danger button with an inline #217346 green for Excel — identical to
   Project / Asset Type / Facility Management Code. Styling them here is no longer
   needed; the inline green cannot carry a dark counterpart, which is the accepted
   sibling behaviour. If the tinted pills are ever reinstated, restore the rules
   from git history rather than re-deriving the hex values. */

/* --- G97: the Email column holds long unbreakable tokens -------------------
   (bintang.inovasi@example.com, gve.admin@example.com). Without overflow-wrap a
   200px cell paints its text over the neighbouring Status column. */
.vendor-email-cell[b-rxegblk54r] {
    display: inline-block;
    max-width: 100%;
    overflow-wrap: anywhere;
}

/* --- G99: keep the Status badge on one line -------------------------------
   The badge reuses the shared aims-badge-active / -inactive pair (never
   recoloured — G103) but must opt OUT of any cell-level wrapping. */
.vendor-status-badge[b-rxegblk54r] {
    white-space: nowrap;
    overflow-wrap: normal;
}

/* --- AC2 empty state ------------------------------------------------------- */
.vendor-empty-state[b-rxegblk54r] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 28px 20px;
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    color: #64748B;
}

.vendor-empty-state p[b-rxegblk54r] {
    margin: 0;
}

[data-theme="dark"] .vendor-empty-state[b-rxegblk54r] {
    color: #94A3B8;
}
/* /Components/Pages/SystemSettings/Vendor/VendorForm.razor.rz.scp.css */
/* ============================================================================
   Add/Edit Form — Vendor (wireframe PRZ9N / KLgxj, light + dark)

   STORY-106 (AD-S07). Shared by Add.razor and Edit.razor through VendorForm.razor.

   G139 — Blazor scoped CSS is PER-COMPONENT. The sibling ProjectForm.razor.css
   defines .project-form-* and its selectors do NOT reach this component, so the
   rules below are duplicated-and-renamed rather than inherited. Shipping the markup
   without this file would render the card unstyled (build stays 0/0 — silent).

   These styles are page-scoped ON PURPOSE and live here rather than in
   wwwroot/app.css: they re-skin the form to the wireframe's measured geometry
   (full-width card inside the 24px page padding, padding 40, filled borderless
   44px inputs, sentence-case 12/600 labels, navy primary / filled-neutral
   secondary action row), which is the opposite of the shared aims-profile-*
   design system on every defining property. Per the project's CSS architecture,
   page-specific styling belongs in a scoped .razor.css — the global stylesheet
   keeps only shared component classes and design tokens.

   G143 — the VALUES below are re-derived from the AD-S07 frames, NOT copied from
   ProjectForm.razor.css. Two structural differences matter:
     (1) six of the ten fields sit in TWO-COLUMN rows (frame "Row 1/2/3/4",
         gap 20, each field hug-equal at 50%), which the Project form does not
         have — hence .vendor-form-row, with `flex: 1 1 0` per G87 so header and
         data stay content-independent;
     (2) the Address field is a 70px TEXTAREA, not a 44px input.
   The frame also draws the labels with the asterisk inside the label text
   ("Vendor Name *"); it renders as a non-coloured span, matching the sibling.

   The Status toggle is the one Radzen component in this form. Its rules stay in
   app.css alongside finance-switch / asset-type-switch / allocation-switch /
   project-switch / vendor-switch (the established convention for switch styling),
   because CSS isolation cannot reach Radzen's internal DOM with plain selectors — G29.

   Colours route through --aims-* tokens or pinned hexes with explicit
   [data-theme="dark"] counterparts (G59). Dark values are the dark frame's own
   (#1E293B card / #0F172A input / #F1F5F9 label / #334155 cancel / #4DD9C0 save).
   ============================================================================ */

.vendor-form-card[b-8c6r41y7ds] {
    width: 100%;
    margin: 0;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: var(--aims-surface-bg);
    /* Frame PRZ9N/KLgxj: the card is a rounded surface on the page background. */
    border: none;
    border-radius: 12px;
}

.vendor-form-fields[b-8c6r41y7ds] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Frame "Row 1..4" — a two-column row (gap 20). */
.vendor-form-row[b-8c6r41y7ds] {
    display: flex;
    gap: 20px;
}

.vendor-form-row .vendor-form-field[b-8c6r41y7ds] {
    /* G87 — flex-basis 0 keeps the two columns content-independent; `auto` would
       let a long label/value widen one column and drift the pair out of alignment. */
    flex: 1 1 0;
    min-width: 0;
}

.vendor-form-field[b-8c6r41y7ds] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.vendor-form-label[b-8c6r41y7ds] {
    font-size: 12px;
    font-weight: 600;
    line-height: 20px;
    color: var(--aims-text-primary);
}

/* Required marker inherits the label colour — the frame does not draw a red asterisk. */
.vendor-form-required[b-8c6r41y7ds] {
    color: inherit;
}

.vendor-form-input[b-8c6r41y7ds] {
    width: 100%;
    height: 44px;
    /* Transparent border keeps the 44px box stable when the error state paints it. */
    border: 1.5px solid transparent;
    border-radius: 8px;
    padding: 0 14px;
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    color: var(--aims-text-primary);
    background: var(--aims-page-bg);
    outline: none;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.vendor-form-input[b-8c6r41y7ds]::placeholder {
    color: #A0AEC0;
}

/* The field glyphs and the info/chevron glyphs carry NO inline colour: they inherit
   from these classes so the theme pair can be expressed. Frames PRZ9N/KLgxj draw
   them #A0AEC0 and the dark frames W2CvXJ/o1CkPg draw them #64748B — the same pair
   the placeholder uses (G59: an inline Style could not carry a dark counterpart). */
.vendor-field-icon[b-8c6r41y7ds],
.vendor-tooltip-icon[b-8c6r41y7ds] {
    color: #A0AEC0;
}

[data-theme="dark"] .vendor-field-icon[b-8c6r41y7ds],
[data-theme="dark"] .vendor-tooltip-icon[b-8c6r41y7ds] {
    color: #64748B;
}

[data-theme="dark"] .vendor-form-input[b-8c6r41y7ds]::placeholder {
    color: #64748B;
}

.vendor-form-input:focus[b-8c6r41y7ds] {
    box-shadow: 0 0 0 3px rgba(77, 217, 192, 0.15);
}

.vendor-form-input.has-icon-left[b-8c6r41y7ds] {
    padding-left: 44px;
}

/* Frame "Address Field Input Wrap" — the one 70px multi-line control. */
.vendor-form-textarea[b-8c6r41y7ds] {
    height: 70px;
    min-height: 70px;
    padding: 12px 14px;
    line-height: 1.4;
    resize: vertical;
}

/* The State dropdown has no native chevron (the frame draws its own glyph as an
   overlay icon), and renders the placeholder option in the muted colour. */
select.vendor-form-input[b-8c6r41y7ds] {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

select.vendor-form-input.is-placeholder[b-8c6r41y7ds] {
    color: #A0AEC0;
}

select.vendor-form-input option[b-8c6r41y7ds] {
    background: var(--aims-surface-bg);
    color: var(--aims-text-primary);
}

/* Dark theme: a PRE-EXISTING global rule — app.css [data-theme="dark"]
   input[type="text"]/textarea/select { border-color: var(--aims-border-color) !important }
   (STORY-091) — pins a visible #334155 border at specificity (0,2,1), which
   outranks the transparent rest border above and made the dark form show
   outlined inputs where the frames (W2CvXJ / o1CkPg) draw them borderless.
   Same technique as G47: match the global rule's !important with a HIGHER
   specificity (0,3,1) so the frame's treatment wins in dark mode too.
   Placed BEFORE the error rule below, which carries equal specificity — the
   later error rule therefore still wins when a field is invalid. */
[data-theme="dark"] input.vendor-form-input[b-8c6r41y7ds],
[data-theme="dark"] input.vendor-form-input.has-icon-left[b-8c6r41y7ds],
[data-theme="dark"] textarea.vendor-form-input[b-8c6r41y7ds],
[data-theme="dark"] select.vendor-form-input[b-8c6r41y7ds] {
    border-color: transparent !important;
}

/* G47 — the invalid ring must survive BOTH themes (explicit dark counterpart).
   Without the [data-theme="dark"] selector the app's dark input border rule
   (specificity 0,2,1, !important) silently wins and the field looks valid. */
input.vendor-form-input.aims-input-error[b-8c6r41y7ds],
textarea.vendor-form-input.aims-input-error[b-8c6r41y7ds],
select.vendor-form-input.aims-input-error[b-8c6r41y7ds],
[data-theme="dark"] input.vendor-form-input.aims-input-error[b-8c6r41y7ds],
[data-theme="dark"] textarea.vendor-form-input.aims-input-error[b-8c6r41y7ds],
[data-theme="dark"] select.vendor-form-input.aims-input-error[b-8c6r41y7ds] {
    border-color: #EF4444 !important;
}

/* V8 / DV-10 — the non-blocking phone/fax format hint. Amber, never red, and never
   accompanied by the invalid border: the field is still submittable. */
.vendor-form-warning[b-8c6r41y7ds] {
    font-size: 12px;
    line-height: 18px;
    color: #B45309;
}

[data-theme="dark"] .vendor-form-warning[b-8c6r41y7ds] {
    color: #FBBF24;
}

.vendor-form-actions[b-8c6r41y7ds] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    /* Frame: Button Row padding [8, 0, 0, 0]. */
    padding-top: 8px;
}

/* Wireframe: navy #0D1B2A primary, filled #F0F1F3 secondary — both 40px tall,
   padding 0 20, radius 8. AimsButton's buttons live in another component's
   markup, so these rules use ::deep to cross the CSS-isolation boundary
   explicitly (the same technique the sibling forms use). */
.vendor-form-actions[b-8c6r41y7ds]  .aims-btn-primary {
    height: 40px;
    background-color: var(--aims-navy);
    color: #FFFFFF;
    font-weight: 600;
    box-shadow: none;
}

.vendor-form-actions[b-8c6r41y7ds]  .aims-btn-primary:hover {
    background-color: var(--aims-navy-light);
}

.vendor-form-actions[b-8c6r41y7ds]  .aims-btn-secondary {
    height: 40px;
    background-color: var(--aims-icon-btn-bg);
    border: none;
    color: var(--aims-text-primary);
    font-weight: 600;
}

.vendor-form-actions[b-8c6r41y7ds]  .aims-btn-secondary:hover {
    background-color: var(--aims-icon-btn-hover);
}

/* Dark-theme counterparts (G59) — mirror the dark wireframe frames W2CvXJ / o1CkPg. */
[data-theme="dark"] .vendor-form-actions[b-8c6r41y7ds]  .aims-btn-primary {
    background-color: var(--aims-teal);
    color: var(--aims-navy);
}

[data-theme="dark"] .vendor-form-actions[b-8c6r41y7ds]  .aims-btn-primary:hover {
    background-color: #3FC4AE;
}

[data-theme="dark"] .vendor-form-actions[b-8c6r41y7ds]  .aims-btn-secondary {
    background-color: #334155;
    color: #F1F5F9;
}

[data-theme="dark"] .vendor-form-actions[b-8c6r41y7ds]  .aims-btn-secondary:hover {
    background-color: #3E4C63;
}

/* The frames are 1440px desktop; below tablet width the two-column rows stack so
   the fields stay usable (no frame governs a narrow viewport). */
@media (max-width: 900px) {
    .vendor-form-row[b-8c6r41y7ds] {
        flex-direction: column;
        gap: 20px;
    }
}
/* /Components/Pages/SystemSettings/WarningParameter/List.razor.rz.scp.css */
/* ============================================================================
   List page — Warning Notification Parameter (wireframe zaaER / LQJC9, light + dark)

   STORY-147 (AD-S06, UC-PS-SNA). Page-scoped styling for the warning notification
   parameter register.

   G139 — Blazor scoped CSS is PER-COMPONENT: this file styles THIS page only. The
   ActionProposal sibling defining .action-proposal-search-icon proves nothing here;
   the rules below are re-expressed for this page's own class names.

   Why these rules live here rather than in wwwroot/app.css: they are a badge nowrap
   guard and this page's empty state — both page-specific. Per the project's CSS
   architecture the global stylesheet keeps only shared component classes and design
   tokens. The shared aims-badge-* pair is deliberately NOT touched (G103).

   KEEP-ONLY-WHAT-THE-SCREEN-NEEDS (D3c/D6b) — the sibling's toolbar rules have NO
   counterpart here: this page has no search group (so no .warning-parameter-search-icon
   or .warning-parameter-clear-icon) and no export pair (so no rule reaching AimsButton's
   root, which the siblings style globally in any case — G156). The frame draws NO
   toolbar at all: no search box, no export buttons, no Add button.

   G29 — RadzenDataGrid's column widths are set on RadzenDataGridColumn
   (Width="..."), never here; the rules below only reach elements this page's own
   templates render (the cell spans).

   G59 — every colour carries a [data-theme="dark"] counterpart. The empty-state copy
   is the family's muted pair taken from the dark frame LQJC9: #64748B → #94A3B8.
   ============================================================================ */

/* --- Inactive rows ----------------------------------------------------------
   .warning-parameter-row-inactive is deliberately NOT declared in this file.
   G139 says a .razor.css file cannot style ANOTHER page's classes; it does not
   require this page's classes to be declared here. The inactive-row rule is a
   REGISTER-WIDE treatment shared by all six settings lists — ActionProposal, Vendor,
   Project, Asset Category, Facility Management Code and now Warning Parameter — so it
   lives with its siblings in wwwroot/app.css (plan §5), where it maps to the
   --aims-text-muted token (#64748B light / #94A3B8 dark) and also sets
   --rz-grid-cell-color so the rule still lands when the class is placed on the <td>
   rather than on an inner <span>. Declaring a second, page-scoped copy here would
   silently shadow the global one the day either value changes.
   Applied by List.razor to the Warning Category cell of rows whose IsActive is false. */

/* --- G99: keep the Status badge on one line -------------------------------
   The badge reuses the shared aims-badge-active / -inactive pair (never recoloured —
   G103) but must opt OUT of any cell-level wrapping. Frame zaaER draws the badge as a
   90x24 r12 chip with the label centred. */
.warning-parameter-status-badge[b-h84n835et0] {
    white-space: nowrap;
    overflow-wrap: normal;
}

/* --- Empty state -----------------------------------------------------------
   Text only — there is no create path (D3c), so unlike every sibling register this
   empty state carries no icon and no "Add" prompt.
   The frame draws NO empty state (its four rows are the four seeded parameters), so
   there is no AD-S06 value to re-derive from: the copy colour is the family's shared
   muted pair, the same one the five sibling registers use. The sibling's `gap: 12px`
   is dropped with the icon/button stack it spaced. */
.warning-parameter-empty-state[b-h84n835et0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 28px 20px;
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    color: #64748B;
}

.warning-parameter-empty-state p[b-h84n835et0] {
    margin: 0;
}

[data-theme="dark"] .warning-parameter-empty-state[b-h84n835et0] {
    color: #94A3B8;
}
/* /Components/Pages/SystemSettings/WarningParameter/WarningParameterForm.razor.rz.scp.css */
/* ============================================================================
   Edit Form — Warning Notification Parameter (wireframe ejlyy / R2yJL, light + dark)

   STORY-147 (AD-S06). Hosted by Edit.razor through WarningParameterForm.razor.
   There is no Add screen (D3(c) descopes create), so this stylesheet re-skins ONE
   form in ONE mode.

   G139 — Blazor scoped CSS is PER-COMPONENT. The sibling ActionProposalForm.razor.css
   defines .action-proposal-form-* and its selectors do NOT reach this component, so
   the rules below are re-expressed rather than inherited. Shipping the markup without
   this file would render the card unstyled (build stays 0/0 — silent).

   These styles are page-scoped ON PURPOSE and live here rather than in
   wwwroot/app.css: they re-skin the form to the wireframe's measured geometry
   (full-width card inside the 24px page padding, padding 40, gap 20, filled
   borderless 44px input, sentence-case 12/600 label, navy primary / filled-neutral
   secondary action row), which is the opposite of the shared aims-profile-* design
   system on every defining property. Per the project's CSS architecture, page-specific
   styling belongs in a scoped .razor.css — the global stylesheet keeps only shared
   component classes and design tokens. That includes (G29) the Status toggle: its
   .warning-parameter-switch rules live in app.css with the sibling switch blocks,
   because plain scoped selectors cannot reach Radzen's internal DOM.

   G143 — the VALUES below are re-derived from the AD-S06 frames + the read-only
   precedent UIUX specified (plan §9a DV-2), NOT copied from ActionProposalForm.razor.css.
   The structural differences matter:
     (1) this form has FOUR fields — a read-only Warning Category, TWO numeric text
         boxes, and the Status toggle — where the sibling has one text field;
     (2) the read-only field carries a DIFFERENT surface (light #F0F1F3 / dark #334155)
         while keeping every other property identical to its editable siblings
         (h44 / r8 / padding 0 14 / primary value colour / 18px glyph). The surface is
         pinned rather than tokenised because #F0F1F3 is NOT --aims-page-bg and the dark
         value is deliberately LIGHTER than the card (#1E293B) so the field stops
         reading as an inset input well — both are DV-2, do not "correct" them;
     (3) the frames draw NO tooltip glyph, so no field has a right-side adornment and no
         input needs right padding;
     (4) the frames are 1440px desktop with everything full-width, so the sibling's
         narrow-viewport stacking media query has no counterpart here.
   The editable labels draw the asterisk INSIDE the label text ("Number of Days *"),
   matching the frame; the read-only label deliberately does not (DV-2).

   Colours route through --aims-* tokens or pinned hexes with explicit
   [data-theme="dark"] counterparts (G59). Dark values are the dark frame's own
   (#1E293B card / #334155 read-only surface / #F1F5F9 value text / #334155 cancel /
   #4DD9C0 save).
   ============================================================================ */

.warning-parameter-form-card[b-4rw3qklb01] {
    width: 100%;
    margin: 0;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: var(--aims-surface-bg);
    /* Frame ejlyy/R2yJL: the card is a rounded surface on the page background. */
    border: none;
    border-radius: 12px;
}

.warning-parameter-form-fields[b-4rw3qklb01] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Frame "Row 1" / "Row 2" / "Row 3" — each a full-width row (gap 20) holding one field. */
.warning-parameter-form-row[b-4rw3qklb01] {
    display: flex;
    gap: 20px;
}

.warning-parameter-form-row .warning-parameter-form-field[b-4rw3qklb01] {
    /* G87 — flex-basis 0 keeps the field content-independent; `auto` would let a
       long value widen it away from the frame's fill_container geometry. */
    flex: 1 1 0;
    min-width: 0;
}

.warning-parameter-form-field[b-4rw3qklb01] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.warning-parameter-form-label[b-4rw3qklb01] {
    font-size: 12px;
    font-weight: 600;
    line-height: 20px;
    color: var(--aims-text-primary);
}

.warning-parameter-form-input[b-4rw3qklb01] {
    width: 100%;
    height: 44px;
    /* Transparent border keeps the 44px box stable when the error state paints it. */
    border: 1.5px solid transparent;
    border-radius: 8px;
    padding: 0 14px;
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    color: var(--aims-text-primary);
    background: var(--aims-page-bg);
    outline: none;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.warning-parameter-form-input[b-4rw3qklb01]::placeholder {
    color: #A0AEC0;
}

/* The field glyph carries NO inline colour: it inherits from this class so the
   theme pair can be expressed. Frame ejlyy draws it #A0AEC0 and the dark frame
   R2yJL draws it #64748B (G59: an inline Style could not carry a dark counterpart). */
.warning-parameter-form-icon[b-4rw3qklb01] {
    color: #A0AEC0;
}

[data-theme="dark"] .warning-parameter-form-icon[b-4rw3qklb01] {
    color: #64748B;
}

[data-theme="dark"] .warning-parameter-form-input[b-4rw3qklb01]::placeholder {
    color: #64748B;
}

.warning-parameter-form-input:focus[b-4rw3qklb01] {
    box-shadow: 0 0 0 3px rgba(77, 217, 192, 0.15);
}

.warning-parameter-form-input.has-icon-left[b-4rw3qklb01] {
    padding-left: 44px;
}

/* ----------------------------------------------------------------------------
   READ-ONLY Warning Category (AC6 / D5(a), plan §9a DV-2) — STORY-147's re-derivation,
   no sibling precedent. Surface swap ONLY: light #F0F1F3 (the family's muted-surface
   token, shared with the table header and the bell button) instead of the editable
   --aims-page-bg (#F7F8FA); dark #334155 instead of #0F1923. Everything else is
   byte-identical to the editable siblings. #F8FAFC was rejected (lighter than the
   editable fill on a white card → would read as MORE editable); a muted value colour
   was rejected on contrast (#A0AEC0 on #F0F1F3 ≈ 1.9:1, WCAG AA fail).

   This field is a Radzen RadzenTextBox, so its <input> is rendered by ANOTHER
   component and carries none of this file's scope attribute — a plain
   `input.warning-parameter-form-input` selector here would never match it (G29/G139).
   The selectors below therefore reach it from the wrapper, which IS in this
   component's markup and does carry the scope. `!important` is needed on the surface
   and the value colour because Radzen's own `.rz-textbox` rule sets both.
   ---------------------------------------------------------------------------- */
.warning-parameter-form-readonly-group[b-4rw3qklb01] {
    /* Semantics, not decoration: the field is focusable and readable but cannot be
       edited, so it must not present a text caret affordance. */
    cursor: not-allowed;
}

.warning-parameter-form-readonly-group[b-4rw3qklb01]  input {
    width: 100%;
    height: 44px;
    border: 1.5px solid transparent;
    border-radius: 8px;
    padding: 0 14px;
    /* Same 44px geometry as .has-icon-left above — expressed here because the Radzen
       input never receives that class in this stylesheet's scope. */
    padding-left: 44px;
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    /* Radzen's .rz-textbox pins a computed line-height and its own transition; both are
       neutralised here so the read-only field's computed styles match its editable
       siblings exactly rather than differing by framework default. */
    line-height: normal;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
    /* PRIMARY text colour — do NOT mute it (DV-2: muted-on-muted fails WCAG AA). */
    color: #0D1B2A !important;
    background: #F0F1F3 !important;
    box-shadow: none;
    outline: none;
    cursor: not-allowed;
}

[data-theme="dark"] .warning-parameter-form-readonly-group[b-4rw3qklb01]  input {
    color: #F1F5F9 !important;
    /* Deliberately LIGHTER than the dark card (--aims-surface-bg #1A2332) so the field
       stops reading as an inset input well — DV-2, do not "correct" it. */
    background: #334155 !important;
    border-color: transparent !important;
}

/* Dark theme: a PRE-EXISTING global rule — app.css [data-theme="dark"]
   input[type="text"]/textarea/select { border-color: var(--aims-border-color) !important }
   (STORY-091) — pins a visible #334155 border at specificity (0,2,1), which outranks
   the transparent rest border above and made the dark form show outlined inputs where
   the frames (R2yJL) draw them borderless. Same technique as G47: match the global
   rule's !important with a HIGHER specificity (0,3,1 post-isolation) so the frame's
   treatment wins in dark mode too.
   Placed BEFORE the error rule below, which carries equal specificity — the later
   error rule therefore still wins when a field is invalid. */
[data-theme="dark"] input.warning-parameter-form-input[b-4rw3qklb01],
[data-theme="dark"] input.warning-parameter-form-input.has-icon-left[b-4rw3qklb01] {
    border-color: transparent !important;
}

/* G47 — the invalid ring must survive BOTH themes (explicit dark counterpart).
   Without the [data-theme="dark"] selector the app's dark input border rule
   (specificity 0,2,1, !important) silently wins and the field looks valid. The shared
   app.css pair is NOT sufficient here: this form's own
   `input.warning-parameter-form-input` rule and app.css's global dark input rule both
   outrank it. STORY-114 lost exactly this half of the fix — the scoped, dark-prefixed
   pair below is what actually paints the border in dark mode. */
input.warning-parameter-form-input.aims-input-error[b-4rw3qklb01],
[data-theme="dark"] input.warning-parameter-form-input.aims-input-error[b-4rw3qklb01] {
    border-color: #EF4444 !important;
}

.warning-parameter-form-actions[b-4rw3qklb01] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    /* Frame: Button Row padding [8, 0, 0, 0]. */
    padding-top: 8px;
}

/* Wireframe: navy #0D1B2A primary, filled #F0F1F3 secondary — both 40px tall,
   padding 0 20, radius 8. AimsButton's buttons live in another component's
   markup, so these rules use ::deep to cross the CSS-isolation boundary
   explicitly (the same technique the sibling forms use). */
.warning-parameter-form-actions[b-4rw3qklb01]  .aims-btn-primary {
    height: 40px;
    background-color: var(--aims-navy);
    color: #FFFFFF;
    font-weight: 600;
    box-shadow: none;
}

.warning-parameter-form-actions[b-4rw3qklb01]  .aims-btn-primary:hover {
    background-color: var(--aims-navy-light);
}

.warning-parameter-form-actions[b-4rw3qklb01]  .aims-btn-secondary {
    height: 40px;
    background-color: var(--aims-icon-btn-bg);
    border: none;
    color: var(--aims-text-primary);
    font-weight: 600;
}

.warning-parameter-form-actions[b-4rw3qklb01]  .aims-btn-secondary:hover {
    background-color: var(--aims-icon-btn-hover);
}

/* Dark-theme counterparts (G59) — mirror the dark wireframe frame R2yJL. */
[data-theme="dark"] .warning-parameter-form-actions[b-4rw3qklb01]  .aims-btn-primary {
    background-color: var(--aims-teal);
    color: var(--aims-navy);
}

[data-theme="dark"] .warning-parameter-form-actions[b-4rw3qklb01]  .aims-btn-primary:hover {
    background-color: #3FC4AE;
}

[data-theme="dark"] .warning-parameter-form-actions[b-4rw3qklb01]  .aims-btn-secondary {
    background-color: #334155;
    color: #F1F5F9;
}

[data-theme="dark"] .warning-parameter-form-actions[b-4rw3qklb01]  .aims-btn-secondary:hover {
    background-color: #3E4C63;
}
/* /Components/Shared/DocumentManager.razor.rz.scp.css */
/* ============================================================================
   DocumentManager.razor.css — scoped styles for the reusable document manager.
   STORY-095: ports the proven aims-gallery-* thumbnail-strip / lightbox UX from
   RegisterStep1.razor.css so Gallery mode renders image documents identically.
   (Scoped CSS only applies to markup authored inside DocumentManager.razor.)
   ============================================================================ */

.aims-docman[b-0x37r1byne] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ============================================================================
   Image Gallery (Gambar Aset) — ported verbatim from RegisterStep1.razor.css
   ============================================================================ */

.aims-gallery-wrapper[b-0x37r1byne] {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 130px;
    max-height: 130px;
    overflow: hidden;
    flex-shrink: 0;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ============================================================================
   Image Preview Popup (lightbox)
   ============================================================================ */

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

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

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

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

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

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

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

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

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

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